diff --git a/eslint.config.mjs b/eslint.config.mjs
index db57827354..bbb97b0334 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -113,9 +113,15 @@ export default defineConfig([
     },
   },
   {
-    files: ['tools/**/*', 'website/**/*', 'stories/**/*', '.ci/**/*', 'semcore/**/__tests__/**/*'],
+    files: ['tools/**/*', 'website/**/*', 'stories/**/*', 'figma/src/**/*', '.ci/**/*', 'semcore/**/__tests__/**/*'],
     rules: {
       'no-console': 'off',
     },
   },
+  {
+    files: ['figma/mappings/**/Icon.figma.{jsx,tsx}'],
+    rules: {
+      'import/order': 'off',
+    },
+  },
 ]);
diff --git a/figma/figma-custom.config.json b/figma/figma-custom.config.json
new file mode 100644
index 0000000000..141571fdd1
--- /dev/null
+++ b/figma/figma-custom.config.json
@@ -0,0 +1,13 @@
+{
+  "codeConnect": {
+    "include": [
+      "mappings/**/*.figma.ts"
+    ],
+    "label": "React",
+    "parser": "custom",
+    "parserCommand": "pnpm tsm src/parser.ts",
+    "paths": {
+      "@semcore/ui/*": ["semcore/*/src"]
+    }
+  }
+}
\ No newline at end of file
diff --git a/figma/figma.config.json b/figma/figma.config.json
new file mode 100644
index 0000000000..e2d737d4f5
--- /dev/null
+++ b/figma/figma.config.json
@@ -0,0 +1,14 @@
+{
+  "codeConnect": {
+    "include": [
+      "mappings/**/*.figma.{tsx,jsx}"
+    ],
+    "exclude": ["mappings/**/Icon.figma.jsx"],
+    "label": "React",
+    "parser": "react",
+    "paths": {
+      "@semcore/ui/*": ["semcore/*/src"]
+    },
+    "interactiveSetupFigmaFileUrl": "https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring--%E2%9D%96-Core-Components"
+  }
+}
\ No newline at end of file
diff --git a/figma/mappings/Example.figma.template.js b/figma/mappings/Example.figma.template.js
new file mode 100644
index 0000000000..a799360b48
--- /dev/null
+++ b/figma/mappings/Example.figma.template.js
@@ -0,0 +1,48 @@
+// Config lines for the parser:
+// - keep them commented
+// - order doesn't matter, but they should be before the "require" statement
+
+// https://www.figma.com/design/yzZPyF0Rk2TddifXf6kovg/Card?node-id=11793-136767
+// ^ node URL is required
+// import Card from '@semcore/ui/card'
+// import { Flex } from '@semcore/ui/base-components'
+// ^ imports are optional, just put the ones you want to show in Code Connect
+
+const figma = require('figma');
+const instance = figma.selectedInstance;
+
+// you can write any JS code here, like loops, if-s, etc:
+const items = [1, 2, 3].map((item) => 'Option' + item).join();
+
+let result = '';
+const two = 2;
+if (two + two === 4) {
+  result = 'true!';
+}
+
+// to parse these files, run with the alternative config file:
+// npx figma connect publish --config figma-custom.config.json
+
+// some API examples:
+const labelText = instance.getString('PropertyName'); // for text properties
+const helperText = instance.findText('LayerName').textContent; // to directly get text layers
+const isDisabled = instance.getBoolean('PropertyName'); // also accepts boolean-like variant properties
+
+// api docs: https://developers.figma.com/docs/code-connect/template-v2-api/
+// and also: https://developers.figma.com/docs/code-connect/custom-parsers/#example-template-implementation
+
+// default findInstance() can be inconvenient (you have to check if the layer
+// is hidden and generate code by adding '.executeTemplate().example'),
+// so here's a much more convenient custom function:
+const someNestedInstanceCode = instanceCode(instance, 'LayerName');
+
+export default {
+  example: figma.tsx`
+<ComponentName>
+  ${items} ${result}
+  ${someNestedInstanceCode}
+</ComponentName>
+  `,
+  id: 'ComponentName',
+};
+// the id property is required, it can be used to find children using findConnectedInstance('component-id') instead of findInstance('layerName') - it helps if layer has been renamed
diff --git a/figma/mappings/Icon.figma.jsx b/figma/mappings/Icon.figma.jsx
new file mode 100644
index 0000000000..1373856a6c
--- /dev/null
+++ b/figma/mappings/Icon.figma.jsx
@@ -0,0 +1,5188 @@
+import figma from '@figma/code-connect';
+
+import TimeClockM from '@semcore/icon/TimeClock/m';
+figma.connect(TimeClockM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=10:797', {
+  variant: { Size: 'M' },
+  example: () => <TimeClockM />,
+});
+
+import TimeClockL from '@semcore/icon/TimeClock/l';
+figma.connect(TimeClockL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=10:797', {
+  variant: { Size: 'L' },
+  example: () => <TimeClockL />,
+});
+
+import LinkExternalAltM from '@semcore/icon/LinkExternalAlt/m';
+figma.connect(LinkExternalAltM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=9403:2', {
+  variant: { Size: 'M' },
+  example: () => <LinkExternalAltM />,
+});
+
+import LinkExternalAltL from '@semcore/icon/LinkExternalAlt/l';
+figma.connect(LinkExternalAltL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=9403:2', {
+  variant: { Size: 'L' },
+  example: () => <LinkExternalAltL />,
+});
+
+import LinkExternalM from '@semcore/icon/LinkExternal/m';
+figma.connect(LinkExternalM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6:3', {
+  variant: { Size: 'M' },
+  example: () => <LinkExternalM />,
+});
+
+import LinkExternalL from '@semcore/icon/LinkExternal/l';
+figma.connect(LinkExternalL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6:3', {
+  variant: { Size: 'L' },
+  example: () => <LinkExternalL />,
+});
+
+import ArrowRightM from '@semcore/icon/ArrowRight/m';
+figma.connect(ArrowRightM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3:4610', {
+  variant: { Size: 'M' },
+  example: () => <ArrowRightM />,
+});
+
+import ArrowRightL from '@semcore/icon/ArrowRight/l';
+figma.connect(ArrowRightL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3:4610', {
+  variant: { Size: 'L' },
+  example: () => <ArrowRightL />,
+});
+
+import ArrowDownM from '@semcore/icon/ArrowDown/m';
+figma.connect(ArrowDownM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3:4597', {
+  variant: { Size: 'M' },
+  example: () => <ArrowDownM />,
+});
+
+import ArrowDownL from '@semcore/icon/ArrowDown/l';
+figma.connect(ArrowDownL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3:4597', {
+  variant: { Size: 'L' },
+  example: () => <ArrowDownL />,
+});
+
+import ListBulletM from '@semcore/icon/ListBullet/m';
+figma.connect(ListBulletM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=10:658', {
+  variant: { Size: 'M' },
+  example: () => <ListBulletM />,
+});
+
+import ListBulletL from '@semcore/icon/ListBullet/l';
+figma.connect(ListBulletL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=10:658', {
+  variant: { Size: 'L' },
+  example: () => <ListBulletL />,
+});
+
+import ArrowLeftM from '@semcore/icon/ArrowLeft/m';
+figma.connect(ArrowLeftM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3:4605', {
+  variant: { Size: 'M' },
+  example: () => <ArrowLeftM />,
+});
+
+import ArrowLeftL from '@semcore/icon/ArrowLeft/l';
+figma.connect(ArrowLeftL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3:4605', {
+  variant: { Size: 'L' },
+  example: () => <ArrowLeftL />,
+});
+
+import ArrowUpM from '@semcore/icon/ArrowUp/m';
+figma.connect(ArrowUpM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3:4566', {
+  variant: { Size: 'M' },
+  example: () => <ArrowUpM />,
+});
+
+import ArrowUpL from '@semcore/icon/ArrowUp/l';
+figma.connect(ArrowUpL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3:4566', {
+  variant: { Size: 'L' },
+  example: () => <ArrowUpL />,
+});
+
+import ExpandM from '@semcore/icon/Expand/m';
+figma.connect(ExpandM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=436:11', {
+  variant: { Size: 'M' },
+  example: () => <ExpandM />,
+});
+
+import ExpandL from '@semcore/icon/Expand/l';
+figma.connect(ExpandL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=436:11', {
+  variant: { Size: 'L' },
+  example: () => <ExpandL />,
+});
+
+import CloseM from '@semcore/icon/Close/m';
+figma.connect(CloseM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=9:432', {
+  variant: { Size: 'M' },
+  example: () => <CloseM />,
+});
+
+import CloseL from '@semcore/icon/Close/l';
+figma.connect(CloseL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=9:432', {
+  variant: { Size: 'L' },
+  example: () => <CloseL />,
+});
+
+import ComicsM from '@semcore/icon/Comics/m';
+figma.connect(ComicsM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:124', {
+  variant: { Size: 'M' },
+  example: () => <ComicsM />,
+});
+
+import ComicsL from '@semcore/icon/Comics/l';
+figma.connect(ComicsL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:124', {
+  variant: { Size: 'L' },
+  example: () => <ComicsL />,
+});
+
+import RetweetM from '@semcore/icon/Retweet/m';
+figma.connect(RetweetM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=938:31284', {
+  variant: { Size: 'M' },
+  example: () => <RetweetM />,
+});
+
+import RetweetL from '@semcore/icon/Retweet/l';
+figma.connect(RetweetL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=938:31284', {
+  variant: { Size: 'L' },
+  example: () => <RetweetL />,
+});
+
+import KebabM from '@semcore/icon/Kebab/m';
+figma.connect(KebabM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=1998:4', {
+  variant: { Size: 'M' },
+  example: () => <KebabM />,
+});
+
+import KebabL from '@semcore/icon/Kebab/l';
+figma.connect(KebabL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=1998:4', {
+  variant: { Size: 'L' },
+  example: () => <KebabL />,
+});
+
+import TwitterCarouselM from '@semcore/icon/TwitterCarousel/m';
+figma.connect(TwitterCarouselM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3190:59', {
+  variant: { Size: 'M' },
+  example: () => <TwitterCarouselM />,
+});
+
+import TwitterCarouselL from '@semcore/icon/TwitterCarousel/l';
+figma.connect(TwitterCarouselL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3190:59', {
+  variant: { Size: 'L' },
+  example: () => <TwitterCarouselL />,
+});
+
+import InstagramM from '@semcore/icon/Instagram/m';
+figma.connect(InstagramM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=138:83', {
+  variant: { Size: 'M' },
+  example: () => <InstagramM />,
+});
+
+import InstagramL from '@semcore/icon/Instagram/l';
+figma.connect(InstagramL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=138:83', {
+  variant: { Size: 'L' },
+  example: () => <InstagramL />,
+});
+
+import GenderFemaleM from '@semcore/icon/GenderFemale/m';
+figma.connect(GenderFemaleM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:528', {
+  variant: { Size: 'M' },
+  example: () => <GenderFemaleM />,
+});
+
+import GenderFemaleL from '@semcore/icon/GenderFemale/l';
+figma.connect(GenderFemaleL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:528', {
+  variant: { Size: 'L' },
+  example: () => <GenderFemaleL />,
+});
+
+import ChatCheckM from '@semcore/icon/ChatCheck/m';
+figma.connect(ChatCheckM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:560', {
+  variant: { Size: 'M' },
+  example: () => <ChatCheckM />,
+});
+
+import ChatCheckL from '@semcore/icon/ChatCheck/l';
+figma.connect(ChatCheckL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:560', {
+  variant: { Size: 'L' },
+  example: () => <ChatCheckL />,
+});
+
+import InfinityM from '@semcore/icon/Infinity/m';
+figma.connect(InfinityM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=211:52', {
+  variant: { Size: 'M' },
+  example: () => <InfinityM />,
+});
+
+import InfinityL from '@semcore/icon/Infinity/l';
+figma.connect(InfinityL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=211:52', {
+  variant: { Size: 'L' },
+  example: () => <InfinityL />,
+});
+
+import FarmM from '@semcore/icon/Farm/m';
+figma.connect(FarmM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:14', {
+  variant: { Size: 'M' },
+  example: () => <FarmM />,
+});
+
+import FarmL from '@semcore/icon/Farm/l';
+figma.connect(FarmL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:14', {
+  variant: { Size: 'L' },
+  example: () => <FarmL />,
+});
+
+import MailFilledM from '@semcore/icon/MailFilled/m';
+figma.connect(MailFilledM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=517:23', {
+  variant: { Size: 'M' },
+  example: () => <MailFilledM />,
+});
+
+import MailFilledL from '@semcore/icon/MailFilled/l';
+figma.connect(MailFilledL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=517:23', {
+  variant: { Size: 'L' },
+  example: () => <MailFilledL />,
+});
+
+import ChartBarStackedColumnM from '@semcore/icon/ChartBarStackedColumn/m';
+figma.connect(ChartBarStackedColumnM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=5304:4', {
+  variant: { Size: 'M' },
+  example: () => <ChartBarStackedColumnM />,
+});
+
+import ChartBarStackedColumnL from '@semcore/icon/ChartBarStackedColumn/l';
+figma.connect(ChartBarStackedColumnL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=5304:4', {
+  variant: { Size: 'L' },
+  example: () => <ChartBarStackedColumnL />,
+});
+
+import UndoM from '@semcore/icon/Undo/m';
+figma.connect(UndoM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=423:223', {
+  variant: { Size: 'M' },
+  example: () => <UndoM />,
+});
+
+import UndoL from '@semcore/icon/Undo/l';
+figma.connect(UndoL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=423:223', {
+  variant: { Size: 'L' },
+  example: () => <UndoL />,
+});
+
+import CalendarCheckM from '@semcore/icon/CalendarCheck/m';
+figma.connect(CalendarCheckM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=12:2134', {
+  variant: { Size: 'M' },
+  example: () => <CalendarCheckM />,
+});
+
+import CalendarCheckL from '@semcore/icon/CalendarCheck/l';
+figma.connect(CalendarCheckL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=12:2134', {
+  variant: { Size: 'L' },
+  example: () => <CalendarCheckL />,
+});
+
+import CrownM from '@semcore/icon/Crown/m';
+figma.connect(CrownM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=12:2114', {
+  variant: { Size: 'M' },
+  example: () => <CrownM />,
+});
+
+import CrownL from '@semcore/icon/Crown/l';
+figma.connect(CrownL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=12:2114', {
+  variant: { Size: 'L' },
+  example: () => <CrownL />,
+});
+
+import PictureM from '@semcore/icon/Picture/m';
+figma.connect(PictureM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=12:1034', {
+  variant: { Size: 'M' },
+  example: () => <PictureM />,
+});
+
+import PictureL from '@semcore/icon/Picture/l';
+figma.connect(PictureL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=12:1034', {
+  variant: { Size: 'L' },
+  example: () => <PictureL />,
+});
+
+import PopupAltM from '@semcore/icon/PopupAlt/m';
+figma.connect(PopupAltM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6899:3', {
+  variant: { Size: 'M' },
+  example: () => <PopupAltM />,
+});
+
+import PopupAltL from '@semcore/icon/PopupAlt/l';
+figma.connect(PopupAltL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6899:3', {
+  variant: { Size: 'L' },
+  example: () => <PopupAltL />,
+});
+
+import ExpandAltM from '@semcore/icon/ExpandAlt/m';
+figma.connect(ExpandAltM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=5213:4', {
+  variant: { Size: 'M' },
+  example: () => <ExpandAltM />,
+});
+
+import ExpandAltL from '@semcore/icon/ExpandAlt/l';
+figma.connect(ExpandAltL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=5213:4', {
+  variant: { Size: 'L' },
+  example: () => <ExpandAltL />,
+});
+
+import LightningM from '@semcore/icon/Lightning/m';
+figma.connect(LightningM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=184:65', {
+  variant: { Size: 'M' },
+  example: () => <LightningM />,
+});
+
+import LightningL from '@semcore/icon/Lightning/l';
+figma.connect(LightningL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=184:65', {
+  variant: { Size: 'L' },
+  example: () => <LightningL />,
+});
+
+import TableM from '@semcore/icon/Table/m';
+figma.connect(TableM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=12:1979', {
+  variant: { Size: 'M' },
+  example: () => <TableM />,
+});
+
+import TableL from '@semcore/icon/Table/l';
+figma.connect(TableL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=12:1979', {
+  variant: { Size: 'L' },
+  example: () => <TableL />,
+});
+
+import SmokingM from '@semcore/icon/Smoking/m';
+figma.connect(SmokingM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:19', {
+  variant: { Size: 'M' },
+  example: () => <SmokingM />,
+});
+
+import SmokingL from '@semcore/icon/Smoking/l';
+figma.connect(SmokingL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:19', {
+  variant: { Size: 'L' },
+  example: () => <SmokingL />,
+});
+
+import SettingsM from '@semcore/icon/Settings/m';
+figma.connect(SettingsM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=8:255', {
+  variant: { Size: 'M' },
+  example: () => <SettingsM />,
+});
+
+import SettingsL from '@semcore/icon/Settings/l';
+figma.connect(SettingsL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=8:255', {
+  variant: { Size: 'L' },
+  example: () => <SettingsL />,
+});
+
+import ReturnM from '@semcore/icon/Return/m';
+figma.connect(ReturnM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=182:20', {
+  variant: { Size: 'M' },
+  example: () => <ReturnM />,
+});
+
+import ReturnL from '@semcore/icon/Return/l';
+figma.connect(ReturnL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=182:20', {
+  variant: { Size: 'L' },
+  example: () => <ReturnL />,
+});
+
+import ChatQuestionM from '@semcore/icon/ChatQuestion/m';
+figma.connect(ChatQuestionM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=429:421', {
+  variant: { Size: 'M' },
+  example: () => <ChatQuestionM />,
+});
+
+import ChatQuestionL from '@semcore/icon/ChatQuestion/l';
+figma.connect(ChatQuestionL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=429:421', {
+  variant: { Size: 'L' },
+  example: () => <ChatQuestionL />,
+});
+
+import LinkM from '@semcore/icon/Link/m';
+figma.connect(LinkM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=179:4', {
+  variant: { Size: 'M' },
+  example: () => <LinkM />,
+});
+
+import LinkL from '@semcore/icon/Link/l';
+figma.connect(LinkL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=179:4', {
+  variant: { Size: 'L' },
+  example: () => <LinkL />,
+});
+
+import ThumbUpM from '@semcore/icon/ThumbUp/m';
+figma.connect(ThumbUpM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=8:390', {
+  variant: { Size: 'M' },
+  example: () => <ThumbUpM />,
+});
+
+import ThumbUpL from '@semcore/icon/ThumbUp/l';
+figma.connect(ThumbUpL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=8:390', {
+  variant: { Size: 'L' },
+  example: () => <ThumbUpL />,
+});
+
+import TimeDayM from '@semcore/icon/TimeDay/m';
+figma.connect(TimeDayM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=498:20', {
+  variant: { Size: 'M' },
+  example: () => <TimeDayM />,
+});
+
+import TimeDayL from '@semcore/icon/TimeDay/l';
+figma.connect(TimeDayL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=498:20', {
+  variant: { Size: 'L' },
+  example: () => <TimeDayL />,
+});
+
+import ExpandTextM from '@semcore/icon/ExpandText/m';
+figma.connect(ExpandTextM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2845:14', {
+  variant: { Size: 'M' },
+  example: () => <ExpandTextM />,
+});
+
+import ExpandTextL from '@semcore/icon/ExpandText/l';
+figma.connect(ExpandTextL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2845:14', {
+  variant: { Size: 'L' },
+  example: () => <ExpandTextL />,
+});
+
+import ToxicM from '@semcore/icon/Toxic/m';
+figma.connect(ToxicM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=560:10', {
+  variant: { Size: 'M' },
+  example: () => <ToxicM />,
+});
+
+import ToxicL from '@semcore/icon/Toxic/l';
+figma.connect(ToxicL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=560:10', {
+  variant: { Size: 'L' },
+  example: () => <ToxicL />,
+});
+
+import ReligionM from '@semcore/icon/Religion/m';
+figma.connect(ReligionM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:94', {
+  variant: { Size: 'M' },
+  example: () => <ReligionM />,
+});
+
+import ReligionL from '@semcore/icon/Religion/l';
+figma.connect(ReligionL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:94', {
+  variant: { Size: 'L' },
+  example: () => <ReligionL />,
+});
+
+import NewsM from '@semcore/icon/News/m';
+figma.connect(NewsM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:494', {
+  variant: { Size: 'M' },
+  example: () => <NewsM />,
+});
+
+import NewsL from '@semcore/icon/News/l';
+figma.connect(NewsL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:494', {
+  variant: { Size: 'L' },
+  example: () => <NewsL />,
+});
+
+import SecurityM from '@semcore/icon/Security/m';
+figma.connect(SecurityM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:84', {
+  variant: { Size: 'M' },
+  example: () => <SecurityM />,
+});
+
+import SecurityL from '@semcore/icon/Security/l';
+figma.connect(SecurityL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:84', {
+  variant: { Size: 'L' },
+  example: () => <SecurityL />,
+});
+
+import PrintingM from '@semcore/icon/Printing/m';
+figma.connect(PrintingM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:134', {
+  variant: { Size: 'M' },
+  example: () => <PrintingM />,
+});
+
+import PrintingL from '@semcore/icon/Printing/l';
+figma.connect(PrintingL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:134', {
+  variant: { Size: 'L' },
+  example: () => <PrintingL />,
+});
+
+import RecentM from '@semcore/icon/Recent/m';
+figma.connect(RecentM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6696:2', {
+  variant: { Size: 'M' },
+  example: () => <RecentM />,
+});
+
+import RecentL from '@semcore/icon/Recent/l';
+figma.connect(RecentL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6696:2', {
+  variant: { Size: 'L' },
+  example: () => <RecentL />,
+});
+
+import TackM from '@semcore/icon/Tack/m';
+figma.connect(TackM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6757:33', {
+  variant: { Size: 'M' },
+  example: () => <TackM />,
+});
+
+import TackL from '@semcore/icon/Tack/l';
+figma.connect(TackL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6757:33', {
+  variant: { Size: 'L' },
+  example: () => <TackL />,
+});
+
+import TimeNightM from '@semcore/icon/TimeNight/m';
+figma.connect(TimeNightM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6:77', {
+  variant: { Size: 'M' },
+  example: () => <TimeNightM />,
+});
+
+import TimeNightL from '@semcore/icon/TimeNight/l';
+figma.connect(TimeNightL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6:77', {
+  variant: { Size: 'L' },
+  example: () => <TimeNightL />,
+});
+
+import SemrushRankM from '@semcore/icon/SemrushRank/m';
+figma.connect(SemrushRankM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=45:7', {
+  variant: { Size: 'M' },
+  example: () => <SemrushRankM />,
+});
+
+import SemrushRankL from '@semcore/icon/SemrushRank/l';
+figma.connect(SemrushRankL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=45:7', {
+  variant: { Size: 'L' },
+  example: () => <SemrushRankL />,
+});
+
+import DesktopM from '@semcore/icon/Desktop/m';
+figma.connect(DesktopM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6:202', {
+  variant: { Size: 'M' },
+  example: () => <DesktopM />,
+});
+
+import DesktopL from '@semcore/icon/Desktop/l';
+figma.connect(DesktopL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6:202', {
+  variant: { Size: 'L' },
+  example: () => <DesktopL />,
+});
+
+import TackNoM from '@semcore/icon/TackNo/m';
+figma.connect(TackNoM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6757:38', {
+  variant: { Size: 'M' },
+  example: () => <TackNoM />,
+});
+
+import TackNoL from '@semcore/icon/TackNo/l';
+figma.connect(TackNoL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6757:38', {
+  variant: { Size: 'L' },
+  example: () => <TackNoL />,
+});
+
+import GiftM from '@semcore/icon/Gift/m';
+figma.connect(GiftM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=9042:2', {
+  variant: { Size: 'M' },
+  example: () => <GiftM />,
+});
+
+import GiftL from '@semcore/icon/Gift/l';
+figma.connect(GiftL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=9042:2', {
+  variant: { Size: 'L' },
+  example: () => <GiftL />,
+});
+
+import ClusteredListM from '@semcore/icon/ClusteredList/m';
+figma.connect(ClusteredListM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2338:4', {
+  variant: { Size: 'M' },
+  example: () => <ClusteredListM />,
+});
+
+import ClusteredListL from '@semcore/icon/ClusteredList/l';
+figma.connect(ClusteredListL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2338:4', {
+  variant: { Size: 'L' },
+  example: () => <ClusteredListL />,
+});
+
+import VideoStreamingM from '@semcore/icon/VideoStreaming/m';
+figma.connect(VideoStreamingM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=7331:8', {
+  variant: { Size: 'M' },
+  example: () => <VideoStreamingM />,
+});
+
+import VideoStreamingL from '@semcore/icon/VideoStreaming/l';
+figma.connect(VideoStreamingL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=7331:8', {
+  variant: { Size: 'L' },
+  example: () => <VideoStreamingL />,
+});
+
+import GamesM from '@semcore/icon/Games/m';
+figma.connect(GamesM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:29', {
+  variant: { Size: 'M' },
+  example: () => <GamesM />,
+});
+
+import GamesL from '@semcore/icon/Games/l';
+figma.connect(GamesL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:29', {
+  variant: { Size: 'L' },
+  example: () => <GamesL />,
+});
+
+import DocumentDropM from '@semcore/icon/DocumentDrop/m';
+figma.connect(DocumentDropM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=436:39', {
+  variant: { Size: 'M' },
+  example: () => <DocumentDropM />,
+});
+
+import DocumentDropL from '@semcore/icon/DocumentDrop/l';
+figma.connect(DocumentDropL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=436:39', {
+  variant: { Size: 'L' },
+  example: () => <DocumentDropL />,
+});
+
+import AttacheCaseM from '@semcore/icon/AttacheCase/m';
+figma.connect(AttacheCaseM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=4737:4', {
+  variant: { Size: 'M' },
+  example: () => <AttacheCaseM />,
+});
+
+import AttacheCaseL from '@semcore/icon/AttacheCase/l';
+figma.connect(AttacheCaseL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=4737:4', {
+  variant: { Size: 'L' },
+  example: () => <AttacheCaseL />,
+});
+
+import YextM from '@semcore/icon/Yext/m';
+figma.connect(YextM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6785:320', {
+  variant: { Size: 'M' },
+  example: () => <YextM />,
+});
+
+import YextL from '@semcore/icon/Yext/l';
+figma.connect(YextL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6785:320', {
+  variant: { Size: 'L' },
+  example: () => <YextL />,
+});
+
+import ChargebackLossM from '@semcore/icon/ChargebackLoss/m';
+figma.connect(ChargebackLossM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2613:14', {
+  variant: { Size: 'M' },
+  example: () => <ChargebackLossM />,
+});
+
+import ChargebackLossL from '@semcore/icon/ChargebackLoss/l';
+figma.connect(ChargebackLossL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2613:14', {
+  variant: { Size: 'L' },
+  example: () => <ChargebackLossL />,
+});
+
+import NotificationM from '@semcore/icon/Notification/m';
+figma.connect(NotificationM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6:29', {
+  variant: { Size: 'M' },
+  example: () => <NotificationM />,
+});
+
+import NotificationL from '@semcore/icon/Notification/l';
+figma.connect(NotificationL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6:29', {
+  variant: { Size: 'L' },
+  example: () => <NotificationL />,
+});
+
+import ShortVideosM from '@semcore/icon/ShortVideos/m';
+figma.connect(ShortVideosM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3190:54', {
+  variant: { Size: 'M' },
+  example: () => <ShortVideosM />,
+});
+
+import ShortVideosL from '@semcore/icon/ShortVideos/l';
+figma.connect(ShortVideosL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3190:54', {
+  variant: { Size: 'L' },
+  example: () => <ShortVideosL />,
+});
+
+import BookM from '@semcore/icon/Book/m';
+figma.connect(BookM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=434:489', {
+  variant: { Size: 'M' },
+  example: () => <BookM />,
+});
+
+import BookL from '@semcore/icon/Book/l';
+figma.connect(BookL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=434:489', {
+  variant: { Size: 'L' },
+  example: () => <BookL />,
+});
+
+import ChatFilledM from '@semcore/icon/ChatFilled/m';
+figma.connect(ChatFilledM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=927:23681', {
+  variant: { Size: 'M' },
+  example: () => <ChatFilledM />,
+});
+
+import ChatFilledL from '@semcore/icon/ChatFilled/l';
+figma.connect(ChatFilledL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=927:23681', {
+  variant: { Size: 'L' },
+  example: () => <ChatFilledL />,
+});
+
+import CarM from '@semcore/icon/Car/m';
+figma.connect(CarM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:34', {
+  variant: { Size: 'M' },
+  example: () => <CarM />,
+});
+
+import CarL from '@semcore/icon/Car/l';
+figma.connect(CarL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:34', {
+  variant: { Size: 'L' },
+  example: () => <CarL />,
+});
+
+import FeaturedVideoM from '@semcore/icon/FeaturedVideo/m';
+figma.connect(FeaturedVideoM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=211:62', {
+  variant: { Size: 'M' },
+  example: () => <FeaturedVideoM />,
+});
+
+import FeaturedVideoL from '@semcore/icon/FeaturedVideo/l';
+figma.connect(FeaturedVideoL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=211:62', {
+  variant: { Size: 'L' },
+  example: () => <FeaturedVideoL />,
+});
+
+import BulbM from '@semcore/icon/Bulb/m';
+figma.connect(BulbM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=12:936', {
+  variant: { Size: 'M' },
+  example: () => <BulbM />,
+});
+
+import BulbL from '@semcore/icon/Bulb/l';
+figma.connect(BulbL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=12:936', {
+  variant: { Size: 'L' },
+  example: () => <BulbL />,
+});
+
+import CardUpdateM from '@semcore/icon/CardUpdate/m';
+figma.connect(CardUpdateM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2617:24', {
+  variant: { Size: 'M' },
+  example: () => <CardUpdateM />,
+});
+
+import CardUpdateL from '@semcore/icon/CardUpdate/l';
+figma.connect(CardUpdateL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2617:24', {
+  variant: { Size: 'L' },
+  example: () => <CardUpdateL />,
+});
+
+import AdMiddleM from '@semcore/icon/AdMiddle/m';
+figma.connect(AdMiddleM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=5952:3', {
+  variant: { Size: 'M' },
+  example: () => <AdMiddleM />,
+});
+
+import AdMiddleL from '@semcore/icon/AdMiddle/l';
+figma.connect(AdMiddleL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=5952:3', {
+  variant: { Size: 'L' },
+  example: () => <AdMiddleL />,
+});
+
+import PowerM from '@semcore/icon/Power/m';
+figma.connect(PowerM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=5830:5', {
+  variant: { Size: 'M' },
+  example: () => <PowerM />,
+});
+
+import PowerL from '@semcore/icon/Power/l';
+figma.connect(PowerL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=5830:5', {
+  variant: { Size: 'L' },
+  example: () => <PowerL />,
+});
+
+import PositionMiddleM from '@semcore/icon/PositionMiddle/m';
+figma.connect(PositionMiddleM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=5952:8', {
+  variant: { Size: 'M' },
+  example: () => <PositionMiddleM />,
+});
+
+import PositionMiddleL from '@semcore/icon/PositionMiddle/l';
+figma.connect(PositionMiddleL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=5952:8', {
+  variant: { Size: 'L' },
+  example: () => <PositionMiddleL />,
+});
+
+import TikTokM from '@semcore/icon/TikTok/m';
+figma.connect(TikTokM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6229:7', {
+  variant: { Size: 'M' },
+  example: () => <TikTokM />,
+});
+
+import TikTokL from '@semcore/icon/TikTok/l';
+figma.connect(TikTokL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6229:7', {
+  variant: { Size: 'L' },
+  example: () => <TikTokL />,
+});
+
+import TrelloM from '@semcore/icon/Trello/m';
+figma.connect(TrelloM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=138:291', {
+  variant: { Size: 'M' },
+  example: () => <TrelloM />,
+});
+
+import TrelloL from '@semcore/icon/Trello/l';
+figma.connect(TrelloL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=138:291', {
+  variant: { Size: 'L' },
+  example: () => <TrelloL />,
+});
+
+import NoteM from '@semcore/icon/Note/m';
+figma.connect(NoteM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=9459:37', {
+  variant: { Size: 'M' },
+  example: () => <NoteM />,
+});
+
+import NoteL from '@semcore/icon/Note/l';
+figma.connect(NoteL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=9459:37', {
+  variant: { Size: 'L' },
+  example: () => <NoteL />,
+});
+
+import TextUnderlineM from '@semcore/icon/TextUnderline/m';
+figma.connect(TextUnderlineM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=9072:12', {
+  variant: { Size: 'M' },
+  example: () => <TextUnderlineM />,
+});
+
+import TextUnderlineL from '@semcore/icon/TextUnderline/l';
+figma.connect(TextUnderlineL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=9072:12', {
+  variant: { Size: 'L' },
+  example: () => <TextUnderlineL />,
+});
+
+import TextQuotesM from '@semcore/icon/TextQuotes/m';
+figma.connect(TextQuotesM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=9072:18', {
+  variant: { Size: 'M' },
+  example: () => <TextQuotesM />,
+});
+
+import TextQuotesL from '@semcore/icon/TextQuotes/l';
+figma.connect(TextQuotesL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=9072:18', {
+  variant: { Size: 'L' },
+  example: () => <TextQuotesL />,
+});
+
+import TextItalicM from '@semcore/icon/TextItalic/m';
+figma.connect(TextItalicM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=8974:13', {
+  variant: { Size: 'M' },
+  example: () => <TextItalicM />,
+});
+
+import TextItalicL from '@semcore/icon/TextItalic/l';
+figma.connect(TextItalicL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=8974:13', {
+  variant: { Size: 'L' },
+  example: () => <TextItalicL />,
+});
+
+import TextBoldM from '@semcore/icon/TextBold/m';
+figma.connect(TextBoldM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=9071:3', {
+  variant: { Size: 'M' },
+  example: () => <TextBoldM />,
+});
+
+import TextBoldL from '@semcore/icon/TextBold/l';
+figma.connect(TextBoldL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=9071:3', {
+  variant: { Size: 'L' },
+  example: () => <TextBoldL />,
+});
+
+import MathPlusM from '@semcore/icon/MathPlus/m';
+figma.connect(MathPlusM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=9:411', {
+  variant: { Size: 'M' },
+  example: () => <MathPlusM />,
+});
+
+import MathPlusL from '@semcore/icon/MathPlus/l';
+figma.connect(MathPlusL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=9:411', {
+  variant: { Size: 'L' },
+  example: () => <MathPlusL />,
+});
+
+import TextM from '@semcore/icon/Text/m';
+figma.connect(TextM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=10:668', {
+  variant: { Size: 'M' },
+  example: () => <TextM />,
+});
+
+import TextL from '@semcore/icon/Text/l';
+figma.connect(TextL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=10:668', {
+  variant: { Size: 'L' },
+  example: () => <TextL />,
+});
+
+import UnionPayM from '@semcore/icon/pay/UnionPay/m';
+figma.connect(UnionPayM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3940:8', {
+  variant: { size: 'm' },
+  example: () => <UnionPayM />,
+});
+
+import UnionPayL from '@semcore/icon/pay/UnionPay/l';
+figma.connect(UnionPayL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3940:8', {
+  variant: { size: 'l' },
+  example: () => <UnionPayL />,
+});
+
+import AmericanExpressM from '@semcore/icon/pay/AmericanExpress/m';
+figma.connect(AmericanExpressM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3940:7', {
+  variant: { size: 'm' },
+  example: () => <AmericanExpressM />,
+});
+
+import AmericanExpressL from '@semcore/icon/pay/AmericanExpress/l';
+figma.connect(AmericanExpressL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3940:7', {
+  variant: { size: 'l' },
+  example: () => <AmericanExpressL />,
+});
+
+import CreditCardM from '@semcore/icon/pay/CreditCard/m';
+figma.connect(CreditCardM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3940:13', {
+  variant: { size: 'm' },
+  example: () => <CreditCardM />,
+});
+
+import CreditCardL from '@semcore/icon/pay/CreditCard/l';
+figma.connect(CreditCardL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3940:13', {
+  variant: { size: 'l' },
+  example: () => <CreditCardL />,
+});
+
+import UserDemoM from '@semcore/icon/UserDemo/m';
+figma.connect(UserDemoM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=14:71', {
+  variant: { Size: 'M' },
+  example: () => <UserDemoM />,
+});
+
+import UserDemoL from '@semcore/icon/UserDemo/l';
+figma.connect(UserDemoL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=14:71', {
+  variant: { Size: 'L' },
+  example: () => <UserDemoL />,
+});
+
+import ChevronDownM from '@semcore/icon/ChevronDown/m';
+figma.connect(ChevronDownM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3:4645', {
+  variant: { Size: 'M' },
+  example: () => <ChevronDownM />,
+});
+
+import ChevronDownL from '@semcore/icon/ChevronDown/l';
+figma.connect(ChevronDownL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3:4645', {
+  variant: { Size: 'L' },
+  example: () => <ChevronDownL />,
+});
+
+import RecreationM from '@semcore/icon/Recreation/m';
+figma.connect(RecreationM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:154', {
+  variant: { Size: 'M' },
+  example: () => <RecreationM />,
+});
+
+import RecreationL from '@semcore/icon/Recreation/l';
+figma.connect(RecreationL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:154', {
+  variant: { Size: 'L' },
+  example: () => <RecreationL />,
+});
+
+import ChevronDoubleRightM from '@semcore/icon/ChevronDoubleRight/m';
+figma.connect(ChevronDoubleRightM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=78:143', {
+  variant: { Size: 'M' },
+  example: () => <ChevronDoubleRightM />,
+});
+
+import ChevronDoubleRightL from '@semcore/icon/ChevronDoubleRight/l';
+figma.connect(ChevronDoubleRightL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=78:143', {
+  variant: { Size: 'L' },
+  example: () => <ChevronDoubleRightL />,
+});
+
+import MobileM from '@semcore/icon/Mobile/m';
+figma.connect(MobileM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6:126', {
+  variant: { Size: 'M' },
+  example: () => <MobileM />,
+});
+
+import MobileL from '@semcore/icon/Mobile/l';
+figma.connect(MobileL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6:126', {
+  variant: { Size: 'L' },
+  example: () => <MobileL />,
+});
+
+import JCBM from '@semcore/icon/pay/JCB/m';
+figma.connect(JCBM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3940:10', {
+  variant: { size: 'm' },
+  example: () => <JCBM />,
+});
+
+import JCBL from '@semcore/icon/pay/JCB/l';
+figma.connect(JCBL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3940:10', {
+  variant: { size: 'l' },
+  example: () => <JCBL />,
+});
+
+import SecurityNoM from '@semcore/icon/SecurityNo/m';
+figma.connect(SecurityNoM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3980:4', {
+  variant: { Size: 'M' },
+  example: () => <SecurityNoM />,
+});
+
+import SecurityNoL from '@semcore/icon/SecurityNo/l';
+figma.connect(SecurityNoL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3980:4', {
+  variant: { Size: 'L' },
+  example: () => <SecurityNoL />,
+});
+
+import ReportM from '@semcore/icon/Report/m';
+figma.connect(ReportM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=12:1201', {
+  variant: { Size: 'M' },
+  example: () => <ReportM />,
+});
+
+import ReportL from '@semcore/icon/Report/l';
+figma.connect(ReportL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=12:1201', {
+  variant: { Size: 'L' },
+  example: () => <ReportL />,
+});
+
+import PositionBottomM from '@semcore/icon/PositionBottom/m';
+figma.connect(PositionBottomM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=388:9', {
+  variant: { Size: 'M' },
+  example: () => <PositionBottomM />,
+});
+
+import PositionBottomL from '@semcore/icon/PositionBottom/l';
+figma.connect(PositionBottomL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=388:9', {
+  variant: { Size: 'L' },
+  example: () => <PositionBottomL />,
+});
+
+import PictureFrameM from '@semcore/icon/PictureFrame/m';
+figma.connect(PictureFrameM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=388:4', {
+  variant: { Size: 'M' },
+  example: () => <PictureFrameM />,
+});
+
+import PictureFrameL from '@semcore/icon/PictureFrame/l';
+figma.connect(PictureFrameL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=388:4', {
+  variant: { Size: 'L' },
+  example: () => <PictureFrameL />,
+});
+
+import WeChatPayM from '@semcore/icon/pay/WeChatPay/m';
+figma.connect(WeChatPayM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3940:11', {
+  variant: { size: 'm' },
+  example: () => <WeChatPayM />,
+});
+
+import WeChatPayL from '@semcore/icon/pay/WeChatPay/l';
+figma.connect(WeChatPayL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3940:11', {
+  variant: { size: 'l' },
+  example: () => <WeChatPayL />,
+});
+
+import ExitM from '@semcore/icon/Exit/m';
+figma.connect(ExitM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=436:4', {
+  variant: { Size: 'M' },
+  example: () => <ExitM />,
+});
+
+import ExitL from '@semcore/icon/Exit/l';
+figma.connect(ExitL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=436:4', {
+  variant: { Size: 'L' },
+  example: () => <ExitL />,
+});
+
+import LaptopM from '@semcore/icon/Laptop/m';
+figma.connect(LaptopM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6:197', {
+  variant: { Size: 'M' },
+  example: () => <LaptopM />,
+});
+
+import LaptopL from '@semcore/icon/Laptop/l';
+figma.connect(LaptopL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6:197', {
+  variant: { Size: 'L' },
+  example: () => <LaptopL />,
+});
+
+import DinersM from '@semcore/icon/pay/Diners/m';
+figma.connect(DinersM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=4193:4', {
+  variant: { size: 'm' },
+  example: () => <DinersM />,
+});
+
+import DinersL from '@semcore/icon/pay/Diners/l';
+figma.connect(DinersL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=4193:4', {
+  variant: { size: 'l' },
+  example: () => <DinersL />,
+});
+
+import FeaturedImageM from '@semcore/icon/FeaturedImage/m';
+figma.connect(FeaturedImageM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=211:67', {
+  variant: { Size: 'M' },
+  example: () => <FeaturedImageM />,
+});
+
+import FeaturedImageL from '@semcore/icon/FeaturedImage/l';
+figma.connect(FeaturedImageL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=211:67', {
+  variant: { Size: 'L' },
+  example: () => <FeaturedImageL />,
+});
+
+import UnarchiveM from '@semcore/icon/Unarchive/m';
+figma.connect(UnarchiveM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2530:4', {
+  variant: { Size: 'M' },
+  example: () => <UnarchiveM />,
+});
+
+import UnarchiveL from '@semcore/icon/Unarchive/l';
+figma.connect(UnarchiveL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2530:4', {
+  variant: { Size: 'L' },
+  example: () => <UnarchiveL />,
+});
+
+import DiscoverM from '@semcore/icon/pay/Discover/m';
+figma.connect(DiscoverM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3940:9', {
+  variant: { size: 'm' },
+  example: () => <DiscoverM />,
+});
+
+import DiscoverL from '@semcore/icon/pay/Discover/l';
+figma.connect(DiscoverL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3940:9', {
+  variant: { size: 'l' },
+  example: () => <DiscoverL />,
+});
+
+import SentM from '@semcore/icon/Sent/m';
+figma.connect(SentM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=508:5', {
+  variant: { Size: 'M' },
+  example: () => <SentM />,
+});
+
+import SentL from '@semcore/icon/Sent/l';
+figma.connect(SentL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=508:5', {
+  variant: { Size: 'L' },
+  example: () => <SentL />,
+});
+
+import VisaM from '@semcore/icon/pay/Visa/m';
+figma.connect(VisaM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3940:5', {
+  variant: { size: 'm' },
+  example: () => <VisaM />,
+});
+
+import VisaL from '@semcore/icon/pay/Visa/l';
+figma.connect(VisaL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3940:5', {
+  variant: { size: 'l' },
+  example: () => <VisaL />,
+});
+
+import PulseM from '@semcore/icon/Pulse/m';
+figma.connect(PulseM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=56:4', {
+  variant: { Size: 'M' },
+  example: () => <PulseM />,
+});
+
+import PulseL from '@semcore/icon/Pulse/l';
+figma.connect(PulseL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=56:4', {
+  variant: { Size: 'L' },
+  example: () => <PulseL />,
+});
+
+import TelescopeM from '@semcore/icon/Telescope/m';
+figma.connect(TelescopeM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=12:1061', {
+  variant: { Size: 'M' },
+  example: () => <TelescopeM />,
+});
+
+import TelescopeL from '@semcore/icon/Telescope/l';
+figma.connect(TelescopeL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=12:1061', {
+  variant: { Size: 'L' },
+  example: () => <TelescopeL />,
+});
+
+import AdM from '@semcore/icon/Ad/m';
+figma.connect(AdM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=426:298', {
+  variant: { Size: 'M' },
+  example: () => <AdM />,
+});
+
+import AdL from '@semcore/icon/Ad/l';
+figma.connect(AdL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=426:298', {
+  variant: { Size: 'L' },
+  example: () => <AdL />,
+});
+
+import WordpressM from '@semcore/icon/Wordpress/m';
+figma.connect(WordpressM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=217:167', {
+  variant: { Size: 'M' },
+  example: () => <WordpressM />,
+});
+
+import WordpressL from '@semcore/icon/Wordpress/l';
+figma.connect(WordpressL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=217:167', {
+  variant: { Size: 'L' },
+  example: () => <WordpressL />,
+});
+
+import RssM from '@semcore/icon/Rss/m';
+figma.connect(RssM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=211:57', {
+  variant: { Size: 'M' },
+  example: () => <RssM />,
+});
+
+import RssL from '@semcore/icon/Rss/l';
+figma.connect(RssL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=211:57', {
+  variant: { Size: 'L' },
+  example: () => <RssL />,
+});
+
+import SkypeM from '@semcore/icon/Skype/m';
+figma.connect(SkypeM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=391:44', {
+  variant: { Size: 'M' },
+  example: () => <SkypeM />,
+});
+
+import SkypeL from '@semcore/icon/Skype/l';
+figma.connect(SkypeL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=391:44', {
+  variant: { Size: 'L' },
+  example: () => <SkypeL />,
+});
+
+import StopM from '@semcore/icon/Stop/m';
+figma.connect(StopM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=423:289', {
+  variant: { Size: 'M' },
+  example: () => <StopM />,
+});
+
+import StopL from '@semcore/icon/Stop/l';
+figma.connect(StopL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=423:289', {
+  variant: { Size: 'L' },
+  example: () => <StopL />,
+});
+
+import ChargebackWinM from '@semcore/icon/ChargebackWin/m';
+figma.connect(ChargebackWinM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2613:9', {
+  variant: { Size: 'M' },
+  example: () => <ChargebackWinM />,
+});
+
+import ChargebackWinL from '@semcore/icon/ChargebackWin/l';
+figma.connect(ChargebackWinL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2613:9', {
+  variant: { Size: 'L' },
+  example: () => <ChargebackWinL />,
+});
+
+import RobotM from '@semcore/icon/Robot/m';
+figma.connect(RobotM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=184:70', {
+  variant: { Size: 'M' },
+  example: () => <RobotM />,
+});
+
+import RobotL from '@semcore/icon/Robot/l';
+figma.connect(RobotL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=184:70', {
+  variant: { Size: 'L' },
+  example: () => <RobotL />,
+});
+
+import CopyM from '@semcore/icon/Copy/m';
+figma.connect(CopyM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=8:283', {
+  variant: { Size: 'M' },
+  example: () => <CopyM />,
+});
+
+import CopyL from '@semcore/icon/Copy/l';
+figma.connect(CopyL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=8:283', {
+  variant: { Size: 'L' },
+  example: () => <CopyL />,
+});
+
+import TileM from '@semcore/icon/Tile/m';
+figma.connect(TileM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=12:1974', {
+  variant: { Size: 'M' },
+  example: () => <TileM />,
+});
+
+import TileL from '@semcore/icon/Tile/l';
+figma.connect(TileL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=12:1974', {
+  variant: { Size: 'L' },
+  example: () => <TileL />,
+});
+
+import StrollerM from '@semcore/icon/Stroller/m';
+figma.connect(StrollerM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2678:4', {
+  variant: { Size: 'M' },
+  example: () => <StrollerM />,
+});
+
+import StrollerL from '@semcore/icon/Stroller/l';
+figma.connect(StrollerL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2678:4', {
+  variant: { Size: 'L' },
+  example: () => <StrollerL />,
+});
+
+import HealthM from '@semcore/icon/Health/m';
+figma.connect(HealthM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=146:4', {
+  variant: { Size: 'M' },
+  example: () => <HealthM />,
+});
+
+import HealthL from '@semcore/icon/Health/l';
+figma.connect(HealthL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=146:4', {
+  variant: { Size: 'L' },
+  example: () => <HealthL />,
+});
+
+import VeterinaryM from '@semcore/icon/Veterinary/m';
+figma.connect(VeterinaryM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:109', {
+  variant: { Size: 'M' },
+  example: () => <VeterinaryM />,
+});
+
+import VeterinaryL from '@semcore/icon/Veterinary/l';
+figma.connect(VeterinaryL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:109', {
+  variant: { Size: 'L' },
+  example: () => <VeterinaryL />,
+});
+
+import TagFilledM from '@semcore/icon/TagFilled/m';
+figma.connect(TagFilledM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=226:382', {
+  variant: { Size: 'M' },
+  example: () => <TagFilledM />,
+});
+
+import TagFilledL from '@semcore/icon/TagFilled/l';
+figma.connect(TagFilledL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=226:382', {
+  variant: { Size: 'L' },
+  example: () => <TagFilledL />,
+});
+
+import SitemapM from '@semcore/icon/Sitemap/m';
+figma.connect(SitemapM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=184:60', {
+  variant: { Size: 'M' },
+  example: () => <SitemapM />,
+});
+
+import SitemapL from '@semcore/icon/Sitemap/l';
+figma.connect(SitemapL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=184:60', {
+  variant: { Size: 'L' },
+  example: () => <SitemapL />,
+});
+
+import ValueM from '@semcore/icon/Value/m';
+figma.connect(ValueM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=546:162', {
+  variant: { Size: 'M' },
+  example: () => <ValueM />,
+});
+
+import ValueL from '@semcore/icon/Value/l';
+figma.connect(ValueL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=546:162', {
+  variant: { Size: 'L' },
+  example: () => <ValueL />,
+});
+
+import BracketsCurlyM from '@semcore/icon/BracketsCurly/m';
+figma.connect(BracketsCurlyM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=56:32', {
+  variant: { Size: 'M' },
+  example: () => <BracketsCurlyM />,
+});
+
+import BracketsCurlyL from '@semcore/icon/BracketsCurly/l';
+figma.connect(BracketsCurlyL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=56:32', {
+  variant: { Size: 'L' },
+  example: () => <BracketsCurlyL />,
+});
+
+import VolumeUpM from '@semcore/icon/VolumeUp/m';
+figma.connect(VolumeUpM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=431:478', {
+  variant: { Size: 'M' },
+  example: () => <VolumeUpM />,
+});
+
+import VolumeUpL from '@semcore/icon/VolumeUp/l';
+figma.connect(VolumeUpL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=431:478', {
+  variant: { Size: 'L' },
+  example: () => <VolumeUpL />,
+});
+
+import DropM from '@semcore/icon/Drop/m';
+figma.connect(DropM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=436:25', {
+  variant: { Size: 'M' },
+  example: () => <DropM />,
+});
+
+import DropL from '@semcore/icon/Drop/l';
+figma.connect(DropL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=436:25', {
+  variant: { Size: 'L' },
+  example: () => <DropL />,
+});
+
+import FolderM from '@semcore/icon/Folder/m';
+figma.connect(FolderM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=136:58', {
+  variant: { Size: 'M' },
+  example: () => <FolderM />,
+});
+
+import FolderL from '@semcore/icon/Folder/l';
+figma.connect(FolderL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=136:58', {
+  variant: { Size: 'L' },
+  example: () => <FolderL />,
+});
+
+import SafariM from '@semcore/icon/Safari/m';
+figma.connect(SafariM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=391:49', {
+  variant: { Size: 'M' },
+  example: () => <SafariM />,
+});
+
+import SafariL from '@semcore/icon/Safari/l';
+figma.connect(SafariL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=391:49', {
+  variant: { Size: 'L' },
+  example: () => <SafariL />,
+});
+
+import QuestionsAnswersM from '@semcore/icon/QuestionsAnswers/m';
+figma.connect(QuestionsAnswersM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=5718:14', {
+  variant: { Size: 'M' },
+  example: () => <QuestionsAnswersM />,
+});
+
+import QuestionsAnswersL from '@semcore/icon/QuestionsAnswers/l';
+figma.connect(QuestionsAnswersL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=5718:14', {
+  variant: { Size: 'L' },
+  example: () => <QuestionsAnswersL />,
+});
+
+import FileUploadM from '@semcore/icon/FileUpload/m';
+figma.connect(FileUploadM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=244:117', {
+  variant: { Size: 'M' },
+  example: () => <FileUploadM />,
+});
+
+import FileUploadL from '@semcore/icon/FileUpload/l';
+figma.connect(FileUploadL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=244:117', {
+  variant: { Size: 'L' },
+  example: () => <FileUploadL />,
+});
+
+import ScienceM from '@semcore/icon/Science/m';
+figma.connect(ScienceM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:129', {
+  variant: { Size: 'M' },
+  example: () => <ScienceM />,
+});
+
+import ScienceL from '@semcore/icon/Science/l';
+figma.connect(ScienceL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:129', {
+  variant: { Size: 'L' },
+  example: () => <ScienceL />,
+});
+
+import PopularProductsM from '@semcore/icon/PopularProducts/m';
+figma.connect(PopularProductsM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3190:34', {
+  variant: { Size: 'M' },
+  example: () => <PopularProductsM />,
+});
+
+import PopularProductsL from '@semcore/icon/PopularProducts/l';
+figma.connect(PopularProductsL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3190:34', {
+  variant: { Size: 'L' },
+  example: () => <PopularProductsL />,
+});
+
+import MuseumM from '@semcore/icon/Museum/m';
+figma.connect(MuseumM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=12:1206', {
+  variant: { Size: 'M' },
+  example: () => <MuseumM />,
+});
+
+import MuseumL from '@semcore/icon/Museum/l';
+figma.connect(MuseumL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=12:1206', {
+  variant: { Size: 'L' },
+  example: () => <MuseumL />,
+});
+
+import MedkitM from '@semcore/icon/Medkit/m';
+figma.connect(MedkitM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=211:47', {
+  variant: { Size: 'M' },
+  example: () => <MedkitM />,
+});
+
+import MedkitL from '@semcore/icon/Medkit/l';
+figma.connect(MedkitL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=211:47', {
+  variant: { Size: 'L' },
+  example: () => <MedkitL />,
+});
+
+import PopupM from '@semcore/icon/Popup/m';
+figma.connect(PopupM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=526:5', {
+  variant: { Size: 'M' },
+  example: () => <PopupM />,
+});
+
+import PopupL from '@semcore/icon/Popup/l';
+figma.connect(PopupL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=526:5', {
+  variant: { Size: 'L' },
+  example: () => <PopupL />,
+});
+
+import FashionM from '@semcore/icon/Fashion/m';
+figma.connect(FashionM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:139', {
+  variant: { Size: 'M' },
+  example: () => <FashionM />,
+});
+
+import FashionL from '@semcore/icon/Fashion/l';
+figma.connect(FashionL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:139', {
+  variant: { Size: 'L' },
+  example: () => <FashionL />,
+});
+
+import ReloadM from '@semcore/icon/Reload/m';
+figma.connect(ReloadM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=179:10', {
+  variant: { Size: 'M' },
+  example: () => <ReloadM />,
+});
+
+import ReloadL from '@semcore/icon/Reload/l';
+figma.connect(ReloadL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=179:10', {
+  variant: { Size: 'L' },
+  example: () => <ReloadL />,
+});
+
+import FacebookM from '@semcore/icon/Facebook/m';
+figma.connect(FacebookM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:630', {
+  variant: { Size: 'M' },
+  example: () => <FacebookM />,
+});
+
+import FacebookL from '@semcore/icon/Facebook/l';
+figma.connect(FacebookL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:630', {
+  variant: { Size: 'L' },
+  example: () => <FacebookL />,
+});
+
+import CursorMoveM from '@semcore/icon/CursorMove/m';
+figma.connect(CursorMoveM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=12:972', {
+  variant: { Size: 'M' },
+  example: () => <CursorMoveM />,
+});
+
+import CursorMoveL from '@semcore/icon/CursorMove/l';
+figma.connect(CursorMoveL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=12:972', {
+  variant: { Size: 'L' },
+  example: () => <CursorMoveL />,
+});
+
+import BookmarkM from '@semcore/icon/Bookmark/m';
+figma.connect(BookmarkM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=245:9', {
+  variant: { Size: 'M' },
+  example: () => <BookmarkM />,
+});
+
+import BookmarkL from '@semcore/icon/Bookmark/l';
+figma.connect(BookmarkL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=245:9', {
+  variant: { Size: 'L' },
+  example: () => <BookmarkL />,
+});
+
+import EditM from '@semcore/icon/Edit/m';
+figma.connect(EditM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=8:288', {
+  variant: { Size: 'M' },
+  example: () => <EditM />,
+});
+
+import EditL from '@semcore/icon/Edit/l';
+figma.connect(EditL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=8:288', {
+  variant: { Size: 'L' },
+  example: () => <EditL />,
+});
+
+import CollapseM from '@semcore/icon/Collapse/m';
+figma.connect(CollapseM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=436:16', {
+  variant: { Size: 'M' },
+  example: () => <CollapseM />,
+});
+
+import CollapseL from '@semcore/icon/Collapse/l';
+figma.connect(CollapseL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=436:16', {
+  variant: { Size: 'L' },
+  example: () => <CollapseL />,
+});
+
+import LanguageM from '@semcore/icon/Language/m';
+figma.connect(LanguageM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:24', {
+  variant: { Size: 'M' },
+  example: () => <LanguageM />,
+});
+
+import LanguageL from '@semcore/icon/Language/l';
+figma.connect(LanguageL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:24', {
+  variant: { Size: 'L' },
+  example: () => <LanguageL />,
+});
+
+import ChartPieM from '@semcore/icon/ChartPie/m';
+figma.connect(ChartPieM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=209:19', {
+  variant: { Size: 'M' },
+  example: () => <ChartPieM />,
+});
+
+import ChartPieL from '@semcore/icon/ChartPie/l';
+figma.connect(ChartPieL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=209:19', {
+  variant: { Size: 'L' },
+  example: () => <ChartPieL />,
+});
+
+import HamburgerM from '@semcore/icon/Hamburger/m';
+figma.connect(HamburgerM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=10:582', {
+  variant: { Size: 'M' },
+  example: () => <HamburgerM />,
+});
+
+import HamburgerL from '@semcore/icon/Hamburger/l';
+figma.connect(HamburgerL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=10:582', {
+  variant: { Size: 'L' },
+  example: () => <HamburgerL />,
+});
+
+import CraftM from '@semcore/icon/Craft/m';
+figma.connect(CraftM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:44', {
+  variant: { Size: 'M' },
+  example: () => <CraftM />,
+});
+
+import CraftL from '@semcore/icon/Craft/l';
+figma.connect(CraftL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:44', {
+  variant: { Size: 'L' },
+  example: () => <CraftL />,
+});
+
+import EventsM from '@semcore/icon/Events/m';
+figma.connect(EventsM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:149', {
+  variant: { Size: 'M' },
+  example: () => <EventsM />,
+});
+
+import EventsL from '@semcore/icon/Events/l';
+figma.connect(EventsL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:149', {
+  variant: { Size: 'L' },
+  example: () => <EventsL />,
+});
+
+import FoodM from '@semcore/icon/Food/m';
+figma.connect(FoodM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:9', {
+  variant: { Size: 'M' },
+  example: () => <FoodM />,
+});
+
+import FoodL from '@semcore/icon/Food/l';
+figma.connect(FoodL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:9', {
+  variant: { Size: 'L' },
+  example: () => <FoodL />,
+});
+
+import FishM from '@semcore/icon/Fish/m';
+figma.connect(FishM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:79', {
+  variant: { Size: 'M' },
+  example: () => <FishM />,
+});
+
+import FishL from '@semcore/icon/Fish/l';
+figma.connect(FishL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:79', {
+  variant: { Size: 'L' },
+  example: () => <FishL />,
+});
+
+import HourglassM from '@semcore/icon/Hourglass/m';
+figma.connect(HourglassM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=224:303', {
+  variant: { Size: 'M' },
+  example: () => <HourglassM />,
+});
+
+import HourglassL from '@semcore/icon/Hourglass/l';
+figma.connect(HourglassL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=224:303', {
+  variant: { Size: 'L' },
+  example: () => <HourglassL />,
+});
+
+import EventM from '@semcore/icon/Event/m';
+figma.connect(EventM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3190:24', {
+  variant: { Size: 'M' },
+  example: () => <EventM />,
+});
+
+import EventL from '@semcore/icon/Event/l';
+figma.connect(EventL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3190:24', {
+  variant: { Size: 'L' },
+  example: () => <EventL />,
+});
+
+import FireM from '@semcore/icon/Fire/m';
+figma.connect(FireM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=624:424', {
+  variant: { Size: 'M' },
+  example: () => <FireM />,
+});
+
+import FireL from '@semcore/icon/Fire/l';
+figma.connect(FireL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=624:424', {
+  variant: { Size: 'L' },
+  example: () => <FireL />,
+});
+
+import JewelryM from '@semcore/icon/Jewelry/m';
+figma.connect(JewelryM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:179', {
+  variant: { Size: 'M' },
+  example: () => <JewelryM />,
+});
+
+import JewelryL from '@semcore/icon/Jewelry/l';
+figma.connect(JewelryL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:179', {
+  variant: { Size: 'L' },
+  example: () => <JewelryL />,
+});
+
+import MusicM from '@semcore/icon/Music/m';
+figma.connect(MusicM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:159', {
+  variant: { Size: 'M' },
+  example: () => <MusicM />,
+});
+
+import MusicL from '@semcore/icon/Music/l';
+figma.connect(MusicL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:159', {
+  variant: { Size: 'L' },
+  example: () => <MusicL />,
+});
+
+import FormM from '@semcore/icon/Form/m';
+figma.connect(FormM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=12:913', {
+  variant: { Size: 'M' },
+  example: () => <FormM />,
+});
+
+import FormL from '@semcore/icon/Form/l';
+figma.connect(FormL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=12:913', {
+  variant: { Size: 'L' },
+  example: () => <FormL />,
+});
+
+import ListNumberM from '@semcore/icon/ListNumber/m';
+figma.connect(ListNumberM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=503:4', {
+  variant: { Size: 'M' },
+  example: () => <ListNumberM />,
+});
+
+import ListNumberL from '@semcore/icon/ListNumber/l';
+figma.connect(ListNumberL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=503:4', {
+  variant: { Size: 'L' },
+  example: () => <ListNumberL />,
+});
+
+import PublicSafetyM from '@semcore/icon/PublicSafety/m';
+figma.connect(PublicSafetyM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:89', {
+  variant: { Size: 'M' },
+  example: () => <PublicSafetyM />,
+});
+
+import PublicSafetyL from '@semcore/icon/PublicSafety/l';
+figma.connect(PublicSafetyL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:89', {
+  variant: { Size: 'L' },
+  example: () => <PublicSafetyL />,
+});
+
+import KeyCmdM from '@semcore/icon/KeyCmd/m';
+figma.connect(KeyCmdM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:545', {
+  variant: { Size: 'M' },
+  example: () => <KeyCmdM />,
+});
+
+import KeyCmdL from '@semcore/icon/KeyCmd/l';
+figma.connect(KeyCmdL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:545', {
+  variant: { Size: 'L' },
+  example: () => <KeyCmdL />,
+});
+
+import VideoM from '@semcore/icon/Video/m';
+figma.connect(VideoM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:500', {
+  variant: { Size: 'M' },
+  example: () => <VideoM />,
+});
+
+import VideoL from '@semcore/icon/Video/l';
+figma.connect(VideoL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:500', {
+  variant: { Size: 'L' },
+  example: () => <VideoL />,
+});
+
+import ShowNoM from '@semcore/icon/ShowNo/m';
+figma.connect(ShowNoM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=648:9', {
+  variant: { Size: 'M' },
+  example: () => <ShowNoM />,
+});
+
+import ShowNoL from '@semcore/icon/ShowNo/l';
+figma.connect(ShowNoL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=648:9', {
+  variant: { Size: 'L' },
+  example: () => <ShowNoL />,
+});
+
+import ChartBubbleM from '@semcore/icon/ChartBubble/m';
+figma.connect(ChartBubbleM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=209:30', {
+  variant: { Size: 'M' },
+  example: () => <ChartBubbleM />,
+});
+
+import ChartBubbleL from '@semcore/icon/ChartBubble/l';
+figma.connect(ChartBubbleL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=209:30', {
+  variant: { Size: 'L' },
+  example: () => <ChartBubbleL />,
+});
+
+import ListCheckM from '@semcore/icon/ListCheck/m';
+figma.connect(ListCheckM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=10:663', {
+  variant: { Size: 'M' },
+  example: () => <ListCheckM />,
+});
+
+import ListCheckL from '@semcore/icon/ListCheck/l';
+figma.connect(ListCheckL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=10:663', {
+  variant: { Size: 'L' },
+  example: () => <ListCheckL />,
+});
+
+import GlobeM from '@semcore/icon/Globe/m';
+figma.connect(GlobeM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=11:890', {
+  variant: { Size: 'M' },
+  example: () => <GlobeM />,
+});
+
+import GlobeL from '@semcore/icon/Globe/l';
+figma.connect(GlobeL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=11:890', {
+  variant: { Size: 'L' },
+  example: () => <GlobeL />,
+});
+
+import PinUsdM from '@semcore/icon/PinUsd/m';
+figma.connect(PinUsdM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=519:139', {
+  variant: { Size: 'M' },
+  example: () => <PinUsdM />,
+});
+
+import PinUsdL from '@semcore/icon/PinUsd/l';
+figma.connect(PinUsdL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=519:139', {
+  variant: { Size: 'L' },
+  example: () => <PinUsdL />,
+});
+
+import CutM from '@semcore/icon/Cut/m';
+figma.connect(CutM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=210:18', {
+  variant: { Size: 'M' },
+  example: () => <CutM />,
+});
+
+import CutL from '@semcore/icon/Cut/l';
+figma.connect(CutL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=210:18', {
+  variant: { Size: 'L' },
+  example: () => <CutL />,
+});
+
+import KeyM from '@semcore/icon/Key/m';
+figma.connect(KeyM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=437:46', {
+  variant: { Size: 'M' },
+  example: () => <KeyM />,
+});
+
+import KeyL from '@semcore/icon/Key/l';
+figma.connect(KeyL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=437:46', {
+  variant: { Size: 'L' },
+  example: () => <KeyL />,
+});
+
+import MagicWandM from '@semcore/icon/MagicWand/m';
+figma.connect(MagicWandM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=12:1115', {
+  variant: { Size: 'M' },
+  example: () => <MagicWandM />,
+});
+
+import MagicWandL from '@semcore/icon/MagicWand/l';
+figma.connect(MagicWandL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=12:1115', {
+  variant: { Size: 'L' },
+  example: () => <MagicWandL />,
+});
+
+import MasterCardM from '@semcore/icon/pay/MasterCard/m';
+figma.connect(MasterCardM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3940:6', {
+  variant: { size: 'm' },
+  example: () => <MasterCardM />,
+});
+
+import MasterCardL from '@semcore/icon/pay/MasterCard/l';
+figma.connect(MasterCardL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3940:6', {
+  variant: { size: 'l' },
+  example: () => <MasterCardL />,
+});
+
+import MailM from '@semcore/icon/Mail/m';
+figma.connect(MailM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=518:33', {
+  variant: { Size: 'M' },
+  example: () => <MailM />,
+});
+
+import MailL from '@semcore/icon/Mail/l';
+figma.connect(MailL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=518:33', {
+  variant: { Size: 'L' },
+  example: () => <MailL />,
+});
+
+import OrganicM from '@semcore/icon/Organic/m';
+figma.connect(OrganicM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=211:42', {
+  variant: { Size: 'M' },
+  example: () => <OrganicM />,
+});
+
+import OrganicL from '@semcore/icon/Organic/l';
+figma.connect(OrganicL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=211:42', {
+  variant: { Size: 'L' },
+  example: () => <OrganicL />,
+});
+
+import PauseM from '@semcore/icon/Pause/m';
+figma.connect(PauseM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=10:558', {
+  variant: { Size: 'M' },
+  example: () => <PauseM />,
+});
+
+import PauseL from '@semcore/icon/Pause/l';
+figma.connect(PauseL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=10:558', {
+  variant: { Size: 'L' },
+  example: () => <PauseL />,
+});
+
+import MarineM from '@semcore/icon/Marine/m';
+figma.connect(MarineM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:54', {
+  variant: { Size: 'M' },
+  example: () => <MarineM />,
+});
+
+import MarineL from '@semcore/icon/Marine/l';
+figma.connect(MarineL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:54', {
+  variant: { Size: 'L' },
+  example: () => <MarineL />,
+});
+
+import SortAscM from '@semcore/icon/SortAsc/m';
+figma.connect(SortAscM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=12:2025', {
+  variant: { Size: 'M' },
+  example: () => <SortAscM />,
+});
+
+import SortAscL from '@semcore/icon/SortAsc/l';
+figma.connect(SortAscL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=12:2025', {
+  variant: { Size: 'L' },
+  example: () => <SortAscL />,
+});
+
+import LikeM from '@semcore/icon/Like/m';
+figma.connect(LikeM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=147:30', {
+  variant: { Size: 'M' },
+  example: () => <LikeM />,
+});
+
+import LikeL from '@semcore/icon/Like/l';
+figma.connect(LikeL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=147:30', {
+  variant: { Size: 'L' },
+  example: () => <LikeL />,
+});
+
+import HashtagM from '@semcore/icon/Hashtag/m';
+figma.connect(HashtagM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=5039:19', {
+  variant: { Size: 'M' },
+  example: () => <HashtagM />,
+});
+
+import HashtagL from '@semcore/icon/Hashtag/l';
+figma.connect(HashtagL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=5039:19', {
+  variant: { Size: 'L' },
+  example: () => <HashtagL />,
+});
+
+import FolderOpenM from '@semcore/icon/FolderOpen/m';
+figma.connect(FolderOpenM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=136:63', {
+  variant: { Size: 'M' },
+  example: () => <FolderOpenM />,
+});
+
+import FolderOpenL from '@semcore/icon/FolderOpen/l';
+figma.connect(FolderOpenL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=136:63', {
+  variant: { Size: 'L' },
+  example: () => <FolderOpenL />,
+});
+
+import FormalM from '@semcore/icon/Formal/m';
+figma.connect(FormalM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=1475:9', {
+  variant: { Size: 'M' },
+  example: () => <FormalM />,
+});
+
+import FormalL from '@semcore/icon/Formal/l';
+figma.connect(FormalL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=1475:9', {
+  variant: { Size: 'L' },
+  example: () => <FormalL />,
+});
+
+import PicturesM from '@semcore/icon/Pictures/m';
+figma.connect(PicturesM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=242:28', {
+  variant: { Size: 'M' },
+  example: () => <PicturesM />,
+});
+
+import PicturesL from '@semcore/icon/Pictures/l';
+figma.connect(PicturesL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=242:28', {
+  variant: { Size: 'L' },
+  example: () => <PicturesL />,
+});
+
+import CosmeticsM from '@semcore/icon/Cosmetics/m';
+figma.connect(CosmeticsM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:144', {
+  variant: { Size: 'M' },
+  example: () => <CosmeticsM />,
+});
+
+import CosmeticsL from '@semcore/icon/Cosmetics/l';
+figma.connect(CosmeticsL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:144', {
+  variant: { Size: 'L' },
+  example: () => <CosmeticsL />,
+});
+
+import WebPagesM from '@semcore/icon/WebPages/m';
+figma.connect(WebPagesM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=551:21', {
+  variant: { Size: 'M' },
+  example: () => <WebPagesM />,
+});
+
+import WebPagesL from '@semcore/icon/WebPages/l';
+figma.connect(WebPagesL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=551:21', {
+  variant: { Size: 'L' },
+  example: () => <WebPagesL />,
+});
+
+import MicrophoneM from '@semcore/icon/Microphone/m';
+figma.connect(MicrophoneM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=507:4', {
+  variant: { Size: 'M' },
+  example: () => <MicrophoneM />,
+});
+
+import MicrophoneL from '@semcore/icon/Microphone/l';
+figma.connect(MicrophoneL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=507:4', {
+  variant: { Size: 'L' },
+  example: () => <MicrophoneL />,
+});
+
+import GenderMaleM from '@semcore/icon/GenderMale/m';
+figma.connect(GenderMaleM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:533', {
+  variant: { Size: 'M' },
+  example: () => <GenderMaleM />,
+});
+
+import GenderMaleL from '@semcore/icon/GenderMale/l';
+figma.connect(GenderMaleL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:533', {
+  variant: { Size: 'L' },
+  example: () => <GenderMaleL />,
+});
+
+import FolderOpenFilledM from '@semcore/icon/FolderOpenFilled/m';
+figma.connect(FolderOpenFilledM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=136:53', {
+  variant: { Size: 'M' },
+  example: () => <FolderOpenFilledM />,
+});
+
+import FolderOpenFilledL from '@semcore/icon/FolderOpenFilled/l';
+figma.connect(FolderOpenFilledL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=136:53', {
+  variant: { Size: 'L' },
+  example: () => <FolderOpenFilledL />,
+});
+
+import FunnelM from '@semcore/icon/Funnel/m';
+figma.connect(FunnelM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=210:4', {
+  variant: { Size: 'M' },
+  example: () => <FunnelM />,
+});
+
+import FunnelL from '@semcore/icon/Funnel/l';
+figma.connect(FunnelL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=210:4', {
+  variant: { Size: 'L' },
+  example: () => <FunnelL />,
+});
+
+import ChartLineM from '@semcore/icon/ChartLine/m';
+figma.connect(ChartLineM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=209:4', {
+  variant: { Size: 'M' },
+  example: () => <ChartLineM />,
+});
+
+import ChartLineL from '@semcore/icon/ChartLine/l';
+figma.connect(ChartLineL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=209:4', {
+  variant: { Size: 'L' },
+  example: () => <ChartLineL />,
+});
+
+import LikeFilledM from '@semcore/icon/LikeFilled/m';
+figma.connect(LikeFilledM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=147:25', {
+  variant: { Size: 'M' },
+  example: () => <LikeFilledM />,
+});
+
+import LikeFilledL from '@semcore/icon/LikeFilled/l';
+figma.connect(LikeFilledL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=147:25', {
+  variant: { Size: 'L' },
+  example: () => <LikeFilledL />,
+});
+
+import CardsM from '@semcore/icon/Cards/m';
+figma.connect(CardsM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=334:19', {
+  variant: { Size: 'M' },
+  example: () => <CardsM />,
+});
+
+import CardsL from '@semcore/icon/Cards/l';
+figma.connect(CardsL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=334:19', {
+  variant: { Size: 'L' },
+  example: () => <CardsL />,
+});
+
+import PinNoM from '@semcore/icon/PinNo/m';
+figma.connect(PinNoM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=70:5', {
+  variant: { Size: 'M' },
+  example: () => <PinNoM />,
+});
+
+import PinNoL from '@semcore/icon/PinNo/l';
+figma.connect(PinNoL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=70:5', {
+  variant: { Size: 'L' },
+  example: () => <PinNoL />,
+});
+
+import AddressPackM from '@semcore/icon/AddressPack/m';
+figma.connect(AddressPackM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3190:44', {
+  variant: { Size: 'M' },
+  example: () => <AddressPackM />,
+});
+
+import AddressPackL from '@semcore/icon/AddressPack/l';
+figma.connect(AddressPackL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3190:44', {
+  variant: { Size: 'L' },
+  example: () => <AddressPackL />,
+});
+
+import PinM from '@semcore/icon/Pin/m';
+figma.connect(PinM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=10:780', {
+  variant: { Size: 'M' },
+  example: () => <PinM />,
+});
+
+import PinL from '@semcore/icon/Pin/l';
+figma.connect(PinL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=10:780', {
+  variant: { Size: 'L' },
+  example: () => <PinL />,
+});
+
+import MailOpenFilledM from '@semcore/icon/MailOpenFilled/m';
+figma.connect(MailOpenFilledM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=518:28', {
+  variant: { Size: 'M' },
+  example: () => <MailOpenFilledM />,
+});
+
+import MailOpenFilledL from '@semcore/icon/MailOpenFilled/l';
+figma.connect(MailOpenFilledL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=518:28', {
+  variant: { Size: 'L' },
+  example: () => <MailOpenFilledL />,
+});
+
+import AndroidM from '@semcore/icon/Android/m';
+figma.connect(AndroidM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=391:39', {
+  variant: { Size: 'M' },
+  example: () => <AndroidM />,
+});
+
+import AndroidL from '@semcore/icon/Android/l';
+figma.connect(AndroidL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=391:39', {
+  variant: { Size: 'L' },
+  example: () => <AndroidL />,
+});
+
+import ArchitectureM from '@semcore/icon/Architecture/m';
+figma.connect(ArchitectureM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:114', {
+  variant: { Size: 'M' },
+  example: () => <ArchitectureM />,
+});
+
+import ArchitectureL from '@semcore/icon/Architecture/l';
+figma.connect(ArchitectureL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:114', {
+  variant: { Size: 'L' },
+  example: () => <ArchitectureL />,
+});
+
+import WebStoriesM from '@semcore/icon/WebStories/m';
+figma.connect(WebStoriesM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3190:9', {
+  variant: { Size: 'M' },
+  example: () => <WebStoriesM />,
+});
+
+import WebStoriesL from '@semcore/icon/WebStories/l';
+figma.connect(WebStoriesL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3190:9', {
+  variant: { Size: 'L' },
+  example: () => <WebStoriesL />,
+});
+
+import BracketsAngleM from '@semcore/icon/BracketsAngle/m';
+figma.connect(BracketsAngleM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=37:45', {
+  variant: { Size: 'M' },
+  example: () => <BracketsAngleM />,
+});
+
+import BracketsAngleL from '@semcore/icon/BracketsAngle/l';
+figma.connect(BracketsAngleL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=37:45', {
+  variant: { Size: 'L' },
+  example: () => <BracketsAngleL />,
+});
+
+import InterestingFindsM from '@semcore/icon/InterestingFinds/m';
+figma.connect(InterestingFindsM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3190:19', {
+  variant: { Size: 'M' },
+  example: () => <InterestingFindsM />,
+});
+
+import InterestingFindsL from '@semcore/icon/InterestingFinds/l';
+figma.connect(InterestingFindsL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3190:19', {
+  variant: { Size: 'L' },
+  example: () => <InterestingFindsL />,
+});
+
+import PinsM from '@semcore/icon/Pins/m';
+figma.connect(PinsM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=141:4', {
+  variant: { Size: 'M' },
+  example: () => <PinsM />,
+});
+
+import PinsL from '@semcore/icon/Pins/l';
+figma.connect(PinsL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=141:4', {
+  variant: { Size: 'L' },
+  example: () => <PinsL />,
+});
+
+import TrashM from '@semcore/icon/Trash/m';
+figma.connect(TrashM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=10:463', {
+  variant: { Size: 'M' },
+  example: () => <TrashM />,
+});
+
+import TrashL from '@semcore/icon/Trash/l';
+figma.connect(TrashL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=10:463', {
+  variant: { Size: 'L' },
+  example: () => <TrashL />,
+});
+
+import FirefoxM from '@semcore/icon/Firefox/m';
+figma.connect(FirefoxM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=138:203', {
+  variant: { Size: 'M' },
+  example: () => <FirefoxM />,
+});
+
+import FirefoxL from '@semcore/icon/Firefox/l';
+figma.connect(FirefoxL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=138:203', {
+  variant: { Size: 'L' },
+  example: () => <FirefoxL />,
+});
+
+import TopStoriesM from '@semcore/icon/TopStories/m';
+figma.connect(TopStoriesM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3190:4', {
+  variant: { Size: 'M' },
+  example: () => <TopStoriesM />,
+});
+
+import TopStoriesL from '@semcore/icon/TopStories/l';
+figma.connect(TopStoriesL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3190:4', {
+  variant: { Size: 'L' },
+  example: () => <TopStoriesL />,
+});
+
+import PopularStoresM from '@semcore/icon/PopularStores/m';
+figma.connect(PopularStoresM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=5718:9', {
+  variant: { Size: 'M' },
+  example: () => <PopularStoresM />,
+});
+
+import PopularStoresL from '@semcore/icon/PopularStores/l';
+figma.connect(PopularStoresL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=5718:9', {
+  variant: { Size: 'L' },
+  example: () => <PopularStoresL />,
+});
+
+import ChevronRightM from '@semcore/icon/ChevronRight/m';
+figma.connect(ChevronRightM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3:4632', {
+  variant: { Size: 'M' },
+  example: () => <ChevronRightM />,
+});
+
+import ChevronRightL from '@semcore/icon/ChevronRight/l';
+figma.connect(ChevronRightL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3:4632', {
+  variant: { Size: 'L' },
+  example: () => <ChevronRightL />,
+});
+
+import AddCampaignM from '@semcore/icon/AddCampaign/m';
+figma.connect(AddCampaignM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=522:4', {
+  variant: { Size: 'M' },
+  example: () => <AddCampaignM />,
+});
+
+import AddCampaignL from '@semcore/icon/AddCampaign/l';
+figma.connect(AddCampaignL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=522:4', {
+  variant: { Size: 'L' },
+  example: () => <AddCampaignL />,
+});
+
+import SemrushM from '@semcore/icon/Semrush/m';
+figma.connect(SemrushM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=185:87', {
+  variant: { Size: 'M' },
+  example: () => <SemrushM />,
+});
+
+import SemrushL from '@semcore/icon/Semrush/l';
+figma.connect(SemrushL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=185:87', {
+  variant: { Size: 'L' },
+  example: () => <SemrushL />,
+});
+
+import RelatedSearchesM from '@semcore/icon/RelatedSearches/m';
+figma.connect(RelatedSearchesM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3190:49', {
+  variant: { Size: 'M' },
+  example: () => <RelatedSearchesM />,
+});
+
+import RelatedSearchesL from '@semcore/icon/RelatedSearches/l';
+figma.connect(RelatedSearchesL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3190:49', {
+  variant: { Size: 'L' },
+  example: () => <RelatedSearchesL />,
+});
+
+import SortDescM from '@semcore/icon/SortDesc/m';
+figma.connect(SortDescM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=12:2030', {
+  variant: { Size: 'M' },
+  example: () => <SortDescM />,
+});
+
+import SortDescL from '@semcore/icon/SortDesc/l';
+figma.connect(SortDescL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=12:2030', {
+  variant: { Size: 'L' },
+  example: () => <SortDescL />,
+});
+
+import FormatAlignRightM from '@semcore/icon/FormatAlignRight/m';
+figma.connect(FormatAlignRightM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:434', {
+  variant: { Size: 'M' },
+  example: () => <FormatAlignRightM />,
+});
+
+import FormatAlignRightL from '@semcore/icon/FormatAlignRight/l';
+figma.connect(FormatAlignRightL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:434', {
+  variant: { Size: 'L' },
+  example: () => <FormatAlignRightL />,
+});
+
+import WineM from '@semcore/icon/Wine/m';
+figma.connect(WineM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:4', {
+  variant: { Size: 'M' },
+  example: () => <WineM />,
+});
+
+import WineL from '@semcore/icon/Wine/l';
+figma.connect(WineL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:4', {
+  variant: { Size: 'L' },
+  example: () => <WineL />,
+});
+
+import ArchiveM from '@semcore/icon/Archive/m';
+figma.connect(ArchiveM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=12:1067', {
+  variant: { Size: 'M' },
+  example: () => <ArchiveM />,
+});
+
+import ArchiveL from '@semcore/icon/Archive/l';
+figma.connect(ArchiveL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=12:1067', {
+  variant: { Size: 'L' },
+  example: () => <ArchiveL />,
+});
+
+import VideoAltM from '@semcore/icon/VideoAlt/m';
+figma.connect(VideoAltM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:512', {
+  variant: { Size: 'M' },
+  example: () => <VideoAltM />,
+});
+
+import VideoAltL from '@semcore/icon/VideoAlt/l';
+figma.connect(VideoAltL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:512', {
+  variant: { Size: 'L' },
+  example: () => <VideoAltL />,
+});
+
+import AdobeExperienceCloudM from '@semcore/icon/AdobeExperienceCloud/m';
+figma.connect(AdobeExperienceCloudM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=429:446', {
+  variant: { Size: 'M' },
+  example: () => <AdobeExperienceCloudM />,
+});
+
+import AdobeExperienceCloudL from '@semcore/icon/AdobeExperienceCloud/l';
+figma.connect(AdobeExperienceCloudL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=429:446', {
+  variant: { Size: 'L' },
+  example: () => <AdobeExperienceCloudL />,
+});
+
+import AppsBlockM from '@semcore/icon/AppsBlock/m';
+figma.connect(AppsBlockM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2247:4', {
+  variant: { Size: 'M' },
+  example: () => <AppsBlockM />,
+});
+
+import AppsBlockL from '@semcore/icon/AppsBlock/l';
+figma.connect(AppsBlockL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2247:4', {
+  variant: { Size: 'L' },
+  example: () => <AppsBlockL />,
+});
+
+import RelatedProductsM from '@semcore/icon/RelatedProducts/m';
+figma.connect(RelatedProductsM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3190:39', {
+  variant: { Size: 'M' },
+  example: () => <RelatedProductsM />,
+});
+
+import RelatedProductsL from '@semcore/icon/RelatedProducts/l';
+figma.connect(RelatedProductsL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3190:39', {
+  variant: { Size: 'L' },
+  example: () => <RelatedProductsL />,
+});
+
+import SeeResultsAboutM from '@semcore/icon/SeeResultsAbout/m';
+figma.connect(SeeResultsAboutM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3190:29', {
+  variant: { Size: 'M' },
+  example: () => <SeeResultsAboutM />,
+});
+
+import SeeResultsAboutL from '@semcore/icon/SeeResultsAbout/l';
+figma.connect(SeeResultsAboutL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3190:29', {
+  variant: { Size: 'L' },
+  example: () => <SeeResultsAboutL />,
+});
+
+import SportM from '@semcore/icon/Sport/m';
+figma.connect(SportM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:39', {
+  variant: { Size: 'M' },
+  example: () => <SportM />,
+});
+
+import SportL from '@semcore/icon/Sport/l';
+figma.connect(SportL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:39', {
+  variant: { Size: 'L' },
+  example: () => <SportL />,
+});
+
+import PinMapM from '@semcore/icon/PinMap/m';
+figma.connect(PinMapM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=83:164', {
+  variant: { Size: 'M' },
+  example: () => <PinMapM />,
+});
+
+import PinMapL from '@semcore/icon/PinMap/l';
+figma.connect(PinMapL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=83:164', {
+  variant: { Size: 'L' },
+  example: () => <PinMapL />,
+});
+
+import PhotoM from '@semcore/icon/Photo/m';
+figma.connect(PhotoM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:174', {
+  variant: { Size: 'M' },
+  example: () => <PhotoM />,
+});
+
+import PhotoL from '@semcore/icon/Photo/l';
+figma.connect(PhotoL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:174', {
+  variant: { Size: 'L' },
+  example: () => <PhotoL />,
+});
+
+import MagnetM from '@semcore/icon/Magnet/m';
+figma.connect(MagnetM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=504:6', {
+  variant: { Size: 'M' },
+  example: () => <MagnetM />,
+});
+
+import MagnetL from '@semcore/icon/Magnet/l';
+figma.connect(MagnetL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=504:6', {
+  variant: { Size: 'L' },
+  example: () => <MagnetL />,
+});
+
+import AdTopM from '@semcore/icon/AdTop/m';
+figma.connect(AdTopM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=426:303', {
+  variant: { Size: 'M' },
+  example: () => <AdTopM />,
+});
+
+import AdTopL from '@semcore/icon/AdTop/l';
+figma.connect(AdTopL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=426:303', {
+  variant: { Size: 'L' },
+  example: () => <AdTopL />,
+});
+
+import OperaM from '@semcore/icon/Opera/m';
+figma.connect(OperaM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=138:194', {
+  variant: { Size: 'M' },
+  example: () => <OperaM />,
+});
+
+import OperaL from '@semcore/icon/Opera/l';
+figma.connect(OperaL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=138:194', {
+  variant: { Size: 'L' },
+  example: () => <OperaL />,
+});
+
+import PublicUtilityM from '@semcore/icon/PublicUtility/m';
+figma.connect(PublicUtilityM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:49', {
+  variant: { Size: 'M' },
+  example: () => <PublicUtilityM />,
+});
+
+import PublicUtilityL from '@semcore/icon/PublicUtility/l';
+figma.connect(PublicUtilityL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:49', {
+  variant: { Size: 'L' },
+  example: () => <PublicUtilityL />,
+});
+
+import FileImportM from '@semcore/icon/FileImport/m';
+figma.connect(FileImportM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=8:329', {
+  variant: { Size: 'M' },
+  example: () => <FileImportM />,
+});
+
+import FileImportL from '@semcore/icon/FileImport/l';
+figma.connect(FileImportL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=8:329', {
+  variant: { Size: 'L' },
+  example: () => <FileImportL />,
+});
+
+import TabletM from '@semcore/icon/Tablet/m';
+figma.connect(TabletM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=224:377', {
+  variant: { Size: 'M' },
+  example: () => <TabletM />,
+});
+
+import TabletL from '@semcore/icon/Tablet/l';
+figma.connect(TabletL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=224:377', {
+  variant: { Size: 'L' },
+  example: () => <TabletL />,
+});
+
+import DocumentExportM from '@semcore/icon/DocumentExport/m';
+figma.connect(DocumentExportM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=229:47', {
+  variant: { Size: 'M' },
+  example: () => <DocumentExportM />,
+});
+
+import DocumentExportL from '@semcore/icon/DocumentExport/l';
+figma.connect(DocumentExportL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=229:47', {
+  variant: { Size: 'L' },
+  example: () => <DocumentExportL />,
+});
+
+import LightningFilledM from '@semcore/icon/LightningFilled/m';
+figma.connect(LightningFilledM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=1142:6071', {
+  variant: { Size: 'M' },
+  example: () => <LightningFilledM />,
+});
+
+import LightningFilledL from '@semcore/icon/LightningFilled/l';
+figma.connect(LightningFilledL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=1142:6071', {
+  variant: { Size: 'L' },
+  example: () => <LightningFilledL />,
+});
+
+import MilitaryM from '@semcore/icon/Military/m';
+figma.connect(MilitaryM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:169', {
+  variant: { Size: 'M' },
+  example: () => <MilitaryM />,
+});
+
+import MilitaryL from '@semcore/icon/Military/l';
+figma.connect(MilitaryL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:169', {
+  variant: { Size: 'L' },
+  example: () => <MilitaryL />,
+});
+
+import ReplyM from '@semcore/icon/Reply/m';
+figma.connect(ReplyM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=423:248', {
+  variant: { Size: 'M' },
+  example: () => <ReplyM />,
+});
+
+import ReplyL from '@semcore/icon/Reply/l';
+figma.connect(ReplyL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=423:248', {
+  variant: { Size: 'L' },
+  example: () => <ReplyL />,
+});
+
+import ListAddBottomM from '@semcore/icon/ListAddBottom/m';
+figma.connect(ListAddBottomM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:456', {
+  variant: { Size: 'M' },
+  example: () => <ListAddBottomM />,
+});
+
+import ListAddBottomL from '@semcore/icon/ListAddBottom/l';
+figma.connect(ListAddBottomL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:456', {
+  variant: { Size: 'L' },
+  example: () => <ListAddBottomL />,
+});
+
+import FolderFilledM from '@semcore/icon/FolderFilled/m';
+figma.connect(FolderFilledM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=136:8', {
+  variant: { Size: 'M' },
+  example: () => <FolderFilledM />,
+});
+
+import FolderFilledL from '@semcore/icon/FolderFilled/l';
+figma.connect(FolderFilledL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=136:8', {
+  variant: { Size: 'L' },
+  example: () => <FolderFilledL />,
+});
+
+import OrientationPortraitM from '@semcore/icon/OrientationPortrait/m';
+figma.connect(OrientationPortraitM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=386:100', {
+  variant: { Size: 'M' },
+  example: () => <OrientationPortraitM />,
+});
+
+import OrientationPortraitL from '@semcore/icon/OrientationPortrait/l';
+figma.connect(OrientationPortraitL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=386:100', {
+  variant: { Size: 'L' },
+  example: () => <OrientationPortraitL />,
+});
+
+import DocumentSadM from '@semcore/icon/DocumentSad/m';
+figma.connect(DocumentSadM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=229:62', {
+  variant: { Size: 'M' },
+  example: () => <DocumentSadM />,
+});
+
+import DocumentSadL from '@semcore/icon/DocumentSad/l';
+figma.connect(DocumentSadL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=229:62', {
+  variant: { Size: 'L' },
+  example: () => <DocumentSadL />,
+});
+
+import CheckM from '@semcore/icon/Check/m';
+figma.connect(CheckM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=9:427', {
+  variant: { Size: 'M' },
+  example: () => <CheckM />,
+});
+
+import CheckL from '@semcore/icon/Check/l';
+figma.connect(CheckL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=9:427', {
+  variant: { Size: 'L' },
+  example: () => <CheckL />,
+});
+
+import AllDevicesM from '@semcore/icon/AllDevices/m';
+figma.connect(AllDevicesM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=386:5', {
+  variant: { Size: 'M' },
+  example: () => <AllDevicesM />,
+});
+
+import AllDevicesL from '@semcore/icon/AllDevices/l';
+figma.connect(AllDevicesL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=386:5', {
+  variant: { Size: 'L' },
+  example: () => <AllDevicesL />,
+});
+
+import UserSharedFirstM from '@semcore/icon/UserSharedFirst/m';
+figma.connect(UserSharedFirstM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=1831:4', {
+  variant: { Size: 'M' },
+  example: () => <UserSharedFirstM />,
+});
+
+import UserSharedFirstL from '@semcore/icon/UserSharedFirst/l';
+figma.connect(UserSharedFirstL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=1831:4', {
+  variant: { Size: 'L' },
+  example: () => <UserSharedFirstL />,
+});
+
+import ListAddTopM from '@semcore/icon/ListAddTop/m';
+figma.connect(ListAddTopM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:449', {
+  variant: { Size: 'M' },
+  example: () => <ListAddTopM />,
+});
+
+import ListAddTopL from '@semcore/icon/ListAddTop/l';
+figma.connect(ListAddTopL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:449', {
+  variant: { Size: 'L' },
+  example: () => <ListAddTopL />,
+});
+
+import TagM from '@semcore/icon/Tag/m';
+figma.connect(TagM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=226:387', {
+  variant: { Size: 'M' },
+  example: () => <TagM />,
+});
+
+import TagL from '@semcore/icon/Tag/l';
+figma.connect(TagL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=226:387', {
+  variant: { Size: 'L' },
+  example: () => <TagL />,
+});
+
+import MegaphoneM from '@semcore/icon/Megaphone/m';
+figma.connect(MegaphoneM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=54:37', {
+  variant: { Size: 'M' },
+  example: () => <MegaphoneM />,
+});
+
+import MegaphoneL from '@semcore/icon/Megaphone/l';
+figma.connect(MegaphoneL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=54:37', {
+  variant: { Size: 'L' },
+  example: () => <MegaphoneL />,
+});
+
+import PositionRightM from '@semcore/icon/PositionRight/m';
+figma.connect(PositionRightM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=388:19', {
+  variant: { Size: 'M' },
+  example: () => <PositionRightM />,
+});
+
+import PositionRightL from '@semcore/icon/PositionRight/l';
+figma.connect(PositionRightL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=388:19', {
+  variant: { Size: 'L' },
+  example: () => <PositionRightL />,
+});
+
+import VkM from '@semcore/icon/Vk/m';
+figma.connect(VkM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=219:190', {
+  variant: { Size: 'M' },
+  example: () => <VkM />,
+});
+
+import VkL from '@semcore/icon/Vk/l';
+figma.connect(VkL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=219:190', {
+  variant: { Size: 'L' },
+  example: () => <VkL />,
+});
+
+import GoogleM from '@semcore/icon/Google/m';
+figma.connect(GoogleM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=145:5', {
+  variant: { Size: 'M' },
+  example: () => <GoogleM />,
+});
+
+import GoogleL from '@semcore/icon/Google/l';
+figma.connect(GoogleL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=145:5', {
+  variant: { Size: 'L' },
+  example: () => <GoogleL />,
+});
+
+import FormatAlignJustifyM from '@semcore/icon/FormatAlignJustify/m';
+figma.connect(FormatAlignJustifyM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:413', {
+  variant: { Size: 'M' },
+  example: () => <FormatAlignJustifyM />,
+});
+
+import FormatAlignJustifyL from '@semcore/icon/FormatAlignJustify/l';
+figma.connect(FormatAlignJustifyL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:413', {
+  variant: { Size: 'L' },
+  example: () => <FormatAlignJustifyL />,
+});
+
+import CrosshairM from '@semcore/icon/Crosshair/m';
+figma.connect(CrosshairM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=243:47', {
+  variant: { Size: 'M' },
+  example: () => <CrosshairM />,
+});
+
+import CrosshairL from '@semcore/icon/Crosshair/l';
+figma.connect(CrosshairL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=243:47', {
+  variant: { Size: 'L' },
+  example: () => <CrosshairL />,
+});
+
+import PositionLeftM from '@semcore/icon/PositionLeft/m';
+figma.connect(PositionLeftM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=388:24', {
+  variant: { Size: 'M' },
+  example: () => <PositionLeftM />,
+});
+
+import PositionLeftL from '@semcore/icon/PositionLeft/l';
+figma.connect(PositionLeftL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=388:24', {
+  variant: { Size: 'L' },
+  example: () => <PositionLeftL />,
+});
+
+import MoveAltM from '@semcore/icon/MoveAlt/m';
+figma.connect(MoveAltM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=255:39', {
+  variant: { Size: 'M' },
+  example: () => <MoveAltM />,
+});
+
+import MoveAltL from '@semcore/icon/MoveAlt/l';
+figma.connect(MoveAltL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=255:39', {
+  variant: { Size: 'L' },
+  example: () => <MoveAltL />,
+});
+
+import WarningM from '@semcore/icon/Warning/m';
+figma.connect(WarningM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6:102', {
+  variant: { Size: 'M' },
+  example: () => <WarningM />,
+});
+
+import WarningL from '@semcore/icon/Warning/l';
+figma.connect(WarningL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6:102', {
+  variant: { Size: 'L' },
+  example: () => <WarningL />,
+});
+
+import AmpM from '@semcore/icon/Amp/m';
+figma.connect(AmpM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=330:9', {
+  variant: { Size: 'M' },
+  example: () => <AmpM />,
+});
+
+import AmpL from '@semcore/icon/Amp/l';
+figma.connect(AmpL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=330:9', {
+  variant: { Size: 'L' },
+  example: () => <AmpL />,
+});
+
+import ChatPlusM from '@semcore/icon/ChatPlus/m';
+figma.connect(ChatPlusM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:555', {
+  variant: { Size: 'M' },
+  example: () => <ChatPlusM />,
+});
+
+import ChatPlusL from '@semcore/icon/ChatPlus/l';
+figma.connect(ChatPlusL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:555', {
+  variant: { Size: 'L' },
+  example: () => <ChatPlusL />,
+});
+
+import ChevronDoubleDownM from '@semcore/icon/ChevronDoubleDown/m';
+figma.connect(ChevronDoubleDownM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=78:169', {
+  variant: { Size: 'M' },
+  example: () => <ChevronDoubleDownM />,
+});
+
+import ChevronDoubleDownL from '@semcore/icon/ChevronDoubleDown/l';
+figma.connect(ChevronDoubleDownL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=78:169', {
+  variant: { Size: 'L' },
+  example: () => <ChevronDoubleDownL />,
+});
+
+import ResizeColM from '@semcore/icon/ResizeCol/m';
+figma.connect(ResizeColM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:439', {
+  variant: { Size: 'M' },
+  example: () => <ResizeColM />,
+});
+
+import ResizeColL from '@semcore/icon/ResizeCol/l';
+figma.connect(ResizeColL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:439', {
+  variant: { Size: 'L' },
+  example: () => <ResizeColL />,
+});
+
+import ShareAltM from '@semcore/icon/ShareAlt/m';
+figma.connect(ShareAltM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=5260:3', {
+  variant: { Size: 'M' },
+  example: () => <ShareAltM />,
+});
+
+import ShareAltL from '@semcore/icon/ShareAlt/l';
+figma.connect(ShareAltL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=5260:3', {
+  variant: { Size: 'L' },
+  example: () => <ShareAltL />,
+});
+
+import AdultM from '@semcore/icon/Adult/m';
+figma.connect(AdultM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:99', {
+  variant: { Size: 'M' },
+  example: () => <AdultM />,
+});
+
+import AdultL from '@semcore/icon/Adult/l';
+figma.connect(AdultL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:99', {
+  variant: { Size: 'L' },
+  example: () => <AdultL />,
+});
+
+import WristwatchM from '@semcore/icon/Wristwatch/m';
+figma.connect(WristwatchM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=224:308', {
+  variant: { Size: 'M' },
+  example: () => <WristwatchM />,
+});
+
+import WristwatchL from '@semcore/icon/Wristwatch/l';
+figma.connect(WristwatchL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=224:308', {
+  variant: { Size: 'L' },
+  example: () => <WristwatchL />,
+});
+
+import DropTextM from '@semcore/icon/DropText/m';
+figma.connect(DropTextM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=436:30', {
+  variant: { Size: 'M' },
+  example: () => <DropTextM />,
+});
+
+import DropTextL from '@semcore/icon/DropText/l';
+figma.connect(DropTextL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=436:30', {
+  variant: { Size: 'L' },
+  example: () => <DropTextL />,
+});
+
+import UserGroupM from '@semcore/icon/UserGroup/m';
+figma.connect(UserGroupM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=14:66', {
+  variant: { Size: 'M' },
+  example: () => <UserGroupM />,
+});
+
+import UserGroupL from '@semcore/icon/UserGroup/l';
+figma.connect(UserGroupL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=14:66', {
+  variant: { Size: 'L' },
+  example: () => <UserGroupL />,
+});
+
+import ResizeRowM from '@semcore/icon/ResizeRow/m';
+figma.connect(ResizeRowM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:444', {
+  variant: { Size: 'M' },
+  example: () => <ResizeRowM />,
+});
+
+import ResizeRowL from '@semcore/icon/ResizeRow/l';
+figma.connect(ResizeRowL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:444', {
+  variant: { Size: 'L' },
+  example: () => <ResizeRowL />,
+});
+
+import OilM from '@semcore/icon/Oil/m';
+figma.connect(OilM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:69', {
+  variant: { Size: 'M' },
+  example: () => <OilM />,
+});
+
+import OilL from '@semcore/icon/Oil/l';
+figma.connect(OilL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:69', {
+  variant: { Size: 'L' },
+  example: () => <OilL />,
+});
+
+import CasualM from '@semcore/icon/Casual/m';
+figma.connect(CasualM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=1475:4', {
+  variant: { Size: 'M' },
+  example: () => <CasualM />,
+});
+
+import CasualL from '@semcore/icon/Casual/l';
+figma.connect(CasualL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=1475:4', {
+  variant: { Size: 'L' },
+  example: () => <CasualL />,
+});
+
+import OrganicCarouselM from '@semcore/icon/OrganicCarousel/m';
+figma.connect(OrganicCarouselM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=5718:4', {
+  variant: { Size: 'M' },
+  example: () => <OrganicCarouselM />,
+});
+
+import OrganicCarouselL from '@semcore/icon/OrganicCarousel/l';
+figma.connect(OrganicCarouselL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=5718:4', {
+  variant: { Size: 'L' },
+  example: () => <OrganicCarouselL />,
+});
+
+import MoneyCoinsM from '@semcore/icon/MoneyCoins/m';
+figma.connect(MoneyCoinsM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=12:954', {
+  variant: { Size: 'M' },
+  example: () => <MoneyCoinsM />,
+});
+
+import MoneyCoinsL from '@semcore/icon/MoneyCoins/l';
+figma.connect(MoneyCoinsL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=12:954', {
+  variant: { Size: 'L' },
+  example: () => <MoneyCoinsL />,
+});
+
+import UserSharedM from '@semcore/icon/UserShared/m';
+figma.connect(UserSharedM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=1949:4', {
+  variant: { Size: 'M' },
+  example: () => <UserSharedM />,
+});
+
+import UserSharedL from '@semcore/icon/UserShared/l';
+figma.connect(UserSharedL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=1949:4', {
+  variant: { Size: 'L' },
+  example: () => <UserSharedL />,
+});
+
+import CollapseAltM from '@semcore/icon/CollapseAlt/m';
+figma.connect(CollapseAltM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=5213:14', {
+  variant: { Size: 'M' },
+  example: () => <CollapseAltM />,
+});
+
+import CollapseAltL from '@semcore/icon/CollapseAlt/l';
+figma.connect(CollapseAltL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=5213:14', {
+  variant: { Size: 'L' },
+  example: () => <CollapseAltL />,
+});
+
+import ColumnTwoM from '@semcore/icon/ColumnTwo/m';
+figma.connect(ColumnTwoM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=385:230', {
+  variant: { Size: 'M' },
+  example: () => <ColumnTwoM />,
+});
+
+import ColumnTwoL from '@semcore/icon/ColumnTwo/l';
+figma.connect(ColumnTwoL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=385:230', {
+  variant: { Size: 'L' },
+  example: () => <ColumnTwoL />,
+});
+
+import PinListM from '@semcore/icon/PinList/m';
+figma.connect(PinListM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=70:61', {
+  variant: { Size: 'M' },
+  example: () => <PinListM />,
+});
+
+import PinListL from '@semcore/icon/PinList/l';
+figma.connect(PinListL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=70:61', {
+  variant: { Size: 'L' },
+  example: () => <PinListL />,
+});
+
+import AirplaneM from '@semcore/icon/Airplane/m';
+figma.connect(AirplaneM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=12:967', {
+  variant: { Size: 'M' },
+  example: () => <AirplaneM />,
+});
+
+import AirplaneL from '@semcore/icon/Airplane/l';
+figma.connect(AirplaneL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=12:967', {
+  variant: { Size: 'L' },
+  example: () => <AirplaneL />,
+});
+
+import FileDownloadM from '@semcore/icon/FileDownload/m';
+figma.connect(FileDownloadM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=244:112', {
+  variant: { Size: 'M' },
+  example: () => <FileDownloadM />,
+});
+
+import FileDownloadL from '@semcore/icon/FileDownload/l';
+figma.connect(FileDownloadL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=244:112', {
+  variant: { Size: 'L' },
+  example: () => <FileDownloadL />,
+});
+
+import PinterestM from '@semcore/icon/Pinterest/m';
+figma.connect(PinterestM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=139:18', {
+  variant: { Size: 'M' },
+  example: () => <PinterestM />,
+});
+
+import PinterestL from '@semcore/icon/Pinterest/l';
+figma.connect(PinterestL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=139:18', {
+  variant: { Size: 'L' },
+  example: () => <PinterestL />,
+});
+
+import UserM from '@semcore/icon/User/m';
+figma.connect(UserM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=14:61', {
+  variant: { Size: 'M' },
+  example: () => <UserM />,
+});
+
+import UserL from '@semcore/icon/User/l';
+figma.connect(UserL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=14:61', {
+  variant: { Size: 'L' },
+  example: () => <UserL />,
+});
+
+import LinkedInM from '@semcore/icon/LinkedIn/m';
+figma.connect(LinkedInM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:635', {
+  variant: { Size: 'M' },
+  example: () => <LinkedInM />,
+});
+
+import LinkedInL from '@semcore/icon/LinkedIn/l';
+figma.connect(LinkedInL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:635', {
+  variant: { Size: 'L' },
+  example: () => <LinkedInL />,
+});
+
+import GobletM from '@semcore/icon/Goblet/m';
+figma.connect(GobletM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=12:1016', {
+  variant: { Size: 'M' },
+  example: () => <GobletM />,
+});
+
+import GobletL from '@semcore/icon/Goblet/l';
+figma.connect(GobletL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=12:1016', {
+  variant: { Size: 'L' },
+  example: () => <GobletL />,
+});
+
+import LockNoM from '@semcore/icon/LockNo/m';
+figma.connect(LockNoM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=182:45', {
+  variant: { Size: 'M' },
+  example: () => <LockNoM />,
+});
+
+import LockNoL from '@semcore/icon/LockNo/l';
+figma.connect(LockNoL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=182:45', {
+  variant: { Size: 'L' },
+  example: () => <LockNoL />,
+});
+
+import NotificationNoM from '@semcore/icon/NotificationNo/m';
+figma.connect(NotificationNoM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3141:4', {
+  variant: { Size: 'M' },
+  example: () => <NotificationNoM />,
+});
+
+import NotificationNoL from '@semcore/icon/NotificationNo/l';
+figma.connect(NotificationNoL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3141:4', {
+  variant: { Size: 'L' },
+  example: () => <NotificationNoL />,
+});
+
+import SlackM from '@semcore/icon/Slack/m';
+figma.connect(SlackM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=138:252', {
+  variant: { Size: 'M' },
+  example: () => <SlackM />,
+});
+
+import SlackL from '@semcore/icon/Slack/l';
+figma.connect(SlackL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=138:252', {
+  variant: { Size: 'L' },
+  example: () => <SlackL />,
+});
+
+import ListAddCheckM from '@semcore/icon/ListAddCheck/m';
+figma.connect(ListAddCheckM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:469', {
+  variant: { Size: 'M' },
+  example: () => <ListAddCheckM />,
+});
+
+import ListAddCheckL from '@semcore/icon/ListAddCheck/l';
+figma.connect(ListAddCheckL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:469', {
+  variant: { Size: 'L' },
+  example: () => <ListAddCheckL />,
+});
+
+import SeoQuakeM from '@semcore/icon/SeoQuake/m';
+figma.connect(SeoQuakeM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=47:3', {
+  variant: { Size: 'M' },
+  example: () => <SeoQuakeM />,
+});
+
+import SeoQuakeL from '@semcore/icon/SeoQuake/l';
+figma.connect(SeoQuakeL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=47:3', {
+  variant: { Size: 'L' },
+  example: () => <SeoQuakeL />,
+});
+
+import ChartBarStackedM from '@semcore/icon/ChartBarStacked/m';
+figma.connect(ChartBarStackedM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=209:14', {
+  variant: { Size: 'M' },
+  example: () => <ChartBarStackedM />,
+});
+
+import ChartBarStackedL from '@semcore/icon/ChartBarStacked/l';
+figma.connect(ChartBarStackedL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=209:14', {
+  variant: { Size: 'L' },
+  example: () => <ChartBarStackedL />,
+});
+
+import PayPalM from '@semcore/icon/pay/PayPal/m';
+figma.connect(PayPalM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3940:12', {
+  variant: { size: 'm' },
+  example: () => <PayPalM />,
+});
+
+import PayPalL from '@semcore/icon/pay/PayPal/l';
+figma.connect(PayPalL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3940:12', {
+  variant: { size: 'l' },
+  example: () => <PayPalL />,
+});
+
+import ChevronUpM from '@semcore/icon/ChevronUp/m';
+figma.connect(ChevronUpM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3:4640', {
+  variant: { Size: 'M' },
+  example: () => <ChevronUpM />,
+});
+
+import ChevronUpL from '@semcore/icon/ChevronUp/l';
+figma.connect(ChevronUpL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3:4640', {
+  variant: { Size: 'L' },
+  example: () => <ChevronUpL />,
+});
+
+import VideoStopM from '@semcore/icon/VideoStop/m';
+figma.connect(VideoStopM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:506', {
+  variant: { Size: 'M' },
+  example: () => <VideoStopM />,
+});
+
+import VideoStopL from '@semcore/icon/VideoStop/l';
+figma.connect(VideoStopL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:506', {
+  variant: { Size: 'L' },
+  example: () => <VideoStopL />,
+});
+
+import VacationM from '@semcore/icon/Vacation/m';
+figma.connect(VacationM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=570:4', {
+  variant: { Size: 'M' },
+  example: () => <VacationM />,
+});
+
+import VacationL from '@semcore/icon/Vacation/l';
+figma.connect(VacationL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=570:4', {
+  variant: { Size: 'L' },
+  example: () => <VacationL />,
+});
+
+import LinkAltHalfM from '@semcore/icon/LinkAltHalf/m';
+figma.connect(LinkAltHalfM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=565:79', {
+  variant: { Size: 'M' },
+  example: () => <LinkAltHalfM />,
+});
+
+import LinkAltHalfL from '@semcore/icon/LinkAltHalf/l';
+figma.connect(LinkAltHalfL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=565:79', {
+  variant: { Size: 'L' },
+  example: () => <LinkAltHalfL />,
+});
+
+import CheckDoubleM from '@semcore/icon/CheckDouble/m';
+figma.connect(CheckDoubleM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=5219:40', {
+  variant: { Size: 'M' },
+  example: () => <CheckDoubleM />,
+});
+
+import CheckDoubleL from '@semcore/icon/CheckDouble/l';
+figma.connect(CheckDoubleL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=5219:40', {
+  variant: { Size: 'L' },
+  example: () => <CheckDoubleL />,
+});
+
+import QuestionM from '@semcore/icon/Question/m';
+figma.connect(QuestionM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6:87', {
+  variant: { Size: 'M' },
+  example: () => <QuestionM />,
+});
+
+import QuestionL from '@semcore/icon/Question/l';
+figma.connect(QuestionL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6:87', {
+  variant: { Size: 'L' },
+  example: () => <QuestionL />,
+});
+
+import RestaurantM from '@semcore/icon/Restaurant/m';
+figma.connect(RestaurantM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:164', {
+  variant: { Size: 'M' },
+  example: () => <RestaurantM />,
+});
+
+import RestaurantL from '@semcore/icon/Restaurant/l';
+figma.connect(RestaurantL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:164', {
+  variant: { Size: 'L' },
+  example: () => <RestaurantL />,
+});
+
+import VideoCarouselM from '@semcore/icon/VideoCarousel/m';
+figma.connect(VideoCarouselM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=1002:10', {
+  variant: { Size: 'M' },
+  example: () => <VideoCarouselM />,
+});
+
+import VideoCarouselL from '@semcore/icon/VideoCarousel/l';
+figma.connect(VideoCarouselL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=1002:10', {
+  variant: { Size: 'L' },
+  example: () => <VideoCarouselL />,
+});
+
+import MathMinusM from '@semcore/icon/MathMinus/m';
+figma.connect(MathMinusM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=9:416', {
+  variant: { Size: 'M' },
+  example: () => <MathMinusM />,
+});
+
+import MathMinusL from '@semcore/icon/MathMinus/l';
+figma.connect(MathMinusL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=9:416', {
+  variant: { Size: 'L' },
+  example: () => <MathMinusL />,
+});
+
+import AdBottomM from '@semcore/icon/AdBottom/m';
+figma.connect(AdBottomM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=426:308', {
+  variant: { Size: 'M' },
+  example: () => <AdBottomM />,
+});
+
+import AdBottomL from '@semcore/icon/AdBottom/l';
+figma.connect(AdBottomL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=426:308', {
+  variant: { Size: 'L' },
+  example: () => <AdBottomL />,
+});
+
+import RedirectM from '@semcore/icon/Redirect/m';
+figma.connect(RedirectM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=423:243', {
+  variant: { Size: 'M' },
+  example: () => <RedirectM />,
+});
+
+import RedirectL from '@semcore/icon/Redirect/l';
+figma.connect(RedirectL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=423:243', {
+  variant: { Size: 'L' },
+  example: () => <RedirectL />,
+});
+
+import SmileSimpleM from '@semcore/icon/SmileSimple/m';
+figma.connect(SmileSimpleM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=4:112', {
+  variant: { Size: 'M' },
+  example: () => <SmileSimpleM />,
+});
+
+import SmileSimpleL from '@semcore/icon/SmileSimple/l';
+figma.connect(SmileSimpleL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=4:112', {
+  variant: { Size: 'L' },
+  example: () => <SmileSimpleL />,
+});
+
+import FileExportM from '@semcore/icon/FileExport/m';
+figma.connect(FileExportM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=8:324', {
+  variant: { Size: 'M' },
+  example: () => <FileExportM />,
+});
+
+import FileExportL from '@semcore/icon/FileExport/l';
+figma.connect(FileExportL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=8:324', {
+  variant: { Size: 'L' },
+  example: () => <FileExportL />,
+});
+
+import CursorDefaultM from '@semcore/icon/CursorDefault/m';
+figma.connect(CursorDefaultM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=12:977', {
+  variant: { Size: 'M' },
+  example: () => <CursorDefaultM />,
+});
+
+import CursorDefaultL from '@semcore/icon/CursorDefault/l';
+figma.connect(CursorDefaultL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=12:977', {
+  variant: { Size: 'L' },
+  example: () => <CursorDefaultL />,
+});
+
+import ChartBarM from '@semcore/icon/ChartBar/m';
+figma.connect(ChartBarM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=209:9', {
+  variant: { Size: 'M' },
+  example: () => <ChartBarM />,
+});
+
+import ChartBarL from '@semcore/icon/ChartBar/l';
+figma.connect(ChartBarL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=209:9', {
+  variant: { Size: 'L' },
+  example: () => <ChartBarL />,
+});
+
+import DocumentPdfM from '@semcore/icon/DocumentPdf/m';
+figma.connect(DocumentPdfM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=229:57', {
+  variant: { Size: 'M' },
+  example: () => <DocumentPdfM />,
+});
+
+import DocumentPdfL from '@semcore/icon/DocumentPdf/l';
+figma.connect(DocumentPdfL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=229:57', {
+  variant: { Size: 'L' },
+  example: () => <DocumentPdfL />,
+});
+
+import SmileSadM from '@semcore/icon/SmileSad/m';
+figma.connect(SmileSadM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=4:6', {
+  variant: { Size: 'M' },
+  example: () => <SmileSadM />,
+});
+
+import SmileSadL from '@semcore/icon/SmileSad/l';
+figma.connect(SmileSadL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=4:6', {
+  variant: { Size: 'L' },
+  example: () => <SmileSadL />,
+});
+
+import PictureAddM from '@semcore/icon/PictureAdd/m';
+figma.connect(PictureAddM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=241:22', {
+  variant: { Size: 'M' },
+  example: () => <PictureAddM />,
+});
+
+import PictureAddL from '@semcore/icon/PictureAdd/l';
+figma.connect(PictureAddL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=241:22', {
+  variant: { Size: 'L' },
+  example: () => <PictureAddL />,
+});
+
+import SideMenuRightM from '@semcore/icon/SideMenuRight/m';
+figma.connect(SideMenuRightM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=544:35', {
+  variant: { Size: 'M' },
+  example: () => <SideMenuRightM />,
+});
+
+import SideMenuRightL from '@semcore/icon/SideMenuRight/l';
+figma.connect(SideMenuRightL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=544:35', {
+  variant: { Size: 'L' },
+  example: () => <SideMenuRightL />,
+});
+
+import GamblingM from '@semcore/icon/Gambling/m';
+figma.connect(GamblingM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:119', {
+  variant: { Size: 'M' },
+  example: () => <GamblingM />,
+});
+
+import GamblingL from '@semcore/icon/Gambling/l';
+figma.connect(GamblingL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:119', {
+  variant: { Size: 'L' },
+  example: () => <GamblingL />,
+});
+
+import MailOpenM from '@semcore/icon/MailOpen/m';
+figma.connect(MailOpenM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=518:38', {
+  variant: { Size: 'M' },
+  example: () => <MailOpenM />,
+});
+
+import MailOpenL from '@semcore/icon/MailOpen/l';
+figma.connect(MailOpenL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=518:38', {
+  variant: { Size: 'L' },
+  example: () => <MailOpenL />,
+});
+
+import ColumnThreeM from '@semcore/icon/ColumnThree/m';
+figma.connect(ColumnThreeM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=385:235', {
+  variant: { Size: 'M' },
+  example: () => <ColumnThreeM />,
+});
+
+import ColumnThreeL from '@semcore/icon/ColumnThree/l';
+figma.connect(ColumnThreeL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=385:235', {
+  variant: { Size: 'L' },
+  example: () => <ColumnThreeL />,
+});
+
+import SmileHappyM from '@semcore/icon/SmileHappy/m';
+figma.connect(SmileHappyM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=4:117', {
+  variant: { Size: 'M' },
+  example: () => <SmileHappyM />,
+});
+
+import SmileHappyL from '@semcore/icon/SmileHappy/l';
+figma.connect(SmileHappyL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=4:117', {
+  variant: { Size: 'L' },
+  example: () => <SmileHappyL />,
+});
+
+import CheckAltM from '@semcore/icon/CheckAlt/m';
+figma.connect(CheckAltM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=428:376', {
+  variant: { Size: 'M' },
+  example: () => <CheckAltM />,
+});
+
+import CheckAltL from '@semcore/icon/CheckAlt/l';
+figma.connect(CheckAltL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=428:376', {
+  variant: { Size: 'L' },
+  example: () => <CheckAltL />,
+});
+
+import FormatAlignLeftM from '@semcore/icon/FormatAlignLeft/m';
+figma.connect(FormatAlignLeftM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:429', {
+  variant: { Size: 'M' },
+  example: () => <FormatAlignLeftM />,
+});
+
+import FormatAlignLeftL from '@semcore/icon/FormatAlignLeft/l';
+figma.connect(FormatAlignLeftL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:429', {
+  variant: { Size: 'L' },
+  example: () => <FormatAlignLeftL />,
+});
+
+import EducationM from '@semcore/icon/Education/m';
+figma.connect(EducationM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6:22', {
+  variant: { Size: 'M' },
+  example: () => <EducationM />,
+});
+
+import EducationL from '@semcore/icon/Education/l';
+figma.connect(EducationL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6:22', {
+  variant: { Size: 'L' },
+  example: () => <EducationL />,
+});
+
+import ThumbDownM from '@semcore/icon/ThumbDown/m';
+figma.connect(ThumbDownM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=8:385', {
+  variant: { Size: 'M' },
+  example: () => <ThumbDownM />,
+});
+
+import ThumbDownL from '@semcore/icon/ThumbDown/l';
+figma.connect(ThumbDownL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=8:385', {
+  variant: { Size: 'L' },
+  example: () => <ThumbDownL />,
+});
+
+import QuestionSerpM from '@semcore/icon/QuestionSerp/m';
+figma.connect(QuestionSerpM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=1543:4', {
+  variant: { Size: 'M' },
+  example: () => <QuestionSerpM />,
+});
+
+import QuestionSerpL from '@semcore/icon/QuestionSerp/l';
+figma.connect(QuestionSerpL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=1543:4', {
+  variant: { Size: 'L' },
+  example: () => <QuestionSerpL />,
+});
+
+import RedoM from '@semcore/icon/Redo/m';
+figma.connect(RedoM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=423:228', {
+  variant: { Size: 'M' },
+  example: () => <RedoM />,
+});
+
+import RedoL from '@semcore/icon/Redo/l';
+figma.connect(RedoL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=423:228', {
+  variant: { Size: 'L' },
+  example: () => <RedoL />,
+});
+
+import FormatAlignCenterM from '@semcore/icon/FormatAlignCenter/m';
+figma.connect(FormatAlignCenterM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:424', {
+  variant: { Size: 'M' },
+  example: () => <FormatAlignCenterM />,
+});
+
+import FormatAlignCenterL from '@semcore/icon/FormatAlignCenter/l';
+figma.connect(FormatAlignCenterL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:424', {
+  variant: { Size: 'L' },
+  example: () => <FormatAlignCenterL />,
+});
+
+import InfoM from '@semcore/icon/Info/m';
+figma.connect(InfoM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=12:2045', {
+  variant: { Size: 'M' },
+  example: () => <InfoM />,
+});
+
+import InfoL from '@semcore/icon/Info/l';
+figma.connect(InfoL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=12:2045', {
+  variant: { Size: 'L' },
+  example: () => <InfoL />,
+});
+
+import PackagingM from '@semcore/icon/Packaging/m';
+figma.connect(PackagingM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:64', {
+  variant: { Size: 'M' },
+  example: () => <PackagingM />,
+});
+
+import PackagingL from '@semcore/icon/Packaging/l';
+figma.connect(PackagingL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:64', {
+  variant: { Size: 'L' },
+  example: () => <PackagingL />,
+});
+
+import PositionTopM from '@semcore/icon/PositionTop/m';
+figma.connect(PositionTopM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=388:14', {
+  variant: { Size: 'M' },
+  example: () => <PositionTopM />,
+});
+
+import PositionTopL from '@semcore/icon/PositionTop/l';
+figma.connect(PositionTopL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=388:14', {
+  variant: { Size: 'L' },
+  example: () => <PositionTopL />,
+});
+
+import LawM from '@semcore/icon/Law/m';
+figma.connect(LawM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:74', {
+  variant: { Size: 'M' },
+  example: () => <LawM />,
+});
+
+import LawL from '@semcore/icon/Law/l';
+figma.connect(LawL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:74', {
+  variant: { Size: 'L' },
+  example: () => <LawL />,
+});
+
+import YoutubePlaceholderM from '@semcore/icon/YoutubePlaceholder/m';
+figma.connect(YoutubePlaceholderM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:645', {
+  variant: { Size: 'M' },
+  example: () => <YoutubePlaceholderM />,
+});
+
+import YoutubePlaceholderL from '@semcore/icon/YoutubePlaceholder/l';
+figma.connect(YoutubePlaceholderL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:645', {
+  variant: { Size: 'L' },
+  example: () => <YoutubePlaceholderL />,
+});
+
+import UnsplashM from '@semcore/icon/Unsplash/m';
+figma.connect(UnsplashM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=4783:5', {
+  variant: { Size: 'M' },
+  example: () => <UnsplashM />,
+});
+
+import UnsplashL from '@semcore/icon/Unsplash/l';
+figma.connect(UnsplashL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=4783:5', {
+  variant: { Size: 'L' },
+  example: () => <UnsplashL />,
+});
+
+import LockYesM from '@semcore/icon/LockYes/m';
+figma.connect(LockYesM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=182:40', {
+  variant: { Size: 'M' },
+  example: () => <LockYesM />,
+});
+
+import LockYesL from '@semcore/icon/LockYes/l';
+figma.connect(LockYesL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=182:40', {
+  variant: { Size: 'L' },
+  example: () => <LockYesL />,
+});
+
+import DocumentCheckM from '@semcore/icon/DocumentCheck/m';
+figma.connect(DocumentCheckM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=229:52', {
+  variant: { Size: 'M' },
+  example: () => <DocumentCheckM />,
+});
+
+import DocumentCheckL from '@semcore/icon/DocumentCheck/l';
+figma.connect(DocumentCheckL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=229:52', {
+  variant: { Size: 'L' },
+  example: () => <DocumentCheckL />,
+});
+
+import CartM from '@semcore/icon/Cart/m';
+figma.connect(CartM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=8:309', {
+  variant: { Size: 'M' },
+  example: () => <CartM />,
+});
+
+import CartL from '@semcore/icon/Cart/l';
+figma.connect(CartL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=8:309', {
+  variant: { Size: 'L' },
+  example: () => <CartL />,
+});
+
+import LinkInternalM from '@semcore/icon/LinkInternal/m';
+figma.connect(LinkInternalM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=498:25', {
+  variant: { Size: 'M' },
+  example: () => <LinkInternalM />,
+});
+
+import LinkInternalL from '@semcore/icon/LinkInternal/l';
+figma.connect(LinkInternalL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=498:25', {
+  variant: { Size: 'L' },
+  example: () => <LinkInternalL />,
+});
+
+import ArrowsM from '@semcore/icon/Arrows/m';
+figma.connect(ArrowsM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=313:4', {
+  variant: { Size: 'M' },
+  example: () => <ArrowsM />,
+});
+
+import ArrowsL from '@semcore/icon/Arrows/l';
+figma.connect(ArrowsL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=313:4', {
+  variant: { Size: 'L' },
+  example: () => <ArrowsL />,
+});
+
+import CalendarM from '@semcore/icon/Calendar/m';
+figma.connect(CalendarM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=4:169', {
+  variant: { Size: 'M' },
+  example: () => <CalendarM />,
+});
+
+import CalendarL from '@semcore/icon/Calendar/l';
+figma.connect(CalendarL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=4:169', {
+  variant: { Size: 'L' },
+  example: () => <CalendarL />,
+});
+
+import YoutubeM from '@semcore/icon/Youtube/m';
+figma.connect(YoutubeM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:640', {
+  variant: { Size: 'M' },
+  example: () => <YoutubeM />,
+});
+
+import YoutubeL from '@semcore/icon/Youtube/l';
+figma.connect(YoutubeL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:640', {
+  variant: { Size: 'L' },
+  example: () => <YoutubeL />,
+});
+
+import LinkAltBrokenM from '@semcore/icon/LinkAltBroken/m';
+figma.connect(LinkAltBrokenM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=565:74', {
+  variant: { Size: 'M' },
+  example: () => <LinkAltBrokenM />,
+});
+
+import LinkAltBrokenL from '@semcore/icon/LinkAltBroken/l';
+figma.connect(LinkAltBrokenL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=565:74', {
+  variant: { Size: 'L' },
+  example: () => <LinkAltBrokenL />,
+});
+
+import FurnitureM from '@semcore/icon/Furniture/m';
+figma.connect(FurnitureM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:104', {
+  variant: { Size: 'M' },
+  example: () => <FurnitureM />,
+});
+
+import FurnitureL from '@semcore/icon/Furniture/l';
+figma.connect(FurnitureL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:104', {
+  variant: { Size: 'L' },
+  example: () => <FurnitureL />,
+});
+
+import DocumentHappyM from '@semcore/icon/DocumentHappy/m';
+figma.connect(DocumentHappyM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=229:67', {
+  variant: { Size: 'M' },
+  example: () => <DocumentHappyM />,
+});
+
+import DocumentHappyL from '@semcore/icon/DocumentHappy/l';
+figma.connect(DocumentHappyL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=229:67', {
+  variant: { Size: 'L' },
+  example: () => <DocumentHappyL />,
+});
+
+import IndentedResultM from '@semcore/icon/IndentedResult/m';
+figma.connect(IndentedResultM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=1788:4', {
+  variant: { Size: 'M' },
+  example: () => <IndentedResultM />,
+});
+
+import IndentedResultL from '@semcore/icon/IndentedResult/l';
+figma.connect(IndentedResultL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=1788:4', {
+  variant: { Size: 'L' },
+  example: () => <IndentedResultL />,
+});
+
+import SmileNeutralM from '@semcore/icon/SmileNeutral/m';
+figma.connect(SmileNeutralM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=4:107', {
+  variant: { Size: 'M' },
+  example: () => <SmileNeutralM />,
+});
+
+import SmileNeutralL from '@semcore/icon/SmileNeutral/l';
+figma.connect(SmileNeutralL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=4:107', {
+  variant: { Size: 'L' },
+  example: () => <SmileNeutralL />,
+});
+
+import BriefcaseM from '@semcore/icon/Briefcase/m';
+figma.connect(BriefcaseM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=12:897', {
+  variant: { Size: 'M' },
+  example: () => <BriefcaseM />,
+});
+
+import BriefcaseL from '@semcore/icon/Briefcase/l';
+figma.connect(BriefcaseL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=12:897', {
+  variant: { Size: 'L' },
+  example: () => <BriefcaseL />,
+});
+
+import CurrencyUsdM from '@semcore/icon/CurrencyUsd/m';
+figma.connect(CurrencyUsdM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=430:456', {
+  variant: { Size: 'M' },
+  example: () => <CurrencyUsdM />,
+});
+
+import CurrencyUsdL from '@semcore/icon/CurrencyUsd/l';
+figma.connect(CurrencyUsdL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=430:456', {
+  variant: { Size: 'L' },
+  example: () => <CurrencyUsdL />,
+});
+
+import ChromeM from '@semcore/icon/Chrome/m';
+figma.connect(ChromeM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=138:156', {
+  variant: { Size: 'M' },
+  example: () => <ChromeM />,
+});
+
+import ChromeL from '@semcore/icon/Chrome/l';
+figma.connect(ChromeL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=138:156', {
+  variant: { Size: 'L' },
+  example: () => <ChromeL />,
+});
+
+import LogisticM from '@semcore/icon/Logistic/m';
+figma.connect(LogisticM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:59', {
+  variant: { Size: 'M' },
+  example: () => <LogisticM />,
+});
+
+import LogisticL from '@semcore/icon/Logistic/l';
+figma.connect(LogisticL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2949:59', {
+  variant: { Size: 'L' },
+  example: () => <LogisticL />,
+});
+
+import OrientationLandscapeM from '@semcore/icon/OrientationLandscape/m';
+figma.connect(OrientationLandscapeM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=386:105', {
+  variant: { Size: 'M' },
+  example: () => <OrientationLandscapeM />,
+});
+
+import OrientationLandscapeL from '@semcore/icon/OrientationLandscape/l';
+figma.connect(OrientationLandscapeL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=386:105', {
+  variant: { Size: 'L' },
+  example: () => <OrientationLandscapeL />,
+});
+
+import MathPlusAltM from '@semcore/icon/MathPlusAlt/m';
+figma.connect(MathPlusAltM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=553:34', {
+  variant: { Size: 'M' },
+  example: () => <MathPlusAltM />,
+});
+
+import MathPlusAltL from '@semcore/icon/MathPlusAlt/l';
+figma.connect(MathPlusAltL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=553:34', {
+  variant: { Size: 'L' },
+  example: () => <MathPlusAltL />,
+});
+
+import ProwlyM from '@semcore/icon/Prowly/m';
+figma.connect(ProwlyM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=42:66', {
+  variant: { Size: 'M' },
+  example: () => <ProwlyM />,
+});
+
+import ProwlyL from '@semcore/icon/Prowly/l';
+figma.connect(ProwlyL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=42:66', {
+  variant: { Size: 'L' },
+  example: () => <ProwlyL />,
+});
+
+import HotelM from '@semcore/icon/Hotel/m';
+figma.connect(HotelM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=851:9', {
+  variant: { Size: 'M' },
+  example: () => <HotelM />,
+});
+
+import HotelL from '@semcore/icon/Hotel/l';
+figma.connect(HotelL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=851:9', {
+  variant: { Size: 'L' },
+  example: () => <HotelL />,
+});
+
+import FacebookMessengerM from '@semcore/icon/FacebookMessenger/m';
+figma.connect(FacebookMessengerM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=139:38', {
+  variant: { Size: 'M' },
+  example: () => <FacebookMessengerM />,
+});
+
+import FacebookMessengerL from '@semcore/icon/FacebookMessenger/l';
+figma.connect(FacebookMessengerL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=139:38', {
+  variant: { Size: 'L' },
+  example: () => <FacebookMessengerL />,
+});
+
+import TwitterM from '@semcore/icon/Twitter/m';
+figma.connect(TwitterM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=83:217', {
+  variant: { Size: 'M' },
+  example: () => <TwitterM />,
+});
+
+import TwitterL from '@semcore/icon/Twitter/l';
+figma.connect(TwitterL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=83:217', {
+  variant: { Size: 'L' },
+  example: () => <TwitterL />,
+});
+
+import ChevronDoubleLeftM from '@semcore/icon/ChevronDoubleLeft/m';
+figma.connect(ChevronDoubleLeftM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=78:82', {
+  variant: { Size: 'M' },
+  example: () => <ChevronDoubleLeftM />,
+});
+
+import ChevronDoubleLeftL from '@semcore/icon/ChevronDoubleLeft/l';
+figma.connect(ChevronDoubleLeftL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=78:82', {
+  variant: { Size: 'L' },
+  example: () => <ChevronDoubleLeftL />,
+});
+
+import FoursquareM from '@semcore/icon/Foursquare/m';
+figma.connect(FoursquareM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=226:452', {
+  variant: { Size: 'M' },
+  example: () => <FoursquareM />,
+});
+
+import FoursquareL from '@semcore/icon/Foursquare/l';
+figma.connect(FoursquareL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=226:452', {
+  variant: { Size: 'L' },
+  example: () => <FoursquareL />,
+});
+
+import ChevronDoubleUpM from '@semcore/icon/ChevronDoubleUp/m';
+figma.connect(ChevronDoubleUpM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=78:156', {
+  variant: { Size: 'M' },
+  example: () => <ChevronDoubleUpM />,
+});
+
+import ChevronDoubleUpL from '@semcore/icon/ChevronDoubleUp/l';
+figma.connect(ChevronDoubleUpL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=78:156', {
+  variant: { Size: 'L' },
+  example: () => <ChevronDoubleUpL />,
+});
+
+import DocumentM from '@semcore/icon/Document/m';
+figma.connect(DocumentM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=229:42', {
+  variant: { Size: 'M' },
+  example: () => <DocumentM />,
+});
+
+import DocumentL from '@semcore/icon/Document/l';
+figma.connect(DocumentL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=229:42', {
+  variant: { Size: 'L' },
+  example: () => <DocumentL />,
+});
+
+import MathMinusAltM from '@semcore/icon/MathMinusAlt/m';
+figma.connect(MathMinusAltM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=1376:7663', {
+  variant: { Size: 'M' },
+  example: () => <MathMinusAltM />,
+});
+
+import MathMinusAltL from '@semcore/icon/MathMinusAlt/l';
+figma.connect(MathMinusAltL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=1376:7663', {
+  variant: { Size: 'L' },
+  example: () => <MathMinusAltL />,
+});
+
+import AttachM from '@semcore/icon/Attach/m';
+figma.connect(AttachM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=328:4', {
+  variant: { Size: 'M' },
+  example: () => <AttachM />,
+});
+
+import AttachL from '@semcore/icon/Attach/l';
+figma.connect(AttachL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=328:4', {
+  variant: { Size: 'L' },
+  example: () => <AttachL />,
+});
+
+import ChatM from '@semcore/icon/Chat/m';
+figma.connect(ChatM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:550', {
+  variant: { Size: 'M' },
+  example: () => <ChatM />,
+});
+
+import ChatL from '@semcore/icon/Chat/l';
+figma.connect(ChatL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:550', {
+  variant: { Size: 'L' },
+  example: () => <ChatL />,
+});
+
+import HomeM from '@semcore/icon/Home/m';
+figma.connect(HomeM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=519:113', {
+  variant: { Size: 'M' },
+  example: () => <HomeM />,
+});
+
+import HomeL from '@semcore/icon/Home/l';
+figma.connect(HomeL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=519:113', {
+  variant: { Size: 'L' },
+  example: () => <HomeL />,
+});
+
+import ChevronLeftM from '@semcore/icon/ChevronLeft/m';
+figma.connect(ChevronLeftM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3:4625', {
+  variant: { Size: 'M' },
+  example: () => <ChevronLeftM />,
+});
+
+import ChevronLeftL from '@semcore/icon/ChevronLeft/l';
+figma.connect(ChevronLeftL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3:4625', {
+  variant: { Size: 'L' },
+  example: () => <ChevronLeftL />,
+});
+
+import FavoriteM from '@semcore/icon/Favorite/m';
+figma.connect(FavoriteM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:485', {
+  variant: { Size: 'M' },
+  example: () => <FavoriteM />,
+});
+
+import FavoriteL from '@semcore/icon/Favorite/l';
+figma.connect(FavoriteL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:485', {
+  variant: { Size: 'L' },
+  example: () => <FavoriteL />,
+});
+
+import FilterM from '@semcore/icon/Filter/m';
+figma.connect(FilterM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=210:9', {
+  variant: { Size: 'M' },
+  example: () => <FilterM />,
+});
+
+import FilterL from '@semcore/icon/Filter/l';
+figma.connect(FilterL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=210:9', {
+  variant: { Size: 'L' },
+  example: () => <FilterL />,
+});
+
+import DesktopChartM from '@semcore/icon/DesktopChart/m';
+figma.connect(DesktopChartM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6:236', {
+  variant: { Size: 'M' },
+  example: () => <DesktopChartM />,
+});
+
+import DesktopChartL from '@semcore/icon/DesktopChart/l';
+figma.connect(DesktopChartL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6:236', {
+  variant: { Size: 'L' },
+  example: () => <DesktopChartL />,
+});
+
+import ShowYesM from '@semcore/icon/ShowYes/m';
+figma.connect(ShowYesM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=648:4', {
+  variant: { Size: 'M' },
+  example: () => <ShowYesM />,
+});
+
+import ShowYesL from '@semcore/icon/ShowYes/l';
+figma.connect(ShowYesL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=648:4', {
+  variant: { Size: 'L' },
+  example: () => <ShowYesL />,
+});
+
+import KeyHotkeyM from '@semcore/icon/KeyHotkey/m';
+figma.connect(KeyHotkeyM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=464:11', {
+  variant: { Size: 'M' },
+  example: () => <KeyHotkeyM />,
+});
+
+import KeyHotkeyL from '@semcore/icon/KeyHotkey/l';
+figma.connect(KeyHotkeyL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=464:11', {
+  variant: { Size: 'L' },
+  example: () => <KeyHotkeyL />,
+});
+
+import EllipsisM from '@semcore/icon/Ellipsis/m';
+figma.connect(EllipsisM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=42:3', {
+  variant: { Size: 'M' },
+  example: () => <EllipsisM />,
+});
+
+import EllipsisL from '@semcore/icon/Ellipsis/l';
+figma.connect(EllipsisL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=42:3', {
+  variant: { Size: 'L' },
+  example: () => <EllipsisL />,
+});
+
+import RephraseM from '@semcore/icon/Rephrase/m';
+figma.connect(RephraseM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2845:4', {
+  variant: { Size: 'M' },
+  example: () => <RephraseM />,
+});
+
+import RephraseL from '@semcore/icon/Rephrase/l';
+figma.connect(RephraseL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2845:4', {
+  variant: { Size: 'L' },
+  example: () => <RephraseL />,
+});
+
+import AppleM from '@semcore/icon/Apple/m';
+figma.connect(AppleM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=10:750', {
+  variant: { Size: 'M' },
+  example: () => <AppleM />,
+});
+
+import AppleL from '@semcore/icon/Apple/l';
+figma.connect(AppleL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=10:750', {
+  variant: { Size: 'L' },
+  example: () => <AppleL />,
+});
+
+import BlockM from '@semcore/icon/Block/m';
+figma.connect(BlockM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=10:490', {
+  variant: { Size: 'M' },
+  example: () => <BlockM />,
+});
+
+import BlockL from '@semcore/icon/Block/l';
+figma.connect(BlockL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=10:490', {
+  variant: { Size: 'L' },
+  example: () => <BlockL />,
+});
+
+import BookmarkFilledM from '@semcore/icon/BookmarkFilled/m';
+figma.connect(BookmarkFilledM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=245:4', {
+  variant: { Size: 'M' },
+  example: () => <BookmarkFilledM />,
+});
+
+import BookmarkFilledL from '@semcore/icon/BookmarkFilled/l';
+figma.connect(BookmarkFilledL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=245:4', {
+  variant: { Size: 'L' },
+  example: () => <BookmarkFilledL />,
+});
+
+import ShareM from '@semcore/icon/Share/m';
+figma.connect(ShareM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=423:253', {
+  variant: { Size: 'M' },
+  example: () => <ShareM />,
+});
+
+import ShareL from '@semcore/icon/Share/l';
+figma.connect(ShareL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=423:253', {
+  variant: { Size: 'L' },
+  example: () => <ShareL />,
+});
+
+import ChargeM from '@semcore/icon/Charge/m';
+figma.connect(ChargeM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2613:4', {
+  variant: { Size: 'M' },
+  example: () => <ChargeM />,
+});
+
+import ChargeL from '@semcore/icon/Charge/l';
+figma.connect(ChargeL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2613:4', {
+  variant: { Size: 'L' },
+  example: () => <ChargeL />,
+});
+
+import SideMenuLeftM from '@semcore/icon/SideMenuLeft/m';
+figma.connect(SideMenuLeftM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=544:30', {
+  variant: { Size: 'M' },
+  example: () => <SideMenuLeftM />,
+});
+
+import SideMenuLeftL from '@semcore/icon/SideMenuLeft/l';
+figma.connect(SideMenuLeftL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=544:30', {
+  variant: { Size: 'L' },
+  example: () => <SideMenuLeftL />,
+});
+
+import FavoriteFilledM from '@semcore/icon/FavoriteFilled/m';
+figma.connect(FavoriteFilledM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:480', {
+  variant: { Size: 'M' },
+  example: () => <FavoriteFilledM />,
+});
+
+import FavoriteFilledL from '@semcore/icon/FavoriteFilled/l';
+figma.connect(FavoriteFilledL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=80:480', {
+  variant: { Size: 'L' },
+  example: () => <FavoriteFilledL />,
+});
+
+import CheckboxM from '@semcore/icon/Checkbox/m';
+figma.connect(CheckboxM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=427:365', {
+  variant: { Size: 'M' },
+  example: () => <CheckboxM />,
+});
+
+import CheckboxL from '@semcore/icon/Checkbox/l';
+figma.connect(CheckboxL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=427:365', {
+  variant: { Size: 'L' },
+  example: () => <CheckboxL />,
+});
+
+import LookerStudioM from '@semcore/icon/color/LookerStudio/m';
+figma.connect(LookerStudioM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2836:5', {
+  variant: { Size: 'M' },
+  example: () => <LookerStudioM />,
+});
+
+import LookerStudioL from '@semcore/icon/color/LookerStudio/l';
+figma.connect(LookerStudioL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2836:5', {
+  variant: { Size: 'L' },
+  example: () => <LookerStudioL />,
+});
+
+import VideoListM from '@semcore/icon/VideoList/m';
+figma.connect(VideoListM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=7331:3', {
+  variant: { Size: 'M' },
+  example: () => <VideoListM />,
+});
+
+import VideoListL from '@semcore/icon/VideoList/l';
+figma.connect(VideoListL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=7331:3', {
+  variant: { Size: 'L' },
+  example: () => <VideoListL />,
+});
+
+import CollapseListM from '@semcore/icon/CollapseList/m';
+figma.connect(CollapseListM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=9166:7', {
+  variant: { Size: 'M' },
+  example: () => <CollapseListM />,
+});
+
+import CollapseListL from '@semcore/icon/CollapseList/l';
+figma.connect(CollapseListL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=9166:7', {
+  variant: { Size: 'L' },
+  example: () => <CollapseListL />,
+});
+
+import AskAIM from '@semcore/icon/AskAI/m';
+figma.connect(AskAIM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=4777:14015', {
+  variant: { Size: 'M' },
+  example: () => <AskAIM />,
+});
+
+import AskAIL from '@semcore/icon/AskAI/l';
+figma.connect(AskAIL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=4777:14015', {
+  variant: { Size: 'L' },
+  example: () => <AskAIL />,
+});
+
+import MonitoringM from '@semcore/icon/Monitoring/m';
+figma.connect(MonitoringM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=9534:60', {
+  variant: { Size: 'M' },
+  example: () => <MonitoringM />,
+});
+
+import MonitoringL from '@semcore/icon/Monitoring/l';
+figma.connect(MonitoringL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=9534:60', {
+  variant: { Size: 'L' },
+  example: () => <MonitoringL />,
+});
+
+import ZoomMinusM from '@semcore/icon/ZoomMinus/m';
+figma.connect(ZoomMinusM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=217:137', {
+  variant: { Size: 'M' },
+  example: () => <ZoomMinusM />,
+});
+
+import ZoomMinusL from '@semcore/icon/ZoomMinus/l';
+figma.connect(ZoomMinusL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=217:137', {
+  variant: { Size: 'L' },
+  example: () => <ZoomMinusL />,
+});
+
+import ZoomPlusM from '@semcore/icon/ZoomPlus/m';
+figma.connect(ZoomPlusM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=217:142', {
+  variant: { Size: 'M' },
+  example: () => <ZoomPlusM />,
+});
+
+import ZoomPlusL from '@semcore/icon/ZoomPlus/l';
+figma.connect(ZoomPlusL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=217:142', {
+  variant: { Size: 'L' },
+  example: () => <ZoomPlusL />,
+});
+
+import SearchM from '@semcore/icon/Search/m';
+figma.connect(SearchM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=182:30', {
+  variant: { Size: 'M' },
+  example: () => <SearchM />,
+});
+
+import SearchL from '@semcore/icon/Search/l';
+figma.connect(SearchL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=182:30', {
+  variant: { Size: 'L' },
+  example: () => <SearchL />,
+});
+
+import FindResultsOnM from '@semcore/icon/FindResultsOn/m';
+figma.connect(FindResultsOnM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3190:14', {
+  variant: { Size: 'M' },
+  example: () => <FindResultsOnM />,
+});
+
+import FindResultsOnL from '@semcore/icon/FindResultsOn/l';
+figma.connect(FindResultsOnL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3190:14', {
+  variant: { Size: 'L' },
+  example: () => <FindResultsOnL />,
+});
+
+import SerpM from '@semcore/icon/Serp/m';
+figma.connect(SerpM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=12:1196', {
+  variant: { Size: 'M' },
+  example: () => <SerpM />,
+});
+
+import SerpL from '@semcore/icon/Serp/l';
+figma.connect(SerpL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=12:1196', {
+  variant: { Size: 'L' },
+  example: () => <SerpL />,
+});
+
+import ChatGPTM from '@semcore/icon/ChatGPT/m';
+figma.connect(ChatGPTM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=7364:3', {
+  variant: { Size: 'M' },
+  example: () => <ChatGPTM />,
+});
+
+import ChatGPTL from '@semcore/icon/ChatGPT/l';
+figma.connect(ChatGPTL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=7364:3', {
+  variant: { Size: 'L' },
+  example: () => <ChatGPTL />,
+});
+
+import BracketsCodeM from '@semcore/icon/BracketsCode/m';
+figma.connect(BracketsCodeM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=37:38', {
+  variant: { Size: 'M' },
+  example: () => <BracketsCodeM />,
+});
+
+import BracketsCodeL from '@semcore/icon/BracketsCode/l';
+figma.connect(BracketsCodeL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=37:38', {
+  variant: { Size: 'L' },
+  example: () => <BracketsCodeL />,
+});
+
+import ClaudeM from '@semcore/icon/Claude/m';
+figma.connect(ClaudeM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=9256:2', {
+  variant: { Size: 'M' },
+  example: () => <ClaudeM />,
+});
+
+import ClaudeL from '@semcore/icon/Claude/l';
+figma.connect(ClaudeL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=9256:2', {
+  variant: { Size: 'L' },
+  example: () => <ClaudeL />,
+});
+
+import PerplexityM from '@semcore/icon/Perplexity/m';
+figma.connect(PerplexityM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=9244:8', {
+  variant: { Size: 'M' },
+  example: () => <PerplexityM />,
+});
+
+import PerplexityL from '@semcore/icon/Perplexity/l';
+figma.connect(PerplexityL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=9244:8', {
+  variant: { Size: 'L' },
+  example: () => <PerplexityL />,
+});
+
+import CanvaM from '@semcore/icon/Canva/m';
+figma.connect(CanvaM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=9241:2', {
+  variant: { Size: 'M' },
+  example: () => <CanvaM />,
+});
+
+import CanvaL from '@semcore/icon/Canva/l';
+figma.connect(CanvaL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=9241:2', {
+  variant: { Size: 'L' },
+  example: () => <CanvaL />,
+});
+
+import GoogleGenerativeAIM from '@semcore/icon/GoogleGenerativeAI/m';
+figma.connect(GoogleGenerativeAIM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=4262:74', {
+  variant: { Size: 'M' },
+  example: () => <GoogleGenerativeAIM />,
+});
+
+import GoogleGenerativeAIL from '@semcore/icon/GoogleGenerativeAI/l';
+figma.connect(GoogleGenerativeAIL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=4262:74', {
+  variant: { Size: 'L' },
+  example: () => <GoogleGenerativeAIL />,
+});
+
+import SellzoneM from '@semcore/icon/Sellzone/m';
+figma.connect(SellzoneM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=42:61', {
+  variant: { Size: 'M' },
+  example: () => <SellzoneM />,
+});
+
+import SellzoneL from '@semcore/icon/Sellzone/l';
+figma.connect(SellzoneL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=42:61', {
+  variant: { Size: 'L' },
+  example: () => <SellzoneL />,
+});
+
+import ChartVennM from '@semcore/icon/ChartVenn/m';
+figma.connect(ChartVennM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=8503:2', {
+  variant: { Size: 'M' },
+  example: () => <ChartVennM />,
+});
+
+import ChartVennL from '@semcore/icon/ChartVenn/l';
+figma.connect(ChartVennL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=8503:2', {
+  variant: { Size: 'L' },
+  example: () => <ChartVennL />,
+});
+
+import MetaColoredM from '@semcore/icon/color/MetaColored/m';
+figma.connect(MetaColoredM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6783:113', {
+  variant: { Size: 'M' },
+  example: () => <MetaColoredM />,
+});
+
+import MetaColoredL from '@semcore/icon/color/MetaColored/l';
+figma.connect(MetaColoredL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6783:113', {
+  variant: { Size: 'L' },
+  example: () => <MetaColoredL />,
+});
+
+import GoogleAnalyticsM from '@semcore/icon/color/GoogleAnalytics/m';
+figma.connect(GoogleAnalyticsM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=622:11', {
+  variant: { Size: 'M' },
+  example: () => <GoogleAnalyticsM />,
+});
+
+import GoogleAnalyticsL from '@semcore/icon/color/GoogleAnalytics/l';
+figma.connect(GoogleAnalyticsL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=622:11', {
+  variant: { Size: 'L' },
+  example: () => <GoogleAnalyticsL />,
+});
+
+import MicrosoftM from '@semcore/icon/color/Microsoft/m';
+figma.connect(MicrosoftM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6485:78', {
+  variant: { Size: 'M' },
+  example: () => <MicrosoftM />,
+});
+
+import MicrosoftL from '@semcore/icon/color/Microsoft/l';
+figma.connect(MicrosoftL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6485:78', {
+  variant: { Size: 'L' },
+  example: () => <MicrosoftL />,
+});
+
+import GitLabM from '@semcore/icon/color/GitLab/m';
+figma.connect(GitLabM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=622:8', {
+  variant: { Size: 'M' },
+  example: () => <GitLabM />,
+});
+
+import GitLabL from '@semcore/icon/color/GitLab/l';
+figma.connect(GitLabL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=622:8', {
+  variant: { Size: 'L' },
+  example: () => <GitLabL />,
+});
+
+import GoogleSearchConsoleM from '@semcore/icon/color/GoogleSearchConsole/m';
+figma.connect(GoogleSearchConsoleM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=622:26', {
+  variant: { Size: 'M' },
+  example: () => <GoogleSearchConsoleM />,
+});
+
+import GoogleSearchConsoleL from '@semcore/icon/color/GoogleSearchConsole/l';
+figma.connect(GoogleSearchConsoleL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=622:26', {
+  variant: { Size: 'L' },
+  example: () => <GoogleSearchConsoleL />,
+});
+
+import BirdeyeColoredM from '@semcore/icon/color/BirdeyeColored/m';
+figma.connect(BirdeyeColoredM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6785:340', {
+  variant: { Size: 'M' },
+  example: () => <BirdeyeColoredM />,
+});
+
+import BirdeyeColoredL from '@semcore/icon/color/BirdeyeColored/l';
+figma.connect(BirdeyeColoredL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6785:340', {
+  variant: { Size: 'L' },
+  example: () => <BirdeyeColoredL />,
+});
+
+import GoogleCloudM from '@semcore/icon/color/GoogleCloud/m';
+figma.connect(GoogleCloudM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=1968:4', {
+  variant: { Size: 'M' },
+  example: () => <GoogleCloudM />,
+});
+
+import GoogleCloudL from '@semcore/icon/color/GoogleCloud/l';
+figma.connect(GoogleCloudL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=1968:4', {
+  variant: { Size: 'L' },
+  example: () => <GoogleCloudL />,
+});
+
+import GoogleSlidesM from '@semcore/icon/color/GoogleSlides/m';
+figma.connect(GoogleSlidesM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=4058:15', {
+  variant: { Size: 'M' },
+  example: () => <GoogleSlidesM />,
+});
+
+import GoogleSlidesL from '@semcore/icon/color/GoogleSlides/l';
+figma.connect(GoogleSlidesL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=4058:15', {
+  variant: { Size: 'L' },
+  example: () => <GoogleSlidesL />,
+});
+
+import GoogleDisplayVideoAdsM from '@semcore/icon/color/GoogleDisplayVideoAds/m';
+figma.connect(GoogleDisplayVideoAdsM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6785:218', {
+  variant: { Size: 'M' },
+  example: () => <GoogleDisplayVideoAdsM />,
+});
+
+import GoogleDisplayVideoAdsL from '@semcore/icon/color/GoogleDisplayVideoAds/l';
+figma.connect(GoogleDisplayVideoAdsL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6785:218', {
+  variant: { Size: 'L' },
+  example: () => <GoogleDisplayVideoAdsL />,
+});
+
+import GoogleMailM from '@semcore/icon/color/GoogleMail/m';
+figma.connect(GoogleMailM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=622:29', {
+  variant: { Size: 'M' },
+  example: () => <GoogleMailM />,
+});
+
+import GoogleMailL from '@semcore/icon/color/GoogleMail/l';
+figma.connect(GoogleMailL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=622:29', {
+  variant: { Size: 'L' },
+  example: () => <GoogleMailL />,
+});
+
+import MicrosoftOfficeM from '@semcore/icon/color/MicrosoftOffice/m';
+figma.connect(MicrosoftOfficeM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=622:38', {
+  variant: { Size: 'M' },
+  example: () => <MicrosoftOfficeM />,
+});
+
+import MicrosoftOfficeL from '@semcore/icon/color/MicrosoftOffice/l';
+figma.connect(MicrosoftOfficeL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=622:38', {
+  variant: { Size: 'L' },
+  example: () => <MicrosoftOfficeL />,
+});
+
+import GitHubM from '@semcore/icon/color/GitHub/m';
+figma.connect(GitHubM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=144:4', {
+  variant: { Size: 'M' },
+  example: () => <GitHubM />,
+});
+
+import GitHubL from '@semcore/icon/color/GitHub/l';
+figma.connect(GitHubL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=144:4', {
+  variant: { Size: 'L' },
+  example: () => <GitHubL />,
+});
+
+import CopilotM from '@semcore/icon/color/Copilot/m';
+figma.connect(CopilotM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=7522:2', {
+  variant: { Size: 'M' },
+  example: () => <CopilotM />,
+});
+
+import CopilotL from '@semcore/icon/color/Copilot/l';
+figma.connect(CopilotL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=7522:2', {
+  variant: { Size: 'L' },
+  example: () => <CopilotL />,
+});
+
+import ShopifyColoredM from '@semcore/icon/color/ShopifyColored/m';
+figma.connect(ShopifyColoredM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6783:58', {
+  variant: { Size: 'M' },
+  example: () => <ShopifyColoredM />,
+});
+
+import ShopifyColoredL from '@semcore/icon/color/ShopifyColored/l';
+figma.connect(ShopifyColoredL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6783:58', {
+  variant: { Size: 'L' },
+  example: () => <ShopifyColoredL />,
+});
+
+import TikTokColoredM from '@semcore/icon/color/TikTokColored/m';
+figma.connect(TikTokColoredM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6489:187', {
+  variant: { Size: 'M' },
+  example: () => <TikTokColoredM />,
+});
+
+import TikTokColoredL from '@semcore/icon/color/TikTokColored/l';
+figma.connect(TikTokColoredL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6489:187', {
+  variant: { Size: 'L' },
+  example: () => <TikTokColoredL />,
+});
+
+import ConstantContactColoredM from '@semcore/icon/color/ConstantContactColored/m';
+figma.connect(ConstantContactColoredM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6785:289', {
+  variant: { Size: 'M' },
+  example: () => <ConstantContactColoredM />,
+});
+
+import ConstantContactColoredL from '@semcore/icon/color/ConstantContactColored/l';
+figma.connect(ConstantContactColoredL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6785:289', {
+  variant: { Size: 'L' },
+  example: () => <ConstantContactColoredL />,
+});
+
+import YoutubeInvertM from '@semcore/icon/color/YoutubeInvert/m';
+figma.connect(YoutubeInvertM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=622:272', {
+  variant: { Size: 'M' },
+  example: () => <YoutubeInvertM />,
+});
+
+import YoutubeInvertL from '@semcore/icon/color/YoutubeInvert/l';
+figma.connect(YoutubeInvertL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=622:272', {
+  variant: { Size: 'L' },
+  example: () => <YoutubeInvertL />,
+});
+
+import CallTrackingMetricsColoredM from '@semcore/icon/color/CallTrackingMetricsColored/m';
+figma.connect(CallTrackingMetricsColoredM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6785:175', {
+  variant: { Size: 'M' },
+  example: () => <CallTrackingMetricsColoredM />,
+});
+
+import CallTrackingMetricsColoredL from '@semcore/icon/color/CallTrackingMetricsColored/l';
+figma.connect(CallTrackingMetricsColoredL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6785:175', {
+  variant: { Size: 'L' },
+  example: () => <CallTrackingMetricsColoredL />,
+});
+
+import SalesforceM from '@semcore/icon/color/Salesforce/m';
+figma.connect(SalesforceM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6485:98', {
+  variant: { Size: 'M' },
+  example: () => <SalesforceM />,
+});
+
+import SalesforceL from '@semcore/icon/color/Salesforce/l';
+figma.connect(SalesforceL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6485:98', {
+  variant: { Size: 'L' },
+  example: () => <SalesforceL />,
+});
+
+import TikTokColoredInvertM from '@semcore/icon/color/TikTokColoredInvert/m';
+figma.connect(TikTokColoredInvertM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6489:202', {
+  variant: { Size: 'M' },
+  example: () => <TikTokColoredInvertM />,
+});
+
+import TikTokColoredInvertL from '@semcore/icon/color/TikTokColoredInvert/l';
+figma.connect(TikTokColoredInvertL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6489:202', {
+  variant: { Size: 'L' },
+  example: () => <TikTokColoredInvertL />,
+});
+
+import GoogleMyBusinessM from '@semcore/icon/color/GoogleMyBusiness/m';
+figma.connect(GoogleMyBusinessM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=622:32', {
+  variant: { Size: 'M' },
+  example: () => <GoogleMyBusinessM />,
+});
+
+import GoogleMyBusinessL from '@semcore/icon/color/GoogleMyBusiness/l';
+figma.connect(GoogleMyBusinessL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=622:32', {
+  variant: { Size: 'L' },
+  example: () => <GoogleMyBusinessL />,
+});
+
+import GoogleDocsM from '@semcore/icon/color/GoogleDocs/m';
+figma.connect(GoogleDocsM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=622:23', {
+  variant: { Size: 'M' },
+  example: () => <GoogleDocsM />,
+});
+
+import GoogleDocsL from '@semcore/icon/color/GoogleDocs/l';
+figma.connect(GoogleDocsL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=622:23', {
+  variant: { Size: 'L' },
+  example: () => <GoogleDocsL />,
+});
+
+import MailchimpM from '@semcore/icon/color/Mailchimp/m';
+figma.connect(MailchimpM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6485:48', {
+  variant: { Size: 'M' },
+  example: () => <MailchimpM />,
+});
+
+import MailchimpL from '@semcore/icon/color/Mailchimp/l';
+figma.connect(MailchimpL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6485:48', {
+  variant: { Size: 'L' },
+  example: () => <MailchimpL />,
+});
+
+import ClaudeColoredM from '@semcore/icon/color/ClaudeColored/m';
+figma.connect(ClaudeColoredM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=9256:23', {
+  variant: { Size: 'M' },
+  example: () => <ClaudeColoredM />,
+});
+
+import ClaudeColoredL from '@semcore/icon/color/ClaudeColored/l';
+figma.connect(ClaudeColoredL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=9256:23', {
+  variant: { Size: 'L' },
+  example: () => <ClaudeColoredL />,
+});
+
+import CampaignMonitorColoredM from '@semcore/icon/color/CampaignMonitorColored/m';
+figma.connect(CampaignMonitorColoredM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6785:271', {
+  variant: { Size: 'M' },
+  example: () => <CampaignMonitorColoredM />,
+});
+
+import CampaignMonitorColoredL from '@semcore/icon/color/CampaignMonitorColored/l';
+figma.connect(CampaignMonitorColoredL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6785:271', {
+  variant: { Size: 'L' },
+  example: () => <CampaignMonitorColoredL />,
+});
+
+import GoogleAdsM from '@semcore/icon/color/GoogleAds/m';
+figma.connect(GoogleAdsM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2731:4', {
+  variant: { Size: 'M' },
+  example: () => <GoogleAdsM />,
+});
+
+import GoogleAdsL from '@semcore/icon/color/GoogleAds/l';
+figma.connect(GoogleAdsL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2731:4', {
+  variant: { Size: 'L' },
+  example: () => <GoogleAdsL />,
+});
+
+import MozM from '@semcore/icon/color/Moz/m';
+figma.connect(MozM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6485:91', {
+  variant: { Size: 'M' },
+  example: () => <MozM />,
+});
+
+import MozL from '@semcore/icon/color/Moz/l';
+figma.connect(MozL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6485:91', {
+  variant: { Size: 'L' },
+  example: () => <MozL />,
+});
+
+import AhrefsM from '@semcore/icon/color/Ahrefs/m';
+figma.connect(AhrefsM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6485:27', {
+  variant: { Size: 'M' },
+  example: () => <AhrefsM />,
+});
+
+import AhrefsL from '@semcore/icon/color/Ahrefs/l';
+figma.connect(AhrefsL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6485:27', {
+  variant: { Size: 'L' },
+  example: () => <AhrefsL />,
+});
+
+import FigmaM from '@semcore/icon/color/Figma/m';
+figma.connect(FigmaM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=520:1447', {
+  variant: { Size: 'M' },
+  example: () => <FigmaM />,
+});
+
+import FigmaL from '@semcore/icon/color/Figma/l';
+figma.connect(FigmaL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=520:1447', {
+  variant: { Size: 'L' },
+  example: () => <FigmaL />,
+});
+
+import WhatConvertsColoredM from '@semcore/icon/color/WhatConvertsColored/m';
+figma.connect(WhatConvertsColoredM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6785:200', {
+  variant: { Size: 'M' },
+  example: () => <WhatConvertsColoredM />,
+});
+
+import WhatConvertsColoredL from '@semcore/icon/color/WhatConvertsColored/l';
+figma.connect(WhatConvertsColoredL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6785:200', {
+  variant: { Size: 'L' },
+  example: () => <WhatConvertsColoredL />,
+});
+
+import GoogleDataStudioM from '@semcore/icon/color/GoogleDataStudio/m';
+figma.connect(GoogleDataStudioM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=622:20', {
+  variant: { Size: 'M' },
+  example: () => <GoogleDataStudioM />,
+});
+
+import GoogleDataStudioL from '@semcore/icon/color/GoogleDataStudio/l';
+figma.connect(GoogleDataStudioL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=622:20', {
+  variant: { Size: 'L' },
+  example: () => <GoogleDataStudioL />,
+});
+
+import HubspotM from '@semcore/icon/color/Hubspot/m';
+figma.connect(HubspotM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=1342:7663', {
+  variant: { Size: 'M' },
+  example: () => <HubspotM />,
+});
+
+import HubspotL from '@semcore/icon/color/Hubspot/l';
+figma.connect(HubspotL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=1342:7663', {
+  variant: { Size: 'L' },
+  example: () => <HubspotL />,
+});
+
+import MatomoM from '@semcore/icon/color/Matomo/m';
+figma.connect(MatomoM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6485:55', {
+  variant: { Size: 'M' },
+  example: () => <MatomoM />,
+});
+
+import MatomoL from '@semcore/icon/color/Matomo/l';
+figma.connect(MatomoL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6485:55', {
+  variant: { Size: 'L' },
+  example: () => <MatomoL />,
+});
+
+import PerplexityColoredM from '@semcore/icon/color/PerplexityColored/m';
+figma.connect(PerplexityColoredM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=9256:28', {
+  variant: { Size: 'M' },
+  example: () => <PerplexityColoredM />,
+});
+
+import PerplexityColoredL from '@semcore/icon/color/PerplexityColored/l';
+figma.connect(PerplexityColoredL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=9256:28', {
+  variant: { Size: 'L' },
+  example: () => <PerplexityColoredL />,
+});
+
+import MicrosoftOutlookM from '@semcore/icon/color/MicrosoftOutlook/m';
+figma.connect(MicrosoftOutlookM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=622:41', {
+  variant: { Size: 'M' },
+  example: () => <MicrosoftOutlookM />,
+});
+
+import MicrosoftOutlookL from '@semcore/icon/color/MicrosoftOutlook/l';
+figma.connect(MicrosoftOutlookL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=622:41', {
+  variant: { Size: 'L' },
+  example: () => <MicrosoftOutlookL />,
+});
+
+import ConfluenceM from '@semcore/icon/color/Confluence/m';
+figma.connect(ConfluenceM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3420:4', {
+  variant: { Size: 'M' },
+  example: () => <ConfluenceM />,
+});
+
+import ConfluenceL from '@semcore/icon/color/Confluence/l';
+figma.connect(ConfluenceL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3420:4', {
+  variant: { Size: 'L' },
+  example: () => <ConfluenceL />,
+});
+
+import GitHubInvertM from '@semcore/icon/color/GitHubInvert/m';
+figma.connect(GitHubInvertM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3613:64', {
+  variant: { Size: 'M' },
+  example: () => <GitHubInvertM />,
+});
+
+import GitHubInvertL from '@semcore/icon/color/GitHubInvert/l';
+figma.connect(GitHubInvertL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3613:64', {
+  variant: { Size: 'L' },
+  example: () => <GitHubInvertL />,
+});
+
+import SnapchatM from '@semcore/icon/color/Snapchat/m';
+figma.connect(SnapchatM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6546:2', {
+  variant: { Size: 'M' },
+  example: () => <SnapchatM />,
+});
+
+import SnapchatL from '@semcore/icon/color/Snapchat/l';
+figma.connect(SnapchatL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6546:2', {
+  variant: { Size: 'L' },
+  example: () => <SnapchatL />,
+});
+
+import GoogleSheetsM from '@semcore/icon/color/GoogleSheets/m';
+figma.connect(GoogleSheetsM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=4058:26', {
+  variant: { Size: 'M' },
+  example: () => <GoogleSheetsM />,
+});
+
+import GoogleSheetsL from '@semcore/icon/color/GoogleSheets/l';
+figma.connect(GoogleSheetsL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=4058:26', {
+  variant: { Size: 'L' },
+  example: () => <GoogleSheetsL />,
+});
+
+import WooCommerceColoredM from '@semcore/icon/color/WooCommerceColored/m';
+figma.connect(WooCommerceColoredM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6783:87', {
+  variant: { Size: 'M' },
+  example: () => <WooCommerceColoredM />,
+});
+
+import WooCommerceColoredL from '@semcore/icon/color/WooCommerceColored/l';
+figma.connect(WooCommerceColoredL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6783:87', {
+  variant: { Size: 'L' },
+  example: () => <WooCommerceColoredL />,
+});
+
+import MicrosoftExchangeM from '@semcore/icon/color/MicrosoftExchange/m';
+figma.connect(MicrosoftExchangeM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=622:35', {
+  variant: { Size: 'M' },
+  example: () => <MicrosoftExchangeM />,
+});
+
+import MicrosoftExchangeL from '@semcore/icon/color/MicrosoftExchange/l';
+figma.connect(MicrosoftExchangeL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=622:35', {
+  variant: { Size: 'L' },
+  example: () => <MicrosoftExchangeL />,
+});
+
+import YoutubeColoredM from '@semcore/icon/color/YoutubeColored/m';
+figma.connect(YoutubeColoredM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=622:269', {
+  variant: { Size: 'M' },
+  example: () => <YoutubeColoredM />,
+});
+
+import YoutubeColoredL from '@semcore/icon/color/YoutubeColored/l';
+figma.connect(YoutubeColoredL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=622:269', {
+  variant: { Size: 'L' },
+  example: () => <YoutubeColoredL />,
+});
+
+import SimplifyTextM from '@semcore/icon/SimplifyText/m';
+figma.connect(SimplifyTextM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2845:9', {
+  variant: { Size: 'M' },
+  example: () => <SimplifyTextM />,
+});
+
+import SimplifyTextL from '@semcore/icon/SimplifyText/l';
+figma.connect(SimplifyTextL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=2845:9', {
+  variant: { Size: 'L' },
+  example: () => <SimplifyTextL />,
+});
+
+import GoogleGenerativeAIColoredM from '@semcore/icon/color/GoogleGenerativeAIColored/m';
+figma.connect(GoogleGenerativeAIColoredM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=9256:14', {
+  variant: { Size: 'M' },
+  example: () => <GoogleGenerativeAIColoredM />,
+});
+
+import GoogleGenerativeAIColoredL from '@semcore/icon/color/GoogleGenerativeAIColored/l';
+figma.connect(GoogleGenerativeAIColoredL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=9256:14', {
+  variant: { Size: 'L' },
+  example: () => <GoogleGenerativeAIColoredL />,
+});
+
+import GoogleColorM from '@semcore/icon/color/GoogleColor/m';
+figma.connect(GoogleColorM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=622:17', {
+  variant: { Size: 'M' },
+  example: () => <GoogleColorM />,
+});
+
+import GoogleColorL from '@semcore/icon/color/GoogleColor/l';
+figma.connect(GoogleColorL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=622:17', {
+  variant: { Size: 'L' },
+  example: () => <GoogleColorL />,
+});
+
+import LinkedInColoredM from '@semcore/icon/color/LinkedInColored/m';
+figma.connect(LinkedInColoredM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6485:68', {
+  variant: { Size: 'M' },
+  example: () => <LinkedInColoredM />,
+});
+
+import LinkedInColoredL from '@semcore/icon/color/LinkedInColored/l';
+figma.connect(LinkedInColoredL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6485:68', {
+  variant: { Size: 'L' },
+  example: () => <LinkedInColoredL />,
+});
+
+import JavaScriptM from '@semcore/icon/color/JavaScript/m';
+figma.connect(JavaScriptM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3365:4', {
+  variant: { Size: 'M' },
+  example: () => <JavaScriptM />,
+});
+
+import JavaScriptL from '@semcore/icon/color/JavaScript/l';
+figma.connect(JavaScriptL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=3365:4', {
+  variant: { Size: 'L' },
+  example: () => <JavaScriptL />,
+});
+
+import WhatsAppM from '@semcore/icon/color/WhatsApp/m';
+figma.connect(WhatsAppM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=622:45', {
+  variant: { Size: 'M' },
+  example: () => <WhatsAppM />,
+});
+
+import WhatsAppL from '@semcore/icon/color/WhatsApp/l';
+figma.connect(WhatsAppL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=622:45', {
+  variant: { Size: 'L' },
+  example: () => <WhatsAppL />,
+});
+
+import CallRailColoredM from '@semcore/icon/color/CallRailColored/m';
+figma.connect(CallRailColoredM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6489:179', {
+  variant: { Size: 'M' },
+  example: () => <CallRailColoredM />,
+});
+
+import CallRailColoredL from '@semcore/icon/color/CallRailColored/l';
+figma.connect(CallRailColoredL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6489:179', {
+  variant: { Size: 'L' },
+  example: () => <CallRailColoredL />,
+});
+
+import YahooM from '@semcore/icon/color/Yahoo/m';
+figma.connect(YahooM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=622:266', {
+  variant: { Size: 'M' },
+  example: () => <YahooM />,
+});
+
+import YahooL from '@semcore/icon/color/Yahoo/l';
+figma.connect(YahooL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=622:266', {
+  variant: { Size: 'L' },
+  example: () => <YahooL />,
+});
+
+import InstagramColoredM from '@semcore/icon/color/InstagramColored/m';
+figma.connect(InstagramColoredM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6783:18', {
+  variant: { Size: 'M' },
+  example: () => <InstagramColoredM />,
+});
+
+import InstagramColoredL from '@semcore/icon/color/InstagramColored/l';
+figma.connect(InstagramColoredL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6783:18', {
+  variant: { Size: 'L' },
+  example: () => <InstagramColoredL />,
+});
+
+import AmazonM from '@semcore/icon/color/Amazon/m';
+figma.connect(AmazonM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6485:32', {
+  variant: { Size: 'M' },
+  example: () => <AmazonM />,
+});
+
+import AmazonL from '@semcore/icon/color/Amazon/l';
+figma.connect(AmazonL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6485:32', {
+  variant: { Size: 'L' },
+  example: () => <AmazonL />,
+});
+
+import GoogleAnalytics4M from '@semcore/icon/color/GoogleAnalytics4/m';
+figma.connect(GoogleAnalytics4M, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=622:14', {
+  variant: { Size: 'M' },
+  example: () => <GoogleAnalytics4M />,
+});
+
+import GoogleAnalytics4L from '@semcore/icon/color/GoogleAnalytics4/l';
+figma.connect(GoogleAnalytics4L, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=622:14', {
+  variant: { Size: 'L' },
+  example: () => <GoogleAnalytics4L />,
+});
+
+import PipedriveColoredM from '@semcore/icon/color/PipedriveColored/m';
+figma.connect(PipedriveColoredM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6785:245', {
+  variant: { Size: 'M' },
+  example: () => <PipedriveColoredM />,
+});
+
+import PipedriveColoredL from '@semcore/icon/color/PipedriveColored/l';
+figma.connect(PipedriveColoredL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=6785:245', {
+  variant: { Size: 'L' },
+  example: () => <PipedriveColoredL />,
+});
+
+import GoogleBusinessProfileM from '@semcore/icon/GoogleBusinessProfile/m';
+figma.connect(GoogleBusinessProfileM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=832:27', {
+  variant: { Size: 'M' },
+  example: () => <GoogleBusinessProfileM />,
+});
+
+import GoogleBusinessProfileL from '@semcore/icon/GoogleBusinessProfile/l';
+figma.connect(GoogleBusinessProfileL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=832:27', {
+  variant: { Size: 'L' },
+  example: () => <GoogleBusinessProfileL />,
+});
+
+import SummaryAIM from '@semcore/icon/SummaryAI/m';
+figma.connect(SummaryAIM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=4777:14017', {
+  variant: { Size: 'M' },
+  example: () => <SummaryAIM />,
+});
+
+import SummaryAIL from '@semcore/icon/SummaryAI/l';
+figma.connect(SummaryAIL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=4777:14017', {
+  variant: { Size: 'L' },
+  example: () => <SummaryAIL />,
+});
+
+import ChatAIM from '@semcore/icon/ChatAI/m';
+figma.connect(ChatAIM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=4777:14016', {
+  variant: { Size: 'M' },
+  example: () => <ChatAIM />,
+});
+
+import ChatAIL from '@semcore/icon/ChatAI/l';
+figma.connect(ChatAIL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=4777:14016', {
+  variant: { Size: 'L' },
+  example: () => <ChatAIL />,
+});
+
+import PlugM from '@semcore/icon/Plug/m';
+figma.connect(PlugM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=4525:3', {
+  variant: { Size: 'M' },
+  example: () => <PlugM />,
+});
+
+import PlugL from '@semcore/icon/Plug/l';
+figma.connect(PlugL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=4525:3', {
+  variant: { Size: 'L' },
+  example: () => <PlugL />,
+});
+
+import PhoneM from '@semcore/icon/Phone/m';
+figma.connect(PhoneM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=4449:17', {
+  variant: { Size: 'M' },
+  example: () => <PhoneM />,
+});
+
+import PhoneL from '@semcore/icon/Phone/l';
+figma.connect(PhoneL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=4449:17', {
+  variant: { Size: 'L' },
+  example: () => <PhoneL />,
+});
+
+import ChatAltM from '@semcore/icon/ChatAlt/m';
+figma.connect(ChatAltM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=7871:5', {
+  variant: { Size: 'M' },
+  example: () => <ChatAltM />,
+});
+
+import ChatAltL from '@semcore/icon/ChatAlt/l';
+figma.connect(ChatAltL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=7871:5', {
+  variant: { Size: 'L' },
+  example: () => <ChatAltL />,
+});
+
+import StoriesAIM from '@semcore/icon/StoriesAI/m';
+figma.connect(StoriesAIM, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=4777:14018', {
+  variant: { Size: 'M' },
+  example: () => <StoriesAIM />,
+});
+
+import StoriesAIL from '@semcore/icon/StoriesAI/l';
+figma.connect(StoriesAIL, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=4777:14018', {
+  variant: { Size: 'L' },
+  example: () => <StoriesAIL />,
+});
+
+import AISEOToolkit from '@semcore/icon/platform/AISEOToolkit';
+figma.connect(AISEOToolkit, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=9122:13');
+
+import ContentToolkit from '@semcore/icon/platform/ContentToolkit';
+figma.connect(ContentToolkit, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=7779:174');
+
+import HomePlatform from '@semcore/icon/platform/HomePlatform';
+figma.connect(HomePlatform, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=7779:157');
+
+import LocalToolkit from '@semcore/icon/platform/LocalToolkit';
+figma.connect(LocalToolkit, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=7779:164');
+
+import PRToolkit from '@semcore/icon/platform/PRToolkit';
+figma.connect(PRToolkit, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=8465:7');
+
+import SocialToolkit from '@semcore/icon/platform/SocialToolkit';
+figma.connect(SocialToolkit, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=7779:166');
+
+import TrafficMarketToolkit from '@semcore/icon/platform/TrafficMarketToolkit';
+figma.connect(TrafficMarketToolkit, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=7779:162');
+
+import AppCenter from '@semcore/icon/platform/AppCenter';
+figma.connect(AppCenter, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=7779:172');
+
+import EnterpriseSolutions from '@semcore/icon/platform/EnterpriseSolutions';
+figma.connect(EnterpriseSolutions, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=8277:8');
+
+import AdsToolkit from '@semcore/icon/platform/AdsToolkit';
+figma.connect(AdsToolkit, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=7779:168');
+
+import SEOToolkit from '@semcore/icon/platform/SEOToolkit';
+figma.connect(SEOToolkit, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=7779:159');
+
+import AIToolkit from '@semcore/icon/platform/AIToolkit';
+figma.connect(AIToolkit, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=8151:15');
+
+import ReportsToolkit from '@semcore/icon/platform/ReportsToolkit';
+figma.connect(ReportsToolkit, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=7779:170');
diff --git a/figma/mappings/core-components/Accordion.figma.jsx b/figma/mappings/core-components/Accordion.figma.jsx
new file mode 100644
index 0000000000..fa4523aa6b
--- /dev/null
+++ b/figma/mappings/core-components/Accordion.figma.jsx
@@ -0,0 +1,72 @@
+import figma from '@figma/code-connect';
+import Accordion from '@semcore/ui/accordion';
+import { Box } from '@semcore/ui/base-components';
+
+const AccordionItemToggle = Accordion.Item.Toggle;
+const AccordionItemCollapse = Accordion.Item.Collapse;
+const AccordionItem = Accordion.Item;
+
+figma.connect(
+  AccordionItemToggle,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10085-55594', {
+    props: {
+      use: figma.enum('use', {
+        primary: 'primary',
+        secondary: 'secondary',
+      }),
+
+    },
+    example: () => (
+      <Accordion.Item.Toggle>
+        <Accordion.Item.ToggleButton>
+          <Accordion.Item.Chevron mr={2} />
+          {/* Add text */}
+        </Accordion.Item.ToggleButton>
+      </Accordion.Item.Toggle>
+    ),
+  });
+
+figma.connect(
+  AccordionItemCollapse,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactored--%E2%9D%96-Core-Components?node-id=13079-111795', {
+    props: {
+      content: figma.textContent('↳ text'),
+    },
+    example: ({ content }) => (
+      <Accordion.Item.Collapse>
+        <Box p='/* Set paddings */'>{content}</Box>
+      </Accordion.Item.Collapse>
+    ),
+  });
+
+figma.connect(
+  AccordionItem,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactored--%E2%9D%96-Core-Components?node-id=57405-3777', {
+    props: {
+      toggle: figma.children('Accordion.Item.Toggle'),
+      collapse: figma.children('Accordion.Item.Collapse'),
+    },
+    example: ({ toggle, collapse }) => (
+      <Accordion.Item>
+        {collapse}
+        {toggle}
+      </Accordion.Item>
+    ),
+  });
+
+figma.connect(
+  Accordion,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactored--%E2%9D%96-Core-Components?node-id=13079-111971', {
+    props: {
+      children: figma.children('Accordion.Item'),
+      use: figma.enum('use', {
+        primary: 'primary',
+        secondary: 'secondary',
+      }),
+    },
+    example: ({ children, use }) => (
+      <Accordion use={use}>
+        {children}
+      </Accordion>
+    ),
+  });
diff --git a/figma/mappings/core-components/Addon.figma.ts b/figma/mappings/core-components/Addon.figma.ts
new file mode 100644
index 0000000000..60eddebe22
--- /dev/null
+++ b/figma/mappings/core-components/Addon.figma.ts
@@ -0,0 +1,8 @@
+import { connect } from '../../src/connect';
+import type { ConnectSettings } from '../../src/connect';
+
+export const settings: ConnectSettings = {
+  example: connect.childrenCode(),
+  id: 'Addon',
+  url: 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=52416-8095',
+};
diff --git a/figma/mappings/core-components/Badge.figma.jsx b/figma/mappings/core-components/Badge.figma.jsx
new file mode 100644
index 0000000000..bc0d0b34a1
--- /dev/null
+++ b/figma/mappings/core-components/Badge.figma.jsx
@@ -0,0 +1,21 @@
+import figma from '@figma/code-connect/react';
+import Badge from '@semcore/ui/badge';
+
+figma.connect(
+  Badge,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/%E2%9D%96-Core-Components-(Refactoring)?node-id=10059-44175',
+  {
+    props: {
+      label: figma.textContent('↳ text'),
+      type: figma.enum('type', {
+        '🔵 admin': 'admin',
+        '🔴 alpha': 'alpha',
+        '🟠 beta': 'beta',
+        '🟢 new': 'new',
+        '⚫️ soon': 'soon',
+      }),
+      inverted: figma.boolean('inverted'),
+    },
+    example: ({ label, type, inverted }) => <Badge type={type} inverted={inverted}>{label}</Badge>,
+  },
+);
diff --git a/figma/mappings/core-components/BaseTrigger.figma.jsx b/figma/mappings/core-components/BaseTrigger.figma.jsx
new file mode 100644
index 0000000000..ba492d6236
--- /dev/null
+++ b/figma/mappings/core-components/BaseTrigger.figma.jsx
@@ -0,0 +1,129 @@
+import figma from '@figma/code-connect';
+import { LinkTrigger } from '@semcore/ui/base-trigger';
+import Select from '@semcore/ui/select';
+
+figma.connect(
+  LinkTrigger,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10733-114376&t=TXEgCxM6iJO0FYiJ-11',
+  {
+    variant: { '← addon': 'false', 'addon →': 'false', 'icon only': 'false' },
+    props: {
+      size: figma.enum('size', {
+        M: 'm',
+        L: 'l',
+      }),
+      placeholder: figma.textContent('↳ text'),
+      state: figma.enum('state', {
+        active: 'active',
+        invalid: 'invalid',
+        valid: 'valid',
+      }),
+      disabled: figma.enum('state', {
+        disabled: true,
+      }),
+      loading: figma.enum('state', {
+        loading: true,
+      }),
+    },
+    example: (props) => <Select tag={LinkTrigger} options={/* options */} {...props} />,
+  },
+);
+
+figma.connect(
+  LinkTrigger,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10733-114376&t=TXEgCxM6iJO0FYiJ-11',
+  {
+    variant: { 'icon only': 'false' },
+    props: {
+      size: figma.enum('size', {
+        M: 'm',
+        L: 'l',
+      }),
+      addonLeft: figma.enum('icon only', {
+        false: figma.boolean('← addon', {
+          true: <Select.Trigger.Addon>{/* addon */}</Select.Trigger.Addon>,
+        }),
+      }),
+      addonRight: figma.enum('icon only', {
+        false: figma.boolean('addon →', {
+          true: <Select.Trigger.Addon>{/* addon */}</Select.Trigger.Addon>,
+        }),
+      }),
+
+      content: figma.enum('icon only', {
+        false: figma.boolean('← addon', {
+          true: <Select.Trigger.Text>{/* text */}</Select.Trigger.Text>,
+          false: figma.boolean('addon →', {
+            true: <Select.Trigger.Text>{/* text */}</Select.Trigger.Text>,
+            false: '{/* text */}',
+          }),
+        }),
+      }),
+      text: figma.textContent('↳ text'),
+      state: figma.enum('state', {
+        active: 'active',
+        invalid: 'invalid',
+        valid: 'valid',
+      }),
+      disabled: figma.enum('state', {
+        disabled: true,
+      }),
+      loading: figma.enum('state', {
+        loading: true,
+      }),
+    },
+    example: ({ size, addonLeft, addonRight, content, state, loading, disabled }) => {
+      <Select tag={LinkTrigger} options={/* options */} size={size} state={state} loading={loading} disabled={disabled}>
+        <Select.Trigger>
+          {addonLeft}
+          {content}
+          {addonRight}
+        </Select.Trigger>
+        <Select.Menu hMax={/* value */}>
+          <Select.Option key={/* value */} value={/* value */}>
+            {/* option */}
+          </Select.Option>
+        </Select.Menu>
+      </Select>;
+    },
+  },
+);
+
+figma.connect(
+  LinkTrigger,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10733-114376&t=TXEgCxM6iJO0FYiJ-11',
+  {
+    variant: { 'icon only': 'true' },
+    props: {
+      size: figma.enum('size', {
+        M: 'm',
+        L: 'l',
+      }),
+      addonLeft: figma.children('← - - addon properties'),
+      state: figma.enum('state', {
+        active: 'active',
+        invalid: 'invalid',
+        valid: 'valid',
+      }),
+      disabled: figma.enum('state', {
+        disabled: true,
+      }),
+      loading: figma.enum('state', {
+        loading: true,
+      }),
+      title: figma.textContent('↳ title'),
+    },
+    example: ({ size, addonLeft, state, loading, disabled, title }) => (
+      <Select tag={LinkTrigger} options={/* options */} size={size} state={state} loading={loading} disabled={disabled} aria-label={title}>
+        <Select.Trigger>
+          <Select.Trigger.Addon>{addonLeft}</Select.Trigger.Addon>
+        </Select.Trigger>
+        <Select.Menu hMax={/* value */}>
+          <Select.Option key={/* value */} value={/* value */}>
+            {/* option */}
+          </Select.Option>
+        </Select.Menu>
+      </Select>
+    ),
+  },
+);
diff --git a/figma/mappings/core-components/Breadcrumbs.figma.ts b/figma/mappings/core-components/Breadcrumbs.figma.ts
new file mode 100644
index 0000000000..3e46c4c158
--- /dev/null
+++ b/figma/mappings/core-components/Breadcrumbs.figma.ts
@@ -0,0 +1,27 @@
+import { connect } from '../../src/connect';
+import type { ConnectSettings } from '../../src/connect';
+
+const first = connect.childCode('Home link', {
+  wrapper: 'Breadcrumbs.Item href="/"',
+});
+
+const second = connect.childCode('Toolkit link', {
+  wrapper: 'Breadcrumbs.Item href={/* url */}',
+});
+
+const third = connect.childCode('Product link', {
+  wrapper: 'Breadcrumbs.Item active',
+});
+
+const example = `
+<Breadcrumbs>
+  ${first}${second}${third}
+</Breadcrumbs>
+`;
+
+export const settings: ConnectSettings = {
+  example,
+  id: 'Breadcrumbs',
+  url: 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=11878-115146',
+  imports: ['import Breadcrumbs from "@semcore/ui/breadcrumbs"'],
+};
diff --git a/figma/mappings/core-components/BulkTextarea.figma.jsx b/figma/mappings/core-components/BulkTextarea.figma.jsx
new file mode 100644
index 0000000000..58dc88d123
--- /dev/null
+++ b/figma/mappings/core-components/BulkTextarea.figma.jsx
@@ -0,0 +1,50 @@
+import figma from '@figma/code-connect';
+import { Flex } from '@semcore/ui/base-components';
+import BulkTextarea from '@semcore/ui/bulk-textarea';
+import { Text } from '@semcore/ui/typography';
+
+// add placeholder somehow, for now Figma Code Connect doesn't see placeholder
+
+figma.connect(
+  BulkTextarea,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=48599-7546&t=tjfdRa8KRbX0lwpz-11',
+  {
+    props: {
+      // placeholder: figma.textContent('↳ text'),
+      label: figma.textContent('↳ label'),
+      size: figma.enum('size', {
+        M: 'm',
+        L: 'l',
+      }),
+      state: figma.enum('state', {
+        normal: 'normal',
+        invalid: 'invalid',
+      }),
+      readonly: figma.enum('state', {
+        'read-only': true,
+      }),
+    },
+
+    example: ({ size, readonly, label }) => (
+      <BulkTextarea
+        size={size}
+        readonly={readonly}
+        placeholder='/* Add your placeholder */'
+      >
+        <Flex alignItems='center' justifyContent='flex-start' mb={2} gap={1}>
+          <Text tag='label' size={/* font size */}>
+            {label}
+          </Text>
+          <BulkTextarea.Counter />
+        </Flex>
+        <BulkTextarea.InputField
+          commonErrorMessage={/* Add error message */}
+        />
+        <Flex alignItems='center' justifyContent='space-between' mt={2}>
+          <BulkTextarea.ErrorsNavigation />
+          <BulkTextarea.ClearAll />
+        </Flex>
+      </BulkTextarea>
+    ),
+  },
+);
diff --git a/figma/mappings/core-components/Button.figma.jsx b/figma/mappings/core-components/Button.figma.jsx
new file mode 100644
index 0000000000..4ffb86e679
--- /dev/null
+++ b/figma/mappings/core-components/Button.figma.jsx
@@ -0,0 +1,138 @@
+import figma from '@figma/code-connect/react';
+import Button from '@semcore/ui/button';
+import { Text } from '@semcore/ui/typography';
+
+// Need to add a variant for cases when dot is enabled
+
+figma.connect(
+  Button,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10043-43724&t=nVbIFrY5EvgteOqk-11',
+  {
+    variant: { 'icon only': 'false' },
+    props: {
+      size: figma.enum('size', {
+        L: 'l',
+        M: 'm',
+      }),
+      use: figma.enum('use', {
+        primary: 'primary',
+        secondary: 'secondary',
+        tertiary: 'tertiary',
+      }),
+      theme: figma.enum('theme', {
+        '🔵 info': 'info',
+        '🟢 success': 'success',
+        '🔴 danger': 'danger',
+        '⚫️ muted': 'muted',
+        '⚪️ invert': 'invert',
+      }),
+      active: figma.enum('state', {
+        active: true,
+      }),
+      loading: figma.enum('state', {
+        loading: true,
+      }),
+      disabled: figma.enum('state', {
+        disabled: true,
+      }),
+
+      // Cannot be used with the current structure.
+      // These mappings show instances and text content, but they are not working with conditional rendering for now. So I'm leaving them for possible future updates from Code Connect.
+      // label: figma.textContent('↳ text'),
+      // labelAddon: figma.textContent('↳ textAddon'),
+
+      // addonLeft: figma.boolean('← addon', {
+      //   true: figma.instance('← - - - addon'),
+      //   false: undefined,
+      // }),
+
+      // addonRight: figma.boolean('addon →', {
+      //   true: figma.instance('addon properties - - →'),
+      //   false: undefined,
+      // }),
+
+      // addonLeft: figma.boolean('← addon', {
+      //   true: <Button.Addon>{/* addon */}</Button.Addon>,
+      // }),
+
+      // addonRight: figma.boolean('addon →', {
+      //   true: <Button.Addon>{/* addon */}</Button.Addon>,
+      // }),
+
+      addonLeft: figma.enum('icon only', {
+        false: figma.boolean('← addon', {
+          true: <Button.Addon>{/* addon */}</Button.Addon>,
+        }),
+      }),
+      addonRight: figma.enum('icon only', {
+        false: figma.boolean('addon →', {
+          true: <Button.Addon>{/* addon */}</Button.Addon>,
+        }),
+      }),
+
+      content: figma.enum('icon only', {
+        false: figma.boolean('← addon', {
+          true: <Button.Text>{/* button label */}</Button.Text>,
+          false: figma.boolean('addon →', {
+            true: <Button.Text>{/* button label */}</Button.Text>,
+            false: '{/* button label */}',
+          }),
+        }),
+      }),
+
+      // For now, textAddon shows placeholder. Need to figure out how to show value from labelAddon here, and how to expand the component.
+      textAddon: figma.boolean('textAddon →', {
+        true: <Button.Addon><Text color='/* text-color-token */'>{/* text addon */}</Text></Button.Addon>,
+      }),
+    },
+
+    example: ({ size, use, theme, disabled, active, loading, addonLeft, content, textAddon, addonRight }) => (
+      <Button
+        size={size}
+        use={use}
+        theme={theme}
+        disabled={disabled}
+        active={active}
+        loading={loading}
+      >
+        {addonLeft}
+        {content}
+        {textAddon}
+        {addonRight}
+      </Button>
+    ),
+  },
+);
+
+figma.connect(Button, 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10043-43724&t=nVbIFrY5EvgteOqk-11', {
+  variant: { 'icon only': 'true' },
+  props: {
+    size: figma.enum('size', {
+      L: 'l',
+    }),
+    use: figma.enum('use', {
+      primary: 'primary',
+      tertiary: 'tertiary',
+    }),
+    theme: figma.enum('theme', {
+      '🔵 info': 'info',
+      '�� success': 'success',
+      '🔴 danger': 'danger',
+      '⚫️ muted': 'muted',
+      '⚪️ invert': 'invert',
+    }),
+    active: figma.enum('state', {
+      active: true,
+    }),
+    loading: figma.enum('state', {
+      loading: true,
+    }),
+    disabled: figma.enum('state', {
+      disabled: true,
+    }),
+    title: figma.textContent('↳ title'),
+  },
+  example: (props) => (
+    <Button {...props} addonLeft={/* icon name */} />
+  ),
+});
diff --git a/figma/mappings/core-components/ButtonLink.figma.ts b/figma/mappings/core-components/ButtonLink.figma.ts
new file mode 100644
index 0000000000..a21e8a2291
--- /dev/null
+++ b/figma/mappings/core-components/ButtonLink.figma.ts
@@ -0,0 +1,39 @@
+import { connect } from '../../src/connect';
+import type { ConnectSettings } from '../../src/connect';
+
+const addonLeft = connect.childCode('← - - addon properties', { wrapper: 'ButtonLink.Addon' });
+const addonRight = connect.childCode('addon properties - - →', { wrapper: 'ButtonLink.Addon' });
+
+const wrapper = addonLeft || addonRight
+  ? 'ButtonLink.Text'
+  : undefined;
+const text = connect.childCode('↳ text', { wrapper });
+
+const ariaLabel = text
+  ? undefined
+  : connect.formatProp('aria-label', connect.childCode('↳ title') ?? '/* short description */');
+
+const active = connect.getProp('state', 'hover & active') ? 'active' : undefined;
+const disabled = connect.getProp('state', 'disabled');
+const use = connect.getProp('use');
+
+const example = `
+<ButtonLink
+  ${ariaLabel}
+  ${use}
+  size={/* fontSize */}
+  color={/* color-token */}
+  ${active}
+  ${disabled}
+>
+${addonLeft}
+${text}
+${addonRight}
+</ButtonLink>
+`;
+export const settings: ConnectSettings = {
+  example,
+  id: 'ButtonLink',
+  url: 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=45638-2735',
+  imports: ['import { ButtonLink } from "@semcore/ui/button"'],
+};
diff --git a/figma/mappings/core-components/Card.figma.template.js b/figma/mappings/core-components/Card.figma.template.js
new file mode 100644
index 0000000000..35d1a547b1
--- /dev/null
+++ b/figma/mappings/core-components/Card.figma.template.js
@@ -0,0 +1,26 @@
+// https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10257-114780
+// import Card from '@semcore/ui/card'
+const figma = require('figma');
+const instance = figma.selectedInstance;
+
+const header = instance.findConnectedInstance('Card.Header');
+const headerCode = header.type === 'INSTANCE' ? header.executeTemplate().example : undefined;
+
+const layout = instance.getPropertyValue('layout');
+
+let content = '{/* content */}';
+if (layout === 'two sections') {
+  content = `<Flex gap={5}>${content}</Flex>`;
+}
+
+export default {
+  example: figma.tsx`
+<Card>
+  ${headerCode}
+  <Card.Body tag={Flex} gap={5} direction='column'>
+    ${content}
+  </Card.Body>
+</Card>
+  `,
+  id: 'Card',
+};
diff --git a/figma/mappings/core-components/CardHeader.figma.template.js b/figma/mappings/core-components/CardHeader.figma.template.js
new file mode 100644
index 0000000000..bc8118edca
--- /dev/null
+++ b/figma/mappings/core-components/CardHeader.figma.template.js
@@ -0,0 +1,57 @@
+// https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactored--%E2%9D%96-Core-Components?node-id=11793-136767
+// import Card from '@semcore/ui/card'
+// import { Flex } from '@semcore/ui/base-components'
+// import { Text } from '@semcore/ui/typography'
+const figma = require('figma');
+const instance = figma.selectedInstance;
+
+let titleCode;
+
+if (instance.getBoolean('title: text')) {
+  const titleText = instance.findText('title').textContent;
+  const titleText2 = instance.findText('title second line').textContent;
+  const hint = instance.getBoolean('title: informer', { true: 'hintAfter={/* tooltip text */}' });
+  const hintAria = instance.getBoolean('title: informer', { true: `hintAfterAriaLabel='About ${titleText}'` });
+  const num = instance.getBoolean('title: number', {
+    true: `<Text size={300} fontWeight={400} use='secondary' ml={1}>${instance.findText('num').textContent}</Text>`,
+  });
+
+  titleCode = figma.tsx`<Card.Title tag='h3' ${hint} ${hintAria}>
+  ${titleText} ${titleText2}
+  ${num}
+  </Card.Title>`;
+}
+
+const pillsCode = instance.getBoolean('title: pills', {
+  true: instance.findInstance('TitleControl').executeTemplate().example,
+});
+
+const rightControlsCode = instance.getBoolean('controls ->', {
+  true: '<Card.Description ml="auto">{/* right controls */}</Card.Description>',
+});
+
+const bottomControlsCode = instance.getBoolean('description ↓', {
+  true: '<Card.Description>{/* bottom controls */}</Card.Description>',
+});
+
+const needsFlex = !!titleCode + !!pillsCode + !!rightControlsCode > 1;
+
+const headerCode = bottomControlsCode
+  ? figma.tsx`<Card.Header tag={Flex} direction="column">
+  ${needsFlex ? '<Flex gap={2}>' : undefined}
+  ${titleCode}
+  ${pillsCode}
+  ${rightControlsCode}
+  ${needsFlex ? '</Flex>' : undefined}
+  ${bottomControlsCode}
+  </Card.Header>`
+  : figma.tsx`<Card.Header${needsFlex ? ' tag={Flex} gap={2}' : undefined}>
+  ${titleCode}
+  ${pillsCode}
+  ${rightControlsCode}
+</Card.Header>`;
+
+export default {
+  example: headerCode,
+  id: 'Card.Header',
+};
diff --git a/figma/mappings/core-components/CardSplit.figma.template.js b/figma/mappings/core-components/CardSplit.figma.template.js
new file mode 100644
index 0000000000..ed2e4b44fd
--- /dev/null
+++ b/figma/mappings/core-components/CardSplit.figma.template.js
@@ -0,0 +1,16 @@
+// https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=13578-112637
+const figma = require('figma');
+const children = figma.selectedInstance.findLayers(() => true);
+
+let code;
+
+children.forEach((child) => code = figma.tsx`${code}${child.executeTemplate().example}`);
+
+export default {
+  example: figma.tsx`
+<Flex>
+  ${code}
+</Flex>
+  `,
+  id: 'Card (split)',
+};
diff --git a/figma/mappings/core-components/CardTable.figma.template.js b/figma/mappings/core-components/CardTable.figma.template.js
new file mode 100644
index 0000000000..10ed3d8fdd
--- /dev/null
+++ b/figma/mappings/core-components/CardTable.figma.template.js
@@ -0,0 +1,30 @@
+// https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=55480-2824
+// import Card from '@semcore/ui/card'
+const figma = require('figma');
+const instance = figma.selectedInstance;
+
+const header = instance.findConnectedInstance('Card.Header');
+const headerCode = header.type === 'INSTANCE' ? header.executeTemplate().example : undefined;
+
+const topControls = instance.getBoolean('top controls');
+const bottomControls = instance.getBoolean('bottom controls');
+
+let paddings = '';
+
+if (!topControls)
+  paddings += ' pt={0}';
+
+if (!bottomControls)
+  paddings += ' pb={1}';
+
+export default {
+  example: figma.tsx`
+<Card>
+  ${headerCode}
+  <Card.Body tag={Flex} gap={5} direction='column' px={0} ${paddings}>
+    {/* content */}
+  </Card.Body>
+</Card>
+  `,
+  id: 'Card',
+};
diff --git a/figma/mappings/core-components/Carousel.figma.jsx b/figma/mappings/core-components/Carousel.figma.jsx
new file mode 100644
index 0000000000..2dad79f639
--- /dev/null
+++ b/figma/mappings/core-components/Carousel.figma.jsx
@@ -0,0 +1,56 @@
+import figma from '@figma/code-connect/react';
+import Carousel from '@semcore/ui/carousel';
+import { Flex } from '@semcore/ui/flex-box';
+
+figma.connect(
+  Carousel,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=56115-292306&t=7CEXrbu9XEfMUFlr-11',
+  {
+    variant: { 'screen width': '>480px' },
+    props: {
+      zoom: figma.boolean('zoom'),
+      indicators: figma.enum('indicators', {
+        default: 'default',
+        hide: 'hide',
+        preview: 'preview',
+      }),
+    },
+
+    example: ({ zoom, indicators }) => (
+      <Carousel
+        w={/* Set width */}
+        aria-roledescription='carousel'
+        aria-label={/* Set aria-label for the Carousel */}
+        zoom={zoom}
+        zoomWidth={/* Set zoom width */}
+        indicators={indicators}
+      >
+        {/* Add items here */}
+      </Carousel>
+    ),
+  },
+);
+
+figma.connect(
+  Carousel,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=56115-292306&t=7CEXrbu9XEfMUFlr-11',
+  {
+    variant: { 'screen width': '≤480px' },
+    props: {
+      zoom: figma.boolean('zoom'),
+    },
+
+    example: () => (
+      <Carousel>
+        <Carousel.Container>
+
+          {/* Add items here */}
+        </Carousel.Container>
+        <Flex gap={2}>
+          <Carousel.Prev />
+          <Carousel.Next />
+        </Flex>
+      </Carousel>
+    ),
+  },
+);
diff --git a/figma/mappings/core-components/Checkbox.figma.jsx b/figma/mappings/core-components/Checkbox.figma.jsx
new file mode 100644
index 0000000000..8542f59d37
--- /dev/null
+++ b/figma/mappings/core-components/Checkbox.figma.jsx
@@ -0,0 +1,69 @@
+import figma from '@figma/code-connect';
+import Checkbox from '@semcore/ui/checkbox';
+
+// ??? Throws error: "Code Connect UI mapping already exists for this node" ???
+
+// figma.connect(
+//   Checkbox.Value,
+//   'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10063-46164&t=B1622uxt4mPTLZzH-11',
+//   {
+//     props: {
+//       size: figma.enum('size', {
+//         L: 'l',
+//         M: 'm',
+//       }),
+//       checked: figma.boolean('checked'),
+//       indeterminate: figma.boolean('indeterminate'),
+//       invalid: figma.enum('state', {
+//         invalid: true,
+//       }),
+//     },
+//     example: ({ size, checked, indeterminate, invalid }) => (
+//       <Checkbox.Value size={size} checked={checked} indeterminate={indeterminate} invalid={invalid} />
+//     ),
+//   },
+// );
+
+figma.connect(
+  Checkbox,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10063-46204&t=B1622uxt4mPTLZzH-11',
+  {
+    props: {
+      label: figma.textContent('↳ text'),
+      size: figma.enum('size', {
+        L: 'l',
+        M: 'm',
+      }),
+      checked: figma.boolean('checked'),
+      indeterminate: figma.boolean('indeterminate'),
+      invalid: figma.enum('state', {
+        invalid: true,
+      }),
+      disabled: figma.enum('state', {
+        disabled: true,
+      }),
+      addonLeft: figma.boolean('← addon', {
+        true: figma.children('← - - addon properties'),
+        false: undefined,
+      }),
+      addonRight: figma.boolean('addon →', {
+        true: figma.children('addon properties - - →'),
+        false: undefined,
+      }),
+      textAddon: figma.boolean('textAddon →'),
+    },
+    example: ({ label, size, checked, indeterminate, invalid, disabled, addonLeft, addonRight, textAddon }) => (
+      <Checkbox
+        label={label}
+        size={size}
+        checked={checked}
+        indeterminate={indeterminate}
+        invalid={invalid}
+        disabled={disabled}
+      // addonLeft={addonLeft}
+      // addonRight={addonRight}
+      // textAddon={textAddon}
+      />
+    ),
+  },
+);
diff --git a/figma/mappings/core-components/CheckboxList.figma.jsx b/figma/mappings/core-components/CheckboxList.figma.jsx
new file mode 100644
index 0000000000..c7a8c999cf
--- /dev/null
+++ b/figma/mappings/core-components/CheckboxList.figma.jsx
@@ -0,0 +1,45 @@
+import figma from '@figma/code-connect';
+import { Flex } from '@semcore/ui/base-components';
+import Checkbox from '@semcore/ui/checkbox';
+
+figma.connect(
+  Flex,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring--%E2%9D%96-Core-Components?node-id=19530-124198&',
+  {
+    props: {
+      size: figma.enum('size', {
+        L: 'l',
+        M: 'm',
+      }),
+    },
+    example: ({ size }) => (
+      <Flex direction='column' gap={3}>
+        <Checkbox size={size} />
+      </Flex>
+    ),
+  },
+);
+
+figma.connect(
+  Flex,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10142-174621&',
+  {
+    props: {
+      size: figma.enum('size', {
+        L: 'l',
+        M: 'm',
+      }),
+      label: figma.nestedProps('Checkbox', {
+        label: figma.textContent('↳ text'),
+      }),
+    },
+    example: ({ size, label }) => (
+      <Flex direction='column' gap={3}>
+        <Checkbox size={size} label={label.label} />
+        <Flex direction='column' gap={3} ml={6}>
+          <Checkbox size={size} label={label.label} />
+        </Flex>
+      </Flex>
+    ),
+  },
+);
diff --git a/figma/mappings/core-components/ColorPicker.Popper.figma.ts b/figma/mappings/core-components/ColorPicker.Popper.figma.ts
new file mode 100644
index 0000000000..20531ddd73
--- /dev/null
+++ b/figma/mappings/core-components/ColorPicker.Popper.figma.ts
@@ -0,0 +1,27 @@
+import { connect } from '../../src/connect';
+import type { ConnectSettings } from '../../src/connect';
+
+const displayLabel = connect.children({ prop: 'text color', value: true }).length
+  ? 'displayLabel'
+  : undefined;
+
+const popperCode = connect.getBoolean('custom colors', {
+  true: `<ColorPicker.Popper>
+  <ColorPicker.Colors />
+  <PaletteManager />
+</ColorPicker.Popper>`,
+  false: '<ColorPicker.Popper />',
+});
+
+const example = `
+<ColorPicker ${displayLabel}>
+  <ColorPicker.Trigger />
+  ${popperCode}
+</ColorPicker>`;
+
+export const settings: ConnectSettings = {
+  example,
+  id: 'ColorPicker.Popper',
+  url: 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=56115-296347',
+  imports: ['import ColorPicker, { PaletteManager } from "@semcore/ui/color-picker"'],
+};
diff --git a/figma/mappings/core-components/ColorPicker.Trigger.figma.ts b/figma/mappings/core-components/ColorPicker.Trigger.figma.ts
new file mode 100644
index 0000000000..da08baed04
--- /dev/null
+++ b/figma/mappings/core-components/ColorPicker.Trigger.figma.ts
@@ -0,0 +1,15 @@
+import type { ConnectSettings } from '../../src/connect';
+
+const example = `<ColorPicker>
+  <ColorPicker.Trigger />
+  <ColorPicker.Popper>
+  {/* ColorPicker.Popper content */}
+  </ColorPicker.Popper>
+</ColorPicker>`;
+
+export const settings: ConnectSettings = {
+  example,
+  id: 'ColorPicker.Trigger',
+  url: 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=56115-294977',
+  imports: ['import ColorPicker from "@semcore/ui/color-picker"'],
+};
diff --git a/figma/mappings/core-components/Counter.figma.jsx b/figma/mappings/core-components/Counter.figma.jsx
new file mode 100644
index 0000000000..2cfb47a7a5
--- /dev/null
+++ b/figma/mappings/core-components/Counter.figma.jsx
@@ -0,0 +1,42 @@
+import figma from '@figma/code-connect';
+import Counter from '@semcore/ui/counter';
+
+figma.connect(
+  Counter,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10121-56141&t=Fgs2Jv2CPgCOdctF-11',
+  {
+    props: {
+      size: figma.enum('size', {
+        M: 'm',
+        L: 'l',
+        XL: 'xl',
+      }),
+      theme: figma.enum('theme', {
+        default: 'default',
+        info: 'info',
+        warning: 'warning',
+        danger: 'danger',
+        white: 'white',
+      }),
+      value: figma.textContent('↳ value'),
+    },
+    example: ({ size, theme, value }) => <Counter size={size} theme={theme}>{value}</Counter>,
+  },
+);
+
+// figma.connect(
+//   Counter,
+//   'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10121-56141&t=Fgs2Jv2CPgCOdctF-11',
+//   {
+//     variant: { theme: 'custom' },
+//     props: {
+//       size: figma.enum('size', {
+//         M: 'm',
+//         L: 'l',
+//         XL: 'xl',
+//       }),
+//       value: figma.textContent('↳ value'),
+//     },
+//     example: ({ size, value }) => <Counter size={size} theme='bg-primary-neutral'>{value}</Counter>,
+//   },
+// );
diff --git a/figma/mappings/core-components/DescriptionTooltip.jsx b/figma/mappings/core-components/DescriptionTooltip.jsx
new file mode 100644
index 0000000000..1d1eda324c
--- /dev/null
+++ b/figma/mappings/core-components/DescriptionTooltip.jsx
@@ -0,0 +1,38 @@
+import figma from '@figma/code-connect';
+import { DescriptionTooltip } from '@semcore/ui/tooltip';
+
+figma.connect(
+  DescriptionTooltip,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring--%E2%9D%96-Core-Components?node-id=51966-59511&t=0hjqYEp7RXqjnbR7-11',
+  {
+    props: {
+      nested: figma.nestedProps('Tooltip', {
+        theme: figma.enum('theme', {
+          '⚪️ default': 'default',
+          '⚫️ invert': 'invert',
+          '🔴 warning': 'warning',
+        }),
+      }),
+      ariaLabel: figma.textContent('aria-label prop'),
+      placement: figma.enum('placement', {
+        top: 'top',
+        bottom: 'bottom',
+        left: 'left',
+        right: 'right',
+      }),
+    },
+    example: ({ nested, placement, ariaLabel }) => (
+      <DescriptionTooltip theme={nested.theme} placement={placement}>
+        <DescriptionTooltip.Trigger
+          addonLeft={InfoM}
+          aria-label={ariaLabel}
+          tag={ButtonLink}
+          {...addonProps}
+        />
+        <DescriptionTooltip.Popper>
+          {/* Add content here */}
+        </DescriptionTooltip.Popper>
+      </DescriptionTooltip>
+    ),
+  },
+);
diff --git a/figma/mappings/core-components/Divider.figma.jsx b/figma/mappings/core-components/Divider.figma.jsx
new file mode 100644
index 0000000000..d045075a9b
--- /dev/null
+++ b/figma/mappings/core-components/Divider.figma.jsx
@@ -0,0 +1,21 @@
+import figma from '@figma/code-connect/react';
+import Divider from '@semcore/ui/divider';
+
+figma.connect(
+  Divider,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring--%E2%9D%96-Core-Components?node-id=11947-115134',
+  {
+    props: {
+      use: figma.enum('use', {
+        secondary: 'secondary',
+      }),
+      theme: figma.enum('theme', {
+        invert: 'invert',
+      }),
+      orientation: figma.enum('orientation', {
+        vertical: 'vertical',
+      }),
+    },
+    example: (props) => <Divider {...props} />,
+  },
+);
diff --git a/figma/mappings/core-components/DnD.figma.jsx b/figma/mappings/core-components/DnD.figma.jsx
new file mode 100644
index 0000000000..b208f2a37a
--- /dev/null
+++ b/figma/mappings/core-components/DnD.figma.jsx
@@ -0,0 +1,43 @@
+import figma from '@figma/code-connect';
+import MathPlusL from '@semcore/icon/MathPlus/l';
+import { Flex } from '@semcore/ui/base-components';
+import DnD from '@semcore/ui/drag-and-drop';
+import { Text } from '@semcore/ui/typography';
+
+figma.connect(
+  DnD,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=56115-292261&t=7CEXrbu9XEfMUFlr-11',
+  {
+    props: {
+      title: figma.textContent('↳ title'),
+      text: figma.textContent('↳ text'),
+    },
+    example: ({ title, text }) => (
+      <DnD aria-label={/* Add aria-label */}>
+        <DnD.DropZone
+          aria-label={/* Add aria-label */}
+          style={{
+            border: '1px dashed var(--intergalactic-border-primary',
+            borderRadius: 'var(--intergalactic-surface-rounded)',
+          }}
+        >
+          <Flex
+            alignItems='center'
+            gap={1}
+            justifyContent='center'
+          >
+            <Text color='text-secondary'>
+              <MathPlusL />
+            </Text>
+            <Text color='text-secondary' bold size={200}>
+              {title}
+            </Text>
+            <Text color='text-secondary' textAlign='center' size={200}>
+              {text}
+            </Text>
+          </Flex>
+        </DnD.DropZone>
+        {/* Add DnD.Draggable here */}
+      </DnD>
+    ),
+  });
diff --git a/figma/mappings/core-components/Dot.figma.jsx b/figma/mappings/core-components/Dot.figma.jsx
new file mode 100644
index 0000000000..22f2ac9833
--- /dev/null
+++ b/figma/mappings/core-components/Dot.figma.jsx
@@ -0,0 +1,20 @@
+import figma from '@figma/code-connect/react';
+import Dot from '@semcore/ui/dot';
+
+figma.connect(
+  Dot,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10129-56238&t=TXEgCxM6iJO0FYiJ-11',
+  {
+    props: {
+      size: figma.enum('size', {
+        M: 'm',
+        L: 'l',
+      }),
+      value: figma.boolean('value', {
+        true: figma.textContent('↳ value'),
+        false: undefined,
+      }),
+    },
+    example: ({ size, value }) => <Dot up aria-label='/* Add aria-label */' id='/* Add id for a control that should be described by the Dot*/' size={size} value={value} />,
+  },
+);
diff --git a/figma/mappings/core-components/Dropdown.figma.jsx b/figma/mappings/core-components/Dropdown.figma.jsx
new file mode 100644
index 0000000000..e20b913699
--- /dev/null
+++ b/figma/mappings/core-components/Dropdown.figma.jsx
@@ -0,0 +1,32 @@
+import figma from '@figma/code-connect';
+import Dropdown from '@semcore/ui/dropdown';
+import { Flex } from '@semcore/ui/flex-box';
+import { Text } from '@semcore/ui/typography';
+
+figma.connect(
+  Dropdown,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=55431-11754&t=7CEXrbu9XEfMUFlr-11',
+  {
+    props: {
+      actions: figma.children('Button'),
+      children: figma.children('*'),
+      title: figma.textContent('↳ title'),
+      content: figma.textContent('↳ text'),
+    },
+    example: ({ title, content, children, actions }) => (
+      <Dropdown>
+        <Dropdown.Trigger id='/* id */' tag={Button}>
+          {/* Trigger label */}
+        </Dropdown.Trigger>
+        <Dropdown.Popper p={4} wMax={260} aria-labelledby='/* id */'>
+          <Text size={300} bold mb={1}>{title}</Text>
+          <Text size={200}>{content}</Text>
+          <Flex gap={2} mt={4}>
+            {actions}
+          </Flex>
+          {children}
+        </Dropdown.Popper>
+      </Dropdown>
+    ),
+  },
+);
diff --git a/figma/mappings/core-components/DropdownMenu.Group.figma.jsx b/figma/mappings/core-components/DropdownMenu.Group.figma.jsx
new file mode 100644
index 0000000000..3a10e13126
--- /dev/null
+++ b/figma/mappings/core-components/DropdownMenu.Group.figma.jsx
@@ -0,0 +1,25 @@
+import figma from '@figma/code-connect';
+import DropdownMenu from '@semcore/ui/dropdown-menu';
+
+figma.connect(
+  DropdownMenu.Group,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=47909-9527&t=7CEXrbu9XEfMUFlr-11',
+  {
+    props: {
+      size: figma.enum('size', {
+        M: 'm',
+        L: 'l',
+      }),
+      title: figma.textContent('↳ title'),
+      subTitle: figma.boolean('subTitle', {
+        true: figma.textContent('↳ subTitle'),
+        false: undefined,
+      }),
+    },
+    example: ({ size, title, subTitle }) => (
+      <DropdownMenu.Group size={size} title={title} subTitle={subTitle}>
+        {/* items */}
+      </DropdownMenu.Group>
+    ),
+  },
+);
diff --git a/figma/mappings/core-components/DropdownMenu.Item.figma.jsx b/figma/mappings/core-components/DropdownMenu.Item.figma.jsx
new file mode 100644
index 0000000000..4c85b2a549
--- /dev/null
+++ b/figma/mappings/core-components/DropdownMenu.Item.figma.jsx
@@ -0,0 +1,135 @@
+import figma from '@figma/code-connect';
+import DropdownMenu from '@semcore/ui/dropdown-menu';
+
+// TODO: Add addons
+// DropdownMenu.Item/Default without hint
+
+figma.connect(
+  DropdownMenu.Item,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=47952-14382',
+  {
+    variant: { 'hint': 'false', 'actions →': 'false' },
+    props: {
+      content: figma.textContent('↳ text'),
+      selected: figma.enum('state', {
+        selected: true,
+      }),
+      disabled: figma.enum('state', {
+        disabled: true,
+      }),
+    },
+    example: ({ content, selected, disabled }) => (
+      <DropdownMenu.Item value={/* value */} selected={selected} disabled={disabled}>
+        {content}
+      </DropdownMenu.Item>
+    ),
+  },
+);
+
+figma.connect(
+  DropdownMenu.Item,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=47952-14382',
+  {
+    variant: { 'hint': 'false', 'actions →': 'true' },
+    props: {
+      content: figma.textContent('↳ text'),
+      selected: figma.enum('state', {
+        selected: true,
+      }),
+      disabled: figma.enum('state', {
+        disabled: true,
+      }),
+    },
+    example: ({ content, selected, disabled }) => (
+      <DropdownMenu.Item value={/* value */} selected={selected} disabled={disabled}>
+        <DropdownMenu.Item.Content tag={DropdownMenu.Trigger}>
+          {content}
+        </DropdownMenu.Item.Content>
+        <DropdownMenu.Actions gap={1}>
+          <DropdownMenu.Item tag={Button} addonLeft={/* Add addon */} title='/* Add title */' />
+          <DropdownMenu.Item tag={Button} addonLeft={/* Add addon */} title='/* Add title */' />
+        </DropdownMenu.Actions>
+      </DropdownMenu.Item>
+    ),
+  },
+);
+
+// DropdownMenu.Item with hint
+
+figma.connect(
+  DropdownMenu.Item,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=47952-14382',
+  {
+    variant: { hint: 'true' },
+    props: {
+      content: figma.textContent('↳ text'),
+      selected: figma.enum('state', {
+        selected: true,
+      }),
+      disabled: figma.enum('state', {
+        disabled: true,
+      }),
+      hint: figma.textContent('↳ hint'),
+    },
+    example: ({ content, selected, disabled, hint }) => (
+      <DropdownMenu.Item value={/* value */} selected={selected} disabled={disabled}>
+        <DropdownMenu.Item.Content>
+          <DropdownMenu.Item.Text>{content}</DropdownMenu.Item.Text>
+        </DropdownMenu.Item.Content>
+        <DropdownMenu.Item.Hint>{hint}</DropdownMenu.Item.Hint>
+      </DropdownMenu.Item>
+    ),
+  },
+);
+
+// DropdownMenu.Item with checkbox without hint
+
+figma.connect(
+  DropdownMenu.Item,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=47952-14045',
+  {
+    variant: { hint: 'false' },
+    props: {
+      content: figma.textContent('↳ text'),
+      selected: figma.enum('state', {
+        selected: true,
+      }),
+      disabled: figma.enum('state', {
+        disabled: true,
+      }),
+    },
+    example: ({ content, selected, disabled }) => (
+      <DropdownMenu.Item key={/* key */} selected={selected} disabled={disabled} role='menuitemradio'>
+        {content}
+      </DropdownMenu.Item>
+    ),
+  },
+);
+
+// DropdownMenu.Item with checkbox and hint
+
+figma.connect(
+  DropdownMenu.Item,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=47952-14045',
+  {
+    variant: { hint: 'true' },
+    props: {
+      content: figma.textContent('↳ text'),
+      selected: figma.enum('state', {
+        selected: true,
+      }),
+      disabled: figma.enum('state', {
+        disabled: true,
+      }),
+      hint: figma.textContent('↳ hint'),
+    },
+    example: ({ content, selected, disabled, hint }) => (
+      <DropdownMenu.Item key={/* key */} selected={selected} disabled={disabled}>
+        <DropdownMenu.Item.Content>
+          <DropdownMenu.Item.Text>{content}</DropdownMenu.Item.Text>
+        </DropdownMenu.Item.Content>
+        <DropdownMenu.Item.Hint>{hint}</DropdownMenu.Item.Hint>
+      </DropdownMenu.Item>
+    ),
+  },
+);
diff --git a/figma/mappings/core-components/DropdownMenu.figma.jsx b/figma/mappings/core-components/DropdownMenu.figma.jsx
new file mode 100644
index 0000000000..c71868955c
--- /dev/null
+++ b/figma/mappings/core-components/DropdownMenu.figma.jsx
@@ -0,0 +1,22 @@
+import figma from '@figma/code-connect';
+import DropdownMenu from '@semcore/ui/dropdown-menu';
+
+figma.connect(
+  DropdownMenu.Menu,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactored--%E2%9D%96-Core-Components?node-id=57511-1988',
+  {
+    props: {
+      size: figma.enum('size', {
+        M: 'm',
+        L: 'l',
+      }),
+      children: figma.children('*'),
+    },
+
+    example: ({ size, children }) => (
+      <DropdownMenu.Menu size={size} hMax='/* value */'>
+        {children}
+      </DropdownMenu.Menu>
+    ),
+  },
+);
diff --git a/figma/mappings/core-components/FeaturePopover.figma.tsx b/figma/mappings/core-components/FeaturePopover.figma.tsx
new file mode 100644
index 0000000000..8932705092
--- /dev/null
+++ b/figma/mappings/core-components/FeaturePopover.figma.tsx
@@ -0,0 +1,56 @@
+import figma from '@figma/code-connect/react';
+import FeaturePopover from '@semcore/ui/feature-popover';
+import { Text } from '@semcore/ui/typography';
+
+figma.connect(
+  FeaturePopover,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=52334-2678&t=B1622uxt4mPTLZzH-11',
+
+  {
+    props: {
+      theme: figma.enum('theme', {
+        accent: 'accent',
+        neutral: 'neutral',
+      }),
+      text: figma.textContent('↳ text'),
+      title: figma.textContent('↳ title'),
+      actions: figma.children('Button'),
+      placement: figma.nestedProps('placement', {
+        placement: figma.enum('placement', {
+          'top-start': 'top-start',
+          'top': 'top',
+          'top-end': 'top-end',
+          'right-start': 'right-start',
+          'right': 'right',
+          'right-end': 'right-end',
+          'bottom-start': 'bottom-start',
+          'bottom': 'bottom',
+          'bottom-end': 'bottom-end',
+          'left-start': 'left-start',
+          'left': 'left',
+          'left-end': 'left-end',
+        }),
+      }),
+    },
+    example: ({ theme, placement, text, title, actions }) => (
+      <FeaturePopover theme={theme} placement={placement.placement}>
+        <FeaturePopover.Trigger>
+          {/* Add trigger */}
+        </FeaturePopover.Trigger>
+        <FeaturePopover.Popper
+          aria-label='/* Add aria-label */'
+          closeIcon
+          wMax={250}
+        >
+          <Text size={300} bold tag='h3' mb={1} mt={0}>
+            {title}
+          </Text>
+          <Text mb={4} size={200} tag='p'>
+            {text}
+          </Text>
+          {actions}
+        </FeaturePopover.Popper>
+      </FeaturePopover>
+    ),
+  },
+);
diff --git a/figma/mappings/core-components/FeedbackForm.figma.jsx b/figma/mappings/core-components/FeedbackForm.figma.jsx
new file mode 100644
index 0000000000..286c16d79b
--- /dev/null
+++ b/figma/mappings/core-components/FeedbackForm.figma.jsx
@@ -0,0 +1,88 @@
+import figma from '@figma/code-connect';
+import { Flex, Box } from '@semcore/ui/base-components';
+import FeedbackForm from '@semcore/ui/feedback-form';
+import Input from '@semcore/ui/input';
+import Link from '@semcore/ui/link';
+import Textarea from '@semcore/ui/textarea';
+import { Text } from '@semcore/ui/typography';
+
+// Not a flexible mapping, but I don't think teams need to customize it much
+
+figma.connect(
+  FeedbackForm,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=56115-298563&t=7CEXrbu9XEfMUFlr-11', {
+
+    example: () => (
+      <FeedbackForm loading={loading}>
+        <Box p={4}>
+          <Flex direction='column'>
+            <Text mb={2} size={200} tag='label' htmlFor='description'>
+              {/* Add label for textarea */}
+            </Text>
+            <FeedbackForm.Item
+              name='description'
+              validate={validate.description}
+              initialValue=''
+              placement='left-start'
+              flip={{
+                fallbackPlacements: ['right-start', 'bottom'],
+              }}
+              validateOnBlur={value.description === '' ? false : true}
+            >
+              {({ input }) => (
+                <Textarea
+                  {...input}
+                  autoFocus
+                  h={80}
+                  onChange={this.handleChange(input.onChange)}
+                  id='description'
+                />
+              )}
+            </FeedbackForm.Item>
+          </Flex>
+          <Flex mt={4} direction='column'>
+            <Text mb={2} size={200} tag='label' htmlFor='email'>
+              Reply-to email
+            </Text>
+            <FeedbackForm.Item
+              name='email'
+              validate={validate.email}
+              initialValue=''
+              validateOnBlur={value.email === '' ? false : true}
+            >
+              {({ input }) => (
+                <Input state={input.state}>
+                  <Input.Value
+                    {...input}
+                    onChange={this.handleChange(input.onChange)}
+                    id='email'
+                    type='email'
+                    autoComplete='email'
+                    aria-describedby='email-description'
+                  />
+                </Input>
+              )}
+            </FeedbackForm.Item>
+          </Flex>
+          <Box mt={2}>
+            <Text size={200} color='text-secondary' id='email-description'>
+              {/* Add hint for input */}
+            </Text>
+          </Box>
+          <Flex mt={4}>
+            <FeedbackForm.Submit>Send feedback</FeedbackForm.Submit>
+            <FeedbackForm.Cancel onClick={onCancel}>Cancel</FeedbackForm.Cancel>
+          </Flex>
+        </Box>
+        <FeedbackForm.Notice hidden={status === 'failed'}>
+          You can also send us an email to
+          {' '}
+          <Link>backlink.audit@semrush.com</Link>
+        </FeedbackForm.Notice>
+        <FeedbackForm.Notice hidden={status !== 'failed'} theme='danger'>
+          Your message has not been sent.
+        </FeedbackForm.Notice>
+      </FeedbackForm>
+    ),
+  },
+);
diff --git a/figma/mappings/core-components/FeedbackRating.figma.jsx b/figma/mappings/core-components/FeedbackRating.figma.jsx
new file mode 100644
index 0000000000..c599de22b0
--- /dev/null
+++ b/figma/mappings/core-components/FeedbackRating.figma.jsx
@@ -0,0 +1,98 @@
+import figma from '@figma/code-connect';
+import { FeedbackRating } from '@semcore/ui/feedback-form';
+import Link from '@semcore/ui/link';
+
+// The base components are commented out because currently we are not rendering them separately from the FeedbackRating component
+
+// figma.connect(
+//     SliderRating.Star,
+//     'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=56115-298578&t=7CEXrbu9XEfMUFlr-11', {
+//     example: () => (
+//         <SliderRating.Star />
+//     )
+// });
+
+// figma.connect(
+//     SliderRating,
+//     'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=56115-298578&t=7CEXrbu9XEfMUFlr-11', {
+//     variant: { 'value': '1,2,3,4,5' },
+//     props: {
+//         value: figma.number('value'),
+//     },
+//     example: ({ value }) => (
+//         <SliderRating value={value} />
+//     )
+// });
+
+// figma.connect(
+//     FeedbackRatingForm.Checkbox,
+//     'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=56115-298578&t=7CEXrbu9XEfMUFlr-11', {
+//     props: {
+//         label: figma.textContent('↳ text'),
+//     },
+//     example: ({ label }) => (
+//         <FeedbackRatingForm.Checkbox label={label} />
+//     )
+// });
+
+figma.connect(
+  FeedbackRating,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=56115-298638&t=7CEXrbu9XEfMUFlr-11', {
+    variant: { state: 'Notice' },
+    props: {
+      // notificationTitle: figma.boolean('notification title', {
+      //     true: figma.textContent('↳ title'),
+      //     false: undefined,
+      // }),
+      // notificationText: figma.textContent('↳ text'),
+      learnMoreLink: figma.boolean('Learn more link', {
+        true: figma.children('Link'),
+        false: undefined,
+      }),
+    },
+    example: ({ notificationTitle, notificationText, learnMoreLink }) => (
+      <FeedbackRating
+        notificationTitle={/* notificationTitle */}
+        notificationText={/* notificationText */}
+        learnMoreLink={/* Set URL */}
+        header={/* Add Modal title */}
+        submitText={/* Add Modal submit button text */}
+        formConfig={/* Add form config */}
+        description={(
+          <>
+            We will only use this email to respond to you on your feedback.
+            {' '}
+            {learnMoreLink}
+          </>
+        )}
+      />
+    ),
+  });
+
+figma.connect(
+  FeedbackRating,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=56115-298638&t=7CEXrbu9XEfMUFlr-11', {
+    variant: { state: 'Form' },
+    props: {
+      header: figma.textContent('↳ title'),
+    },
+    example: ({ header }) => (
+      <FeedbackRating
+        notificationTitle={/* notificationTitle */}
+        notificationText={/* notificationText */}
+        learnMoreLink={/* Set URL */}
+        header={header}
+        submitText={/* Add Modal submit button text */}
+        formConfig={/* Add form config */}
+        description={(
+          <>
+            We will only use this email to respond to you on your feedback.
+            {' '}
+            <Link href='https://www.semrush.com/company/legal/privacy-policy/'>
+              Privacy Policy
+            </Link>
+          </>
+        )}
+      />
+    ),
+  });
diff --git a/figma/mappings/core-components/FilterTrigger.figma.jsx b/figma/mappings/core-components/FilterTrigger.figma.jsx
new file mode 100644
index 0000000000..5deb5abc10
--- /dev/null
+++ b/figma/mappings/core-components/FilterTrigger.figma.jsx
@@ -0,0 +1,187 @@
+import figma from '@figma/code-connect';
+import { ScreenReaderOnly } from '@semcore/ui/base-components';
+import { FilterTrigger } from '@semcore/ui/base-trigger';
+import Dropdown from '@semcore/ui/dropdown';
+import Select from '@semcore/ui/select';
+
+// Normal variants
+
+figma.connect(
+  FilterTrigger,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10191-98848&t=5rMgxkZbFCPoIXFH-11',
+  {
+    variant: { state: 'normal', Counter: 'false', Dot: 'false' },
+    props: {
+      size: figma.enum('size', {
+        M: 'm',
+        L: 'l',
+      }),
+      placeholder: figma.textContent('↳ text'),
+    },
+    example: ({ size, placeholder }) => (
+      <Select.Trigger tag={FilterTrigger} size={size} placeholder={placeholder} />
+    ),
+  },
+);
+
+figma.connect(
+  FilterTrigger,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10191-98848&t=5rMgxkZbFCPoIXFH-11',
+  {
+    variant: { state: 'normal', Counter: 'false', Dot: 'true' },
+    props: {
+      size: figma.enum('size', {
+        M: 'm',
+        L: 'l',
+      }),
+      placeholder: figma.textContent('↳ text'),
+      dot: figma.boolean('Dot', {
+        true: figma.children('Dot'),
+        false: undefined,
+      }),
+    },
+    example: ({ size, placeholder, dot }) => (
+      <Select.Trigger tag={FilterTrigger} size={size} placeholder={placeholder}>
+        {dot}
+      </Select.Trigger>
+    ),
+  },
+);
+
+// Variants without addons
+
+figma.connect(
+  FilterTrigger,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10191-98848&t=5rMgxkZbFCPoIXFH-11',
+  {
+    variant: { 'Counter': 'false', '← addon': 'false' },
+    props: {
+      size: figma.enum('size', {
+        M: 'm',
+        L: 'l',
+      }),
+      active: figma.enum('state', {
+        active: true,
+      }),
+      placeholder: figma.textContent('↳ text'),
+      dot: figma.boolean('Dot', {
+        true: figma.children('Dot'),
+        false: undefined,
+      }),
+    },
+    example: ({ size, placeholder, active, dot }) => (
+      <Select.Trigger tag={FilterTrigger} size={size} state={active} placeholder={placeholder}>
+        <span aria-hidden>{placeholder}</span>
+        {dot}
+      </Select.Trigger>
+    ),
+  },
+);
+
+figma.connect(
+  FilterTrigger,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10191-98848&t=5rMgxkZbFCPoIXFH-11',
+  {
+    variant: { 'Counter': 'true', '← addon': 'false' },
+    props: {
+      size: figma.enum('size', {
+        M: 'm',
+        L: 'l',
+      }),
+      active: figma.enum('state', {
+        active: true,
+      }),
+      placeholder: figma.textContent('↳ text'),
+      dot: figma.boolean('Dot', {
+        true: figma.children('Dot'),
+        false: undefined,
+      }),
+    },
+    example: ({ size, placeholder, active, dot }) => (
+      <Dropdown.Trigger placeholder={placeholder} tag={FilterTrigger}>
+        <FilterTrigger.TriggerButton size={size} state={active}>
+          <FilterTrigger.Text aria-hidden>{placeholder}</FilterTrigger.Text>
+          <FilterTrigger.Counter>
+            <ScreenReaderOnly>applied</ScreenReaderOnly>
+          </FilterTrigger.Counter>
+          {dot}
+        </FilterTrigger.TriggerButton>
+        <FilterTrigger.ClearButton title='Clear advanced filters' />
+      </Dropdown.Trigger>
+    ),
+  },
+);
+
+// Variants with addons
+
+figma.connect(
+  FilterTrigger,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10191-98848&t=5rMgxkZbFCPoIXFH-11',
+  {
+    variant: { 'Counter': 'false', '← addon': 'true' },
+    props: {
+      size: figma.enum('size', {
+        M: 'm',
+        L: 'l',
+      }),
+      addonLeft: figma.boolean('← addon', {
+        true: figma.children('← - - addon properties'),
+        false: undefined,
+      }),
+      active: figma.enum('state', {
+        active: true,
+      }),
+      placeholder: figma.textContent('↳ text'),
+      dot: figma.boolean('Dot', {
+        true: figma.children('Dot'),
+        false: undefined,
+      }),
+    },
+    example: ({ size, placeholder, active, dot, addonLeft }) => (
+      <Select.Trigger tag={FilterTrigger} size={size} state={active} placeholder={placeholder}>
+        <Select.Trigger.Addon>{addonLeft}</Select.Trigger.Addon>
+        <span aria-hidden>{placeholder}</span>
+        {dot}
+      </Select.Trigger>
+    ),
+  },
+);
+
+figma.connect(
+  FilterTrigger,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10191-98848&t=5rMgxkZbFCPoIXFH-11',
+  {
+    variant: { 'Counter': 'true', '← addon': 'true' },
+    props: {
+      size: figma.enum('size', {
+        M: 'm',
+        L: 'l',
+      }),
+      active: figma.enum('state', {
+        active: true,
+      }),
+      addonLeft: figma.boolean('← addon', {
+        true: figma.children('← - - addon properties'),
+        false: undefined,
+      }),
+      placeholder: figma.textContent('↳ text'),
+      dot: figma.boolean('Dot', {
+        true: figma.children('Dot'),
+        false: undefined,
+      }),
+    },
+    example: ({ size, placeholder, active, dot, addonLeft }) => (
+      <Dropdown.Trigger placeholder={placeholder} tag={FilterTrigger}>
+        <FilterTrigger.TriggerButton size={size} state={active}>
+          <FilterTrigger.Addon>{addonLeft}</FilterTrigger.Addon>
+          <FilterTrigger.Text aria-hidden>{placeholder}</FilterTrigger.Text>
+          <FilterTrigger.Counter>
+            <ScreenReaderOnly>applied</ScreenReaderOnly>
+          </FilterTrigger.Counter>
+          {dot}
+        </FilterTrigger.TriggerButton>
+        <FilterTrigger.ClearButton title='Clear advanced filters' />
+      </Dropdown.Trigger>
+    ),
+  },
+);
diff --git a/figma/mappings/core-components/Flags.figma.jsx b/figma/mappings/core-components/Flags.figma.jsx
new file mode 100644
index 0000000000..11b4bff08a
--- /dev/null
+++ b/figma/mappings/core-components/Flags.figma.jsx
@@ -0,0 +1,10 @@
+import figma from '@figma/code-connect';
+import Flags from '@semcore/ui/flags';
+
+figma.connect(
+  Flags,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=32767-192692',
+  {
+    example: () => <Flags iso2={/* value */} />,
+  },
+);
diff --git a/figma/mappings/core-components/FullscreenModal.figma.jsx b/figma/mappings/core-components/FullscreenModal.figma.jsx
new file mode 100644
index 0000000000..f0a9ebfe5d
--- /dev/null
+++ b/figma/mappings/core-components/FullscreenModal.figma.jsx
@@ -0,0 +1,47 @@
+import figma from '@figma/code-connect/react';
+import FullscreenModal from '@semcore/ui/fullscreen-modal';
+
+figma.connect(
+  FullscreenModal.Header,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10976-128065',
+  {
+    props: {
+      title: figma.textContent('↳ title'),
+      description: figma.textContent('↳ description'),
+    },
+    example: ({ title, description }) => (
+      <FullscreenModal.Header title={title} description={description} />
+    ),
+  },
+);
+
+figma.connect(
+  FullscreenModal.Footer,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10269-107418',
+  {
+    props: {
+      children: figma.children('Button'),
+    },
+    example: ({ children }) => <FullscreenModal.Footer justifyContent='center' alignItems='center' gap={3}>{children}</FullscreenModal.Footer>,
+  },
+);
+
+figma.connect(
+  FullscreenModal,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactored--%E2%9D%96-Core-Components?node-id=10269-111996',
+  {
+    props: {
+      childrenHeader: figma.children('FullscreenModal.Header'),
+      childrenFooter: figma.children('FullscreenModal.Footer'),
+    },
+    example: ({ childrenHeader, childrenFooter }) => (
+      <FullscreenModal>
+        <FullscreenModal.Close />
+        <FullscreenModal.Back>{/* Add button label */}</FullscreenModal.Back>
+        {childrenHeader}
+        <FullscreenModal.Body>{/* content */}</FullscreenModal.Body>
+        {childrenFooter}
+      </FullscreenModal>
+    ),
+  },
+);
diff --git a/figma/mappings/core-components/Hint.figma.jsx b/figma/mappings/core-components/Hint.figma.jsx
new file mode 100644
index 0000000000..42c7b75e4a
--- /dev/null
+++ b/figma/mappings/core-components/Hint.figma.jsx
@@ -0,0 +1,36 @@
+import figma from '@figma/code-connect';
+import Hint from '@semcore/ui/hint';
+
+figma.connect(
+  Hint,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactored--%E2%9D%96-Core-Components?node-id=45323-1531',
+  {
+    props: {
+      title: figma.textContent('↳ text'),
+      placement: figma.nestedProps('placement', {
+        placement: figma.enum('placement', {
+          'top-start': 'top-start',
+          'top-end': 'top-end',
+          'top': 'top',
+          'bottom-start': 'bottom-start',
+          'bottom-end': 'bottom-end',
+          'bottom': 'bottom',
+          'left': 'left',
+          'left-start': 'left-start',
+          'left-end': 'left-end',
+          'right': 'right',
+          'right-start': 'right-start',
+          'right-end': 'right-end',
+        }),
+      }),
+    },
+    example: ({ title, placement }) => (
+      <Hint
+        title={title}
+        placement={placement.placement}
+        tag={addonTag}
+        {...addonProps}
+      />
+    ),
+  },
+);
diff --git a/figma/mappings/core-components/InlineInput.figma.jsx b/figma/mappings/core-components/InlineInput.figma.jsx
new file mode 100644
index 0000000000..0b30bc78fa
--- /dev/null
+++ b/figma/mappings/core-components/InlineInput.figma.jsx
@@ -0,0 +1,41 @@
+import figma from '@figma/code-connect/react';
+import InlineInput from '@semcore/ui/inline-input';
+
+figma.connect(
+  InlineInput.Value,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=53372-292643&t=I48qqNRyVr8Tdi87-11',
+  {
+    props: {
+      value: figma.textContent('↳ text'),
+    },
+    example: ({ value }) => <InlineInput.Value autoFocus placeholder={value} id='/* id */' />,
+  },
+);
+
+figma.connect(
+  InlineInput,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=17000-123421&t=I48qqNRyVr8Tdi87-11',
+  {
+    props: {
+      state: figma.enum('state', {
+        invalid: 'invalid',
+        valid: 'valid',
+      }),
+      loading: figma.enum('state', {
+        loading: true,
+      }),
+      addonLeft: figma.boolean('← addon', {
+        true: <InlineInput.Addon>{/* addon */}</InlineInput.Addon>,
+      }),
+      value: figma.children('InlineInput.Value'),
+    },
+    example: ({ state, addonLeft, value, loading }) => (
+      <InlineInput state={state} loading={loading}>
+        {addonLeft}
+        {value}
+        <InlineInput.ConfirmControl />
+        <InlineInput.CancelControl />
+      </InlineInput>
+    ),
+  },
+);
diff --git a/figma/mappings/core-components/Input.figma.jsx b/figma/mappings/core-components/Input.figma.jsx
new file mode 100644
index 0000000000..3a3862610b
--- /dev/null
+++ b/figma/mappings/core-components/Input.figma.jsx
@@ -0,0 +1,193 @@
+import figma from '@figma/code-connect/react';
+import CloseM from '@semcore/icon/Close/m';
+import { Flex } from '@semcore/ui/base-components';
+import { ButtonLink } from '@semcore/ui/button';
+import Input from '@semcore/ui/input';
+import { Text } from '@semcore/ui/typography';
+
+// Need somehow to get the readOnly and disabled props from the Input component
+// and pass it to the Input.Value component
+
+figma.connect(
+  Input.Value,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=52263-2252',
+  {
+    props: {
+      value: figma.textContent('↳ text'),
+    },
+    example: ({ value }) => <Input.Value placeholder={value} id='/* id */' />,
+  },
+);
+
+figma.connect(
+  Flex,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactored--%E2%9D%96-Core-Components?node-id=56781-2200',
+  {
+    variant: {
+      'label position': 'top',
+    },
+    props: {
+      label: figma.textContent('↳ label'),
+      addon: figma.children('*'),
+      optional: figma.boolean('optional', {
+        true: (
+          <Text size='/* fontSize */' color='text-secondary'>
+            (optional)
+          </Text>
+        ),
+        false: undefined,
+      }),
+      counter: figma.boolean('counter', {
+        true: figma.children('Counter'),
+        false: undefined,
+      }),
+      infoIcon: figma.boolean('informer', {
+        true: figma.children('Info icon with tooltip (Informer)'),
+        false: undefined,
+      }),
+    },
+    example: ({ label, addon, optional, counter, infoIcon }) => (
+      <Flex direction='row' gap={1}>
+        <Text tag='label' htmlFor='/* input id */' size='/* fontSize */'>
+          {label}
+        </Text>
+        {optional}
+        {counter}
+        {infoIcon}
+        {addon}
+      </Flex>
+    ),
+  },
+);
+
+figma.connect(
+  Flex,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactored--%E2%9D%96-Core-Components?node-id=56781-2200',
+  {
+    variant: {
+      'label position': 'left',
+    },
+    props: {
+      label: figma.textContent('↳ label'),
+      addon: figma.children('*'),
+      optional: figma.boolean('optional', {
+        true: (
+          <Text size='/* fontSize */' color='text-secondary'>
+            (optional)
+          </Text>
+        ),
+        false: undefined,
+      }),
+      counter: figma.boolean('counter', {
+        true: figma.children('Counter'),
+        false: undefined,
+      }),
+      infoIcon: figma.boolean('informer', {
+        true: figma.children('Info icon with tooltip (Informer)'),
+        false: undefined,
+      }),
+    },
+    example: ({ label, addon, optional, counter, infoIcon }) => (
+      <Flex direction='column' gap={1}>
+        <Text tag='label' htmlFor='/* input id */' size='/* fontSize */'>
+          {label}
+        </Text>
+        {optional}
+        {counter}
+        {infoIcon}
+        {addon}
+      </Flex>
+    ),
+  },
+);
+
+figma.connect(
+  Input,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring--%E2%9D%96-Core-Components?node-id=10043-48576',
+  {
+    props: {
+      size: figma.enum('size', {
+        M: 'm',
+        L: 'l',
+      }),
+      state: figma.enum('state', {
+        invalid: 'invalid',
+        valid: 'valid',
+      }),
+      // disabled: figma.enum('state', {
+      //   disabled: true,
+      // }),
+      // readOnly: figma.boolean('read-only'),
+      addonLeft: figma.boolean('← addon', {
+        true: <Input.Addon>{/* addon */}</Input.Addon>,
+      }),
+      addonRight: figma.boolean('addon →', {
+        true: <Input.Addon>{/* addon */}</Input.Addon>,
+      }),
+      textAddon: figma.boolean('textAddon ->', {
+        true: <Input.Addon>{/* text addon */}</Input.Addon>,
+      }),
+      value: figma.children('Input.Value'),
+      clearButton: figma.boolean('clear button', {
+        true: (
+          <Input.Addon>
+            <ButtonLink
+              use='secondary'
+              addonLeft={CloseM}
+              title='Clear'
+            />
+          </Input.Addon>
+        ),
+        false: undefined,
+      }),
+    },
+    example: ({ size, state, addonLeft, addonRight, textAddon, value, clearButton, disabled, readOnly }) => (
+      <Input size={size} state={state}>
+        {addonLeft}
+        {value}
+        {textAddon}
+        {addonRight}
+        {clearButton}
+      </Input>
+    ),
+  },
+);
+
+// Input with label
+// TODO: Move these complex examples to the separate file for mappings of all the inputs?
+
+figma.connect(
+  Flex,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=11613-139678',
+  {
+    variant: { 'label position': 'top' },
+    props: {
+      label: figma.children('Input.Label'),
+      input: figma.children('Input'),
+    },
+    example: ({ label, input }) => (
+      <Flex direction='column' gap={2}>
+        {label}
+        {input}
+      </Flex>
+    ),
+  },
+);
+
+figma.connect(
+  Input,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=11613-139678',
+  {
+    variant: { 'label position': 'left' },
+    props: {
+      label: figma.children('Input.Label'),
+      input: figma.children('Input'),
+    },
+    example: ({ label, input }) => (
+      <Flex direction='row' gap={6}>
+        {label}
+        {input}
+      </Flex>
+    ),
+  },
+);
diff --git a/figma/mappings/core-components/InputNumber.figma.jsx b/figma/mappings/core-components/InputNumber.figma.jsx
new file mode 100644
index 0000000000..8833754501
--- /dev/null
+++ b/figma/mappings/core-components/InputNumber.figma.jsx
@@ -0,0 +1,148 @@
+import figma from '@figma/code-connect';
+import { Flex } from '@semcore/ui/base-components';
+import InputNumber from '@semcore/ui/input-number';
+import { Text } from '@semcore/ui/typography';
+
+figma.connect(
+  InputNumber,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10162-90608',
+  {
+    props: {
+      size: figma.enum('size', {
+        M: 'm',
+        L: 'l',
+      }),
+      state: figma.enum('state', {
+        invalid: 'invalid',
+        valid: 'valid',
+      }),
+      disabled: figma.enum('state', {
+        disabled: true,
+      }),
+      readOnly: figma.boolean('read-only'),
+      addonLeft: figma.boolean('← addon', {
+        true: <InputNumber.Addon>{/* addon */}</InputNumber.Addon>,
+      }),
+      showControls: figma.boolean('show controls'),
+    },
+    example: ({ size, state, addonLeft, readOnly, showControls, disabled }) => (
+      <InputNumber size={size} state={state} disabled={disabled}>
+        {addonLeft}
+        <InputNumber.Value readOnly={readOnly} />
+        <InputNumber.Controls showControls={showControls} />
+      </InputNumber>
+    ),
+  },
+);
+
+figma.connect(
+  Flex,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10162-90618',
+  {
+    example: () => (
+      <Flex>
+        <InputNumber neighborLocation='right'>
+          {/* Select individual inputs to inspect their props */}
+        </InputNumber>
+        <InputNumber neighborLocation='left'>
+          {/* Select individual inputs to inspect their props */}
+        </InputNumber>
+      </Flex>
+    ),
+  },
+);
+
+// let's discuss if we really need Value props (and parent `w` prop) here (they aren't connected with Figma)
+
+// figma.connect(
+//   InputNumber.Value,
+//   'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=52716-799&',
+//   {
+//     props: {
+//       value: figma.textContent('↳ text'),
+//     },
+//     example: ({ value }) => (
+//       <InputNumber.Value
+//         defaultValue='/* string */'
+//         placeholder={value}
+//         id='/* id */'
+//         max='/* number */'
+//         min='/* number */'
+//         step='/* number */'
+//       />
+//     ),
+//   },
+// );
+
+// TODO: How to add neighborLocation props to the InputNumber components?
+// это можно сделать вот так, но придется повторять все проперти для каждого потомка
+
+// figma.connect(
+//   Flex,
+//   'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10162-90618&',
+//   {
+//     props: {
+//       child1: figma.nestedProps('InputNumber1', {
+//         showControls: figma.boolean('show controls'),
+//         state: figma.enum('state', {
+//           invalid: 'invalid',
+//           valid: 'valid',
+//         }),
+//         disabled: figma.enum('state', {
+//           disabled: true,
+//         }),
+//         readOnly: figma.boolean('read-only'),
+//       }),
+//     },
+//     example: ({ child1 }) => (
+//       <Flex>
+//         <InputNumber neighborLocation='right' disabled={child1.disabled} state={child1.state}>
+//           <InputNumber.Value readOnly={child1.readOnly} />
+//           <InputNumber.Controls showControls={child1.showControls} />
+//         </InputNumber>
+//         <InputNumber neighborLocation='left'>
+//           <InputNumber.Value />
+//           <InputNumber.Controls />
+//         </InputNumber>
+//       </Flex>
+//     ),
+//   },
+// );
+
+// InputNumber with label
+
+figma.connect(
+  InputNumber,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=56367-564',
+  {
+    variant: { 'label position': 'top' },
+    props: {
+      label: figma.children('Input.Label'),
+      input: figma.children('InputRange'),
+    },
+    example: ({ label, input }) => (
+      <Flex direction='column' gap={2}>
+        {label}
+        {input}
+      </Flex>
+    ),
+  },
+);
+
+figma.connect(
+  InputNumber,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=56367-564',
+  {
+    variant: { 'label position': 'left' },
+    props: {
+      label: figma.children('Input.Label'),
+      input: figma.children('InputRange'),
+    },
+    example: ({ label, input }) => (
+      <Flex direction='row' gap={2}>
+        {label}
+        {input}
+      </Flex>
+    ),
+  },
+);
diff --git a/figma/mappings/core-components/InputPhone.figma.jsx b/figma/mappings/core-components/InputPhone.figma.jsx
new file mode 100644
index 0000000000..6e247dccbf
--- /dev/null
+++ b/figma/mappings/core-components/InputPhone.figma.jsx
@@ -0,0 +1,174 @@
+import figma from '@figma/code-connect/react';
+import { Box, Flex } from '@semcore/ui/base-components';
+import { ButtonLink } from '@semcore/ui/button';
+import Flag, { iso2Name } from '@semcore/ui/flags';
+import Input from '@semcore/ui/input';
+import { Text } from '@semcore/ui/typography';
+
+// Need somehow to get the readOnly and disabled props from the Input component
+// and pass it to the Input.Value component
+
+figma.connect(
+  Input.Value,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=52263-2252',
+  {
+    props: {
+      value: figma.textContent('↳ text'),
+    },
+    example: ({ value }) => <Input.Value placeholder={value} id='/* id */' />,
+  },
+);
+
+// Unknown country and number format
+
+figma.connect(
+  Input,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10264-98074',
+  {
+    variant: {
+      type: 'default',
+    },
+    props: {
+      size: figma.enum('size', {
+        M: 'm',
+        L: 'l',
+      }),
+      state: figma.enum('state', {
+        invalid: 'invalid',
+        valid: 'valid',
+      }),
+      value: figma.children('Input.Value'),
+      clearButton: figma.boolean('clear button', {
+        true: (
+          <Input.Addon>
+            <ButtonLink
+              use='secondary'
+              addonLeft={/* CloseM */}
+              title='Clear'
+            />
+          </Input.Addon>
+        ),
+        false: undefined,
+      }),
+    },
+    example: ({ size, state, value, clearButton }) => (
+      <Input w='/* width */' size={size} state={state}>
+        {value}
+        {clearButton}
+      </Input>
+    ),
+  },
+);
+
+// Known country and unknown number format
+
+figma.connect(
+  Input,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10264-98074',
+  {
+    variant: {
+      type: 'country code',
+    },
+    props: {
+      size: figma.enum('size', {
+        M: 'm',
+        L: 'l',
+      }),
+      state: figma.enum('state', {
+        invalid: 'invalid',
+        valid: 'valid',
+      }),
+      inputValue: figma.children('Input.Value'),
+      clearButton: figma.boolean('clear button', {
+        true: (
+          <Input.Addon>
+            <ButtonLink
+              use='secondary'
+              addonLeft={/* CloseM */}
+              title='Clear'
+            />
+          </Input.Addon>
+        ),
+        false: undefined,
+      }),
+    },
+    example: ({ size, state, inputValue, clearButton }) => (
+      <Input w='/* width */' size={size} state={state}>
+        <Input.Addon>
+          <Flag iso2={/* value */} role='img' aria-label={iso2Name(/* value */)} />
+        </Input.Addon>
+        {inputValue}
+        {clearButton}
+      </Input>
+    ),
+  },
+);
+
+// Known country and number format
+// TODO: How to add neighborLocation props to the InputPhone components?
+
+figma.connect(
+  Box,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10264-98074',
+  {
+    variant: {
+      type: 'country code and format',
+    },
+    props: {
+      size: figma.enum('size', {
+        M: 'm',
+        L: 'l',
+      }),
+      state: figma.enum('state', {
+        invalid: 'invalid',
+        valid: 'valid',
+      }),
+      select: figma.children('Select.Trigger'),
+      inputValue: figma.children('Input.Value'),
+    },
+    example: ({ size, state, select, inputValue }) => (
+      <Box>
+        {select}
+        <Input w='/* width */' size={size} state={state}>{inputValue}</Input>
+      </Box>
+    ),
+  },
+);
+
+// InputPhone with label
+
+figma.connect(
+  Input,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=56367-1634',
+  {
+    variant: { 'label position': 'top' },
+    props: {
+      label: figma.children('Input.Label'),
+      input: figma.children('InputPhone'),
+    },
+    example: ({ label, input }) => (
+      <Flex direction='column' gap={2}>
+        {label}
+        {input}
+      </Flex>
+    ),
+  },
+);
+
+figma.connect(
+  Input,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=56367-1634',
+  {
+    variant: { 'label position': 'left' },
+    props: {
+      label: figma.children('Input.Label'),
+      input: figma.children('InputPhone'),
+    },
+    example: ({ label, input }) => (
+      <Flex direction='row' gap={2}>
+        {label}
+        {input}
+      </Flex>
+    ),
+  },
+);
diff --git a/figma/mappings/core-components/InputTags.figma.jsx b/figma/mappings/core-components/InputTags.figma.jsx
new file mode 100644
index 0000000000..ea4ae4cba9
--- /dev/null
+++ b/figma/mappings/core-components/InputTags.figma.jsx
@@ -0,0 +1,76 @@
+import figma from '@figma/code-connect';
+import { Flex } from '@semcore/ui/base-components';
+import InputTags from '@semcore/ui/input-tags';
+import { Text } from '@semcore/ui/typography';
+
+figma.connect(
+  InputTags.Value,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=53341-290243',
+  {
+    props: {
+      value: figma.textContent('↳ text'),
+    },
+    example: ({ value }) => <InputTags.Value placeholder={value} id='/* id */' />,
+  });
+
+figma.connect(
+  InputTags,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10367-194491',
+  {
+    props: {
+      placeholder: figma.nestedProps('InputTags.Value', {
+        value: figma.textContent('↳ text'),
+      }),
+      size: figma.enum('size', {
+        M: 'm',
+        L: 'l',
+      }),
+      state: figma.enum('state', {
+        normal: 'normal',
+        invalid: 'invalid',
+        valid: 'valid',
+      }),
+      readOnly: figma.boolean('read-only'),
+      // tags: figma.children('Tag'),
+    },
+    example: ({ placeholder, size, state, readOnly }) => <InputTags size={size} state={state}>{/* tag */}<InputTags.Value placeholder={placeholder.value} id='/* id */' readOnly={readOnly} /></InputTags>,
+  },
+);
+
+// InputTags with label
+
+figma.connect(
+  InputTags,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=56367-4062',
+  {
+    variant: { 'label position': 'top' },
+    props: {
+      label: figma.children('Input.Label'),
+      input: figma.children('InputTags'),
+    },
+    example: ({ label, input }) => (
+      <Flex direction='column' gap={2}>
+        {label}
+        {input}
+      </Flex>
+    ),
+  },
+);
+
+figma.connect(
+  InputTags,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=56367-4062',
+  {
+    variant: { 'label position': 'left' },
+    props: {
+      label: figma.children('Input.Label'),
+      input: figma.children('InputTags'),
+    },
+    example: ({ label, input }) => (
+      <Flex direction='row' gap={2}>
+        {label}
+        {input}
+      </Flex>
+    ),
+  },
+);
diff --git a/figma/mappings/core-components/Link.figma.ts b/figma/mappings/core-components/Link.figma.ts
new file mode 100644
index 0000000000..f8ff5f70b0
--- /dev/null
+++ b/figma/mappings/core-components/Link.figma.ts
@@ -0,0 +1,34 @@
+import { connect } from '../../src/connect';
+import type { ConnectSettings } from '../../src/connect';
+
+const addonLeft = connect.childCode('← - - addon properties', { wrapper: 'Link.Addon' });
+const addonRight = connect.childCode('addon properties - - →', { wrapper: 'Link.Addon' });
+
+const wrapper = addonLeft || addonRight ? 'Link.Text' : undefined;
+const text = connect.childCode('↳ text', { wrapper });
+
+const ariaLabel = text ? undefined : 'aria-label = {/* short description */}';
+
+const active = connect.getProp('state', 'active');
+const disabled = connect.getProp('state', 'disabled');
+
+const example = `
+<Link
+  ${ariaLabel}
+  size={/* fontSize */}
+  href={/* URL */}
+  ${active}
+  ${disabled}
+>
+${addonLeft}
+${text}
+${addonRight}
+</Link>
+`;
+
+export const settings: ConnectSettings = {
+  example,
+  id: 'Link',
+  url: 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10142-178857',
+  imports: ['import Link from "@semcore/ui/link"'],
+};
diff --git a/figma/mappings/core-components/List.figma.jsx b/figma/mappings/core-components/List.figma.jsx
new file mode 100644
index 0000000000..57f145520d
--- /dev/null
+++ b/figma/mappings/core-components/List.figma.jsx
@@ -0,0 +1,46 @@
+import figma from '@figma/code-connect';
+import { List } from '@semcore/ui/typography';
+
+figma.connect(
+  List.Item,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=11735-134804',
+  {
+    props: {
+      // size: figma.enum('font size', {
+      //   '300 (16px)': 300,
+      //   '200 (14px)': 200,
+      //   '100 (12px)': 100,
+      // }),
+      marker: figma.enum('list type', {
+        'numbers (ol)': figma.textContent('number'),
+        'custom marker (ul)': figma.instance('marker'),
+      }),
+      text: figma.textContent('↳ item'),
+    },
+    example: ({ marker, text }) => (
+      <List.Item marker={marker}>
+        {text}
+      </List.Item>
+    ),
+  },
+);
+
+figma.connect(
+  List,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactored--%E2%9D%96-Core-Components?node-id=57324-4583',
+  {
+    props: {
+      children: figma.children('*'),
+      size: figma.enum('font size', {
+        '300 (16px)': 300,
+        '200 (14px)': 200,
+        '100 (12px)': 100,
+      }),
+    },
+    example: ({ children, size }) => (
+      <List size={size}>
+        {children}
+      </List>
+    ),
+  },
+);
diff --git a/figma/mappings/core-components/Modal.figma.jsx b/figma/mappings/core-components/Modal.figma.jsx
new file mode 100644
index 0000000000..d269fea11a
--- /dev/null
+++ b/figma/mappings/core-components/Modal.figma.jsx
@@ -0,0 +1,154 @@
+import figma from '@figma/code-connect/react';
+import { Flex } from '@semcore/ui/base-components';
+import MailSent from '@semcore/ui/illustration/MailSent';
+import Modal from '@semcore/ui/modal';
+import { Text } from '@semcore/ui/typography';
+
+figma.connect(
+  Modal,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactored--%E2%9D%96-Core-Components?node-id=57361-3208',
+  {
+    variant: { preset: 'text' },
+    props: {
+      title: figma.textContent('↳ title'),
+      text: figma.textContent('↳ text'),
+      childrenActions: figma.children('Button'),
+    },
+    example: ({ title, text, childrenActions }) => (
+      <Modal>
+        <Modal.Title mb={4}>{title}</Modal.Title>
+        <Text size={200} tag='p'>
+          {text}
+        </Text>
+        <Flex gap={2} mt={4}>
+          {childrenActions}
+        </Flex>
+      </Modal>
+    ),
+  },
+);
+
+figma.connect(
+  Modal,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactored--%E2%9D%96-Core-Components?node-id=57361-3208',
+  {
+    variant: { preset: 'form' },
+    props: {
+      title: figma.textContent('↳ title'),
+      text: figma.textContent('↳ text'),
+      childrenActions: figma.children('Button'),
+    },
+    example: ({ title, text, childrenActions }) => (
+      <Modal>
+        <Modal.Title mb={4}>{title}</Modal.Title>
+        <Text size={200} tag='p'>
+          {text}
+        </Text>
+        <Flex gap={2} mt={4}>
+          <Flex direction='column' gap={6} mb={4}>{/* Place your form here */}</Flex>
+          <Flex gap={2} mt={6}>{childrenActions}</Flex>
+        </Flex>
+      </Modal>
+    ),
+  },
+);
+
+figma.connect(
+  Modal,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactored--%E2%9D%96-Core-Components?node-id=57361-3208',
+  {
+    variant: { preset: 'checklist' },
+    props: {
+      title: figma.textContent('↳ title'),
+      text: figma.textContent('↳ text'),
+      childrenActions: figma.children('Button'),
+    },
+    example: ({ title, text, childrenActions }) => (
+      <Modal>
+        <Modal.Title mb={4}>{title}</Modal.Title>
+        <Text size={200} tag='p' mb={4}>
+          {text}
+        </Text>
+        <Flex direction='column' gap={4}>
+          {/* Place your Checkbox list here */}
+          <Flex gap={2} mt={6}>{childrenActions}</Flex>
+        </Flex>
+      </Modal>
+    ),
+  },
+);
+
+figma.connect(
+  Modal,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactored--%E2%9D%96-Core-Components?node-id=57361-3208',
+  {
+    variant: { preset: 'illustration' },
+    props: {
+      title: figma.textContent('↳ title'),
+      text: figma.textContent('↳ text'),
+      childrenActions: figma.children('Button'),
+    },
+    example: ({ title, text, childrenActions }) => (
+      <Modal>
+        <Flex direction='column' alignItems='center'>
+          <MailSent mb={4} />
+          <Modal.Title mb={2}>{title}</Modal.Title>
+          <Text size={300} tag='p' mb={4}>
+            {text}
+          </Text>
+          <Flex gap={2} mt={4}>{childrenActions}</Flex>
+        </Flex>
+      </Modal>
+    ),
+  },
+);
+
+figma.connect(
+  Modal,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactored--%E2%9D%96-Core-Components?node-id=57361-3208',
+  {
+    variant: { preset: 'accordion' },
+    props: {
+      title: figma.textContent('↳ title'),
+      text: figma.textContent('↳ text'),
+      childrenActions: figma.children('Button'),
+    },
+    example: ({ title, text, childrenActions }) => (
+      <Modal>
+        <Modal.Title mb={4}>{title}</Modal.Title>
+        <Text size={200} tag='p' mb={4}>
+          {text}
+        </Text>
+        <Flex direction='column' mb={4}>
+          {/* Place your Accordion here */}
+          <Flex gap={2} mt={6}>{childrenActions}</Flex>
+        </Flex>
+      </Modal>
+    ),
+  },
+);
+
+figma.connect(
+  Modal,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactored--%E2%9D%96-Core-Components?node-id=57361-3208',
+  {
+    variant: { preset: 'table' },
+    props: {
+      title: figma.textContent('↳ title'),
+      text: figma.textContent('↳ text'),
+      childrenActions: figma.children('Button'),
+    },
+    example: ({ title, text, childrenActions }) => (
+      <Modal>
+        <Modal.Title mb={4}>{title}</Modal.Title>
+        <Text size={200} tag='p' mb={4}>
+          {text}
+        </Text>
+        <Flex direction='column' mb={4}>
+          {/* Place your Table here */}
+          <Flex gap={2} mt={6}>{childrenActions}</Flex>
+        </Flex>
+      </Modal>
+    ),
+  },
+);
diff --git a/figma/mappings/core-components/Notice.figma.jsx b/figma/mappings/core-components/Notice.figma.jsx
new file mode 100644
index 0000000000..877b1c723f
--- /dev/null
+++ b/figma/mappings/core-components/Notice.figma.jsx
@@ -0,0 +1,100 @@
+import figma from '@figma/code-connect/react';
+import Notice from '@semcore/ui/notice';
+
+figma.connect(
+  Notice.Label,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=53691-291060&t=wyKe5rNq2KHENfRl-11',
+  {
+    variant: { type: 'icon' },
+    props: {
+      icon: figma.instance('↳ icon'),
+    },
+    example: ({ icon }) => <Notice.Label>{icon}</Notice.Label>,
+  },
+);
+
+figma.connect(
+  Notice.Label,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=53691-291060&t=wyKe5rNq2KHENfRl-11',
+  {
+    variant: { type: 'illustration' },
+    example: () => <Notice.Label>{/* svg or illustration from the library */}</Notice.Label>,
+  },
+);
+
+figma.connect(
+  Notice,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=13327-111793&t=wyKe5rNq2KHENfRl-11',
+  {
+    props: {
+      theme: figma.enum('theme', {
+        '🟢 limit': 'success',
+        '🔴 danger': 'danger',
+        '🟠 warning': 'warning',
+        '⚪️ muted': 'muted',
+      }),
+      actions: figma.boolean('actions', {
+        true: figma.children('Button'),
+        false: undefined,
+      }),
+      // closable: figma.boolean('closable'), // commented because don't want to show this prop by default
+      title: figma.textContent('↳ title'),
+      text: figma.textContent('↳ text'),
+    },
+    example: ({ theme, title, actions, text }) => (
+      <Notice aria-label={/* Add aria-label */} theme={theme}>
+        <Notice.Label>{/* svg or illustration from the library */}</Notice.Label>
+        <Notice.Content>
+          <Notice.Title>
+            {title}
+          </Notice.Title>
+          <Notice.Text>
+            {text}
+          </Notice.Text>
+          <Notice.Actions>
+            {actions}
+          </Notice.Actions>
+        </Notice.Content>
+        <Notice.Close />
+      </Notice>
+    ),
+  },
+);
+
+// Notice with custom layout: buttons on the right
+
+figma.connect(
+  Notice,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=20870-123861&t=wyKe5rNq2KHENfRl-11',
+  {
+    props: {
+      theme: figma.enum('theme', {
+        '🟢 limit': 'success',
+        '🔴 danger': 'danger',
+        '🟠 warning': 'warning',
+        '⚪️ muted': 'muted',
+      }),
+      actions: figma.boolean('actions', {
+        true: figma.children('Button'),
+        false: undefined,
+      }),
+      // closable: figma.boolean('closeIcon'), // commented because don't want to show this prop by default
+      text: figma.textContent('↳ text'),
+      icon: figma.children('Notice.Label'),
+    },
+    example: ({ theme, actions, text, icon }) => (
+      <Notice aria-label={/* Add aria-label */} theme={theme}>
+        <Notice.Label>{icon}</Notice.Label>
+        <Notice.Content>
+          <Notice.Text>
+            {text}
+          </Notice.Text>
+          <Notice.Actions>
+            {actions}
+          </Notice.Actions>
+        </Notice.Content>
+        <Notice.Close />
+      </Notice>
+    ),
+  },
+);
diff --git a/figma/mappings/core-components/NoticeBubble.figma.jsx b/figma/mappings/core-components/NoticeBubble.figma.jsx
new file mode 100644
index 0000000000..1f318934a8
--- /dev/null
+++ b/figma/mappings/core-components/NoticeBubble.figma.jsx
@@ -0,0 +1,10 @@
+import figma from '@figma/code-connect/react';
+import { NoticeBubbleContainer } from '@semcore/ui/notice-bubble';
+
+figma.connect(
+  NoticeBubbleContainer,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10142-195417&t=wyKe5rNq2KHENfRl-11',
+  {
+    example: () => <NoticeBubbleContainer manager={/* add NoticeBubbleManager, check examples in documentation */} />,
+  },
+);
diff --git a/figma/mappings/core-components/NoticeGlobal.figma.jsx b/figma/mappings/core-components/NoticeGlobal.figma.jsx
new file mode 100644
index 0000000000..74c30bb7ec
--- /dev/null
+++ b/figma/mappings/core-components/NoticeGlobal.figma.jsx
@@ -0,0 +1,29 @@
+import figma from '@figma/code-connect/react';
+import NoticeGlobal from '@semcore/ui/notice-global';
+
+figma.connect(
+  NoticeGlobal,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10270-107436&t=wyKe5rNq2KHENfRl-11',
+  {
+    props: {
+      theme: figma.enum('theme', {
+        '🌚 neutral': 'neutral',
+        '🔵 info': 'info',
+        '🟢 success': 'success',
+        '🟠 warning': 'warning',
+        '🔴 danger': 'danger',
+      }),
+      //   closable: figma.boolean('closable'), // commented because don't want to show this prop by default
+      content: figma.textContent('↳ text'),
+      actions: figma.children('Button'),
+    },
+    example: ({ theme, content, actions }) => (
+      <NoticeGlobal theme={theme}>
+        <NoticeGlobal.Content gap={2} alignItems='center'>
+          {content}
+          {actions}
+        </NoticeGlobal.Content>
+      </NoticeGlobal>
+    ),
+  },
+);
diff --git a/figma/mappings/core-components/NoticeSmart.figma.jsx b/figma/mappings/core-components/NoticeSmart.figma.jsx
new file mode 100644
index 0000000000..037fcf11ff
--- /dev/null
+++ b/figma/mappings/core-components/NoticeSmart.figma.jsx
@@ -0,0 +1,36 @@
+import figma from '@figma/code-connect/react';
+import { NoticeSmart } from '@semcore/ui/notice';
+
+figma.connect(
+  NoticeSmart,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10097-57985&t=wyKe5rNq2KHENfRl-11',
+  {
+    props: {
+      theme: figma.enum('theme', {
+        '🟢 limit': 'success',
+        '🔴 danger': 'danger',
+        '🟠 warning': 'warning',
+        '⚪️ muted': 'muted',
+      }),
+      // actions: figma.boolean('actions', {
+      //   true: figma.children('*'),
+      //   false: undefined,
+      // }),
+      // closable: figma.boolean('closable'), // commented because don't want to show this prop by default
+      title: figma.textContent('↳ title'),
+      text: figma.textContent('↳ text'),
+      // icon: figma.children('Notice.Label'),
+    },
+    example: ({ theme, title, text }) => (
+      <NoticeSmart
+        aria-label={/* Add aria-label */}
+        theme={theme}
+        label={/* icon or illustration from the library */}
+        title={title}
+        actions={/* add Buttons here */}
+      >
+        {text}
+      </NoticeSmart>
+    ),
+  },
+);
diff --git a/figma/mappings/core-components/Pagination.figma.jsx b/figma/mappings/core-components/Pagination.figma.jsx
new file mode 100644
index 0000000000..94e3c4f138
--- /dev/null
+++ b/figma/mappings/core-components/Pagination.figma.jsx
@@ -0,0 +1,49 @@
+import figma from '@figma/code-connect';
+import Pagination from '@semcore/ui/pagination';
+import Select from '@semcore/ui/select';
+
+figma.connect(
+  Pagination,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10270-109137',
+  {
+    variant: { 'select (# of rows)': false },
+    props: {
+      size: figma.enum('size', { L: 'l' }),
+    },
+    example: (p) => (
+      <Pagination
+        size={p.size}
+        currentPage={/* number */}
+        totalPages={/* number */}
+      />
+    ),
+  });
+
+figma.connect(
+  Pagination,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10270-109137',
+  {
+    variant: { 'select (# of rows)': true },
+    props: {
+      size: figma.enum('size', { L: 'l' }),
+      ml: figma.enum('size', { M: 4, L: 5 }),
+    },
+    example: (p) => (
+      <Pagination
+        size={p.size}
+        currentPage={/* number */}
+        totalPages={/* number */}
+      >
+        <Pagination.FirstPage />
+        <Pagination.PrevPage />
+        <Pagination.NextPage />
+        <Pagination.PageInput />
+        <Pagination.TotalPages />
+        <Select
+          {...p}
+          options={/* options */}
+          value={/* current value */}
+        />
+      </Pagination>
+    ),
+  });
diff --git a/figma/mappings/core-components/Pills.figma.jsx b/figma/mappings/core-components/Pills.figma.jsx
new file mode 100644
index 0000000000..ce3b956f32
--- /dev/null
+++ b/figma/mappings/core-components/Pills.figma.jsx
@@ -0,0 +1,73 @@
+import figma from '@figma/code-connect/react';
+import Pills from '@semcore/ui/pills';
+
+figma.connect(
+  Pills.Item,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/%E2%9D%96-Core-Components-(Refactoring)?node-id=10174-91951&t=hkjybGSILqRb6bQU-4',
+  {
+    props: {
+      disabled: figma.enum('state', { disabled: true }),
+      selected: figma.boolean('selected'),
+      addonLeft: figma.enum('pill type', {
+        default: figma.boolean('← addon', {
+          true: <Pills.Item.Addon tag={addonTag} {...addonProps} />,
+        }),
+      }),
+      addonRight: figma.enum('pill type', {
+        default: figma.boolean('addon →', {
+          true: <Pills.Item.Addon tag={addonTag} {...addonProps}>{/* addon text */}</Pills.Item.Addon>,
+        }),
+      }),
+      content: figma.enum('pill type', {
+        'default': figma.boolean('← addon', {
+          true: <Pills.Item.Text>{/* pill text */}</Pills.Item.Text>,
+          false: figma.boolean('addon →', {
+            true: <Pills.Item.Text>{/* pill text */}</Pills.Item.Text>,
+            false: '{/* pill text */}',
+          }),
+        }),
+        'icon only': <Pills.Item.Addon tag={iconName} {...iconProps} />,
+        'king': (
+          <Pills.Item.Text
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 'var(--intergalactic-spacing-1x)',
+              margin: 'var(--intergalactic-spacing-3x) var(--intergalactic-spacing-5x)',
+            }}
+          >
+            {/* first line */}
+            {/* second line */}
+          </Pills.Item.Text>
+        ),
+      }),
+      style: figma.enum('pill type', {
+        king: {
+          height: 'inherit',
+          alignItems: 'stretch',
+          textAlign: 'inherit',
+          whiteSpace: 'normal',
+        },
+      }),
+    },
+    example: ({ disabled, selected, content, addonLeft, addonRight, style }) => (
+      <Pills.Item disabled={disabled} selected={selected} style={style}>
+        {addonLeft}
+        {content}
+        {addonRight}
+      </Pills.Item>
+    ),
+  },
+);
+
+figma.connect(
+  Pills,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/%E2%9D%96-Core-Components-(Refactoring)?node-id=10174-91970&t=hkjybGSILqRb6bQU-4',
+  {
+    props: {
+      size: figma.enum('size', { L: 'l' }),
+      style: figma.enum('type', { king: { alignItems: 'stretch' } }),
+    },
+    example: (props) => <Pills {...props}>{/* Select individual Pills.Items to inspect their props */}</Pills>,
+  },
+);
diff --git a/figma/mappings/core-components/ProductHead.Info.Item.figma.template.js b/figma/mappings/core-components/ProductHead.Info.Item.figma.template.js
new file mode 100644
index 0000000000..34e15d5a79
--- /dev/null
+++ b/figma/mappings/core-components/ProductHead.Info.Item.figma.template.js
@@ -0,0 +1,28 @@
+// https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=14188-117046
+// import { Info } from '@semcore/ui/product-head'
+const figma = require('figma');
+const instance = figma.selectedInstance;
+
+const textOnly = instance.getBoolean('text only');
+const label = instance.getBoolean('label', {
+  true: textOnly
+    ? ` label="${instance.findText('Info.Item.Label')?.textContent}"`
+    : `<Info.Item.Label>${instance.findText('Info.Item.Label')?.textContent}</Info.Item.Label>`,
+});
+
+let children = instance.findLayers(() => true);
+if (label) children = children.slice(1);
+const infoItem = layerArrayCode(children);
+
+let labelWarning;
+if (!textOnly && label) labelWarning = '{/* make sure to connect the label with the control appropriately */}';
+if (!textOnly && !label) labelWarning = '{/* make sure to label the control appropriately */}';
+
+export default {
+  example: figma.tsx`
+<Info.Item${textOnly ? label : ''}>
+  ${labelWarning}${!textOnly ? label : ''}${infoItem}
+</Info.Item>
+  `,
+  id: 'Info.Item',
+};
diff --git a/figma/mappings/core-components/ProductHead.figma.template.js b/figma/mappings/core-components/ProductHead.figma.template.js
new file mode 100644
index 0000000000..58018b468c
--- /dev/null
+++ b/figma/mappings/core-components/ProductHead.figma.template.js
@@ -0,0 +1,45 @@
+// https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=55882-8656
+// import ProductHead from '@semcore/ui/product-head'
+const figma = require('figma');
+const instance = figma.selectedInstance;
+
+const mobileFeedback = instance.getBoolean('mobile', {
+  true: instanceCode(instance, 'Send feedback'),
+});
+
+const breadcrumbs = instanceCode(instance, 'Breadcrumbs');
+
+const links = instance.findConnectedInstances(() => true, { path: ['ProductHead.Row', 'ProductHead.Links'] });
+const linksCode = layerArrayCode(links, 'ProductHead.Links');
+
+const buttons = instance.findConnectedInstances(() => true, { path: ['ProductHead.Row', 'ProductHead.Buttons'] });
+const buttonsCode = layerArrayCode(buttons, 'ProductHead.Buttons');
+
+const info = instance.findConnectedInstances(() => true, { path: ['ProductHead.Row', 'Info'] });
+const infoCode = layerArrayCode(info, 'Info');
+
+const toolName = instance.findText('tool name')?.textContent?.replace(/.*/, 'toolName="$&"');
+
+export default {
+  example: figma.tsx`
+<ProductHead>
+  ${breadcrumbs || linksCode || mobileFeedback ? '<ProductHead.Row>' : undefined}
+    ${breadcrumbs}
+    ${linksCode}
+    ${mobileFeedback}
+  ${breadcrumbs || linksCode || mobileFeedback ? '</ProductHead.Row>' : undefined}
+
+  <ProductHead.Row>
+    <Title ${toolName}>
+      {/* title content */}
+    </Title>
+    ${buttonsCode}
+  </ProductHead.Row>
+
+  ${infoCode ? '<ProductHead.Row>' : undefined}
+  ${infoCode}
+  ${infoCode ? '</ProductHead.Row>' : undefined}
+</ProductHead>
+  `,
+  id: 'ProductHead',
+};
diff --git a/figma/mappings/core-components/ProgressBar.figma.jsx b/figma/mappings/core-components/ProgressBar.figma.jsx
new file mode 100644
index 0000000000..66061700fb
--- /dev/null
+++ b/figma/mappings/core-components/ProgressBar.figma.jsx
@@ -0,0 +1,30 @@
+import figma from '@figma/code-connect';
+import ProgressBar from '@semcore/ui/progress-bar';
+
+figma.connect(
+  ProgressBar,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10142-113186&m=dev',
+  {
+    props: {
+      size: figma.enum('size', {
+        S: 's',
+        M: 'm',
+        L: 'l',
+      }),
+      theme: figma.enum('theme', {
+        invert: 'invert',
+        dark: 'dark',
+      }),
+    },
+
+    example: ({ size, theme }) => (
+      <ProgressBar
+        value={/* number */}
+        size={size}
+        theme={theme}
+        aria-valuetext={/* aria-valuetext */}
+        aria-label={/* Add your aria-label */}
+      />
+    ),
+  },
+);
diff --git a/figma/mappings/core-components/Radio.figma.jsx b/figma/mappings/core-components/Radio.figma.jsx
new file mode 100644
index 0000000000..7f312b1565
--- /dev/null
+++ b/figma/mappings/core-components/Radio.figma.jsx
@@ -0,0 +1,44 @@
+import figma from '@figma/code-connect';
+import Radio from '@semcore/ui/radio';
+
+figma.connect(
+  Radio,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring--%E2%9D%96-Core-Components?node-id=11941-108998&t=uvqbUJPa7hkmPVOa-11',
+  {
+    props: {
+      label: figma.textContent('↳ text'),
+      size: figma.enum('size', {
+        L: 'l',
+        M: 'm',
+      }),
+      checked: figma.boolean('checked'),
+      invalid: figma.enum('state', {
+        invalid: true,
+      }),
+      disabled: figma.enum('state', {
+        disabled: true,
+      }),
+      addonLeft: figma.boolean('← addon', {
+        true: figma.children('← - - addon properties'),
+        false: undefined,
+      }),
+      addonRight: figma.boolean('addon →', {
+        true: figma.children('addon properties - - →'),
+        false: undefined,
+      }),
+      textAddon: figma.boolean('textAddon →'),
+    },
+    example: ({ label, size, checked, indeterminate, invalid, disabled, addonLeft, addonRight, textAddon }) => (
+      <Radio
+        label={label}
+        size={size}
+        checked={checked}
+        invalid={invalid}
+        disabled={disabled}
+      // addonLeft={addonLeft}
+      // addonRight={addonRight}
+      // textAddon={textAddon}
+      />
+    ),
+  },
+);
diff --git a/figma/mappings/core-components/RadioGroup.figma.jsx b/figma/mappings/core-components/RadioGroup.figma.jsx
new file mode 100644
index 0000000000..0cad0d3e4c
--- /dev/null
+++ b/figma/mappings/core-components/RadioGroup.figma.jsx
@@ -0,0 +1,23 @@
+import figma from '@figma/code-connect';
+import { Flex } from '@semcore/ui/base-components';
+import Radio, { RadioGroup } from '@semcore/ui/radio';
+
+figma.connect(
+  RadioGroup,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring--%E2%9D%96-Core-Components?node-id=19530-124643&t=uvqbUJPa7hkmPVOa-11',
+  {
+    props: {
+      size: figma.enum('size', {
+        L: 'l',
+        M: 'm',
+      }),
+    },
+    example: ({ size }) => (
+      <RadioGroup name='radio' aria-labelledby={/* Add label's id */}>
+        <Flex direction='column' gap={3}>
+          <Radio size={size} label={/* Add your label */} />
+        </Flex>
+      </RadioGroup>
+    ),
+  },
+);
diff --git a/figma/mappings/core-components/ScrollArea.figma.ts b/figma/mappings/core-components/ScrollArea.figma.ts
new file mode 100644
index 0000000000..952667137e
--- /dev/null
+++ b/figma/mappings/core-components/ScrollArea.figma.ts
@@ -0,0 +1,24 @@
+import { connect } from '../../src/connect';
+import type { ConnectSettings } from '../../src/connect';
+
+const shadow =
+  connect.getBoolean('fader ↑') ||
+  connect.getBoolean('fader ↓') ||
+  connect.getBoolean('fader ->') ||
+  connect.getBoolean('<- fader')
+    ? 'shadow'
+    : undefined;
+
+const shadowAttr = shadow ? ` ${shadow}` : '';
+
+const example = `
+<ScrollArea${shadowAttr}>
+  {/* content */}
+</ScrollArea>
+`;
+export const settings: ConnectSettings = {
+  example,
+  id: 'ScrollArea',
+  url: 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactored--%E2%9D%96-Core-Components?node-id=57142-1488',
+  imports: ['import { ScrollArea } from "@semcore/ui/base-components"'],
+};
diff --git a/figma/mappings/core-components/SidePanel.figma.jsx b/figma/mappings/core-components/SidePanel.figma.jsx
new file mode 100644
index 0000000000..5ed881a703
--- /dev/null
+++ b/figma/mappings/core-components/SidePanel.figma.jsx
@@ -0,0 +1,49 @@
+import figma from '@figma/code-connect/react';
+import SidePanel from '@semcore/ui/side-panel';
+
+figma.connect(
+  SidePanel.Header,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10270-117923&t=8tFmR59x5n76jWX8-11',
+  {
+    props: {
+      title: figma.textContent('↳ title'),
+    },
+    example: ({ title }) => (
+      <SidePanel.Header>
+        <SidePanel.Back>{/* Add button label */}</SidePanel.Back>
+        <SidePanel.Title>{title}</SidePanel.Title>
+      </SidePanel.Header>
+    ),
+  },
+);
+
+figma.connect(
+  SidePanel.Footer,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10270-117989&t=8tFmR59x5n76jWX8-11',
+  {
+    props: {
+      children: figma.children('Button'),
+    },
+    example: ({ children }) => <SidePanel.Footer justifyContent='center' pt={2}>{children}</SidePanel.Footer>,
+  },
+);
+
+figma.connect(
+  SidePanel,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=11578-136509&t=8tFmR59x5n76jWX8-11',
+  {
+    props: {
+      childrenHeader: figma.children('SidePanel.Header'),
+      childrenFooter: figma.children('SidePanel.Footer'),
+    },
+    example: ({ childrenHeader, childrenFooter }) => (
+      <SidePanel aria-label='{/* Add your aria-label */}'>
+        <SidePanel.Close />
+        <SidePanel.Back>{/* Add button label */}</SidePanel.Back>
+        {childrenHeader}
+        <SidePanel.Body>{/* content */}</SidePanel.Body>
+        {childrenFooter}
+      </SidePanel>
+    ),
+  },
+);
diff --git a/figma/mappings/core-components/Skeleton.figma.jsx b/figma/mappings/core-components/Skeleton.figma.jsx
new file mode 100644
index 0000000000..eea3289c05
--- /dev/null
+++ b/figma/mappings/core-components/Skeleton.figma.jsx
@@ -0,0 +1,132 @@
+import figma from '@figma/code-connect';
+import { LineChartSkeleton, AreaChartSkeleton, BarChartSkeleton, VennChartSkeleton, ScatterPlotChartSkeleton, BubbleChartSkeleton, RadialTreeChartSkeleton, HistogramChartSkeleton, DonutChartSkeleton } from '@semcore/ui/skeleton';
+
+figma.connect(
+  LineChartSkeleton,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/branch/XJYTlbnEuQzYxXGo3m1RYu/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10328-147008&t=atOv2tCpAVZguKAs-11',
+  {
+    variant: { chart: '📈 line chart' },
+
+    example: () => <LineChartSkeleton />,
+  },
+);
+
+figma.connect(
+  LineChartSkeleton,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/branch/XJYTlbnEuQzYxXGo3m1RYu/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10328-147008&t=atOv2tCpAVZguKAs-11',
+  {
+    variant: { chart: '📈 line chart (monotone)' },
+
+    example: () => <LineChartSkeleton type='monotone' />,
+  },
+);
+
+figma.connect(
+  AreaChartSkeleton,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/branch/XJYTlbnEuQzYxXGo3m1RYu/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10328-147008&t=atOv2tCpAVZguKAs-11',
+  {
+    variant: { chart: 'area chart' },
+
+    example: () => <AreaChartSkeleton />,
+  },
+);
+
+figma.connect(
+  AreaChartSkeleton,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/branch/XJYTlbnEuQzYxXGo3m1RYu/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10328-147008&t=atOv2tCpAVZguKAs-11',
+  {
+    variant: { chart: 'area chart (monotone)' },
+
+    example: () => <AreaChartSkeleton type='monotone' />,
+  },
+);
+
+figma.connect(
+  BarChartSkeleton,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10328-147008&t=MuIvHlIpGrVpSu9j-11',
+  {
+    variant: { chart: '📊 bar chart' },
+
+    example: () => <BarChartSkeleton />,
+  },
+);
+
+figma.connect(
+  BarChartSkeleton,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10328-147008&t=MuIvHlIpGrVpSu9j-11',
+  {
+    variant: { chart: '📊 bar chart (horizontal)' },
+
+    example: () => <BarChartSkeleton layout='vertical' />,
+  },
+);
+
+figma.connect(
+  HistogramChartSkeleton,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10328-147008&t=MuIvHlIpGrVpSu9j-11',
+  {
+    variant: { chart: '📊 histogram' },
+
+    example: () => <HistogramChartSkeleton />,
+  },
+);
+
+figma.connect(
+  DonutChartSkeleton,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10328-147008&t=MuIvHlIpGrVpSu9j-11',
+  {
+    variant: { chart: '🍩 donut chart' },
+
+    example: () => <DonutChartSkeleton />,
+  },
+);
+
+figma.connect(
+  DonutChartSkeleton,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10328-147008&t=MuIvHlIpGrVpSu9j-11',
+  {
+    variant: { chart: '🍩 donut chart (halfsize)' },
+
+    example: () => <DonutChartSkeleton halfsize />,
+  },
+);
+
+figma.connect(
+  ScatterPlotChartSkeleton,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10328-147008&t=MuIvHlIpGrVpSu9j-11',
+  {
+    variant: { chart: '🛁 scatter plot chart' },
+
+    example: () => <ScatterPlotChartSkeleton />,
+  },
+);
+
+figma.connect(
+  BubbleChartSkeleton,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10328-147008&t=MuIvHlIpGrVpSu9j-11',
+  {
+    variant: { chart: '🛁 bubble chart' },
+
+    example: () => <BubbleChartSkeleton />,
+  },
+);
+
+figma.connect(
+  VennChartSkeleton,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10328-147008&t=MuIvHlIpGrVpSu9j-11',
+  {
+    variant: { chart: 'venn chart' },
+
+    example: () => <VennChartSkeleton />,
+  },
+);
+
+figma.connect(
+  RadialTreeChartSkeleton,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10328-147008&t=MuIvHlIpGrVpSu9j-11',
+  {
+    variant: { chart: 'radial tree chart' },
+
+    example: () => <RadialTreeChartSkeleton />,
+  },
+);
diff --git a/figma/mappings/core-components/SkeletonBone.figma.jsx b/figma/mappings/core-components/SkeletonBone.figma.jsx
new file mode 100644
index 0000000000..59681a763b
--- /dev/null
+++ b/figma/mappings/core-components/SkeletonBone.figma.jsx
@@ -0,0 +1,18 @@
+import figma from '@figma/code-connect';
+import Skeleton from '@semcore/ui/skeleton';
+
+// Skeleton bone
+
+figma.connect(
+  Skeleton,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10328-147009&t=Fgs2Jv2CPgCOdctF-11',
+  {
+    props: {
+      theme: figma.enum('theme', {
+        dark: 'dark',
+        invert: 'invert',
+      }),
+    },
+    example: ({ theme }) => <Skeleton theme={theme} />,
+  },
+);
diff --git a/figma/mappings/core-components/SkeletonShape.figma.jsx b/figma/mappings/core-components/SkeletonShape.figma.jsx
new file mode 100644
index 0000000000..e32fb0d888
--- /dev/null
+++ b/figma/mappings/core-components/SkeletonShape.figma.jsx
@@ -0,0 +1,20 @@
+import figma from '@figma/code-connect';
+import Skeleton from '@semcore/ui/skeleton';
+
+figma.connect(
+  Skeleton,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=52851-1247&t=KO1tOJU4Y49Pygq3-11',
+  {
+    example: () => <Skeleton>{/* svg path */}</Skeleton>,
+  },
+);
+
+// Shapes for charts which are not components in the code
+
+figma.connect(
+  Skeleton,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactored--%E2%9D%96-Core-Components?node-id=57013-41&t=h1bo3HmVL3r4a55A-11',
+  {
+    example: () => <Skeleton>{/* svg path */}</Skeleton>,
+  },
+);
diff --git a/figma/mappings/core-components/SkeletonText.figma.jsx b/figma/mappings/core-components/SkeletonText.figma.jsx
new file mode 100644
index 0000000000..d21ef5e703
--- /dev/null
+++ b/figma/mappings/core-components/SkeletonText.figma.jsx
@@ -0,0 +1,20 @@
+import figma from '@figma/code-connect';
+import Skeleton from '@semcore/ui/skeleton';
+
+// Skeleton for hiding text
+
+figma.connect(
+  Skeleton.Text,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10328-146975&t=Fgs2Jv2CPgCOdctF-11',
+  {
+    props: {
+      theme: figma.nestedProps('Skeleton', {
+        theme: figma.enum('theme', {
+          dark: 'dark',
+          invert: 'invert',
+        }),
+      }),
+    },
+    example: ({ theme }) => <Skeleton theme={theme.theme}><Skeleton.Text amount={3} /></Skeleton>,
+  },
+);
diff --git a/figma/mappings/core-components/Slider.figma.jsx b/figma/mappings/core-components/Slider.figma.jsx
new file mode 100644
index 0000000000..6f5d10ace5
--- /dev/null
+++ b/figma/mappings/core-components/Slider.figma.jsx
@@ -0,0 +1,56 @@
+import figma from '@figma/code-connect/react';
+import { Flex } from '@semcore/ui/base-components';
+import Slider from '@semcore/ui/slider';
+
+figma.connect(
+  Slider.Knob,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10272-140147&t=57sa2Koua22LmcsR-11',
+  {
+    example: () => <Slider.Knob />,
+  },
+);
+
+figma.connect(
+  Slider.Bar,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=11441-126125&t=57sa2Koua22LmcsR-11',
+  {
+    example: () => <Slider.Bar />,
+  },
+);
+
+figma.connect(
+  Slider,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10272-140102&t=57sa2Koua22LmcsR-11',
+  {
+    props: {
+      disabled: figma.boolean('disabled'),
+      options: figma.boolean('options', {
+        true: '[{ /* values */ }]',
+        false: undefined,
+      }),
+    },
+    example: ({ disabled, options }) => <Slider disabled={disabled} options={options} />,
+  },
+);
+
+figma.connect(
+  Slider,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=42066-2468&t=57sa2Koua22LmcsR-11',
+  {
+    props: {
+      disabled: figma.boolean('disabled'),
+      input: figma.children('InputNumber'),
+    },
+    example: ({ disabled, input }) => (
+      <Flex gap={4}>
+        <Slider
+          disabled={disabled}
+        >
+          <Slider.Bar />
+          <Slider.Knob />
+        </Slider>
+        {input}
+      </Flex>
+    ),
+  },
+);
diff --git a/figma/mappings/core-components/Spin.figma.jsx b/figma/mappings/core-components/Spin.figma.jsx
new file mode 100644
index 0000000000..b9b40f0627
--- /dev/null
+++ b/figma/mappings/core-components/Spin.figma.jsx
@@ -0,0 +1,86 @@
+import figma from '@figma/code-connect';
+import { Flex } from '@semcore/ui/base-components';
+import Spin from '@semcore/ui/spin';
+import { Text } from '@semcore/ui/typography';
+
+figma.connect(
+  Spin,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10041-43274&t=zWV92Vho57lBOgpd-11',
+  {
+    props: {
+      size: figma.enum('size', {
+        'XS (16 х 16)': 'xs',
+        'S (20 х 20)': 's',
+        'M (24 х 24)': 'm',
+        'L (32 х 32)': 'l',
+        'XL (48 х 48)': 'xl',
+        'XXL (72 х 72)': 'xxl',
+      }),
+      theme: figma.enum('theme', {
+        dark: 'dark',
+        invert: 'invert',
+      }),
+    },
+    example: ({ size, theme }) => <Spin size={size} theme={theme} />,
+  },
+);
+
+figma.connect(
+  Spin,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=52845-162&t=zWV92Vho57lBOgpd-11',
+  {
+    variant: { 'text placement': 'right' },
+    props: {
+      size: figma.enum('size', {
+        'XS (16 x 16)': 'xs',
+        'S (20 x 20)': 's',
+        'M (24 x 24)': 'm',
+        'L (32 x 32)': 'l',
+        'XL (40 x 40)': 'xl',
+        'XXL (72 x 72)': 'xxl',
+      }),
+      theme: figma.enum('theme', {
+        dark: 'dark',
+        invert: 'invert',
+      }),
+      spin: figma.children('Spin'),
+      text: figma.textContent('↳ text'),
+    },
+    example: ({ spin, text }) => (
+      <Flex alignItems='center' gap={/* margin depends on text and spin size */}>
+        {spin}
+        <Text size={/* fontSize */} color='text-secondary'>{text}</Text>
+      </Flex>
+    ),
+  },
+);
+
+figma.connect(
+  Spin,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=52845-162&t=zWV92Vho57lBOgpd-11',
+  {
+    variant: { 'text placement': 'bottom' },
+    props: {
+      size: figma.enum('size', {
+        'XS (16 x 16)': 'xs',
+        'S (20 x 20)': 's',
+        'M (24 x 24)': 'm',
+        'L (32 x 32)': 'l',
+        'XL (40 x 40)': 'xl',
+        'XXL (72 x 72)': 'xxl',
+      }),
+      theme: figma.enum('theme', {
+        dark: 'dark',
+        invert: 'invert',
+      }),
+      spin: figma.children('Spin'),
+      text: figma.textContent('↳ text'),
+    },
+    example: ({ spin, text }) => (
+      <Flex alignItems='center' direction='column' gap={/* margin depends on text and spin size */}>
+        {spin}
+        <Text size={/* fontSize */} color='text-secondary'>{text}</Text>
+      </Flex>
+    ),
+  },
+);
diff --git a/figma/mappings/core-components/SpinContainer.figma.jsx b/figma/mappings/core-components/SpinContainer.figma.jsx
new file mode 100644
index 0000000000..82c8e446f9
--- /dev/null
+++ b/figma/mappings/core-components/SpinContainer.figma.jsx
@@ -0,0 +1,26 @@
+import figma from '@figma/code-connect';
+import SpinContainer from '@semcore/ui/spin-container';
+
+figma.connect(
+  SpinContainer,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10966-127734&t=Fgs2Jv2CPgCOdctF-11',
+  {
+    props: {
+      theme: figma.enum('theme', {
+        dark: 'dark',
+        invert: 'invert',
+      }),
+      size: figma.nestedProps('Spin', {
+        size: figma.enum('size', {
+          'XS (16 x 16)': 'xs',
+          'S (20 x 20)': 's',
+          'M (24 x 24)': 'm',
+          'L (32 x 32)': 'l',
+          'XL (40 x 40)': 'xl',
+          'XXL (72 x 72)': 'xxl',
+        }),
+      }),
+    },
+    example: ({ size, theme }) => <SpinContainer loading size={size.size} theme={theme} aria-live='polite' role='status'>{/* Place content here */}</SpinContainer>,
+  },
+);
diff --git a/figma/mappings/core-components/Switch.figma.jsx b/figma/mappings/core-components/Switch.figma.jsx
new file mode 100644
index 0000000000..9c0a15697c
--- /dev/null
+++ b/figma/mappings/core-components/Switch.figma.jsx
@@ -0,0 +1,69 @@
+import figma from '@figma/code-connect';
+import Switch from '@semcore/ui/switch';
+
+figma.connect(
+  Switch,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10133-80383&t=Q0bSsRErIQ7IEZAU-11',
+  {
+    variant: { icon: 'false' },
+    props: {
+      label: figma.textContent('↳ text'),
+      size: figma.enum('size', {
+        XL: 'xl',
+        L: 'l',
+        M: 'm',
+      }),
+      checked: figma.boolean('checked'),
+      theme: figma.enum('theme', {
+        info: 'info',
+        success: 'success',
+      }),
+    },
+    example: ({ label, size, checked, theme }) => (
+      <Switch
+        size={size}
+        theme={theme}
+      >
+        <Switch.Value checked={checked} />
+        <Switch.Addon>
+          {label}
+        </Switch.Addon>
+      </Switch>
+    ),
+  },
+);
+
+figma.connect(
+  Switch,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10133-80383&t=Q0bSsRErIQ7IEZAU-11',
+  {
+    variant: { icon: 'true' },
+    props: {
+      label: figma.textContent('↳ text'),
+      size: figma.enum('size', {
+        XL: 'xl',
+        L: 'l',
+        M: 'm',
+      }),
+      checked: figma.boolean('checked'),
+      theme: figma.enum('theme', {
+        info: 'info',
+        success: 'success',
+      }),
+      icon: figma.boolean('icon', {
+        true: figma.instance('↳ icon'),
+        false: undefined,
+      }),
+    },
+    example: ({ label, size, checked, icon }) => (
+      <Switch
+        size={size}
+      >
+        <Switch.Value theme={theme} checked={checked}>{icon}</Switch.Value>
+        <Switch.Addon>
+          {label}
+        </Switch.Addon>
+      </Switch>
+    ),
+  },
+);
diff --git a/figma/mappings/core-components/TabLine.figma.jsx b/figma/mappings/core-components/TabLine.figma.jsx
new file mode 100644
index 0000000000..7037035651
--- /dev/null
+++ b/figma/mappings/core-components/TabLine.figma.jsx
@@ -0,0 +1,94 @@
+import figma from '@figma/code-connect/react';
+import TabLine from '@semcore/ui/tab-line';
+
+figma.connect(
+  TabLine.Item,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10212-118088&t=I48qqNRyVr8Tdi87-11',
+  {
+    variant: { 'textAddon →': 'false' },
+    props: {
+      label: figma.textContent('↳ text'),
+      selected: figma.enum('state', {
+        selected: true,
+      }),
+      disabled: figma.enum('state', {
+        disabled: true,
+      }),
+      addonLeft: figma.boolean('← addon', {
+        true: figma.children('← - - addon properties'),
+        false: undefined,
+      }),
+      addonRight: figma.boolean('addon →', {
+        true: figma.children('addon properties - - →'),
+        false: undefined,
+      }),
+      dot: figma.children('Dot'),
+    },
+    example: ({ selected, disabled, addonLeft, addonRight, label, dot }) => (
+      <TabLine.Item value={/* value */} selected={selected} disabled={disabled} addonLeft={addonLeft} addonRight={addonRight}>
+        <TabLine.Item.Text>{label}</TabLine.Item.Text>
+        {dot}
+      </TabLine.Item>
+    ),
+  },
+);
+
+figma.connect(
+  TabLine.Item,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10212-118088&t=I48qqNRyVr8Tdi87-11',
+  {
+    variant: { 'textAddon →': 'true' },
+    props: {
+      label: figma.textContent('↳ text'),
+      selected: figma.enum('state', {
+        selected: true,
+      }),
+      disabled: figma.enum('state', {
+        disabled: true,
+      }),
+      addonLeft: figma.boolean('← addon', {
+        true: figma.children('← - - addon properties'),
+        false: undefined,
+      }),
+      addonRight: figma.boolean('addon →', {
+        true: figma.children('addon properties - - →'),
+        false: undefined,
+      }),
+      textAddon: figma.boolean('textAddon →', {
+        true: figma.textContent('↳ textAddon'),
+        false: undefined,
+      }),
+      dot: figma.children('Dot'),
+    },
+    example: ({ selected, disabled, addonLeft, addonRight, label, textAddon, dot }) => (
+      <TabLine.Item value={/* value */} selected={selected} disabled={disabled} addonLeft={addonLeft} addonRight={addonRight}>
+        <TabLine.Item.Text>{label}</TabLine.Item.Text>
+        <TabLine.Item.Addon>{textAddon}</TabLine.Item.Addon>
+        {dot}
+      </TabLine.Item>
+    ),
+  },
+);
+
+figma.connect(
+  TabLine,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10212-95422&t=I48qqNRyVr8Tdi87-11',
+  {
+    props: {
+      size: figma.enum('size', {
+        M: 'm',
+        L: 'l',
+      }),
+      underlined: figma.boolean('underlined', {
+        true: true,
+        false: false,
+      }),
+      children: figma.children('TabLine.Item'),
+    },
+    example: ({ size, underlined, children }) => (
+      <TabLine size={size} underlined={underlined}>
+        {children}
+      </TabLine>
+    ),
+  },
+);
diff --git a/figma/mappings/core-components/TabPanel.figma.jsx b/figma/mappings/core-components/TabPanel.figma.jsx
new file mode 100644
index 0000000000..164dd6902d
--- /dev/null
+++ b/figma/mappings/core-components/TabPanel.figma.jsx
@@ -0,0 +1,86 @@
+import figma from '@figma/code-connect/react';
+import TabPanel from '@semcore/ui/tab-panel';
+
+figma.connect(
+  TabPanel.Item,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10261-95182&t=I48qqNRyVr8Tdi87-11',
+  {
+    variant: { 'textAddon →': 'false' },
+    props: {
+      label: figma.textContent('↳ text'),
+      selected: figma.enum('state', {
+        selected: true,
+      }),
+      disabled: figma.enum('state', {
+        disabled: true,
+      }),
+      addonLeft: figma.boolean('← addon', {
+        true: figma.children('← - - addon properties'),
+        false: undefined,
+      }),
+      addonRight: figma.boolean('addon →', {
+        true: figma.children('addon properties - - →'),
+        false: undefined,
+      }),
+      dot: figma.children('Dot'),
+    },
+    example: ({ selected, disabled, addonLeft, addonRight, label, dot }) => (
+      <TabPanel.Item value={/* value */} selected={selected} disabled={disabled} addonLeft={addonLeft} addonRight={addonRight}>
+        <TabPanel.Item.Text>{label}</TabPanel.Item.Text>
+        {dot}
+      </TabPanel.Item>
+    ),
+  },
+);
+
+figma.connect(
+  TabPanel.Item,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10261-95182&t=I48qqNRyVr8Tdi87-11',
+  {
+    variant: { 'textAddon →': 'true' },
+    props: {
+      label: figma.textContent('↳ text'),
+      selected: figma.enum('state', {
+        selected: true,
+      }),
+      disabled: figma.enum('state', {
+        disabled: true,
+      }),
+      addonLeft: figma.boolean('← addon', {
+        true: figma.children('← - - addon properties'),
+        false: undefined,
+      }),
+      addonRight: figma.boolean('addon →', {
+        true: figma.children('addon properties - - →'),
+        false: undefined,
+      }),
+      textAddon: figma.boolean('textAddon →', {
+        true: figma.textContent('↳ textAddon'),
+        false: undefined,
+      }),
+      dot: figma.children('Dot'),
+    },
+    example: ({ selected, disabled, addonLeft, addonRight, label, textAddon, dot }) => (
+      <TabPanel.Item value={/* value */} selected={selected} disabled={disabled} addonLeft={addonLeft} addonRight={addonRight}>
+        <TabPanel.Item.Text>{label}</TabPanel.Item.Text>
+        <TabPanel.Item.Addon>{textAddon}</TabPanel.Item.Addon>
+        {dot}
+      </TabPanel.Item>
+    ),
+  },
+);
+
+figma.connect(
+  TabPanel,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=53542-883&t=I48qqNRyVr8Tdi87-11',
+  {
+    props: {
+      children: figma.children('TabPanel.Item'),
+    },
+    example: ({ children }) => (
+      <TabPanel aria-label='/* Add aria-label */'>
+        {children}
+      </TabPanel>
+    ),
+  },
+);
diff --git a/figma/mappings/core-components/Tag.figma.jsx b/figma/mappings/core-components/Tag.figma.jsx
new file mode 100644
index 0000000000..e323d1d7ed
--- /dev/null
+++ b/figma/mappings/core-components/Tag.figma.jsx
@@ -0,0 +1,78 @@
+import figma from '@figma/code-connect';
+import Tag from '@semcore/ui/tag';
+
+figma.connect(
+  Tag,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring--%E2%9D%96-Core-Components?node-id=44497-213147&t=0hjqYEp7RXqjnbR7-11',
+  {
+    variant: { 'close button': 'false' },
+    props: {
+      label: figma.textContent('↳ text'),
+      size: figma.enum('size', {
+        XL: 'xl',
+        L: 'l',
+        M: 'm',
+      }),
+      theme: figma.enum('theme', {
+        primary: 'primary',
+        secondary: 'secondary',
+      }),
+      color: figma.enum('color', {
+        'gray-500': 'gray-500',
+        'blue-500': 'blue-500',
+        'green-500': 'green-500',
+        'orange-500': 'orange-500',
+        'yellow-500': 'yellow-500',
+        'red-500': 'red-500',
+        'violet-500': 'violet-500',
+        'invert': 'invert',
+      }),
+      active: figma.enum('state', {
+        active: true,
+      }),
+      disabled: figma.enum('state', { disabled: true }),
+
+      // These mappings show instances, but they are not working with conditional rendering for now. So I'm leaving them for possible future updates from Code Connect.
+      // addonLeft: figma.boolean('← addon', {
+      //   true: figma.instance('← - - addon properties'),
+      //   false: undefined,
+      // }),
+      // circle: figma.boolean('← circle addon', {
+      //   true: figma.instance('{ TagCircle }'),
+      //   false: undefined,
+      // }),
+      // textAddon: figma.boolean('↳ textAddon', {
+      //   true: figma.textContent('{ ↳ textAddon }'),
+      //   false: undefined,
+      // }),
+
+      addonLeft: figma.boolean('← addon', {
+        true: <Tag.Addon>{/* addon */}</Tag.Addon>,
+        false: undefined,
+      }),
+      circle: figma.boolean('← circle addon', {
+        true: <Tag.Circle><img src='https://...' /></Tag.Circle>,
+        false: undefined,
+      }),
+      textAddon: figma.boolean('textAddon ->', {
+        true: <Tag.Addon>{/* text addon */}</Tag.Addon>,
+        false: undefined,
+      }),
+    },
+
+    example: ({ label, size, theme, color, active, disabled, addonLeft, textAddon, circle }) => (
+      <Tag
+        size={size}
+        theme={theme}
+        color={color}
+        active={active}
+        disabled={disabled}
+      >
+        {circle}
+        {addonLeft}
+        <Tag.Text>{label}</Tag.Text>
+        {textAddon}
+      </Tag>
+    ),
+  },
+);
diff --git a/figma/mappings/core-components/TagAdditional.figma.jsx b/figma/mappings/core-components/TagAdditional.figma.jsx
new file mode 100644
index 0000000000..4701a4d196
--- /dev/null
+++ b/figma/mappings/core-components/TagAdditional.figma.jsx
@@ -0,0 +1,31 @@
+import figma from '@figma/code-connect';
+import MathPlusM from '@semcore/icon/Math/m';
+import Tag from '@semcore/ui/tag';
+
+figma.connect(
+  Tag,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring--%E2%9D%96-Core-Components?node-id=12026-120376&t=TbZAkRDwOBuye4Je-11',
+  {
+    props: {
+      label: figma.textContent('↳ text'),
+      size: figma.enum('size', {
+        XL: 'xl',
+        L: 'l',
+        M: 'm',
+      }),
+      active: figma.enum('state', {
+        active: true,
+      }),
+    },
+    example: ({ label, size, active }) => (
+      <Tag
+        size={size}
+        theme='additional'
+        active={active}
+        addonLeft={MathPlusM}
+      >
+        {label}
+      </Tag>
+    ),
+  },
+);
diff --git a/figma/mappings/core-components/TagContainer.figma.jsx b/figma/mappings/core-components/TagContainer.figma.jsx
new file mode 100644
index 0000000000..1c16cc14fa
--- /dev/null
+++ b/figma/mappings/core-components/TagContainer.figma.jsx
@@ -0,0 +1,72 @@
+import figma from '@figma/code-connect';
+import Tag, { TagContainer } from '@semcore/ui/tag';
+
+figma.connect(
+  TagContainer,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring--%E2%9D%96-Core-Components?node-id=44497-213147&t=0hjqYEp7RXqjnbR7-11',
+  {
+    variant: { 'close button': 'true' },
+    props: {
+      label: figma.textContent('↳ text'),
+      size: figma.enum('size', {
+        XL: 'xl',
+        L: 'l',
+        M: 'm',
+      }),
+      theme: figma.enum('theme', {
+        primary: 'primary',
+        secondary: 'secondary',
+      }),
+      color: figma.enum('color', {
+        'gray-500': 'gray-500',
+        'blue-500': 'blue-500',
+        'green-500': 'green-500',
+        'orange-500': 'orange-500',
+        'yellow-500': 'yellow-500',
+        'red-500': 'red-500',
+        'violet-500': 'violet-500',
+        'invert': 'invert',
+      }),
+      active: figma.enum('state', {
+        active: true,
+      }),
+      disabled: figma.enum('state', { disabled: true }),
+
+      // These mappings show instances, but they are not working with conditional rendering for now. So I'm leaving them for possible future updates from Code Connect.
+      // addonLeft: figma.boolean('← addon', {
+      //   true: figma.instance('← - - addon properties'),
+      //   false: undefined,
+      // }),
+      // circle: figma.boolean('← circle addon', {
+      //   true: figma.instance('{ TagCircle }'),
+      //   false: undefined,
+      // }),
+      // textAddon: figma.boolean('↳ textAddon', {
+      //   true: figma.textContent('{ ↳ textAddon }'),
+      //   false: undefined,
+      // }),
+
+      addonLeft: figma.boolean('← addon', {
+        true: <TagContainer.Tag.Addon>{/* addon */}</TagContainer.Tag.Addon>,
+      }),
+      circle: figma.boolean('← circle addon', {
+        true: <TagContainer.Tag.Circle><img src='#' /></TagContainer.Tag.Circle>,
+      }),
+      textAddon: figma.boolean('↳ textAddon', {
+        true: <TagContainer.Tag.Addon>{/* text addon */}</TagContainer.Tag.Addon>,
+      }),
+    },
+
+    example: ({ label, theme, color, size, addonLeft, textAddon, circle, active, disabled }) => (
+      <TagContainer theme={theme} color={color} size={size} active={active} disabled={disabled}>
+        <TagContainer.Tag>
+          {circle}
+          {addonLeft}
+          <TagContainer.Tag.Text>{label}</TagContainer.Tag.Text>
+          {textAddon}
+        </TagContainer.Tag>
+        <TagContainer.Close />
+      </TagContainer>
+    ),
+  },
+);
diff --git a/figma/mappings/core-components/Textarea.figma.jsx b/figma/mappings/core-components/Textarea.figma.jsx
new file mode 100644
index 0000000000..cda500f2f5
--- /dev/null
+++ b/figma/mappings/core-components/Textarea.figma.jsx
@@ -0,0 +1,89 @@
+import figma from '@figma/code-connect';
+import { Flex } from '@semcore/ui/base-components';
+import Textarea from '@semcore/ui/textarea';
+import { Text } from '@semcore/ui/typography';
+
+figma.connect(
+  Textarea.Value,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=53577-8724&t=I48qqNRyVr8Tdi87-11',
+  {
+    props: {
+      value: figma.textContent('↳ text'),
+    },
+  },
+);
+
+figma.connect(
+  Textarea,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10217-100589&t=Q0bSsRErIQ7IEZAU-11',
+  {
+    props: {
+      placeholder: figma.nestedProps('Textarea.Value', {
+        value: figma.textContent('↳ text'),
+      }),
+      size: figma.enum('size', {
+        M: 'm',
+        L: 'l',
+      }),
+      state: figma.enum('state', {
+        normal: 'normal',
+        invalid: 'invalid',
+        valid: 'valid',
+      }),
+      disabled: figma.enum('state', { disabled: true }),
+      readOnly: figma.boolean('read-only'),
+      resize: figma.boolean('resize'),
+    },
+    example: ({ placeholder, size, state, disabled, readOnly, resize }) => <Textarea placeholder={placeholder.value} size={size} state={state} disabled={disabled} readOnly={readOnly} resize={resize} />,
+  },
+);
+
+figma.connect(
+  Textarea,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=11614-143876&t=Q0bSsRErIQ7IEZAU-11',
+  {
+    variant: { 'label position': 'top' },
+    props: {
+      label: figma.textContent('↳ label'),
+      textarea: figma.children('Textarea'),
+    },
+    example: ({ label, textarea }) => (
+      <Flex direction='column' gap={2}>
+        <Flex justifyContent='space-between'>
+          <Text tag='label' htmlFor='/* input id */' size='/* fontSize */'>
+            {label}
+          </Text>
+          <Text size='/* fontSize */' color='text-secondary'>
+            (optional)
+          </Text>
+        </Flex>
+        {textarea}
+      </Flex>
+    ),
+  },
+);
+
+figma.connect(
+  Textarea,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=11614-143876&t=Q0bSsRErIQ7IEZAU-11',
+  {
+    variant: { 'label position': 'left' },
+    props: {
+      label: figma.textContent('↳ label'),
+      textarea: figma.children('Textarea'),
+    },
+    example: ({ label, textarea }) => (
+      <Flex gap={6}>
+        <Flex direction='column' mt={/* value */}>
+          <Text tag='label' htmlFor='/* input id */' size='/* fontSize */'>
+            {label}
+          </Text>
+          <Text size='/* fontSize */' color='text-secondary'>
+            (optional)
+          </Text>
+        </Flex>
+        {textarea}
+      </Flex>
+    ),
+  },
+);
diff --git a/figma/mappings/core-components/TimePicker.WithLabel.figma.ts b/figma/mappings/core-components/TimePicker.WithLabel.figma.ts
new file mode 100644
index 0000000000..03a2492712
--- /dev/null
+++ b/figma/mappings/core-components/TimePicker.WithLabel.figma.ts
@@ -0,0 +1,34 @@
+import { connect } from '../../src/connect';
+import type { ConnectSettings } from '../../src/connect';
+
+const label = connect.childCode('Input.Label');
+const input = connect.childCode('TimePicker');
+
+const labelPosition = String(
+  connect.getPropertyValue('label position') ?? 'top',
+).toLowerCase();
+const isLeft = labelPosition === 'left';
+
+const example = isLeft
+  ? `
+<Flex direction='row' gap={6}>
+${label ?? ''}
+${input ?? ''}
+</Flex>
+`
+  : `
+<Flex direction='column' gap={2}>
+${label ?? ''}
+${input ?? ''}
+</Flex>
+`;
+
+export const settings: ConnectSettings = {
+  example,
+  id: 'TimePickerWithLabel',
+  url: 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=56367-5124',
+  imports: [
+    'import { Flex } from "@semcore/ui/base-components"',
+    'import TimePicker from "@semcore/ui/time-picker"',
+  ],
+};
diff --git a/figma/mappings/core-components/TimePicker.figma.ts b/figma/mappings/core-components/TimePicker.figma.ts
new file mode 100644
index 0000000000..7525b6756c
--- /dev/null
+++ b/figma/mappings/core-components/TimePicker.figma.ts
@@ -0,0 +1,24 @@
+import { connect } from '../../src/connect';
+import type { ConnectSettings } from '../../src/connect';
+
+const is12Hour = connect.getBoolean('12 hours', { true: 'is12Hour' });
+const disabled = connect.getEnum('state', { disabled: 'disabled' });
+const state = connect.getEnum('state', { invalid: 'state="invalid"' });
+const size = connect.getEnum('size', { L: 'size="l"' });
+
+const example = `
+<TimePicker
+  aria-label={/* if there's no visible label */}
+  ${is12Hour ?? ''}
+  ${size ?? ''}
+  ${disabled ?? ''}
+  ${state ?? ''}
+/>
+`;
+
+export const settings: ConnectSettings = {
+  example,
+  id: 'TimePicker',
+  url: 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10301-133764',
+  imports: ['import TimePicker from "@semcore/ui/time-picker"'],
+};
diff --git a/figma/mappings/core-components/Tooltip.figma.jsx b/figma/mappings/core-components/Tooltip.figma.jsx
new file mode 100644
index 0000000000..d43a581da6
--- /dev/null
+++ b/figma/mappings/core-components/Tooltip.figma.jsx
@@ -0,0 +1,44 @@
+import figma from '@figma/code-connect';
+import Tooltip from '@semcore/ui/tooltip';
+
+figma.connect(
+  Tooltip,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring--%E2%9D%96-Core-Components?node-id=10355-260578&t=TbZAkRDwOBuye4Je-11',
+  {
+    props: {
+      title: figma.textContent('↳ text'),
+      theme: figma.enum('theme', {
+        '⚪️ default': 'default',
+        '⚫️ invert': 'invert',
+        '🔴 warning': 'warning',
+      }),
+      placement: figma.nestedProps('placement', {
+        placement: figma.enum('placement', {
+          'top-start': 'top-start',
+          'top-end': 'top-end',
+          'top': 'top',
+          'bottom-start': 'bottom-start',
+          'bottom-end': 'bottom-end',
+          'bottom': 'bottom',
+          'left': 'left',
+          'left-start': 'left-start',
+          'left-end': 'left-end',
+          'right': 'right',
+          'right-start': 'right-start',
+          'right-end': 'right-end',
+        }),
+      }),
+    },
+    example: ({ title, theme, placement }) => (
+      <Tooltip
+        title={title}
+        theme={theme}
+        placement={placement.placement}
+        tag={/* Optionally define addon tag */}
+        {...addonProps}
+      >
+        {/* Place tooltip's trigger here */}
+      </Tooltip>
+    ),
+  },
+);
diff --git a/figma/mappings/core-components/WidgetEmpty.figma.jsx b/figma/mappings/core-components/WidgetEmpty.figma.jsx
new file mode 100644
index 0000000000..00c13a8664
--- /dev/null
+++ b/figma/mappings/core-components/WidgetEmpty.figma.jsx
@@ -0,0 +1,81 @@
+import figma from '@figma/code-connect';
+import { Box } from '@semcore/ui/base-components';
+import Link from '@semcore/ui/link';
+import WidgetEmpty, { NoData, Error, getIconPath } from '@semcore/ui/widget-empty';
+
+// Mappings for Illustration component?
+
+figma.connect(
+  NoData,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=56115-302929', {
+    variant: { case: 'No data' },
+
+    example: () => (
+      <NoData />
+    ),
+  },
+);
+
+figma.connect(
+  Error,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=56115-302929', {
+    variant: { case: 'Error (we know about)' },
+    props: {
+      actions: figma.children('Button'),
+    },
+
+    example: ({ actions }) => (
+      <Error>
+        <Box mt={4}>
+          {actions}
+        </Box>
+      </Error>
+    ),
+  },
+);
+
+figma.connect(
+  Error,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=56115-302929', {
+    variant: { case: 'Error (we do not know about)' },
+    props: {
+      actions: figma.children('Button'),
+    },
+
+    example: ({ actions }) => (
+      <Error description={(
+        <>
+          Try again later. If the problem persists,
+          {' '}
+          <Link href='https://www.semrush.com/company/contacts/'>contact our support</Link>
+        </>
+      )}
+      >
+        <Box mt={4}>
+          {actions}
+        </Box>
+      </Error>
+    ),
+  },
+);
+
+figma.connect(
+  WidgetEmpty,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=56115-302929', {
+    variant: { case: 'Custom' },
+    props: {
+      title: figma.textContent('↳ title'),
+      description: figma.textContent('↳ description'),
+      actions: figma.children('Button'),
+    },
+    example: ({ title, description, actions }) => (
+      <WidgetEmpty icon={getIconPath(/* Specify illustration type, for example, 'nothing-found' */)}>
+        <WidgetEmpty.Title>{title}</WidgetEmpty.Title>
+        <WidgetEmpty.Description>{description}</WidgetEmpty.Description>
+        <Box mt={4}>
+          {actions}
+        </Box>
+      </WidgetEmpty>
+    ),
+  },
+);
diff --git a/figma/mappings/core-components/date-picker/DatePicker.Popper.figma.template.js b/figma/mappings/core-components/date-picker/DatePicker.Popper.figma.template.js
new file mode 100644
index 0000000000..b58dde3df9
--- /dev/null
+++ b/figma/mappings/core-components/date-picker/DatePicker.Popper.figma.template.js
@@ -0,0 +1,44 @@
+// https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=53984-3477
+// import { DatePicker } from '@semcore/ui/date-picker'
+// import Divider from '@semcore/ui/divider'
+
+const figma = require('figma');
+const instance = figma.selectedInstance;
+
+const variant = instance.getPropertyValue('variant');
+const notice = instance.getBoolean('notice ↓');
+let popperCode;
+
+if (variant === 'default' && !notice) {
+  popperCode = '<DatePicker.Popper />';
+} else {
+  popperCode = '<DatePicker.Popper w="min-content"><DatePicker.Header /><DatePicker.Calendar />';
+
+  if (variant === 'default') {
+    popperCode += '<DatePicker.Today />';
+  } else {
+    const footer = instance.findConnectedInstances((child) => true, { path: ['Flex [bottom controls]'] });
+    let footerCode;
+    for (const child of footer) {
+      footerCode = figma.tsx`${footerCode}${child.executeTemplate().example}`;
+    }
+    if (footer.length) footerCode = figma.tsx`<Divider /><Flex justifyContent='space-between'>${footerCode}</Flex>`;
+    popperCode = figma.tsx`${popperCode}${footerCode}`;
+  }
+  if (notice) {
+    const children = instance.findConnectedInstances((child) => true);
+    const noticeCode = children[children.length - 1].executeTemplate().example;
+    popperCode = figma.tsx`${popperCode}${noticeCode}`;
+  }
+  popperCode = figma.tsx`${popperCode}</DatePicker.Popper>`;
+}
+
+export default {
+  example: figma.tsx`
+<DatePicker>
+  <DatePicker.Trigger />
+  ${popperCode}
+</DatePicker>
+  `,
+  id: 'DatePicker.Popper',
+};
diff --git a/figma/mappings/core-components/date-picker/DatePicker.Trigger.figma.template.js b/figma/mappings/core-components/date-picker/DatePicker.Trigger.figma.template.js
new file mode 100644
index 0000000000..25bdb4e942
--- /dev/null
+++ b/figma/mappings/core-components/date-picker/DatePicker.Trigger.figma.template.js
@@ -0,0 +1,24 @@
+// https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=54076-2819
+// import { DatePicker } from '@semcore/ui/date-picker'
+
+const figma = require('figma');
+const instance = figma.selectedInstance.findConnectedInstance('DatePicker.InputTrigger');
+
+const disabled = instance.getEnum('state', { disabled: 'disabled' });
+const state = instance.getEnum('state', { invalid: 'state="invalid"' });
+const size = instance.getEnum('size', { L: 'size="l"' });
+
+export default {
+  example: figma.tsx`
+<DatePicker>
+  <DatePicker.Trigger
+    aria-label={/* set if there's no visible label */}
+    ${size}
+    ${state}
+    ${disabled}
+  />
+  <DatePicker.Popper />
+</DatePicker>
+  `,
+  id: 'DatePicker.Trigger',
+};
diff --git a/figma/mappings/core-components/date-picker/DateRangeComparator.Popper.figma.template.js b/figma/mappings/core-components/date-picker/DateRangeComparator.Popper.figma.template.js
new file mode 100644
index 0000000000..50d8f3fa64
--- /dev/null
+++ b/figma/mappings/core-components/date-picker/DateRangeComparator.Popper.figma.template.js
@@ -0,0 +1,42 @@
+// https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=54082-61809
+// import { DateRangeComparator } from '@semcore/ui/date-picker'
+
+const figma = require('figma');
+const instance = figma.selectedInstance;
+
+const notice = instance.getBoolean('notice ↓');
+let popperCode;
+
+if (notice) {
+  const children = instance.findConnectedInstances((child) => true);
+  const noticeCode = children[children.length - 1].executeTemplate().example;
+  popperCode = figma.tsx`<DateRangeComparator.Popper>
+  <DateRangeComparator.Header />
+  <DateRangeComparator.Body>
+    <DateRangeComparator.RangeCalendar />
+    <DateRangeComparator.Periods>
+      <DateRangeComparator.Periods.Divider />
+      <DateRangeComparator.Periods.Column>
+        <DateRangeComparator.Periods.Options />
+        <DateRangeComparator.Periods.Controls>
+          <DateRangeComparator.Apply />
+          <DateRangeComparator.Reset />
+        </DateRangeComparator.Periods.Controls>
+      </DateRangeComparator.Periods.Column>
+    </DateRangeComparator.Periods>
+  </DateRangeComparator.Body>
+  ${noticeCode}
+</DateRangeComparator.Popper>`;
+} else {
+  popperCode = '<DateRangeComparator.Popper />';
+}
+
+export default {
+  example: figma.tsx`
+<DateRangeComparator>
+  <DateRangeComparator.Trigger />
+  ${popperCode}
+</DateRangeComparator>
+  `,
+  id: 'DateRangeComparator.Popper',
+};
diff --git a/figma/mappings/core-components/date-picker/DateRangeComparator.Trigger.figma.template.js b/figma/mappings/core-components/date-picker/DateRangeComparator.Trigger.figma.template.js
new file mode 100644
index 0000000000..0639cd00fc
--- /dev/null
+++ b/figma/mappings/core-components/date-picker/DateRangeComparator.Trigger.figma.template.js
@@ -0,0 +1,16 @@
+// https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=54087-63090
+// import { DateRangeComparator } from '@semcore/ui/date-picker'
+
+const figma = require('figma');
+
+export default {
+  example: figma.tsx`
+<DateRangeComparator>
+  <DateRangeComparator.Trigger
+    aria-label={/* set if there's no visible label */}
+  />
+  <DateRangeComparator.Popper />
+</DateRangeComparator>
+  `,
+  id: 'DateRangeComparator.Trigger',
+};
diff --git a/figma/mappings/core-components/date-picker/DateRangePicker.Popper.figma.template.js b/figma/mappings/core-components/date-picker/DateRangePicker.Popper.figma.template.js
new file mode 100644
index 0000000000..b0f3f44b9f
--- /dev/null
+++ b/figma/mappings/core-components/date-picker/DateRangePicker.Popper.figma.template.js
@@ -0,0 +1,54 @@
+// https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10322-131390
+// import { DateRangePicker } from '@semcore/ui/date-picker'
+
+const figma = require('figma');
+const instance = figma.selectedInstance;
+
+const notice = instance.getBoolean('notice ↓');
+let popperCode;
+
+if (notice) {
+  const children = instance.findConnectedInstances((child) => true);
+  const noticeCode = children[children.length - 1].executeTemplate().example;
+  popperCode = figma.tsx`<DateRangePicker.Popper w='min-content'>
+  <Flex>
+    <Flex gap={4}>
+      <Box>
+        <DateRangePicker.Header>
+          <DateRangePicker.Prev />
+          <DateRangePicker.Title />
+        </DateRangePicker.Header>
+        <DateRangePicker.Calendar />
+      </Box>
+      <Box>
+        <DateRangePicker.Header>
+          <DateRangePicker.Title />
+          <DateRangePicker.Next />
+        </DateRangePicker.Header>
+        <DateRangePicker.Calendar />
+      </Box>
+    </Flex>
+    <Divider m="-16px 16px" orientation="vertical" />
+    <Flex direction="column" justifyContent="space-between">
+      <DateRangePicker.Period />
+      <Flex mt={2} gap={2}>
+        <DateRangePicker.Apply />
+        <DateRangePicker.Reset />
+      </Flex>
+    </Flex>
+  </Flex>
+  ${noticeCode}
+</DateRangePicker.Popper>`;
+} else {
+  popperCode = '<DateRangePicker.Popper />';
+}
+
+export default {
+  example: figma.tsx`
+<DateRangePicker>
+  <DateRangePicker.Trigger />
+  ${popperCode}
+</DateRangePicker>
+  `,
+  id: 'DateRangePicker.Popper',
+};
diff --git a/figma/mappings/core-components/date-picker/DateRangePicker.Trigger.figma.template.js b/figma/mappings/core-components/date-picker/DateRangePicker.Trigger.figma.template.js
new file mode 100644
index 0000000000..b742c1133e
--- /dev/null
+++ b/figma/mappings/core-components/date-picker/DateRangePicker.Trigger.figma.template.js
@@ -0,0 +1,24 @@
+// https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=54076-2980
+// import { DateRangePicker } from '@semcore/ui/date-picker'
+
+const figma = require('figma');
+const instance = figma.selectedInstance.findConnectedInstance('DatePicker.InputTrigger');
+
+const disabled = instance.getEnum('state', { disabled: 'disabled' });
+const state = instance.getEnum('state', { invalid: 'state="invalid"' });
+const size = instance.getEnum('size', { L: 'size="l"' });
+
+export default {
+  example: figma.tsx`
+<DateRangePicker>
+  <DateRangePicker.Trigger
+    aria-label={/* set if there's no visible label */}
+    ${size}
+    ${state}
+    ${disabled}
+  />
+  <DateRangePicker.Popper />
+</DateRangePicker>
+  `,
+  id: 'DateRangePicker.Trigger',
+};
diff --git a/figma/mappings/core-components/date-picker/InputTrigger.figma.template.js b/figma/mappings/core-components/date-picker/InputTrigger.figma.template.js
new file mode 100644
index 0000000000..425e7d83d5
--- /dev/null
+++ b/figma/mappings/core-components/date-picker/InputTrigger.figma.template.js
@@ -0,0 +1,10 @@
+// https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=54062-2648
+
+const figma = require('figma');
+
+export default {
+  example: figma.tsx`
+{/* this is an internal design component, inspect the parent */}
+  `,
+  id: 'DatePicker.InputTrigger',
+};
diff --git a/figma/mappings/core-components/date-picker/MonthPicker.Popper.figma.template.js b/figma/mappings/core-components/date-picker/MonthPicker.Popper.figma.template.js
new file mode 100644
index 0000000000..13ce467074
--- /dev/null
+++ b/figma/mappings/core-components/date-picker/MonthPicker.Popper.figma.template.js
@@ -0,0 +1,14 @@
+// https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10322-258100
+// import { MonthPicker } from '@semcore/ui/date-picker'
+
+const figma = require('figma');
+
+export default {
+  example: figma.tsx`
+<MonthPicker>
+  <MonthPicker.Trigger />
+  <MonthPicker.Popper />
+</MonthPicker>
+  `,
+  id: 'MonthPicker.Popper',
+};
diff --git a/figma/mappings/core-components/date-picker/MonthPicker.Trigger.figma.template.js b/figma/mappings/core-components/date-picker/MonthPicker.Trigger.figma.template.js
new file mode 100644
index 0000000000..7873d590d2
--- /dev/null
+++ b/figma/mappings/core-components/date-picker/MonthPicker.Trigger.figma.template.js
@@ -0,0 +1,24 @@
+// https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=54076-2807
+// import { MonthPicker } from '@semcore/ui/date-picker'
+
+const figma = require('figma');
+const instance = figma.selectedInstance.findConnectedInstance('DatePicker.InputTrigger');
+
+const disabled = instance.getEnum('state', { disabled: 'disabled' });
+const state = instance.getEnum('state', { invalid: 'state="invalid"' });
+const size = instance.getEnum('size', { L: 'size="l"' });
+
+export default {
+  example: figma.tsx`
+<MonthPicker>
+  <MonthPicker.Trigger
+    aria-label={/* set if there's no visible label */}
+    ${size}
+    ${state}
+    ${disabled}
+  />
+  <MonthPicker.Popper />
+</MonthPicker>
+  `,
+  id: 'MonthPicker.Trigger',
+};
diff --git a/figma/mappings/core-components/date-picker/MonthRangePicker.Popper.figma.template.js b/figma/mappings/core-components/date-picker/MonthRangePicker.Popper.figma.template.js
new file mode 100644
index 0000000000..c914b5ed73
--- /dev/null
+++ b/figma/mappings/core-components/date-picker/MonthRangePicker.Popper.figma.template.js
@@ -0,0 +1,56 @@
+// https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10322-258136
+// import { MonthRangePicker } from '@semcore/ui/date-picker'
+// import Divider from '@semcore/ui/divider'
+// import { Flex, Box } from '@semcore/ui/base-components'
+
+const figma = require('figma');
+const instance = figma.selectedInstance;
+
+const notice = instance.getBoolean('notice ↓');
+let popperCode;
+
+if (notice) {
+  const children = instance.findConnectedInstances((child) => true);
+  const noticeCode = children[children.length - 1].executeTemplate().example;
+  popperCode = figma.tsx`<MonthRangePicker.Popper w='min-content'>
+  <Flex>
+    <Flex gap={4}>
+      <Box>
+        <MonthRangePicker.Header>
+          <MonthRangePicker.Prev />
+          <MonthRangePicker.Title />
+        </MonthRangePicker.Header>
+        <MonthRangePicker.Calendar />
+      </Box>
+      <Box>
+        <MonthRangePicker.Header>
+          <MonthRangePicker.Title />
+          <MonthRangePicker.Next />
+        </MonthRangePicker.Header>
+        <MonthRangePicker.Calendar />
+      </Box>
+    </Flex>
+    <Divider m="-16px 16px" orientation="vertical" />
+    <Flex direction="column" justifyContent="space-between">
+      <MonthRangePicker.Period />
+      <Flex mt={2} gap={2}>
+        <MonthRangePicker.Apply />
+        <MonthRangePicker.Reset />
+      </Flex>
+    </Flex>
+  </Flex>
+  ${noticeCode}
+</MonthRangePicker.Popper>`;
+} else {
+  popperCode = '<MonthRangePicker.Popper />';
+}
+
+export default {
+  example: figma.tsx`
+<MonthRangePicker>
+  <MonthRangePicker.Trigger />
+  ${popperCode}
+</MonthRangePicker>
+  `,
+  id: 'MonthRangePicker.Popper',
+};
diff --git a/figma/mappings/core-components/date-picker/MonthRangePicker.Trigger.figma.template.js b/figma/mappings/core-components/date-picker/MonthRangePicker.Trigger.figma.template.js
new file mode 100644
index 0000000000..0e197e0c71
--- /dev/null
+++ b/figma/mappings/core-components/date-picker/MonthRangePicker.Trigger.figma.template.js
@@ -0,0 +1,24 @@
+// https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=54076-2981
+// import { MonthRangePicker } from '@semcore/ui/date-picker'
+
+const figma = require('figma');
+const instance = figma.selectedInstance.findConnectedInstance('DatePicker.InputTrigger');
+
+const disabled = instance.getEnum('state', { disabled: 'disabled' });
+const state = instance.getEnum('state', { invalid: 'state="invalid"' });
+const size = instance.getEnum('size', { L: 'size="l"' });
+
+export default {
+  example: figma.tsx`
+<MonthRangePicker>
+  <MonthRangePicker.Trigger
+    aria-label={/* set if there's no visible label */}
+    ${size}
+    ${state}
+    ${disabled}
+  />
+  <MonthRangePicker.Popper />
+</MonthRangePicker>
+  `,
+  id: 'MonthRangePicker.Trigger',
+};
diff --git a/figma/mappings/core-components/select/Select.Option.Checkbox.figma.jsx b/figma/mappings/core-components/select/Select.Option.Checkbox.figma.jsx
new file mode 100644
index 0000000000..e8c54486e9
--- /dev/null
+++ b/figma/mappings/core-components/select/Select.Option.Checkbox.figma.jsx
@@ -0,0 +1,57 @@
+import figma from '@figma/code-connect';
+import Select from '@semcore/ui/select';
+
+// TODO: Add addons
+// Select.Option.Checkbox without hint
+
+figma.connect(
+  Select.Option,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=11805-136032&t=TXEgCxM6iJO0FYiJ-11',
+  {
+    variant: { hint: 'false' },
+    props: {
+      content: figma.textContent('↳ text'),
+      selected: figma.enum('state', {
+        selected: true,
+      }),
+      disabled: figma.enum('state', {
+        disabled: true,
+      }),
+    },
+    example: ({ content, selected, disabled }) => (
+      <Select.Option value={/* value */} selected={selected} disabled={disabled}>
+        <Select.Option.Checkbox />
+        {content}
+      </Select.Option>
+    ),
+  },
+);
+
+// Select.Option.Checkbox with hint
+
+figma.connect(
+  Select.Option,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=11805-136032&t=TXEgCxM6iJO0FYiJ-11',
+  {
+    variant: { hint: 'true' },
+    props: {
+      content: figma.textContent('↳ text'),
+      selected: figma.enum('state', {
+        selected: true,
+      }),
+      disabled: figma.enum('state', {
+        disabled: true,
+      }),
+      hint: figma.textContent('↳ hint'),
+    },
+    example: ({ content, selected, disabled, hint }) => (
+      <Select.Option value={/* value */} selected={selected} disabled={disabled}>
+        <Select.Option.Content>
+          <Select.Option.Checkbox />
+          {content}
+        </Select.Option.Content>
+        <Select.Option.Hint>{hint}</Select.Option.Hint>
+      </Select.Option>
+    ),
+  },
+);
diff --git a/figma/mappings/core-components/select/Select.Option.Country.figma.jsx b/figma/mappings/core-components/select/Select.Option.Country.figma.jsx
new file mode 100644
index 0000000000..6dd78664e5
--- /dev/null
+++ b/figma/mappings/core-components/select/Select.Option.Country.figma.jsx
@@ -0,0 +1,58 @@
+import figma from '@figma/code-connect';
+import type { iso2Name } from '@semcore/ui/flags';
+import Flags from '@semcore/ui/flags';
+import Select from '@semcore/ui/select';
+
+// TODO: Add addons
+
+figma.connect(
+  Select.Option,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=11805-136094&t=TXEgCxM6iJO0FYiJ-11',
+  {
+    variant: { hint: 'false' },
+    props: {
+      content: figma.textContent('↳ text'),
+      selected: figma.enum('state', {
+        selected: true,
+      }),
+      disabled: figma.enum('state', {
+        disabled: true,
+      }),
+    },
+    example: ({ content, selected, disabled }) => (
+      <Select.Option value={/* value */} selected={selected} disabled={disabled}>
+        <Flags iso2={/* value as keyof typeof iso2Name */} mr={2} />
+        {/* {formatName(iso2Name[value])} */}
+        {content}
+      </Select.Option>
+    ),
+  },
+);
+
+figma.connect(
+  Select.Option,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=11805-136094&t=TXEgCxM6iJO0FYiJ-11',
+  {
+    variant: { hint: 'true' },
+    props: {
+      content: figma.textContent('↳ text'),
+      selected: figma.enum('state', {
+        selected: true,
+      }),
+      disabled: figma.enum('state', {
+        disabled: true,
+      }),
+      hint: figma.textContent('↳ hint'),
+    },
+    example: ({ content, selected, disabled, hint }) => (
+      <Select.Option value={/* value */} selected={selected} disabled={disabled}>
+        <Select.Option.Content>
+          <Flags iso2={/* value as keyof typeof iso2Name */} mr={2} />
+          {/* {formatName(iso2Name[value])} */}
+          {content}
+        </Select.Option.Content>
+        <Select.Option.Hint>{hint}</Select.Option.Hint>
+      </Select.Option>
+    ),
+  },
+);
diff --git a/figma/mappings/core-components/select/Select.Option.Group.figma.jsx b/figma/mappings/core-components/select/Select.Option.Group.figma.jsx
new file mode 100644
index 0000000000..c48f00d489
--- /dev/null
+++ b/figma/mappings/core-components/select/Select.Option.Group.figma.jsx
@@ -0,0 +1,27 @@
+import figma from '@figma/code-connect';
+import Select from '@semcore/ui/select';
+
+// TODO: Add addons
+
+figma.connect(
+  Select.Group,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=11950-115223',
+  {
+    props: {
+      size: figma.enum('size', {
+        M: 'm',
+        L: 'l',
+      }),
+      title: figma.textContent('↳ title'),
+      subTitle: figma.boolean('subTitle', {
+        true: figma.textContent('↳ subTitle'),
+        false: undefined,
+      }),
+    },
+    example: ({ size, title, subTitle }) => (
+      <Select.Group size={size} title={title} subTitle={subTitle}>
+        {/* options */}
+      </Select.Group>
+    ),
+  },
+);
diff --git a/figma/mappings/core-components/select/Select.Option.Message.figma.jsx b/figma/mappings/core-components/select/Select.Option.Message.figma.jsx
new file mode 100644
index 0000000000..7a23302528
--- /dev/null
+++ b/figma/mappings/core-components/select/Select.Option.Message.figma.jsx
@@ -0,0 +1,144 @@
+import figma from '@figma/code-connect';
+import { Flex } from '@semcore/ui/base-components';
+import Button, { ButtonLink } from '@semcore/ui/button';
+import Notice from '@semcore/ui/notice';
+import { Text } from '@semcore/ui/typography';
+
+// "Loading" message
+
+figma.connect(
+  Flex,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=12179-115948&t=TXEgCxM6iJO0FYiJ-11',
+  {
+    props: {
+      text: figma.textContent('↳ text'),
+    },
+    example: ({ text }) => (
+      <Flex direction='column' alignItems='start' gap={1} p={2}>
+        <Text size={/* fontSize */} use='secondary' aria-live='polite' role='status'>
+          {text}
+        </Text>
+      </Flex>
+    ),
+  },
+);
+
+// "Nothing found" message
+
+figma.connect(
+  Flex,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=12179-116073&m=dev',
+  {
+    props: {
+      text: figma.textContent('↳ text'),
+    },
+    example: ({ text }) => (
+      <Flex direction='column' alignItems='start' gap={1} p={2}>
+        <Text size={/* fontSize */} use='secondary' aria-live='polite' role='status'>
+          {text}
+        </Text>
+      </Flex>
+    ),
+  },
+);
+
+// "Error" message
+
+figma.connect(
+  Flex,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=12179-116078&t=TXEgCxM6iJO0FYiJ-11',
+  {
+    props: {
+      text: figma.textContent('↳ text'),
+      button: figma.boolean('button', {
+        true: <ButtonLink addonLeft={/* ReloadIcon */} onClick={/* handleReloadClick */}>Reload</ButtonLink>,
+        false: undefined,
+      }),
+    },
+    example: ({ text, button }) => (
+      <Flex direction='column' alignItems='start' gap={1} p={2}>
+        <Text size={/* fontSize */} use='secondary' aria-live='polite' role='status'>
+          {text}
+        </Text>
+        {button}
+      </Flex>
+    ),
+  },
+);
+
+// Neutral message
+
+figma.connect(
+  Flex,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=11448-133731&t=TXEgCxM6iJO0FYiJ-11',
+  {
+    props: {
+      title: figma.textContent('↳ title'),
+      text: figma.textContent('↳ text'),
+      controls: figma.boolean('controls', {
+        true: <Button />,
+        false: undefined,
+      }),
+    },
+    example: ({ title, text, controls }) => (
+      <Flex direction='column' alignItems='start'>
+        <Text size={/* fontSize */} bold mb={2}>
+          {title}
+        </Text>
+        <Text size={/* fontSize */} mb={1}>
+          {text}
+        </Text>
+        {controls}
+      </Flex>
+    ),
+  },
+);
+
+// Notice with styles for menus
+
+figma.connect(
+  Flex,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=11448-133730&t=TXEgCxM6iJO0FYiJ-11',
+  {
+    props: {
+      title: figma.textContent('↳ title'),
+      text: figma.textContent('↳ text'),
+      theme: figma.enum('theme', {
+        '🟢 limit': 'success',
+        '🔴 danger': 'danger',
+        '🟠 warning': 'warning',
+        '⚪️ muted': 'muted',
+      }),
+      // label: figma.children('iconContainer'),
+      controls: figma.boolean('controls', {
+        true: <Button />,
+        false: undefined,
+      }),
+    },
+    example: ({ title, text, theme, controls }) => (
+      <Notice
+        theme={theme}
+        style={{
+          border: 'none',
+          borderRadius: '0 0 6px 6px',
+          padding: '12px 8px',
+        }}
+      >
+        <Notice.Content>
+          <Notice.Label>
+            {/* icon */}
+          </Notice.Label>
+          <Notice.Title>
+            {title}
+          </Notice.Title>
+          <Notice.Text>
+            {text}
+          </Notice.Text>
+          <Notice.Actions>
+            {controls}
+          </Notice.Actions>
+        </Notice.Content>
+      </Notice>
+    ),
+  },
+);
diff --git a/figma/mappings/core-components/select/Select.Option.figma.jsx b/figma/mappings/core-components/select/Select.Option.figma.jsx
new file mode 100644
index 0000000000..5b1180dcce
--- /dev/null
+++ b/figma/mappings/core-components/select/Select.Option.figma.jsx
@@ -0,0 +1,65 @@
+import figma from '@figma/code-connect';
+import Select from '@semcore/ui/select';
+
+// TODO: Add addons
+// Select.Option/Default without hint
+
+figma.connect(
+  Select.Option,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=14116-116067&t=TXEgCxM6iJO0FYiJ-11',
+  {
+    variant: { hint: 'false' },
+    props: {
+      content: figma.textContent('↳ text'),
+      selected: figma.enum('state', {
+        selected: true,
+      }),
+      disabled: figma.enum('state', {
+        disabled: true,
+      }),
+    },
+    example: ({ content, selected, disabled }) => (
+      <Select.Option value={/* value */} selected={selected} disabled={disabled}>
+        {content}
+      </Select.Option>
+    ),
+  },
+);
+
+// Select.Option/Default with hint
+
+figma.connect(
+  Select.Option,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=14116-116067&t=TXEgCxM6iJO0FYiJ-11',
+  {
+    variant: { hint: 'true' },
+    props: {
+      content: figma.textContent('↳ text'),
+      selected: figma.enum('state', {
+        selected: true,
+      }),
+      disabled: figma.enum('state', {
+        disabled: true,
+      }),
+      hint: figma.textContent('↳ hint'),
+    },
+    example: ({ content, selected, disabled, hint }) => (
+      <Select.Option value={/* value */} selected={selected} disabled={disabled}>
+        <Select.Option.Content>
+          {content}
+        </Select.Option.Content>
+        <Select.Option.Hint>{hint}</Select.Option.Hint>
+      </Select.Option>
+    ),
+  },
+);
+
+// Select.Divider
+
+figma.connect(
+  Select.Divider,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10129-57027&t=TXEgCxM6iJO0FYiJ-11',
+  {
+    example: () => <Select.Divider key='divider' />,
+  },
+);
diff --git a/figma/mappings/core-components/select/Select.figma.jsx b/figma/mappings/core-components/select/Select.figma.jsx
new file mode 100644
index 0000000000..a2835345cc
--- /dev/null
+++ b/figma/mappings/core-components/select/Select.figma.jsx
@@ -0,0 +1,168 @@
+import figma from '@figma/code-connect';
+import { Flex } from '@semcore/ui/base-components';
+import Select from '@semcore/ui/select';
+import { Text } from '@semcore/ui/typography';
+
+figma.connect(
+  Select.Trigger,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10171-91601&',
+  {
+    variant: { '← addon': 'false', 'addon →': 'false', 'icon only': 'false' },
+    props: {
+      size: figma.enum('size', {
+        M: 'm',
+        L: 'l',
+      }),
+      placeholder: figma.textContent('↳ text'),
+      state: figma.enum('state', {
+        active: 'active',
+        invalid: 'invalid',
+        valid: 'valid',
+      }),
+      disabled: figma.enum('state', {
+        disabled: true,
+      }),
+      loading: figma.enum('state', {
+        loading: true,
+      }),
+    },
+    example: (props) => <Select options={/* options */} {...props} />,
+  },
+);
+
+figma.connect(
+  Select.Trigger,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10171-91601&',
+  {
+    variant: { 'icon only': 'false' },
+    props: {
+      size: figma.enum('size', {
+        M: 'm',
+        L: 'l',
+      }),
+      addonLeft: figma.enum('icon only', {
+        false: figma.boolean('← addon', {
+          true: <Select.Trigger.Addon>{/* addon */}</Select.Trigger.Addon>,
+        }),
+      }),
+      addonRight: figma.enum('icon only', {
+        false: figma.boolean('addon →', {
+          true: <Select.Trigger.Addon>{/* addon */}</Select.Trigger.Addon>,
+        }),
+      }),
+
+      content: figma.enum('icon only', {
+        false: figma.boolean('← addon', {
+          true: <Select.Trigger.Text>{/* text */}</Select.Trigger.Text>,
+          false: figma.boolean('addon →', {
+            true: <Select.Trigger.Text>{/* text */}</Select.Trigger.Text>,
+            false: '{/* text */}',
+          }),
+        }),
+      }),
+      text: figma.textContent('↳ text'),
+      state: figma.enum('state', {
+        active: 'active',
+        invalid: 'invalid',
+        valid: 'valid',
+      }),
+      disabled: figma.enum('state', {
+        disabled: true,
+      }),
+      loading: figma.enum('state', {
+        loading: true,
+      }),
+    },
+    example: ({ size, addonLeft, addonRight, content, state, loading, disabled }) => {
+      <Select options={/* options */} size={size} state={state} loading={loading} disabled={disabled} placeholder={/* placeholder */}>
+        <Select.Trigger>
+          {addonLeft}
+          {content}
+          {addonRight}
+        </Select.Trigger>
+        <Select.Menu hMax={/* value */}>
+          <Select.Option key={/* value */} value={/* value */}>
+            {/* option */}
+          </Select.Option>
+        </Select.Menu>
+      </Select>;
+    },
+  },
+);
+
+figma.connect(
+  Select.Trigger,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10171-91601&',
+  {
+    variant: { 'icon only': 'true' },
+    props: {
+      size: figma.enum('size', {
+        M: 'm',
+        L: 'l',
+      }),
+      addonLeft: figma.children('← - - addon properties'),
+      state: figma.enum('state', {
+        active: 'active',
+        invalid: 'invalid',
+        valid: 'valid',
+      }),
+      disabled: figma.enum('state', {
+        disabled: true,
+      }),
+      loading: figma.enum('state', {
+        loading: true,
+      }),
+      title: figma.textContent('↳ title'),
+    },
+    example: ({ size, addonLeft, state, loading, disabled, title }) => (
+      <Select options={/* options */} size={size} state={state} loading={loading} disabled={disabled} aria-label={title}>
+        <Select.Trigger>
+          <Select.Trigger.Addon>{addonLeft}</Select.Trigger.Addon>
+        </Select.Trigger>
+        <Select.Menu hMax={/* value */}>
+          <Select.Option key={/* value */} value={/* value */}>
+            {/* option */}
+          </Select.Option>
+        </Select.Menu>
+      </Select>
+    ),
+  },
+);
+
+// Select.Trigger with label
+
+figma.connect(
+  Select.Trigger,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactored--%E2%9D%96-Core-Components?node-id=13071-112318',
+  {
+    variant: { 'label position': 'top' },
+    props: {
+      label: figma.children('Input.Label'),
+      input: figma.children('Select.Trigger'),
+    },
+    example: ({ label, input }) => (
+      <Flex direction='column' gap={2}>
+        {label}
+        {input}
+      </Flex>
+    ),
+  },
+);
+
+figma.connect(
+  Select.Trigger,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactored--%E2%9D%96-Core-Components?node-id=13071-112318',
+  {
+    variant: { 'label position': 'left' },
+    props: {
+      label: figma.children('Input.Label'),
+      input: figma.children('Select.Trigger'),
+    },
+    example: ({ label, input }) => (
+      <Flex gap={6}>
+        {label}
+        {input}
+      </Flex>
+    ),
+  },
+);
diff --git a/figma/mappings/core-components/select/SelectList.figma.jsx b/figma/mappings/core-components/select/SelectList.figma.jsx
new file mode 100644
index 0000000000..65797440fd
--- /dev/null
+++ b/figma/mappings/core-components/select/SelectList.figma.jsx
@@ -0,0 +1,109 @@
+import figma from '@figma/code-connect';
+import Select from '@semcore/ui/select';
+import { Text } from '@semcore/ui/typography';
+
+// Default Select List
+
+figma.connect(
+  Select.List,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactored--%E2%9D%96-Core-Components?node-id=47952-16111',
+  {
+    variant: { 'country select': 'false' },
+    props: {
+      size: figma.enum('size', {
+        M: 'm',
+        L: 'l',
+      }),
+      searchInput: figma.boolean('search input', {
+        true: <Select.InputSearch value={/* value */} onChange={/* onChange */} aria-describedby={/* aria-describedby */} />,
+        false: undefined,
+      }),
+      notice: figma.boolean('notice ↓', {
+        true: figma.children('Notice'),
+        false: undefined,
+      }),
+    },
+
+    example: ({ searchInput, notice, size }) => (
+      <Select.List size={size} hMax={/* value */}>
+        {searchInput}
+        <Select.Option key={/* value */} value={/* value */}>
+          {/* option */}
+        </Select.Option>
+        {notice}
+      </Select.List>
+    ),
+  },
+);
+
+// Country Select List
+
+figma.connect(
+  Select.List,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=47952-16111',
+  {
+    variant: { 'country select': 'true' },
+    props: {
+      size: figma.enum('size', {
+        M: 'm',
+        L: 'l',
+      }),
+      notice: figma.boolean('notice ↓', {
+        true: figma.children('Notice'),
+        false: undefined,
+      }),
+    },
+
+    example: ({ notice, size }) => (
+      <Select.Popper size={size} aria-label='/* Add your aria-label */'>
+        <Select.InputSearch value={/* value */} onChange={/* onChange */} aria-describedby={/* aria-describedby */} />
+        <Select.List hMax={/* value */}>
+          {/* Options map */}
+          {/* Options length + ScreenReaderOnly */}
+        </Select.List>
+        {notice}
+      </Select.Popper>
+    ),
+  },
+);
+
+// Multiselect
+
+figma.connect(
+  Select.List,
+  'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactored--%E2%9D%96-Core-Components?node-id=57511-1992',
+  {
+    props: {
+      size: figma.enum('size', {
+        M: 'm',
+        L: 'l',
+      }),
+      searchInput: figma.boolean('search input', {
+        true: <Select.InputSearch value={/* value */} onChange={/* onChange */} aria-describedby={/* aria-describedby */} />,
+        false: undefined,
+      }),
+      notice: figma.boolean('notice ↓', {
+        true: figma.children('Notice'),
+        false: undefined,
+      }),
+    },
+
+    example: ({ searchInput, notice, size }) => (
+      <Select.Popper size={size} aria-label='/* Add your aria-label */'>
+        {searchInput}
+        <Select.List hMax={/* value */}>
+          <Select.Option value='%all%'>
+            <Text color='text-link'>
+              {currentValue.length ? 'Deselect all' : 'Select all'}
+            </Text>
+          </Select.Option>
+          <Select.Option value={/* value */} key={/* value */}>
+            <Select.Option.Checkbox />
+            {/* option */}
+          </Select.Option>
+        </Select.List>
+        {notice}
+      </Select.Popper>
+    ),
+  },
+);
diff --git a/figma/mappings/core-components/wizard/Wizard.figma.ts b/figma/mappings/core-components/wizard/Wizard.figma.ts
new file mode 100644
index 0000000000..a12b5c0717
--- /dev/null
+++ b/figma/mappings/core-components/wizard/Wizard.figma.ts
@@ -0,0 +1,44 @@
+import { connect } from '../../../src/connect';
+import type { ConnectSettings } from '../../../src/connect';
+
+const sideBar = connect.childCode('Wizard.Sidebar');
+
+let content = '{/* step content */}';
+if (
+  connect.getProp('fader ↑', true, 'ScrollArea') ||
+  connect.getProp('fader ↓', true, 'ScrollArea') ||
+  connect.getProp('fader ->', true, 'ScrollArea') ||
+  connect.getProp('<- fader', true, 'ScrollArea') ||
+  connect.getProp('vertical scroll', true, 'ScrollArea') ||
+  connect.getProp('horizontal scroll', true, 'ScrollArea')
+) {
+  content = `<ScrollArea shadow>${content}</ScrollArea>`;
+}
+
+const footer = connect.childCode('Wizard.Footer');
+
+const example = `
+<Wizard step={/* current step */}>
+  ${sideBar}
+  <Wizard.Content>
+    <Wizard.Step step={/* number */}>
+      {/* previous step content... */}
+    </Wizard.Step>
+    <Wizard.Step step={/* number */}>
+      {/* this is the current step */}
+      ${content}
+    </Wizard.Step>
+    <Wizard.Step step={/* number */}>
+      {/* next step content... */}
+    </Wizard.Step>
+    ${footer}
+  </Wizard.Content>
+</Wizard>
+  `;
+
+export const settings: ConnectSettings = {
+  example,
+  id: 'Wizard',
+  url: 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=56368-720',
+  imports: ['import Wizard from "@semcore/ui/wizard"'],
+};
diff --git a/figma/mappings/core-components/wizard/WizardFooter.figma.ts b/figma/mappings/core-components/wizard/WizardFooter.figma.ts
new file mode 100644
index 0000000000..1a7b10bf2c
--- /dev/null
+++ b/figma/mappings/core-components/wizard/WizardFooter.figma.ts
@@ -0,0 +1,37 @@
+import { connect } from '../../../src/connect';
+import type { ConnectSettings } from '../../../src/connect';
+
+const checkbox = connect.childCode('Checkbox');
+
+let wrapperStart, wrapperEnd;
+if (checkbox) {
+  wrapperStart = '<Flex direction="column" gap={3} alignItems="center">';
+  wrapperEnd = '</Flex>';
+}
+
+const stepBackText = connect.childCode('↳ text', { path: ['Wizard.StepBack'] });
+const stepBack = stepBackText ? `<Wizard.StepBack stepName="${stepBackText}" />` : undefined;
+
+const stepNextText = connect.childCode('↳ text', { path: ['Wizard.StepNext'] });
+const stepNext = stepNextText ? `<Wizard.StepNext stepName="${stepNextText}" />` : undefined;
+
+const cta = connect.childCode('CTA');
+
+const example = `
+${wrapperStart}
+${checkbox}
+<Flex>
+  ${stepBack}${cta}${stepNext}
+</Flex>
+${wrapperEnd}
+  `;
+
+export const settings: ConnectSettings = {
+  example,
+  id: 'Wizard.Footer',
+  url: 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=56368-557',
+  imports: [
+    'import Wizard from "@semcore/ui/wizard"',
+    'import { Flex } from "@semcore/ui/base-components"',
+  ],
+};
diff --git a/figma/mappings/core-components/wizard/WizardSidebar.figma.ts b/figma/mappings/core-components/wizard/WizardSidebar.figma.ts
new file mode 100644
index 0000000000..452e5569d6
--- /dev/null
+++ b/figma/mappings/core-components/wizard/WizardSidebar.figma.ts
@@ -0,0 +1,16 @@
+import { connect } from '../../../src/connect';
+import type { ConnectSettings } from '../../../src/connect';
+
+const title = connect.formatProp('title', connect.childCode('title'));
+
+const example = `
+<Wizard.Sidebar ${title}>
+  ${connect.childrenCode({ filter: (child) => child.type === 'INSTANCE' })}
+</Wizard.Sidebar>`;
+
+export const settings: ConnectSettings = {
+  example,
+  id: 'Wizard',
+  url: 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=56133-3353',
+  imports: ['import Wizard from "@semcore/ui/wizard"'],
+};
diff --git a/figma/mappings/core-components/wizard/WizardStepper.figma.ts b/figma/mappings/core-components/wizard/WizardStepper.figma.ts
new file mode 100644
index 0000000000..0d06524fb1
--- /dev/null
+++ b/figma/mappings/core-components/wizard/WizardStepper.figma.ts
@@ -0,0 +1,22 @@
+import { connect } from '../../../src/connect';
+import type { ConnectSettings } from '../../../src/connect';
+
+const completed = connect.getProp('completed');
+const number = connect.childCode('Wizard.StepNumber');
+const title = connect.childCode('title');
+const optional = connect.childCode('optional', {
+  wrapper: 'Text color="text-secondary-invert" fontWeight={400} mt={1} tag="div"',
+});
+
+const example = title || optional
+  ? `<Wizard.Stepper step={${number}} ${completed}>${title}${optional}</Wizard.Stepper>`
+  : `{/* this is an adaptive state for small viewports, 
+    refer to the full-width version for the full code */}
+  <Wizard.Stepper step={${number}} ${completed} />`;
+
+export const settings: ConnectSettings = {
+  example,
+  id: 'Wizard.Stepper',
+  url: 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=56133-3311',
+  imports: ['import Wizard from "@semcore/ui/wizard"'],
+};
diff --git a/figma/mappings/data-display/Area.figma.jsx b/figma/mappings/data-display/Area.figma.jsx
new file mode 100644
index 0000000000..e38c73afcc
--- /dev/null
+++ b/figma/mappings/data-display/Area.figma.jsx
@@ -0,0 +1,65 @@
+import figma from '@figma/code-connect/react';
+import { Plot, XAxis, YAxis, Area } from '@semcore/ui/d3-chart';
+import { AreaChartSkeleton } from '@semcore/ui/skeleton';
+
+figma.connect(
+  Area,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=14003-301026&t=kZysxCyJe4tnPXYg-11',
+  {
+    variant: { '🔵 dots': 'false' },
+    example: () => (
+      <Area x='/* Set x */' y='/* Set y */' />
+    ),
+  },
+);
+
+figma.connect(
+  Area,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=14003-301026&t=kZysxCyJe4tnPXYg-11',
+  {
+    variant: { '🔵 dots': 'true' },
+    props: {
+      displayDots: figma.boolean('🔵 dots'),
+    },
+    example: ({ displayDots }) => (
+      <Area x='/* Set x */' y='/* Set y */'>
+        <Area.Dots display={displayDots} />
+      </Area>
+    ),
+  },
+);
+
+figma.connect(
+  Area,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=13987-163781',
+  {
+    variant: { skeleton: 'false' },
+    props: {
+      area: figma.children('Area'),
+    },
+    example: ({ area }) => (
+      <Plot data={/* Add chart data here */} scale={/* [xScale, yScale] */} width={/* Add chart width here */} height={/* Add chart height here */}>
+        <YAxis>
+          <YAxis.Ticks />
+          <YAxis.Grid />
+        </YAxis>
+        <XAxis>
+          <XAxis.Ticks>
+          </XAxis.Ticks>
+        </XAxis>
+        {area}
+      </Plot>
+    ),
+  },
+);
+
+figma.connect(
+  AreaChartSkeleton,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=13987-163781',
+  {
+    variant: { skeleton: 'true' },
+    example: () => (
+      <AreaChartSkeleton type='monotone' />
+    ),
+  },
+);
diff --git a/figma/mappings/data-display/Bar.figma.jsx b/figma/mappings/data-display/Bar.figma.jsx
new file mode 100644
index 0000000000..86e6b54ed3
--- /dev/null
+++ b/figma/mappings/data-display/Bar.figma.jsx
@@ -0,0 +1,57 @@
+import figma from '@figma/code-connect/react';
+import { Plot, Bar, YAxis, XAxis } from '@semcore/ui/d3-chart';
+import { BarChartSkeleton } from '@semcore/ui/skeleton';
+
+figma.connect(
+  Bar,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=14145-9172&t=Qp0tBVtbbr9U39bH-11',
+  {
+    example: () => (
+      <Bar x='/* Set x */' y='/* Set y */' maxBarSize={/* Set max bar size */} />
+    ),
+  },
+);
+
+figma.connect(
+  Bar,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=14135-6007&t=Qp0tBVtbbr9U39bH-11',
+  {
+    example: () => (
+      <Bar x='/* Set x */' y='/* Set y */' maxBarSize={/* Set max bar size */} />
+    ),
+  },
+);
+
+figma.connect(
+  Bar,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=14135-7279&t=Qp0tBVtbbr9U39bH-11',
+  {
+    variant: { skeleton: 'false' },
+    props: {
+      bar: figma.children('Bar'),
+    },
+    example: ({ bar }) => (
+      <Plot data={/* Add chart data here */} scale={/* [xScale, yScale] */} width={/* Add chart width here */} height={/* Add chart height here */}>
+        <YAxis>
+          <YAxis.Ticks />
+          <YAxis.Grid />
+        </YAxis>
+        <XAxis>
+          <XAxis.Ticks />
+        </XAxis>
+        {bar}
+      </Plot>
+    ),
+  },
+);
+
+figma.connect(
+  BarChartSkeleton,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=14135-7279&t=Qp0tBVtbbr9U39bH-11',
+  {
+    variant: { skeleton: 'true' },
+    example: () => (
+      <BarChartSkeleton />
+    ),
+  },
+);
diff --git a/figma/mappings/data-display/Bubble.figma.jsx b/figma/mappings/data-display/Bubble.figma.jsx
new file mode 100644
index 0000000000..64b240c380
--- /dev/null
+++ b/figma/mappings/data-display/Bubble.figma.jsx
@@ -0,0 +1,48 @@
+import figma from '@figma/code-connect/react';
+import { Plot, XAxis, YAxis, Bubble } from '@semcore/ui/d3-chart';
+import { BubbleChartSkeleton } from '@semcore/ui/skeleton';
+
+figma.connect(
+  Bubble,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=14003-324587&t=kghn8VFPezOPMocI-11',
+  {
+    example: () => (
+      <Bubble x='x' y='y' value='value' />
+    ),
+  },
+);
+
+figma.connect(
+  Bubble,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=13991-278213&t=kghn8VFPezOPMocI-11',
+  {
+    variant: { skeleton: 'false' },
+    props: {
+      bubble: figma.children('Bubble'),
+    },
+    example: ({ bubble }) => (
+      <Plot data={/* Add chart data here */} scale={/* [xScale, yScale] */} width={/* Add chart width here */} height={/* Add chart height here */}>
+        <YAxis>
+          <YAxis.Ticks />
+          <YAxis.Grid />
+        </YAxis>
+        <XAxis>
+          <XAxis.Ticks>
+          </XAxis.Ticks>
+        </XAxis>
+        {bubble}
+      </Plot>
+    ),
+  },
+);
+
+figma.connect(
+  BubbleChartSkeleton,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=13991-278213&t=kghn8VFPezOPMocI-11',
+  {
+    variant: { skeleton: 'true' },
+    example: () => (
+      <BubbleChartSkeleton />
+    ),
+  },
+);
diff --git a/figma/mappings/data-display/ChartLegend.figma.jsx b/figma/mappings/data-display/ChartLegend.figma.jsx
new file mode 100644
index 0000000000..d0c135ae38
--- /dev/null
+++ b/figma/mappings/data-display/ChartLegend.figma.jsx
@@ -0,0 +1,48 @@
+import figma from '@figma/code-connect/react';
+import { ChartLegend, LegendFlex, ChartLegendTable } from '@semcore/ui/d3-chart';
+
+// figma.connect(
+//   ChartLegend,
+//   'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=13060-4082',
+//   {
+//     example: () => (
+//       <ChartLegend.LegendItem shape={/* Set shape here */}>
+//         <ChartLegend.LegendItem.Label />
+//       </ChartLegend.LegendItem>
+//     ),
+//   },
+// );
+
+// Need to fix LegendFlex, code connect is not working
+
+figma.connect(
+  LegendFlex,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=13060-4082',
+  {
+    props: {
+      ariaLabel: figma.textContent('↳ aria-label'),
+    },
+    example: ({ ariaLabel }) => (
+      <LegendFlex
+        aria-label={ariaLabel}
+        direction='row'
+        shape='Checkbox'
+        size='m'
+        trendIsVisible={false}
+      />
+    ),
+  },
+);
+
+figma.connect(
+  ChartLegendTable,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=13060-3831',
+  {
+    props: {
+      ariaLabel: figma.textContent('↳ aria-label'),
+    },
+    example: ({ ariaLabel }) => (
+      <ChartLegendTable items={/* Set items here */} aria-label={ariaLabel} />
+    ),
+  },
+);
diff --git a/figma/mappings/data-display/ChartTooltip.figma.jsx b/figma/mappings/data-display/ChartTooltip.figma.jsx
new file mode 100644
index 0000000000..d7365bd096
--- /dev/null
+++ b/figma/mappings/data-display/ChartTooltip.figma.jsx
@@ -0,0 +1,61 @@
+import figma from '@figma/code-connect/react';
+import { HoverLine } from '@semcore/ui/chart-tooltip';
+import { Flex } from '@semcore/ui/flex-box';
+import { Text } from '@semcore/ui/typography';
+
+// Need to add a variant for no data with footer
+
+figma.connect(
+  HoverLine,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=13086-3415',
+  {
+    props: {
+      footerText: figma.textContent('↳ text'),
+    },
+    example: ({ footerText }) => (
+      <HoverLine.Tooltip.Footer>{footerText}</HoverLine.Tooltip.Footer>
+    ),
+  },
+);
+
+figma.connect(
+  HoverLine,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=13039-1404',
+  {
+    variant: { 'no data': 'false' },
+    example: () => (
+      <HoverLine.Tooltip x='/* Set x here */' wMin={/* Set wMin here */}>
+        <HoverLine.Tooltip.Title>
+          {/* Set title here */}
+        </HoverLine.Tooltip.Title>
+        <Flex justifyContent='space-between'>
+          <HoverLine.Tooltip.Dot mr={4}>{/* Set dot label here */}</HoverLine.Tooltip.Dot>
+          <Text bold>{/* Set text here */}</Text>
+        </Flex>
+      </HoverLine.Tooltip>
+    ),
+  },
+);
+
+figma.connect(
+  HoverLine,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=13039-1404',
+  {
+    variant: { 'no data': 'true' },
+    props: {
+      footer: figma.children('Footer'),
+    },
+    example: ({ footer }) => (
+      <HoverLine.Tooltip x='/* Set x here */' wMin={/* Set wMin here */}>
+        <HoverLine.Tooltip.Title>
+          {/* Set title here */}
+        </HoverLine.Tooltip.Title>
+        <Flex justifyContent='space-between'>
+          <HoverLine.Tooltip.Dot mr={4}>{/* Set dot label here */}</HoverLine.Tooltip.Dot>
+          <Text bold>{/* Set text here */}</Text>
+        </Flex>
+        {footer}
+      </HoverLine.Tooltip>
+    ),
+  },
+);
diff --git a/figma/mappings/data-display/Cigarette.figma.jsx b/figma/mappings/data-display/Cigarette.figma.jsx
new file mode 100644
index 0000000000..75dda0f0d1
--- /dev/null
+++ b/figma/mappings/data-display/Cigarette.figma.jsx
@@ -0,0 +1,90 @@
+import figma from '@figma/code-connect/react';
+import { Chart } from '@semcore/ui/d3-chart';
+import { Skeleton } from '@semcore/ui/skeleton';
+
+figma.connect(
+  Chart.Cigarette,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=13456-915&t=rJcL0Nl5bcNFNb66-11',
+  {
+    props: {
+      ariaLabel: figma.textContent('↳ aria-label'),
+    },
+    example: ({ ariaLabel }) => (
+      <Chart.Cigarette data={/* Add chart data here */} plotWidth={/* Add chart width here */} aria-label={ariaLabel} />
+    ),
+  },
+);
+
+figma.connect(
+  Skeleton,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=13456-915&t=rJcL0Nl5bcNFNb66-11',
+  {
+    variant: { skeleton: 'true' },
+    example: () => (
+      <Skeleton h={/* Add height here */} />
+    ),
+  },
+);
+
+figma.connect(
+  Chart.Cigarette,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=14130-17556&t=rJcL0Nl5bcNFNb66-11',
+  {
+    variant: { orientation: 'column', skeleton: 'false' },
+    props: {
+      ariaLabel: figma.textContent('↳ aria-label'),
+    //   metric: figma.textContent('↳ metric'),
+    },
+    example: ({ ariaLabel }) => (
+      <Chart.Cigarette
+        data={/* Add chart data here */}
+        width={/* Add chart width here */}
+        height={/* Add chart height here */}
+        header={/* Add header here */}
+        showLegend={true}
+        aria-label={ariaLabel}
+      />
+    ),
+  },
+);
+
+figma.connect(
+  Skeleton,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=14130-17556&t=rJcL0Nl5bcNFNb66-11',
+  {
+    variant: { orientation: 'column', skeleton: 'true' },
+    example: () => <Skeleton h={/* Add height here */} />,
+  },
+);
+
+figma.connect(
+  Chart.Cigarette,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=14130-17556&t=rJcL0Nl5bcNFNb66-11',
+  {
+    variant: { orientation: 'row' },
+    props: {
+      ariaLabel: figma.textContent('↳ aria-label'),
+    //   metric: figma.textContent('↳ metric'),
+    },
+    example: ({ ariaLabel }) => (
+      <Chart.Cigarette
+        data={/* Add chart data here */}
+        width={/* Add chart width here */}
+        height={/* Add chart height here */}
+        header={/* Add header here */}
+        invertAxis={false}
+        showLegend={true}
+        aria-label={ariaLabel}
+      />
+    ),
+  },
+);
+
+figma.connect(
+  Skeleton,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=14130-17556&t=rJcL0Nl5bcNFNb66-11',
+  {
+    variant: { orientation: 'row', skeleton: 'true' },
+    example: () => <Skeleton h={/* Add height here */} />,
+  },
+);
diff --git a/figma/mappings/data-display/Donut.figma.jsx b/figma/mappings/data-display/Donut.figma.jsx
new file mode 100644
index 0000000000..91380147c4
--- /dev/null
+++ b/figma/mappings/data-display/Donut.figma.jsx
@@ -0,0 +1,193 @@
+import figma from '@figma/code-connect/react';
+import { Flex } from '@semcore/ui/base-components';
+import { Donut, Plot } from '@semcore/ui/d3-chart';
+import { DonutChartSkeleton } from '@semcore/ui/skeleton';
+import { Text } from '@semcore/ui/typography';
+
+figma.connect(
+  Donut,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=13433-11875&t=kghn8VFPezOPMocI-11',
+  {
+    variant: { 'skeleton': 'false', 'inner label': 'false' },
+    example: () => (
+      <Donut innerRadius={/* value */}>
+        <Donut.Pie />
+        {/* Add other Donut.Pie components */}
+      </Donut>
+    ),
+  },
+);
+
+figma.connect(
+  Donut,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=13433-11875&t=kghn8VFPezOPMocI-11',
+  {
+    variant: { 'skeleton': 'false', 'inner label': 'true' },
+    props: {
+      innerLabel: figma.textContent('↳ inner label'),
+      description: figma.textContent('↳ description'),
+    },
+    example: ({ innerLabel, description }) => (
+      <Donut innerRadius={/* value */}>
+        <Donut.Pie />
+        {/* Add other Donut.Pie components */}
+        <Donut.Label>
+          <Text tag='tspan' size={400}>
+            {innerLabel}
+          </Text>
+          <Text tag='tspan' size={200}>
+            {description}
+          </Text>
+        </Donut.Label>
+      </Donut>
+    ),
+  },
+);
+
+figma.connect(
+  DonutChartSkeleton,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=13433-11875&t=kghn8VFPezOPMocI-11',
+  {
+    variant: { skeleton: 'true' },
+    example: () => (
+      <DonutChartSkeleton />
+    ),
+  },
+);
+
+// DonutChart with halfsize prop
+
+figma.connect(
+  Donut,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=13433-11958&t=Qp0tBVtbbr9U39bH-11',
+  {
+    variant: { 'skeleton': 'false', 'inner label': 'false' },
+    example: () => (
+      <Donut halfsize innerRadius={/* value */}>
+        <Donut.Pie />
+        {/* Add other Donut.Pie components */}
+      </Donut>
+    ),
+  },
+);
+
+figma.connect(
+  Donut,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=13433-11958&t=Qp0tBVtbbr9U39bH-11',
+  {
+    variant: { 'skeleton': 'false', 'inner label': 'true' },
+    props: {
+      innerLabel: figma.textContent('↳ inner label'),
+      description: figma.textContent('↳ description'),
+    },
+    example: ({ innerLabel, description }) => (
+      <Donut halfsize innerRadius={/* value */}>
+        <Donut.Pie />
+        {/* Add other Donut.Pie components */}
+        <Donut.Label>
+          <Text tag='tspan' size={400}>
+            {innerLabel}
+          </Text>
+          <Text tag='tspan' size={200}>
+            {description}
+          </Text>
+        </Donut.Label>
+      </Donut>
+    ),
+  },
+);
+
+figma.connect(
+  DonutChartSkeleton,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=13433-11958&t=Qp0tBVtbbr9U39bH-11',
+  {
+    variant: { skeleton: 'true' },
+    example: () => (
+      <DonutChartSkeleton halfsize />
+    ),
+  },
+);
+
+// Layout with ChartLegend
+
+figma.connect(
+  Donut,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=34-42648&t=Qp0tBVtbbr9U39bH-11',
+  {
+    variant: { 'legend placement': 'right' },
+    props: {
+      donut: figma.children('Donut'),
+      legend: figma.children('ChartLegendTable'),
+    },
+    example: ({ donut, legend }) => (
+      <Flex alignItems='flex-start' direction='row-reverse' gap={5}>
+        <Plot data={/* Add chart data here */} width={/* Add chart width here */} height={/* Add chart height here */}>
+          {donut}
+        </Plot>
+        {legend}
+      </Flex>
+    ),
+  },
+);
+
+figma.connect(
+  Donut,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=34-42648&t=Qp0tBVtbbr9U39bH-11',
+  {
+    variant: { 'legend placement': 'bottom' },
+    props: {
+      donut: figma.children('Donut'),
+      legend: figma.children('ChartLegendTable'),
+    },
+    example: ({ donut, legend }) => (
+      <Flex alignItems='flex-start' direction='column' gap={5}>
+        <Plot data={/* Add chart data here */} width={/* Add chart width here */} height={/* Add chart height here */}>
+          {donut}
+        </Plot>
+        {legend}
+      </Flex>
+    ),
+  },
+);
+
+// Layout with ChartLegend and Donut with halfsize prop
+
+figma.connect(
+  Donut,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=1820-60968&t=Qp0tBVtbbr9U39bH-11',
+  {
+    variant: { 'legend placement': 'right' },
+    props: {
+      donutHalfsize: figma.children('DonutHalfsize'),
+      legend: figma.children('ChartLegendTable'),
+    },
+    example: ({ donutHalfsize, legend }) => (
+      <Flex alignItems='flex-start' direction='row-reverse' gap={5}>
+        <Plot data={/* Add chart data here */} width={/* Add chart width here */} height={/* Add chart height here */}>
+          {donutHalfsize}
+        </Plot>
+        {legend}
+      </Flex>
+    ),
+  },
+);
+
+figma.connect(
+  Donut,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=1820-60968&t=Qp0tBVtbbr9U39bH-11',
+  {
+    variant: { 'legend placement': 'bottom' },
+    props: {
+      donutHalfsize: figma.children('DonutHalfsize'),
+      legend: figma.children('ChartLegendTable'),
+    },
+    example: ({ donutHalfsize, legend }) => (
+      <Flex alignItems='flex-start' direction='column' gap={5}>
+        <Plot data={/* Add chart data here */} width={/* Add chart width here */} height={/* Add chart height here */}>
+          {donutHalfsize}
+        </Plot>
+        {legend}
+      </Flex>
+    ),
+  },
+);
diff --git a/figma/mappings/data-display/Histogram.figma.jsx b/figma/mappings/data-display/Histogram.figma.jsx
new file mode 100644
index 0000000000..36a28849aa
--- /dev/null
+++ b/figma/mappings/data-display/Histogram.figma.jsx
@@ -0,0 +1,75 @@
+import figma from '@figma/code-connect/react';
+import { Plot, HistogramChart, YAxis, XAxis } from '@semcore/ui/d3-chart';
+import { HistogramChartSkeleton } from '@semcore/ui/skeleton';
+
+figma.connect(
+  HistogramChart,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=14188-19324&t=rJcL0Nl5bcNFNb66-11',
+  {
+    example: () => (
+      <HistogramChart x='/* Set x */' y='/* Set y */' />
+    ),
+  },
+);
+
+figma.connect(
+  HistogramChart,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=14188-19295&t=rJcL0Nl5bcNFNb66-11',
+  {
+    example: () => (
+      <Plot data={/* Add chart data here */} scale={/* [xScale, yScale] */} width={/* Add chart width here */} height={/* Add chart height here */}>
+        <YAxis>
+          <YAxis.Ticks />
+          <YAxis.Grid />
+        </YAxis>
+        <HistogramChart x='/* Set x */' y='/* Set y */' />
+      </Plot>
+    ),
+  },
+);
+
+figma.connect(
+  HistogramChart,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=13933-3311&t=rJcL0Nl5bcNFNb66-11',
+  {
+    example: () => (
+      <Plot data={/* Add chart data here */} scale={/* [xScale, yScale] */} width={/* Add chart width here */} height={/* Add chart height here */}>
+        <XAxis>
+          <XAxis.Ticks />
+        </XAxis>
+        <HistogramChart x='/* Set x */' y='/* Set y */' />
+      </Plot>
+    ),
+  },
+);
+
+figma.connect(
+  HistogramChart,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=14048-2682&t=rJcL0Nl5bcNFNb66-11',
+  {
+    variant: { skeleton: 'false' },
+    example: () => (
+      <Plot data={/* Add chart data here */} scale={/* [xScale, yScale] */} width={/* Add chart width here */} height={/* Add chart height here */}>
+        <YAxis>
+          <YAxis.Ticks />
+          <YAxis.Grid />
+        </YAxis>
+        <XAxis>
+          <XAxis.Ticks />
+        </XAxis>
+        <HistogramChart x='/* Set x */' y='/* Set y */' />
+      </Plot>
+    ),
+  },
+);
+
+figma.connect(
+  HistogramChartSkeleton,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=14048-2682&t=rJcL0Nl5bcNFNb66-11',
+  {
+    variant: { skeleton: 'true' },
+    example: () => (
+      <HistogramChartSkeleton />
+    ),
+  },
+);
diff --git a/figma/mappings/data-display/HorizontalBar.figma.jsx b/figma/mappings/data-display/HorizontalBar.figma.jsx
new file mode 100644
index 0000000000..7753dbba28
--- /dev/null
+++ b/figma/mappings/data-display/HorizontalBar.figma.jsx
@@ -0,0 +1,88 @@
+import figma from '@figma/code-connect/react';
+import { Plot, HorizontalBar, YAxis, XAxis } from '@semcore/ui/d3-chart';
+import { BarChartSkeleton } from '@semcore/ui/skeleton';
+
+figma.connect(
+  HorizontalBar,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=14200-58145&t=rJcL0Nl5bcNFNb66-11',
+  {
+    example: () => (
+      <HorizontalBar x='/* Set x */' y='/* Set y */' maxBarSize={/* Set max bar size */} />
+    ),
+  },
+);
+
+figma.connect(
+  HorizontalBar,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=14204-61355&t=rJcL0Nl5bcNFNb66-11',
+  {
+    example: () => (
+      <Plot data={/* Add chart data here */} scale={/* [xScale, yScale] */} width={/* Add chart width here */} height={/* Add chart height here */}>
+        <XAxis>
+          <XAxis.Grid />
+        </XAxis>
+        <HorizontalBar x='/* Set x */' y='/* Set y */' maxBarSize={/* Set max bar size */} />
+      </Plot>
+    ),
+  },
+);
+
+figma.connect(
+  HorizontalBar,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=14204-63310&t=rJcL0Nl5bcNFNb66-11',
+  {
+    variant: { skeleton: 'false' },
+    example: () => (
+      <Plot data={/* Add chart data here */} scale={/* [xScale, yScale] */} width={/* Add chart width here */} height={/* Add chart height here */}>
+        <YAxis>
+          <YAxis.Ticks />
+          <YAxis.Grid />
+        </YAxis>
+        <XAxis>
+          <XAxis.Ticks />
+        </XAxis>
+        <HorizontalBar x='/* Set x */' y='/* Set y */' maxBarSize={/* Set max bar size */} />
+      </Plot>
+    ),
+  },
+);
+
+figma.connect(
+  BarChartSkeleton,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=14204-63310&t=rJcL0Nl5bcNFNb66-11',
+  {
+    variant: { skeleton: 'true' },
+    example: () => (
+      <BarChartSkeleton layout='vertical' />
+    ),
+  },
+);
+
+// Horizontal bar chart without grid
+
+figma.connect(
+  HorizontalBar,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=14200-57647&t=rJcL0Nl5bcNFNb66-11',
+  {
+    variant: { skeleton: 'false' },
+    example: () => (
+      <Plot data={/* Add chart data here */} scale={/* [xScale, yScale] */} width={/* Add chart width here */} height={/* Add chart height here */}>
+        <YAxis>
+          <YAxis.Ticks />
+        </YAxis>
+        <HorizontalBar x='/* Set x */' y='/* Set y */' maxBarSize={/* Set max bar size */} />
+      </Plot>
+    ),
+  },
+);
+
+figma.connect(
+  BarChartSkeleton,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=14200-57647&t=rJcL0Nl5bcNFNb66-11',
+  {
+    variant: { skeleton: 'true' },
+    example: () => (
+      <BarChartSkeleton layout='vertical' />
+    ),
+  },
+);
diff --git a/figma/mappings/data-display/Line.figma.jsx b/figma/mappings/data-display/Line.figma.jsx
new file mode 100644
index 0000000000..8ec7ea9b65
--- /dev/null
+++ b/figma/mappings/data-display/Line.figma.jsx
@@ -0,0 +1,65 @@
+import figma from '@figma/code-connect/react';
+import { Plot, XAxis, YAxis, Line } from '@semcore/ui/d3-chart';
+import { LineSkeleton } from '@semcore/ui/skeleton';
+
+figma.connect(
+  Line,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=13999-4200&t=kghn8VFPezOPMocI-11',
+  {
+    variant: { '🔵 dots': 'false' },
+    example: () => (
+      <Line x='x' y='y' />
+    ),
+  },
+);
+
+figma.connect(
+  Line,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=13999-4200&t=kghn8VFPezOPMocI-11',
+  {
+    variant: { '🔵 dots': 'true' },
+    props: {
+      displayDots: figma.boolean('🔵 dots'),
+    },
+    example: ({ displayDots }) => (
+      <Line x='x' y='y'>
+        <Line.Dots display={displayDots} />
+      </Line>
+    ),
+  },
+);
+
+figma.connect(
+  Line,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=13867-33721&t=kghn8VFPezOPMocI-11',
+  {
+    variant: { skeleton: 'false' },
+    props: {
+      line: figma.children('Line'),
+    },
+    example: ({ line }) => (
+      <Plot data={/* Add chart data here */} scale={/* [xScale, yScale] */} width={/* Add chart width here */} height={/* Add chart height here */}>
+        <YAxis>
+          <YAxis.Ticks />
+          <YAxis.Grid />
+        </YAxis>
+        <XAxis>
+          <XAxis.Ticks>
+          </XAxis.Ticks>
+        </XAxis>
+        {line}
+      </Plot>
+    ),
+  },
+);
+
+figma.connect(
+  LineSkeleton,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=13867-33721&t=kghn8VFPezOPMocI-11',
+  {
+    variant: { skeleton: 'true' },
+    example: () => (
+      <LineSkeleton type='monotone' />
+    ),
+  },
+);
diff --git a/figma/mappings/data-display/LineArea.figma.jsx b/figma/mappings/data-display/LineArea.figma.jsx
new file mode 100644
index 0000000000..433a54cea9
--- /dev/null
+++ b/figma/mappings/data-display/LineArea.figma.jsx
@@ -0,0 +1,68 @@
+import figma from '@figma/code-connect/react';
+import { Plot, XAxis, YAxis, Line } from '@semcore/ui/d3-chart';
+import { LineSkeleton } from '@semcore/ui/skeleton';
+
+figma.connect(
+  Line,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=13999-12407&t=kghn8VFPezOPMocI-11',
+  {
+    variant: { '🔵 dots': 'false' },
+    example: () => (
+      <Line x='x' y='y'>
+        <Line.Area y0='y0' y1='y1' />
+      </Line>
+    ),
+  },
+);
+
+figma.connect(
+  Line,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=13999-12407&t=kghn8VFPezOPMocI-11',
+  {
+    variant: { '🔵 dots': 'true' },
+    props: {
+      displayDots: figma.boolean('🔵 dots'),
+    },
+    example: ({ displayDots }) => (
+      <Line x='x' y='y'>
+        <Line.Area y0='y0' y1='y1' />
+        <Line.Dots display={displayDots} />
+      </Line>
+    ),
+  },
+);
+
+figma.connect(
+  Line,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=13891-16352&t=kghn8VFPezOPMocI-11',
+  {
+    variant: { skeleton: 'false' },
+    props: {
+      lineArea: figma.children('Line.Area'),
+    },
+    example: ({ lineArea }) => (
+      <Plot data={/* Add chart data here */} scale={/* [xScale, yScale] */} width={/* Add chart width here */} height={/* Add chart height here */}>
+        <YAxis>
+          <YAxis.Ticks />
+          <YAxis.Grid />
+        </YAxis>
+        <XAxis>
+          <XAxis.Ticks>
+          </XAxis.Ticks>
+        </XAxis>
+        {lineArea}
+      </Plot>
+    ),
+  },
+);
+
+figma.connect(
+  LineSkeleton,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=13891-16352&t=kghn8VFPezOPMocI-11',
+  {
+    variant: { skeleton: 'true' },
+    example: () => (
+      <LineSkeleton type='monotone' />
+    ),
+  },
+);
diff --git a/figma/mappings/data-display/MiniChart.figma.jsx b/figma/mappings/data-display/MiniChart.figma.jsx
new file mode 100644
index 0000000000..7136e825ee
--- /dev/null
+++ b/figma/mappings/data-display/MiniChart.figma.jsx
@@ -0,0 +1,62 @@
+import figma from '@figma/code-connect/react';
+import { MiniChart } from '@semcore/ui/mini-chart';
+
+figma.connect(
+  MiniChart,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=5464-489&t=rJcL0Nl5bcNFNb66-11',
+  {
+    example: () => (
+      <MiniChart.ScoreLine value={/* Add value here */} w='/* Add width here */' color='/* Set color if necessary */' />
+    ),
+  },
+);
+
+figma.connect(
+  MiniChart,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=1480-68065&t=rJcL0Nl5bcNFNb66-11',
+  {
+    example: () => (
+      <MiniChart.ScoreLine segments={/* Add number of segments here */} value={/* Add value here */} w='/* Add width here */' color='/* Set color if necessary */' />
+    ),
+  },
+);
+
+figma.connect(
+  MiniChart,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=34-48231&t=rJcL0Nl5bcNFNb66-11',
+  {
+    example: () => (
+      <MiniChart.ScoreDonut value={/* Add value here */} w='/* Add width here */' aria-hidden />
+    ),
+  },
+);
+
+figma.connect(
+  MiniChart,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=34-48238&t=rJcL0Nl5bcNFNb66-11',
+  {
+    example: () => (
+      <MiniChart.ScoreSemiDonut value={/* Add value here */} w='/* Add width here */' aria-hidden />
+    ),
+  },
+);
+
+figma.connect(
+  MiniChart,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=1829-61647&t=rJcL0Nl5bcNFNb66-11',
+  {
+    example: () => (
+      <MiniChart.TrendLine data={/* Add data here */} w='/* Add width here */' h='/* Add height here */' aria-hidden />
+    ),
+  },
+);
+
+figma.connect(
+  MiniChart,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=34-48152&t=rJcL0Nl5bcNFNb66-11',
+  {
+    example: () => (
+      <MiniChart.TrendArea data={/* Add data here */} w='/* Add width here */' h='/* Add height here */' aria-hidden />
+    ),
+  },
+);
diff --git a/figma/mappings/data-display/Radar.figma.jsx b/figma/mappings/data-display/Radar.figma.jsx
new file mode 100644
index 0000000000..0f26b87d99
--- /dev/null
+++ b/figma/mappings/data-display/Radar.figma.jsx
@@ -0,0 +1,41 @@
+import figma from '@figma/code-connect/react';
+import { Chart, Plot, Radar } from '@semcore/ui/d3-chart';
+
+figma.connect(
+  Chart.Radar,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=13688-3809&t=rJcL0Nl5bcNFNb66-11',
+  {
+    props: {
+      ariaLabel: figma.textContent('↳ aria-label'),
+    },
+    example: ({ ariaLabel }) => (
+      <Chart.Radar
+        data={/* Add chart data here */}
+        groupKey='/* Set group key here */'
+        plotWidth={/* Set plot width here */}
+        plotHeight={/* Set plot height here */}
+        aria-label={ariaLabel}
+        showDots={true}
+        showTooltip={true}
+      />
+    ),
+  },
+);
+
+// Mini Radar chart
+figma.connect(
+  Chart.Radar,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=3423-123017&t=rJcL0Nl5bcNFNb66-11',
+  {
+    example: () => (
+      <Plot data={/* Add chart data here */} width={6} height={6}>
+        <Radar>
+          <Radar.Axis dataKey='/* Set group key here */'></Radar.Axis>
+          <Radar.Polygon dataKey='/* Set data key here */'>
+            <Radar.Polygon.Line />
+          </Radar.Polygon>
+        </Radar>
+      </Plot>
+    ),
+  },
+);
diff --git a/figma/mappings/data-display/RadialTree.figma.jsx b/figma/mappings/data-display/RadialTree.figma.jsx
new file mode 100644
index 0000000000..28818c2198
--- /dev/null
+++ b/figma/mappings/data-display/RadialTree.figma.jsx
@@ -0,0 +1,38 @@
+import figma from '@figma/code-connect/react';
+import { Plot, RadialTree } from '@semcore/ui/d3-chart';
+import { RadialTreeChartSkeleton } from '@semcore/ui/skeleton';
+
+figma.connect(
+  RadialTree,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=1553-68607&t=rJcL0Nl5bcNFNb66-11',
+  {
+    variant: { skeleton: 'false' },
+    props: {
+      title: figma.textContent('↳ RadialTree.Title'),
+    },
+    example: ({ title }) => (
+      <Plot data={/* Add chart data here */} scale={[scaleLinear(), scaleLinear()]} width={/* Add chart width here */} height={/* Add chart height here */}>
+        <RadialTree>
+          <RadialTree.Radian>
+            <RadialTree.Radian.Label />
+            <RadialTree.Radian.Line />
+            <RadialTree.Radian.Cap />
+            <RadialTree.Radian.Icon />
+          </RadialTree.Radian>
+          <RadialTree.Title>{title}</RadialTree.Title>
+        </RadialTree>
+      </Plot>
+    ),
+  },
+);
+
+figma.connect(
+  RadialTreeChartSkeleton,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=1553-68607&t=rJcL0Nl5bcNFNb66-11',
+  {
+    variant: { skeleton: 'true' },
+    example: () => (
+      <RadialTreeChartSkeleton />
+    ),
+  },
+);
diff --git a/figma/mappings/data-display/Scatterplot.figma.jsx b/figma/mappings/data-display/Scatterplot.figma.jsx
new file mode 100644
index 0000000000..42ace7db11
--- /dev/null
+++ b/figma/mappings/data-display/Scatterplot.figma.jsx
@@ -0,0 +1,48 @@
+import figma from '@figma/code-connect/react';
+import { Plot, XAxis, YAxis, Scatterplot } from '@semcore/ui/d3-chart';
+import { ScatterPlotChartSkeleton } from '@semcore/ui/skeleton';
+
+figma.connect(
+  Scatterplot,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=14003-326870&t=kghn8VFPezOPMocI-11',
+  {
+    example: () => (
+      <Scatterplot x='x' y='y' />
+    ),
+  },
+);
+
+figma.connect(
+  Scatterplot,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=13991-291272&t=kghn8VFPezOPMocI-11',
+  {
+    variant: { skeleton: 'false' },
+    props: {
+      scatterplot: figma.children('Scatterplot'),
+    },
+    example: ({ scatterplot }) => (
+      <Plot data={/* Add chart data here */} scale={/* [xScale, yScale] */} width={/* Add chart width here */} height={/* Add chart height here */}>
+        <YAxis>
+          <YAxis.Ticks />
+          <YAxis.Grid />
+        </YAxis>
+        <XAxis>
+          <XAxis.Ticks>
+          </XAxis.Ticks>
+        </XAxis>
+        {scatterplot}
+      </Plot>
+    ),
+  },
+);
+
+figma.connect(
+  ScatterPlotChartSkeleton,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=13991-291272&t=kghn8VFPezOPMocI-11',
+  {
+    variant: { skeleton: 'true' },
+    example: () => (
+      <ScatterPlotChartSkeleton />
+    ),
+  },
+);
diff --git a/figma/mappings/data-display/StackBar.figma.jsx b/figma/mappings/data-display/StackBar.figma.jsx
new file mode 100644
index 0000000000..84576efc56
--- /dev/null
+++ b/figma/mappings/data-display/StackBar.figma.jsx
@@ -0,0 +1,47 @@
+import figma from '@figma/code-connect/react';
+import { Plot, StackBar, YAxis, XAxis } from '@semcore/ui/d3-chart';
+import { BarChartSkeleton } from '@semcore/ui/skeleton';
+
+figma.connect(
+  StackBar,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=14155-16881&t=rJcL0Nl5bcNFNb66-11',
+  {
+    example: () => (
+      <StackBar y='/* Set y */' maxBarSize={/* Set max bar size */} />
+    ),
+  },
+);
+
+figma.connect(
+  StackBar,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=14196-51402&t=rJcL0Nl5bcNFNb66-11',
+  {
+    variant: { skeleton: 'false' },
+    props: {
+      stackBar: figma.children('StackBar'),
+    },
+    example: ({ stackBar }) => (
+      <Plot data={/* Add chart data here */} scale={/* [xScale, yScale] */} width={/* Add chart width here */} height={/* Add chart height here */}>
+        <YAxis>
+          <YAxis.Ticks />
+          <YAxis.Grid />
+        </YAxis>
+        <XAxis>
+          <XAxis.Ticks />
+        </XAxis>
+        {stackBar}
+      </Plot>
+    ),
+  },
+);
+
+figma.connect(
+  BarChartSkeleton,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=14196-51402&t=rJcL0Nl5bcNFNb66-11',
+  {
+    variant: { skeleton: 'true' },
+    example: () => (
+      <BarChartSkeleton />
+    ),
+  },
+);
diff --git a/figma/mappings/data-display/StackBarHorizontal.figma.jsx b/figma/mappings/data-display/StackBarHorizontal.figma.jsx
new file mode 100644
index 0000000000..88d05d7ab3
--- /dev/null
+++ b/figma/mappings/data-display/StackBarHorizontal.figma.jsx
@@ -0,0 +1,64 @@
+import figma from '@figma/code-connect/react';
+import { Plot, StackBar, YAxis, XAxis, HorizontalBar } from '@semcore/ui/d3-chart';
+import { BarChartSkeleton } from '@semcore/ui/skeleton';
+
+// Forced to add HorizontalBar to imports to avoid 'Could not find declaration for component' error
+figma.connect(
+  StackBar,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=14202-58981&t=rJcL0Nl5bcNFNb66-11',
+  {
+    variant: { skeleton: 'false' },
+    example: () => (
+      <Plot data={/* Add chart data here */} scale={/* [xScale, yScale] */} width={/* Add chart width here */} height={/* Add chart height here */}>
+        <YAxis>
+          <YAxis.Ticks />
+          <YAxis.Grid />
+        </YAxis>
+        <XAxis>
+          <XAxis.Ticks />
+        </XAxis>
+        <StackBar.HorizontalBar x='/* Set x */' maxBarSize={/* Set max bar size */} />
+      </Plot>
+    ),
+  },
+);
+
+figma.connect(
+  BarChartSkeleton,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=14202-58981&t=rJcL0Nl5bcNFNb66-11',
+  {
+    variant: { skeleton: 'true' },
+    example: () => (
+      <BarChartSkeleton layout='vertical' />
+    ),
+  },
+);
+
+// Horizontal bar chart without grid
+
+figma.connect(
+  HorizontalBar,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=14200-57647&t=rJcL0Nl5bcNFNb66-11',
+  {
+    variant: { skeleton: 'false' },
+    example: () => (
+      <Plot data={/* Add chart data here */} scale={/* [xScale, yScale] */} width={/* Add chart width here */} height={/* Add chart height here */}>
+        <YAxis>
+          <YAxis.Ticks />
+        </YAxis>
+        <HorizontalBar x='/* Set x */' y='/* Set y */' maxBarSize={/* Set max bar size */} />
+      </Plot>
+    ),
+  },
+);
+
+figma.connect(
+  BarChartSkeleton,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=14200-57647&t=rJcL0Nl5bcNFNb66-11',
+  {
+    variant: { skeleton: 'true' },
+    example: () => (
+      <BarChartSkeleton layout='vertical' />
+    ),
+  },
+);
diff --git a/figma/mappings/data-display/StackedArea.figma.jsx b/figma/mappings/data-display/StackedArea.figma.jsx
new file mode 100644
index 0000000000..bbd6aa034d
--- /dev/null
+++ b/figma/mappings/data-display/StackedArea.figma.jsx
@@ -0,0 +1,67 @@
+import figma from '@figma/code-connect/react';
+import { Plot, XAxis, YAxis, StackedArea } from '@semcore/ui/d3-chart';
+import { AreaChartSkeleton } from '@semcore/ui/skeleton';
+
+figma.connect(
+  StackedArea,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=14003-314929&t=kZysxCyJe4tnPXYg-11',
+  {
+    variant: { '🔵 dots': 'false' },
+    example: () => (
+      <StackedArea x='/* Set x */' />
+    ),
+  },
+);
+
+figma.connect(
+  StackedArea,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=14003-314929&t=kZysxCyJe4tnPXYg-11',
+  {
+    variant: { '🔵 dots': 'true' },
+    props: {
+      displayDots: figma.boolean('🔵 dots'),
+    },
+    example: ({ displayDots }) => (
+      <StackedArea x='/* Set x */'>
+        <StackedArea.Area y='/* Set y */'>
+          <StackedArea.Area.Dots display={displayDots} />
+        </StackedArea.Area>
+      </StackedArea>
+    ),
+  },
+);
+
+figma.connect(
+  StackedArea,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=13987-258829&t=kZysxCyJe4tnPXYg-11',
+  {
+    variant: { skeleton: 'false' },
+    props: {
+      stackedArea: figma.children('StackedArea'),
+    },
+    example: ({ stackedArea }) => (
+      <Plot data={/* Add chart data here */} scale={/* [xScale, yScale] */} width={/* Add chart width here */} height={/* Add chart height here */}>
+        <YAxis>
+          <YAxis.Ticks />
+          <YAxis.Grid />
+        </YAxis>
+        <XAxis>
+          <XAxis.Ticks>
+          </XAxis.Ticks>
+        </XAxis>
+        {stackedArea}
+      </Plot>
+    ),
+  },
+);
+
+figma.connect(
+  AreaChartSkeleton,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=13987-163781&t=kZysxCyJe4tnPXYg-11',
+  {
+    variant: { skeleton: 'true' },
+    example: () => (
+      <AreaChartSkeleton type='monotone' />
+    ),
+  },
+);
diff --git a/figma/mappings/data-display/Venn.figma.jsx b/figma/mappings/data-display/Venn.figma.jsx
new file mode 100644
index 0000000000..9516107583
--- /dev/null
+++ b/figma/mappings/data-display/Venn.figma.jsx
@@ -0,0 +1,67 @@
+import figma from '@figma/code-connect/react';
+import { Flex } from '@semcore/ui/base-components';
+import { Plot, Venn } from '@semcore/ui/d3-chart';
+import { VennChartSkeleton } from '@semcore/ui/skeleton';
+
+figma.connect(
+  Venn,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=34-46327&t=Qp0tBVtbbr9U39bH-11',
+  {
+    variant: { skeleton: 'false' },
+    example: () => (
+      <Venn>
+        <Venn.Circle />
+        {/* Add other Venn.Circle components */}
+      </Venn>
+    ),
+  },
+);
+
+figma.connect(
+  Venn,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=34-46327&t=Qp0tBVtbbr9U39bH-11',
+  {
+    variant: { skeleton: 'true' },
+    example: () => (
+      <VennChartSkeleton />
+    ),
+  },
+);
+
+// Layout with ChartLegend
+
+figma.connect(
+  Venn,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=34-47213&t=Qp0tBVtbbr9U39bH-11',
+  {
+    variant: { 'legend placement': 'right' },
+    props: {
+      venn: figma.children('Venn'),
+      legend: figma.children('ChartLegendTable'),
+    },
+    example: ({ venn, legend }) => (
+      <Flex alignItems='flex-start' direction='row-reverse' gap={5}>
+        <Plot data={/* Add chart data here */} width={/* Add chart width here */} height={/* Add chart height here */}>{venn}</Plot>
+        {legend}
+      </Flex>
+    ),
+  },
+);
+
+figma.connect(
+  Venn,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=34-47213&t=Qp0tBVtbbr9U39bH-11',
+  {
+    variant: { 'legend placement': 'bottom' },
+    props: {
+      venn: figma.children('Venn'),
+      legend: figma.children('ChartLegendTable'),
+    },
+    example: ({ venn, legend }) => (
+      <Flex alignItems='flex-start' direction='column' gap={5}>
+        <Plot data={/* Add chart data here */} width={/* Add chart width here */} height={/* Add chart height here */}>{venn}</Plot>
+        {legend}
+      </Flex>
+    ),
+  },
+);
diff --git a/figma/mappings/data-display/XAxis.figma.jsx b/figma/mappings/data-display/XAxis.figma.jsx
new file mode 100644
index 0000000000..1f2eb78059
--- /dev/null
+++ b/figma/mappings/data-display/XAxis.figma.jsx
@@ -0,0 +1,105 @@
+import figma from '@figma/code-connect/react';
+import { XAxis } from '@semcore/ui/d3-chart';
+
+// Common component
+figma.connect(
+  XAxis,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=13867-59679&t=kghn8VFPezOPMocI-11',
+  {
+    example: () => (
+      <XAxis>
+        <XAxis.Ticks />
+      </XAxis>
+    ),
+  },
+);
+
+// Line chart
+figma.connect(
+  XAxis,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=14195-49172&t=kghn8VFPezOPMocI-11',
+  {
+    example: () => (
+      <XAxis>
+        <XAxis.Ticks />
+      </XAxis>
+    ),
+  },
+);
+
+// Area chart
+figma.connect(
+  XAxis,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=14195-48439&t=kghn8VFPezOPMocI-11',
+  {
+    example: () => (
+      <XAxis>
+        <XAxis.Ticks />
+      </XAxis>
+    ),
+  },
+);
+
+// Bar chart
+figma.connect(
+  XAxis,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=14195-45580&t=Qp0tBVtbbr9U39bH-11',
+  {
+    example: () => (
+      <XAxis>
+        <XAxis.Ticks />
+      </XAxis>
+    ),
+  },
+);
+
+// Horizontal bar chart
+figma.connect(
+  XAxis,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=14204-61608&t=rJcL0Nl5bcNFNb66-11',
+  {
+    example: () => (
+      <XAxis>
+        <XAxis.Grid />
+      </XAxis>
+    ),
+  },
+);
+
+figma.connect(
+  XAxis,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=14204-62500&t=rJcL0Nl5bcNFNb66-11',
+  {
+    example: () => (
+      <XAxis>
+        <XAxis.Ticks />
+      </XAxis>
+    ),
+  },
+);
+
+// Histogram chart
+figma.connect(
+  XAxis,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=14188-30654&t=rJcL0Nl5bcNFNb66-11',
+  {
+    example: () => (
+      <XAxis>
+        <XAxis.Ticks />
+      </XAxis>
+    ),
+  },
+);
+// XAxis with grid
+figma.connect(
+  XAxis,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=13987-108088&t=kghn8VFPezOPMocI-11',
+  {
+    example: () => (
+      <XAxis>
+        <XAxis.Ticks />
+        <XAxis.Grid />
+      </XAxis>
+    ),
+  },
+);
diff --git a/figma/mappings/data-display/YAxis.figma.jsx b/figma/mappings/data-display/YAxis.figma.jsx
new file mode 100644
index 0000000000..5b34b2fb4c
--- /dev/null
+++ b/figma/mappings/data-display/YAxis.figma.jsx
@@ -0,0 +1,28 @@
+import figma from '@figma/code-connect/react';
+import { YAxis } from '@semcore/ui/d3-chart';
+
+figma.connect(
+  YAxis,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=13824-22133&t=kghn8VFPezOPMocI-11',
+  {
+    example: () => (
+      <YAxis>
+        <YAxis.Ticks />
+      </YAxis>
+    ),
+  },
+);
+
+// With grid
+figma.connect(
+  YAxis,
+  'https://www.figma.com/design/EBG44NotS7lmjZnUOkhyrp/-Refactored---%E2%9C%A8-Charts?node-id=13144-9633&t=kghn8VFPezOPMocI-11',
+  {
+    example: () => (
+      <YAxis>
+        <YAxis.Ticks />
+        <YAxis.Grid />
+      </YAxis>
+    ),
+  },
+);
diff --git a/figma/mappings/data-table/DataTablePrimary.figma.jsx b/figma/mappings/data-table/DataTablePrimary.figma.jsx
new file mode 100644
index 0000000000..243a7d2dad
--- /dev/null
+++ b/figma/mappings/data-table/DataTablePrimary.figma.jsx
@@ -0,0 +1,86 @@
+import figma from '@figma/code-connect/react';
+import { Box } from '@semcore/ui/base-components';
+import DataTable from '@semcore/ui/data-table';
+
+figma.connect(
+  DataTable,
+  'https://www.figma.com/design/hwYZpLVEg6TU1AFwpBvYXA/-Refactoring-WIP---%E2%9C%A8-Table-components?node-id=3089-153990&',
+  {
+    variant: { 'action bar': 'false', 'built with': 'autolayout' },
+    example: () => (
+      <DataTable
+        data={/* Add your data here */}
+        aria-label='/* Add your aria-label here */'
+        wMax='/* Add your wMax here */'
+        headerProps={/* Add your headerProps here */}
+        columns={/* Add your columns here */}
+      />
+    ) },
+);
+
+figma.connect(
+  DataTable,
+  'https://www.figma.com/design/hwYZpLVEg6TU1AFwpBvYXA/-Refactoring-WIP---%E2%9C%A8-Table-components?node-id=3089-153990&',
+  {
+    variant: { 'action bar': 'true', 'built with': 'autolayout' },
+
+    example: () => (
+      <>
+        <Box
+          // need this for FF
+          tabIndex={-1}
+          wMax={800}
+          h={250}
+          style={{ overflow: 'auto', scrollPaddingTop: selectedRows.length ? '44px' : undefined }}
+        >
+          {/* Add  ScreenReaderOnly component for the action bar here, refer to the Checkboxes and action bar example in the documentation */}
+          {/* Add Collapse component for the action bar here, refer to the Checkboxes and action bar example in the documentation */}
+          <DataTable
+            data={/* Add your data here */}
+            aria-label='/* Add your aria-label here */'
+            selectedRows={/* Add your selectedRows here */}
+            onSelectedRowsChange={/* Add your onSelectedRowsChange here */}
+            ref={/* Add your ref here */}
+            sideIndents={/* Add your sideIndents here */}
+            loading={/* Add your loading here */}
+            compact={/* Add your compact here */}
+            headerProps={/* Add your headerProps here */}
+            columns={/* Add your columns here */}
+            uniqueRowKey={/* Add your uniqueRowKey here */}
+          />
+        </Box>
+      </>
+    ) },
+);
+
+// DataTable for Cards
+
+figma.connect(
+  DataTable,
+  'https://www.figma.com/design/hwYZpLVEg6TU1AFwpBvYXA/-Refactoring-WIP---%E2%9C%A8-Table-components?node-id=3089-153990&',
+  {
+    variant: { 'built with': 'autolayout (card layout)' },
+    example: () => (
+      <DataTable
+        data={/* Add your data here */}
+        aria-label='/* Add your aria-label here */'
+        variant='card'
+        columns={/* Add your columns here */}
+      />
+    ) },
+);
+
+figma.connect(
+  DataTable,
+  'https://www.figma.com/design/hwYZpLVEg6TU1AFwpBvYXA/-Refactoring-WIP---%E2%9C%A8-Table-components?node-id=3089-153990&',
+  {
+    variant: { 'built with': 'grid (card layout)' },
+    example: () => (
+      <DataTable
+        data={/* Add your data here */}
+        aria-label='/* Add your aria-label here */'
+        variant='card'
+        columns={/* Add your columns here */}
+      />
+    ) },
+);
diff --git a/figma/mappings/data-table/DataTablePrimaryExamples.figma.jsx b/figma/mappings/data-table/DataTablePrimaryExamples.figma.jsx
new file mode 100644
index 0000000000..32bc388b14
--- /dev/null
+++ b/figma/mappings/data-table/DataTablePrimaryExamples.figma.jsx
@@ -0,0 +1,68 @@
+import figma from '@figma/code-connect/react';
+import DataTable from '@semcore/ui/data-table';
+
+// DataTable example with Multi-level header
+
+figma.connect(
+  DataTable,
+  'https://www.figma.com/design/hwYZpLVEg6TU1AFwpBvYXA/-Refactoring-WIP---%E2%9C%A8-Table-components?node-id=110-46948',
+  {
+    example: () => (
+      // Refer to the DataTable example with Multi-level header in the documentation
+      <DataTable />
+    ) },
+);
+
+// DataTable example with Accordion
+
+figma.connect(
+  DataTable,
+  'https://www.figma.com/design/hwYZpLVEg6TU1AFwpBvYXA/-Refactoring-WIP---%E2%9C%A8-Table-components?node-id=110-46492',
+  {
+    example: () => (
+      // Refer to the DataTable example with Accordion in table in the documentation
+      <DataTable />
+    ) },
+);
+
+// DataTable example with horizontal scroll
+
+figma.connect(
+  DataTable,
+  'https://www.figma.com/design/hwYZpLVEg6TU1AFwpBvYXA/-Refactoring-WIP---%E2%9C%A8-Table-components?node-id=110-46562',
+  {
+    example: () => (
+      // Refer to the DataTable example for Header in the documentation
+      <DataTable />
+    ) },
+);
+
+// Simple DataTable example with several lines of text
+
+figma.connect(
+  DataTable,
+  'https://www.figma.com/design/hwYZpLVEg6TU1AFwpBvYXA/-Refactoring-WIP---%E2%9C%A8-Table-components?node-id=110-46567',
+  {
+    example: () => (
+      <DataTable
+        data={/* Add your data here */}
+        aria-label='/* Add your aria-label here */'
+        defaultGridTemplateColumnWidth='auto'
+        wMax='/* Add your wMax here */'
+        headerProps={/* Add your headerProps here */}
+        columns={/* Add your columns here */}
+      />
+    ) },
+);
+
+// DataTable example with fixed column
+
+figma.connect(
+  DataTable,
+  'https://www.figma.com/design/hwYZpLVEg6TU1AFwpBvYXA/-Refactored---%E2%9C%A8-Table-components?node-id=7139-16321',
+  {
+    example: () => (
+      // Refer to the DataTable example for Fixed column in the documentation
+      <DataTable />
+    ) },
+);
diff --git a/figma/mappings/data-table/DataTablePrimaryStates.figma.jsx b/figma/mappings/data-table/DataTablePrimaryStates.figma.jsx
new file mode 100644
index 0000000000..673feb70bf
--- /dev/null
+++ b/figma/mappings/data-table/DataTablePrimaryStates.figma.jsx
@@ -0,0 +1,112 @@
+import figma from '@figma/code-connect/react';
+import DataTable from '@semcore/ui/data-table';
+
+// DataTable example with initial loading state
+
+figma.connect(
+  DataTable,
+  'https://www.figma.com/design/hwYZpLVEg6TU1AFwpBvYXA/-Refactored---%E2%9C%A8-Table-components?node-id=7005-14998',
+  {
+    example: () => (
+      // Refer to the DataTable example with Initial loading in the documentation
+      <DataTable />
+    ) },
+);
+
+// DataTable example with ProgressBar
+
+figma.connect(
+  DataTable,
+  'https://www.figma.com/design/hwYZpLVEg6TU1AFwpBvYXA/-Refactored---%E2%9C%A8-Table-components?node-id=7005-15646',
+  {
+    example: () => (
+      <DataTable />
+    ) },
+);
+
+// DataTable example with loading state
+
+figma.connect(
+  DataTable,
+  'https://www.figma.com/design/hwYZpLVEg6TU1AFwpBvYXA/-Refactored---%E2%9C%A8-Table-components?node-id=7005-16065',
+  {
+    example: () => (
+      // Refer to the DataTable example with Updating table in the documentation
+      <DataTable />
+    ) },
+);
+
+// DataTable example with limited data
+
+figma.connect(
+  DataTable,
+  'https://www.figma.com/design/hwYZpLVEg6TU1AFwpBvYXA/-Refactored---%E2%9C%A8-Table-components?node-id=7005-18452',
+  {
+    example: () => (
+      // Refer to the DataTable example with Limited data in the documentation
+      <DataTable
+        limit={/* Add your limit block here */}
+      />
+    ) },
+);
+
+// Limit overlay
+
+figma.connect(
+  DataTable,
+  'https://www.figma.com/design/hwYZpLVEg6TU1AFwpBvYXA/-Refactored---%E2%9C%A8-Table-components?node-id=2898-3040&',
+  {
+    example: () => (
+      // Refer to the DataTable example with Limited data in the documentation
+      <DataTable
+        limit={/* Add your limit block here */}
+      />
+    ) },
+);
+
+// DataTable example with No data state
+
+figma.connect(
+  DataTable,
+  'https://www.figma.com/design/hwYZpLVEg6TU1AFwpBvYXA/-Refactored---%E2%9C%A8-Table-components?node-id=7139-9539',
+  {
+    example: () => (
+      // Refer to the DataTable example with Empty state in the documentation
+      <DataTable />
+    ) },
+);
+
+// DataTable example with Nothing found state
+
+figma.connect(
+  DataTable,
+  'https://www.figma.com/design/hwYZpLVEg6TU1AFwpBvYXA/-Refactored---%E2%9C%A8-Table-components?node-id=7139-9792',
+  {
+    example: () => (
+      // Refer to the DataTable example with Empty state in the documentation
+      <DataTable />
+    ) },
+);
+
+// DataTable example with Error state
+
+figma.connect(
+  DataTable,
+  'https://www.figma.com/design/hwYZpLVEg6TU1AFwpBvYXA/-Refactored---%E2%9C%A8-Table-components?node-id=7139-10035',
+  {
+    example: () => (
+      // Refer to the DataTable example with Empty state in the documentation
+      <DataTable />
+    ) },
+);
+
+// DataTable example with Empty message
+
+figma.connect(
+  DataTable,
+  'https://www.figma.com/design/hwYZpLVEg6TU1AFwpBvYXA/-Refactored---%E2%9C%A8-Table-components?node-id=7139-14219',
+  {
+    example: () => (
+      <DataTable />
+    ) },
+);
diff --git a/figma/mappings/data-table/DataTableSecondary.figma.jsx b/figma/mappings/data-table/DataTableSecondary.figma.jsx
new file mode 100644
index 0000000000..6dfa70b8f4
--- /dev/null
+++ b/figma/mappings/data-table/DataTableSecondary.figma.jsx
@@ -0,0 +1,17 @@
+import figma from '@figma/code-connect/react';
+import DataTable from '@semcore/ui/data-table';
+
+figma.connect(
+  DataTable,
+  'https://www.figma.com/design/hwYZpLVEg6TU1AFwpBvYXA/-Refactored---%E2%9C%A8-Table-components?node-id=7144-8914&',
+  {
+    example: () => (
+      <DataTable
+        data={/* Add your data here */}
+        use='secondary'
+        sort={/* Add your sort settings here */}
+        aria-label='/* Add your aria-label here */'
+        columns={/* Add your columns here */}
+      />
+    ) },
+);
diff --git a/figma/mappings/data-table/DataTableSecondaryStates.figma.jsx b/figma/mappings/data-table/DataTableSecondaryStates.figma.jsx
new file mode 100644
index 0000000000..c599c4ec5e
--- /dev/null
+++ b/figma/mappings/data-table/DataTableSecondaryStates.figma.jsx
@@ -0,0 +1,70 @@
+import figma from '@figma/code-connect/react';
+import DataTable from '@semcore/ui/data-table';
+
+// DataTable example with initial loading state
+
+figma.connect(
+  DataTable,
+  'https://www.figma.com/design/hwYZpLVEg6TU1AFwpBvYXA/-Refactoring-WIP---%E2%9C%A8-Table-components?node-id=7070-10401&',
+  {
+    example: () => (
+      // Refer to the DataTable example with Initial loading in the documentation
+      <DataTable
+        use='secondary'
+        sort={/* Add your sort settings here */}
+        aria-label='/* Add your aria-label here */'
+        columns={/* Add your columns here */}
+      />
+    ) },
+);
+
+// DataTable example with No data state
+
+figma.connect(
+  DataTable,
+  'https://www.figma.com/design/hwYZpLVEg6TU1AFwpBvYXA/-Refactored---%E2%9C%A8-Table-components?node-id=7144-11604',
+  {
+    example: () => (
+      // Refer to the DataTable example with Empty state in the documentation
+      <DataTable
+        use='secondary'
+        sort={/* Add your sort settings here */}
+        aria-label='/* Add your aria-label here */'
+        columns={/* Add your columns here */}
+      />
+    ) },
+);
+
+// DataTable example with Nothing found state
+
+figma.connect(
+  DataTable,
+  'https://www.figma.com/design/hwYZpLVEg6TU1AFwpBvYXA/-Refactored---%E2%9C%A8-Table-components?node-id=7144-11786',
+  {
+    example: () => (
+      // Refer to the DataTable example with Empty state in the documentation
+      <DataTable
+        use='secondary'
+        sort={/* Add your sort settings here */}
+        aria-label='/* Add your aria-label here */'
+        columns={/* Add your columns here */}
+      />
+    ) },
+);
+
+// DataTable example with Error state
+
+figma.connect(
+  DataTable,
+  'https://www.figma.com/design/hwYZpLVEg6TU1AFwpBvYXA/-Refactored---%E2%9C%A8-Table-components?node-id=7144-11889',
+  {
+    example: () => (
+      // Refer to the DataTable example with Empty state in the documentation
+      <DataTable
+        use='secondary'
+        sort={/* Add your sort settings here */}
+        aria-label='/* Add your aria-label here */'
+        columns={/* Add your columns here */}
+      />
+    ) },
+);
diff --git a/figma/mappings/ux-patterns/AddFilter.figma.jsx b/figma/mappings/ux-patterns/AddFilter.figma.jsx
new file mode 100644
index 0000000000..93d720840f
--- /dev/null
+++ b/figma/mappings/ux-patterns/AddFilter.figma.jsx
@@ -0,0 +1,62 @@
+import figma from '@figma/code-connect/react';
+import AddFilter from '@semcore/ui/add-filter';
+import Select from '@semcore/ui/select';
+
+figma.connect(
+  Select,
+  'https://www.figma.com/design/1zWWz7R5Lt9tt9BM6Bzf6W/%F0%9F%90%8B-Filter-Patterns?node-id=1546-1937',
+  {
+    props: {
+      filterTrigger: figma.children('FilterTrigger'),
+      selectMenu: figma.children('Select.Menu'),
+    },
+    example: ({ filterTrigger, selectMenu }) => (
+      <Select>
+        {filterTrigger}
+        {selectMenu}
+      </Select>
+    ),
+  },
+);
+
+figma.connect(
+  AddFilter,
+  'https://www.figma.com/design/1zWWz7R5Lt9tt9BM6Bzf6W/%F0%9F%90%8B-Filter-Patterns?node-id=1546-1931',
+  {
+    props: {
+      trigger: figma.children('Button'),
+      selectMenu: figma.children('Select.Menu'),
+    },
+    example: ({ trigger, selectMenu }) => (
+      <AddFilter.Select>
+        <AddFilter.Select.Trigger
+          placeholder='/* Add placeholder */'
+          aria-label='/* Add aria-label */'
+        >
+          {trigger}
+        </AddFilter.Select.Trigger>
+        <AddFilter.Select.Menu aria-label='/* Add aria-label */'>
+          {selectMenu}
+          <AddFilter.Select.Option>
+            {/* Add option */}
+          </AddFilter.Select.Option>
+        </AddFilter.Select.Menu>
+      </AddFilter.Select>
+    ),
+  },
+);
+
+figma.connect(
+  AddFilter,
+  'https://www.figma.com/design/1zWWz7R5Lt9tt9BM6Bzf6W/%F0%9F%90%8B-Filter-Patterns?node-id=1546-1920',
+  {
+    props: {
+      content: figma.children('*'),
+    },
+    example: ({ content }) => (
+      <AddFilter>
+        {content}
+      </AddFilter>
+    ),
+  },
+);
diff --git a/figma/mappings/ux-patterns/AutoSuggest.figma.jsx b/figma/mappings/ux-patterns/AutoSuggest.figma.jsx
new file mode 100644
index 0000000000..d7310d3d2a
--- /dev/null
+++ b/figma/mappings/ux-patterns/AutoSuggest.figma.jsx
@@ -0,0 +1,30 @@
+import figma from '@figma/code-connect/react';
+import { Box } from '@semcore/ui/base-components';
+import Input from '@semcore/ui/input';
+import Select from '@semcore/ui/select';
+
+figma.connect(
+  Box,
+  'https://www.figma.com/design/t7T1SLzIkERV1IrsjsKugE/-Refactoring-WIP--%F0%9F%92%A0-UX-Patterns?node-id=15049-258574&',
+  {
+    props: {
+      size: figma.enum('size', {
+        M: 'm',
+        L: 'l',
+      }),
+    },
+    example: ({ size }) => (
+      <>
+        <Box>
+          <Select size={size}>
+            <Select.Trigger>
+              <Input.Value role='combobox' />
+            </Select.Trigger>
+            <Select.Menu>
+              {/* Suggestions map here */}
+            </Select.Menu>
+          </Select>
+        </Box>
+      </>
+    ) },
+);
diff --git a/figma/mappings/ux-patterns/ConfirmDialog.figma.jsx b/figma/mappings/ux-patterns/ConfirmDialog.figma.jsx
new file mode 100644
index 0000000000..759b24fd65
--- /dev/null
+++ b/figma/mappings/ux-patterns/ConfirmDialog.figma.jsx
@@ -0,0 +1,50 @@
+import figma from '@figma/code-connect/react';
+import { Flex } from '@semcore/ui/base-components';
+import Modal from '@semcore/ui/modal';
+import { Text } from '@semcore/ui/typography';
+
+figma.connect(
+  Modal,
+  'https://www.figma.com/design/t7T1SLzIkERV1IrsjsKugE/-Refactoring-WIP--%F0%9F%92%A0-UX-Patterns?node-id=5771-181110&',
+  {
+    props: {
+      title: figma.textContent('↳ title'),
+      text: figma.textContent('↳ text'),
+      actions: figma.children('Button'),
+    },
+    example: ({ title, text, actions }) => (
+      <Modal>
+        <Modal.Title mb={2}>{title}</Modal.Title>
+        <Text size={200} tag='p'>
+          {text}
+        </Text>
+        <Flex gap={2} mt={4}>{actions}</Flex>
+      </Modal>
+    ),
+  },
+);
+
+figma.connect(
+  Modal,
+  'https://www.figma.com/design/t7T1SLzIkERV1IrsjsKugE/-Refactoring-WIP--%F0%9F%92%A0-UX-Patterns?node-id=5771-181110&',
+  {
+    variant: { case: 'Delete project' },
+    props: {
+      title: figma.textContent('↳ title'),
+      text: figma.textContent('↳ text'),
+      list: figma.children('List'),
+      actions: figma.children('Button'),
+    },
+    example: ({ title, text, list, actions }) => (
+      <Modal>
+        <Modal.Title mb={2}>{title}</Modal.Title>
+        <Text size={200} tag='p'>
+          {text}
+        </Text>
+        {list}
+        {/* Add input for confirmation, refer to the documentation for Confirmation modal dialog */}
+        <Flex gap={2} mt={4}>{actions}</Flex>
+      </Modal>
+    ),
+  },
+);
diff --git a/figma/mappings/ux-patterns/EmptyPage.figma.jsx b/figma/mappings/ux-patterns/EmptyPage.figma.jsx
new file mode 100644
index 0000000000..640d379bfd
--- /dev/null
+++ b/figma/mappings/ux-patterns/EmptyPage.figma.jsx
@@ -0,0 +1,167 @@
+import figma from '@figma/code-connect/react';
+import { Flex } from '@semcore/ui/base-components';
+import { Text } from '@semcore/ui/typography';
+
+// Message with text content
+
+figma.connect(
+  Flex,
+  'https://www.figma.com/design/t7T1SLzIkERV1IrsjsKugE/-Refactoring-WIP--%F0%9F%92%A0-UX-Patterns?node-id=143-196596&',
+  {
+    variant: { platform: 'desktop', content: 'text' },
+    props: {
+      title: figma.textContent('↳ title'),
+      text: figma.textContent('↳ text'),
+      actions: figma.children('Button'),
+    },
+    example: ({ title, text, actions }) => (
+      <Flex gap={10}>
+        <img src='/* Place your illustration here */' />
+        <Flex direction='column'>
+          <Text mb={3} size={300} bold>{title}</Text>
+          <Text size={200}>{text}</Text>
+          <Flex mt={5} gap={2}>
+            {actions}
+          </Flex>
+        </Flex>
+      </Flex>
+    ),
+  },
+);
+
+figma.connect(
+  Flex,
+  'https://www.figma.com/design/t7T1SLzIkERV1IrsjsKugE/-Refactoring-WIP--%F0%9F%92%A0-UX-Patterns?node-id=143-196596&',
+  {
+    variant: { platform: 'mobile', content: 'text' },
+    props: {
+      title: figma.textContent('↳ title'),
+      text: figma.textContent('↳ text'),
+      actions: figma.children('Button'),
+    },
+    example: ({ title, text, actions }) => (
+      <Flex direction='column' gap={10}>
+        <img src='/* Place your illustration here */' />
+        <Flex direction='column'>
+          <Text mb={3} size={300} bold>{title}</Text>
+          <Text size={200}>{text}</Text>
+          <Flex mt={5} gap={2} direction='column'>
+            {actions}
+          </Flex>
+        </Flex>
+      </Flex>
+    ),
+  },
+);
+
+// Message with a form
+
+figma.connect(
+  Flex,
+  'https://www.figma.com/design/t7T1SLzIkERV1IrsjsKugE/-Refactoring-WIP--%F0%9F%92%A0-UX-Patterns?node-id=143-196596&',
+  {
+    variant: { platform: 'desktop', content: 'form' },
+    props: {
+      title: figma.textContent('↳ title'),
+      text: figma.textContent('↳ text'),
+      input: figma.children('Input'),
+      actions: figma.children('Button'),
+    },
+    example: ({ title, text, input, actions }) => (
+      <Flex gap={10}>
+        <img src='/* Place your illustration here */' />
+        <Flex direction='column'>
+          <Text mb={3} size={300} bold>{title}</Text>
+          <Text size={200}>{text}</Text>
+          <Flex mt={5} gap={2}>
+            {input}
+            {actions}
+          </Flex>
+        </Flex>
+      </Flex>
+    ),
+  },
+);
+
+figma.connect(
+  Flex,
+  'https://www.figma.com/design/t7T1SLzIkERV1IrsjsKugE/-Refactoring-WIP--%F0%9F%92%A0-UX-Patterns?node-id=143-196596&',
+  {
+    variant: { platform: 'mobile', content: 'form' },
+    props: {
+      title: figma.textContent('↳ title'),
+      text: figma.textContent('↳ text'),
+      actions: figma.children('Button'),
+      input: figma.children('Input'),
+    },
+    example: ({ title, text, input, actions }) => (
+      <Flex direction='column' gap={10}>
+        <img src='/* Place your illustration here */' />
+        <Flex direction='column'>
+          <Text mb={3} size={300} bold>{title}</Text>
+          <Text size={200}>{text}</Text>
+          <Flex mt={5} gap={2} direction='column'>
+            {input}
+            {actions}
+          </Flex>
+        </Flex>
+      </Flex>
+    ),
+  },
+);
+
+// Message with a list
+
+figma.connect(
+  Flex,
+  'https://www.figma.com/design/t7T1SLzIkERV1IrsjsKugE/-Refactoring-WIP--%F0%9F%92%A0-UX-Patterns?node-id=143-196596&',
+  {
+    variant: { platform: 'desktop', content: 'list' },
+    props: {
+      title: figma.textContent('↳ title'),
+      text: figma.textContent('↳ text'),
+      list: figma.children('List'),
+      actions: figma.children('Button'),
+    },
+    example: ({ title, text, list, actions }) => (
+      <Flex gap={10}>
+        <img src='/* Place your illustration here */' />
+        <Flex direction='column'>
+          <Text mb={3} size={300} bold>{title}</Text>
+          <Text size={200}>{text}</Text>
+          {list}
+          <Flex mt={5} gap={2}>
+            {actions}
+          </Flex>
+        </Flex>
+      </Flex>
+    ),
+  },
+);
+
+figma.connect(
+  Flex,
+  'https://www.figma.com/design/t7T1SLzIkERV1IrsjsKugE/-Refactoring-WIP--%F0%9F%92%A0-UX-Patterns?node-id=143-196596&',
+  {
+    variant: { platform: 'mobile', content: 'list' },
+    props: {
+      title: figma.textContent('↳ title'),
+      text: figma.textContent('↳ text'),
+      actions: figma.children('Button'),
+      list: figma.children('List'),
+    },
+    example: ({ title, text, list, actions }) => (
+      <Flex direction='column' gap={10}>
+        <img src='/* Place your illustration here */' />
+        <Flex direction='column'>
+          <Text mb={3} size={300} bold>{title}</Text>
+          <Text size={200}>{text}</Text>
+          {list}
+          <Flex mt={5} gap={2} direction='column'>
+            {actions}
+          </Flex>
+        </Flex>
+      </Flex>
+    ),
+  },
+);
diff --git a/figma/mappings/ux-patterns/ExportDropdown.figma.jsx b/figma/mappings/ux-patterns/ExportDropdown.figma.jsx
new file mode 100644
index 0000000000..fca2e17f6e
--- /dev/null
+++ b/figma/mappings/ux-patterns/ExportDropdown.figma.jsx
@@ -0,0 +1,75 @@
+import figma from '@figma/code-connect/react';
+import { Flex } from '@semcore/ui/base-components';
+import DropdownMenu from '@semcore/ui/dropdown-menu';
+import { Text } from '@semcore/ui/typography';
+
+figma.connect(
+  DropdownMenu,
+  'https://www.figma.com/design/t7T1SLzIkERV1IrsjsKugE/-Refactoring-WIP--%F0%9F%92%A0-UX-Patterns?node-id=17013-6655&',
+  {
+    variant: { case: 'default small' },
+    props: {
+      items: figma.children('DropdownMenu.Item/Default'),
+      message: figma.boolean('neutral message ↓', {
+        true: figma.children('Message'),
+        false: undefined,
+      }),
+      notice: figma.boolean('notice ↓', {
+        true: figma.children('Notice'),
+        false: undefined,
+      }),
+    },
+    example: ({ items, message, notice }) => (
+      <DropdownMenu>
+        <DropdownMenu.Trigger tag={Button}>
+          {/* Set trigger here */}
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Popper wMax='/* Set width here */' aria-label='/* Set aria-label here */'>
+          <DropdownMenu.List>
+            {items}
+          </DropdownMenu.List>
+          {message}
+          {notice}
+        </DropdownMenu.Popper>
+      </DropdownMenu>
+    ),
+  },
+);
+
+figma.connect(
+  DropdownMenu,
+  'https://www.figma.com/design/t7T1SLzIkERV1IrsjsKugE/-Refactoring-WIP--%F0%9F%92%A0-UX-Patterns?node-id=17013-6655&',
+  {
+    variant: { case: 'default form' },
+    props: {
+      title: figma.textContent('↳ title'),
+      actions: figma.children('Button'),
+      message: figma.boolean('neutral message ↓', {
+        true: figma.children('Message'),
+        false: undefined,
+      }),
+      notice: figma.boolean('notice ↓', {
+        true: figma.children('Notice'),
+        false: undefined,
+      }),
+    },
+    example: ({ title, actions, message, notice }) => (
+      <DropdownMenu>
+        <DropdownMenu.Trigger tag={Button}>
+          {/* Set trigger here */}
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Popper wMax='/* Set width here */' aria-label='/* Set aria-label here */'>
+          <Flex direction='column' gap={4} alignItems='start' p={4}>
+            <Text size={300} bold>{title}</Text>
+            <Flex direction='column' gap={2}>
+              {/* Your form here */}
+            </Flex>
+            <Flex gap={2}>{actions}</Flex>
+          </Flex>
+          {message}
+          {notice}
+        </DropdownMenu.Popper>
+      </DropdownMenu>
+    ),
+  },
+);
diff --git a/figma/mappings/ux-patterns/SuccessMessage.figma.jsx b/figma/mappings/ux-patterns/SuccessMessage.figma.jsx
new file mode 100644
index 0000000000..aa8700210c
--- /dev/null
+++ b/figma/mappings/ux-patterns/SuccessMessage.figma.jsx
@@ -0,0 +1,51 @@
+import figma from '@figma/code-connect/react';
+import { Flex } from '@semcore/ui/base-components';
+import MailSent from '@semcore/ui/illustration/MailSent';
+import Modal from '@semcore/ui/modal';
+import { Text } from '@semcore/ui/typography';
+
+figma.connect(
+  Modal,
+  'https://www.figma.com/design/t7T1SLzIkERV1IrsjsKugE/-Refactoring-WIP--%F0%9F%92%A0-UX-Patterns?node-id=17095-22543&',
+  {
+    variant: { type: 'modal window' },
+    props: {
+      title: figma.textContent('↳ title'),
+      text: figma.textContent('↳ text'),
+      actions: figma.children('Button'),
+    },
+    example: ({ title, text, actions }) => (
+      <Modal>
+        <MailSent />
+        <Modal.Title mt={6}>{title}</Modal.Title>
+        <Text size={200} tag='p'>
+          {text}
+        </Text>
+        <Flex gap={2} mt={6}>{actions}</Flex>
+      </Modal>
+    ),
+  },
+);
+
+figma.connect(
+  Flex,
+  'https://www.figma.com/design/t7T1SLzIkERV1IrsjsKugE/-Refactoring-WIP--%F0%9F%92%A0-UX-Patterns?node-id=17095-22543&',
+  {
+    variant: { type: 'message' },
+    props: {
+      title: figma.textContent('↳ title'),
+      text: figma.textContent('↳ text'),
+      actions: figma.children('Button'),
+    },
+    example: ({ title, text, actions }) => (
+      <Flex direction='column'>
+        <MailSent />
+        <Text mb={2} mt={6} size={400} bold>{title}</Text>
+        <Text size={200} tag='p'>
+          {text}
+        </Text>
+        <Flex gap={2} mt={6}>{actions}</Flex>
+      </Flex>
+    ),
+  },
+);
diff --git a/figma/mappings/ux-patterns/current-libraries/Errors.figma.jsx b/figma/mappings/ux-patterns/current-libraries/Errors.figma.jsx
new file mode 100644
index 0000000000..4dd23a1336
--- /dev/null
+++ b/figma/mappings/ux-patterns/current-libraries/Errors.figma.jsx
@@ -0,0 +1,57 @@
+import figma from '@figma/code-connect/react';
+import Error, { AccessDenied, Maintenance, PageError, PageNotFound, ProjectNotFound, getIconPath } from '@semcore/ui/errors';
+
+figma.connect(
+  PageNotFound,
+  'https://www.figma.com/design/EWdX1ly5KsoNu8sywYJdKk/%F0%9F%92%A0-UX-Patterns?node-id=12537-41788',
+  {
+    variant: { type: '404: We got lost' },
+  },
+);
+
+figma.connect(
+  AccessDenied,
+  'https://www.figma.com/design/EWdX1ly5KsoNu8sywYJdKk/%F0%9F%92%A0-UX-Patterns?node-id=12537-41788',
+  {
+    variant: { type: 'AccessDenied (Secret page)' },
+  },
+);
+
+figma.connect(
+  ProjectNotFound,
+  'https://www.figma.com/design/EWdX1ly5KsoNu8sywYJdKk/%F0%9F%92%A0-UX-Patterns?node-id=12537-41788',
+  {
+    variant: { type: '404: Project not found' },
+  },
+);
+
+figma.connect(
+  Maintenance,
+  'https://www.figma.com/design/EWdX1ly5KsoNu8sywYJdKk/%F0%9F%92%A0-UX-Patterns?node-id=12537-41788',
+  {
+    variant: { type: 'Under maintenance' },
+    example: () => <Maintenance toolName={toolname} />,
+  },
+);
+
+figma.connect(
+  PageError,
+  'https://www.figma.com/design/EWdX1ly5KsoNu8sywYJdKk/%F0%9F%92%A0-UX-Patterns?node-id=12537-41788',
+  {
+    variant: { type: '500: Smth wrong - Try again' },
+  },
+);
+
+figma.connect(
+  Error,
+  'https://www.figma.com/design/EWdX1ly5KsoNu8sywYJdKk/%F0%9F%92%A0-UX-Patterns?node-id=12537-41788',
+  {
+    example: () => (
+      <Error icon={getIconPath({ illustrationName })}>
+        <Error.Title>{errorTitle}</Error.Title>
+        <Error.Description>{errorDescription}</Error.Description>
+        <Error.Controls>{errorControls}</Error.Controls>
+      </Error>
+    ),
+  },
+);
diff --git a/figma/package.json b/figma/package.json
new file mode 100644
index 0000000000..349af63775
--- /dev/null
+++ b/figma/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "figma",
+  "version": "1.0.0",
+  "description": "",
+  "scripts": {
+    "figma-publish": "npx figma connect publish",
+    "figma-publish-custom": "npx figma connect publish --config figma-custom.config.json"
+  },
+  "devDependencies": {
+    "@figma/code-connect": "^1.4.3"
+  }
+}
\ No newline at end of file
diff --git a/figma/src/connect.ts b/figma/src/connect.ts
new file mode 100644
index 0000000000..3b0fa5b8cf
--- /dev/null
+++ b/figma/src/connect.ts
@@ -0,0 +1,148 @@
+import { figma } from './figma';
+import type { LayerHandle, ErrorHandle } from './figma';
+const rootinstance = figma.selectedInstance;
+
+interface ChildCodeParameters {
+  wrapper?: string;
+  path?: string[];
+}
+
+interface ChildrenCodeParameters {
+  layerName?: string;
+  wrapper?: string;
+  filter: (value: LayerHandle, index: number, array: LayerHandle[]) => boolean;
+}
+
+interface Result {
+  node: LayerHandle;
+  path: string[];
+}
+
+const traverse = (
+  node: LayerHandle,
+  layerName: string,
+  results: Result[],
+  path: string[] = [],
+) => {
+  if (node.name === layerName) {
+    results.push({ node, path: path.slice(1) });
+    return;
+  }
+
+  if (node.type === 'INSTANCE' && node.children) {
+    node.children.forEach((child) => {
+      traverse(child, layerName, results, [...path, node.name]);
+    });
+  }
+};
+
+const layerCode = (layer: LayerHandle | ErrorHandle | undefined) => {
+  switch (layer?.type) {
+    case 'INSTANCE': return figma.tsx`${layer.executeTemplate().example}`;
+    case 'TEXT': return figma.tsx`${layer.textContent}`;
+    default: return;
+  }
+};
+
+export const connect = {
+  /** Returns a pretty representation of a prop/value pair. */
+  formatProp: (propName: string, propValue: string | boolean | undefined) => {
+    if (propValue) {
+      if (!['true', 'false'].includes(propValue.toString().toLowerCase()) && !propValue.toString().startsWith('/*')) {
+        return figma.tsx`${propName} = "${propValue}"`;
+      }
+      return figma.tsx`${propName} = {${propValue}}`;
+    }
+  },
+  /**
+   * Gets a property value and returns a pretty representation of it and its value.
+   * @expectedPropValue check if the prop value matches the expected value and return that value
+   * @layerName get the prop from the child instance with this name, instead of the root instance
+   * @returns A string like `prop = {value}` or `prop = "value"`. With `expectedPropValue` returns only `value`
+   * */
+  getProp: (propName: string, expectedPropValue?: string | boolean, layerName?: string) => {
+    if (figma.selectedInstance) {
+      const instance = layerName ? figma.selectedInstance.findInstance(layerName) : figma.selectedInstance;
+      if (instance.type === 'INSTANCE') {
+        const propValue = instance.getPropertyValue(propName).toString().toLowerCase();
+        if (expectedPropValue !== undefined) {
+          if (propValue == expectedPropValue.toString().toLowerCase()) {
+            return propValue;
+          }
+        } else {
+          if (!['true', 'false'].includes(propValue)) {
+            return figma.tsx`${propName} = "${propValue}"`;
+          } else if (propValue === 'true') {
+            return propName;
+          }
+        }
+      }
+    }
+    return;
+  },
+  /**
+   * @returns array of children
+   * @param prop return only children that have `prop=value`
+   */
+  children: ({ prop, value }: { prop?: string; value?: string | boolean } = {}) => {
+    if (rootinstance) {
+      if (prop !== undefined && value !== undefined) {
+        return rootinstance.findLayers((child) => child.type === 'INSTANCE' && child.getPropertyValue(prop) === value);
+      }
+      return rootinstance.findLayers((child) => child.type === 'INSTANCE');
+    }
+    return [];
+  },
+  /** Finds a child instance or text by the layer name and returns its code. */
+  childCode: (layerName: string, params?: ChildCodeParameters) => {
+    if (rootinstance) {
+      const { path, wrapper } = params ?? {};
+      const inst = rootinstance.findInstance(layerName, { path });
+      const text = rootinstance.findText(layerName, { traverseInstances: !!path });
+      let result: string | string[] | undefined;
+      if (text.type === 'TEXT' && path) {
+        const results: Result[] = [];
+        traverse(rootinstance, layerName, results);
+        result = layerCode(results.filter((node) => node.path.join('#SEP;') === path?.join('#SEP;'))[0]?.node);
+      } else {
+        result = layerCode(inst) ?? layerCode(text);
+      }
+      if (result)
+        return wrapper
+          ? figma.tsx`<${wrapper}>${result}</${wrapper.split(' ')[0]}>`
+          : result;
+    }
+  },
+  /**
+   * @layerName only returns children of the specified nested layer
+   * @wrapper wraps the code in `<{wrapper}>` tags
+   * @returns the code for all children
+   * */
+  childrenCode: (params?: ChildrenCodeParameters) => {
+    const { layerName, wrapper, filter } = params ?? { filter: () => true };
+    if (figma.selectedInstance) {
+      const instance = layerName ? figma.selectedInstance.findInstance(layerName) : figma.selectedInstance;
+      if (instance.type === 'INSTANCE') {
+        let code: string | undefined;
+        instance.children.filter(filter).forEach((child) => {
+          code = figma.tsx`${code}${child.type === 'INSTANCE' ? child.executeTemplate().example : child.textContent}`;
+        });
+        if (wrapper && code) code = figma.tsx`<${wrapper}>${code}</${wrapper}>`;
+        return code;
+      }
+    }
+  },
+  getBoolean: (propName: string, options?: Record<string, any>) => rootinstance?.getBoolean(propName, options),
+  printAll: () => JSON.stringify(rootinstance),
+};
+
+export interface ConnectSettings {
+  /** Code snippet that will display in Figma. */
+  example: string | undefined;
+  /** Component ID. Can be used to reference component in other examples. */
+  id: string;
+  /** Figma node URL. */
+  url: string;
+  /** List of imports for the component. */
+  imports?: string[];
+};
diff --git a/figma/src/figma.ts b/figma/src/figma.ts
new file mode 100644
index 0000000000..3ad7646ad8
--- /dev/null
+++ b/figma/src/figma.ts
@@ -0,0 +1,87 @@
+interface InstanceHandle {
+  name: string;
+  /**
+   * Gets a boolean property value.
+   * Optional mapping object can transform the boolean value to any other type.
+   * */
+  getBoolean(propName: string, options?: Record<string, any>): boolean | any;
+  /** Gets a raw property value. */
+  getPropertyValue(propName: string): string | boolean;
+  /**
+   * Finds an child instance layer by name.
+   * Optional selector options for path matching and traversal behavior.
+   * */
+  findInstance(layerName: string, opts?: SelectorOptions): InstanceHandle | ErrorHandle;
+  /**
+   * Finds a text layer by name.
+   * Optional selector options for path matching and traversal behavior.
+   * */
+  findText(layerName: string, opts?: SelectorOptions): TextHandle | ErrorHandle;
+  /**
+   * Finds all layers (instances or text) that match the selector function.
+   * Optional selector options for path matching and traversal behavior.
+   * */
+  findLayers(selectorFn: (node: LayerHandle) => boolean, opts?: SelectorOptions): LayerHandle[];
+  type: 'INSTANCE';
+  /**
+   * Renders the instance and returns both the rendered sections and metadata.
+   * */
+  executeTemplate: () => { example: ResultSection[]; metadata: Metadata };
+  children: LayerHandle[];
+};
+
+interface TextHandle {
+  name: string;
+  type: 'TEXT';
+  textContent: string;
+};
+
+export interface ErrorHandle {
+  type: 'ERROR';
+};
+
+export type LayerHandle = InstanceHandle | TextHandle;
+
+/** Options for finding layers */
+interface SelectorOptions {
+  /** List of parent layer names that matches the layer hierarchy */
+  path?: string[];
+  /** Whether to search through nested instances */
+  traverseInstances?: boolean;
+}
+
+/** Metadata that can be included in template exports */
+interface Metadata {
+  /**
+   * Controls how nested instances are rendered in the Code Connect panel:
+   * - true: The instance's code will be rendered inline within its parent
+   * - false: The instance will be shown as a clickable pill that expands when clicked
+   *
+   * For example:
+   * - Set to true for small components like icons that make sense inline
+   * - Set to false for complex components that should be viewed separately
+   */
+  nestable?: boolean;
+
+  /** Props which can be consumed in a parent instance */
+  props?: Record<string, any>;
+}
+
+/**
+ * Dummy type. See full info on
+ * [Code Sections (Template V2 API)](https://developers.figma.com/docs/code-connect/template-v2-api/#code-sections)
+ * */
+type ResultSection = string;
+
+interface Figma {
+  tsx: (...str: (any)[]) => string;
+  selectedInstance?: InstanceHandle;
+};
+
+/**
+ * Dummy figma object. See full info on
+ * [Template V2 API](https://developers.figma.com/docs/code-connect/template-v2-api/)
+ */
+export const figma: Figma = {
+  tsx: () => '',
+};
diff --git a/figma/src/icons.ts b/figma/src/icons.ts
new file mode 100644
index 0000000000..acb1e93cdf
--- /dev/null
+++ b/figma/src/icons.ts
@@ -0,0 +1,57 @@
+import fs from 'fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import dotenv from 'dotenv';
+import * as Figma from 'figma-js';
+
+// create .env file in the root of the project and put this line there:
+// FIGMA_ACCESS_TOKEN=yourFigmaToken
+dotenv.config({ path: './.env' });
+
+const accessToken = process.env.FIGMA_ACCESS_TOKEN;
+
+const figma = Figma.Client({ personalAccessToken: accessToken });
+// const axiosOptions = { headers: { "X-FIGMA-TOKEN": accessToken } };
+
+const fileid = 'lVX2dKnVFtcSTQV7eSS5j1';
+
+const sets = await figma.fileComponentSets(fileid);
+const components = await figma.fileComponents(fileid);
+
+let str = `import figma from '@figma/code-connect';
+`;
+
+for (const set of sets.data.meta.component_sets) {
+  let folder = '';
+  switch (set.containing_frame.nodeId) {
+    case '4738:24': folder = 'icon/color';
+      break;
+    case '3940:14': folder = 'icon/pay';
+      break;
+    default: folder = 'icon';
+  }
+  const sizes = ['M', 'L'];
+
+  for (const size of sizes) {
+    const iconSubpath = folder === 'icon' ? '' : `${folder.replace(/^icon\//, '')}/`;
+    str += `
+import ${set.name}${size} from '@semcore/icon/${iconSubpath}${set.name}/${size.toLowerCase()}';
+figma.connect(${set.name}${size}, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=${set.node_id}', {
+  variant: { ${folder === 'icon/pay' ? 'size' : 'Size'}: '${folder === 'icon/pay' ? size.toLowerCase() : size}' },
+  example: () => <${set.name}${size} />,
+});
+`;
+  }
+}
+
+for (const component of components.data.meta.components) {
+  if (component.containing_frame.nodeId !== '7776:24') continue;
+  str += `
+import ${component.name} from '@semcore/icon/platform/${component.name}';
+figma.connect(${component.name}, 'https://www.figma.com/design/lVX2dKnVFtcSTQV7eSS5j1/%F0%9F%94%8D-Icons?node-id=${component.node_id}');
+`;
+}
+
+const outFile = path.join(path.dirname(fileURLToPath(import.meta.url)), '../mappings/Icon.figma.jsx');
+await fs.writeFile(outFile, str);
diff --git a/figma/src/parser-old.ts b/figma/src/parser-old.ts
new file mode 100644
index 0000000000..607efc6e8a
--- /dev/null
+++ b/figma/src/parser-old.ts
@@ -0,0 +1,90 @@
+import fs from 'fs';
+
+import type {
+  ParseResponsePayload, ParserExecutableMessage, CodeConnectDoc,
+} from './parser.types';
+
+const messages: ParserExecutableMessage[] = [];
+
+const readFile = (filePath: string) => {
+  messages.push({ level: 'INFO', message: `\n-> Parsing ${filePath}` });
+
+  let template = fs.readFileSync(filePath, 'utf-8');
+  const templateStrings = template.split('\n');
+
+  let figmaNode = '';
+  let component = '';
+  const imports: string[] = [];
+  let i = 0;
+
+  // parsing metadata
+  while (!templateStrings[i].includes('require(\'figma\')')) {
+    let line = templateStrings[i];
+
+    if (line.startsWith('//')) {
+      line = line.substring(2).trim();
+
+      const url = line.match(/https:\/\/.+/);
+      if (url)
+        figmaNode = url[0];
+
+      const componentMatch = line.match(/^component:*\s*(.+)/);
+      if (componentMatch)
+        component = componentMatch[1];
+
+      if (line.startsWith('import'))
+        imports.push(line);
+    }
+    i++;
+  }
+
+  if (figmaNode === '') {
+    messages.push({
+      level: 'WARN',
+      message: 'Didn\'t find the node URL, skipping file.',
+    });
+    return;
+  }
+
+  // custom functions
+  const injectable = `
+  const layerArrayCode = (array, wrapper) => {
+    let code;
+    array.forEach((child) => code = figma.tsx\`\${code}\${child.type === 'INSTANCE' ? child.executeTemplate().example : child.textContent}\`);
+    if (wrapper && code) code = figma.tsx\`<\${wrapper}>\${code}</\${wrapper}>\`;
+    return code;
+  };
+  const instanceCode = (instance, layerName) => {
+    if (instance.findInstance(layerName).type === 'INSTANCE')
+      return instance.findInstance(layerName).executeTemplate().example;
+    return undefined;
+  }
+  `;
+  template = [templateStrings[i], injectable, ...templateStrings.slice(i + 1)].join('\n');
+
+  return {
+    figmaNode,
+    component,
+    source: 'string',
+    template,
+    templateData: {
+      nestable: true,
+      props: {},
+      imports,
+    },
+    language: 'typescript',
+    label: 'React',
+  } as CodeConnectDoc;
+};
+
+const stdin = JSON.parse(fs.readFileSync(0, 'utf-8')) as { paths: string[] };
+if (!stdin.paths.length) messages.push({ level: 'ERROR', message: 'No files found.' });
+
+const docs = stdin.paths.map((path) => readFile(path)).filter((item) => item !== undefined);
+
+const payload: ParseResponsePayload = {
+  docs,
+  messages,
+};
+
+process.stdout.write(JSON.stringify(payload));
diff --git a/figma/src/parser.ts b/figma/src/parser.ts
new file mode 100644
index 0000000000..bcc2a86146
--- /dev/null
+++ b/figma/src/parser.ts
@@ -0,0 +1,59 @@
+import fs from 'fs';
+
+import * as esbuild from 'esbuild';
+
+import type { ConnectSettings } from './connect';
+import type {
+  ParseResponsePayload, ParserExecutableMessage, CodeConnectDoc,
+} from './parser.types';
+
+const messages: ParserExecutableMessage[] = [];
+
+const prepare = (content: string) => {
+  return `var figma = require("figma");
+  ${content
+    .replace(/import.*figma.*/, '')
+    .replace('var settings =', 'export default')
+    .replace(/\s*export\s*{.*};?/s, '')
+    .replaceAll(' `', ' figma.tsx`')}`;
+};
+
+const stdin = JSON.parse(fs.readFileSync(0, 'utf-8')) as { paths: string[] };
+if (!stdin.paths.length) messages.push({ level: 'ERROR', message: 'No files found.' });
+
+const docs: CodeConnectDoc[] = [];
+
+for (const path of stdin.paths) {
+  messages.push({ level: 'INFO', message: `\n-> Parsing ${path}` });
+  const { settings }: { settings: ConnectSettings } = await import(path);
+
+  const out = await esbuild.build({
+    entryPoints: [path],
+    outdir: './mappings',
+    bundle: true,
+    platform: 'neutral',
+    write: false,
+    external: ['./figma'],
+  });
+
+  docs.push({
+    template: prepare(out.outputFiles[0].text),
+    figmaNode: settings.url,
+    component: '',
+    source: 'string',
+    language: 'typescript',
+    label: 'React',
+    templateData: {
+      nestable: true,
+      props: {},
+      imports: settings.imports ?? [],
+    },
+  });
+}
+
+const payload: ParseResponsePayload = {
+  docs,
+  messages,
+};
+
+process.stdout.write(JSON.stringify(payload));
diff --git a/figma/src/parser.types.ts b/figma/src/parser.types.ts
new file mode 100644
index 0000000000..d6b449a9e8
--- /dev/null
+++ b/figma/src/parser.types.ts
@@ -0,0 +1,92 @@
+export interface CodeConnectDoc {
+  /** The Figma node URL the doc links to e.g. https://www.figma.com/design/123/MyFile?node-id=1-1 */
+  figmaNode: string;
+  /**
+   * Optional component name. This is only used for display purposes
+   * so can be omitted if it's not relevant to the language/framework
+   * */
+  component?: string;
+  /** Variant restrictions keyed by Figma property name e.g. `{ 'With icon': true }` */
+  variant?: Record<string, string>;
+  /** Source path - a relative path to the file containing the component definition */
+  source: string;
+  /** Optional source location containing line number information. */
+  sourceLocation?: {
+    /**
+     * Optional line number to link to.
+     * This is only used if type === 'PATH', to generate a link to the correct line.
+     * */
+    line: number;
+  };
+  /** The JS template function to use for this doc */
+  template: string;
+  templateData: {
+    /**
+     * Map of information describing the props used by the template.
+     * This is used by the CLI to validate props before publishing.
+     * */
+    props: PropMapping;
+
+    /**
+     * Optional array of imports for this component.
+     * These are prepended to the example code.
+     */
+    imports?: string[];
+
+    /** Whether the example should be rendered inline if it's a nested instance */
+    nestable?: boolean;
+  };
+  /** The language to use for syntax highlighting */
+  language: SyntaxHighlightLanguage;
+  /** Label to be used for the example in the UI */
+  label: string;
+}
+
+export interface ParseResponsePayload {
+  /** Array of Code Connect docs parsed from the input files */
+  docs: CodeConnectDoc[];
+  /** Any info, warning or error messages generated during parsing. */
+  messages: ParserExecutableMessage[];
+};
+
+export interface ParserExecutableMessage {
+  /**
+   * DEBUG and INFO messages should be output to console by the CLI for the user to read,
+   * according to the current log level setting.
+   * If any WARNING or ERROR messages are returned, the CLI can determine whether it should proceed with publishing
+   * or not based on configuration and the return code should be zero or non-zero as appropriate.
+   * */
+  level: 'DEBUG' | 'INFO' | 'WARN' | 'ERROR';
+  /** Optional type of message which can be displayed highlighted in the output */
+  type?: string;
+  message: string;
+  /** Optional source location which can be displayed in a standardised form */
+  sourceLocation?: {
+    file: string;
+    line?: number;
+  };
+};
+
+type PropMapping = Record<string, string>; // Intrinsic>; ?!
+
+type SyntaxHighlightLanguage =
+  | 'typescript'
+  | 'cpp'
+  | 'ruby'
+  | 'css'
+  | 'javascript'
+  | 'html'
+  | 'json'
+  | 'graphql'
+  | 'python'
+  | 'go'
+  | 'sql'
+  | 'swift'
+  | 'kotlin'
+  | 'rust'
+  | 'bash'
+  | 'xml'
+  | 'plaintext'
+  | 'jsx'
+  | 'tsx'
+  | 'dart';
diff --git a/tools/continuous-delivery/src/utils/allowedScopes.ts b/tools/continuous-delivery/src/utils/allowedScopes.ts
index 0b79e5bfe1..dcdd30b112 100644
--- a/tools/continuous-delivery/src/utils/allowedScopes.ts
+++ b/tools/continuous-delivery/src/utils/allowedScopes.ts
@@ -10,7 +10,7 @@ export const allowedScopes = async () => {
   const semcoreComponents = (await fs.readdir(resolvePath(dirname, '..', '..', '..', '..', 'semcore'))).filter(filterFsEntries);
   const semcoreBaseComponents = (await fs.readdir(resolvePath(dirname, '..', '..', '..', '..', 'semcore', 'base-components', 'src', 'components'))).filter(filterFsEntries);
   const toolsComponents = (await fs.readdir(resolvePath(dirname, '..', '..', '..', '..', 'tools'))).filter(filterFsEntries);
-  const specialScopes = ['global', 'chore', 'ci', 'website', 'docs', 'tests', 'stories'];
+  const specialScopes = ['global', 'chore', 'ci', 'website', 'docs', 'tests', 'stories', 'figma'];
 
   return {
     specialScopes,