feat: add changeset

.changeset/sixty-chairs-sip.md

@@ -1,7 +0,0 @@
----
-"@status-im/icons": major
----
-
-Generated each icon group separately for better correctness
-Added separate export paths for the following icon sets: ./12, ./16, ./20, ./social, and ./reactions.
-Removed Tamagui runtime

.changeset/tasty-steaks-hang.md

@@ -0,0 +1,5 @@
+---
+'@status-im/colors': minor
+---
+
+Sync new colors

.vscode/extensions.json

@@ -4,8 +4,8 @@
     "dbaeumer.vscode-eslint",
     "zxh404.vscode-proto3",
     "ms-vscode.hexeditor",
+    "zixuanchen.vitest-explorer",
     "mikestead.dotenv",
-    "bradlc.vscode-tailwindcss",
-    "vitest.explorer"
+    "bradlc.vscode-tailwindcss"
   ]
 }

.vscode/launch.json

@@ -26,15 +26,14 @@
       "smartStep": true,
       "sourceMaps": true,
       "env": {
-        // "DEBUG": "*,-vite*,-connect:*",
+        "DEBUG": "*",
         "DEBUG_HIDE_DATE": "0",
         "DEBUG_COLORS": "1",
         "VITE_NODE": "true"
       },
       "runtimeArgs": ["--preserve-symlinks"],
       "outFiles": ["${workspaceFolder}/**/*.js"],
-      "resolveSourceMapLocations": ["**/*"],
-      "outputCapture": "std"
+      "resolveSourceMapLocations": ["**/*"]
     },
     {
       "type": "node",

README.md

@@ -125,7 +125,3 @@ And run it:
 ```sh
 yarn workspace with-vite run dev
 ```
-
-## Sponsors
-
-This project is sponsored by Browserstack.

apps/mobile/package.json

@@ -34,7 +34,7 @@
   "devDependencies": {
     "@babel/core": "^7.17.9",
     "@expo/metro-config": "^0.3.21",
-    "@tamagui/babel-plugin": "1.74.21",
+    "@tamagui/babel-plugin": "1.36.4",
     "@types/react-native": "~0.70.6",
     "babel-plugin-module-resolver": "^4.1.0",
     "babel-plugin-transform-inline-environment-variables": "^0.4.4",

apps/web/package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "@status-im/components": "*",
     "@status-im/icons": "*",
-    "@tamagui/core": "1.74.21",
+    "@tamagui/core": "1.36.4",
     "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.74.21",
+    "@tamagui/vite-plugin": "1.36.4",
     "@types/react": "^18.0.33",
     "@types/react-dom": "^18.0.11",
     "@vitejs/plugin-react-swc": "^3.2.0",

examples/with-next/pages/index.tsx

@@ -9,10 +9,7 @@ if (!publicKey) {
   )
 }
 
-const environment = process.env.NEXT_PUBLIC_ENVIRONMENT as
-  | 'development'
-  | 'preview'
-  | 'production'
+const environment = process.env.NEXT_PUBLIC_ENVIRONMENT as 'production' | 'test'
 
 /**
  * For some reason the regular import fails with a server error:

examples/with-vite/src/app.tsx

@@ -8,10 +8,7 @@ if (!publicKey) {
   )
 }
 
-const environment = process.env.ENVIRONMENT as
-  | 'development'
-  | 'preview'
-  | 'production'
+const environment = process.env.ENVIRONMENT as 'production' | 'test'
 
 export const App = () => {
   return (

packages/colors/CHANGELOG.md

@@ -1,17 +1,5 @@
 # @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

packages/colors/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@status-im/colors",
-  "version": "0.4.0",
+  "version": "0.2.0",
   "files": [
     "types",
     "dist",
@@ -28,8 +28,7 @@
     "lint": "eslint src",
     "lint:fix": "yarn lint --fix",
     "format": "prettier --write src",
-    "clean": "rimraf dist node_modules .turbo",
-    "prepack": "yarn build"
+    "clean": "rimraf dist node_modules .turbo"
   },
   "peerDependencies": {},
   "devDependencies": {

packages/colors/src/customisation.ts

@@ -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%)',
-  '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%)',
+  '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%)',
   'magenta-50': 'rgba(236 38 108 / 100%)',
   'magenta-60': 'rgba(189 30 86 / 100%)',
   'magenta/10': 'rgba(236 38 108 / 10%)',

packages/components/CHANGELOG.md

@@ -1,80 +1,5 @@
 # @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

packages/components/consts/opacity.ts

@@ -1,109 +0,0 @@
-// 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,
-  },
-}

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@status-im/components",
-  "version": "0.6.5",
+  "version": "0.4.2",
   "sideEffects": [
     "*.css"
   ],
@@ -21,8 +21,7 @@
     "storybook": "node ./scripts/storybook.js",
     "storybook:dev": "storybook dev -p 3001",
     "storybook:build": "storybook build",
-    "clean": "rimraf node_modules dist .turbo storybook-static .tamagui",
-    "prepack": "yarn build"
+    "clean": "rimraf node_modules dist .turbo storybook-static .tamagui"
   },
   "peerDependencies": {
     "react": "^18.2.0"
@@ -38,38 +37,37 @@
     "@radix-ui/react-tooltip": "^1.0.5",
     "@status-im/colors": "*",
     "@status-im/icons": "*",
-    "@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",
+    "@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",
     "date-fns": "^2.30.0",
     "expo-blur": "^12.2.2",
     "expo-linear-gradient": "^12.1.2",
     "react-day-picker": "^8.7.1",
-    "tamagui": "1.74.21",
+    "tamagui": "1.36.4",
     "zustand": "^4.3.7"
   },
   "devDependencies": {
-    "@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",
+    "@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": "*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-native-svg": "^13.8.0",
     "react-native-web": "^0.19.5",
-    "storybook": "7.5.1",
+    "storybook": "7.4.3",
     "storybook-addon-designs": "7.0.0-beta.1",
     "storybook-dark-mode": "^3.0.0",
     "vite": "^4.2.1"

packages/components/src/avatar/avatar.stories.tsx

@@ -45,161 +45,79 @@ export const User: StoryObj<UserArgs> = {
   render: args => (
     <Stack space flexDirection="row">
       <Stack space flexDirection="column">
-        <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 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 alignItems="flex-start">
           <Avatar {...args} size={80} indicator="online" />
@@ -209,27 +127,95 @@ export const User: StoryObj<UserArgs> = {
           <Avatar {...args} size={28} indicator="online" />
           <Avatar {...args} size={24} indicator="online" />
         </Stack>
-        <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 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>
       </Stack>
     </Stack>

packages/components/src/avatar/avatar.tsx

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

packages/components/src/banner/banner.stories.tsx

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

packages/components/src/banner/banner.tsx

@@ -14,7 +14,12 @@ type Props = {
 }
 
 const Banner = (props: Props) => {
-  const { icon = null, children, count, backgroundColor = '$blue/20' } = props
+  const {
+    icon = null,
+    children,
+    count,
+    backgroundColor = '$primary-50-opa-20',
+  } = props
 
   return (
     <Base backgroundColor={backgroundColor}>

packages/components/src/button/button.stories.tsx

@@ -122,27 +122,13 @@ export const PrimaryIconOnlyCirlce: Story = {
   },
 }
 
-export const Positive: Story = {
+export const Success: 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',
@@ -150,13 +136,6 @@ export const Outline: Story = {
   },
 }
 
-export const OutlineBlur: Story = {
-  args: {
-    variant: 'blur_outline',
-    children: 'Click me',
-  },
-}
-
 export const Ghost: Story = {
   args: {
     variant: 'ghost',

packages/components/src/button/button.tsx

@@ -38,7 +38,7 @@ const textColors: MapVariant<typeof Base, 'variant'> = {
   sky: '$white-100',
   yellow: '$white-100',
   pink: '$white-100',
-  copper: '$white-100',
+  cooper: '$white-100',
   camel: '$white-100',
   magenta: '$white-100',
   yin: '$white-100',
@@ -46,10 +46,6 @@ 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']> = {
@@ -123,10 +119,10 @@ const Base = styled(View, {
   variants: {
     variant: {
       primary: {
-        backgroundColor: '$blue-50',
-        hoverStyle: { backgroundColor: '$blue-60' },
+        backgroundColor: '$primary-50',
+        hoverStyle: { backgroundColor: '$primary-60' },
         // TODO: update background color
-        pressStyle: { backgroundColor: '$blue-50' },
+        pressStyle: { backgroundColor: '$primary-50' },
       },
       positive: {
         backgroundColor: '$success-50',
@@ -178,9 +174,9 @@ const Base = styled(View, {
         pressStyle: { backgroundColor: '$orange-50' },
       },
       army: {
-        backgroundColor: '$army-50',
-        hoverStyle: { backgroundColor: '$army-60' },
-        pressStyle: { backgroundColor: '$army-50' },
+        backgroundColor: '$indigo-50',
+        hoverStyle: { backgroundColor: '$indigo-60' },
+        pressStyle: { backgroundColor: '$indigo-50' },
       },
       turquoise: {
         backgroundColor: '$turquoise-50',
@@ -202,10 +198,10 @@ const Base = styled(View, {
         hoverStyle: { backgroundColor: '$pink-60' },
         pressStyle: { backgroundColor: '$pink-50' },
       },
-      copper: {
-        backgroundColor: '$copper-50',
-        hoverStyle: { backgroundColor: '$copper-60' },
-        pressStyle: { backgroundColor: '$copper-50' },
+      cooper: {
+        backgroundColor: '$cooper-50',
+        hoverStyle: { backgroundColor: '$cooper-60' },
+        pressStyle: { backgroundColor: '$cooper-50' },
       },
       camel: {
         backgroundColor: '$camel-50',
@@ -213,7 +209,7 @@ const Base = styled(View, {
         pressStyle: { backgroundColor: '$camel-50' },
       },
       magenta: {
-        backgroundColor: '$magenta-50',
+        backgroundColor: '$magenta',
         hoverStyle: { backgroundColor: '$magenta-60' },
         pressStyle: { backgroundColor: '$magenta-50' },
       },
@@ -234,19 +230,6 @@ 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: {

packages/components/src/channel/channel.tsx

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

packages/components/src/checkbox/checkbox.tsx

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

packages/components/src/community/topbar/topbar.tsx

@@ -59,7 +59,7 @@ const Topbar = (props: Props) => {
         padding={16}
         backgroundColor={'$blurBackground'}
         borderBottomWidth={1}
-        borderColor={blur ? 'transparent' : '$neutral-80/10'}
+        borderColor={blur ? 'transparent' : '$neutral-80-opa-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/40" />
+            <LockedIcon size={20} color="$neutral-80-opa-40" />
           </Stack>
           <Stack
-            backgroundColor="$neutral-80/10"
+            backgroundColor="$neutral-80-opa-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/50" truncate>
+          <Text size={13} weight="medium" color="$neutral-80-opa-50" truncate>
             {description}
           </Text>
         </Stack>

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

@@ -92,13 +92,7 @@ const Label = (props: {
   const { children, size, type = 'default' } = props
 
   return (
-    <Text
-      size={size}
-      weight="medium"
-      color="$neutral-100"
-      type={type}
-      select={false}
-    >
+    <Text size={size} weight="medium" color="$neutral-100" type={type}>
       {children}
     </Text>
   )
@@ -194,7 +188,7 @@ const ContextTag = (props: Props) => {
               type="icon"
               size={avatarSizes[size]}
               icon={<PlayIcon size={16} />}
-              backgroundColor="$blue-50"
+              backgroundColor="$primary-50"
               color="$white-100"
             />
             <Label size={textSize}>{props.audioLength}</Label>
@@ -220,7 +214,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>
@@ -294,19 +288,18 @@ const Base = styled(View, {
   display: 'inline-flex',
   flexDirection: 'row',
   alignItems: 'center',
-  cursor: 'default',
 
   variants: {
     outline: {
       true: {
         borderWidth: '1px',
-        borderColor: '$blue-50',
+        borderColor: '$primary-50',
         borderStyle: 'solid',
       },
     },
     blur: {
       true: {
-        backgroundColor: '$neutral-80/5',
+        backgroundColor: '$neutral-80-opa-5',
       },
       false: {
         backgroundColor: '$neutral-10',

packages/components/src/counter/counter.tsx

@@ -37,7 +37,7 @@ const Base = styled(Stack, {
 })
 
 const Content = styled(Stack, {
-  backgroundColor: '$blue-50',
+  backgroundColor: '$primary-50',
   paddingHorizontal: 3,
   paddingVertical: 0,
   borderRadius: '$6',
@@ -53,10 +53,10 @@ const Content = styled(Stack, {
   variants: {
     type: {
       default: {
-        backgroundColor: '$blue-50',
+        backgroundColor: '$primary-50',
       },
       secondary: {
-        backgroundColor: '$neutral-80/5',
+        backgroundColor: '$neutral-80-opa-5',
       },
       grey: {
         backgroundColor: '$neutral-10',

packages/components/src/dividers/divider-new-messages/divider-new-messages.stories.tsx

@@ -22,10 +22,10 @@ export const Default: Story = {
   render: () => {
     return (
       <Stack gap={24}>
-        <DividerNewMessages color="$blue-50" />
+        <DividerNewMessages color="$primary-50" />
         <DividerNewMessages color="$yellow-50" />
         <DividerNewMessages color="$turquoise-50" />
-        {/* <NewMessages color="$copper-50" /> */}
+        {/* <NewMessages color="$cooper-50" /> */}
         {/* <NewMessages color="$sky-50" /> */}
         {/* <NewMessages color="$camel-50" /> */}
         <DividerNewMessages color="$orange-50" />

packages/components/src/dividers/divider-new-messages/divider-new-messages.tsx

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

packages/components/src/dropdown-menu/dropdown-menu.tsx

@@ -103,7 +103,7 @@ const Content = styled(DropdownMenuContent, {
   backgroundColor: '$white-100',
 
   shadowRadius: 30,
-  shadowOffset: { width: 0, height: 8 },
+  shadowOffset: '0px 8px',
   shadowColor: 'rgba(9, 16, 28, 0.12)',
 })
 

packages/components/src/dynamic-button/dynamic-button.tsx

@@ -67,15 +67,15 @@ const Button = styled(View, {
   variants: {
     type: {
       mention: {
-        backgroundColor: '$blue-50',
-        hoverStyle: { backgroundColor: '$blue-60' },
-        pressStyle: { backgroundColor: '$blue-50' },
+        backgroundColor: '$primary-50',
+        hoverStyle: { backgroundColor: '$primary-60' },
+        pressStyle: { backgroundColor: '$primary-50' },
       },
 
       notification: {
-        backgroundColor: '$neutral-80/70',
-        hoverStyle: { backgroundColor: '$neutral-90/70' },
-        pressStyle: { backgroundColor: '$neutral-80/80' },
+        backgroundColor: '$neutral-80-opa-70',
+        hoverStyle: { backgroundColor: '$neutral-90-opa-70' },
+        pressStyle: { backgroundColor: '$neutral-80-opa-80' },
       },
     },
 

packages/components/src/icon-button/icon-button.tsx

@@ -28,8 +28,8 @@ const IconButton = (props: Props, ref: Ref<View>) => {
 
   const { pressableProps, color } = usePressableColors(
     {
-      default: blur ? '$neutral-80/70' : '$neutral-50',
-      hover: blur ? '$neutral-80/70' : '$neutral-50',
+      default: blur ? '$neutral-80-opa-70' : '$neutral-50',
+      hover: blur ? '$neutral-80-opa-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: icon.props.color ?? color,
+        color,
         size: 20,
       })}
     </Base>
@@ -130,49 +130,49 @@ const Base = styled(View, {
 
     variantBlur: {
       default: {
-        backgroundColor: '$neutral-80/5',
+        backgroundColor: '$neutral-80-opa-5',
         borderColor: 'transparent',
-        hoverStyle: { backgroundColor: '$neutral-80/10' },
+        hoverStyle: { backgroundColor: '$neutral-80-opa-10' },
         pressStyle: {
-          backgroundColor: '$neutral-80/10',
-          borderColor: '$neutral-80/5',
+          backgroundColor: '$neutral-80-opa-10',
+          borderColor: '$neutral-80-opa-5',
         },
       },
 
       outline: {
         backgroundColor: 'transparent',
-        borderColor: '$neutral-80/10',
-        hoverStyle: { borderColor: '$neutral-80/20' },
+        borderColor: '$neutral-80-opa-10',
+        hoverStyle: { borderColor: '$neutral-80-opa-20' },
         pressStyle: {
-          borderColor: '$neutral-80/10',
-          backgroundColor: '$neutral-80/5',
+          borderColor: '$neutral-80-opa-10',
+          backgroundColor: '$neutral-80-opa-5',
         },
       },
 
       ghost: {
         backgroundColor: 'transparent',
-        hoverStyle: { backgroundColor: '$neutral-80/5' },
+        hoverStyle: { backgroundColor: '$neutral-80-opa-5' },
         pressStyle: {
-          backgroundColor: '$neutral-80/5',
-          borderColor: '$neutral-80/10',
+          backgroundColor: '$neutral-80-opa-5',
+          borderColor: '$neutral-80-opa-10',
         },
       },
     },
 
     activeBlur: {
       default: {
-        backgroundColor: '$neutral-80/10',
-        borderColor: '$neutral-80/5',
+        backgroundColor: '$neutral-80-opa-10',
+        borderColor: '$neutral-80-opa-5',
       },
 
       outline: {
-        borderColor: '$neutral-80/10',
-        backgroundColor: '$neutral-80/5',
+        borderColor: '$neutral-80-opa-10',
+        backgroundColor: '$neutral-80-opa-5',
       },
 
       ghost: {
-        backgroundColor: '$neutral-80/5',
-        borderColor: '$neutral-80/10',
+        backgroundColor: '$neutral-80-opa-5',
+        borderColor: '$neutral-80-opa-10',
       },
     },
 

packages/components/src/icons/icons.stories.tsx

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

packages/components/src/image/image.tsx

@@ -1,15 +1,17 @@
 import { forwardRef } from 'react'
 
-import { styled } from '@tamagui/core'
-import { Image as TamaguiImage } from '@tamagui/image'
+import { setupReactNative, styled } from '@tamagui/core'
+import { Image as RNImage } from 'react-native'
 
 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'
@@ -46,7 +48,7 @@ const _Image = forwardRef(Image)
 export { _Image as Image }
 export type { Props as ImageProps }
 
-const Base = styled(TamaguiImage, {
+const Base = styled(RNImage, {
   name: 'Image',
   position: 'relative',
   zIndex: 1,
@@ -76,7 +78,7 @@ const Base = styled(TamaguiImage, {
         borderRadius: 999, // fix this once Image is migrated to tamagui image
       },
     },
-  } as const,
+  },
 
   backgroundColor: '$white-100',
 })

packages/components/src/index.tsx

@@ -28,7 +28,6 @@ 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'

packages/components/src/information-box/information-box.tsx

@@ -122,12 +122,12 @@ const Base = styled(Stack, {
         borderColor: '$neutral-20',
       },
       information: {
-        backgroundColor: '$blue/5',
-        borderColor: '$blue/10',
+        backgroundColor: '$blue-50-opa-5',
+        borderColor: '$blue-50-opa-10',
       },
       error: {
-        backgroundColor: '$danger-/5',
-        borderColor: '$danger-/10',
+        backgroundColor: '$danger-50-opa-5',
+        borderColor: '$danger-50-opa-10',
       },
     },
   },

packages/components/src/input/input.tsx

@@ -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 { Stack, styled } from '@tamagui/core'
+import { setupReactNative, Stack, styled } from '@tamagui/core'
 import { focusableInputHOC } from '@tamagui/focusable'
 import { TextInput } from 'react-native'
 
@@ -12,6 +12,10 @@ 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
@@ -214,7 +218,7 @@ const InputContainer = styled(Stack, {
     },
     error: {
       true: {
-        borderColor: '$danger-/40',
+        borderColor: '$danger-50-opa-40',
       },
     },
 

packages/components/src/messages/components/reactions-dialog.tsx

@@ -63,7 +63,7 @@ export const ReactionsDialog = (props: Props) => {
     <Dialog.Content width={352} borderRadius="$12">
       <Tabs defaultValue={initialReactionType}>
         <Stack padding={16}>
-          <Tabs.List variant="grey" size={24}>
+          <Tabs.List size={24}>
             {Object.entries(reactions).map(([reaction, value]) => {
               const Icon = REACTIONS_ICONS[reaction as keyof ReactionsType]
               return (

packages/components/src/messages/components/reactions.tsx

@@ -79,7 +79,7 @@ const Reaction = (props: ReactionProps) => {
                 and
               </Text>
               <Stack
-                backgroundColor="$turquoise/10"
+                backgroundColor="$turquoise-50-opa-10"
                 borderRadius="$6"
                 paddingHorizontal={4}
               >

packages/components/src/messages/message.tsx

@@ -39,7 +39,7 @@ const Base = styled(Stack, {
 
     pinned: {
       true: {
-        backgroundColor: '$blue/5',
+        backgroundColor: '$blue-50-opa-5',
       },
     },
   } as const,

packages/components/src/popover/popover.tsx

@@ -40,7 +40,7 @@ const PopoverContent = (props: ContentProps) => {
       backgroundColor="$white-100"
       borderRadius="$12"
       shadowRadius={30}
-      shadowOffset={{ width: 0, height: 8 }}
+      shadowOffset="0px 8px"
       shadowColor="rgba(9, 16, 28, 0.12)"
     >
       {children}

packages/components/src/shortcut/shortcut.tsx

@@ -71,8 +71,8 @@ const Base = styled(Stack, {
   variants: {
     variant: {
       primary: {
-        backgroundColor: '$blue-50',
-        borderColor: '$blue-60',
+        backgroundColor: '$primary-50',
+        borderColor: '$primary-60',
       },
       secondary: {
         backgroundColor: '$neutral-10',

packages/components/src/skeleton/topbar-skeleton.tsx

@@ -16,7 +16,7 @@ const TopbarSkeleton = () => {
           px={16}
           backgroundColor={'$blurBackground'}
           borderBottomWidth={1}
-          borderColor={'$neutral-80/10'}
+          borderColor={'$neutral-80-opa-10'}
           width="100%"
         >
           <Stack

packages/components/src/step/step.stories.tsx

@@ -56,39 +56,20 @@ export const AllVariants: Story = {
   args: {},
   render: () => (
     <Stack space flexDirection="row">
-      <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 space alignItems="center">
+        <Step type="neutral" value={1} />
+        <Step type="neutral" value={10} />
+        <Step type="neutral" value={999} />
       </Stack>
-      <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 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>
     </Stack>
   ),

packages/components/src/step/step.tsx

@@ -9,16 +9,15 @@ export type StepVariants = 'neutral' | 'complete' | 'active'
 
 type Props = {
   value: number
-  size?: 18 | 22
   type?: StepVariants
 }
 
 const Step = (props: Props) => {
-  const { size = 18, value, type = 'neutral' } = props
+  const { value, type = 'neutral' } = props
 
   return (
-    <Base size={size}>
-      <Content size={size} type={type}>
+    <Base>
+      <Content type={type}>
         <Text size={11} weight="medium" color={textColors[type]}>
           {value}
         </Text>
@@ -31,6 +30,7 @@ export { Step }
 export type { Props as StepProps }
 
 const Base = styled(Stack, {
+  paddingVertical: 1,
   minWidth: 20,
   maxWidth: 28,
   display: 'inline-flex',
@@ -38,20 +38,6 @@ 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, {
@@ -59,6 +45,9 @@ const Content = styled(Stack, {
   paddingHorizontal: 3,
   paddingVertical: 0,
   borderRadius: '$6',
+  height: 18,
+  minWidth: 18,
+  maxWidth: 28,
   justifyContent: 'center',
   alignItems: 'center',
   borderWidth: 1,
@@ -74,19 +63,7 @@ const Content = styled(Stack, {
         backgroundColor: '$blue-50',
       },
       active: {
-        backgroundColor: '$blue/10',
-      },
-    },
-    size: {
-      18: {
-        height: 18,
-        minWidth: 18,
-        maxWidth: 28,
-      },
-      22: {
-        height: 22,
-        minWidth: 22,
-        maxWidth: 32,
+        backgroundColor: '$blue-50-opa-10',
       },
     },
   },

packages/components/src/system-message/components/added-users-message-content.tsx

@@ -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/5'}
+        backgroundColor={state === 'landed' ? '$transparent' : '$blue-50-opa-5'}
         color="$blue-50"
       />
       <Stack flexDirection="row" gap={2} flexBasis="max-content" flexGrow={1}>

packages/components/src/system-message/components/deleted-message-content.tsx

@@ -26,7 +26,7 @@ const DeletedMessageContent = (props: Props) => {
         type="icon"
         size={32}
         icon={<TrashIcon size={20} />}
-        backgroundColor={state === 'landed' ? '$transparent' : '$danger-/5'}
+        backgroundColor={state === 'landed' ? '$transparent' : '$red-50-opa-5'}
         color="$neutral-100"
       />
       <Stack

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

@@ -31,7 +31,7 @@ const PinnedMessageContent = (props: Props) => {
         type="icon"
         size={32}
         icon={<PinIcon size={20} />}
-        backgroundColor={state === 'landed' ? '$transparent' : '$blue/5'}
+        backgroundColor={state === 'landed' ? '$transparent' : '$blue-50-opa-5'}
         color="$neutral-100"
       />
       <Stack

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

@@ -111,10 +111,10 @@ const Base = styled(View, {
         backgroundColor: '$neutral-5',
       },
       landed: {
-        backgroundColor: '$blue/5',
+        backgroundColor: '$blue-50-opa-5',
       },
       landed_deleted: {
-        backgroundColor: '$danger-/5',
+        backgroundColor: '$red-50-opa-5',
       },
     },
   },

packages/components/src/tabs/tabs.stories.tsx

@@ -18,121 +18,21 @@ const meta: Meta<typeof Tabs> = {
   },
 }
 
-export const Grey: StoryObj<TabsProps> = {
+export const Default: StoryObj<TabsProps> = {
   args: {
     defaultValue: '1',
   },
   render(args) {
     return (
       <Tabs {...args}>
-        <Tabs.List variant="grey" size={32}>
+        <Tabs.List 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 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>
+          <Tabs.Trigger type="default" value="3">
             Tab 3
           </Tabs.Trigger>
         </Tabs.List>
@@ -157,7 +57,7 @@ export const Icon: StoryObj<TabsProps> = {
   render(args) {
     return (
       <Tabs {...args}>
-        <Tabs.List variant="grey" size={32}>
+        <Tabs.List size={32}>
           <Tabs.Trigger
             type="icon"
             value="1"
@@ -176,7 +76,6 @@ export const Icon: StoryObj<TabsProps> = {
             type="icon"
             value="3"
             icon={<PlaceholderIcon size={16} />}
-            disabled
           >
             Tab 3
           </Tabs.Trigger>
@@ -202,14 +101,14 @@ export const Counter: StoryObj<TabsProps> = {
   render(args) {
     return (
       <Tabs {...args}>
-        <Tabs.List variant="grey" size={32}>
+        <Tabs.List 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} disabled>
+          <Tabs.Trigger type="counter" value="3" count={100}>
             Tab 3
           </Tabs.Trigger>
         </Tabs.List>
@@ -234,14 +133,14 @@ export const Step: StoryObj<TabsProps> = {
   render(args) {
     return (
       <Tabs {...args}>
-        <Tabs.List variant="grey" size={32}>
+        <Tabs.List 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} disabled>
+          <Tabs.Trigger type="step" value="3" step={999}>
             Tab 3
           </Tabs.Trigger>
         </Tabs.List>

packages/components/src/tabs/tabs.tsx

@@ -40,7 +40,6 @@ const Tabs = (props: Props) => {
 
 type ListProps = {
   children: React.ReactElement[]
-  variant: Variants['variant']
   size: Variants['size']
 }
 
@@ -52,7 +51,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, variant: props.variant })}
+            {cloneElement(child, { size: props.size })}
           </Trigger>
         ))}
       </Stack>
@@ -65,28 +64,19 @@ 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>) => {
@@ -96,22 +86,20 @@ 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: variant === 'blur_darkGrey' ? '$white-100' : '$neutral-100',
-      hover: variant === 'blur_darkGrey' ? '$white-100' : '$neutral-100',
-      press: variant === 'blur_darkGrey' ? '$white-100' : '$neutral-100',
+      default: '$neutral-100',
+      hover: '$neutral-100',
+      press: '$neutral-100',
       active: '$white-100',
     },
     providedProps
   )
 
+  const { size, 'aria-selected': selected } = providedProps
+
   const textSize = triggerTextSizes[size]
 
   return (
@@ -120,9 +108,7 @@ const TabsTrigger = (props: TriggerProps, ref: Ref<View>) => {
       {...pressableProps}
       ref={ref}
       size={size}
-      variant={variant}
       active={selected}
-      disabled={disabled}
     >
       {props.type === 'icon' &&
         cloneElement(props.icon, {
@@ -130,9 +116,7 @@ const TabsTrigger = (props: TriggerProps, ref: Ref<View>) => {
           color,
         })}
 
-      {props.type === 'step' && (
-        <Step size={18} type="complete" value={props.step} />
-      )}
+      {props.type === 'step' && <Step type="complete" value={props.step} />}
 
       <Text size={textSize} weight="medium" color={color}>
         {children}
@@ -156,42 +140,13 @@ export type { Props as TabsProps }
 
 const TriggerBase = styled(View, {
   name: 'Trigger',
-  role: 'tab',
-  cursor: 'pointer',
+  role: 'button',
 
   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,
@@ -207,47 +162,17 @@ const TriggerBase = styled(View, {
       },
     },
     active: {
-      // 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',
+        backgroundColor: '$neutral-50',
+      },
+      false: {
+        backgroundColor: '$neutral-10',
+        hoverStyle: {
+          backgroundColor: '$neutral-20',
+        },
       },
     },
-  } as const,
+  },
 })
 
 const triggerTextSizes: Record<Variants['size'], TextProps['size']> = {

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

@@ -46,7 +46,7 @@ export const Default: Story = {
           <Tag label="New tag #7140FD" size={24} color="#7140FD" icon="🧙‍♂️" />
 
           <Tag
-            label="New tag $purple-50"
+            label="custom color purple"
             size={24}
             icon="🐷"
             color="$purple-50"

packages/components/src/tag/tag.tsx

@@ -6,7 +6,6 @@ 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'
@@ -20,7 +19,7 @@ type Props = {
   selected?: boolean
   disabled?: boolean
   onPress?: PressableProps['onPress']
-  color?: ColorTokens | HexColor
+  color?: ColorTokens | `#${string}`
 }
 
 const textSizes: Record<NonNullable<Props['size']>, TextProps['size']> = {
@@ -101,23 +100,20 @@ const Base = styled(View, {
   },
 
   variants: {
-    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)
+    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
 
       return {
-        borderColor: getColorWithOpacity(val, 20),
+        borderColor: getColorWithOpacity(color, 0.2),
         pressStyle: {
-          borderColor: getColorWithOpacity(val, 30),
-          backgroundColor: getColorWithOpacity(val, 10),
+          borderColor: getColorWithOpacity(color, 0.3),
+          backgroundColor: getColorWithOpacity(color, 0.1),
         },
         hoverStyle: {
-          borderColor: getColorWithOpacity(val, 30),
-          backgroundColor: getColorWithOpacity(val, 10),
+          borderColor: getColorWithOpacity(color, 0.3),
+          backgroundColor: getColorWithOpacity(color, 0.1),
         },
       }
     },
@@ -138,16 +134,16 @@ const Base = styled(View, {
     },
     selected: {
       true: {
-        backgroundColor: '$blue/10',
-        borderColor: '$blue-50',
+        backgroundColor: '$primary-50-opa-10',
+        borderColor: '$primary-50',
 
         hoverStyle: {
-          backgroundColor: '$blue/20',
-          borderColor: '$blue-60',
+          backgroundColor: '$primary-50-opa-20',
+          borderColor: '$primary-60',
         },
         pressStyle: {
-          backgroundColor: '$blue/20',
-          borderColor: '$blue-60',
+          backgroundColor: '$primary-50-opa-20',
+          borderColor: '$primary-60',
         },
       },
     },

packages/components/src/text/text.tsx

@@ -15,7 +15,6 @@ type Props = {
   color?: ColorTokens | string
   truncate?: boolean
   wrap?: false
-  select?: false
 } & (
   | { size: 88; weight?: Weight }
   | { size: 64; weight?: Weight }
@@ -132,12 +131,6 @@ const Base = styled(BaseText, {
         minWidth: 0,
       },
     },
-
-    select: {
-      false: {
-        userSelect: 'none',
-      },
-    },
   } as const,
 
   defaultVariants: {

packages/components/src/themes.ts

@@ -5,55 +5,59 @@ import { tokens } from './tokens'
 const light = createTheme({
   background: tokens.color['white-100'],
   textPrimary: tokens.color['neutral-100'],
-  primary: tokens.color['blue-50'],
-  primaryHover: tokens.color['blue-60'],
+  primary: tokens.color['primary-50'],
+  primaryHover: tokens.color['primary-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'],
-  army: tokens.color['army-50'],
-  armyHover: tokens.color['army-60'],
+  indigo: tokens.color['indigo-50'],
+  indigoHover: tokens.color['indigo-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'],
-  copper: tokens.color['copper-50'],
-  copperHover: tokens.color['copper-50'],
-  camel: tokens.color['camel-50'],
-  camelHover: tokens.color['camel-50'],
+  brown: tokens.color['brown-50'],
+  brownHover: tokens.color['brown-60'],
+  beige: tokens.color['beige-50'],
+  beigeHover: tokens.color['beige-60'],
   placeHolderColor: tokens.color['neutral-40'],
-  placeHolderColorBlurred: tokens.color['neutral-80/40'],
+  placeHolderColorBlurred: tokens.color['neutral-80-opa-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/5'],
-  iconButtonBackgroundBlurredHover: tokens.color['neutral-80/10'],
-  iconButtonBackgroundBlurredSelected: tokens.color['neutral-80/10'],
-  iconButtonBorderBlurredSelected: tokens.color['neutral-80/5'],
+  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'],
   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/10'],
-  iconButtonOutlineBorderBlurredHover: tokens.color['neutral-80/20'],
-  iconButtonOutlineBorderBlurredSelected: tokens.color['neutral-80/10'],
+  iconButtonOutlineBorderBlurred: tokens.color['neutral-80-opa-10'],
+  iconButtonOutlineBorderBlurredHover: tokens.color['neutral-80-opa-20'],
+  iconButtonOutlineBorderBlurredSelected: tokens.color['neutral-80-opa-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/70'],
-  blurBackground: tokens.color['white/70'],
+  iconButtonColorOutlineBlurred: tokens.color['neutral-80-opa-70'],
+  blurBackground: tokens.color['white-70'],
 })
 
 // note: we set up a single consistent base type to validate the rest:
@@ -62,30 +66,34 @@ type BaseTheme = typeof light
 const dark: BaseTheme = createTheme({
   background: tokens.color['neutral-95'],
   textPrimary: tokens.color['white-100'],
-  primary: tokens.color['blue-60'],
-  primaryHover: tokens.color['blue-50'],
+  primary: tokens.color['primary-60'],
+  primaryHover: tokens.color['primary-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'],
-  army: tokens.color['army-60'],
-  armyHover: tokens.color['army-50'],
+  indigo: tokens.color['indigo-60'],
+  indigoHover: tokens.color['indigo-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'],
-  copper: tokens.color['copper-60'],
-  copperHover: tokens.color['copper-50'],
-  camel: tokens.color['camel-60'],
-  camelHover: tokens.color['camel-50'],
+  brown: tokens.color['brown-60'],
+  brownHover: tokens.color['brown-50'],
+  beige: tokens.color['beige-60'],
+  beigeHover: tokens.color['beige-50'],
   placeHolderColor: tokens.color['neutral-50'],
   placeHolderColorBlurred: tokens.color['white-30'],
   iconButtonBackground: tokens.color['neutral-90'],
@@ -96,7 +104,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/70'],
+  iconButtonOutlineBackgroundSelected: tokens.color['neutral-80-opa-70'],
   iconButtonOutlineBorder: tokens.color['neutral-80'],
   iconButtonOutlineBorderHover: tokens.color['neutral-70'],
   iconButtonOutlineBorderSelected: tokens.color['neutral-70'],
@@ -110,7 +118,7 @@ const dark: BaseTheme = createTheme({
   iconButtonColorOutline: tokens.color['neutral-40'],
   iconButtonColorOutlineSelected: tokens.color['white-100'],
   iconButtonColorOutlineBlurred: tokens.color['white-100'],
-  blurBackground: tokens.color['neutral-70'],
+  blurBackground: tokens.color['neutral-80-opa-70'],
 })
 
 const allThemes = {

packages/components/src/toast/toast-container.tsx

@@ -7,44 +7,33 @@ 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 & ToastRootProps) | null
+  toast: ToastProps | null
   dismiss: () => void
-  positive: (message: string, options?: Options) => void
-  negative: (message: string, options?: Options) => void
-  custom: (message: string, icon: React.ReactElement, options?: Options) => 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
 }
 
 const useStore = create<ToastState>()(set => ({
   toast: null,
-  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 },
-    }),
+  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 } }),
   dismiss: () => set({ toast: null }),
 }))
 
@@ -61,23 +50,14 @@ 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 {...restProps} />
+        <Toast {...store.toast} />
       </ToastRoot>
       <Viewport />
     </Provider>
@@ -92,7 +72,6 @@ const useToast = () => {
       positive: store.positive,
       negative: store.negative,
       custom: store.custom,
-      dismiss: store.dismiss,
     }),
     [store]
   )

packages/components/src/toast/toast.tsx

@@ -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} alignItems="center">
+      <Stack flex={1} flexDirection="row" gap={4}>
         <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/70',
+  backgroundColor: '$neutral-80-opa-70',
   borderRadius: '$12',
   justifyContent: 'space-between',
 

packages/components/src/tokens.ts

@@ -1,44 +1,187 @@
-import {
-  blur,
-  customisation,
-  danger,
-  networks,
-  neutral,
-  security,
-  social,
-  success,
-  white,
-} from '@status-im/colors'
+import { customisation } from '@status-im/colors'
 import { createTokens } from '@tamagui/core'
-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>)
-}
+import { size, space, zIndex } from '@tamagui/theme-base'
 
 export const tokens = createTokens({
   color: {
-    ...blur,
     ...customisation,
-    ...(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]
-    }),
-
+    '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)',
     transparent: 'hsla(0, 0%, 0%, 0)',
   },
   size,

packages/components/src/user-list/user-list.tsx

@@ -28,7 +28,7 @@ const UserList = (props: Props) => {
             alignItems="center"
             cursor="pointer"
             hoverStyle={{
-              backgroundColor: '$blue/5',
+              backgroundColor: '$primary-50-opa-5',
             }}
           >
             <Avatar

packages/components/utils/get-color-with-opacity.ts

@@ -1,21 +1,18 @@
-import { opacity as colorOpacity } from '../consts/opacity'
+/**
+ * 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
+ **/
 
-export type RGBAColor = `rgba(${string} / ${string}%)`
+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 HexColor = `#${string}`
+  // Construct the color string with opacity using CSS color-mix function
+  const newColor = `color-mix(in srgb, ${color} ${clampedOpacity}%, transparent)`
 
-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}`
+  return newColor
 }
+
+export { getColorWithOpacity }

packages/icons/.eslintrc

@@ -1,5 +1,4 @@
 {
   "root": true,
-  "extends": ["@status-im/eslint-config"],
-  "ignorePatterns": ["dist", "index.js", "index.es.js"]
+  "extends": ["@status-im/eslint-config"]
 }

packages/icons/CHANGELOG.md

@@ -1,48 +1,5 @@
 # @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

packages/icons/index.es.js

@@ -1,15 +0,0 @@
-// @see https://github.com/tailwindlabs/heroicons/blob/master/react/index.esm.js
-export default new Proxy(
-  {},
-  {
-    get: (_, property) => {
-      if (property === '__esModule') {
-        return {}
-      }
-
-      throw new Error(
-        `Importing from \`@status-im/icons\` directly is not supported. Please import from either \`@status-im/icons/12\`, \`@status-im/icons/16\`, \`@status-im/icons/20\`, \`@status-im/icons/reactions\` or \`@status-im/icons/social\` instead.`
-      )
-    },
-  }
-)

packages/icons/index.js

@@ -1,15 +0,0 @@
-// @see https://github.com/tailwindlabs/heroicons/blob/master/react/index.esm.js
-module.exports = new Proxy(
-  {},
-  {
-    get: (_, property) => {
-      if (property === '__esModule') {
-        return {}
-      }
-
-      throw new Error(
-        `Importing from \`@status-im/icons\` directly is not supported. Please import from either \`@status-im/icons/12\`, \`@status-im/icons/16\`, \`@status-im/icons/20\`, \`@status-im/icons/reactions\`, or \`@status-im/icons/social\` instead.`
-      )
-    },
-  }
-)

packages/icons/index.ts

@@ -0,0 +1,2 @@
+export type { IconProps } from './lib/create-icon'
+export * from './src'

packages/icons/lib/create-icon.tsx

@@ -0,0 +1,48 @@
+import { createElement, forwardRef } from 'react'
+
+import { useTheme } from '@tamagui/core'
+
+import type { ColorTokens } from '@tamagui/core'
+import type { ComponentType, SVGProps } from 'react'
+
+// import 'react-native-svg'
+// declare module 'react-native-svg' {
+//   export interface SvgProps {
+//     xmlns?: string
+//     xmlnsXlink?: string
+//     xlinkHref?: string
+//   }
+// }
+
+function isColorTokens(
+  value: `#${string}` | ColorTokens
+): value is ColorTokens {
+  return typeof value === 'string' && value.startsWith('$')
+}
+
+export interface IconProps extends SVGProps<SVGSVGElement> {
+  size: 12 | 16 | 20
+  color?: ColorTokens | `#${string}`
+}
+
+export function createIcon<P extends SVGProps<SVGSVGElement>>(
+  Component: ComponentType<P>
+): ComponentType<IconProps> {
+  const Icon = forwardRef<SVGElement, IconProps>((props, ref) => {
+    const { size, color = '$neutral-100', ...rest } = props
+    const theme = useTheme()
+    const token = isColorTokens(color) ? theme[color]?.val : color
+
+    return createElement(Component, {
+      ref,
+      ...(rest as P),
+      color: token,
+      width: size,
+      height: size,
+    })
+  })
+
+  Icon.displayName = Component.name + 'Icon'
+
+  return Icon as ComponentType<IconProps>
+}

packages/icons/package.json

@@ -1,88 +1,59 @@
 {
   "name": "@status-im/icons",
-  "version": "0.9.2",
+  "version": "0.4.0",
   "files": [
     "dist",
     "svg"
   ],
+  "main": "dist/icons.js",
+  "module": "dist/icons.mjs",
+  "types": "dist/types/index.d.ts",
   "exports": {
     "./package.json": "./package.json",
     ".": {
-      "import": "./index.es.js",
-      "require": "./index.js"
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/icons.mjs",
+      "require": "./dist/icons.js"
     },
-    "./12": {
-      "types": "./dist/12/index.d.ts",
-      "import": "./dist/12/index.es.js",
-      "require": "./dist/12/index.cjs.js"
-    },
-    "./16": {
-      "types": "./dist/16/index.d.ts",
-      "import": "./dist/16/index.es.js",
-      "require": "./dist/16/index.cjs.js"
-    },
-    "./20": {
-      "types": "./dist/20/index.d.ts",
-      "import": "./dist/20/index.es.js",
-      "require": "./dist/20/index.cjs.js"
-    },
-    "./social": {
-      "types": "./dist/social/index.d.ts",
-      "import": "./dist/social/index.es.js",
-      "require": "./dist/social/index.cjs.js"
-    },
-    "./reactions": {
-      "types": "./dist/reactions/index.d.ts",
-      "import": "./dist/reactions/index.es.js",
-      "require": "./dist/reactions/index.cjs.js"
-    },
-    "./12/*.svg": {
-      "import": "./svg/12/*.svg"
-    },
-    "./16/*.svg": {
-      "import": "./svg/16/*.svg"
-    },
-    "./20/*.svg": {
-      "import": "./svg/20/*.svg"
-    },
-    "./social/*.svg": {
-      "import": "./svg/social/*.svg"
-    },
-    "./reactions/*.svg": {
-      "import": "./svg/reactions/*.svg"
+    "./*.svg": {
+      "import": "./svg/*.svg"
     }
   },
   "scripts": {
-    "sync": "vite-node scripts/sync.ts && prettier --parser=html --write 'svg/**/*.svg'",
-    "generate": "rimraf src && svgr svg --out-dir src && yarn lint:fix && yarn format",
+    "sync": "vite-node scripts/sync.ts && yarn generate",
+    "generate": "rimraf src && svgr svg --out-dir src",
     "dev": "vite build --watch --mode development",
     "build": "vite build",
     "postbuild": "yarn build:types",
-    "build:types": "tsc src/**/index.ts --emitDeclarationOnly --declaration --jsx react-jsx --skipLibCheck --declarationDir ./dist",
+    "build:types": "tsc --noEmit false --emitDeclarationOnly",
     "#test": "vitest",
     "typecheck": "tsc",
     "lint": "eslint 'src/**/*.{ts,tsx}'",
     "lint:fix": "yarn lint --fix",
     "format": "prettier --write 'src/**/*.{ts,tsx}'",
-    "clean": "rimraf dist node_modules .turbo",
-    "prepack": "yarn build"
+    "clean": "rimraf dist node_modules .turbo"
+  },
+  "dependencies": {
+    "@tamagui/core": "1.36.4",
+    "@tamagui/web": "1.36.4",
+    "tamagui": "1.36.4"
   },
   "peerDependencies": {
     "react": "^16.x || ^17.x || ^18.x",
-    "react-dom": "*"
+    "react-dom": "*",
+    "react-native-svg": ">=12"
   },
   "devDependencies": {
-    "@clack/prompts": "^0.7.0",
-    "@status-im/eslint-config": "*",
-    "@svgr/cli": "^8.1.0",
-    "@svgr/core": "^8.1.0",
-    "@svgr/plugin-prettier": "^8.1.0",
-    "@svgr/plugin-svgo": "^8.1.0",
+    "@clack/prompts": "^0.6.3",
+    "@svgr/cli": "^6.5.1",
+    "@svgr/core": "^7.0.0",
+    "@svgr/plugin-prettier": "^7.0.0",
+    "@svgr/plugin-svgo": "^7.0.0",
     "@types/fs-extra": "^11.0.1",
+    "@status-im/eslint-config": "*",
     "figma-api": "^1.11.0",
     "fs-extra": "^11.1.1",
     "svgo": "^3.0.2",
-    "p-map": "^7.0.2",
     "vite": "^4.1.4",
     "vite-node": "^0.29.7"
   },

packages/icons/scripts/sync.ts

@@ -1,10 +1,10 @@
-import { isCancel, log, outro, spinner, text } from '@clack/prompts'
+import { isCancel, outro, spinner, text } from '@clack/prompts'
 import { transform } from '@svgr/core'
 import * as Figma from 'figma-api'
 import fs from 'fs-extra'
 import fetch from 'node-fetch'
-import pMap from 'p-map'
 import path from 'path'
+import prettier from 'prettier'
 
 const SVG_DIR = path.resolve(__dirname, '../svg')
 
@@ -33,28 +33,14 @@ 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': {
-    name: 'icons-20',
-    folder: '20',
-  },
-  '3239:1440': {
-    name: 'icons-16',
-    folder: '16',
-  },
-  '3239:3712': {
-    name: 'icons-12',
-    folder: '12',
-  },
-  '3227:1083': {
-    name: 'social',
-    folder: 'social',
-  },
-  '942:77': {
-    name: 'reactions',
-    folder: 'reactions',
-  },
+  '3239:987': 'icons',
+  '3227:1083': 'social',
+  // '942:77': 'reactions',
+  '942:218': 'love',
+  '942:217': 'thumbs-up',
+  '942:216': 'thumbs-down',
+  '942:215': 'laugh',
+  '942:213': 'angry',
 }
 
 const figma = new Figma.Api({
@@ -62,15 +48,13 @@ const figma = new Figma.Api({
 })
 
 const s1 = spinner()
-s1.start('Fetching Figma file nodes')
+s1.start('Fetching nodes from Figma')
 const { nodes } = await figma.getFileNodes(FILE_KEY, Object.keys(NODE_IDS))
-// console.log('🚀 ~ nodes:', nodes)
-
 s1.stop('Done!')
 
-for (const [nodeId, { name, folder }] of Object.entries(NODE_IDS)) {
+for (const [nodeId, name] of Object.entries(NODE_IDS)) {
   const s2 = spinner()
-  s2.start(`Fetching SVG images for ${name}`)
+  s2.start('Fetching nodes from Figma')
 
   const { components } = nodes[nodeId]!
   const nodeIds = Object.keys(components)
@@ -89,99 +73,73 @@ for (const [nodeId, { name, folder }] of Object.entries(NODE_IDS)) {
 
   s2.stop('Done!')
 
-  log.info(`Generating SVGs for ${name}`)
+  const s3 = spinner()
+  s3.start(`Generating SVGs for ${name}`)
 
-  await pMap(
-    Object.entries(images),
-    async ([nodeId, image]) => {
-      const icon = components[nodeId]!
-      const svgRaw = await fetch(image!)
-        .then(res => res.text())
-        .catch(() => {
-          log.error(`Failed to fetch SVG for ${icon.name}`)
-          return
-        })
+  for (const [nodeId, image] of Object.entries(images)) {
+    const icon = components[nodeId]!
 
-      // note: probably a wrapper layer for https://www.figma.com/file/qLLuMLfpGxK9OfpIavwsmK/Iconset?type=design&node-id=4408-955&mode=dev, thus skipping
-      // icon:: {
-      //   key: 'c73f7bad669c2696c2158cef34967a20cc0f0f0f',
-      //   name: 'Use=Default, Typo=False, Style=Gradient',
-      //   description: '',
-      //   remote: true,
-      //   componentSetId: '4819:992',
-      //   documentationLinks: []
-      // }
-      // raw::
-      // transform::
-      // icon:: {
-      //   key: '53e1bc9f7ee455bc6cc38b90a9b7614ef64afe4e',
-      //   name: '20/status-logo',
-      //   description: '',
-      //   remote: false,
-      //   documentationLinks: []
-      // }
-      if (!svgRaw) {
-        log.error(`Failed to fetch SVG for ${icon.name}`)
-        return
-      }
+    const svgRaw = await fetch(image!).then(res => res.text())
 
-      const svg = await transform(svgRaw, {
-        plugins: ['@svgr/plugin-svgo'],
-        svgoConfig: {
-          plugins: [
-            {
-              name: 'replace-attributes',
-              fn: () => {
-                return {
-                  element: {
-                    enter: node => {
-                      if (node.attributes.fill === '#09101C') {
-                        node.attributes.fill = 'currentColor'
-                      } else if (node.attributes.stroke === '#09101C') {
-                        node.attributes.stroke = 'currentColor'
-                      } else if (node.attributes.fill === '#2A4AF5') {
-                        node.attributes.fill =
-                          'var(--customisation-50, #2A4AF5)'
-                      } else if (node.attributes.stroke === '#2A4AF5') {
-                        node.attributes.stroke =
-                          'var(--customisation-50, #2A4AF5)'
-                      }
-                    },
-                  },
-                }
-              },
-            },
-            {
-              name: 'preset-default',
-              params: {
-                overrides: {
-                  cleanupIds: {
-                    minify: false,
-                  },
-                  // viewBox is required to resize SVGs with CSS.
-                  // @see https://github.com/svg/svgo/issues/1128
-                  removeViewBox: false,
+    // note: probably a wrapper layer for https://www.figma.com/file/qLLuMLfpGxK9OfpIavwsmK/Iconset?type=design&node-id=4408-955&mode=dev, thus skipping
+    // icon:: {
+    //   key: 'c73f7bad669c2696c2158cef34967a20cc0f0f0f',
+    //   name: 'Use=Default, Typo=False, Style=Gradient',
+    //   description: '',
+    //   remote: true,
+    //   componentSetId: '4819:992',
+    //   documentationLinks: []
+    // }
+    // raw::
+    // transform::
+    // icon:: {
+    //   key: '53e1bc9f7ee455bc6cc38b90a9b7614ef64afe4e',
+    //   name: '20/status-logo',
+    //   description: '',
+    //   remote: false,
+    //   documentationLinks: []
+    // }
+    if (!svgRaw) {
+      continue
+    }
+
+    const svg = await transform(svgRaw, {
+      plugins: ['@svgr/plugin-svgo'],
+      replaceAttrValues: {
+        // '#000': 'currentColor',
+      },
+      svgoConfig: {
+        plugins: [
+          {
+            name: 'preset-default',
+            params: {
+              overrides: {
+                cleanupIds: {
+                  minify: false,
                 },
+                // viewBox is required to resize SVGs with CSS.
+                // @see https://github.com/svg/svgo/issues/1128
+                removeViewBox: false,
               },
             },
-            'prefixIds',
-          ],
-        },
-      })
+          },
+        ],
+      },
+    })
 
-      const nameParts = icon.name.replace(' / ', '/').split('/')
-      const iconName = nameParts.at(-1)!
-      const fileName = `${toKebabCase(iconName)}-icon.svg`
-      const filePath = path.resolve(SVG_DIR, folder, fileName)
+    const nameParts = icon.name.replace(' / ', '/').split('/')
+    const iconName = nameParts[nameParts.length - 1]
+    const fileName = `${toKebabCase(iconName)}-icon.svg`
+    const filePath = path.resolve(SVG_DIR, fileName)
 
-      await fs.ensureDir(path.dirname(filePath))
+    const prettierOptions = prettier.resolveConfig.sync(process.cwd())
+    const formattedSvg = prettier.format(svg, {
+      ...prettierOptions,
+      parser: 'html',
+    })
 
-      await fs.writeFile(filePath, svg, { encoding: 'utf8' })
+    await fs.writeFile(filePath, formattedSvg, { encoding: 'utf8' })
+  }
 
-      // log.success(filePath)
-    },
-    { concurrency: 5 }
-  )
-
-  log.success(`${Object.keys(images).length} SVGs generated`)
+  s3.stop(`${Object.keys(images).length} SVGs generated`)
 }

packages/icons/src/12/active-icon.tsx

@@ -1,29 +0,0 @@
-import type { SVGProps } from 'react'
-
-const SvgActiveIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={12}
-    height={12}
-    fill="none"
-    viewBox="0 0 12 12"
-    aria-hidden={true}
-    focusable={false}
-    {...props}
-  >
-    <g clipPath="url(#prefix__clip0_4041_988)">
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M6 .45c-1.996 0-3.464.236-4.389 1.161C.686 2.536.451 4.004.451 6c0 1.996.235 3.464 1.16 4.389.925.925 2.393 1.161 4.39 1.161 1.995 0 3.463-.236 4.388-1.161.925-.925 1.161-2.393 1.161-4.389 0-1.996-.236-3.464-1.16-4.389C9.463.686 7.995.45 6 .45ZM1.55 6c0-2.004.264-3.036.839-3.611C2.964 1.814 3.996 1.55 6 1.55c2.004 0 3.036.264 3.611.839.575.575.84 1.607.84 3.611 0 2.004-.265 3.036-.84 3.611-.575.575-1.607.839-3.61.839-2.005 0-3.037-.264-3.612-.839C1.814 9.036 1.55 8.004 1.55 6Zm6.356.187c0-.75-2.25-2.25-3-2.25s-.75 4.125 0 4.125 3-1.125 3-1.875Z"
-        clipRule="evenodd"
-      />
-    </g>
-    <defs>
-      <clipPath id="prefix__clip0_4041_988">
-        <path fill="#fff" d="M0 0h12v12H0z" />
-      </clipPath>
-    </defs>
-  </svg>
-)
-export default SvgActiveIcon

packages/icons/src/12/active-members-icon.tsx

@@ -1,21 +0,0 @@
-import type { SVGProps } from 'react'
-
-const SvgActiveMembersIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={12}
-    height={13}
-    fill="none"
-    viewBox="0 0 12 13"
-    aria-hidden={true}
-    focusable={false}
-    {...props}
-  >
-    <path
-      stroke="currentColor"
-      strokeWidth={1.1}
-      d="m8 1.5-1.5 3H10l-5.5 6L5 7H2l2.5-5.5H8Z"
-    />
-  </svg>
-)
-export default SvgActiveMembersIcon

packages/icons/src/12/add-circle-icon.tsx

@@ -1,30 +0,0 @@
-import type { SVGProps } from 'react'
-
-const SvgAddCircleIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={12}
-    height={12}
-    fill="none"
-    viewBox="0 0 12 12"
-    aria-hidden={true}
-    focusable={false}
-    {...props}
-  >
-    <g clipPath="url(#prefix__clip0_691_20)">
-      <circle cx={6} cy={6} r={6} fill="#647084" />
-      <path
-        fill="#fff"
-        fillRule="evenodd"
-        d="M5.45 6.55V9h1.1V6.55H9v-1.1H6.55V3h-1.1v2.45H3v1.1h2.45Z"
-        clipRule="evenodd"
-      />
-    </g>
-    <defs>
-      <clipPath id="prefix__clip0_691_20">
-        <rect width={12} height={12} fill="#fff" rx={6} />
-      </clipPath>
-    </defs>
-  </svg>
-)
-export default SvgAddCircleIcon

packages/icons/src/12/add-icon.tsx

@@ -1,22 +0,0 @@
-import type { SVGProps } from 'react'
-
-const SvgAddIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={12}
-    height={12}
-    fill="none"
-    viewBox="0 0 12 12"
-    aria-hidden={true}
-    focusable={false}
-    {...props}
-  >
-    <path
-      fill="currentColor"
-      fillRule="evenodd"
-      d="M5.45 6.55V10h1.1V6.55H10v-1.1H6.55V2h-1.1v3.45H2v1.1h3.45Z"
-      clipRule="evenodd"
-    />
-  </svg>
-)
-export default SvgAddIcon

packages/icons/src/12/add-reaction-icon.tsx

@@ -1,28 +0,0 @@
-import type { SVGProps } from 'react'
-
-const SvgAddReactionIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={12}
-    height={12}
-    fill="none"
-    viewBox="0 0 12 12"
-    aria-hidden={true}
-    focusable={false}
-    {...props}
-  >
-    <path
-      fill="currentColor"
-      fillRule="evenodd"
-      d="M5.81.955C3.551 1.081 1.95 3.42 1.95 6c0 2.652 1.693 5.05 4.05 5.05 2.219 0 3.849-2.124 4.033-4.585A4.039 4.039 0 0 1 8.93 6.46C8.755 8.53 7.407 9.95 6 9.95 4.49 9.95 3.05 8.318 3.05 6c0-2.07 1.148-3.593 2.468-3.895.04-.404.14-.79.29-1.15ZM4.008 7.746 4.5 7.5l.492-.246v-.001a1.73 1.73 0 0 0 .273.359c.19.189.433.338.735.338.303 0 .546-.149.736-.34a1.73 1.73 0 0 0 .273-.358v.001L7.5 7.5l.492.246v.002l-.002.002-.002.005-.008.015a1.795 1.795 0 0 1-.116.191 2.829 2.829 0 0 1-.35.428c-.31.31-.816.66-1.514.66-.697 0-1.204-.35-1.514-.66a2.829 2.829 0 0 1-.465-.62l-.008-.014-.003-.005v-.002l-.001-.001Zm3-.494v-.001.001ZM4.99 7.25v.001Z"
-      clipRule="evenodd"
-    />
-    <path
-      fill="currentColor"
-      fillRule="evenodd"
-      d="M8.95 3.05V5h1.1V3.05H12v-1.1h-1.95V0h-1.1v1.95H7v1.1h1.95Z"
-      clipRule="evenodd"
-    />
-  </svg>
-)
-export default SvgAddReactionIcon

packages/icons/src/12/add-user-icon.tsx

@@ -1,22 +0,0 @@
-import type { SVGProps } from 'react'
-
-const SvgAddUserIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={12}
-    height={12}
-    fill="none"
-    viewBox="0 0 12 12"
-    aria-hidden={true}
-    focusable={false}
-    {...props}
-  >
-    <path
-      fill="currentColor"
-      fillRule="evenodd"
-      d="M5.05 2.5a.95.95 0 1 1 1.9 0 .95.95 0 0 1-1.9 0ZM6 .45a2.05 2.05 0 1 0 0 4.1 2.05 2.05 0 0 0 0-4.1Zm1.907 5.38c-.435.189-.83.453-1.169.776A4.395 4.395 0 0 0 6 6.55c-.881 0-1.565.192-2.052.75-.458.525-.823 1.465-.888 3.15h2.554c.095.393.249.763.45 1.1H1.95V11c0-2.132.403-3.546 1.17-4.424C3.906 5.675 4.972 5.45 6 5.45c.647 0 1.309.09 1.907.38ZM8.95 12v-1.95H7v-1.1h1.95V7h1.1v1.95H12v1.1h-1.95V12h-1.1Z"
-      clipRule="evenodd"
-    />
-  </svg>
-)
-export default SvgAddUserIcon

packages/icons/src/12/advanced-icon.tsx

@@ -1,22 +0,0 @@
-import type { SVGProps } from 'react'
-
-const SvgAdvancedIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={12}
-    height={12}
-    fill="none"
-    viewBox="0 0 12 12"
-    aria-hidden={true}
-    focusable={false}
-    {...props}
-  >
-    <path
-      fill="currentColor"
-      fillRule="evenodd"
-      d="M5.548 2.8a2.944 2.944 0 0 1-.021.322 1.04 1.04 0 0 1-.285.62 1.04 1.04 0 0 1-.62.285c-.173.023-.383.023-.593.023H3.97c-.21 0-.42 0-.593-.023a1.04 1.04 0 0 1-.62-.285 1.04 1.04 0 0 1-.285-.62 2.944 2.944 0 0 1-.021-.322H1V1.7h1.452c.002-.115.008-.224.021-.322a1.04 1.04 0 0 1 .285-.62 1.04 1.04 0 0 1 .62-.285C3.551.45 3.761.45 3.971.45h.058c.21 0 .42 0 .593.023.197.027.428.092.62.284.193.193.258.424.285.621.013.098.019.207.021.322H11v1.1H5.548ZM4 1.55c.221 0 .35 0 .44.01.01.09.01.219.01.44v.5c0 .221 0 .35-.01.44-.09.01-.219.01-.44.01s-.35-.001-.44-.01c-.01-.09-.01-.219-.01-.44V2c0-.221 0-.35.01-.44.09-.01.219-.01.44-.01Zm-3 5v-1.1h5.452c.002-.115.008-.224.021-.322a1.04 1.04 0 0 1 .285-.62 1.04 1.04 0 0 1 .62-.285c.173-.023.383-.023.593-.023h.058c.21 0 .42 0 .593.023.197.027.428.092.62.284.193.193.258.424.285.621.013.098.019.207.021.322H11v1.1H9.548a2.944 2.944 0 0 1-.021.322 1.04 1.04 0 0 1-.285.62 1.04 1.04 0 0 1-.62.285c-.173.023-.383.023-.593.023H7.97c-.21 0-.42 0-.593-.023a1.04 1.04 0 0 1-.62-.285 1.04 1.04 0 0 1-.285-.62 2.944 2.944 0 0 1-.021-.322H1ZM8 5.3c.221 0 .35 0 .44.01.01.09.01.219.01.44v.5c0 .221 0 .35-.01.44-.09.009-.219.01-.44.01s-.35-.001-.44-.01c-.01-.09-.01-.219-.01-.44v-.5c0-.221 0-.35.01-.44.09-.01.219-.01.44-.01Zm-5.548 5H1V9.2h1.452c.002-.115.008-.224.021-.322a1.04 1.04 0 0 1 .285-.62 1.04 1.04 0 0 1 .62-.285c.173-.023.383-.023.593-.023h.058c.21 0 .42 0 .593.023.197.027.428.092.62.284.193.193.258.424.285.621.013.098.019.207.021.322H11v1.1H5.548a2.946 2.946 0 0 1-.021.322 1.04 1.04 0 0 1-.285.62 1.04 1.04 0 0 1-.62.285c-.173.023-.383.023-.593.023H3.97c-.21 0-.42 0-.593-.023a1.04 1.04 0 0 1-.62-.285 1.04 1.04 0 0 1-.285-.62 2.946 2.946 0 0 1-.021-.322ZM4 9.05c.221 0 .35 0 .44.01.01.09.01.219.01.44v.5c0 .221 0 .35-.01.44-.09.009-.219.01-.44.01s-.35-.001-.44-.01c-.01-.09-.01-.219-.01-.44v-.5c0-.221 0-.35.01-.44.09-.01.219-.01.44-.01Z"
-      clipRule="evenodd"
-    />
-  </svg>
-)
-export default SvgAdvancedIcon

packages/icons/src/12/alert-icon.tsx

@@ -1,29 +0,0 @@
-import type { SVGProps } from 'react'
-
-const SvgAlertIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={12}
-    height={12}
-    fill="none"
-    viewBox="0 0 12 12"
-    aria-hidden={true}
-    focusable={false}
-    {...props}
-  >
-    <g clipPath="url(#prefix__clip0_2283_851)">
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M1.55 6a4.45 4.45 0 1 1 8.9 0 4.45 4.45 0 0 1-8.9 0ZM6 .45a5.55 5.55 0 1 0 0 11.1A5.55 5.55 0 0 0 6 .45ZM5.45 7l-.2-4h1.5l-.2 4h-1.1Zm1.17 1.625a.625.625 0 1 0-1.25 0 .625.625 0 0 0 1.25 0Z"
-        clipRule="evenodd"
-      />
-    </g>
-    <defs>
-      <clipPath id="prefix__clip0_2283_851">
-        <path fill="#fff" d="M0 0h12v12H0z" />
-      </clipPath>
-    </defs>
-  </svg>
-)
-export default SvgAlertIcon

packages/icons/src/12/arrow-down-icon.tsx

@@ -1,22 +0,0 @@
-import type { SVGProps } from 'react'
-
-const SvgArrowDownIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={12}
-    height={12}
-    fill="none"
-    viewBox="0 0 12 12"
-    aria-hidden={true}
-    focusable={false}
-    {...props}
-  >
-    <path
-      fill="currentColor"
-      fillRule="evenodd"
-      d="m6.55 9.288 3.088-2.702.724.828-4 3.5L6 11.23l-.362-.317-4-3.5.724-.828L5.45 9.288V1.5h1.1v7.788Z"
-      clipRule="evenodd"
-    />
-  </svg>
-)
-export default SvgArrowDownIcon

packages/icons/src/12/arrow-left-icon.tsx

@@ -1,22 +0,0 @@
-import type { SVGProps } from 'react'
-
-const SvgArrowLeftIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={12}
-    height={12}
-    fill="none"
-    viewBox="0 0 12 12"
-    aria-hidden={true}
-    focusable={false}
-    {...props}
-  >
-    <path
-      fill="currentColor"
-      fillRule="evenodd"
-      d="m4.586 1.638-3.5 4L.769 6l.317.362 3.5 4 .828-.724L2.712 6.55H10.5v-1.1H2.712l2.702-3.088-.828-.724Z"
-      clipRule="evenodd"
-    />
-  </svg>
-)
-export default SvgArrowLeftIcon

packages/icons/src/12/arrow-left-right-icon.tsx

@@ -1,22 +0,0 @@
-import type { SVGProps } from 'react'
-
-const SvgArrowLeftrightIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={12}
-    height={12}
-    fill="none"
-    viewBox="0 0 12 12"
-    aria-hidden={true}
-    focusable={false}
-    {...props}
-  >
-    <path
-      fill="currentColor"
-      fillRule="evenodd"
-      d="m1.077 5.648 2.5-3 .845.704L2.674 5.45h6.652L7.577 3.352l.846-.704 2.5 3 .293.352-.293.352-2.5 3-.846-.704L9.326 6.55H2.674l1.748 2.098-.845.704-2.5-3L.784 6l.293-.352Z"
-      clipRule="evenodd"
-    />
-  </svg>
-)
-export default SvgArrowLeftrightIcon

packages/icons/src/12/arrow-right-icon.tsx

@@ -1,22 +0,0 @@
-import type { SVGProps } from 'react'
-
-const SvgArrowRightIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={12}
-    height={12}
-    fill="none"
-    viewBox="0 0 12 12"
-    aria-hidden={true}
-    focusable={false}
-    {...props}
-  >
-    <path
-      fill="currentColor"
-      fillRule="evenodd"
-      d="M9.288 6.55H1.5v-1.1h7.788L6.586 2.362l.828-.724 3.5 4L11.23 6l-.317.362-3.5 4-.828-.724L9.288 6.55Z"
-      clipRule="evenodd"
-    />
-  </svg>
-)
-export default SvgArrowRightIcon

packages/icons/src/12/arrow-top-icon.tsx

@@ -1,22 +0,0 @@
-import type { SVGProps } from 'react'
-
-const SvgArrowTopIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={12}
-    height={12}
-    fill="none"
-    viewBox="0 0 12 12"
-    aria-hidden={true}
-    focusable={false}
-    {...props}
-  >
-    <path
-      fill="currentColor"
-      fillRule="evenodd"
-      d="M6.362 1.086 6 .77l-.362.317-4 3.5.724.828L5.45 2.712V10.5h1.1V2.712l3.088 2.702.724-.828-4-3.5Z"
-      clipRule="evenodd"
-    />
-  </svg>
-)
-export default SvgArrowTopIcon

packages/icons/src/12/block-icon.tsx

@@ -1,29 +0,0 @@
-import type { SVGProps } from 'react'
-
-const SvgBlockIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={12}
-    height={12}
-    fill="none"
-    viewBox="0 0 12 12"
-    aria-hidden={true}
-    focusable={false}
-    {...props}
-  >
-    <g clipPath="url(#prefix__clip0_2265_853)">
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M1.55 6a4.45 4.45 0 0 1 7.184-3.512L2.488 8.734A4.43 4.43 0 0 1 1.55 6Zm1.716 3.511a4.45 4.45 0 0 0 6.245-6.245L3.266 9.511ZM6 .45a5.55 5.55 0 1 0 0 11.1A5.55 5.55 0 0 0 6 .45Z"
-        clipRule="evenodd"
-      />
-    </g>
-    <defs>
-      <clipPath id="prefix__clip0_2265_853">
-        <path fill="#fff" d="M0 0h12v12H0z" />
-      </clipPath>
-    </defs>
-  </svg>
-)
-export default SvgBlockIcon

packages/icons/src/12/bold-icon.tsx

@@ -1,22 +0,0 @@
-import type { SVGProps } from 'react'
-
-const SvgBoldIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={12}
-    height={12}
-    fill="none"
-    viewBox="0 0 12 12"
-    aria-hidden={true}
-    focusable={false}
-    {...props}
-  >
-    <path
-      fill="currentColor"
-      fillRule="evenodd"
-      d="M4 .95A1.55 1.55 0 0 0 2.45 2.5v7c0 .856.694 1.55 1.55 1.55h2.5c1.587 0 2.616-.397 3.251-.993a2.48 2.48 0 0 0 .799-1.807c0-.49-.163-1.212-.799-1.808a3.292 3.292 0 0 0-1.214-.7c.118-.102.225-.211.322-.326A3.034 3.034 0 0 0 9.55 3.5c0-.525-.16-1.192-.744-1.72C8.232 1.259 7.326.95 6 .95H4Zm-.45 5.6H6.5c1.413 0 2.134.353 2.499.695.364.341.45.744.45 1.005 0 .26-.086.663-.45 1.005-.365.342-1.086.695-2.5.695H4a.45.45 0 0 1-.45-.45V6.55Zm2.481-1.1c1.096-.007 1.673-.369 1.985-.741.334-.397.434-.885.434-1.209 0-.308-.09-.641-.381-.905-.3-.27-.896-.545-2.069-.545H4a.45.45 0 0 0-.45.45v2.95H6.031Z"
-      clipRule="evenodd"
-    />
-  </svg>
-)
-export default SvgBoldIcon

packages/icons/src/12/bullet-list-icon.tsx

@@ -1,29 +0,0 @@
-import type { SVGProps } from 'react'
-
-const SvgBulletListIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={12}
-    height={12}
-    fill="none"
-    viewBox="0 0 12 12"
-    aria-hidden={true}
-    focusable={false}
-    {...props}
-  >
-    <path
-      fill="currentColor"
-      fillRule="evenodd"
-      d="M3 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm0 4a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-1 5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
-      clipRule="evenodd"
-    />
-    <path
-      fill="currentColor"
-      fillRule="evenodd"
-      d="M4 1.45h7v1.1H4v-1.1Zm0 4h7v1.1H4v-1.1Zm7 4H4v1.1h7v-1.1Z"
-      clipRule="evenodd"
-      opacity={0.4}
-    />
-  </svg>
-)
-export default SvgBulletListIcon

packages/icons/src/12/calendar-icon.tsx

@@ -1,22 +0,0 @@
-import type { SVGProps } from 'react'
-
-const SvgCalendarIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={12}
-    height={12}
-    fill="none"
-    viewBox="0 0 12 12"
-    aria-hidden={true}
-    focusable={false}
-    {...props}
-  >
-    <path
-      fill="currentColor"
-      fillRule="evenodd"
-      d="M4.55 2.004V1h-1.1v1.162c-.743.16-1.345.422-1.812.83C.693 3.82.45 5.106.45 6.75c0 1.644.243 2.931 1.188 3.758C2.556 11.31 4 11.55 6 11.55s3.444-.239 4.362-1.042c.945-.827 1.188-2.114 1.188-3.758 0-1.644-.243-2.931-1.188-3.758-.466-.408-1.07-.67-1.812-.83V1h-1.1v1.004A17.133 17.133 0 0 0 6 1.95c-.52 0-1.004.016-1.45.054ZM1.726 4.948c.132-.516.343-.871.636-1.128.582-.509 1.639-.77 3.638-.77 2 0 3.056.261 3.638.77.294.257.504.612.636 1.128C9.492 4.682 8.188 4.45 6 4.45s-3.49.232-4.274.498ZM1.56 6.224c-.006.166-.01.34-.01.526 0 1.606.257 2.444.813 2.93.581.509 1.638.77 3.637.77 2 0 3.056-.261 3.638-.77.555-.486.812-1.324.812-2.93 0-.185-.003-.36-.01-.526a2.183 2.183 0 0 0-.44-.207c-.604-.22-1.783-.467-4-.467s-3.396.247-4 .467c-.22.08-.357.154-.44.207Z"
-      clipRule="evenodd"
-    />
-  </svg>
-)
-export default SvgCalendarIcon

packages/icons/src/12/camera-icon.tsx

@@ -1,29 +0,0 @@
-import type { SVGProps } from 'react'
-
-const SvgCameraIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={12}
-    height={12}
-    fill="none"
-    viewBox="0 0 12 12"
-    aria-hidden={true}
-    focusable={false}
-    {...props}
-  >
-    <g clipPath="url(#prefix__clip0_409_48)">
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M4.75.45a1.3 1.3 0 0 0-1.3 1.3.2.2 0 0 1-.2.2C1.707 1.95.437 3.207.47 4.766.502 6.233.578 7.39.744 8.295c.165.903.43 1.613.887 2.135.467.536 1.078.811 1.8.955.706.141 1.564.165 2.57.165 1.004 0 1.863-.024 2.569-.165.722-.144 1.333-.42 1.8-.955.456-.522.721-1.232.887-2.135.166-.905.241-2.062.273-3.529.034-1.559-1.237-2.816-2.78-2.816a.2.2 0 0 1-.2-.2 1.3 1.3 0 0 0-1.3-1.3h-2.5Zm-.2 1.3c0-.11.09-.2.2-.2h2.5c.11 0 .2.09.2.2a1.3 1.3 0 0 0 1.3 1.3c.942 0 1.7.766 1.68 1.692-.031 1.455-.106 2.54-.255 3.354-.15.816-.365 1.303-.634 1.611-.258.295-.616.486-1.187.6-.585.117-1.342.143-2.354.143-1.011 0-1.768-.026-2.354-.143-.57-.114-.929-.305-1.186-.6-.27-.308-.485-.795-.634-1.61-.15-.815-.224-1.9-.256-3.355-.02-.926.738-1.692 1.68-1.692a1.3 1.3 0 0 0 1.3-1.3Zm0 4.75a1.45 1.45 0 1 1 2.9 0 1.45 1.45 0 0 1-2.9 0ZM6 3.95a2.55 2.55 0 1 0 0 5.1 2.55 2.55 0 0 0 0-5.1Z"
-        clipRule="evenodd"
-      />
-    </g>
-    <defs>
-      <clipPath id="prefix__clip0_409_48">
-        <path fill="#fff" d="M0 0h12v12H0z" />
-      </clipPath>
-    </defs>
-  </svg>
-)
-export default SvgCameraIcon

packages/icons/src/12/cards-icon.tsx

@@ -1,29 +0,0 @@
-import type { SVGProps } from 'react'
-
-const SvgCardsIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={12}
-    height={12}
-    fill="none"
-    viewBox="0 0 12 12"
-    aria-hidden={true}
-    focusable={false}
-    {...props}
-  >
-    <g clipPath="url(#prefix__clip0_637_26)">
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M6 .45c-1.996 0-3.464.236-4.389 1.161-.925.925-1.16 2.393-1.16 4.39 0 1.995.235 3.463 1.16 4.388.925.925 2.393 1.161 4.39 1.161 1.995 0 3.463-.236 4.388-1.16.925-.926 1.161-2.394 1.161-4.39 0-1.996-.236-3.464-1.16-4.389C9.463.686 7.995.451 6 .451Zm4.345 3.734c-.126-.874-.366-1.428-.734-1.795-.575-.575-1.607-.839-3.61-.839-2.005 0-3.037.264-3.612.84-.367.366-.608.92-.733 1.794a3.52 3.52 0 0 1 .098-.05C2.62 3.7 3.972 3.45 6 3.45c2.028 0 3.381.25 4.246.683l.099.051ZM1.55 6c0 2.004.264 3.036.84 3.611.574.575 1.606.84 3.61.84 2.004 0 3.036-.265 3.611-.84.575-.575.84-1.607.84-3.61a.748.748 0 0 0-.127-.43c-.092-.138-.26-.3-.57-.454C9.12 4.8 7.972 4.55 6 4.55s-3.119.25-3.754.567c-.31.155-.478.316-.57.454A.748.748 0 0 0 1.55 6Z"
-        clipRule="evenodd"
-      />
-    </g>
-    <defs>
-      <clipPath id="prefix__clip0_637_26">
-        <path fill="#fff" d="M0 0h12v12H0z" />
-      </clipPath>
-    </defs>
-  </svg>
-)
-export default SvgCardsIcon

packages/icons/src/12/check-circle-icon.tsx

@@ -1,25 +0,0 @@
-import type { SVGProps } from 'react'
-
-const SvgCheckCircleIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={12}
-    height={12}
-    fill="none"
-    viewBox="0 0 12 12"
-    aria-hidden={true}
-    focusable={false}
-    {...props}
-  >
-    <g clipPath="url(#prefix__clip0_2946_860)">
-      <circle cx={6} cy={6} r={5.5} fill="#23ADA0" />
-      <path stroke="#fff" strokeWidth={1.1} d="m3.75 6.25 1.5 1.5 3-3.5" />
-    </g>
-    <defs>
-      <clipPath id="prefix__clip0_2946_860">
-        <path fill="#fff" d="M0 0h12v12H0z" />
-      </clipPath>
-    </defs>
-  </svg>
-)
-export default SvgCheckCircleIcon

packages/icons/src/12/check-icon.tsx

@@ -1,29 +0,0 @@
-import type { SVGProps } from 'react'
-
-const SvgCheckIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={12}
-    height={12}
-    fill="none"
-    viewBox="0 0 12 12"
-    aria-hidden={true}
-    focusable={false}
-    {...props}
-  >
-    <g clipPath="url(#prefix__clip0_417_74)">
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M1.55 6a4.45 4.45 0 1 1 8.9 0 4.45 4.45 0 0 1-8.9 0ZM6 .45a5.55 5.55 0 1 0 0 11.1A5.55 5.55 0 0 0 6 .45Zm-.332 7.658 3-3.5-.836-.716-2.613 3.05-1.08-1.081-.778.778 1.5 1.5.42.42.387-.451Z"
-        clipRule="evenodd"
-      />
-    </g>
-    <defs>
-      <clipPath id="prefix__clip0_417_74">
-        <path fill="#fff" d="M0 0h12v12H0z" />
-      </clipPath>
-    </defs>
-  </svg>
-)
-export default SvgCheckIcon

packages/icons/src/12/check-large-icon.tsx

@@ -1,17 +0,0 @@
-import type { SVGProps } from 'react'
-
-const SvgCheckLargeIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={12}
-    height={12}
-    fill="none"
-    viewBox="0 0 12 12"
-    aria-hidden={true}
-    focusable={false}
-    {...props}
-  >
-    <path stroke="currentColor" strokeWidth={1.1} d="m1.5 7 3 2.5 6-7" />
-  </svg>
-)
-export default SvgCheckLargeIcon

packages/icons/src/12/chevron-down-icon.tsx

@@ -1,17 +0,0 @@
-import type { SVGProps } from 'react'
-
-const SvgChevronDownIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={12}
-    height={12}
-    fill="none"
-    viewBox="0 0 12 12"
-    aria-hidden={true}
-    focusable={false}
-    {...props}
-  >
-    <path stroke="currentColor" strokeWidth={1.1} d="m3 4.5 3 3 3-3" />
-  </svg>
-)
-export default SvgChevronDownIcon

packages/icons/src/12/chevron-left-icon.tsx

@@ -1,17 +0,0 @@
-import type { SVGProps } from 'react'
-
-const SvgChevronLeftIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={12}
-    height={12}
-    fill="none"
-    viewBox="0 0 12 12"
-    aria-hidden={true}
-    focusable={false}
-    {...props}
-  >
-    <path stroke="currentColor" strokeWidth={1.1} d="m7.5 3-3 3 3 3" />
-  </svg>
-)
-export default SvgChevronLeftIcon

packages/icons/src/12/chevron-right-icon.tsx

@@ -1,17 +0,0 @@
-import type { SVGProps } from 'react'
-
-const SvgChevronRightIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={12}
-    height={12}
-    fill="none"
-    viewBox="0 0 12 12"
-    aria-hidden={true}
-    focusable={false}
-    {...props}
-  >
-    <path stroke="currentColor" strokeWidth={1.1} d="m4.5 3 3 3-3 3" />
-  </svg>
-)
-export default SvgChevronRightIcon

packages/icons/src/12/chevron-top-icon.tsx

@@ -1,17 +0,0 @@
-import type { SVGProps } from 'react'
-
-const SvgChevronTopIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={12}
-    height={12}
-    fill="none"
-    viewBox="0 0 12 12"
-    aria-hidden={true}
-    focusable={false}
-    {...props}
-  >
-    <path stroke="currentColor" strokeWidth={1.1} d="m3 7.5 3-3 3 3" />
-  </svg>
-)
-export default SvgChevronTopIcon

packages/icons/src/12/close-icon.tsx

@@ -1,22 +0,0 @@
-import type { SVGProps } from 'react'
-
-const SvgCloseIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={12}
-    height={12}
-    fill="none"
-    viewBox="0 0 12 12"
-    aria-hidden={true}
-    focusable={false}
-    {...props}
-  >
-    <path
-      fill="currentColor"
-      fillRule="evenodd"
-      d="m6 6.778 3.111 3.11.778-.777L6.778 6l3.11-3.111-.777-.778L6 5.222l-3.111-3.11-.778.777L5.222 6l-3.11 3.111.777.778L6 6.778Z"
-      clipRule="evenodd"
-    />
-  </svg>
-)
-export default SvgCloseIcon

packages/icons/src/12/colour-icon.tsx

@@ -1,22 +0,0 @@
-import type { SVGProps } from 'react'
-
-const SvgColourIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={12}
-    height={12}
-    fill="none"
-    viewBox="0 0 12 12"
-    aria-hidden={true}
-    focusable={false}
-    {...props}
-  >
-    <path
-      fill="currentColor"
-      fillRule="evenodd"
-      d="M3.857.556C4.427.482 5.133.45 6 .45c.867 0 1.573.032 2.143.106.566.075 1.035.196 1.407.4.39.212.657.508.815.888.087.208.135.43.16.66.104.024.204.058.3.106.277.138.456.36.56.623.097.24.132.516.149.789.016.274.016.6.016.964V5c0 .5-.027.975-.19 1.368-.186.444-.519.73-.984.899-.429.156-.986.22-1.67.251-.533.025-1.18.03-1.956.032v2.7a.75.75 0 1 1-1.5 0V7.2A.75.75 0 0 1 6 6.45c1.13 0 1.99 0 2.655-.03.674-.032 1.086-.093 1.345-.187.222-.08.295-.17.344-.288.07-.17.106-.445.106-.945 0-.38 0-.674-.014-.912a4.208 4.208 0 0 0-.008-.105 1.763 1.763 0 0 1-.878 1.062c-.372.203-.841.325-1.407.399-.57.075-1.276.106-2.143.106-.867 0-1.573-.031-2.143-.106-.566-.074-1.035-.196-1.406-.399a1.763 1.763 0 0 1-.816-.888C1.486 3.799 1.45 3.4 1.45 3s.036-.798.185-1.156c.158-.38.426-.676.816-.889.371-.203.84-.324 1.406-.399Zm-1.206 1.71c-.066.158-.1.384-.1.734s.034.577.1.734a.667.667 0 0 0 .327.346c.2.11.517.207 1.022.273.502.066 1.153.097 2 .097.848 0 1.499-.03 2-.097.506-.066.822-.163 1.022-.273.182-.1.27-.21.327-.346.066-.157.101-.384.101-.734s-.035-.576-.1-.734a.667.667 0 0 0-.328-.346c-.2-.11-.516-.207-1.022-.273-.501-.066-1.152-.097-2-.097-.847 0-1.498.031-2 .097-.505.066-.822.164-1.022.273-.181.1-.27.21-.327.346Z"
-      clipRule="evenodd"
-    />
-  </svg>
-)
-export default SvgColourIcon

packages/icons/src/12/colour-preview-icon.tsx

@@ -1,17 +0,0 @@
-import type { SVGProps } from 'react'
-
-const SvgColourPreviewIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={12}
-    height={12}
-    fill="none"
-    viewBox="0 0 12 12"
-    aria-hidden={true}
-    focusable={false}
-    {...props}
-  >
-    <circle cx={6} cy={6} r={4} fill="var(--customisation-50, #2A4AF5)" />
-  </svg>
-)
-export default SvgColourPreviewIcon

packages/icons/src/12/communities-icon.tsx

@@ -1,29 +0,0 @@
-import type { SVGProps } from 'react'
-
-const SvgCommunitiesIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={12}
-    height={12}
-    fill="none"
-    viewBox="0 0 12 12"
-    aria-hidden={true}
-    focusable={false}
-    {...props}
-  >
-    <g clipPath="url(#prefix__clip0_659_35)">
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M10.056 1.597c.19-.019.394.138.394.403v1.47a7.55 7.55 0 0 0-6.98 6.98H2c-.265 0-.422-.205-.403-.393.446-4.447 4.013-8.014 8.46-8.46ZM4.574 10.45H6c.225 0 .496-.202.592-.576a4.549 4.549 0 0 1 3.282-3.282c.374-.096.576-.367.576-.592V4.574a6.45 6.45 0 0 0-5.876 5.876ZM11.55 2c0-.84-.693-1.589-1.603-1.497C4.979 1 1 4.979.503 9.947.41 10.857 1.16 11.55 2 11.55h4c.88 0 1.48-.707 1.657-1.404a3.451 3.451 0 0 1 2.49-2.489C10.842 7.48 11.55 6.88 11.55 6V2Z"
-        clipRule="evenodd"
-      />
-    </g>
-    <defs>
-      <clipPath id="prefix__clip0_659_35">
-        <path fill="#fff" d="M0 0h12v12H0z" />
-      </clipPath>
-    </defs>
-  </svg>
-)
-export default SvgCommunitiesIcon

packages/icons/src/12/connect-icon.tsx

@@ -1,29 +0,0 @@
-import type { SVGProps } from 'react'
-
-const SvgConnectIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={12}
-    height={12}
-    fill="none"
-    viewBox="0 0 12 12"
-    aria-hidden={true}
-    focusable={false}
-    {...props}
-  >
-    <g clipPath="url(#prefix__clip0_7414_48)">
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M10.278 1.722a3.05 3.05 0 0 0-4.313 0L4.727 2.959l.778.778L6.743 2.5A1.95 1.95 0 0 1 9.5 5.257L8.263 6.495l.778.778 1.237-1.238a3.05 3.05 0 0 0 0-4.313ZM2.96 4.727 1.722 5.964a3.05 3.05 0 0 0 4.314 4.314L7.273 9.04l-.778-.777L5.258 9.5A1.95 1.95 0 1 1 2.5 6.742l1.238-1.237-.778-.778Zm4.066-.53L4.374 6.848l.778.778 2.651-2.651-.777-.778Z"
-        clipRule="evenodd"
-      />
-    </g>
-    <defs>
-      <clipPath id="prefix__clip0_7414_48">
-        <path fill="#fff" d="M0 0h12v12H0z" />
-      </clipPath>
-    </defs>
-  </svg>
-)
-export default SvgConnectIcon

packages/icons/src/12/connected-icon.tsx

@@ -1,22 +0,0 @@
-import type { SVGProps } from 'react'
-
-const SvgConnectedIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={12}
-    height={12}
-    fill="none"
-    viewBox="0 0 12 12"
-    aria-hidden={true}
-    focusable={false}
-    {...props}
-  >
-    <path
-      fill="currentColor"
-      fillRule="evenodd"
-      d="M1.628 2.35c.623-.8 1.654-.9 2.872-.9v1.1c-1.282 0-1.75.15-2.003.475-.138.177-.258.464-.337.96-.079.495-.11 1.147-.11 2.015 0 .868.031 1.52.11 2.015.08.496.199.783.337.96.252.325.721.475 2.003.475v1.1c-1.218 0-2.25-.1-2.872-.9-.3-.385-.461-.88-.554-1.462C.981 7.605.95 6.882.95 6c0-.882.031-1.605.124-2.188.093-.582.254-1.077.554-1.462Zm4.046 3.1H10.5v1.1H5.674l1.749 2.098-.846.704-2.5-3L3.784 6l.293-.352 2.5-3 .846.704L5.674 5.45Z"
-      clipRule="evenodd"
-    />
-  </svg>
-)
-export default SvgConnectedIcon

packages/icons/src/12/contact-icon.tsx

@@ -1,33 +0,0 @@
-import type { SVGProps } from 'react'
-
-const SvgContactIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={12}
-    height={12}
-    fill="none"
-    viewBox="0 0 12 12"
-    aria-hidden={true}
-    focusable={false}
-    {...props}
-  >
-    <g clipPath="url(#prefix__clip0_183_90)">
-      <path
-        fill="var(--customisation-50, #2A4AF5)"
-        d="M11.5 6a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0Z"
-      />
-      <path
-        fill="#fff"
-        fillRule="evenodd"
-        d="M2.795 9.015c.1-.16.208-.305.325-.44.786-.9 1.852-1.125 2.88-1.125 1.028 0 2.094.225 2.88 1.126.117.134.225.28.325.439-.255.27-.543.509-.86.708a2.453 2.453 0 0 0-.293-.424C7.565 8.742 6.882 8.55 6 8.55c-.881 0-1.565.192-2.051.75a2.453 2.453 0 0 0-.295.423 4.421 4.421 0 0 1-.859-.708ZM6 3.55a.95.95 0 1 0 0 1.9.95.95 0 0 0 0-1.9Zm-2.05.95a2.05 2.05 0 1 1 4.1 0 2.05 2.05 0 0 1-4.1 0Z"
-        clipRule="evenodd"
-      />
-    </g>
-    <defs>
-      <clipPath id="prefix__clip0_183_90">
-        <path fill="#fff" d="M0 0h12v12H0z" />
-      </clipPath>
-    </defs>
-  </svg>
-)
-export default SvgContactIcon