diff --git a/.github/workflows/init-icon-prerelease.yml b/.github/workflows/init-icon-prerelease.yml
index 76971733ab..9c30df3551 100644
--- a/.github/workflows/init-icon-prerelease.yml
+++ b/.github/workflows/init-icon-prerelease.yml
@@ -38,9 +38,11 @@ jobs:
         name: Install pnpm
         id: pnpm-install
         with:
-          version: 10.11.1
+          version: 10.32.1
           run_install: false
       - uses: actions/setup-node@v4.0.1
+        with:
+          node-version: 24
       - name: Get pnpm store directory
         id: pnpm-cache
         run: |
diff --git a/.github/workflows/init-illustration-prerelease.yml b/.github/workflows/init-illustration-prerelease.yml
index b373464588..5bfcebffce 100644
--- a/.github/workflows/init-illustration-prerelease.yml
+++ b/.github/workflows/init-illustration-prerelease.yml
@@ -38,9 +38,11 @@ jobs:
         name: Install pnpm
         id: pnpm-install
         with:
-          version: 10.11.1
+          version: 10.32.1
           run_install: false
       - uses: actions/setup-node@v4.0.1
+        with:
+          node-version: 24
       - name: Get pnpm store directory
         id: pnpm-cache
         run: |
diff --git a/playground/entries/Spin.tsx b/playground/entries/Spin.tsx
index 4678f0b7ef..5a8128a33b 100644
--- a/playground/entries/Spin.tsx
+++ b/playground/entries/Spin.tsx
@@ -1,6 +1,6 @@
 import type { FlexProps } from '@semcore/ui/base-components';
 import { Flex } from '@semcore/ui/base-components';
-import type { SpinProps } from '@semcore/ui/spin';
+import type { NSSpin } from '@semcore/ui/spin';
 import Spin from '@semcore/ui/spin';
 import type { NSText } from '@semcore/ui/typography';
 import { Text } from '@semcore/ui/typography';
@@ -18,7 +18,7 @@ type AdditionalJSXProps = {
   size: (typeof Sizes)[number];
   textPlacement: (typeof TextPlacement)[number];
 };
-export type SpinJSXProps = JSXProps<SpinProps> & AdditionalJSXProps;
+export type SpinJSXProps = JSXProps<NSSpin.Props> & AdditionalJSXProps;
 
 const margins = {
   xs: 1,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2a53d667a1..77ba9daa3c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -326,7 +326,7 @@ importers:
         specifier: ^17.0.1
         version: link:../button
       '@semcore/typography':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../typography
       csstype:
         specifier: 3.1.3
@@ -434,7 +434,7 @@ importers:
         specifier: ^17.0.1
         version: link:../tooltip
       '@semcore/typography':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../typography
     devDependencies:
       '@semcore/base-components':
@@ -453,7 +453,7 @@ importers:
   semcore/breadcrumbs:
     dependencies:
       '@semcore/typography':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../typography
     devDependencies:
       '@semcore/base-components':
@@ -481,7 +481,7 @@ importers:
         specifier: ^17.0.1
         version: link:../tooltip
       '@semcore/typography':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../typography
       dompurify:
         specifier: 3.4.0
@@ -512,7 +512,7 @@ importers:
         specifier: ^17.0.1
         version: link:../spin
       '@semcore/typography':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../typography
     devDependencies:
       '@semcore/base-components':
@@ -537,7 +537,7 @@ importers:
         specifier: ^17.0.1
         version: link:../tooltip
       '@semcore/typography':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../typography
     devDependencies:
       '@semcore/base-components':
@@ -578,7 +578,7 @@ importers:
   semcore/checkbox:
     dependencies:
       '@semcore/typography':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../typography
     devDependencies:
       '@semcore/base-components':
@@ -597,7 +597,7 @@ importers:
         specifier: ^17.0.1
         version: link:../button
       '@semcore/divider':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../divider
       '@semcore/dropdown':
         specifier: ^17.0.1
@@ -680,13 +680,13 @@ importers:
         specifier: 2.3.0
         version: 2.3.0(typescript@4.9.5)
       '@semcore/checkbox':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../checkbox
       '@semcore/divider':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../divider
       '@semcore/typography':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../typography
       '@types/d3-shape':
         specifier: 3.1.7
@@ -762,7 +762,7 @@ importers:
         specifier: ^17.0.1
         version: link:../button
       '@semcore/checkbox':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../checkbox
       '@semcore/spin':
         specifier: ^17.0.1
@@ -823,10 +823,10 @@ importers:
         specifier: ^17.0.1
         version: link:../button
       '@semcore/checkbox':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../checkbox
       '@semcore/divider':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../divider
       '@semcore/dropdown':
         specifier: ^17.0.1
@@ -835,13 +835,13 @@ importers:
         specifier: ^17.0.1
         version: link:../input
       '@semcore/input-mask':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../input-mask
       '@semcore/tooltip':
         specifier: ^17.0.1
         version: link:../tooltip
       '@semcore/typography':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../typography
       dayjs:
         specifier: 1.8.36
@@ -890,7 +890,7 @@ importers:
   semcore/drag-and-drop:
     dependencies:
       '@semcore/card':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../card
     devDependencies:
       '@semcore/badge':
@@ -933,7 +933,7 @@ importers:
         specifier: ^17.0.1
         version: link:../dropdown
       '@semcore/typography':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../typography
       classnames:
         specifier: 2.2.6
@@ -983,7 +983,7 @@ importers:
         specifier: ^17.0.1
         version: link:../illustration
       '@semcore/typography':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../typography
     devDependencies:
       '@semcore/base-components':
@@ -1008,7 +1008,7 @@ importers:
         specifier: ^17.0.1
         version: link:../button
       '@semcore/checkbox':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../checkbox
       '@semcore/input':
         specifier: ^17.0.1
@@ -1017,10 +1017,10 @@ importers:
         specifier: ^17.0.1
         version: link:../notice
       '@semcore/pills':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../pills
       '@semcore/radio':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../radio
       '@semcore/select':
         specifier: ^17.0.1
@@ -1029,10 +1029,10 @@ importers:
         specifier: ^17.0.1
         version: link:../switch
       '@semcore/tab-line':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../tab-line
       '@semcore/typography':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../typography
     devDependencies:
       '@semcore/base-components':
@@ -1079,7 +1079,7 @@ importers:
         specifier: ^17.0.1
         version: link:../button
       '@semcore/checkbox':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../checkbox
       '@semcore/illustration':
         specifier: ^17.0.1
@@ -1109,7 +1109,7 @@ importers:
         specifier: ^17.0.1
         version: link:../tooltip
       '@semcore/typography':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../typography
       final-form:
         specifier: 4.20.7
@@ -1174,7 +1174,7 @@ importers:
         specifier: ^17.0.1
         version: link:../modal
       '@semcore/typography':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../typography
     devDependencies:
       '@semcore/base-components':
@@ -1409,7 +1409,7 @@ importers:
   semcore/link:
     dependencies:
       '@semcore/typography':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../typography
     devDependencies:
       '@floating-ui/dom':
@@ -1446,7 +1446,7 @@ importers:
         specifier: ^17.0.1
         version: link:../button
       '@semcore/typography':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../typography
     devDependencies:
       '@semcore/base-components':
@@ -1468,7 +1468,7 @@ importers:
         specifier: ^17.0.1
         version: link:../button
       '@semcore/typography':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../typography
     devDependencies:
       '@semcore/base-components':
@@ -1518,7 +1518,7 @@ importers:
         specifier: ^17.0.1
         version: link:../link
       '@semcore/typography':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../typography
     devDependencies:
       '@semcore/base-components':
@@ -1579,7 +1579,7 @@ importers:
   semcore/radio:
     dependencies:
       '@semcore/typography':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../typography
     devDependencies:
       '@semcore/base-components':
@@ -1601,10 +1601,10 @@ importers:
         specifier: ^17.0.1
         version: link:../button
       '@semcore/checkbox':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../checkbox
       '@semcore/divider':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../divider
       '@semcore/dropdown':
         specifier: ^17.0.1
@@ -1616,7 +1616,7 @@ importers:
         specifier: ^17.0.1
         version: link:../input
       '@semcore/typography':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../typography
       classnames:
         specifier: 2.2.6
@@ -1644,7 +1644,7 @@ importers:
         specifier: ^17.0.1
         version: link:../button
       '@semcore/typography':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../typography
     devDependencies:
       '@semcore/base-components':
@@ -1727,7 +1727,7 @@ importers:
   semcore/tab-line:
     dependencies:
       '@semcore/typography':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../typography
     devDependencies:
       '@semcore/base-components':
@@ -1743,7 +1743,7 @@ importers:
   semcore/tab-panel:
     dependencies:
       '@semcore/typography':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../typography
     devDependencies:
       '@semcore/base-components':
@@ -1762,7 +1762,7 @@ importers:
   semcore/tag:
     dependencies:
       '@semcore/typography':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../typography
     devDependencies:
       '@semcore/base-components':
@@ -1869,7 +1869,7 @@ importers:
   semcore/ui:
     dependencies:
       '@semcore/accordion':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../accordion
       '@semcore/add-filter':
         specifier: ^17.0.1
@@ -1878,7 +1878,7 @@ importers:
         specifier: ^17.0.1
         version: link:../badge
       '@semcore/base-components':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../base-components
       '@semcore/base-trigger':
         specifier: ^17.0.1
@@ -1887,19 +1887,19 @@ importers:
         specifier: ^17.0.1
         version: link:../breadcrumbs
       '@semcore/bulk-textarea':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../bulk-textarea
       '@semcore/button':
         specifier: ^17.0.1
         version: link:../button
       '@semcore/card':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../card
       '@semcore/carousel':
         specifier: ^17.0.1
         version: link:../carousel
       '@semcore/checkbox':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../checkbox
       '@semcore/color-picker':
         specifier: ^17.0.1
@@ -1911,19 +1911,19 @@ importers:
         specifier: ^17.0.1
         version: link:../counter
       '@semcore/d3-chart':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../d3-chart
       '@semcore/data-table':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../data-table
       '@semcore/date-picker':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../date-picker
       '@semcore/divider':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../divider
       '@semcore/dot':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../dot
       '@semcore/drag-and-drop':
         specifier: ^17.0.1
@@ -1938,7 +1938,7 @@ importers:
         specifier: ^17.0.1
         version: link:../ellipsis
       '@semcore/errors':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../errors
       '@semcore/feature-highlight':
         specifier: ^17.0.1
@@ -1974,7 +1974,7 @@ importers:
         specifier: ^17.0.1
         version: link:../input
       '@semcore/input-mask':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../input-mask
       '@semcore/input-number':
         specifier: ^17.0.1
@@ -2001,25 +2001,25 @@ importers:
         specifier: ^17.0.1
         version: link:../pagination
       '@semcore/pills':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../pills
       '@semcore/product-head':
         specifier: ^17.0.1
         version: link:../product-head
       '@semcore/progress-bar':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../progress-bar
       '@semcore/radio':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../radio
       '@semcore/select':
         specifier: ^17.0.1
         version: link:../select
       '@semcore/side-panel':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../side-panel
       '@semcore/skeleton':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../skeleton
       '@semcore/slider':
         specifier: ^17.0.1
@@ -2034,10 +2034,10 @@ importers:
         specifier: ^17.0.1
         version: link:../switch
       '@semcore/tab-line':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../tab-line
       '@semcore/tab-panel':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../tab-panel
       '@semcore/tag':
         specifier: ^17.0.1
@@ -2052,7 +2052,7 @@ importers:
         specifier: ^17.0.1
         version: link:../tooltip
       '@semcore/typography':
-        specifier: ^17.0.1
+        specifier: ^17.0.2
         version: link:../typography
       '@semcore/widget-empty':
         specifier: ^17.0.1
@@ -19409,7 +19409,7 @@ snapshots:
       sirv: 3.0.2
       tinyglobby: 0.2.15
       tinyrainbow: 2.0.0
-      vitest: 3.2.4(@types/debug@4.1.13)(@types/node@25.5.2)(@vitest/browser@3.2.4)(@vitest/ui@3.2.4)(happy-dom@9.20.3)(jsdom@22.1.0)(lightningcss@1.32.0)(msw@2.12.14(@types/node@25.5.2)(typescript@6.0.2))(sass@1.98.0)(sugarss@5.0.1(postcss@8.4.38))(terser@5.46.1)(yaml@2.8.3)
+      vitest: 3.2.4(@types/debug@4.1.13)(@types/node@25.5.2)(@vitest/browser@3.2.4)(@vitest/ui@3.2.4)(happy-dom@9.20.3)(jsdom@22.1.0)(lightningcss@1.32.0)(msw@2.12.14(@types/node@25.5.2)(typescript@5.9.3))(sass@1.98.0)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(yaml@2.8.3)
 
   '@vitest/utils@3.2.4':
     dependencies:
diff --git a/semcore/accordion/CHANGELOG.md b/semcore/accordion/CHANGELOG.md
index c408e56390..f2cc9006f1 100644
--- a/semcore/accordion/CHANGELOG.md
+++ b/semcore/accordion/CHANGELOG.md
@@ -2,6 +2,13 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [17.0.2] - 2026-04-30
+
+### Fixed
+
+- Deprecated atomic types. Atomic parts are part of `NSAccordion`
+namespace.
+
 ## [17.0.1] - 2026-04-16
 
 ### Fixed
diff --git a/semcore/accordion/package.json b/semcore/accordion/package.json
index f793c61c55..c887d733c1 100644
--- a/semcore/accordion/package.json
+++ b/semcore/accordion/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@semcore/accordion",
   "description": "Semrush Accordion Component",
-  "version": "17.0.1",
+  "version": "17.0.2",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -18,11 +18,11 @@
   },
   "dependencies": {
     "@semcore/button": "^17.0.1",
-    "@semcore/typography": "^17.0.1",
+    "@semcore/typography": "^17.0.2",
     "csstype": "3.1.3"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1",
+    "@semcore/base-components": "^17.0.2",
     "@semcore/icon": "^17.0.1"
   },
   "repository": {
diff --git a/semcore/add-filter/package.json b/semcore/add-filter/package.json
index 6a63bdaa19..8b6d8596a9 100644
--- a/semcore/add-filter/package.json
+++ b/semcore/add-filter/package.json
@@ -25,7 +25,7 @@
     "@semcore/base-trigger": "^17.0.1"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1",
+    "@semcore/base-components": "^17.0.2",
     "@semcore/icon": "^17.0.1"
   },
   "repository": {
diff --git a/semcore/badge/__tests__/badge.browser-test.tsx-snapshots/-visual-Verify-all-main-types-and-inverted-styles-1-chromium-linux.png b/semcore/badge/__tests__/badge.browser-test.tsx-snapshots/-visual-Verify-all-main-types-and-inverted-styles-1-chromium-linux.png
index ee8e7efbff..a1c0aa259b 100644
Binary files a/semcore/badge/__tests__/badge.browser-test.tsx-snapshots/-visual-Verify-all-main-types-and-inverted-styles-1-chromium-linux.png and b/semcore/badge/__tests__/badge.browser-test.tsx-snapshots/-visual-Verify-all-main-types-and-inverted-styles-1-chromium-linux.png differ
diff --git a/semcore/badge/__tests__/badge.browser-test.tsx-snapshots/-visual-Verify-all-main-types-and-inverted-styles-1-firefox-linux.png b/semcore/badge/__tests__/badge.browser-test.tsx-snapshots/-visual-Verify-all-main-types-and-inverted-styles-1-firefox-linux.png
index adc48c55cf..8e114f4d41 100644
Binary files a/semcore/badge/__tests__/badge.browser-test.tsx-snapshots/-visual-Verify-all-main-types-and-inverted-styles-1-firefox-linux.png and b/semcore/badge/__tests__/badge.browser-test.tsx-snapshots/-visual-Verify-all-main-types-and-inverted-styles-1-firefox-linux.png differ
diff --git a/semcore/badge/__tests__/badge.browser-test.tsx-snapshots/-visual-Verify-all-main-types-and-inverted-styles-1-webkit-linux.png b/semcore/badge/__tests__/badge.browser-test.tsx-snapshots/-visual-Verify-all-main-types-and-inverted-styles-1-webkit-linux.png
index de8eaadf04..5f55bbfb5a 100644
Binary files a/semcore/badge/__tests__/badge.browser-test.tsx-snapshots/-visual-Verify-all-main-types-and-inverted-styles-1-webkit-linux.png and b/semcore/badge/__tests__/badge.browser-test.tsx-snapshots/-visual-Verify-all-main-types-and-inverted-styles-1-webkit-linux.png differ
diff --git a/semcore/badge/package.json b/semcore/badge/package.json
index d75a2bdf09..d037924c32 100644
--- a/semcore/badge/package.json
+++ b/semcore/badge/package.json
@@ -17,7 +17,7 @@
     "require": "./lib/cjs/index.js"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1"
+    "@semcore/base-components": "^17.0.2"
   },
   "repository": {
     "type": "git",
diff --git a/semcore/base-components/CHANGELOG.md b/semcore/base-components/CHANGELOG.md
index e9e6fe3a21..bcc5f22eaf 100644
--- a/semcore/base-components/CHANGELOG.md
+++ b/semcore/base-components/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [17.0.2] - 2026-04-30
+
+### Fixed
+
+- **flex-box**: Incorrect handling of styles for focus ring offset values.
+
 ## [17.0.1] - 2026-04-16
 
 ### Fixed
diff --git a/semcore/base-components/package.json b/semcore/base-components/package.json
index e6ece4a8db..0553ac5166 100644
--- a/semcore/base-components/package.json
+++ b/semcore/base-components/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@semcore/base-components",
   "description": "Semrush Base Components",
-  "version": "17.0.1",
+  "version": "17.0.2",
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.mjs",
   "typings": "lib/types/index.d.ts",
diff --git a/semcore/base-trigger/package.json b/semcore/base-trigger/package.json
index 24c500f06a..16ae2499fe 100644
--- a/semcore/base-trigger/package.json
+++ b/semcore/base-trigger/package.json
@@ -20,11 +20,11 @@
     "@semcore/counter": "^17.0.1",
     "@semcore/spin": "^17.0.1",
     "@semcore/tooltip": "^17.0.1",
-    "@semcore/typography": "^17.0.1",
+    "@semcore/typography": "^17.0.2",
     "@semcore/button": "^17.0.1"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1",
+    "@semcore/base-components": "^17.0.2",
     "@semcore/icon": "^17.0.1"
   },
   "repository": {
diff --git a/semcore/breadcrumbs/package.json b/semcore/breadcrumbs/package.json
index f310be569e..2b45fc6cba 100644
--- a/semcore/breadcrumbs/package.json
+++ b/semcore/breadcrumbs/package.json
@@ -17,10 +17,10 @@
     "require": "./lib/cjs/index.js"
   },
   "dependencies": {
-    "@semcore/typography": "^17.0.1"
+    "@semcore/typography": "^17.0.2"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1",
+    "@semcore/base-components": "^17.0.2",
     "@semcore/icon": "^17.0.1"
   },
   "repository": {
diff --git a/semcore/bulk-textarea/CHANGELOG.md b/semcore/bulk-textarea/CHANGELOG.md
index de9b1d67d3..ddf8c8fa45 100644
--- a/semcore/bulk-textarea/CHANGELOG.md
+++ b/semcore/bulk-textarea/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [17.0.2] - 2026-04-30
+
+### Fixed
+
+- Vulnerabilities were discovered in the `dompurify` version.
+
 ## [17.0.1] - 2026-04-16
 
 ### Fixed
diff --git a/semcore/bulk-textarea/package.json b/semcore/bulk-textarea/package.json
index 4a0f1766a9..fd01c4799a 100644
--- a/semcore/bulk-textarea/package.json
+++ b/semcore/bulk-textarea/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@semcore/bulk-textarea",
   "description": "Semrush BulkTextarea Component",
-  "version": "17.0.1",
+  "version": "17.0.2",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -18,13 +18,13 @@
   },
   "dependencies": {
     "@semcore/button": "^17.0.1",
-    "@semcore/typography": "^17.0.1",
+    "@semcore/typography": "^17.0.2",
     "@semcore/counter": "^17.0.1",
     "@semcore/tooltip": "^17.0.1",
     "dompurify": "3.4.0"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1",
+    "@semcore/base-components": "^17.0.2",
     "@semcore/icon": "^17.0.1"
   },
   "repository": {
diff --git a/semcore/button/package.json b/semcore/button/package.json
index 4bc3a3c674..1aedf16d14 100644
--- a/semcore/button/package.json
+++ b/semcore/button/package.json
@@ -18,11 +18,11 @@
   },
   "dependencies": {
     "@semcore/spin": "^17.0.1",
-    "@semcore/typography": "^17.0.1",
+    "@semcore/typography": "^17.0.2",
     "@semcore/link": "^17.0.1"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1"
+    "@semcore/base-components": "^17.0.2"
   },
   "repository": {
     "type": "git",
diff --git a/semcore/card/CHANGELOG.md b/semcore/card/CHANGELOG.md
index ae85adb4fe..437b00f978 100644
--- a/semcore/card/CHANGELOG.md
+++ b/semcore/card/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [17.0.2] - 2026-04-30
+
+### Fixed
+
+- Deprecated atomic types. Atomic parts are part of `NSCard` namespace.
+
 ## [17.0.1] - 2026-04-16
 
 ### Fixed
diff --git a/semcore/card/package.json b/semcore/card/package.json
index abf28d1c29..fc8b5630d7 100644
--- a/semcore/card/package.json
+++ b/semcore/card/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@semcore/card",
   "description": "Semrush Card Component",
-  "version": "17.0.1",
+  "version": "17.0.2",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -17,12 +17,12 @@
     "require": "./lib/cjs/index.js"
   },
   "dependencies": {
-    "@semcore/typography": "^17.0.1",
+    "@semcore/typography": "^17.0.2",
     "@semcore/tooltip": "^17.0.1",
     "@semcore/button": "^17.0.1"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1",
+    "@semcore/base-components": "^17.0.2",
     "@semcore/icon": "^17.0.1"
   },
   "repository": {
diff --git a/semcore/carousel/package.json b/semcore/carousel/package.json
index 3663fcfa4d..089865a397 100644
--- a/semcore/carousel/package.json
+++ b/semcore/carousel/package.json
@@ -21,7 +21,7 @@
     "@semcore/modal": "^17.0.1"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1",
+    "@semcore/base-components": "^17.0.2",
     "@semcore/icon": "^17.0.1"
   },
   "repository": {
diff --git a/semcore/checkbox/CHANGELOG.md b/semcore/checkbox/CHANGELOG.md
index 2d0f879623..9af7d92ede 100644
--- a/semcore/checkbox/CHANGELOG.md
+++ b/semcore/checkbox/CHANGELOG.md
@@ -2,6 +2,13 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [17.0.2] - 2026-04-30
+
+### Fixed
+
+- Deprecated atomic types. Atomic parts are part of `NSCheckbox`
+namespaces.
+
 ## [17.0.1] - 2026-04-16
 
 ### Fixed
diff --git a/semcore/checkbox/package.json b/semcore/checkbox/package.json
index 9250fc387a..b217807521 100644
--- a/semcore/checkbox/package.json
+++ b/semcore/checkbox/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@semcore/checkbox",
   "description": "Semrush Checkbox Component",
-  "version": "17.0.1",
+  "version": "17.0.2",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -17,10 +17,10 @@
     "require": "./lib/cjs/index.js"
   },
   "dependencies": {
-    "@semcore/typography": "^17.0.1"
+    "@semcore/typography": "^17.0.2"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1"
+    "@semcore/base-components": "^17.0.2"
   },
   "repository": {
     "type": "git",
diff --git a/semcore/color-picker/package.json b/semcore/color-picker/package.json
index fabe778447..417abaa940 100644
--- a/semcore/color-picker/package.json
+++ b/semcore/color-picker/package.json
@@ -18,12 +18,12 @@
   },
   "dependencies": {
     "@semcore/button": "^17.0.1",
-    "@semcore/divider": "^17.0.1",
+    "@semcore/divider": "^17.0.2",
     "@semcore/dropdown": "^17.0.1",
     "@semcore/input": "^17.0.1"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1",
+    "@semcore/base-components": "^17.0.2",
     "@semcore/icon": "^17.0.1"
   },
   "devDependencies": {
diff --git a/semcore/counter/package.json b/semcore/counter/package.json
index db5cfde2c4..94e70d15ed 100644
--- a/semcore/counter/package.json
+++ b/semcore/counter/package.json
@@ -17,7 +17,7 @@
     "require": "./lib/cjs/index.js"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1"
+    "@semcore/base-components": "^17.0.2"
   },
   "repository": {
     "type": "git",
diff --git a/semcore/d3-chart/CHANGELOG.md b/semcore/d3-chart/CHANGELOG.md
index 974756f4e0..572c1ab5c6 100644
--- a/semcore/d3-chart/CHANGELOG.md
+++ b/semcore/d3-chart/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [17.0.2] - 2026-04-30
+
+### Fixed
+
+- Vulnerabilities were discovered in the `rollup` version.
+
 ## [17.0.1] - 2026-04-16
 
 ### Fixed
diff --git a/semcore/d3-chart/package.json b/semcore/d3-chart/package.json
index 5f33dd98fd..f0ffc59862 100644
--- a/semcore/d3-chart/package.json
+++ b/semcore/d3-chart/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@semcore/d3-chart",
   "description": "Semrush D3 Chart Component",
-  "version": "17.0.1",
+  "version": "17.0.2",
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.mjs",
   "typings": "lib/types/index.d.ts",
@@ -18,9 +18,9 @@
   },
   "dependencies": {
     "@formatjs/intl": "2.3.0",
-    "@semcore/checkbox": "^17.0.1",
-    "@semcore/divider": "^17.0.1",
-    "@semcore/typography": "^17.0.1",
+    "@semcore/checkbox": "^17.0.2",
+    "@semcore/divider": "^17.0.2",
+    "@semcore/typography": "^17.0.2",
     "@types/d3-shape": "3.1.7",
     "@upsetjs/venn.js": "2.0.0",
     "d3-array": "3.1.6",
@@ -34,7 +34,7 @@
     "hoist-non-react-statics": "3.3.2"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1",
+    "@semcore/base-components": "^17.0.2",
     "@semcore/icon": "^17.0.1"
   },
   "repository": {
diff --git a/semcore/data-table/CHANGELOG.md b/semcore/data-table/CHANGELOG.md
index 258631887c..64cdf6aee6 100644
--- a/semcore/data-table/CHANGELOG.md
+++ b/semcore/data-table/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [17.0.2] - 2026-04-30
+
+### Fixed
+
+- Lags when scrolling and header sticks
+- Checkbox with fixed column - body cell with checkbox is not fixed.
+- Incorrect value in css-selectors.
+
 ## [17.0.1] - 2026-04-16
 
 ### Fixed
diff --git a/semcore/data-table/package.json b/semcore/data-table/package.json
index 74977bb4b1..75b2043d90 100644
--- a/semcore/data-table/package.json
+++ b/semcore/data-table/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@semcore/data-table",
   "description": "Semrush DataTable Component",
-  "version": "17.0.1",
+  "version": "17.0.2",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "@semcore/button": "^17.0.1",
-    "@semcore/checkbox": "^17.0.1",
+    "@semcore/checkbox": "^17.0.2",
     "@semcore/spin": "^17.0.1",
     "@semcore/tooltip": "^17.0.1",
     "@semcore/widget-empty": "^17.0.1"
@@ -41,7 +41,7 @@
     "csstype": "3.1.3"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1",
+    "@semcore/base-components": "^17.0.2",
     "@semcore/icon": "^17.0.1"
   },
   "repository": {
diff --git a/semcore/date-picker/CHANGELOG.md b/semcore/date-picker/CHANGELOG.md
index f3bb5cd97f..aa3dbd7986 100644
--- a/semcore/date-picker/CHANGELOG.md
+++ b/semcore/date-picker/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [17.0.2] - 2026-04-30
+
+### Fixed
+
+- Incorrect input trigger width calculation.
+
 ## [17.0.1] - 2026-04-16
 
 ### Fixed
diff --git a/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx b/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx
index 4451aecbe4..00d7f7cc2d 100644
--- a/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx
+++ b/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx
@@ -530,6 +530,9 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
       expect(afterRightFrom2).not.toBe(afterUpFrom2);
 
       await page.keyboard.press('Shift+Tab');
+      if ((await locators.calendar(page).first().evaluate((el) => el === document.activeElement))) {
+        await page.keyboard.press('Tab');
+      }
       await expect(locators.button(page, 'Next year')).toBeFocused();
 
       await page.keyboard.press('Shift+Tab');
diff --git a/semcore/date-picker/package.json b/semcore/date-picker/package.json
index 1e69798fc6..6fb2c7f294 100644
--- a/semcore/date-picker/package.json
+++ b/semcore/date-picker/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@semcore/date-picker",
   "description": "Semrush DatePicker Component",
-  "version": "17.0.1",
+  "version": "17.0.2",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -19,17 +19,17 @@
   "dependencies": {
     "@semcore/base-trigger": "^17.0.1",
     "@semcore/button": "^17.0.1",
-    "@semcore/divider": "^17.0.1",
+    "@semcore/divider": "^17.0.2",
     "@semcore/dropdown": "^17.0.1",
     "@semcore/input": "^17.0.1",
-    "@semcore/input-mask": "^17.0.1",
-    "@semcore/typography": "^17.0.1",
-    "@semcore/checkbox": "^17.0.1",
+    "@semcore/input-mask": "^17.0.2",
+    "@semcore/typography": "^17.0.2",
+    "@semcore/checkbox": "^17.0.2",
     "@semcore/tooltip": "^17.0.1",
     "dayjs": "1.8.36"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1",
+    "@semcore/base-components": "^17.0.2",
     "@semcore/icon": "^17.0.1"
   },
   "repository": {
diff --git a/semcore/divider/CHANGELOG.md b/semcore/divider/CHANGELOG.md
index 40b21b92bb..2dceecdb38 100644
--- a/semcore/divider/CHANGELOG.md
+++ b/semcore/divider/CHANGELOG.md
@@ -2,6 +2,13 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [17.0.2] - 2026-04-30
+
+### Fixed
+
+- Deprecated atomic types. Atomic parts are part of `NSDivider`
+namespace.
+
 ## [17.0.1] - 2026-04-16
 
 ### Fixed
diff --git a/semcore/divider/package.json b/semcore/divider/package.json
index 7056049866..45244b1fc2 100644
--- a/semcore/divider/package.json
+++ b/semcore/divider/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@semcore/divider",
   "description": "Semrush Divider Component",
-  "version": "17.0.1",
+  "version": "17.0.2",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -17,7 +17,7 @@
     "require": "./lib/cjs/index.js"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1"
+    "@semcore/base-components": "^17.0.2"
   },
   "repository": {
     "type": "git",
diff --git a/semcore/dot/CHANGELOG.md b/semcore/dot/CHANGELOG.md
index 99110d019b..5ed53764ea 100644
--- a/semcore/dot/CHANGELOG.md
+++ b/semcore/dot/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [17.0.2] - 2026-04-30
+
+### Fixed
+
+- Deprecated atomic types. Atomic parts are part of `NSDot` namespace.
+
 ## [17.0.1] - 2026-04-16
 
 ### Fixed
diff --git a/semcore/dot/package.json b/semcore/dot/package.json
index 4ee77689d7..71871d2a4b 100644
--- a/semcore/dot/package.json
+++ b/semcore/dot/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@semcore/dot",
   "description": "Semrush Dot Component",
-  "version": "17.0.1",
+  "version": "17.0.2",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -17,7 +17,7 @@
     "require": "./lib/cjs/index.js"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1"
+    "@semcore/base-components": "^17.0.2"
   },
   "repository": {
     "type": "git",
diff --git a/semcore/drag-and-drop/package.json b/semcore/drag-and-drop/package.json
index 1a182e0ec1..d4eedf8e3f 100644
--- a/semcore/drag-and-drop/package.json
+++ b/semcore/drag-and-drop/package.json
@@ -17,10 +17,10 @@
     "require": "./lib/cjs/index.js"
   },
   "dependencies": {
-    "@semcore/card": "^17.0.1"
+    "@semcore/card": "^17.0.2"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1"
+    "@semcore/base-components": "^17.0.2"
   },
   "repository": {
     "type": "git",
diff --git a/semcore/dropdown-menu/package.json b/semcore/dropdown-menu/package.json
index 8d80a4380f..0edeafb349 100644
--- a/semcore/dropdown-menu/package.json
+++ b/semcore/dropdown-menu/package.json
@@ -19,11 +19,11 @@
   "dependencies": {
     "@semcore/button": "^17.0.1",
     "@semcore/dropdown": "^17.0.1",
-    "@semcore/typography": "^17.0.1",
+    "@semcore/typography": "^17.0.2",
     "classnames": "2.2.6"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1",
+    "@semcore/base-components": "^17.0.2",
     "@semcore/icon": "^17.0.1"
   },
   "repository": {
diff --git a/semcore/dropdown/package.json b/semcore/dropdown/package.json
index 3633c7527b..af437a4d8a 100644
--- a/semcore/dropdown/package.json
+++ b/semcore/dropdown/package.json
@@ -17,7 +17,7 @@
     "require": "./lib/cjs/index.js"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1"
+    "@semcore/base-components": "^17.0.2"
   },
   "repository": {
     "type": "git",
diff --git a/semcore/ellipsis/package.json b/semcore/ellipsis/package.json
index 43c5e1b7c1..cd277acdc9 100644
--- a/semcore/ellipsis/package.json
+++ b/semcore/ellipsis/package.json
@@ -20,7 +20,7 @@
     "@semcore/tooltip": "^17.0.1"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1"
+    "@semcore/base-components": "^17.0.2"
   },
   "devDependencies": {
     "@semcore/core": "workspace:*",
diff --git a/semcore/errors/CHANGELOG.md b/semcore/errors/CHANGELOG.md
index 4d8e0147b9..4cd63f9297 100644
--- a/semcore/errors/CHANGELOG.md
+++ b/semcore/errors/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [17.0.2] - 2026-04-30
+
+### Fixed
+
+- Deprecated atomic types. Atomic parts are part of
+`NSErrors/NSAccessDenied/NSMaintenance/NSPageError/NSPageNotFound/NSProjectNotFound`
+namespaces.
+
 ## [17.0.1] - 2026-04-16
 
 ### Fixed
diff --git a/semcore/errors/package.json b/semcore/errors/package.json
index 1468f9e387..3303dd9d19 100644
--- a/semcore/errors/package.json
+++ b/semcore/errors/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@semcore/errors",
   "description": "Semrush Errors Component",
-  "version": "17.0.1",
+  "version": "17.0.2",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -19,10 +19,10 @@
   "dependencies": {
     "@semcore/button": "^17.0.1",
     "@semcore/illustration": "^17.0.1",
-    "@semcore/typography": "^17.0.1"
+    "@semcore/typography": "^17.0.2"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1"
+    "@semcore/base-components": "^17.0.2"
   },
   "repository": {
     "type": "git",
diff --git a/semcore/feature-highlight/package.json b/semcore/feature-highlight/package.json
index ed8037e70c..d441ad157e 100644
--- a/semcore/feature-highlight/package.json
+++ b/semcore/feature-highlight/package.json
@@ -22,18 +22,18 @@
     "@semcore/badge": "^17.0.1",
     "@semcore/base-trigger": "^17.0.1",
     "@semcore/button": "^17.0.1",
-    "@semcore/checkbox": "^17.0.1",
+    "@semcore/checkbox": "^17.0.2",
     "@semcore/input": "^17.0.1",
     "@semcore/notice": "^17.0.1",
-    "@semcore/pills": "^17.0.1",
-    "@semcore/radio": "^17.0.1",
+    "@semcore/pills": "^17.0.2",
+    "@semcore/radio": "^17.0.2",
     "@semcore/select": "^17.0.1",
     "@semcore/switch": "^17.0.1",
-    "@semcore/tab-line": "^17.0.1",
-    "@semcore/typography": "^17.0.1"
+    "@semcore/tab-line": "^17.0.2",
+    "@semcore/typography": "^17.0.2"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1"
+    "@semcore/base-components": "^17.0.2"
   },
   "repository": {
     "type": "git",
diff --git a/semcore/feature-popover/package.json b/semcore/feature-popover/package.json
index 0b9620cd4a..e59e56796a 100644
--- a/semcore/feature-popover/package.json
+++ b/semcore/feature-popover/package.json
@@ -20,7 +20,7 @@
     "@semcore/button": "^17.0.1"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1",
+    "@semcore/base-components": "^17.0.2",
     "@semcore/icon": "^17.0.1"
   },
   "repository": {
diff --git a/semcore/feedback-form/package.json b/semcore/feedback-form/package.json
index 3e936076b5..f54c1e923a 100644
--- a/semcore/feedback-form/package.json
+++ b/semcore/feedback-form/package.json
@@ -17,9 +17,9 @@
     "require": "./lib/cjs/index.js"
   },
   "dependencies": {
-    "@semcore/checkbox": "^17.0.1",
+    "@semcore/checkbox": "^17.0.2",
     "@semcore/notice-bubble": "^17.0.1",
-    "@semcore/typography": "^17.0.1",
+    "@semcore/typography": "^17.0.2",
     "@semcore/link": "^17.0.1",
     "@semcore/modal": "^17.0.1",
     "@semcore/illustration": "^17.0.1",
@@ -34,7 +34,7 @@
     "react-final-form": "6.5.9"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1",
+    "@semcore/base-components": "^17.0.2",
     "@semcore/icon": "^17.0.1"
   },
   "repository": {
diff --git a/semcore/flags/package.json b/semcore/flags/package.json
index cbdfd1fdbc..886ffdd509 100644
--- a/semcore/flags/package.json
+++ b/semcore/flags/package.json
@@ -16,7 +16,7 @@
     "classnames": "2.2.6"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1"
+    "@semcore/base-components": "^17.0.2"
   },
   "repository": {
     "type": "git",
diff --git a/semcore/fullscreen-modal/package.json b/semcore/fullscreen-modal/package.json
index 253715e202..38bb1e6041 100644
--- a/semcore/fullscreen-modal/package.json
+++ b/semcore/fullscreen-modal/package.json
@@ -18,11 +18,11 @@
   },
   "dependencies": {
     "@semcore/modal": "^17.0.1",
-    "@semcore/typography": "^17.0.1",
+    "@semcore/typography": "^17.0.2",
     "@semcore/button": "^17.0.1"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1",
+    "@semcore/base-components": "^17.0.2",
     "@semcore/icon": "^17.0.1"
   },
   "repository": {
diff --git a/semcore/icon/CHANGELOG.md b/semcore/icon/CHANGELOG.md
index 498269ee27..b3639828bb 100644
--- a/semcore/icon/CHANGELOG.md
+++ b/semcore/icon/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [17.1.0] - 2026-05-04
+
+### Added
+
+- `Reddit`, `RedditColored` and `Prompt` icons.
+
 ## [17.0.1] - 2026-04-16
 
 ### Fixed
diff --git a/semcore/icon/package.json b/semcore/icon/package.json
index 4aa64a534e..9ead9b4e26 100644
--- a/semcore/icon/package.json
+++ b/semcore/icon/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@semcore/icon",
   "description": "Semrush Icon Component",
-  "version": "17.0.1",
+  "version": "17.1.0",
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.mjs",
   "typings": "lib/types/index.d.ts",
@@ -4414,4 +4414,4 @@
       "require": "./lib/ZoomPlus/m/index.js"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/semcore/inline-edit/package.json b/semcore/inline-edit/package.json
index d0ce8e53d3..d79d578546 100644
--- a/semcore/inline-edit/package.json
+++ b/semcore/inline-edit/package.json
@@ -22,7 +22,7 @@
     "@semcore/testing-utils": "workspace:*"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1"
+    "@semcore/base-components": "^17.0.2"
   },
   "repository": {
     "type": "git",
diff --git a/semcore/inline-input/package.json b/semcore/inline-input/package.json
index 8e1480304a..1c2ad4786b 100644
--- a/semcore/inline-input/package.json
+++ b/semcore/inline-input/package.json
@@ -32,7 +32,7 @@
     "@semcore/tooltip": "workspace:*"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1",
+    "@semcore/base-components": "^17.0.2",
     "@semcore/icon": "^17.0.1"
   },
   "repository": {
diff --git a/semcore/input-mask/CHANGELOG.md b/semcore/input-mask/CHANGELOG.md
index 38faeddf4f..f703877f87 100644
--- a/semcore/input-mask/CHANGELOG.md
+++ b/semcore/input-mask/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [17.0.2] - 2026-04-30
+
+### Fixed
+
+- Incorrect paddings with `neighborLocation=right`.
+
 ## [17.0.1] - 2026-04-16
 
 ### Fixed
diff --git a/semcore/input-mask/package.json b/semcore/input-mask/package.json
index e3bdfc524f..b84faf08eb 100644
--- a/semcore/input-mask/package.json
+++ b/semcore/input-mask/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@semcore/input-mask",
   "description": "Semrush InputMask Component",
-  "version": "17.0.1",
+  "version": "17.0.2",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -21,7 +21,7 @@
     "text-mask-core": "5.1.2"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1"
+    "@semcore/base-components": "^17.0.2"
   },
   "repository": {
     "type": "git",
diff --git a/semcore/input-number/package.json b/semcore/input-number/package.json
index b38eb4c900..e182046057 100644
--- a/semcore/input-number/package.json
+++ b/semcore/input-number/package.json
@@ -20,7 +20,7 @@
     "@semcore/input": "^17.0.1"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1"
+    "@semcore/base-components": "^17.0.2"
   },
   "repository": {
     "type": "git",
diff --git a/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Input-tags-visual-states-after-mouse--4585e-tags-can-be-added-removed-and-edited-by-mouse-3-chromium-linux.png b/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Input-tags-visual-states-after-mouse--4585e-tags-can-be-added-removed-and-edited-by-mouse-3-chromium-linux.png
index 857700f957..85e17e8780 100644
Binary files a/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Input-tags-visual-states-after-mouse--4585e-tags-can-be-added-removed-and-edited-by-mouse-3-chromium-linux.png and b/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Input-tags-visual-states-after-mouse--4585e-tags-can-be-added-removed-and-edited-by-mouse-3-chromium-linux.png differ
diff --git a/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Input-tags-visual-states-after-mouse--4585e-tags-can-be-added-removed-and-edited-by-mouse-3-firefox-linux.png b/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Input-tags-visual-states-after-mouse--4585e-tags-can-be-added-removed-and-edited-by-mouse-3-firefox-linux.png
index 2d9212ba5b..6fd92edfac 100644
Binary files a/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Input-tags-visual-states-after-mouse--4585e-tags-can-be-added-removed-and-edited-by-mouse-3-firefox-linux.png and b/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Input-tags-visual-states-after-mouse--4585e-tags-can-be-added-removed-and-edited-by-mouse-3-firefox-linux.png differ
diff --git a/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Input-tags-visual-states-after-mouse--4585e-tags-can-be-added-removed-and-edited-by-mouse-3-webkit-linux.png b/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Input-tags-visual-states-after-mouse--4585e-tags-can-be-added-removed-and-edited-by-mouse-3-webkit-linux.png
index 09e6147d0c..5907584733 100644
Binary files a/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Input-tags-visual-states-after-mouse--4585e-tags-can-be-added-removed-and-edited-by-mouse-3-webkit-linux.png and b/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Input-tags-visual-states-after-mouse--4585e-tags-can-be-added-removed-and-edited-by-mouse-3-webkit-linux.png differ
diff --git a/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Input-tags-visual-states-after-mouse--68bb1-tags-can-be-added-removed-and-edited-by-mouse-4-chromium-linux.png b/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Input-tags-visual-states-after-mouse--68bb1-tags-can-be-added-removed-and-edited-by-mouse-4-chromium-linux.png
index f373b8fd1f..26d4646a4d 100644
Binary files a/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Input-tags-visual-states-after-mouse--68bb1-tags-can-be-added-removed-and-edited-by-mouse-4-chromium-linux.png and b/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Input-tags-visual-states-after-mouse--68bb1-tags-can-be-added-removed-and-edited-by-mouse-4-chromium-linux.png differ
diff --git a/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Input-tags-visual-states-after-mouse--68bb1-tags-can-be-added-removed-and-edited-by-mouse-4-firefox-linux.png b/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Input-tags-visual-states-after-mouse--68bb1-tags-can-be-added-removed-and-edited-by-mouse-4-firefox-linux.png
index b3cb54257f..e913a04f79 100644
Binary files a/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Input-tags-visual-states-after-mouse--68bb1-tags-can-be-added-removed-and-edited-by-mouse-4-firefox-linux.png and b/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Input-tags-visual-states-after-mouse--68bb1-tags-can-be-added-removed-and-edited-by-mouse-4-firefox-linux.png differ
diff --git a/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Input-tags-visual-states-after-mouse--68bb1-tags-can-be-added-removed-and-edited-by-mouse-4-webkit-linux.png b/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Input-tags-visual-states-after-mouse--68bb1-tags-can-be-added-removed-and-edited-by-mouse-4-webkit-linux.png
index db8a4bb81b..ae11f7456f 100644
Binary files a/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Input-tags-visual-states-after-mouse--68bb1-tags-can-be-added-removed-and-edited-by-mouse-4-webkit-linux.png and b/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Input-tags-visual-states-after-mouse--68bb1-tags-can-be-added-removed-and-edited-by-mouse-4-webkit-linux.png differ
diff --git a/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Input-tags-visual-states-after-mouse--9560b-tags-can-be-added-removed-and-edited-by-mouse-1-chromium-linux.png b/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Input-tags-visual-states-after-mouse--9560b-tags-can-be-added-removed-and-edited-by-mouse-1-chromium-linux.png
index 598d458028..9401940b6e 100644
Binary files a/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Input-tags-visual-states-after-mouse--9560b-tags-can-be-added-removed-and-edited-by-mouse-1-chromium-linux.png and b/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Input-tags-visual-states-after-mouse--9560b-tags-can-be-added-removed-and-edited-by-mouse-1-chromium-linux.png differ
diff --git a/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Input-tags-visual-states-after-mouse--9560b-tags-can-be-added-removed-and-edited-by-mouse-1-firefox-linux.png b/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Input-tags-visual-states-after-mouse--9560b-tags-can-be-added-removed-and-edited-by-mouse-1-firefox-linux.png
index 2d9212ba5b..6fd92edfac 100644
Binary files a/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Input-tags-visual-states-after-mouse--9560b-tags-can-be-added-removed-and-edited-by-mouse-1-firefox-linux.png and b/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Input-tags-visual-states-after-mouse--9560b-tags-can-be-added-removed-and-edited-by-mouse-1-firefox-linux.png differ
diff --git a/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Input-tags-visual-states-after-mouse--9560b-tags-can-be-added-removed-and-edited-by-mouse-1-webkit-linux.png b/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Input-tags-visual-states-after-mouse--9560b-tags-can-be-added-removed-and-edited-by-mouse-1-webkit-linux.png
index 4399a2887b..fc44fffd56 100644
Binary files a/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Input-tags-visual-states-after-mouse--9560b-tags-can-be-added-removed-and-edited-by-mouse-1-webkit-linux.png and b/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Input-tags-visual-states-after-mouse--9560b-tags-can-be-added-removed-and-edited-by-mouse-1-webkit-linux.png differ
diff --git a/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Input-tags-visual-states-after-mouse--f7010-tags-can-be-added-removed-and-edited-by-mouse-2-chromium-linux.png b/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Input-tags-visual-states-after-mouse--f7010-tags-can-be-added-removed-and-edited-by-mouse-2-chromium-linux.png
index 90eb67ceab..4559bc5711 100644
Binary files a/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Input-tags-visual-states-after-mouse--f7010-tags-can-be-added-removed-and-edited-by-mouse-2-chromium-linux.png and b/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Input-tags-visual-states-after-mouse--f7010-tags-can-be-added-removed-and-edited-by-mouse-2-chromium-linux.png differ
diff --git a/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Input-tags-visual-states-after-mouse--f7010-tags-can-be-added-removed-and-edited-by-mouse-2-firefox-linux.png b/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Input-tags-visual-states-after-mouse--f7010-tags-can-be-added-removed-and-edited-by-mouse-2-firefox-linux.png
index 6950c830cb..fecb7cc286 100644
Binary files a/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Input-tags-visual-states-after-mouse--f7010-tags-can-be-added-removed-and-edited-by-mouse-2-firefox-linux.png and b/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Input-tags-visual-states-after-mouse--f7010-tags-can-be-added-removed-and-edited-by-mouse-2-firefox-linux.png differ
diff --git a/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Input-tags-visual-states-after-mouse--f7010-tags-can-be-added-removed-and-edited-by-mouse-2-webkit-linux.png b/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Input-tags-visual-states-after-mouse--f7010-tags-can-be-added-removed-and-edited-by-mouse-2-webkit-linux.png
index 4613fe3353..681fd0d90c 100644
Binary files a/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Input-tags-visual-states-after-mouse--f7010-tags-can-be-added-removed-and-edited-by-mouse-2-webkit-linux.png and b/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Input-tags-visual-states-after-mouse--f7010-tags-can-be-added-removed-and-edited-by-mouse-2-webkit-linux.png differ
diff --git a/semcore/input-tags/package.json b/semcore/input-tags/package.json
index 3bf0d5c639..0cc379802a 100644
--- a/semcore/input-tags/package.json
+++ b/semcore/input-tags/package.json
@@ -21,7 +21,7 @@
     "@semcore/tag": "^17.0.1"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1"
+    "@semcore/base-components": "^17.0.2"
   },
   "repository": {
     "type": "git",
diff --git a/semcore/input/package.json b/semcore/input/package.json
index 10396cbcae..de1d6a5ae6 100644
--- a/semcore/input/package.json
+++ b/semcore/input/package.json
@@ -17,7 +17,7 @@
     "require": "./lib/cjs/index.js"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1"
+    "@semcore/base-components": "^17.0.2"
   },
   "repository": {
     "type": "git",
diff --git a/semcore/link/__tests__/link.browser-test.tsx-snapshots/-visual-Verify-default-link-styles-when-links-inside-the-text-1-chromium-linux.png b/semcore/link/__tests__/link.browser-test.tsx-snapshots/-visual-Verify-default-link-styles-when-links-inside-the-text-1-chromium-linux.png
index 9f1182cb01..9ef39f4d87 100644
Binary files a/semcore/link/__tests__/link.browser-test.tsx-snapshots/-visual-Verify-default-link-styles-when-links-inside-the-text-1-chromium-linux.png and b/semcore/link/__tests__/link.browser-test.tsx-snapshots/-visual-Verify-default-link-styles-when-links-inside-the-text-1-chromium-linux.png differ
diff --git a/semcore/link/__tests__/link.browser-test.tsx-snapshots/-visual-Verify-default-link-styles-when-links-inside-the-text-1-firefox-linux.png b/semcore/link/__tests__/link.browser-test.tsx-snapshots/-visual-Verify-default-link-styles-when-links-inside-the-text-1-firefox-linux.png
index 78fc141711..c14af0a768 100644
Binary files a/semcore/link/__tests__/link.browser-test.tsx-snapshots/-visual-Verify-default-link-styles-when-links-inside-the-text-1-firefox-linux.png and b/semcore/link/__tests__/link.browser-test.tsx-snapshots/-visual-Verify-default-link-styles-when-links-inside-the-text-1-firefox-linux.png differ
diff --git a/semcore/link/__tests__/link.browser-test.tsx-snapshots/-visual-Verify-default-link-styles-when-links-inside-the-text-1-webkit-linux.png b/semcore/link/__tests__/link.browser-test.tsx-snapshots/-visual-Verify-default-link-styles-when-links-inside-the-text-1-webkit-linux.png
index 9460faaeca..c8dfb77cb8 100644
Binary files a/semcore/link/__tests__/link.browser-test.tsx-snapshots/-visual-Verify-default-link-styles-when-links-inside-the-text-1-webkit-linux.png and b/semcore/link/__tests__/link.browser-test.tsx-snapshots/-visual-Verify-default-link-styles-when-links-inside-the-text-1-webkit-linux.png differ
diff --git a/semcore/link/package.json b/semcore/link/package.json
index 3112b8816f..72ef11ca14 100644
--- a/semcore/link/package.json
+++ b/semcore/link/package.json
@@ -17,10 +17,10 @@
     "require": "./lib/cjs/index.js"
   },
   "dependencies": {
-    "@semcore/typography": "^17.0.1"
+    "@semcore/typography": "^17.0.2"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1"
+    "@semcore/base-components": "^17.0.2"
   },
   "repository": {
     "type": "git",
diff --git a/semcore/mini-chart/package.json b/semcore/mini-chart/package.json
index d031db2fb8..052c4899d1 100644
--- a/semcore/mini-chart/package.json
+++ b/semcore/mini-chart/package.json
@@ -17,7 +17,7 @@
     "require": "./lib/cjs/index.js"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1"
+    "@semcore/base-components": "^17.0.2"
   },
   "repository": {
     "type": "git",
diff --git a/semcore/modal/package.json b/semcore/modal/package.json
index 4072803b08..b75d8a6355 100644
--- a/semcore/modal/package.json
+++ b/semcore/modal/package.json
@@ -18,10 +18,10 @@
   },
   "dependencies": {
     "@semcore/button": "^17.0.1",
-    "@semcore/typography": "^17.0.1"
+    "@semcore/typography": "^17.0.2"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1",
+    "@semcore/base-components": "^17.0.2",
     "@semcore/icon": "^17.0.1"
   },
   "repository": {
diff --git a/semcore/notice-bubble/package.json b/semcore/notice-bubble/package.json
index 6388587b41..2b0a7d8b07 100644
--- a/semcore/notice-bubble/package.json
+++ b/semcore/notice-bubble/package.json
@@ -20,7 +20,7 @@
     "@semcore/button": "^17.0.1"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1",
+    "@semcore/base-components": "^17.0.2",
     "@semcore/icon": "^17.0.1"
   },
   "repository": {
diff --git a/semcore/notice/package.json b/semcore/notice/package.json
index 4bb1769657..d030bcdfc0 100644
--- a/semcore/notice/package.json
+++ b/semcore/notice/package.json
@@ -18,10 +18,10 @@
   },
   "dependencies": {
     "@semcore/button": "^17.0.1",
-    "@semcore/typography": "^17.0.1"
+    "@semcore/typography": "^17.0.2"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1",
+    "@semcore/base-components": "^17.0.2",
     "@semcore/icon": "^17.0.1"
   },
   "repository": {
diff --git a/semcore/pagination/package.json b/semcore/pagination/package.json
index f218d97633..b5c99ed79c 100644
--- a/semcore/pagination/package.json
+++ b/semcore/pagination/package.json
@@ -21,10 +21,10 @@
     "@semcore/input-number": "^17.0.1",
     "@semcore/input": "^17.0.1",
     "@semcore/link": "^17.0.1",
-    "@semcore/typography": "^17.0.1"
+    "@semcore/typography": "^17.0.2"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1",
+    "@semcore/base-components": "^17.0.2",
     "@semcore/icon": "^17.0.1"
   },
   "repository": {
diff --git a/semcore/pills/CHANGELOG.md b/semcore/pills/CHANGELOG.md
index 4667b85920..973e9f2808 100644
--- a/semcore/pills/CHANGELOG.md
+++ b/semcore/pills/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [17.0.2] - 2026-04-30
+
+### Fixed
+
+- Deprecated atomic types. Atomic parts are part of `NSPills` namespace.
+
 ## [17.0.1] - 2026-04-16
 
 ### Fixed
diff --git a/semcore/pills/package.json b/semcore/pills/package.json
index 9c0cf94bdf..f32cd50a48 100644
--- a/semcore/pills/package.json
+++ b/semcore/pills/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@semcore/pills",
   "description": "Semrush Pills Component",
-  "version": "17.0.1",
+  "version": "17.0.2",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -17,7 +17,7 @@
     "require": "./lib/cjs/index.js"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1"
+    "@semcore/base-components": "^17.0.2"
   },
   "repository": {
     "type": "git",
diff --git a/semcore/product-head/__tests__/product-head.browser-test.tsx b/semcore/product-head/__tests__/product-head.browser-test.tsx
index e2b42b68c1..d35c63c0b4 100644
--- a/semcore/product-head/__tests__/product-head.browser-test.tsx
+++ b/semcore/product-head/__tests__/product-head.browser-test.tsx
@@ -88,10 +88,10 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
 
     await page.keyboard.press('Tab');
     await page.keyboard.press('Tab');
-    await expect(page.locator('[data-ui-name="ButtonLink"]')).toBeFocused();
+    await expect(page.locator('[data-ui-name="Link"]')).toBeFocused();
 
     await page.keyboard.press('Tab');
-    await expect(page.locator('[data-ui-name="Link"]')).toBeFocused();
+    await expect(page.locator('[data-ui-name="ButtonLink"]')).toBeFocused();
 
     await page.keyboard.press('Tab');
     await page.keyboard.press('Tab');
diff --git a/semcore/product-head/__tests__/product-head.browser-test.tsx-snapshots/-visual-Verify-base-example-looks-good-on-screen-width-1280px-1-chromium-linux.png b/semcore/product-head/__tests__/product-head.browser-test.tsx-snapshots/-visual-Verify-base-example-looks-good-on-screen-width-1280px-1-chromium-linux.png
index a60b5e3f9c..2d2132caa3 100644
Binary files a/semcore/product-head/__tests__/product-head.browser-test.tsx-snapshots/-visual-Verify-base-example-looks-good-on-screen-width-1280px-1-chromium-linux.png and b/semcore/product-head/__tests__/product-head.browser-test.tsx-snapshots/-visual-Verify-base-example-looks-good-on-screen-width-1280px-1-chromium-linux.png differ
diff --git a/semcore/product-head/__tests__/product-head.browser-test.tsx-snapshots/-visual-Verify-base-example-looks-good-on-screen-width-1280px-1-firefox-linux.png b/semcore/product-head/__tests__/product-head.browser-test.tsx-snapshots/-visual-Verify-base-example-looks-good-on-screen-width-1280px-1-firefox-linux.png
index c5b8291b56..cd54871bf9 100644
Binary files a/semcore/product-head/__tests__/product-head.browser-test.tsx-snapshots/-visual-Verify-base-example-looks-good-on-screen-width-1280px-1-firefox-linux.png and b/semcore/product-head/__tests__/product-head.browser-test.tsx-snapshots/-visual-Verify-base-example-looks-good-on-screen-width-1280px-1-firefox-linux.png differ
diff --git a/semcore/product-head/__tests__/product-head.browser-test.tsx-snapshots/-visual-Verify-base-example-looks-good-on-screen-width-1280px-1-webkit-linux.png b/semcore/product-head/__tests__/product-head.browser-test.tsx-snapshots/-visual-Verify-base-example-looks-good-on-screen-width-1280px-1-webkit-linux.png
index 4fde72c3e1..1776ba61dc 100644
Binary files a/semcore/product-head/__tests__/product-head.browser-test.tsx-snapshots/-visual-Verify-base-example-looks-good-on-screen-width-1280px-1-webkit-linux.png and b/semcore/product-head/__tests__/product-head.browser-test.tsx-snapshots/-visual-Verify-base-example-looks-good-on-screen-width-1280px-1-webkit-linux.png differ
diff --git a/semcore/product-head/__tests__/product-head.browser-test.tsx-snapshots/-visual-Verify-base-example-looks-good-on-screen-width-1920px-1-chromium-linux.png b/semcore/product-head/__tests__/product-head.browser-test.tsx-snapshots/-visual-Verify-base-example-looks-good-on-screen-width-1920px-1-chromium-linux.png
index 712cf8e36e..81004274d4 100644
Binary files a/semcore/product-head/__tests__/product-head.browser-test.tsx-snapshots/-visual-Verify-base-example-looks-good-on-screen-width-1920px-1-chromium-linux.png and b/semcore/product-head/__tests__/product-head.browser-test.tsx-snapshots/-visual-Verify-base-example-looks-good-on-screen-width-1920px-1-chromium-linux.png differ
diff --git a/semcore/product-head/__tests__/product-head.browser-test.tsx-snapshots/-visual-Verify-base-example-looks-good-on-screen-width-1920px-1-firefox-linux.png b/semcore/product-head/__tests__/product-head.browser-test.tsx-snapshots/-visual-Verify-base-example-looks-good-on-screen-width-1920px-1-firefox-linux.png
index 43d2889815..e960d47313 100644
Binary files a/semcore/product-head/__tests__/product-head.browser-test.tsx-snapshots/-visual-Verify-base-example-looks-good-on-screen-width-1920px-1-firefox-linux.png and b/semcore/product-head/__tests__/product-head.browser-test.tsx-snapshots/-visual-Verify-base-example-looks-good-on-screen-width-1920px-1-firefox-linux.png differ
diff --git a/semcore/product-head/__tests__/product-head.browser-test.tsx-snapshots/-visual-Verify-base-example-looks-good-on-screen-width-1920px-1-webkit-linux.png b/semcore/product-head/__tests__/product-head.browser-test.tsx-snapshots/-visual-Verify-base-example-looks-good-on-screen-width-1920px-1-webkit-linux.png
index f96f4b7868..1dbc56f3a3 100644
Binary files a/semcore/product-head/__tests__/product-head.browser-test.tsx-snapshots/-visual-Verify-base-example-looks-good-on-screen-width-1920px-1-webkit-linux.png and b/semcore/product-head/__tests__/product-head.browser-test.tsx-snapshots/-visual-Verify-base-example-looks-good-on-screen-width-1920px-1-webkit-linux.png differ
diff --git a/semcore/product-head/__tests__/product-head.browser-test.tsx-snapshots/-visual-Verify-base-example-looks-good-on-screen-width-768px-1-chromium-linux.png b/semcore/product-head/__tests__/product-head.browser-test.tsx-snapshots/-visual-Verify-base-example-looks-good-on-screen-width-768px-1-chromium-linux.png
index 6c94738cdf..25e499cf6e 100644
Binary files a/semcore/product-head/__tests__/product-head.browser-test.tsx-snapshots/-visual-Verify-base-example-looks-good-on-screen-width-768px-1-chromium-linux.png and b/semcore/product-head/__tests__/product-head.browser-test.tsx-snapshots/-visual-Verify-base-example-looks-good-on-screen-width-768px-1-chromium-linux.png differ
diff --git a/semcore/product-head/__tests__/product-head.browser-test.tsx-snapshots/-visual-Verify-base-example-looks-good-on-screen-width-768px-1-firefox-linux.png b/semcore/product-head/__tests__/product-head.browser-test.tsx-snapshots/-visual-Verify-base-example-looks-good-on-screen-width-768px-1-firefox-linux.png
index e969330b56..e58c30a310 100644
Binary files a/semcore/product-head/__tests__/product-head.browser-test.tsx-snapshots/-visual-Verify-base-example-looks-good-on-screen-width-768px-1-firefox-linux.png and b/semcore/product-head/__tests__/product-head.browser-test.tsx-snapshots/-visual-Verify-base-example-looks-good-on-screen-width-768px-1-firefox-linux.png differ
diff --git a/semcore/product-head/__tests__/product-head.browser-test.tsx-snapshots/-visual-Verify-base-example-looks-good-on-screen-width-768px-1-webkit-linux.png b/semcore/product-head/__tests__/product-head.browser-test.tsx-snapshots/-visual-Verify-base-example-looks-good-on-screen-width-768px-1-webkit-linux.png
index 583154596c..3f9135a2e1 100644
Binary files a/semcore/product-head/__tests__/product-head.browser-test.tsx-snapshots/-visual-Verify-base-example-looks-good-on-screen-width-768px-1-webkit-linux.png and b/semcore/product-head/__tests__/product-head.browser-test.tsx-snapshots/-visual-Verify-base-example-looks-good-on-screen-width-768px-1-webkit-linux.png differ
diff --git a/semcore/product-head/package.json b/semcore/product-head/package.json
index bf05df2179..b89d73054d 100644
--- a/semcore/product-head/package.json
+++ b/semcore/product-head/package.json
@@ -17,7 +17,7 @@
     "require": "./lib/cjs/index.js"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1"
+    "@semcore/base-components": "^17.0.2"
   },
   "repository": {
     "type": "git",
diff --git a/semcore/progress-bar/CHANGELOG.md b/semcore/progress-bar/CHANGELOG.md
index ce868ad73a..ad71850239 100644
--- a/semcore/progress-bar/CHANGELOG.md
+++ b/semcore/progress-bar/CHANGELOG.md
@@ -2,6 +2,13 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [17.0.2] - 2026-04-30
+
+### Fixed
+
+- Deprecated atomic types. Atomic parts are part of `NSProgressBar`
+namespace.
+
 ## [17.0.1] - 2026-04-16
 
 ### Fixed
diff --git a/semcore/progress-bar/package.json b/semcore/progress-bar/package.json
index b0ab26b264..3a62be6e8f 100644
--- a/semcore/progress-bar/package.json
+++ b/semcore/progress-bar/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@semcore/progress-bar",
   "description": "Semrush ProgressBar Component",
-  "version": "17.0.1",
+  "version": "17.0.2",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -17,7 +17,7 @@
     "require": "./lib/cjs/index.js"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1"
+    "@semcore/base-components": "^17.0.2"
   },
   "repository": {
     "type": "git",
diff --git a/semcore/radio/CHANGELOG.md b/semcore/radio/CHANGELOG.md
index 778b14deea..331bd108dd 100644
--- a/semcore/radio/CHANGELOG.md
+++ b/semcore/radio/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [17.0.2] - 2026-04-30
+
+### Fixed
+
+- Deprecated atomic types. Atomic types are part of `NSRadio` namespace.
+
 ## [17.0.1] - 2026-04-16
 
 ### Fixed
diff --git a/semcore/radio/package.json b/semcore/radio/package.json
index 1f8bda2aef..4d1ce5d131 100644
--- a/semcore/radio/package.json
+++ b/semcore/radio/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@semcore/radio",
   "description": "Semrush Radio Component",
-  "version": "17.0.1",
+  "version": "17.0.2",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -17,10 +17,10 @@
     "require": "./lib/cjs/index.js"
   },
   "dependencies": {
-    "@semcore/typography": "^17.0.1"
+    "@semcore/typography": "^17.0.2"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1"
+    "@semcore/base-components": "^17.0.2"
   },
   "repository": {
     "type": "git",
diff --git a/semcore/select/package.json b/semcore/select/package.json
index 3bbf382146..4ca6b52cbf 100644
--- a/semcore/select/package.json
+++ b/semcore/select/package.json
@@ -18,16 +18,16 @@
   "dependencies": {
     "@semcore/base-trigger": "^17.0.1",
     "@semcore/button": "^17.0.1",
-    "@semcore/checkbox": "^17.0.1",
-    "@semcore/divider": "^17.0.1",
+    "@semcore/checkbox": "^17.0.2",
+    "@semcore/divider": "^17.0.2",
     "@semcore/dropdown": "^17.0.1",
     "@semcore/dropdown-menu": "^17.0.1",
     "@semcore/input": "^17.0.1",
-    "@semcore/typography": "^17.0.1",
+    "@semcore/typography": "^17.0.2",
     "classnames": "2.2.6"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1",
+    "@semcore/base-components": "^17.0.2",
     "@semcore/icon": "^17.0.1"
   },
   "repository": {
diff --git a/semcore/side-panel/CHANGELOG.md b/semcore/side-panel/CHANGELOG.md
index b0d20789ad..df6b73f6d3 100644
--- a/semcore/side-panel/CHANGELOG.md
+++ b/semcore/side-panel/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [17.0.2] - 2026-04-30
+
+### Fixed
+
+- Header height doesn't increase as content increases.
+
 ## [17.0.1] - 2026-04-16
 
 ### Fixed
diff --git a/semcore/side-panel/package.json b/semcore/side-panel/package.json
index 072a7ee8f0..23d9fd7873 100644
--- a/semcore/side-panel/package.json
+++ b/semcore/side-panel/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@semcore/side-panel",
   "description": "Semrush SidePanel Component",
-  "version": "17.0.1",
+  "version": "17.0.2",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -18,10 +18,10 @@
   },
   "dependencies": {
     "@semcore/button": "^17.0.1",
-    "@semcore/typography": "^17.0.1"
+    "@semcore/typography": "^17.0.2"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1",
+    "@semcore/base-components": "^17.0.2",
     "@semcore/icon": "^17.0.1"
   },
   "repository": {
diff --git a/semcore/skeleton/CHANGELOG.md b/semcore/skeleton/CHANGELOG.md
index 03370dd88c..bfcbf57265 100644
--- a/semcore/skeleton/CHANGELOG.md
+++ b/semcore/skeleton/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [17.0.2] - 2026-04-30
+
+### Fixed
+
+- Rewrite component to TS.
+
 ## [17.0.1] - 2026-04-16
 
 ### Fixed
diff --git a/semcore/skeleton/package.json b/semcore/skeleton/package.json
index d6477aaf09..05733c36cc 100644
--- a/semcore/skeleton/package.json
+++ b/semcore/skeleton/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@semcore/skeleton",
   "description": "Semrush Skeleton Component",
-  "version": "17.0.1",
+  "version": "17.0.2",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "types": "lib/types/index.d.ts",
@@ -17,7 +17,7 @@
     "require": "./lib/cjs/index.js"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1"
+    "@semcore/base-components": "^17.0.2"
   },
   "repository": {
     "type": "git",
diff --git a/semcore/slider/__tests__/slider.browser-test.tsx b/semcore/slider/__tests__/slider.browser-test.tsx
index fffd39a74a..c4ef32fc66 100644
--- a/semcore/slider/__tests__/slider.browser-test.tsx
+++ b/semcore/slider/__tests__/slider.browser-test.tsx
@@ -109,6 +109,7 @@ test.describe(`${TAG.VISUAL}`, () => {
     await test.step('Verify invalid state with value below min', async () => {
       await inputValue.fill('0');
       await expect(inputValue).toHaveAttribute('aria-invalid', 'true');
+      await page.getByRole('tooltip').waitFor({ state: 'visible' });
       await expect(page).toHaveScreenshot();
     });
   });
diff --git a/semcore/slider/__tests__/slider.browser-test.tsx-snapshots/-visual-Verify-slider-with-input-validation-states-1-chromium-linux.png b/semcore/slider/__tests__/slider.browser-test.tsx-snapshots/-visual-Verify-slider-with-input-validation-states-1-chromium-linux.png
index e3dd7ce431..aa1cc83b56 100644
Binary files a/semcore/slider/__tests__/slider.browser-test.tsx-snapshots/-visual-Verify-slider-with-input-validation-states-1-chromium-linux.png and b/semcore/slider/__tests__/slider.browser-test.tsx-snapshots/-visual-Verify-slider-with-input-validation-states-1-chromium-linux.png differ
diff --git a/semcore/slider/__tests__/slider.browser-test.tsx-snapshots/-visual-Verify-slider-with-input-validation-states-1-firefox-linux.png b/semcore/slider/__tests__/slider.browser-test.tsx-snapshots/-visual-Verify-slider-with-input-validation-states-1-firefox-linux.png
index db6b35d40c..d61a0812ef 100644
Binary files a/semcore/slider/__tests__/slider.browser-test.tsx-snapshots/-visual-Verify-slider-with-input-validation-states-1-firefox-linux.png and b/semcore/slider/__tests__/slider.browser-test.tsx-snapshots/-visual-Verify-slider-with-input-validation-states-1-firefox-linux.png differ
diff --git a/semcore/slider/__tests__/slider.browser-test.tsx-snapshots/-visual-Verify-slider-with-input-validation-states-1-webkit-linux.png b/semcore/slider/__tests__/slider.browser-test.tsx-snapshots/-visual-Verify-slider-with-input-validation-states-1-webkit-linux.png
index cc199420a6..c212bfc3a5 100644
Binary files a/semcore/slider/__tests__/slider.browser-test.tsx-snapshots/-visual-Verify-slider-with-input-validation-states-1-webkit-linux.png and b/semcore/slider/__tests__/slider.browser-test.tsx-snapshots/-visual-Verify-slider-with-input-validation-states-1-webkit-linux.png differ
diff --git a/semcore/slider/package.json b/semcore/slider/package.json
index f76213d3dd..902c7bc4e6 100644
--- a/semcore/slider/package.json
+++ b/semcore/slider/package.json
@@ -17,7 +17,7 @@
     "require": "./lib/cjs/index.js"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1"
+    "@semcore/base-components": "^17.0.2"
   },
   "repository": {
     "type": "git",
diff --git a/semcore/spin-container/package.json b/semcore/spin-container/package.json
index 326707af9a..e03f8ca5d4 100644
--- a/semcore/spin-container/package.json
+++ b/semcore/spin-container/package.json
@@ -20,7 +20,7 @@
     "@semcore/spin": "^17.0.1"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1"
+    "@semcore/base-components": "^17.0.2"
   },
   "repository": {
     "type": "git",
diff --git a/semcore/spin-container/src/index.d.ts b/semcore/spin-container/src/index.d.ts
index 38564999ef..e1e292cd7a 100644
--- a/semcore/spin-container/src/index.d.ts
+++ b/semcore/spin-container/src/index.d.ts
@@ -1,9 +1,9 @@
 import type { FadeInOutProps, BoxProps } from '@semcore/base-components';
 import type { PropGetterFn, Intergalactic } from '@semcore/core';
-import type { SpinProps } from '@semcore/spin';
+import type { NSSpin } from '@semcore/spin';
 
 export type SpinContainerProps = BoxProps &
-  SpinProps & {
+  NSSpin.Props & {
     /**
      * Color of container spinner; you can use your own color
      */
diff --git a/semcore/spin/package.json b/semcore/spin/package.json
index 6db5b193a9..b75b77a853 100644
--- a/semcore/spin/package.json
+++ b/semcore/spin/package.json
@@ -9,7 +9,7 @@
   "author": "UI-kit team <ui-kit-team@semrush.com>",
   "license": "MIT",
   "scripts": {
-    "build": "pnpm semcore-builder --source=js && pnpm vite build"
+    "build": "pnpm semcore-builder && pnpm vite build"
   },
   "exports": {
     "types": "./lib/types/index.d.ts",
@@ -17,7 +17,7 @@
     "require": "./lib/cjs/index.js"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1"
+    "@semcore/base-components": "^17.0.2"
   },
   "repository": {
     "type": "git",
diff --git a/semcore/spin/src/Spin.jsx b/semcore/spin/src/Spin.tsx
similarity index 83%
rename from semcore/spin/src/Spin.jsx
rename to semcore/spin/src/Spin.tsx
index 957f8da42c..68287b2c9c 100644
--- a/semcore/spin/src/Spin.jsx
+++ b/semcore/spin/src/Spin.tsx
@@ -1,16 +1,21 @@
 import { Box } from '@semcore/base-components';
+import type { Intergalactic } from '@semcore/core';
 import { createComponent, Component, sstyled, Root } from '@semcore/core';
 import i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance';
 import resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';
 import React from 'react';
 
+import type { NSSpin } from './Spin.type';
 import style from './style/spin.shadow.css';
 import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
 
-class RootSpin extends Component {
+class RootSpin extends Component<
+  Intergalactic.InternalTypings.InferComponentProps<NSSpin.Component>,
+  typeof RootSpin.enhance
+> {
   static displayName = 'Spin';
   static style = style;
-  static enhance = [resolveColorEnhance(), i18nEnhance(localizedMessages)];
+  static enhance = [resolveColorEnhance(), i18nEnhance(localizedMessages)] as const;
   static defaultProps = {
     size: 'm',
     theme: 'dark',
@@ -35,4 +40,6 @@ class RootSpin extends Component {
   }
 }
 
-export default createComponent(RootSpin);
+const Spin = createComponent(RootSpin) as NSSpin.Component;
+
+export default Spin;
diff --git a/semcore/spin/src/Spin.type.ts b/semcore/spin/src/Spin.type.ts
new file mode 100644
index 0000000000..1adb4070cf
--- /dev/null
+++ b/semcore/spin/src/Spin.type.ts
@@ -0,0 +1,32 @@
+import type { BoxProps } from '@semcore/base-components';
+import type { Intergalactic } from '@semcore/core';
+
+declare namespace NSSpin {
+  type Size = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
+  type Props = BoxProps & {
+    /** Spinner size
+     * @default m
+     **/
+    size?: NSSpin.Size;
+    /** Spinner theme. There are several default themes or you can use your own color
+     * @default dark
+     **/
+    theme?: 'dark' | 'invert' | string;
+    /** Whether the spinner should be in the center of the parent.
+     * This works for a nested spinner in flex,
+     * otherwise only horizontal alignment will occur.
+     * */
+    centered?: boolean;
+    /** Specifies the locale for i18n support */
+    locale?: string;
+  };
+
+  type Component = Intergalactic.Component<'div', Props>;
+}
+
+/** @deprecated It will be removed in v18. */
+export type SpinSize = NSSpin.Size;
+/** @deprecated It will be removed in v18. */
+export type SpinProps = NSSpin.Props;
+
+export type { NSSpin };
diff --git a/semcore/spin/src/index.d.ts b/semcore/spin/src/index.d.ts
deleted file mode 100644
index ac1e232cc6..0000000000
--- a/semcore/spin/src/index.d.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { BoxProps } from '@semcore/base-components';
-import type { Intergalactic } from '@semcore/core';
-
-export type SpinSize = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
-
-export type SpinProps = BoxProps & {
-  /** Spinner size
-   * @default m
-   **/
-  size?: SpinSize;
-  /** Spinner theme. There are several default themes or you can use your own color
-   * @default dark
-   **/
-  theme?: 'dark' | 'invert' | string;
-  /** Whether the spinner should be in the center of the parent.
-   * This works for a nested spinner in flex,
-   * otherwise only horizontal alignment will occur.
-   * */
-  centered?: boolean;
-  /** Specifies the locale for i18n support */
-  locale?: string;
-};
-
-declare const Spin: Intergalactic.Component<'div', SpinProps>;
-
-export default Spin;
diff --git a/semcore/spin/src/index.js b/semcore/spin/src/index.ts
similarity index 53%
rename from semcore/spin/src/index.js
rename to semcore/spin/src/index.ts
index fbbd22a4bc..cd5858a84d 100644
--- a/semcore/spin/src/index.js
+++ b/semcore/spin/src/index.ts
@@ -1 +1,2 @@
 export { default } from './Spin';
+export * from './Spin.type';
diff --git a/semcore/spin/vite.config.ts b/semcore/spin/vite.config.ts
index 0991a16528..90f46b4cb2 100644
--- a/semcore/spin/vite.config.ts
+++ b/semcore/spin/vite.config.ts
@@ -7,7 +7,7 @@ export default mergeConfig(
   defineConfig({
     build: {
       lib: {
-        entry: './src/index.js',
+        entry: './src/index.ts',
       },
       rollupOptions: {
         external: ['react', 'react-dom', 'react/jsx-runtime', /@babel\/runtime\/*/, /@semcore\/*/],
diff --git a/semcore/switch/package.json b/semcore/switch/package.json
index 2b175f6470..58e3e843ff 100644
--- a/semcore/switch/package.json
+++ b/semcore/switch/package.json
@@ -17,7 +17,7 @@
     "require": "./lib/cjs/index.js"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1"
+    "@semcore/base-components": "^17.0.2"
   },
   "repository": {
     "type": "git",
diff --git a/semcore/tab-line/CHANGELOG.md b/semcore/tab-line/CHANGELOG.md
index 40cb78597d..f5e8c4cd1c 100644
--- a/semcore/tab-line/CHANGELOG.md
+++ b/semcore/tab-line/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [17.0.2] - 2026-04-30
+
+### Fixed
+
+- Rewrite component to TS.
+
 ## [17.0.1] - 2026-04-16
 
 ### Fixed
diff --git a/semcore/tab-line/package.json b/semcore/tab-line/package.json
index 587f5a3bb1..eaddf8b140 100644
--- a/semcore/tab-line/package.json
+++ b/semcore/tab-line/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@semcore/tab-line",
   "description": "Semrush TabLine Component",
-  "version": "17.0.1",
+  "version": "17.0.2",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -17,10 +17,10 @@
     "require": "./lib/cjs/index.js"
   },
   "dependencies": {
-    "@semcore/typography": "^17.0.1"
+    "@semcore/typography": "^17.0.2"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1"
+    "@semcore/base-components": "^17.0.2"
   },
   "repository": {
     "type": "git",
diff --git a/semcore/tab-panel/CHANGELOG.md b/semcore/tab-panel/CHANGELOG.md
index 5c262c4ca7..2b5a030711 100644
--- a/semcore/tab-panel/CHANGELOG.md
+++ b/semcore/tab-panel/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [17.0.2] - 2026-04-30
+
+### Fixed
+
+- Rewrite component to TS.
+
 ## [17.0.1] - 2026-04-16
 
 ### Fixed
diff --git a/semcore/tab-panel/package.json b/semcore/tab-panel/package.json
index 840126d88a..92ea490d37 100644
--- a/semcore/tab-panel/package.json
+++ b/semcore/tab-panel/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@semcore/tab-panel",
   "description": "Semrush TabPanel Component",
-  "version": "17.0.1",
+  "version": "17.0.2",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -17,10 +17,10 @@
     "require": "./lib/cjs/index.js"
   },
   "dependencies": {
-    "@semcore/typography": "^17.0.1"
+    "@semcore/typography": "^17.0.2"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1"
+    "@semcore/base-components": "^17.0.2"
   },
   "repository": {
     "type": "git",
diff --git a/semcore/tag/package.json b/semcore/tag/package.json
index a1c5166940..24fa6891cb 100644
--- a/semcore/tag/package.json
+++ b/semcore/tag/package.json
@@ -17,10 +17,10 @@
     "require": "./lib/cjs/index.js"
   },
   "dependencies": {
-    "@semcore/typography": "^17.0.1"
+    "@semcore/typography": "^17.0.2"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1",
+    "@semcore/base-components": "^17.0.2",
     "@semcore/icon": "^17.0.1"
   },
   "repository": {
diff --git a/semcore/textarea/package.json b/semcore/textarea/package.json
index 4ec660bde7..4452f47947 100644
--- a/semcore/textarea/package.json
+++ b/semcore/textarea/package.json
@@ -17,7 +17,7 @@
     "require": "./lib/cjs/index.js"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1"
+    "@semcore/base-components": "^17.0.2"
   },
   "repository": {
     "type": "git",
diff --git a/semcore/time-picker/package.json b/semcore/time-picker/package.json
index 943d2cba4b..d8d43df854 100644
--- a/semcore/time-picker/package.json
+++ b/semcore/time-picker/package.json
@@ -22,7 +22,7 @@
     "@semcore/select": "^17.0.1"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1"
+    "@semcore/base-components": "^17.0.2"
   },
   "repository": {
     "type": "git",
diff --git a/semcore/tooltip/package.json b/semcore/tooltip/package.json
index 4a1c2ab649..0b8311c6eb 100644
--- a/semcore/tooltip/package.json
+++ b/semcore/tooltip/package.json
@@ -18,7 +18,7 @@
     "require": "./lib/cjs/index.js"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1"
+    "@semcore/base-components": "^17.0.2"
   },
   "repository": {
     "type": "git",
diff --git a/semcore/typography/CHANGELOG.md b/semcore/typography/CHANGELOG.md
index 6272910591..cb4741c6a9 100644
--- a/semcore/typography/CHANGELOG.md
+++ b/semcore/typography/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [17.0.2] - 2026-04-30
+
+### Fixed
+
+- Rewrite component to TS.
+
 ## [17.0.1] - 2026-04-16
 
 ### Fixed
diff --git a/semcore/typography/package.json b/semcore/typography/package.json
index b254936838..5f5beff680 100644
--- a/semcore/typography/package.json
+++ b/semcore/typography/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@semcore/typography",
   "description": "Semrush Typography Component",
-  "version": "17.0.1",
+  "version": "17.0.2",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -18,7 +18,7 @@
   },
   "dependencies": {},
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1",
+    "@semcore/base-components": "^17.0.2",
     "@semcore/icon": "^17.0.1"
   },
   "repository": {
diff --git a/semcore/ui/CHANGELOG.md b/semcore/ui/CHANGELOG.md
index 76d7696ce6..bf1286dbc6 100644
--- a/semcore/ui/CHANGELOG.md
+++ b/semcore/ui/CHANGELOG.md
@@ -1,3 +1,93 @@
+## [17.0.2] - 2026-04-30
+
+### @semcore/radio
+
+- **Fixed** Deprecated atomic types. Atomic types are part of `NSRadio` namespace.
+
+### @semcore/d3-chart
+
+- **Fixed** Vulnerabilities were discovered in the `rollup` version.
+
+### @semcore/bulk-textarea
+
+- **Fixed** Vulnerabilities were discovered in the `dompurify` version.
+
+### @semcore/accordion
+
+- **Fixed** Deprecated atomic types. Atomic parts are part of `NSAccordion`
+namespace.
+
+### @semcore/pills
+
+- **Fixed** Deprecated atomic types. Atomic parts are part of `NSPills` namespace.
+
+### @semcore/progress-bar
+
+- **Fixed** Deprecated atomic types. Atomic parts are part of `NSProgressBar`
+namespace.
+
+### @semcore/typography
+
+- **Fixed** Rewrite component to TS.
+
+### @semcore/divider
+
+- **Fixed** Deprecated atomic types. Atomic parts are part of `NSDivider`
+namespace.
+
+### @semcore/dot
+
+- **Fixed** Deprecated atomic types. Atomic parts are part of `NSDot` namespace.
+
+### @semcore/card
+
+- **Fixed** Deprecated atomic types. Atomic parts are part of `NSCard` namespace.
+
+### @semcore/errors
+
+- **Fixed** Deprecated atomic types. Atomic parts are part of
+`NSErrors/NSAccessDenied/NSMaintenance/NSPageError/NSPageNotFound/NSProjectNotFound`
+namespaces.
+
+### @semcore/base-components
+
+- **Fixed** **flex-box**: Incorrect handling of styles for focus ring offset values.
+
+### @semcore/checkbox
+
+- **Fixed** Deprecated atomic types. Atomic parts are part of `NSCheckbox`
+namespaces.
+
+### @semcore/skeleton
+
+- **Fixed** Rewrite component to TS.
+
+### @semcore/tab-panel
+
+- **Fixed** Rewrite component to TS.
+
+### @semcore/tab-line
+
+- **Fixed** Rewrite component to TS.
+
+### @semcore/side-panel
+
+- **Fixed** Header height doesn't increase as content increases.
+
+### @semcore/data-table
+
+- **Fixed** Lags when scrolling and header sticks
+- **Fixed** Checkbox with fixed column - body cell with checkbox is not fixed.
+- **Fixed** Incorrect value in css-selectors.
+
+### @semcore/input-mask
+
+- **Fixed** Incorrect paddings with `neighborLocation=right`.
+
+### @semcore/date-picker
+
+- **Fixed** Incorrect input trigger width calculation.
+
 ## [17.0.1] - 2026-04-16
 
 ### @semcore/core
diff --git a/semcore/ui/package.json b/semcore/ui/package.json
index 2314f3be61..9b5552d2c9 100644
--- a/semcore/ui/package.json
+++ b/semcore/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@semcore/ui",
-  "version": "17.0.1",
+  "version": "17.0.2",
   "description": "Semrush design system package that reexports all other single component packages.",
   "author": "UI-kit team <ui-kit-team@semrush.com>",
   "license": "MIT",
@@ -13,30 +13,30 @@
     "update-dependencies": "tsm --require=../../.ci/tsm-filter-warnings.js update-dependencies.ts"
   },
   "dependencies": {
-    "@semcore/accordion": "^17.0.1",
+    "@semcore/accordion": "^17.0.2",
     "@semcore/add-filter": "^17.0.1",
     "@semcore/badge": "^17.0.1",
-    "@semcore/base-components": "^17.0.1",
+    "@semcore/base-components": "^17.0.2",
     "@semcore/base-trigger": "^17.0.1",
     "@semcore/breadcrumbs": "^17.0.1",
-    "@semcore/bulk-textarea": "^17.0.1",
+    "@semcore/bulk-textarea": "^17.0.2",
     "@semcore/button": "^17.0.1",
-    "@semcore/card": "^17.0.1",
+    "@semcore/card": "^17.0.2",
     "@semcore/carousel": "^17.0.1",
-    "@semcore/checkbox": "^17.0.1",
+    "@semcore/checkbox": "^17.0.2",
     "@semcore/color-picker": "^17.0.1",
     "@semcore/core": "^17.0.1",
     "@semcore/counter": "^17.0.1",
-    "@semcore/d3-chart": "^17.0.1",
-    "@semcore/data-table": "^17.0.1",
-    "@semcore/date-picker": "^17.0.1",
-    "@semcore/divider": "^17.0.1",
-    "@semcore/dot": "^17.0.1",
+    "@semcore/d3-chart": "^17.0.2",
+    "@semcore/data-table": "^17.0.2",
+    "@semcore/date-picker": "^17.0.2",
+    "@semcore/divider": "^17.0.2",
+    "@semcore/dot": "^17.0.2",
     "@semcore/drag-and-drop": "^17.0.1",
     "@semcore/dropdown": "^17.0.1",
     "@semcore/dropdown-menu": "^17.0.1",
     "@semcore/ellipsis": "^17.0.1",
-    "@semcore/errors": "^17.0.1",
+    "@semcore/errors": "^17.0.2",
     "@semcore/feature-highlight": "^17.0.1",
     "@semcore/feature-popover": "^17.0.1",
     "@semcore/feedback-form": "^17.0.1",
@@ -46,7 +46,7 @@
     "@semcore/inline-edit": "^17.0.1",
     "@semcore/inline-input": "^17.0.1",
     "@semcore/input": "^17.0.1",
-    "@semcore/input-mask": "^17.0.1",
+    "@semcore/input-mask": "^17.0.2",
     "@semcore/input-number": "^17.0.1",
     "@semcore/input-tags": "^17.0.1",
     "@semcore/link": "^17.0.1",
@@ -55,24 +55,24 @@
     "@semcore/notice": "^17.0.1",
     "@semcore/notice-bubble": "^17.0.1",
     "@semcore/pagination": "^17.0.1",
-    "@semcore/pills": "^17.0.1",
+    "@semcore/pills": "^17.0.2",
     "@semcore/product-head": "^17.0.1",
-    "@semcore/progress-bar": "^17.0.1",
-    "@semcore/radio": "^17.0.1",
+    "@semcore/progress-bar": "^17.0.2",
+    "@semcore/radio": "^17.0.2",
     "@semcore/select": "^17.0.1",
-    "@semcore/side-panel": "^17.0.1",
-    "@semcore/skeleton": "^17.0.1",
+    "@semcore/side-panel": "^17.0.2",
+    "@semcore/skeleton": "^17.0.2",
     "@semcore/slider": "^17.0.1",
     "@semcore/spin": "^17.0.1",
     "@semcore/spin-container": "^17.0.1",
     "@semcore/switch": "^17.0.1",
-    "@semcore/tab-line": "^17.0.1",
-    "@semcore/tab-panel": "^17.0.1",
+    "@semcore/tab-line": "^17.0.2",
+    "@semcore/tab-panel": "^17.0.2",
     "@semcore/tag": "^17.0.1",
     "@semcore/textarea": "^17.0.1",
     "@semcore/time-picker": "^17.0.1",
     "@semcore/tooltip": "^17.0.1",
-    "@semcore/typography": "^17.0.1",
+    "@semcore/typography": "^17.0.2",
     "@semcore/widget-empty": "^17.0.1",
     "@semcore/wizard": "^17.0.1"
   },
diff --git a/semcore/widget-empty/package.json b/semcore/widget-empty/package.json
index 55da97b28d..94266eadf8 100644
--- a/semcore/widget-empty/package.json
+++ b/semcore/widget-empty/package.json
@@ -20,7 +20,7 @@
     "@semcore/illustration": "^17.0.1"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1"
+    "@semcore/base-components": "^17.0.2"
   },
   "repository": {
     "type": "git",
diff --git a/semcore/wizard/package.json b/semcore/wizard/package.json
index ba9a138482..ebffb40eb8 100644
--- a/semcore/wizard/package.json
+++ b/semcore/wizard/package.json
@@ -21,7 +21,7 @@
     "@semcore/modal": "^17.0.1"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1",
+    "@semcore/base-components": "^17.0.2",
     "@semcore/icon": "^17.0.1"
   },
   "repository": {
diff --git a/stories/components/badge/docs/examples/badge_main_types.tsx b/stories/components/badge/docs/examples/badge_main_types.tsx
index b134dfb836..bbd6074ff0 100644
--- a/stories/components/badge/docs/examples/badge_main_types.tsx
+++ b/stories/components/badge/docs/examples/badge_main_types.tsx
@@ -1,25 +1,34 @@
 import Badge from '@semcore/ui/badge';
-import { Flex } from '@semcore/ui/base-components';
+import { Box, Flex } from '@semcore/ui/base-components';
 import React from 'react';
 
 const Demo = () => {
   return (
-    <>
-      <Flex gap={2}>
+    <Flex gap={8} alignItems='center'>
+      <Flex gap={2} alignItems='center'>
         <Badge type='admin' />
         <Badge type='alpha' />
         <Badge type='beta' />
         <Badge type='new' />
         <Badge type='soon' />
       </Flex>
-      <Flex gap={2} mt={2} p='4px 0' style={{ background: '#000' }}>
-        <Badge type='admin' inverted />
-        <Badge type='alpha' inverted />
-        <Badge type='beta' inverted />
-        <Badge type='new' inverted />
-        <Badge type='soon' inverted />
-      </Flex>
-    </>
+      <Box
+        p={4}
+        style={{
+          background: '#191b23',
+          borderRadius: '6px',
+          width: 'fit-content',
+        }}
+      >
+        <Flex gap={2} alignItems='center'>
+          <Badge type='admin' inverted />
+          <Badge type='alpha' inverted />
+          <Badge type='beta' inverted />
+          <Badge type='new' inverted />
+          <Badge type='soon' inverted />
+        </Flex>
+      </Box>
+    </Flex>
   );
 };
 
diff --git a/stories/components/base-trigger/docs/filter-trigger.stories.tsx b/stories/components/base-trigger/docs/filter-trigger.stories.tsx
index 3a2713d654..bd0c07ac93 100644
--- a/stories/components/base-trigger/docs/filter-trigger.stories.tsx
+++ b/stories/components/base-trigger/docs/filter-trigger.stories.tsx
@@ -4,23 +4,18 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import AccessibleNameExample from './filter-trigger/examples/accessible_name';
 import ProgrammaticFocusExample from './filter-trigger/examples/programmatic_focus';
 import UsageWithSelectExample from './filter-trigger/examples/usage_with_select';
-
 const meta: Meta<typeof FilterTrigger> = {
   title: 'Components/Base Trigger/Documentation/Filter Trigger',
   component: FilterTrigger,
 };
-
 export default meta;
 type Story = StoryObj<typeof FilterTrigger>;
-
 export const AccessibleName: Story = {
   render: AccessibleNameExample,
 };
-
 export const ProgrammaticFocus: Story = {
   render: ProgrammaticFocusExample,
 };
-
 export const UsageWithSelect: Story = {
   render: UsageWithSelectExample,
 };
diff --git a/stories/components/base-trigger/docs/link-trigger.stories.tsx b/stories/components/base-trigger/docs/link-trigger.stories.tsx
index 578aa84cb1..12ed47cff0 100644
--- a/stories/components/base-trigger/docs/link-trigger.stories.tsx
+++ b/stories/components/base-trigger/docs/link-trigger.stories.tsx
@@ -3,14 +3,11 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { LinkTriggerTest } from './link-trigger/__tests__/linktrigger.test';
 import LinkTriggerExample from './link-trigger/examples/link-trigger';
 import { playWrapper } from '../../../utils/playWrapper';
-
 const meta: Meta = {
   title: 'Components/Base Trigger/Documentation/Link Trigger',
 };
-
 export const LinkTrigger: StoryObj = {
   render: LinkTriggerExample,
   play: playWrapper(LinkTriggerTest),
 };
-
 export default meta;
diff --git a/stories/components/button/advanced/button.stories.tsx b/stories/components/button/advanced/button.stories.tsx
new file mode 100644
index 0000000000..c1bad65096
--- /dev/null
+++ b/stories/components/button/advanced/button.stories.tsx
@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import AllButtonsExample from './examples/all-buttons';
+
+const meta: Meta = {
+  title: 'Components/Button/Advanced',
+};
+
+export default meta;
+
+export const AllButtons: StoryObj = {
+  render: AllButtonsExample,
+};
diff --git a/stories/components/button/advanced/examples/all-buttons.tsx b/stories/components/button/advanced/examples/all-buttons.tsx
new file mode 100644
index 0000000000..e9077cfc1d
--- /dev/null
+++ b/stories/components/button/advanced/examples/all-buttons.tsx
@@ -0,0 +1,112 @@
+import { Box, Flex } from '@semcore/ui/base-components';
+import Button, { ButtonLink } from '@semcore/ui/button';
+import React from 'react';
+
+type ButtonRowProps = {
+  use?: 'primary' | 'secondary' | 'tertiary';
+  theme?: 'info' | 'success' | 'danger' | 'brand' | 'muted' | 'invert';
+  size?: 'm' | 'l';
+};
+
+function ButtonRow({ use = 'secondary', theme = 'info', size = 'm' }: ButtonRowProps) {
+  return (
+    <Flex gap={2} alignItems='center' flexWrap>
+      <Button use={use} theme={theme} size={size}>
+        Default
+      </Button>
+      <Button use={use} theme={theme} size={size} disabled>
+        Disabled
+      </Button>
+      <Button use={use} theme={theme} size={size} loading>
+        Loading
+      </Button>
+    </Flex>
+  );
+}
+
+type ButtonLinkRowProps = {
+  use?: 'primary' | 'secondary';
+  size?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800;
+};
+
+function ButtonLinkRow({ use = 'primary', size = 300 }: ButtonLinkRowProps) {
+  return (
+    <Flex gap={2} alignItems='center' flexWrap>
+      <ButtonLink use={use} size={size}>
+        Default
+      </ButtonLink>
+      <ButtonLink use={use} size={size} disabled>
+        Disabled
+      </ButtonLink>
+    </Flex>
+  );
+}
+
+export default function AllButtons() {
+  return (
+    <Flex direction='column' gap={8}>
+      <Flex gap={8} alignItems='flex-start' flexWrap>
+        <Flex direction='column' gap={6}>
+          <Flex gap={8} flexWrap alignItems='center'>
+            <ButtonRow use='primary' theme='info' />
+            <ButtonRow use='primary' theme='success' />
+          </Flex>
+          <Flex gap={8} flexWrap alignItems='center'>
+            <ButtonRow use='primary' theme='danger' />
+            <ButtonRow use='primary' theme='brand' />
+          </Flex>
+          <Flex gap={8} flexWrap alignItems='center'>
+            <ButtonRow />
+          </Flex>
+          <Flex gap={8} flexWrap alignItems='center'>
+            <ButtonRow use='tertiary' theme='muted' />
+            <ButtonRow use='tertiary' theme='info' />
+          </Flex>
+          <Flex gap={8} flexWrap alignItems='center'>
+            <ButtonRow use='primary' theme='info' size='l' />
+            <ButtonRow use='primary' theme='success' size='l' />
+          </Flex>
+          <Flex gap={8} flexWrap alignItems='center'>
+            <ButtonRow use='primary' theme='danger' size='l' />
+            <ButtonRow use='primary' theme='brand' size='l' />
+          </Flex>
+          <Flex gap={8} flexWrap alignItems='center'>
+            <ButtonRow size='l' />
+          </Flex>
+          <Flex gap={8} flexWrap alignItems='center'>
+            <ButtonRow use='tertiary' theme='muted' size='l' />
+            <ButtonRow use='tertiary' theme='info' size='l' />
+          </Flex>
+        </Flex>
+        <Box
+          p={4}
+          style={{
+            background: 'var(--intergalactic-bg-primary-invert)',
+            borderRadius: 'var(--intergalactic-surface-rounded, 6px)',
+          }}
+        >
+          <Flex direction='column' gap={6}>
+            <ButtonRow use='primary' theme='invert' />
+            <ButtonRow use='secondary' theme='invert' />
+            <ButtonRow use='tertiary' theme='invert' />
+            <ButtonRow use='primary' theme='invert' size='l' />
+            <ButtonRow use='secondary' theme='invert' size='l' />
+            <ButtonRow use='tertiary' theme='invert' size='l' />
+          </Flex>
+        </Box>
+      </Flex>
+      <Flex gap={8} alignItems='flex-start' flexWrap>
+        <Flex direction='column' gap={6}>
+          <Flex gap={8} flexWrap alignItems='center'>
+            <ButtonLinkRow use='primary' />
+            <ButtonLinkRow use='secondary' />
+          </Flex>
+          <Flex gap={8} flexWrap alignItems='center'>
+            <ButtonLinkRow use='primary' size={400} />
+            <ButtonLinkRow use='secondary' size={400} />
+          </Flex>
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+}
diff --git a/stories/components/button/tests/examples/button-link/button-link-base.tsx b/stories/components/button/tests/examples/button-link/button-link-base.tsx
index c647cd22dc..965a46f58b 100644
--- a/stories/components/button/tests/examples/button-link/button-link-base.tsx
+++ b/stories/components/button/tests/examples/button-link/button-link-base.tsx
@@ -4,7 +4,7 @@ import Badge from '@semcore/ui/badge';
 import { ButtonLink } from '@semcore/ui/button';
 import type { ButtonLinkProps } from '@semcore/ui/button';
 import Counter, { type CounterProps } from '@semcore/ui/counter';
-import Spin, { type SpinSize } from '@semcore/ui/spin';
+import Spin, { type NSSpin } from '@semcore/ui/spin';
 import type { NSText } from '@semcore/ui/typography';
 import { Text } from '@semcore/ui/typography';
 import React from 'react';
@@ -46,7 +46,7 @@ const Demo = (props: BasicButtonLinkProps) => {
   const numSize = Number(size);
   const IconAddon = numSize < 600 ? MathPlusAltM : MathPlusAltL;
 
-  let spinSize: SpinSize = 'm';
+  let spinSize: NSSpin.Size = 'm';
   if (numSize <= 200) {
     spinSize = 'xs';
   } else if (numSize <= 500) {
diff --git a/stories/components/button/tests/examples/button-link/button-link-sizes-addons.tsx b/stories/components/button/tests/examples/button-link/button-link-sizes-addons.tsx
index c63b7c65ea..e98046fb4a 100644
--- a/stories/components/button/tests/examples/button-link/button-link-sizes-addons.tsx
+++ b/stories/components/button/tests/examples/button-link/button-link-sizes-addons.tsx
@@ -4,7 +4,7 @@ import Badge from '@semcore/ui/badge';
 import { ButtonLink } from '@semcore/ui/button';
 import type { CounterProps } from '@semcore/ui/counter';
 import Counter from '@semcore/ui/counter';
-import type { SpinSize } from '@semcore/ui/spin';
+import type { NSSpin } from '@semcore/ui/spin';
 import Spin from '@semcore/ui/spin';
 import { Text } from '@semcore/ui/typography';
 import React from 'react';
@@ -25,7 +25,7 @@ const Demo = (props: ButtonLinkSizesProps) => {
   return (
     <>
       {sizes.map((size) => {
-        let spinSize: SpinSize = 'm';
+        let spinSize: NSSpin.Size = 'm';
         if (size <= 200) {
           spinSize = 'xs';
         } else if (size <= 500) {
diff --git a/stories/components/card/advanced/card.stories.tsx b/stories/components/card/advanced/card.stories.tsx
new file mode 100644
index 0000000000..c9007ccdc7
--- /dev/null
+++ b/stories/components/card/advanced/card.stories.tsx
@@ -0,0 +1,17 @@
+import Card from '@semcore/ui/card';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import CardWithHoverExample from './examples/card-with-hover';
+
+const meta: Meta<typeof Card> = {
+  title: 'Components/Card/Advanced',
+  component: Card,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Card>;
+
+export const CardWithHover: Story = {
+  render: CardWithHoverExample,
+};
diff --git a/stories/components/card/advanced/examples/card-with-hover.tsx b/stories/components/card/advanced/examples/card-with-hover.tsx
new file mode 100644
index 0000000000..a5fc683900
--- /dev/null
+++ b/stories/components/card/advanced/examples/card-with-hover.tsx
@@ -0,0 +1,121 @@
+import { Box, Flex } from '@semcore/ui/base-components';
+import Card from '@semcore/ui/card';
+import { Text } from '@semcore/ui/typography';
+import React from 'react';
+
+export default function CardWithHoverExample() {
+  return (
+    <>
+      <style>
+        {`
+        .card-test-hover-shadow {
+          transition: box-shadow var(--intergalactic-duration-control, 200ms) ease;
+        }
+        .card-test-hover-shadow:hover {
+          box-shadow: var(--intergalactic-box-shadow-card-hover);
+        }
+
+        .card-test-hover-dnd {
+          cursor: grab;
+          transition: box-shadow var(--intergalactic-duration-control, 200ms) ease;
+          box-shadow: var(--intergalactic-box-shadow-card);
+        }
+        .card-test-hover-dnd:hover {
+          box-shadow: var(--intergalactic-box-shadow-dnd);
+        }
+        .card-test-hover-dnd:active {
+          cursor: grabbing;
+          box-shadow: var(--intergalactic-box-shadow-dnd);
+        }
+
+        .card-test-hover-float-control {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          box-sizing: border-box;
+          min-height: var(--intergalactic-form-control-m, 28px);
+          padding: 0 var(--intergalactic-spacing-2x, 8px);
+          border: 1px solid var(--intergalactic-border-secondary, #c4c7cf);
+          border-radius: var(--intergalactic-control-rounded, 6px);
+          font-size: var(--intergalactic-fs-200, 14px);
+          font-weight: var(--intergalactic-medium, 500);
+          line-height: var(--intergalactic-lh-200, 142%);
+          color: var(--intergalactic-text-primary, #191b23);
+          background-color: var(--intergalactic-control-primary-invert, #ffffff);
+          box-shadow: var(--intergalactic-box-shadow-float-control);
+          cursor: default;
+          transition:
+            box-shadow var(--intergalactic-duration-control, 200ms) ease,
+            background-color var(--intergalactic-duration-control, 200ms) ease;
+        }
+        .card-test-hover-float-control:hover {
+          background-color: var(--intergalactic-control-primary-invert, #ffffff);
+          box-shadow: var(--intergalactic-box-shadow-float-control-hover);
+        }
+      `}
+      </style>
+      <Box>
+        <Flex direction='column' gap={4} alignItems='flex-start' w='100%'>
+          <Card
+            tag='section'
+            className='card-test-hover-shadow'
+            w='100%'
+            wMax={520}
+            aria-label='Card with hover shadow'
+          >
+            <Card.Header>
+              <Card.Title tag='h3'>Card hover shadow</Card.Title>
+            </Card.Header>
+            <Card.Body pt={4}>
+              <Text size={200} color='text-secondary'>
+                Hover the card — shadow switches to
+                {' '}
+                <Text tag='span' fontWeight={600} color='text-primary'>
+                  --intergalactic-box-shadow-card-hover
+                </Text>
+                .
+              </Text>
+            </Card.Body>
+          </Card>
+
+          <Card
+            tag='section'
+            className='card-test-hover-dnd'
+            w='100%'
+            wMax={520}
+            aria-label='Card with drag cursor and DnD shadow'
+          >
+            <Card.Header>
+              <Card.Title tag='h3'>Card DnD shadow</Card.Title>
+            </Card.Header>
+            <Card.Body pt={4}>
+              <Text size={200} color='text-secondary'>
+                Cursor
+                {' '}
+                <Text tag='span' fontWeight={600} color='text-primary'>
+                  grab
+                </Text>
+                {' / '}
+                <Text tag='span' fontWeight={600} color='text-primary'>
+                  grabbing
+                </Text>
+                ; on hover and active, shadow uses
+                {' '}
+                <Text tag='span' fontWeight={600} color='text-primary'>
+                  --intergalactic-box-shadow-dnd
+                </Text>
+                .
+              </Text>
+            </Card.Body>
+          </Card>
+
+          <Flex w='100%' wMax={520}>
+            <Box tag='div' className='card-test-hover-float-control' aria-label='Float control'>
+              Float control
+            </Box>
+          </Flex>
+        </Flex>
+      </Box>
+    </>
+  );
+}
diff --git a/stories/components/checkbox/docs/examples/basic_usage.tsx b/stories/components/checkbox/docs/examples/basic_usage.tsx
index eab4107aa5..70e72d324b 100644
--- a/stories/components/checkbox/docs/examples/basic_usage.tsx
+++ b/stories/components/checkbox/docs/examples/basic_usage.tsx
@@ -2,7 +2,7 @@ import Checkbox from '@semcore/ui/checkbox';
 import { Text } from '@semcore/ui/typography';
 import React from 'react';
 
-const fieldsetStyle = { border: 'none' };
+const fieldsetStyle = { margin: 0, padding: 0, border: 'none' };
 const ulStyle = { margin: 0, padding: 0 };
 const liStyle = { listStyle: 'none', margin: 0 };
 
diff --git a/stories/components/counter/advanced/counter.stories.tsx b/stories/components/counter/advanced/counter.stories.tsx
new file mode 100644
index 0000000000..0d27f739c3
--- /dev/null
+++ b/stories/components/counter/advanced/counter.stories.tsx
@@ -0,0 +1,16 @@
+import Counter from '@semcore/ui/counter';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import AllThemesExample from './examples/all-themes';
+
+const meta: Meta<typeof Counter> = {
+  title: 'Components/Counter/Advanced',
+  component: Counter,
+};
+
+export default meta;
+
+export const AllThemes: StoryObj = {
+  name: 'All themes',
+  render: AllThemesExample,
+};
diff --git a/stories/components/counter/advanced/examples/all-themes.tsx b/stories/components/counter/advanced/examples/all-themes.tsx
new file mode 100644
index 0000000000..365cadcd71
--- /dev/null
+++ b/stories/components/counter/advanced/examples/all-themes.tsx
@@ -0,0 +1,44 @@
+import { Box, Flex } from '@semcore/ui/base-components';
+import Counter from '@semcore/ui/counter';
+import React from 'react';
+
+const SIZES = ['s', 'm', 'l'] as const;
+
+const THEMES_ON_LIGHT = ['info', 'warning', 'danger'] as const;
+
+export default function AllThemes() {
+  return (
+    <Flex gap={8} alignItems='flex-start' flexWrap>
+      <Flex direction='column' gap={4}>
+        {SIZES.map((size) => (
+          <Flex key={size} gap={4} flexWrap alignItems='center'>
+            <Counter key={`${size}-default`} size={size}>
+              42
+            </Counter>
+            {THEMES_ON_LIGHT.map((theme) => (
+              <Counter key={`${size}-${theme}`} size={size} theme={theme}>
+                42
+              </Counter>
+            ))}
+          </Flex>
+        ))}
+      </Flex>
+      <Box
+        p={4}
+        style={{
+          background: 'var(--intergalactic-bg-primary-invert)',
+          borderRadius: 'var(--intergalactic-surface-rounded, 6px)',
+          width: 'fit-content',
+        }}
+      >
+        <Flex direction='column' gap={4}>
+          {SIZES.map((size) => (
+            <Flex key={`invert-${size}`}>
+              <Counter size={size} theme='bg-primary-neutral'>42</Counter>
+            </Flex>
+          ))}
+        </Flex>
+      </Box>
+    </Flex>
+  );
+}
diff --git a/stories/components/d3-chart/tests/bar-horizontal-compact.stories.tsx b/stories/components/d3-chart/tests/bar-horizontal-compact.stories.tsx
index 52bf09335c..baeaf2f58e 100644
--- a/stories/components/d3-chart/tests/bar-horizontal-compact.stories.tsx
+++ b/stories/components/d3-chart/tests/bar-horizontal-compact.stories.tsx
@@ -2,12 +2,10 @@ import type { Meta } from '@storybook/react-vite';
 
 import BasicUsageExample, { defaultProps as BasicUsageProps } from './examples/bar-horizontal-compact/basic_usage';
 import { getChartArgTypes } from './examples/stories_props_helper';
-
 const meta: Meta = {
   title: 'Components/d3Charts/Tests/Bar-Horizontal-Compact',
 };
 export default meta;
-
 export const BasicUsage = {
   render: BasicUsageExample,
   argTypes: getChartArgTypes(),
diff --git a/stories/components/d3-chart/tests/cigarette-chart.stories.tsx b/stories/components/d3-chart/tests/cigarette-chart.stories.tsx
index d3bac22aba..8aa891ad41 100644
--- a/stories/components/d3-chart/tests/cigarette-chart.stories.tsx
+++ b/stories/components/d3-chart/tests/cigarette-chart.stories.tsx
@@ -1,16 +1,7 @@
 import type { Meta } from '@storybook/react-vite';
 
-import BasicUsageExample, {
-  defaultProps as basicUsageProps,
-  dataAllTiny,
-  dataEqual,
-  dataMultipleTiny,
-  dataOverflow,
-  dataTinyValue,
-  dataWithZero,
-} from './examples/cigarette-chart/basic-usage';
+import BasicUsageExample, { defaultProps as basicUsageProps, dataAllTiny, dataEqual, dataMultipleTiny, dataOverflow, dataTinyValue, dataWithZero } from './examples/cigarette-chart/basic-usage';
 import { getChartArgTypes } from './examples/stories_props_helper';
-
 const dataVariations = {
   default: basicUsageProps.data,
   tinyValue: dataTinyValue,
@@ -20,12 +11,10 @@ const dataVariations = {
   allTiny: dataAllTiny,
   overflow: dataOverflow,
 };
-
 const meta: Meta = {
   title: 'Components/d3Charts/Tests/Cigarette-Chart',
 };
 export default meta;
-
 export const BasicUsage = {
   render: BasicUsageExample,
   argTypes: getChartArgTypes({
diff --git a/stories/components/d3-chart/tests/histogram-chart.stories.tsx b/stories/components/d3-chart/tests/histogram-chart.stories.tsx
index 73f3380a13..986ddf83b8 100644
--- a/stories/components/d3-chart/tests/histogram-chart.stories.tsx
+++ b/stories/components/d3-chart/tests/histogram-chart.stories.tsx
@@ -2,7 +2,6 @@ import type { Meta } from '@storybook/react-vite';
 
 import BasicUsageExample, { defaultProps as BasicUsageProps } from './examples/histogram-chart/basic-usage';
 import { getChartArgTypes } from './examples/stories_props_helper';
-
 const meta: Meta = {
   title: 'Components/d3Charts/Tests/Histogram-Chart',
 };
diff --git a/stories/components/d3-chart/tests/legend.stories.tsx b/stories/components/d3-chart/tests/legend.stories.tsx
index 2bb6d94a40..027393e4fb 100644
--- a/stories/components/d3-chart/tests/legend.stories.tsx
+++ b/stories/components/d3-chart/tests/legend.stories.tsx
@@ -1,13 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import CustomizableLegendExample, { defaultProps as args } from './examples/chart-legend/customizable_legend';
-
 const meta: Meta = {
   title: 'Components/d3Charts/tests/ChartLegend',
 };
-
 export default meta;
-
 export const CustomizableLegend = {
   render: CustomizableLegendExample,
   args,
diff --git a/stories/components/d3-chart/tests/radar-chart.stories.tsx b/stories/components/d3-chart/tests/radar-chart.stories.tsx
index d5a925ac75..20ae349126 100644
--- a/stories/components/d3-chart/tests/radar-chart.stories.tsx
+++ b/stories/components/d3-chart/tests/radar-chart.stories.tsx
@@ -5,9 +5,7 @@ import { getChartArgTypes } from './examples/stories_props_helper';
 const meta: Meta = {
   title: 'Components/d3Charts/Tests/Radar-Chart',
 };
-
 export default meta;
-
 export const BasicUsage = {
   render: BasicUsageExample,
   argTypes: getChartArgTypes(),
diff --git a/stories/components/d3-chart/tests/scatterplot-chart.stories.tsx b/stories/components/d3-chart/tests/scatterplot-chart.stories.tsx
index f864e0f400..1686fd7e24 100644
--- a/stories/components/d3-chart/tests/scatterplot-chart.stories.tsx
+++ b/stories/components/d3-chart/tests/scatterplot-chart.stories.tsx
@@ -2,13 +2,10 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import BasicUsageExample, { defaultProps as BasicUsageProps } from './examples/scatterplot-chart/basic-usage';
 import { getChartArgTypes } from './examples/stories_props_helper';
-
 const meta: Meta = {
   title: 'Components/d3Charts/Tests/Scatterplot-Chart',
 };
-
 export default meta;
-
 export const BasicUsage = {
   render: BasicUsageExample,
   argTypes: getChartArgTypes(),
diff --git a/stories/components/data-table/docs/examples/customizing-header.tsx b/stories/components/data-table/docs/examples/customizing-header.tsx
index 14bf9960fa..e65096ca1a 100644
--- a/stories/components/data-table/docs/examples/customizing-header.tsx
+++ b/stories/components/data-table/docs/examples/customizing-header.tsx
@@ -6,7 +6,9 @@ import { Text } from '@semcore/ui/typography';
 import React from 'react';
 
 const Demo = () => {
-  const [selectedColumn, setSelectedColumn] = React.useState('kd');
+  const [selectedColumn, setSelectedColumn] = React.useState<string>('kd');
+  const selectTrigger = React.useRef<HTMLDivElement | null>(null);
+
   return (
     <DataTable
       data={data}
@@ -39,12 +41,18 @@ const Demo = () => {
                 visible={isVisible}
                 onVisibleChange={setIsVisible}
                 value={selectedColumn}
-                onChange={setSelectedColumn}
+                onChange={(val: string) => {
+                  setSelectedColumn(val);
+                  setTimeout(() => {
+                    selectTrigger.current?.focus();
+                  }, 0);
+                }}
               >
                 <Select.Trigger
                   tag={LinkTrigger}
                   aria-label='Column'
                   color='text-primary'
+                  ref={selectTrigger}
                   size={100}
                   onKeyDown={(e) => {
                     if (!isVisible && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
diff --git a/stories/components/divider/advanced/divider.stories.tsx b/stories/components/divider/advanced/divider.stories.tsx
new file mode 100644
index 0000000000..11fe438fd9
--- /dev/null
+++ b/stories/components/divider/advanced/divider.stories.tsx
@@ -0,0 +1,16 @@
+import Divider from '@semcore/ui/divider';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import AllThemesExample from './examples/all-themes';
+
+const meta: Meta<typeof Divider> = {
+  title: 'Components/Divider/Advanced',
+  component: Divider,
+};
+
+export default meta;
+
+export const AllThemes: StoryObj = {
+  name: 'All themes',
+  render: AllThemesExample,
+};
diff --git a/stories/components/divider/advanced/examples/all-themes.tsx b/stories/components/divider/advanced/examples/all-themes.tsx
new file mode 100644
index 0000000000..4f5e22e951
--- /dev/null
+++ b/stories/components/divider/advanced/examples/all-themes.tsx
@@ -0,0 +1,44 @@
+import { Box, Flex } from '@semcore/ui/base-components';
+import Divider from '@semcore/ui/divider';
+import React from 'react';
+
+export default function AllThemes() {
+  return (
+    <Flex gap={8} flexWrap alignItems='flex-start'>
+      <Flex direction='column' w={60} gap={2}>
+        <Divider use='primary' />
+      </Flex>
+      <Flex direction='column' w={60} gap={2}>
+        <Divider use='secondary' />
+      </Flex>
+      <Flex alignItems='center' h={40} gap={2}>
+        <Divider orientation='vertical' use='primary' h={32} />
+      </Flex>
+      <Flex alignItems='center' h={40} gap={2}>
+        <Divider orientation='vertical' use='secondary' h={32} />
+      </Flex>
+      <Box
+        p={4}
+        style={{
+          background: 'var(--intergalactic-bg-primary-invert)',
+          borderRadius: 'var(--intergalactic-surface-rounded, 6px)',
+        }}
+      >
+        <Flex gap={8} flexWrap alignItems='flex-start'>
+          <Flex direction='column' w={60} gap={2}>
+            <Divider use='primary' theme='invert' />
+          </Flex>
+          <Flex direction='column' w={60} gap={2}>
+            <Divider use='secondary' theme='invert' />
+          </Flex>
+          <Flex alignItems='center' h={40} gap={2}>
+            <Divider orientation='vertical' use='primary' theme='invert' h={32} />
+          </Flex>
+          <Flex alignItems='center' h={40} gap={2}>
+            <Divider orientation='vertical' use='secondary' theme='invert' h={32} />
+          </Flex>
+        </Flex>
+      </Box>
+    </Flex>
+  );
+}
diff --git a/stories/components/dot/advanced/dot.stories.tsx b/stories/components/dot/advanced/dot.stories.tsx
new file mode 100644
index 0000000000..75139f795a
--- /dev/null
+++ b/stories/components/dot/advanced/dot.stories.tsx
@@ -0,0 +1,16 @@
+import Dot from '@semcore/ui/dot';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import AllDotsExample from './examples/all-dots';
+
+const meta: Meta<typeof Dot> = {
+  title: 'Components/Dot/Advanced',
+  component: Dot,
+};
+
+export default meta;
+
+export const AllDots: StoryObj = {
+  name: 'All dots',
+  render: AllDotsExample,
+};
diff --git a/stories/components/dot/advanced/examples/all-dots.tsx b/stories/components/dot/advanced/examples/all-dots.tsx
new file mode 100644
index 0000000000..c15d60139f
--- /dev/null
+++ b/stories/components/dot/advanced/examples/all-dots.tsx
@@ -0,0 +1,21 @@
+import { Flex } from '@semcore/ui/base-components';
+import Button from '@semcore/ui/button';
+import Dot from '@semcore/ui/dot';
+import React from 'react';
+
+export default function AllDots() {
+  return (
+    <Flex gap={6} flexWrap alignItems='center'>
+      <Dot aria-label='Notifications'>3</Dot>
+      <Dot size='l' aria-label='Notifications'>
+        12
+      </Dot>
+      <Button>
+        Button
+        <Dot up aria-label='New'>
+          1
+        </Dot>
+      </Button>
+    </Flex>
+  );
+}
diff --git a/stories/components/dot/tests/dot.stories.tsx b/stories/components/dot/tests/dot.stories.tsx
index 1267fcad73..74cd1c15d4 100644
--- a/stories/components/dot/tests/dot.stories.tsx
+++ b/stories/components/dot/tests/dot.stories.tsx
@@ -12,6 +12,7 @@ const meta: Meta<typeof Dot> = {
 };
 
 export default meta;
+
 const commonArgTypes = {
   size: {
     control: { type: 'select' },
diff --git a/stories/components/icon/advanced/Icon.stories.tsx b/stories/components/icon/advanced/Icon.stories.tsx
new file mode 100644
index 0000000000..a325ae4fda
--- /dev/null
+++ b/stories/components/icon/advanced/Icon.stories.tsx
@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import IconWithAllColorsExample from './examples/icon-all-colors';
+
+const meta: Meta = {
+  title: 'Components/Icon/Advanced',
+};
+
+export default meta;
+
+export const IconWithAllColors: StoryObj = {
+  name: 'Icon with all colors',
+  render: IconWithAllColorsExample,
+};
diff --git a/stories/components/icon/advanced/examples/icon-all-colors.tsx b/stories/components/icon/advanced/examples/icon-all-colors.tsx
new file mode 100644
index 0000000000..887aec79ed
--- /dev/null
+++ b/stories/components/icon/advanced/examples/icon-all-colors.tsx
@@ -0,0 +1,99 @@
+import MathPlusM from '@semcore/icon/MathPlus/m';
+import Warning from '@semcore/icon/Warning/m';
+import { Box, Flex } from '@semcore/ui/base-components';
+import { Text } from '@semcore/ui/typography';
+import React from 'react';
+
+const INTERGALACTIC_ICON_PRIMARY_VARS = [
+  '--intergalactic-icon-primary-neutral',
+  '--intergalactic-icon-primary-neutral-hover-active',
+  '--intergalactic-icon-primary-info',
+  '--intergalactic-icon-primary-info-hover-active',
+  '--intergalactic-icon-primary-success',
+  '--intergalactic-icon-primary-success-hover-active',
+  '--intergalactic-icon-primary-critical',
+  '--intergalactic-icon-primary-critical-hover-active',
+  '--intergalactic-icon-primary-warning',
+  '--intergalactic-icon-primary-warning-hover-active',
+  '--intergalactic-icon-primary-invert',
+  '--intergalactic-icon-primary-invert-hover-active',
+] as const;
+
+const INTERGALACTIC_ICON_SECONDARY_VARS = [
+  '--intergalactic-icon-secondary-neutral',
+  '--intergalactic-icon-secondary-neutral-hover-active',
+  '--intergalactic-icon-secondary-info',
+  '--intergalactic-icon-secondary-info-hover-active',
+  '--intergalactic-icon-secondary-success',
+  '--intergalactic-icon-secondary-success-hover-active',
+  '--intergalactic-icon-secondary-critical',
+  '--intergalactic-icon-secondary-critical-hover-active',
+  '--intergalactic-icon-secondary-warning',
+  '--intergalactic-icon-secondary-warning-hover-active',
+  '--intergalactic-icon-non-interactive',
+] as const;
+
+function IconThemeSwatch({ token }: { token: string }) {
+  const invert = token.includes('icon-primary-invert');
+  return (
+    <Flex direction='column' gap={1} alignItems='center' style={{ minWidth: 72, display: 'inline-flex' }}>
+      <Box
+        p={2}
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          borderRadius: 'var(--intergalactic-rounded-medium, 6px)',
+          background: invert ? 'var(--gray-800)' : 'var(--intergalactic-bg-primary-neutral)',
+          color: `var(${token})`,
+        }}
+        title={token}
+      >
+        <MathPlusM />
+      </Box>
+      <Text
+        size={100}
+        color='text-secondary'
+        style={{
+          maxWidth: 120,
+          textAlign: 'center',
+          wordBreak: 'break-word',
+          lineHeight: 1.2,
+        }}
+      >
+        {token.replace(/^--intergalactic-/, '')}
+      </Text>
+    </Flex>
+  );
+}
+
+const Demo = () => (
+  <Flex direction='column' gap={6} mb={10} w='100%'>
+    <Flex gap={6} alignItems='center' flexWrap>
+      <Flex gap={2} alignItems='center'>
+        <Warning color='--intergalactic-icon-primary-critical' aria-label='icon-primary-critical' />
+        <Text color='text-critical' size={200} tag='span'>
+          icon-primary-critical
+        </Text>
+      </Flex>
+      <Flex gap={2} alignItems='center'>
+        <Warning color='--intergalactic-icon-primary-warning' aria-label='icon-primary-warning' />
+        <Text color='orange-300' size={200} tag='span'>
+          icon-primary-warning
+        </Text>
+      </Flex>
+    </Flex>
+    <Flex gap={4} flexWrap alignItems='flex-start'>
+      {INTERGALACTIC_ICON_PRIMARY_VARS.map((token) => (
+        <IconThemeSwatch key={token} token={token} />
+      ))}
+    </Flex>
+    <Flex gap={4} flexWrap alignItems='flex-start'>
+      {INTERGALACTIC_ICON_SECONDARY_VARS.map((token) => (
+        <IconThemeSwatch key={token} token={token} />
+      ))}
+    </Flex>
+  </Flex>
+);
+
+export default Demo;
diff --git a/stories/components/input-number/docs/examples/range_of_values.tsx b/stories/components/input-number/docs/examples/range_of_values.tsx
index 9dcf082649..83e70f19f2 100644
--- a/stories/components/input-number/docs/examples/range_of_values.tsx
+++ b/stories/components/input-number/docs/examples/range_of_values.tsx
@@ -16,7 +16,7 @@ const Demo = () => {
   }, [from, to]);
 
   return (
-    <>
+    <Flex direction='column' gap={2}>
       <Text tag='p' size={200}>
         <Text tag='label' htmlFor='basic-example-from'>
           From
@@ -26,7 +26,7 @@ const Demo = () => {
           To
         </Text>
       </Text>
-      <Flex w='20%' mt={2}>
+      <Flex w='20%'>
         <InputNumber neighborLocation='right'>
           <InputNumber.Value
             min={min}
@@ -52,7 +52,7 @@ const Demo = () => {
           <InputNumber.Controls />
         </InputNumber>
       </Flex>
-    </>
+    </Flex>
   );
 };
 
diff --git a/stories/components/input-tags/docs/examples/entering_and_editing_tags.tsx b/stories/components/input-tags/docs/examples/entering_and_editing_tags.tsx
index ff72624803..effaa4cdb7 100644
--- a/stories/components/input-tags/docs/examples/entering_and_editing_tags.tsx
+++ b/stories/components/input-tags/docs/examples/entering_and_editing_tags.tsx
@@ -68,7 +68,7 @@ const Demo = (props: ExampleInputTagsProps) => {
 
   return (
     <Flex direction='column'>
-      <Text tag='label' size={300} htmlFor='add-new-social-media'>
+      <Text tag='label' size={200} htmlFor='add-new-social-media'>
         Social media
       </Text>
       <InputTags mt={2} size={props.size} state={props.state} delimiters={props.delimiters} onAppend={handleAppendTags} onRemove={handleRemoveTag}>
diff --git a/stories/components/link/docs/examples/link_in_content.tsx b/stories/components/link/docs/examples/link_in_content.tsx
index 4ab9ca9eb2..f72908aaed 100644
--- a/stories/components/link/docs/examples/link_in_content.tsx
+++ b/stories/components/link/docs/examples/link_in_content.tsx
@@ -1,12 +1,13 @@
 import LinkExternalM from '@semcore/icon/LinkExternal/m';
+import { Flex } from '@semcore/ui/base-components';
 import Link from '@semcore/ui/link';
 import { Text, List } from '@semcore/ui/typography';
 import React from 'react';
 
 const Demo = () => {
   return (
-    <>
-      <Text size={300} mt={3} tag='p'>
+    <Flex direction='column' gap={3}>
+      <Text size={300} tag='p'>
         The Intergalactic Design System
         {' '}
         <Link href='https://developer.semrush.com/intergalactic/components/link/link-api' enableVisited>
@@ -20,7 +21,7 @@ const Demo = () => {
         </Link>
         .
       </Text>
-      <Text size={300} mt={3} tag='p'>
+      <Text size={300} tag='p'>
         Aliens from distant galaxies use it to
         {' '}
         <Link href='#'>
@@ -29,7 +30,7 @@ const Demo = () => {
         {' '}
         that are so user-friendly, even a space-faring cat with paws can navigate them.
       </Text>
-      <Text size={300} mt={3} tag='p'>Look at these:</Text>
+      <Text size={300} tag='p'>Look at these:</Text>
       <List size={300} w={300}>
         <List.Item>
           <Link href='#'>
@@ -43,7 +44,7 @@ const Demo = () => {
           </Link>
         </List.Item>
       </List>
-    </>
+    </Flex>
   );
 };
 
diff --git a/stories/components/link/tests/examples/basic_usage.tsx b/stories/components/link/tests/examples/basic_usage.tsx
index 82cadde130..b0901dc023 100644
--- a/stories/components/link/tests/examples/basic_usage.tsx
+++ b/stories/components/link/tests/examples/basic_usage.tsx
@@ -3,7 +3,7 @@ import MathPlusAltM from '@semcore/icon/MathPlusAlt/m';
 import Badge from '@semcore/ui/badge';
 import Counter, { type CounterProps } from '@semcore/ui/counter';
 import Link, { type LinkProps } from '@semcore/ui/link';
-import Spin, { type SpinSize } from '@semcore/ui/spin';
+import Spin, { type NSSpin } from '@semcore/ui/spin';
 import type { NSText } from '@semcore/ui/typography';
 import { Text } from '@semcore/ui/typography';
 import React from 'react';
@@ -50,7 +50,7 @@ const Demo = (props: BasicLinkProps) => {
   const numSize = Number(size);
   const IconAddon = numSize < 600 ? MathPlusAltM : MathPlusAltL;
 
-  let spinSize: SpinSize = 'm';
+  let spinSize: NSSpin.Size = 'm';
   if (numSize <= 200) {
     spinSize = 'xs';
   } else if (numSize <= 500) {
diff --git a/stories/components/link/tests/examples/link-different-sizes.tsx b/stories/components/link/tests/examples/link-different-sizes.tsx
index f75e7facda..ccaf92cf92 100644
--- a/stories/components/link/tests/examples/link-different-sizes.tsx
+++ b/stories/components/link/tests/examples/link-different-sizes.tsx
@@ -3,7 +3,7 @@ import MathPlusAltM from '@semcore/icon/MathPlusAlt/m';
 import Badge from '@semcore/ui/badge';
 import Counter, { type CounterProps } from '@semcore/ui/counter';
 import Link from '@semcore/ui/link';
-import Spin, { type SpinSize } from '@semcore/ui/spin';
+import Spin, { type NSSpin } from '@semcore/ui/spin';
 import { Text } from '@semcore/ui/typography';
 import React from 'react';
 
@@ -24,7 +24,7 @@ const Demo = (props: LinkSizesProps) => {
   return (
     <>
       {sizes.map((size) => {
-        let spinSize: SpinSize = 'm';
+        let spinSize: NSSpin.Size = 'm';
         if (size <= 200) {
           spinSize = 'xs';
         } else if (size <= 500) {
diff --git a/stories/components/notice/advanced/Notice.stories.tsx b/stories/components/notice/advanced/Notice.stories.tsx
new file mode 100644
index 0000000000..d0deab35a2
--- /dev/null
+++ b/stories/components/notice/advanced/Notice.stories.tsx
@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import NoticeOnSecondaryBackgroundExample from './examples/notice-on-secondary-background';
+
+const meta: Meta = {
+  title: 'Components/Notice/Advanced',
+};
+
+export default meta;
+
+export const NoticeOnSecondaryBackground: StoryObj = {
+  name: 'Notice On Secondary Background',
+  render: NoticeOnSecondaryBackgroundExample,
+};
diff --git a/stories/components/notice/advanced/examples/notice-on-secondary-background.tsx b/stories/components/notice/advanced/examples/notice-on-secondary-background.tsx
new file mode 100644
index 0000000000..4c4640c027
--- /dev/null
+++ b/stories/components/notice/advanced/examples/notice-on-secondary-background.tsx
@@ -0,0 +1,33 @@
+import { Box, Flex } from '@semcore/ui/base-components';
+import Notice from '@semcore/ui/notice';
+import React from 'react';
+
+export default function NoticeOnSecondaryBackground() {
+  return (
+    <Box
+      p={4}
+      style={{
+        background: 'var(--intergalactic-bg-secondary-neutral)',
+      }}
+    >
+      <Flex gap={4} flexWrap direction='column' alignItems='stretch'>
+        {(['info', 'warning', 'danger', 'success', 'muted'] as const).map((theme) => (
+          <Notice
+            key={theme}
+            aria-label={`${theme} notice`}
+            theme={theme}
+            wMax={400}
+          >
+            <Notice.Content>
+              <Notice.Title>
+                {theme.charAt(0).toUpperCase() + theme.slice(1)} notice
+              </Notice.Title>
+              <Notice.Text>Short message for theme playground.</Notice.Text>
+            </Notice.Content>
+            <Notice.Close />
+          </Notice>
+        ))}
+      </Flex>
+    </Box>
+  );
+}
diff --git a/stories/components/product-head/docs/examples/extended_example/index.tsx b/stories/components/product-head/docs/examples/extended_example/index.tsx
index 77dc5dc548..12cdff2b8f 100644
--- a/stories/components/product-head/docs/examples/extended_example/index.tsx
+++ b/stories/components/product-head/docs/examples/extended_example/index.tsx
@@ -10,9 +10,11 @@ import Breadcrumbs from '@semcore/ui/breadcrumbs';
 import Button, { ButtonLink } from '@semcore/ui/button';
 import DropdownMenu from '@semcore/ui/dropdown-menu';
 import Link from '@semcore/ui/link';
+import Modal from '@semcore/ui/modal';
 import Header, { Info, Title } from '@semcore/ui/product-head';
 import Select from '@semcore/ui/select';
 import { DescriptionTooltip } from '@semcore/ui/tooltip';
+import { Text } from '@semcore/ui/typography';
 import React from 'react';
 
 import { AddProjectWizard } from './AddProjectWizard';
@@ -20,6 +22,14 @@ import { CountrySelect } from './CountrySelect';
 import { EditableName } from './EditableName';
 
 const Demo = () => {
+  const [visible, setVisible] = React.useState(false);
+  const [secondVisible, setSecondVisible] = React.useState(false);
+
+  const handleClose = () => setVisible(false);
+  const handleSecondClose = () => setSecondVisible(false);
+
+  const openSettingsModal = () => setVisible(true);
+
   return (
     <>
       <Header>
@@ -33,8 +43,8 @@ const Demo = () => {
           </Breadcrumbs>
 
           <Header.Links>
-            <ButtonLink addonLeft={Chat}>Feedback</ButtonLink>
             <Link href='#' addonLeft={BookM}>User manual</Link>
+            <ButtonLink addonLeft={Chat}>Feedback</ButtonLink>
           </Header.Links>
         </Header.Row>
 
@@ -48,15 +58,15 @@ const Demo = () => {
 
             <DropdownMenu>
               <DropdownMenu.Trigger tag={Button} addonLeft={SettingsM}>Settings</DropdownMenu.Trigger>
-              <DropdownMenu.Menu w={160}>
-                <DropdownMenu.Item>Menu item 1</DropdownMenu.Item>
-                <DropdownMenu.Item>Menu item 2</DropdownMenu.Item>
+              <DropdownMenu.Menu w={200}>
+                <DropdownMenu.Item onClick={openSettingsModal}>Open Modal</DropdownMenu.Item>
+                <DropdownMenu.Item onClick={openSettingsModal}>Open Modal one more time</DropdownMenu.Item>
 
                 <DropdownMenu.Item>
                   <DropdownMenu inlineActions placement='right'>
                     <Flex justifyContent='space-between' gap={3}>
                       <DropdownMenu.Item.Content tag={DropdownMenu.Trigger}>
-                        Menu item 3
+                        Open again?
                       </DropdownMenu.Item.Content>
                       <DropdownMenu.Actions gap={1}>
                         <DropdownMenu.Item tag={Button} addonLeft={MathPlus} title='Add new' />
@@ -73,12 +83,12 @@ const Demo = () => {
                     offset={[-11, 12]}
                   >
                     <DropdownMenu.Item.Content tag={DropdownMenu.Trigger}>
-                      Menu item 4
+                      Static menu item. Nothing will happen.
                       <ChevronRight color='icon-secondary-neutral' />
                     </DropdownMenu.Item.Content>
                     <DropdownMenu.Menu>
-                      <DropdownMenu.Item>Add</DropdownMenu.Item>
-                      <DropdownMenu.Item>Delete</DropdownMenu.Item>
+                      <DropdownMenu.Item>Okay. Got it!</DropdownMenu.Item>
+                      <DropdownMenu.Item>Oh no</DropdownMenu.Item>
                     </DropdownMenu.Menu>
                   </DropdownMenu>
                 </DropdownMenu.Item>
@@ -126,6 +136,26 @@ const Demo = () => {
           </Info>
         </Header.Row>
       </Header>
+
+      <Modal visible={visible} onClose={handleClose}>
+        <Text size={200} mb={3} tag='p'>
+          Open one more window
+        </Text>
+        <Button use='primary' onClick={() => setSecondVisible(true)}>
+          Open modal
+        </Button>
+      </Modal>
+      <Modal visible={secondVisible} onClose={handleSecondClose}>
+        <Text size={200} mb={3} tag='p'>
+          Your changes will be lost if you don't save them.
+        </Text>
+        <Button use='primary' theme='success' onClick={handleSecondClose}>
+          Save changes
+        </Button>
+        <Button ml={2} onClick={handleSecondClose}>
+          Cancel
+        </Button>
+      </Modal>
     </>
   );
 };
diff --git a/stories/components/progress-bar/advanced/examples/all_themes.tsx b/stories/components/progress-bar/advanced/examples/all_themes.tsx
new file mode 100644
index 0000000000..5a51566c4c
--- /dev/null
+++ b/stories/components/progress-bar/advanced/examples/all_themes.tsx
@@ -0,0 +1,52 @@
+import { Box, Flex } from '@semcore/ui/base-components';
+import ProgressBar from '@semcore/ui/progress-bar';
+import React from 'react';
+
+export default function AllThemes() {
+  return (
+    <Flex direction='column' gap={6}>
+      <Flex gap={6} flexWrap alignItems='flex-start' direction='column'>
+        <Box w={240}>
+          <ProgressBar value={0} aria-label='Progress 0%' />
+        </Box>
+        <Box w={240}>
+          <ProgressBar value={40} aria-label='Progress 40%' />
+        </Box>
+        <Box w={240}>
+          <ProgressBar value={100} aria-label='Progress 100%' />
+        </Box>
+      </Flex>
+      <Box
+        p={4}
+        style={{
+          background: 'var(--intergalactic-bg-primary-invert)',
+          borderRadius: 'var(--intergalactic-surface-rounded, 6px)',
+        }}
+      >
+        <Flex gap={6} flexWrap alignItems='flex-start' direction='column'>
+          <Box w={240}>
+            <ProgressBar
+              theme='dark'
+              value={0}
+              aria-label='Progress 0%, dark theme on dark background'
+            />
+          </Box>
+          <Box w={240}>
+            <ProgressBar
+              theme='dark'
+              value={40}
+              aria-label='Progress 40%, dark theme on dark background'
+            />
+          </Box>
+          <Box w={240}>
+            <ProgressBar
+              theme='dark'
+              value={100}
+              aria-label='Progress 100%, dark theme on dark background'
+            />
+          </Box>
+        </Flex>
+      </Box>
+    </Flex>
+  );
+}
diff --git a/stories/components/progress-bar/advanced/progress-bar.stories.tsx b/stories/components/progress-bar/advanced/progress-bar.stories.tsx
index 601b0314bd..fd7a4ae37c 100644
--- a/stories/components/progress-bar/advanced/progress-bar.stories.tsx
+++ b/stories/components/progress-bar/advanced/progress-bar.stories.tsx
@@ -1,6 +1,7 @@
 import ProgressBar from '@semcore/ui/progress-bar';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
+import AllThemesExample from './examples/all_themes';
 import ComplexUsageExample from './examples/complex_usage_example';
 
 const meta: Meta<typeof ProgressBar> = {
@@ -11,6 +12,11 @@ const meta: Meta<typeof ProgressBar> = {
 export default meta;
 type Story = StoryObj<typeof ProgressBar>;
 
+export const all_themes: Story = {
+  name: 'All themes',
+  render: AllThemesExample,
+};
+
 export const ComplexUsage: Story = {
   render: ComplexUsageExample,
 };
diff --git a/stories/components/skeleton/advanced/examples/all-skeleton.tsx b/stories/components/skeleton/advanced/examples/all-skeleton.tsx
new file mode 100644
index 0000000000..ddd99e9488
--- /dev/null
+++ b/stories/components/skeleton/advanced/examples/all-skeleton.tsx
@@ -0,0 +1,26 @@
+import { Box, Flex } from '@semcore/ui/base-components';
+import Skeleton from '@semcore/ui/skeleton';
+import React from 'react';
+
+export default function AllSkeleton() {
+  return (
+    <Flex gap={8} flexWrap alignItems='flex-start'>
+      <Skeleton h={48} w={200}>
+        <Skeleton.Text amount={2} />
+        <Skeleton.Text w='60%' />
+      </Skeleton>
+      <Box
+        p={4}
+        style={{
+          background: 'var(--intergalactic-bg-primary-invert)',
+          borderRadius: 'var(--intergalactic-surface-rounded, 6px)',
+        }}
+      >
+        <Skeleton h={48} w={200} theme='invert'>
+          <Skeleton.Text amount={2} />
+          <Skeleton.Text w='60%' />
+        </Skeleton>
+      </Box>
+    </Flex>
+  );
+}
diff --git a/stories/components/skeleton/advanced/skeleton.stories.tsx b/stories/components/skeleton/advanced/skeleton.stories.tsx
new file mode 100644
index 0000000000..3cc486a87f
--- /dev/null
+++ b/stories/components/skeleton/advanced/skeleton.stories.tsx
@@ -0,0 +1,18 @@
+import Skeleton from '@semcore/ui/skeleton';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import AllSkeletonExample from './examples/all-skeleton';
+
+const meta: Meta<typeof Skeleton> = {
+  title: 'Components/Skeleton/Advanced',
+  component: Skeleton,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Skeleton>;
+
+export const AllSkeleton: Story = {
+  name: 'All Skeleton',
+  render: AllSkeletonExample,
+};
diff --git a/stories/components/slider/docs/examples/numeric_slider.tsx b/stories/components/slider/docs/examples/numeric_slider.tsx
index e3c6954f6c..91b7d9a729 100644
--- a/stories/components/slider/docs/examples/numeric_slider.tsx
+++ b/stories/components/slider/docs/examples/numeric_slider.tsx
@@ -33,7 +33,7 @@ const Demo = () => {
 
   return (
     <Flex direction='column'>
-      <Text tag='label' size={200} htmlFor='slider-represantation'>
+      <Text tag='label' size={200} htmlFor='slider-represantation' mb={2}>
         Slider representation
       </Text>
       <Box w={140}>
diff --git a/stories/components/slider/docs/examples/slider_with_options.tsx b/stories/components/slider/docs/examples/slider_with_options.tsx
index 2a3fa0364c..2313ea8400 100644
--- a/stories/components/slider/docs/examples/slider_with_options.tsx
+++ b/stories/components/slider/docs/examples/slider_with_options.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@semcore/ui/base-components';
+import { Flex } from '@semcore/ui/base-components';
 import Slider from '@semcore/ui/slider';
 import { Text } from '@semcore/ui/typography';
 import React from 'react';
@@ -6,26 +6,24 @@ import React from 'react';
 const Demo = () => {
   const [value, setValue] = React.useState('medium');
   return (
-    <>
+    <Flex direction='column' gap={2} alignItems='flex-start'>
       <Text tag='label' size={200} htmlFor='data-chunk-size'>
         Data chunk size
       </Text>
-      <Box mt={2}>
-        <Slider
-          value={value}
-          onChange={setValue}
-          step={1}
-          min={1}
-          max={3}
-          id='data-chunk-size'
-          options={[
-            { value: 'small', label: 'Small' },
-            { value: 'medium', label: 'Medium' },
-            { value: 'big', label: 'Big' },
-          ]}
-        />
-      </Box>
-    </>
+      <Slider
+        value={value}
+        onChange={setValue}
+        step={1}
+        min={1}
+        max={3}
+        id='data-chunk-size'
+        options={[
+          { value: 'small', label: 'Small' },
+          { value: 'medium', label: 'Medium' },
+          { value: 'big', label: 'Big' },
+        ]}
+      />
+    </Flex>
   );
 };
 
diff --git a/stories/components/spin/advanced/examples/all-sizes.tsx b/stories/components/spin/advanced/examples/all-sizes.tsx
new file mode 100644
index 0000000000..3cf4e0a9ce
--- /dev/null
+++ b/stories/components/spin/advanced/examples/all-sizes.tsx
@@ -0,0 +1,42 @@
+import { Box, Flex } from '@semcore/ui/base-components';
+import Spin from '@semcore/ui/spin';
+import React from 'react';
+
+export default function AllSizes() {
+  return (
+    <Flex gap={8} alignItems='flex-start'>
+      <Flex direction='column' gap={6}>
+        <Flex gap={8} flexWrap alignItems='center'>
+          <Spin size='xs' />
+          <Spin size='s' />
+          <Spin />
+        </Flex>
+        <Flex gap={8} flexWrap alignItems='center'>
+          <Spin size='l' />
+          <Spin size='xl' />
+          <Spin size='xxl' />
+        </Flex>
+      </Flex>
+      <Box
+        p={4}
+        style={{
+          background: 'var(--intergalactic-bg-primary-invert)',
+          borderRadius: 'var(--intergalactic-surface-rounded, 6px)',
+        }}
+      >
+        <Flex direction='column' gap={6}>
+          <Flex gap={8} flexWrap alignItems='center'>
+            <Spin size='xs' theme='invert' />
+            <Spin size='s' theme='invert' />
+            <Spin theme='invert' />
+          </Flex>
+          <Flex gap={8} flexWrap alignItems='center'>
+            <Spin size='l' theme='invert' />
+            <Spin size='xl' theme='invert' />
+            <Spin size='xxl' theme='invert' />
+          </Flex>
+        </Flex>
+      </Box>
+    </Flex>
+  );
+}
diff --git a/stories/components/spin/advanced/spin.stories.tsx b/stories/components/spin/advanced/spin.stories.tsx
new file mode 100644
index 0000000000..195c7f99fe
--- /dev/null
+++ b/stories/components/spin/advanced/spin.stories.tsx
@@ -0,0 +1,18 @@
+import Spin from '@semcore/ui/spin';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import AllSizesExample from './examples/all-sizes';
+
+const meta: Meta<typeof Spin> = {
+  title: 'Components/Spin/Advanced',
+  component: Spin,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Spin>;
+
+export const AllSizes: Story = {
+  name: 'All Sizes',
+  render: AllSizesExample,
+};
diff --git a/stories/components/tag/advanced/Tag.stories.tsx b/stories/components/tag/advanced/Tag.stories.tsx
index f68773aefb..2096d346fb 100644
--- a/stories/components/tag/advanced/Tag.stories.tsx
+++ b/stories/components/tag/advanced/Tag.stories.tsx
@@ -1,6 +1,7 @@
 import Tag from '@semcore/ui/tag';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
+import AllTagsExample from './examples/all-tags';
 import TagContainerAddonExample from './examples/tag_container_addon';
 
 const meta: Meta<typeof Tag> = {
@@ -11,6 +12,11 @@ const meta: Meta<typeof Tag> = {
 export default meta;
 type Story = StoryObj<typeof Tag>;
 
+export const AllTags: Story = {
+  name: 'All Tags',
+  render: AllTagsExample,
+};
+
 export const TagContainerAddon: Story = {
   render: TagContainerAddonExample,
 };
diff --git a/stories/components/tag/advanced/examples/all-tags.tsx b/stories/components/tag/advanced/examples/all-tags.tsx
new file mode 100644
index 0000000000..a21bceacc2
--- /dev/null
+++ b/stories/components/tag/advanced/examples/all-tags.tsx
@@ -0,0 +1,66 @@
+import MathPlusM from '@semcore/icon/MathPlus/m';
+import { Flex } from '@semcore/ui/base-components';
+import Tag, { TagContainer } from '@semcore/ui/tag';
+import React from 'react';
+
+const COLORS = [
+  'gray',
+  'blue',
+  'green',
+  'red',
+  'orange',
+  'yellow',
+  'violet',
+  'pink',
+  'salad',
+] as const;
+
+const SIZES = ['m', 'l', 'xl'] as const;
+
+export default function AllTags() {
+  return (
+    <Flex direction='column' gap={4}>
+      <Flex gap={2} flexWrap alignItems='center'>
+        <Tag>
+          <Tag.Text>Primary</Tag.Text>
+        </Tag>
+        <Tag theme='secondary'>
+          <Tag.Text>Secondary</Tag.Text>
+        </Tag>
+        <Tag theme='additional' addonLeft={MathPlusM}>
+          <Tag.Text>Additional</Tag.Text>
+        </Tag>
+        <Tag disabled>
+          <Tag.Text>Disabled</Tag.Text>
+        </Tag>
+      </Flex>
+      {SIZES.map((size) => (
+        <Flex key={size} gap={2} flexWrap alignItems='center'>
+          {COLORS.map((color) => (
+            <Tag key={`${size}-${color}`} theme='primary' color={`${color}-500`} size={size}>
+              <Tag.Text>{color}</Tag.Text>
+            </Tag>
+          ))}
+        </Flex>
+      ))}
+      {SIZES.map((size) => (
+        <Flex key={`closable-${size}`} gap={2} flexWrap alignItems='center'>
+          {COLORS.map((color) => (
+            <TagContainer
+              key={`${size}-${color}-closable`}
+              theme='primary'
+              color={`${color}-500`}
+              size={size}
+              interactive
+            >
+              <TagContainer.Tag>
+                <TagContainer.Tag.Text>{color}</TagContainer.Tag.Text>
+              </TagContainer.Tag>
+              <TagContainer.Close />
+            </TagContainer>
+          ))}
+        </Flex>
+      ))}
+    </Flex>
+  );
+}
diff --git a/stories/components/time-picker/docs/examples/expanded_access_to_all_the_components.tsx b/stories/components/time-picker/docs/examples/expanded_access_to_all_the_components.tsx
index 649dcda190..6bea0bfdef 100644
--- a/stories/components/time-picker/docs/examples/expanded_access_to_all_the_components.tsx
+++ b/stories/components/time-picker/docs/examples/expanded_access_to_all_the_components.tsx
@@ -1,23 +1,21 @@
-import { Box } from '@semcore/ui/base-components';
+import { Flex } from '@semcore/ui/base-components';
 import TimePicker from '@semcore/ui/time-picker';
 import { Text } from '@semcore/ui/typography';
 import React from 'react';
 
 const Demo = () => {
   return (
-    <>
+    <Flex direction='column' gap={2} alignItems='flex-start'>
       <Text tag='label' htmlFor='time-picker' size={200}>
         Start time
       </Text>
-      <Box mt={2}>
-        <TimePicker is12Hour id='time-picker'>
-          <TimePicker.Hours />
-          <TimePicker.Separator />
-          <TimePicker.Minutes />
-          <TimePicker.Format />
-        </TimePicker>
-      </Box>
-    </>
+      <TimePicker is12Hour id='time-picker'>
+        <TimePicker.Hours />
+        <TimePicker.Separator />
+        <TimePicker.Minutes />
+        <TimePicker.Format />
+      </TimePicker>
+    </Flex>
   );
 };
 
diff --git a/stories/patterns/core/advanced/all-components.stories.tsx b/stories/patterns/core/advanced/all-components.stories.tsx
new file mode 100644
index 0000000000..ae58675ca6
--- /dev/null
+++ b/stories/patterns/core/advanced/all-components.stories.tsx
@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import AllComponentsExample from './all-components';
+
+const meta: Meta = {
+  title: 'Patterns/Core/Advanced',
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const AllComponents: Story = {
+  render: AllComponentsExample,
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
diff --git a/stories/patterns/core/advanced/all-components.tsx b/stories/patterns/core/advanced/all-components.tsx
new file mode 100644
index 0000000000..af7cb5a78f
--- /dev/null
+++ b/stories/patterns/core/advanced/all-components.tsx
@@ -0,0 +1,47 @@
+import Badge from '@semcore/ui/badge';
+import { Box } from '@semcore/ui/base-components';
+import TabLine from '@semcore/ui/tab-line';
+import React from 'react';
+
+import { Components } from './components/Components';
+import { Graphics } from './components/Graphics';
+import { PopupsDialogs } from './components/PopupsDialogs';
+import PageHeader from '../../../components/product-head/docs/examples/extended_example';
+import { Dashboard } from '../tests/all-components/components/Dashboard';
+
+function Demo({ defaultTab = 1 }: { defaultTab?: number }) {
+  const [tab, setTab] = React.useState(defaultTab);
+
+  return (
+    <Box w='calc(100vw - 64px)' style={{ background: 'var(--intergalactic-bg-secondary-neutral)' }} p={8}>
+      <PageHeader />
+
+      <TabLine size='l' mx={-8} px={8} mt={8} value={tab} onChange={setTab}>
+        <TabLine.Item value={1}>
+          <TabLine.Item.Text>
+            Dashboard
+          </TabLine.Item.Text>
+          <TabLine.Item.Addon>
+            <Badge type='new' />
+          </TabLine.Item.Addon>
+        </TabLine.Item>
+        <TabLine.Item value={2}>
+          Components
+        </TabLine.Item>
+        <TabLine.Item value={3}>
+          Popups & Dialogs
+        </TabLine.Item>
+        <TabLine.Item value={4}>
+          Graphics
+        </TabLine.Item>
+      </TabLine>
+
+      {tab === 1 && <Dashboard showPrimaryTableFooter />}
+      {tab === 2 && <Components />}
+      {tab === 3 && <PopupsDialogs />}
+      {tab === 4 && <Graphics />}
+    </Box>
+  );
+}
+
+export default Demo;
diff --git a/stories/patterns/core/advanced/components/Components/index.tsx b/stories/patterns/core/advanced/components/Components/index.tsx
new file mode 100644
index 0000000000..f0961acfee
--- /dev/null
+++ b/stories/patterns/core/advanced/components/Components/index.tsx
@@ -0,0 +1,131 @@
+import { Box, Flex } from '@semcore/ui/base-components';
+import Card from '@semcore/ui/card';
+import Divider from '@semcore/ui/divider';
+import { Text } from '@semcore/ui/typography';
+import React from 'react';
+
+import HeadingTagAccordion from '../../../../../components/accordion/docs/examples/heading_tag';
+import NonCompactAccordion from '../../../../../components/accordion/docs/examples/non_compact';
+import BadgeMainTypesExample from '../../../../../components/badge/docs/examples/badge_main_types';
+import BreadcrumbsUsageExample from '../../../../../components/breadcrumbs/docs/examples/usage_example';
+import ButtonAllButtons from '../../../../../components/button/advanced/examples/all-buttons';
+import CardWithHoverExample from '../../../../../components/card/advanced/examples/card-with-hover';
+import Checkboxes from '../../../../../components/checkbox/docs/examples/basic_usage';
+import ColorPicker from '../../../../../components/color-picker/docs/examples/palettemanager';
+import CounterAllThemesExample from '../../../../../components/counter/advanced/examples/all-themes';
+import CounterInFiltersExample from '../../../../../components/counter/docs/examples/counter_in_filters';
+import DatePickerDemo from '../../../../../components/date-picker/docs/examples/datepicker';
+import DividerAllThemesExample from '../../../../../components/divider/advanced/examples/all-themes';
+import DotAllDotsExample from '../../../../../components/dot/advanced/examples/all-dots';
+import InlineNumberInput from '../../../../../components/inline-input/docs/examples/number-only_input';
+import InputClear from '../../../../../components/input/docs/examples/input_with_the_clearing_ability';
+import InputNumberDemo from '../../../../../components/input-number/docs/examples/range_of_values';
+import InputTags from '../../../../../components/input-tags/docs/examples/entering_and_editing_tags';
+import LinkColorLinksExample from '../../../../../components/link/docs/examples/color_links';
+import BasicNoticeExample from '../../../../../components/notice/docs/examples/basic_notice';
+import PillsBasicExample, {
+  defaultProps as pillsBasicExampleDefaultProps,
+} from '../../../../../components/pills/docs/examples/basic_example';
+import ProgressBarAllThemesExample from '../../../../../components/progress-bar/advanced/examples/all_themes';
+import Radio from '../../../../../components/radio/docs/examples/radiogroup_example';
+import SelectBasic from '../../../../../components/select/docs/examples/basic_usage';
+import Multiselect from '../../../../../components/select/docs/examples/multiselect';
+import SkeletonAllSkeletonExample from '../../../../../components/skeleton/advanced/examples/all-skeleton';
+import Slider2 from '../../../../../components/slider/docs/examples/numeric_slider';
+import Slider1 from '../../../../../components/slider/docs/examples/slider_with_options';
+import SpinAllSizesExample from '../../../../../components/spin/advanced/examples/all-sizes';
+import Switch from '../../../../../components/switch/docs/examples/basic_example';
+import TagAllTagsExample from '../../../../../components/tag/advanced/examples/all-tags';
+import Textarea from '../../../../../components/textarea/docs/examples/textarea_with_auto_height';
+import TimePickerDemo from '../../../../../components/time-picker/docs/examples/expanded_access_to_all_the_components';
+import WidgetEmpty from '../../../../../components/widget-empty/docs/examples/nodata_example';
+
+export function Components() {
+  return (
+    <Flex mt={4} gap={4} alignItems='flex-start' w='100%'>
+      <Flex direction='column' gap={4} w='35%'>
+        <Card w='100%'>
+          <Card.Header>
+            <Card.Title innerHint='Something'>Form</Card.Title>
+          </Card.Header>
+          <Card.Body tag={Flex} direction='column' gap={6}>
+            <SelectBasic />
+            <Multiselect />
+            <DatePickerDemo />
+            <TimePickerDemo />
+            <InputClear />
+            <Textarea />
+            <InputTags size='m' />
+            <InputNumberDemo />
+            <InlineNumberInput />
+            <Divider my={4} />
+            <Checkboxes />
+            <Radio />
+            <Switch />
+            <ColorPicker />
+            <Slider1 />
+            <Slider2 />
+          </Card.Body>
+        </Card>
+
+        <Card w='100%'>
+          <Card.Header>
+            <Card.Title>Controls</Card.Title>
+          </Card.Header>
+          <Card.Body tag={Flex} direction='column' gap={8}>
+            <ButtonAllButtons />
+            <LinkColorLinksExample />
+            <BreadcrumbsUsageExample />
+            <PillsBasicExample {...pillsBasicExampleDefaultProps} />
+          </Card.Body>
+        </Card>
+      </Flex>
+
+      <Flex direction='column' gap={4} w='calc(65% - 16px)'>
+        <Card w='100%'>
+          <Card.Header>
+            <Card.Title>Status</Card.Title>
+          </Card.Header>
+          <Card.Body tag={Flex} direction='column' gap={8}>
+            <DotAllDotsExample />
+            <BadgeMainTypesExample />
+            <CounterAllThemesExample />
+            <Flex w='fit-content'>
+              <CounterInFiltersExample />
+            </Flex>
+            <TagAllTagsExample />
+            <SkeletonAllSkeletonExample />
+            <ProgressBarAllThemesExample />
+            <SpinAllSizesExample />
+            <DividerAllThemesExample />
+          </Card.Body>
+        </Card>
+
+        <Flex direction='column' px={4} gap={6} w='100%' aria-labelledby='components-surface-heading'>
+          <Text tag='h3' size={400} id='components-surface-heading'>
+            Surface
+          </Text>
+          <CardWithHoverExample />
+          <BasicNoticeExample />
+        </Flex>
+
+        <Card w='100%'>
+          <Card.Header>
+            <Card.Title tag='h3'>FAQ</Card.Title>
+          </Card.Header>
+          <Card.Body tag={Flex} direction='column'>
+            <NonCompactAccordion />
+            <Text size={300} my={3} semibold>
+              Accordion with heading tag
+            </Text>
+            <HeadingTagAccordion />
+          </Card.Body>
+        </Card>
+
+        <Box mt={4} w='100%'>
+          <WidgetEmpty />
+        </Box>
+      </Flex>
+    </Flex>
+  );
+}
diff --git a/stories/patterns/core/advanced/components/Graphics/index.tsx b/stories/patterns/core/advanced/components/Graphics/index.tsx
new file mode 100644
index 0000000000..7e41a72a71
--- /dev/null
+++ b/stories/patterns/core/advanced/components/Graphics/index.tsx
@@ -0,0 +1,33 @@
+import { Box, Flex } from '@semcore/ui/base-components';
+import Card from '@semcore/ui/card';
+import React from 'react';
+
+import IconWithAllColorsExample from '../../../../../components/icon/advanced/examples/icon-all-colors';
+import IllustrationCustomColorExample from '../../../../../components/illustration/docs/examples/custom-color';
+
+export function Graphics() {
+  return (
+    <Flex mt={8} gap={4} alignItems='stretch' w='100%' flexWrap>
+      <Box flex='1 1 0' wMin={280}>
+        <Card tag='section' w='100%'>
+          <Card.Header>
+            <Card.Title tag='h3'>Icons</Card.Title>
+          </Card.Header>
+          <Card.Body>
+            <IconWithAllColorsExample />
+          </Card.Body>
+        </Card>
+      </Box>
+      <Box flex='1 1 0' wMin={280}>
+        <Card tag='section' w='100%'>
+          <Card.Header>
+            <Card.Title tag='h3'>Illustrations</Card.Title>
+          </Card.Header>
+          <Card.Body>
+            <IllustrationCustomColorExample />
+          </Card.Body>
+        </Card>
+      </Box>
+    </Flex>
+  );
+}
diff --git a/stories/patterns/core/advanced/components/PopupsDialogs/index.tsx b/stories/patterns/core/advanced/components/PopupsDialogs/index.tsx
new file mode 100644
index 0000000000..ed1eea84d4
--- /dev/null
+++ b/stories/patterns/core/advanced/components/PopupsDialogs/index.tsx
@@ -0,0 +1,157 @@
+import { Box, Flex } from '@semcore/ui/base-components';
+import Button from '@semcore/ui/button';
+import Card from '@semcore/ui/card';
+import FeaturePopover from '@semcore/ui/feature-popover';
+import { Text } from '@semcore/ui/typography';
+import React from 'react';
+
+import CarouselStory from '../../../../../components/carousel/docs/examples/carousel_with_default_indicators';
+import DropdownMenuWithDnDExample from '../../../../../components/drag-and-drop/docs/examples/with_dropdownmenu';
+import DropdownMenuBasicUsage from '../../../../../components/dropdown-menu/docs/examples/basic';
+import FullscreenModalBasicUsage from '../../../../../components/fullscreen-modal/docs/examples/basic_fullscreen.headers_use';
+import ModalBasicUsage from '../../../../../components/modal/docs/examples/basic_modal_window_usage';
+import ModalOverAnotherModal from '../../../../../components/modal/docs/examples/modal_window_inside_a_modal_window';
+import NoticeBubbleBasicNotice from '../../../../../components/notice-bubble/docs/examples/basic_notice';
+import NoticeBubbleNoConnection from '../../../../../components/notice-bubble/docs/examples/no_connection_notice';
+import SidePanelBasicUsage from '../../../../../components/side-panel/docs/examples/basic_example';
+import SpinContainerUsageInContent from '../../../../../components/spin-container/docs/examples/usage_in_content';
+import WizardBasicUsage from '../../../../../components/wizard/docs/examples/basic_example';
+import FeedbackRatingExample from '../../../../../patterns/ux-patterns/feedback-rating/docs/examples/feedback_rating_form';
+
+export function PopupsDialogs() {
+  const [featurePopoverAccentVisible, setFeaturePopoverAccentVisible] = React.useState(false);
+  const [featurePopoverNeutralVisible, setFeaturePopoverNeutralVisible] = React.useState(false);
+
+  return (
+    <>
+
+      <Card mt={4}>
+        <Card.Body>
+          <Flex direction='column' gap={10}>
+            <Text tag='h3' size={400} mb={4}>Carousel</Text>
+            <CarouselStory />
+            <Box>
+              <Text tag='h3' size={400} mb={4}>DropdownMenu</Text>
+              <DropdownMenuBasicUsage />
+              <Text tag='h4' size={300} mb={2} mt={6}>
+                With drag and drop
+              </Text>
+              <Box w='fit-content'>
+                <DropdownMenuWithDnDExample />
+              </Box>
+            </Box>
+
+            <Box>
+              <Text tag='h3' size={400} mb={4}>FullscreenModal</Text>
+              <FullscreenModalBasicUsage />
+            </Box>
+
+            <Box>
+              <Text tag='h3' size={400} mb={4}>FeaturePopover</Text>
+              <Flex direction='column' gap={20}>
+                <FeaturePopover
+                  {...({ interaction: 'click' } as Record<string, unknown>)}
+                  visible={featurePopoverAccentVisible}
+                  onVisibleChange={setFeaturePopoverAccentVisible}
+                  disablePortal
+                  placement='bottom-start'
+                >
+                  <FeaturePopover.Trigger>
+                    <Box style={{ position: 'relative', display: 'inline-flex' }}>
+                      <Button>
+                        Open popover
+                      </Button>
+                      {featurePopoverAccentVisible ? <FeaturePopover.Spot /> : null}
+                    </Box>
+                  </FeaturePopover.Trigger>
+                  <FeaturePopover.Popper closeIcon wMax={280} aria-label='Feature popover (accent)'>
+                    <Text size={300} bold tag='h3' mb={1} mt={0}>
+                      Popover title
+                    </Text>
+                    <Text size={200}>
+                      Short description for theme playground.
+                    </Text>
+                  </FeaturePopover.Popper>
+                </FeaturePopover>
+
+                <FeaturePopover
+                  {...({ interaction: 'click' } as Record<string, unknown>)}
+                  visible={featurePopoverNeutralVisible}
+                  onVisibleChange={setFeaturePopoverNeutralVisible}
+                  disablePortal
+                  placement='bottom-start'
+                  theme='neutral'
+                >
+                  <FeaturePopover.Trigger>
+                    <Box style={{ position: 'relative', display: 'inline-flex' }}>
+                      <Button>
+                        Open popover (neutral)
+                      </Button>
+                      {featurePopoverNeutralVisible ? <FeaturePopover.Spot /> : null}
+                    </Box>
+                  </FeaturePopover.Trigger>
+                  <FeaturePopover.Popper closeIcon wMax={280} aria-label='Feature popover (neutral)'>
+                    <Text size={300} bold tag='h3' mb={1} mt={0}>
+                      Popover title
+                    </Text>
+                    <Text size={200}>
+                      Short description for theme playground (neutral theme).
+                    </Text>
+                  </FeaturePopover.Popper>
+                </FeaturePopover>
+              </Flex>
+            </Box>
+
+            <Box w='60%'>
+              <Text tag='h3' size={400} mb={4}>FeedbackRating</Text>
+              <FeedbackRatingExample />
+            </Box>
+
+            <Box>
+              <Text tag='h3' size={400} mb={4}>Modal</Text>
+              <Flex gap={4} flexWrap>
+                <Box>
+                  <Text tag='h4' size={300} mb={2}>Basic usage</Text>
+                  <ModalBasicUsage />
+                </Box>
+                <Box>
+                  <Text tag='h4' size={300} mb={2}>Modal over another modal</Text>
+                  <ModalOverAnotherModal />
+                </Box>
+              </Flex>
+            </Box>
+
+            <Box>
+              <Text tag='h3' size={400} mb={4}>NoticeBubble</Text>
+              <Flex gap={4} flexWrap>
+                <Box>
+                  <Text tag='h4' size={300} mb={2}>Basic notice</Text>
+                  <NoticeBubbleBasicNotice />
+                </Box>
+                <Box>
+                  <Text tag='h4' size={300} mb={2}>No connection</Text>
+                  <NoticeBubbleNoConnection />
+                </Box>
+              </Flex>
+            </Box>
+
+            <Box>
+              <Text tag='h3' size={400} mb={4}>SidePanel</Text>
+              <SidePanelBasicUsage />
+            </Box>
+
+            <Box w='60%'>
+              <Text tag='h3' size={400} mb={4}>SpinContainer</Text>
+              <SpinContainerUsageInContent />
+            </Box>
+
+            <Box>
+              <Text tag='h3' size={400} mb={4}>Wizard</Text>
+              <WizardBasicUsage />
+            </Box>
+          </Flex>
+        </Card.Body>
+      </Card>
+    </>
+  );
+}
diff --git a/stories/patterns/core/core.stories.tsx b/stories/patterns/core/core.stories.tsx
index 39dc22c1f9..28539e0b40 100644
--- a/stories/patterns/core/core.stories.tsx
+++ b/stories/patterns/core/core.stories.tsx
@@ -6,7 +6,6 @@ import LinkButtonLinkTextCombinationExample, { defaultProps as combinationDefaul
 const meta: Meta = {
   title: 'Patterns/Core/Tests',
 };
-
 export default meta;
 type Story = StoryObj<typeof meta>;
 
@@ -45,7 +44,6 @@ export const LinkButtonLinkTextCombination: StoryObj<typeof combinationDefaultPr
   },
   args: combinationDefaultProps,
 };
-
 export const AllComponents: Story = {
   render: AllComponentsExample,
   parameters: {
diff --git a/stories/patterns/core/tests/all-components/components/Carousel/index.tsx b/stories/patterns/core/tests/all-components/components/Carousel/index.tsx
deleted file mode 100644
index 26bc71e80d..0000000000
--- a/stories/patterns/core/tests/all-components/components/Carousel/index.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Flex } from '@semcore/ui/base-components';
-import Card from '@semcore/ui/card';
-import { Text } from '@semcore/ui/typography';
-import React from 'react';
-
-import CarouserStory from '../../../../../../components/carousel/docs/examples/carousel_with_default_indicators';
-
-export function Carousel() {
-  return (
-    <Card mt={8}>
-      <Card.Body>
-        <Flex>
-          <CarouserStory />
-
-          <Text>
-            Description of carousel...
-          </Text>
-        </Flex>
-      </Card.Body>
-    </Card>
-  );
-}
diff --git a/stories/patterns/core/tests/all-components/components/Controls/index.tsx b/stories/patterns/core/tests/all-components/components/Controls/index.tsx
deleted file mode 100644
index 9c9bc9f58c..0000000000
--- a/stories/patterns/core/tests/all-components/components/Controls/index.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Flex } from '@semcore/ui/base-components';
-import Card from '@semcore/ui/card';
-import Divider from '@semcore/ui/divider';
-import Dot from '@semcore/ui/dot';
-import React from 'react';
-
-import Checkboxes from '../../../../../../components/checkbox/docs/examples/basic_usage';
-import ColorPicker from '../../../../../../components/color-picker/docs/examples/predefined_palette';
-import InputTags from '../../../../../../components/input-tags/docs/examples/entering_and_editing_tags';
-import Radio from '../../../../../../components/radio/docs/examples/radiogroup_example';
-import Slider2 from '../../../../../../components/slider/docs/examples/customized_options_view';
-import Slider3 from '../../../../../../components/slider/docs/examples/numeric_slider';
-import Slider1 from '../../../../../../components/slider/docs/examples/slider_with_options';
-import Switch from '../../../../../../components/switch/docs/examples/basic_example';
-import Textarea from '../../../../../../components/textarea/docs/examples/textarea_with_auto_height';
-
-export function Controls() {
-  return (
-    <Flex mt={4} gap={4}>
-      <Card w='35%'>
-        <Card.Header>
-          <Card.Title innerHint='Something'>Settings</Card.Title>
-        </Card.Header>
-        <Card.Body tag={Flex} direction='column' gap={4}>
-          <Switch />
-          <ColorPicker />
-
-          <Divider />
-          <Slider3 />
-          <Divider />
-          <InputTags size='m' />
-          <Checkboxes />
-          <Divider />
-          <Radio />
-
-        </Card.Body>
-      </Card>
-
-      <Card w='calc(65% - 16px)'>
-        <Card.Header>
-          <Dot mr={2} />
-          Advanced settings
-        </Card.Header>
-        <Card.Body>
-          <Divider my={2} />
-          <Slider1 />
-          <Divider my={2} />
-          <Slider2 />
-          <Divider my={2} />
-
-          <Textarea />
-        </Card.Body>
-      </Card>
-    </Flex>
-  );
-}
diff --git a/stories/patterns/core/tests/all-components/components/Dashboard/Dashboard.tsx b/stories/patterns/core/tests/all-components/components/Dashboard/Dashboard.tsx
new file mode 100644
index 0000000000..e926c37b94
--- /dev/null
+++ b/stories/patterns/core/tests/all-components/components/Dashboard/Dashboard.tsx
@@ -0,0 +1,684 @@
+import FileExportM from '@semcore/icon/FileExport/m';
+import MathPlusM from '@semcore/icon/MathPlus/m';
+import { Box, Flex } from '@semcore/ui/base-components';
+import { FilterTrigger } from '@semcore/ui/base-trigger';
+import Button from '@semcore/ui/button';
+import Card from '@semcore/ui/card';
+import { Chart, ChartLegend, ResponsiveContainer } from '@semcore/ui/d3-chart';
+import Divider from '@semcore/ui/divider';
+import Link from '@semcore/ui/link';
+import MiniChart from '@semcore/ui/mini-chart';
+import Pills from '@semcore/ui/pills';
+import Select from '@semcore/ui/select';
+import { Text } from '@semcore/ui/typography';
+import React from 'react';
+
+import {
+  buildDashboardAreaChart,
+  buildDashboardLineChart,
+  DASHBOARD_DOMAIN_OPTIONS,
+} from './dashboardDomainCharts';
+import BarMockData from '../../../../../../components/d3-chart/__mocks__/bar';
+import CigaretteMockData from '../../../../../../components/d3-chart/__mocks__/cigarette';
+import DonutMockData from '../../../../../../components/d3-chart/__mocks__/donut';
+import ScatterplotMockData from '../../../../../../components/d3-chart/__mocks__/scatterplot';
+import VennMockData from '../../../../../../components/d3-chart/__mocks__/venn';
+import PrimaryTable from '../Tables/PrimaryTable';
+
+export type DashboardProps = {
+  showPrimaryTableFooter?: boolean;
+};
+
+const STACKED_BAR_SERIES_KEYS = ['a', 'b', 'c'] as const;
+const STACKED_BAR_COLOR_MAP: Record<(typeof STACKED_BAR_SERIES_KEYS)[number], string> = {
+  a: 'blue-500',
+  b: 'blue-300',
+  c: 'blue-100',
+};
+
+const STACKED_BAR_BY_MONTH = [
+  { month: 'Jan', a: 2, b: 3, c: 2 },
+  { month: 'Feb', a: 4, b: 1, c: 3 },
+  { month: 'Mar', a: 3, b: 2, c: 4 },
+  { month: 'Apr', a: 5, b: 2, c: 1 },
+  { month: 'May', a: 2, b: 4, c: 3 },
+  { month: 'Jun', a: 3, b: 3, c: 2 },
+];
+
+const CHART_CONTAINER_HEIGHT = 220;
+const LEGEND_RESERVE_HEIGHT = 44;
+const Y_TICKS_COUNT = 3;
+
+function formatAreaAxis(value: unknown): string {
+  if (value instanceof Date) {
+    return new Intl.DateTimeFormat('en', { month: 'short', day: 'numeric' }).format(value);
+  }
+  return String(value);
+}
+
+function projectStackedBarMonthData(visible: { a: boolean; b: boolean; c: boolean }) {
+  return STACKED_BAR_BY_MONTH.map((row) => {
+    const out: { month: string; a?: number; b?: number; c?: number } = { month: row.month };
+    for (const k of STACKED_BAR_SERIES_KEYS) {
+      if (visible[k]) out[k] = row[k];
+    }
+    return out;
+  });
+}
+
+function ChartBox({
+  children,
+  h = CHART_CONTAINER_HEIGHT,
+}: {
+  children: (size: [number, number]) => React.ReactNode;
+  h?: number;
+}) {
+  const [size, setSize] = React.useState<[number, number]>([0, 0]);
+  return (
+    <ResponsiveContainer h={h} onResize={setSize} w='100%' style={{ overflow: 'hidden', minWidth: 0 }}>
+      {size[0] > 0 ? children(size) : null}
+    </ResponsiveContainer>
+  );
+}
+
+function cardSectionStyle(flexBasis: string): React.CSSProperties {
+  return {
+    flex: flexBasis,
+    minWidth: 'min(100%, 280px)',
+    maxWidth: '100%',
+    boxSizing: 'border-box',
+  };
+}
+
+export function Dashboard({ showPrimaryTableFooter = false }: DashboardProps) {
+  const [stackedBarSeriesVisible, setStackedBarSeriesVisible] = React.useState({
+    a: true,
+    b: true,
+    c: true,
+  });
+  const [domains, setDomains] = React.useState<(string | undefined)[]>(['domain1', 'domain2']);
+
+  const dashboardLineChart = React.useMemo(() => buildDashboardLineChart(domains), [domains]);
+  const dashboardAreaChart = React.useMemo(() => buildDashboardAreaChart(domains), [domains]);
+
+  const dashboardStackedBarData = React.useMemo(
+    () => projectStackedBarMonthData(stackedBarSeriesVisible),
+    [stackedBarSeriesVisible],
+  );
+  const dashboardStackedBarLegendItems = React.useMemo(
+    () =>
+      STACKED_BAR_SERIES_KEYS.map((id) => ({
+        id,
+        label: id,
+        checked: stackedBarSeriesVisible[id],
+        color: STACKED_BAR_COLOR_MAP[id],
+      })),
+    [stackedBarSeriesVisible],
+  );
+
+  return (
+    <Box style={{ background: 'var(--intergalactic-bg-secondary-neutral)' }}>
+      <Box pb={10} pt={2}>
+        <Flex direction='column' gap={2} my={4} mb={6}>
+          <Flex gap={2} flexWrap alignItems='center'>
+            {domains.map((domain, index) => {
+              const removeSlot = () => {
+                setDomains((prev) => prev.filter((_, i) => i !== index));
+              };
+              return (
+                <Select
+                  key={`domain-filter-${index}`}
+                  value={domain}
+                  onChange={(v: string) => {
+                    setDomains((prev) => {
+                      const next = [...prev];
+                      next[index] = v;
+                      return next;
+                    });
+                  }}
+                  disablePortal
+                >
+                  <Select.Trigger
+                    tag={FilterTrigger}
+                    placeholder='Add domain'
+                    onClear={removeSlot}
+                  />
+                  <Select.Menu aria-label='Add domain'>
+                    {DASHBOARD_DOMAIN_OPTIONS.map((opt) => (
+                      <Select.Option key={opt.value} value={opt.value}>
+                        {opt.label}
+                      </Select.Option>
+                    ))}
+                  </Select.Menu>
+                </Select>
+              );
+            })}
+            <Button
+              use='tertiary'
+              theme='muted'
+              addonLeft={MathPlusM}
+              onClick={() => setDomains((prev) => [...prev, undefined])}
+            >
+              Add domain
+            </Button>
+          </Flex>
+        </Flex>
+
+        <Flex gap={4} mb={4} flexWrap style={{ width: '100%', boxSizing: 'border-box' }}>
+          <Card tag='section' style={{ ...cardSectionStyle('1 1 calc(50% - 8px)'), minWidth: 'min(100%, 360px)' }}>
+            <Card.Body>
+              <Flex gap={6} w='100%'>
+                {[
+                  {
+                    label: 'Visibility',
+                    value: '42',
+                    delta: 'no change',
+                    deltaColor: 'text-large-secondary',
+                  },
+                  {
+                    label: 'Estimated traffic',
+                    value: '24,765',
+                    delta: '−4',
+                    deltaColor: 'text-large-critical',
+                    trendAreaData: [90, 82, 78, 74, 68, 62, 58, 52, 48, 42],
+                  },
+                  {
+                    label: 'Average position',
+                    value: '908',
+                    delta: '-1',
+                    deltaColor: 'text-large-warning',
+                  },
+                ].map((item, i) => (
+                  <React.Fragment key={item.label}>
+                    {i > 0 && <Divider orientation='vertical' />}
+                    <Flex direction='column' style={{ flex: 1, minWidth: 0 }}>
+                      <Text size={200} noWrap>
+                        {item.label}
+                      </Text>
+                      <Flex alignItems='baseline' gap={1} mt={1}>
+                        <Link size={500} fontWeight='bold' href='https://semrush.com' target='_blank'>
+                          {item.value}
+                        </Link>
+                        <Text size={100} color={item.deltaColor} noWrap>
+                          {item.delta}
+                        </Text>
+                        {'trendAreaData' in item && item.trendAreaData && (
+                          <MiniChart.TrendArea
+                            aria-hidden
+                            data={item.trendAreaData}
+                            h={20}
+                            w={80}
+                          />
+                        )}
+                      </Flex>
+                    </Flex>
+                  </React.Fragment>
+                ))}
+              </Flex>
+            </Card.Body>
+          </Card>
+
+          <Card tag='section' style={{ ...cardSectionStyle('1 1 calc(50% - 8px)'), minWidth: 'min(100%, 360px)' }}>
+            <Card.Body>
+              <Flex gap={6} w='100%'>
+                {[
+                  {
+                    label: 'Keywords',
+                    value: '1,284',
+                    delta: '+28',
+                    deltaColor: 'text-large-success',
+                  },
+                  {
+                    label: 'Backlinks',
+                    value: '4,521',
+                    delta: 'no change',
+                    deltaColor: 'text-large-secondary',
+                  },
+                  {
+                    label: 'Domain health',
+                    value: '94',
+                    delta: '+2',
+                    deltaColor: 'text-large-success',
+                  },
+                ].map((item, i) => (
+                  <React.Fragment key={item.label}>
+                    {i > 0 && <Divider orientation='vertical' />}
+                    <Flex direction='column' style={{ flex: 1, minWidth: 0 }}>
+                      <Text size={200} noWrap>
+                        {item.label}
+                      </Text>
+                      <Flex alignItems='baseline' gap={1} mt={1}>
+                        <Link size={500} fontWeight='bold' href='https://semrush.com' target='_blank'>
+                          {item.value}
+                        </Link>
+                        <Text size={100} color={item.deltaColor} noWrap>
+                          {item.delta}
+                        </Text>
+                      </Flex>
+                    </Flex>
+                  </React.Fragment>
+                ))}
+              </Flex>
+            </Card.Body>
+          </Card>
+        </Flex>
+
+        <Flex direction='column' gap={4} mb={4} style={{ width: '100%', boxSizing: 'border-box' }}>
+          <Flex gap={4} flexWrap style={{ width: '100%', boxSizing: 'border-box' }}>
+            <Card tag='section' style={cardSectionStyle('4 1 calc(33.333% - 11px)')}>
+              <Card.Header>
+                <Flex justifyContent='space-between' alignItems='flex-start' w='100%'>
+                  <Box>
+                    <Card.Title tag='h3'>Line</Card.Title>
+                    <Card.Description>One line per selected domain (legend matches domain name).</Card.Description>
+                  </Box>
+                  <Button addonLeft={FileExportM} aria-label='Export'>
+                    Export
+                  </Button>
+                </Flex>
+              </Card.Header>
+              <Card.Body>
+                <ChartBox>
+                  {([width, height]) => (
+                    <Chart.Line
+                      groupKey='x'
+                      data={dashboardLineChart.data}
+                      plotWidth={width}
+                      plotHeight={height - LEGEND_RESERVE_HEIGHT}
+                      yTicksCount={Y_TICKS_COUNT}
+                      xTicksCount={7}
+                      showDots
+                      showLegend
+                      legendProps={dashboardLineChart.legendProps}
+                      aria-label='Line chart'
+                    />
+                  )}
+                </ChartBox>
+              </Card.Body>
+            </Card>
+
+            <Card tag='section' style={cardSectionStyle('4 1 calc(33.333% - 11px)')}>
+              <Card.Header>
+                <Flex justifyContent='space-between' alignItems='flex-start' w='100%'>
+                  <Box>
+                    <Card.Title tag='h3'>Area</Card.Title>
+                    <Card.Description>Stacked area by time; stacks follow selected domains.</Card.Description>
+                  </Box>
+                  <Button addonLeft={FileExportM} aria-label='Export'>
+                    Export
+                  </Button>
+                </Flex>
+              </Card.Header>
+              <Card.Body>
+                <ChartBox>
+                  {([width, height]) => (
+                    <Chart.Area
+                      groupKey='time'
+                      data={dashboardAreaChart.data}
+                      plotWidth={width}
+                      plotHeight={height - LEGEND_RESERVE_HEIGHT}
+                      yTicksCount={Y_TICKS_COUNT}
+                      xTicksCount={5}
+                      stacked
+                      showDots
+                      showLegend
+                      legendProps={dashboardAreaChart.legendProps}
+                      tooltipValueFormatter={formatAreaAxis}
+                      axisXValueFormatter={formatAreaAxis}
+                      aria-label='Area chart'
+                    />
+                  )}
+                </ChartBox>
+              </Card.Body>
+            </Card>
+
+            <Card tag='section' style={cardSectionStyle('2 1 calc(33.333% - 11px)')}>
+              <Card.Header>
+                <Flex justifyContent='space-between' alignItems='flex-start' w='100%'>
+                  <Box>
+                    <Card.Title tag='h3'>Cigarette</Card.Title>
+                    <Card.Description>Horizontal segments.</Card.Description>
+                  </Box>
+                  <Button addonLeft={FileExportM} aria-label='Export'>
+                    Export
+                  </Button>
+                </Flex>
+              </Card.Header>
+              <Card.Body>
+                <ChartBox h={180}>
+                  {([width]) => (
+                    <Chart.Cigarette
+                      data={CigaretteMockData.Default}
+                      plotWidth={width}
+                      plotHeight={28}
+                      invertAxis
+                      showLegend
+                      aria-label='Cigarette chart horizontal'
+                    />
+                  )}
+                </ChartBox>
+              </Card.Body>
+            </Card>
+          </Flex>
+
+          <Flex gap={4} flexWrap style={{ width: '100%', boxSizing: 'border-box' }}>
+            <Card tag='section' style={cardSectionStyle('3 1 calc(33.333% - 11px)')}>
+              <Card.Header>
+                <Flex justifyContent='space-between' alignItems='flex-start' w='100%'>
+                  <Box>
+                    <Card.Title tag='h3'>Donut</Card.Title>
+                    <Card.Description>Distribution overview.</Card.Description>
+                  </Box>
+                  <Button addonLeft={FileExportM} aria-label='Export'>
+                    Export
+                  </Button>
+                </Flex>
+              </Card.Header>
+              <Card.Body>
+                <Box style={{ display: 'flex', justifyContent: 'flex-start' }}>
+                  <Chart.Donut
+                    data={DonutMockData.Default}
+                    plotWidth={120}
+                    plotHeight={120}
+                    aria-label='Donut chart'
+                    innerRadius={30}
+                  />
+                </Box>
+              </Card.Body>
+            </Card>
+
+            <Card tag='section' style={cardSectionStyle('3 1 calc(33.333% - 11px)')}>
+              <Card.Header>
+                <Flex justifyContent='space-between' alignItems='flex-start' w='100%'>
+                  <Box>
+                    <Card.Title tag='h3'>Bar horizontal</Card.Title>
+                    <Card.Description>Compact horizontal bars.</Card.Description>
+                  </Box>
+                  <Button addonLeft={FileExportM} aria-label='Export'>
+                    Export
+                  </Button>
+                </Flex>
+              </Card.Header>
+              <Card.Body>
+                <ChartBox h={260}>
+                  {([width, height]) => (
+                    <Chart.CompactHorizontalBar
+                      y='category'
+                      x='value'
+                      data={BarMockData.WithValue.slice(0, 3)}
+                      plotWidth={width}
+                      plotHeight={height}
+                      aria-label='Compact horizontal bar chart'
+                    />
+                  )}
+                </ChartBox>
+              </Card.Body>
+            </Card>
+
+            <Card tag='section' style={cardSectionStyle('4 1 calc(33.333% - 11px)')}>
+              <Card.Header>
+                <Flex justifyContent='space-between' alignItems='flex-start' w='100%'>
+                  <Box>
+                    <Card.Title tag='h3'>Scatterplot</Card.Title>
+                    <Card.Description>Three series by x.</Card.Description>
+                  </Box>
+                  <Button addonLeft={FileExportM} aria-label='Export'>
+                    Export
+                  </Button>
+                </Flex>
+              </Card.Header>
+              <Card.Body>
+                <ChartBox>
+                  {([width, height]) => (
+                    <Chart.ScatterPlot
+                      data={ScatterplotMockData.ThreeSetsWithValue}
+                      groupKey='x'
+                      plotWidth={width}
+                      plotHeight={height - LEGEND_RESERVE_HEIGHT}
+                      yTicksCount={Y_TICKS_COUNT}
+                      xTicksCount={7}
+                      showLegend
+                      legendProps={{
+                        legendMap: {
+                          y1: { label: 'Organic' },
+                          y2: { label: 'Paid' },
+                          y3: { label: 'Social' },
+                        },
+                      }}
+                      aria-label='Scatterplot chart'
+                    />
+                  )}
+                </ChartBox>
+              </Card.Body>
+            </Card>
+          </Flex>
+
+          <Flex gap={4} flexWrap alignItems='stretch' style={{ width: '100%', boxSizing: 'border-box' }}>
+            <Card
+              tag='section'
+              style={{
+                flex: '1 1 calc(33.333% - 11px)',
+                minWidth: 'min(100%, 280px)',
+                maxWidth: '100%',
+                display: 'flex',
+                flexDirection: 'column',
+              }}
+            >
+              <Card.Header>
+                <Flex justifyContent='space-between' alignItems='center' w='100%'>
+                  <Card.Title tag='h3'>Bar</Card.Title>
+                  <Button addonLeft={FileExportM} aria-label='Export'>
+                    Export
+                  </Button>
+                </Flex>
+              </Card.Header>
+              <Card.Body style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
+                <ChartBox>
+                  {([width, height]) => (
+                    <Chart.Bar
+                      groupKey='category'
+                      data={BarMockData.Default}
+                      plotWidth={width}
+                      plotHeight={height}
+                      marginX={52}
+                      yTicksCount={Y_TICKS_COUNT}
+                      colorMap={{ bar: 'blue-500' }}
+                      aria-label='Bar chart by category'
+                    />
+                  )}
+                </ChartBox>
+                <Box mt='auto' pt={3} ml={5} style={{ alignSelf: 'flex-start' }}>
+                  <Button>View full report</Button>
+                </Box>
+              </Card.Body>
+            </Card>
+
+            <Card
+              tag='section'
+              style={{
+                flex: '1 1 calc(33.333% - 11px)',
+                minWidth: 'min(100%, 280px)',
+                maxWidth: '100%',
+                display: 'flex',
+                flexDirection: 'column',
+              }}
+            >
+              <Card.Header>
+                <Flex justifyContent='space-between' alignItems='center' w='100%'>
+                  <Card.Title tag='h3'>Bar stacked</Card.Title>
+                  <Button addonLeft={FileExportM} aria-label='Export'>
+                    Export
+                  </Button>
+                </Flex>
+              </Card.Header>
+              <Card.Body style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
+                <Flex justifyContent='space-between' alignItems='center' w='100%' mb={4} flexWrap gap={3}>
+                  <ChartLegend
+                    items={dashboardStackedBarLegendItems}
+                    direction='row'
+                    aria-label='Bar series'
+                    onChangeVisibleItem={(id: string, isVisible: boolean) => {
+                      setStackedBarSeriesVisible((prev) => {
+                        if (id !== 'a' && id !== 'b' && id !== 'c') return prev;
+                        const next = { ...prev, [id]: isVisible };
+                        const anyOn = next.a || next.b || next.c;
+                        return anyOn ? next : prev;
+                      });
+                    }}
+                  />
+                  <Pills defaultValue='incoming'>
+                    <Pills.Item value='incoming'>Incoming links</Pills.Item>
+                    <Pills.Item value='outgoing'>Outgoing links</Pills.Item>
+                  </Pills>
+                </Flex>
+                <ChartBox>
+                  {([width, height]) => (
+                    <Chart.Bar
+                      groupKey='month'
+                      type='stack'
+                      data={dashboardStackedBarData}
+                      plotWidth={width}
+                      plotHeight={height}
+                      marginX={52}
+                      yTicksCount={Y_TICKS_COUNT}
+                      colorMap={STACKED_BAR_COLOR_MAP}
+                      showLegend={false}
+                      aria-label='Stacked bar chart by month'
+                    />
+                  )}
+                </ChartBox>
+                <Box mt='auto' pt={3} ml={5} style={{ alignSelf: 'flex-start' }}>
+                  <Button>View full report</Button>
+                </Box>
+              </Card.Body>
+            </Card>
+
+            <Card
+              tag='section'
+              style={{
+                flex: '1 1 calc(33.333% - 11px)',
+                minWidth: 'min(100%, 280px)',
+                maxWidth: '100%',
+                display: 'flex',
+                flexDirection: 'column',
+              }}
+            >
+              <Card.Header>
+                <Flex justifyContent='space-between' alignItems='center' w='100%'>
+                  <Card.Title tag='h3'>Bar grouped</Card.Title>
+                  <Button addonLeft={FileExportM} aria-label='Export'>
+                    Export
+                  </Button>
+                </Flex>
+              </Card.Header>
+              <Card.Body style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
+                <ChartBox>
+                  {([width, height]) => (
+                    <Chart.Bar
+                      groupKey='category'
+                      type='group'
+                      data={BarMockData.TwoBars}
+                      plotWidth={width}
+                      plotHeight={height - LEGEND_RESERVE_HEIGHT}
+                      marginX={48}
+                      yTicksCount={Y_TICKS_COUNT}
+                      showLegend
+                      aria-label='Grouped bar chart'
+                    />
+                  )}
+                </ChartBox>
+                <Box mt='auto' pt={3} ml={5} style={{ alignSelf: 'flex-start' }}>
+                  <Button>View full report</Button>
+                </Box>
+              </Card.Body>
+            </Card>
+          </Flex>
+        </Flex>
+
+        <Flex gap={4} flexWrap alignItems='stretch' mb={4} style={{ width: '100%', boxSizing: 'border-box' }}>
+          <Card
+            tag='section'
+            style={{
+              flex: '1 1 calc(33.333% - 11px)',
+              minWidth: 'min(100%, 280px)',
+              maxWidth: '100%',
+              display: 'flex',
+              flexDirection: 'column',
+            }}
+          >
+            <Card.Header>
+              <Flex justifyContent='space-between' alignItems='center' w='100%'>
+                <Card.Title tag='h3'>Venn</Card.Title>
+                <Button addonLeft={FileExportM} aria-label='Export'>
+                  Export
+                </Button>
+              </Flex>
+            </Card.Header>
+            <Card.Body style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
+              <ChartBox>
+                {([width, height]) => {
+                  const size = Math.min(width, height);
+                  return (
+                    <Box style={{ display: 'flex', justifyContent: 'center' }}>
+                      <Chart.Venn
+                        data={VennMockData.Default}
+                        plotWidth={size}
+                        plotHeight={size}
+                        showLegend
+                        aria-label='Venn chart'
+                      />
+                    </Box>
+                  );
+                }}
+              </ChartBox>
+            </Card.Body>
+          </Card>
+
+          <Card
+            tag='section'
+            style={{
+              flex: '1 1 calc(33.333% - 11px)',
+              minWidth: 'min(100%, 280px)',
+              maxWidth: '100%',
+              display: 'flex',
+              flexDirection: 'column',
+            }}
+          >
+            <Card.Header>
+              <Flex justifyContent='space-between' alignItems='center' w='100%'>
+                <Card.Title tag='h3'>Cigarette</Card.Title>
+                <Button addonLeft={FileExportM} aria-label='Export'>
+                  Export
+                </Button>
+              </Flex>
+            </Card.Header>
+            <Card.Body style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
+              <ChartBox>
+                {([, height]) => (
+                  <Box style={{ display: 'flex', justifyContent: 'flex-start' }}>
+                    <Chart.Cigarette
+                      data={CigaretteMockData.Default}
+                      plotWidth={44}
+                      plotHeight={height - LEGEND_RESERVE_HEIGHT}
+                      invertAxis={false}
+                      showLegend
+                      tooltipTitle='Some title for tooltip'
+                      showTotalInTooltip
+                      aria-label='Cigarette chart vertical'
+                    />
+                  </Box>
+                )}
+              </ChartBox>
+            </Card.Body>
+          </Card>
+        </Flex>
+
+        {showPrimaryTableFooter && (
+          <Box mt={8} w='100%'>
+            <PrimaryTable />
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+}
diff --git a/stories/patterns/core/tests/all-components/components/Dashboard/dashboardDomainCharts.ts b/stories/patterns/core/tests/all-components/components/Dashboard/dashboardDomainCharts.ts
new file mode 100644
index 0000000000..25560e9412
--- /dev/null
+++ b/stories/patterns/core/tests/all-components/components/Dashboard/dashboardDomainCharts.ts
@@ -0,0 +1,71 @@
+import LineMockData from '../../../../../../components/d3-chart/__mocks__/line';
+import StackAreaMockData from '../../../../../../components/d3-chart/__mocks__/stacked-area';
+
+export const DASHBOARD_DOMAIN_OPTIONS = Array.from({ length: 16 }, (_, i) => {
+  const v = `domain${i + 1}`;
+  return { value: v, label: v, children: v };
+});
+
+type ActiveDomainSlot = { slotIndex: number; name: string };
+
+function slotSeriesKey(slotIndex: number) {
+  return `slot_${slotIndex}`;
+}
+
+function getActiveDomainSlots(domains: (string | undefined)[]): ActiveDomainSlot[] {
+  return domains
+    .map((d, slotIndex) => (typeof d === 'string' && d.trim() !== '' ? { slotIndex, name: d } : null))
+    .filter((x): x is ActiveDomainSlot => x != null);
+}
+
+export function buildDashboardLineChart(domains: (string | undefined)[]) {
+  const slots = getActiveDomainSlots(domains);
+  const templateRows = LineMockData.TwoLines;
+  if (slots.length === 0) {
+    const data = templateRows.map((row) => ({
+      x: row.x,
+      placeholder: row.line1,
+    }));
+    return {
+      data,
+      legendProps: { legendMap: { placeholder: { label: 'Select domain' } } },
+    };
+  }
+  const data = templateRows.map((row) => {
+    const point: Record<string, number> = { x: row.x };
+    slots.forEach((s, j) => {
+      const vBase = j % 2 === 0 ? row.line1 : row.line2;
+      point[slotSeriesKey(s.slotIndex)] = vBase + s.slotIndex * 0.35 + j * 0.25;
+    });
+    return point;
+  });
+  const legendMap = Object.fromEntries(slots.map((s) => [slotSeriesKey(s.slotIndex), { label: s.name }]));
+  return { data, legendProps: { legendMap } };
+}
+
+export function buildDashboardAreaChart(domains: (string | undefined)[]) {
+  const slots = getActiveDomainSlots(domains);
+  const templateRows = StackAreaMockData.Default;
+  if (slots.length === 0) {
+    const data = templateRows.map((row) => ({
+      time: row.time,
+      placeholder: 0.2,
+    }));
+    return {
+      data,
+      legendProps: { legendMap: { placeholder: { label: 'Select domain' } } },
+    };
+  }
+  const data = templateRows.map((row) => {
+    const point: Record<string, number | Date> = { time: row.time };
+    slots.forEach((s, j) => {
+      const stackNum = (j % 3) + 1;
+      const src = row[`stack${stackNum}` as 'stack1'];
+      const v = typeof src === 'number' ? Math.max(0.1, src + s.slotIndex * 0.12 + j * 0.08) : 0.1;
+      point[slotSeriesKey(s.slotIndex)] = v;
+    });
+    return point;
+  });
+  const legendMap = Object.fromEntries(slots.map((s) => [slotSeriesKey(s.slotIndex), { label: s.name }]));
+  return { data, legendProps: { legendMap } };
+}
diff --git a/stories/patterns/core/tests/all-components/components/Dashboard/index.tsx b/stories/patterns/core/tests/all-components/components/Dashboard/index.tsx
index 398253eb0a..41a54b5975 100644
--- a/stories/patterns/core/tests/all-components/components/Dashboard/index.tsx
+++ b/stories/patterns/core/tests/all-components/components/Dashboard/index.tsx
@@ -1,64 +1 @@
-import { Box, Flex } from '@semcore/ui/base-components';
-import Card from '@semcore/ui/card';
-import Divider from '@semcore/ui/divider';
-import React from 'react';
-
-import BulkTextarea from '../../../../../../components/bulk-textarea/docs/examples/basic-usage';
-import BarChart from '../../../../../../components/d3-chart/advanced/examples/sync_tooltips';
-import DonutChart from '../../../../../../components/d3-chart/docs/examples/donut-chart/basic-usage';
-import RadarChart from '../../../../../../components/d3-chart/docs/examples/radar-chart/basic-usage';
-import VennChart from '../../../../../../components/d3-chart/docs/examples/venn-chart/basic-usage';
-import MiniChart from '../../../../../../components/mini-chart/docs/examples/basic_usage';
-import Notice from '../../../../../../components/notice/docs/examples/custom_notice';
-import DefaultSummary from '../../../../../../patterns/ux-patterns/summary/docs/examples/default-summary-example';
-
-export function Dashboard() {
-  return (
-    <Flex direction='column' gap={8} mt={8}>
-      <Flex gap={8}>
-        <Box>
-          <Notice mb={8} />
-          <Card>
-            <Card.Header>Bar stacked</Card.Header>
-            <Card.Body>
-              <Flex>
-                <Box><DefaultSummary /></Box>
-                <Divider orientation='vertical' mx={8} />
-                <BulkTextarea />
-              </Flex>
-              <Divider my={8} />
-              <BarChart />
-            </Card.Body>
-          </Card>
-        </Box>
-
-        <Flex direction='column' gap={8}>
-          <Card>
-            <Card.Header>Venn</Card.Header>
-            <Card.Body>
-              <VennChart />
-            </Card.Body>
-          </Card>
-          <Card>
-            <Card.Header>Donut</Card.Header>
-            <Card.Body>
-              <DonutChart />
-            </Card.Body>
-          </Card>
-          <Card>
-            <Card.Header>Radar</Card.Header>
-            <Card.Body>
-              <RadarChart />
-            </Card.Body>
-          </Card>
-        </Flex>
-      </Flex>
-
-      <Card>
-        <Card.Body>
-          <MiniChart />
-        </Card.Body>
-      </Card>
-    </Flex>
-  );
-}
+export { Dashboard } from './Dashboard';
diff --git a/stories/patterns/core/tests/all-components/components/Form/ArticleLaunchForm/index.tsx b/stories/patterns/core/tests/all-components/components/Form/ArticleLaunchForm/index.tsx
new file mode 100644
index 0000000000..605d550515
--- /dev/null
+++ b/stories/patterns/core/tests/all-components/components/Form/ArticleLaunchForm/index.tsx
@@ -0,0 +1,91 @@
+import { Flex } from '@semcore/ui/base-components';
+import Button from '@semcore/ui/button';
+import ColorPicker, { PaletteManager } from '@semcore/ui/color-picker';
+import Radio, { RadioGroup } from '@semcore/ui/radio';
+import Slider from '@semcore/ui/slider';
+import { Text } from '@semcore/ui/typography';
+import React from 'react';
+
+import InlineNumberInput from '../../../../../../../components/inline-input/docs/examples/number-only_input';
+import InputNumberDemo from '../../../../../../../components/input-number/docs/examples/range_of_values';
+
+export function ArticleLaunchForm() {
+  const [distribution, setDistribution] = React.useState('site');
+  const [promotionLevel, setPromotionLevel] = React.useState('standard');
+
+  return (
+    <Flex direction='column' gap={6}>
+      <Flex direction='column' gap={2}>
+        <Text size={300} tag='h3' semibold>
+          Target word count
+        </Text>
+        <InputNumberDemo />
+      </Flex>
+
+      <Flex direction='column' gap={2}>
+        <Text size={300} semibold>
+          Editorial revision round
+        </Text>
+        <InlineNumberInput />
+      </Flex>
+
+      <RadioGroup
+        name='article-launch-distribution'
+        aria-labelledby='article-launch-distribution-label'
+        value={distribution}
+        onChange={(v: string) => setDistribution(v)}
+        size='m'
+      >
+        <Text id='article-launch-distribution-label' size={300} semibold>
+          Distribution
+        </Text>
+        <Flex direction='column' mt={2}>
+          <Radio mb={3} value='site' label='Website only' />
+          <Radio value='site-newsletter' label='Website + newsletter' />
+        </Flex>
+      </RadioGroup>
+
+      <Flex direction='column' gap={2}>
+        <Text tag='label' size={300} semibold htmlFor='article-hero-accent'>
+          Hero accent color
+        </Text>
+        <ColorPicker>
+          <ColorPicker.Trigger id='article-hero-accent' />
+          <ColorPicker.Popper>
+            <ColorPicker.Colors />
+            <PaletteManager>
+              <PaletteManager.Colors />
+              <PaletteManager.InputColor />
+            </PaletteManager>
+          </ColorPicker.Popper>
+        </ColorPicker>
+      </Flex>
+
+      <Flex direction='column' gap={2} alignItems='flex-start'>
+        <Text tag='label' size={300} semibold htmlFor='article-promotion-level'>
+          Launch promotion intensity
+        </Text>
+        <Slider
+          w='50%'
+          id='article-promotion-level'
+          max={3}
+          min={1}
+          options={[
+            { value: 'organic', label: 'Organic only' },
+            { value: 'standard', label: 'Standard push' },
+            { value: 'maximum', label: 'Maximum spotlight' },
+          ]}
+          step={1}
+          value={promotionLevel}
+          onChange={setPromotionLevel}
+        />
+      </Flex>
+
+      <Flex>
+        <Button size='l' use='primary' theme='success'>
+          Launch article
+        </Button>
+      </Flex>
+    </Flex>
+  );
+}
diff --git a/stories/patterns/core/tests/all-components/components/Form/CardBodySkeleton.tsx b/stories/patterns/core/tests/all-components/components/Form/CardBodySkeleton.tsx
new file mode 100644
index 0000000000..cd3757eb27
--- /dev/null
+++ b/stories/patterns/core/tests/all-components/components/Form/CardBodySkeleton.tsx
@@ -0,0 +1,34 @@
+import Skeleton from '@semcore/ui/skeleton';
+import React from 'react';
+
+type CardBodySkeletonProps = {
+  contentReady: boolean;
+  h: number;
+  children: React.ReactNode;
+};
+
+function CardBodySkeletonMaskRects() {
+  return (
+    <>
+      <rect height='40' rx='4' ry='4' width='40%' x='0' y='0' />
+      <rect height='8' rx='4' ry='4' width='60%' x='0' y='50' />
+      <rect height='40' rx='4' ry='4' width='100%' x='0' y='70' />
+    </>
+  );
+}
+
+export function CardBodySkeleton({
+  contentReady,
+  h,
+  children,
+}: CardBodySkeletonProps) {
+  if (!contentReady) {
+    return (
+      <Skeleton w='100%' h={h}>
+        <CardBodySkeletonMaskRects />
+      </Skeleton>
+    );
+  }
+
+  return <>{children}</>;
+}
diff --git a/stories/patterns/core/tests/all-components/components/Form/FormCards.tsx b/stories/patterns/core/tests/all-components/components/Form/FormCards.tsx
new file mode 100644
index 0000000000..8666091f25
--- /dev/null
+++ b/stories/patterns/core/tests/all-components/components/Form/FormCards.tsx
@@ -0,0 +1,76 @@
+import { Flex } from '@semcore/ui/base-components';
+import Card from '@semcore/ui/card';
+import { Text } from '@semcore/ui/typography';
+import React from 'react';
+
+import { ArticleLaunchForm } from './ArticleLaunchForm';
+import { CardBodySkeleton } from './CardBodySkeleton';
+import type { FormTabColumnStyle } from './form-utils';
+import { RequestForm } from './RequestForm';
+import HeadingTagAccordion from '../../../../../../components/accordion/docs/examples/heading_tag';
+import NonCompactAccordion from '../../../../../../components/accordion/docs/examples/non_compact';
+import BulkTextareaBasicExample from '../../../../../../components/bulk-textarea/docs/examples/basic-usage';
+import CarouselStory from '../../../../../../components/carousel/docs/examples/carousel_with_default_indicators';
+
+type FormCardsProps = {
+  columnStyle: FormTabColumnStyle;
+  contentReady: boolean;
+};
+
+export function FormCards({ columnStyle, contentReady }: FormCardsProps) {
+  return (
+    <>
+      <Flex direction='column' gap={4} style={columnStyle}>
+        <RequestForm mt={0} contentReady={contentReady} />
+        <Card w='100%'>
+          <Card.Header>
+            <Card.Title innerHint='Schedule, channels, and visuals before publish'>
+              Article content launch
+            </Card.Title>
+          </Card.Header>
+          <Card.Body tag={Flex} direction='column' gap={6}>
+            <CardBodySkeleton contentReady={contentReady} h={560}>
+              <ArticleLaunchForm />
+            </CardBodySkeleton>
+          </Card.Body>
+        </Card>
+      </Flex>
+
+      <Flex direction='column' gap={4} style={columnStyle}>
+        <Card w='100%'>
+          <Card.Header>
+            <Card.Title tag='h3'>FAQ</Card.Title>
+          </Card.Header>
+          <Card.Body tag={Flex} direction='column'>
+            <CardBodySkeleton contentReady={contentReady} h={200}>
+              <NonCompactAccordion />
+              <Text size={300} my={3} semibold>
+                Accordion with heading tag
+              </Text>
+              <HeadingTagAccordion />
+            </CardBodySkeleton>
+          </Card.Body>
+        </Card>
+
+        <Card w='100%'>
+          <Card.Body tag={Flex} gap={4} alignItems='flex-start'>
+            <CardBodySkeleton contentReady={contentReady} h={160}>
+              <CarouselStory />
+              <Text>
+                Description of carousel...
+              </Text>
+            </CardBodySkeleton>
+          </Card.Body>
+        </Card>
+
+        <Card w='100%'>
+          <Card.Body tag={Flex} direction='column'>
+            <CardBodySkeleton contentReady={contentReady} h={320}>
+              <BulkTextareaBasicExample />
+            </CardBodySkeleton>
+          </Card.Body>
+        </Card>
+      </Flex>
+    </>
+  );
+}
diff --git a/stories/patterns/core/tests/all-components/components/Form/RequestForm/EmailTagsField.tsx b/stories/patterns/core/tests/all-components/components/Form/RequestForm/EmailTagsField.tsx
new file mode 100644
index 0000000000..f748f26d57
--- /dev/null
+++ b/stories/patterns/core/tests/all-components/components/Form/RequestForm/EmailTagsField.tsx
@@ -0,0 +1,151 @@
+import { Flex } from '@semcore/ui/base-components';
+import Counter from '@semcore/ui/counter';
+import InputTags from '@semcore/ui/input-tags';
+import Tooltip from '@semcore/ui/tooltip';
+import { Text } from '@semcore/ui/typography';
+import React from 'react';
+
+const MAX_EMAIL_TAGS = 5;
+
+const isEmailValid = (val: string) => /.+@.+\..+/i.test(val);
+
+function useEmailInputTags() {
+  const [emails, setEmails] = React.useState<string[]>([]);
+  const [emailTagInput, setEmailTagInput] = React.useState('');
+  const [focused, setFocused] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+
+  const handleAppendEmailTags = React.useCallback(
+    (newTags: string[]) => {
+      if (newTags.some((tag) => !isEmailValid(tag))) {
+        setError('Email isn\'t valid.');
+        return;
+      }
+      if (emails.length + newTags.length > MAX_EMAIL_TAGS) {
+        setError(`There must be no more than ${MAX_EMAIL_TAGS} emails.`);
+        return;
+      }
+      setEmails([...emails, ...newTags]);
+      setEmailTagInput('');
+      setError(null);
+    },
+    [emails],
+  );
+
+  const handleEmailTagBlur = React.useCallback((e: React.FocusEvent<HTMLInputElement>) => {
+    if (e.target.value && !isEmailValid(e.target.value)) {
+      setError('Email isn\'t valid.');
+    }
+    setFocused(false);
+  }, []);
+
+  const handleEmailTagChange = React.useCallback((value: string) => {
+    setEmailTagInput(value);
+    if (!value || isEmailValid(value)) {
+      setError(null);
+    }
+  }, []);
+
+  const handleRemoveEmailTag = React.useCallback(() => {
+    if (emails.length === 0) return;
+    setEmails(emails.slice(0, -1));
+    setEmailTagInput(`${emails.slice(-1)[0]} ${emailTagInput}`);
+  }, [emails, emailTagInput]);
+
+  const handleCloseEmailTag = React.useCallback(
+    (e: React.MouseEvent<HTMLButtonElement>) => {
+      const { dataset } = e.currentTarget;
+      setEmails(emails.filter((_tag, idx) => idx !== Number(dataset.id)));
+    },
+    [emails],
+  );
+
+  const invalid = Boolean(error);
+  const showErrorTooltip = focused && invalid;
+
+  return {
+    emails,
+    emailTagInput,
+    error,
+    invalid,
+    showErrorTooltip,
+    handleAppendEmailTags,
+    handleEmailTagBlur,
+    handleEmailTagChange,
+    handleRemoveEmailTag,
+    handleCloseEmailTag,
+    handleFocus: () => setFocused(true),
+  };
+}
+
+export function EmailTagsField() {
+  const {
+    emails,
+    emailTagInput,
+    error,
+    invalid,
+    showErrorTooltip,
+    handleAppendEmailTags,
+    handleEmailTagBlur,
+    handleEmailTagChange,
+    handleRemoveEmailTag,
+    handleCloseEmailTag,
+    handleFocus,
+  } = useEmailInputTags();
+
+  return (
+    <Flex direction='column' gap={2}>
+      <Flex alignItems='baseline'>
+        <Text size={300} tag='label' htmlFor='request-form-emails'>
+          Emails
+        </Text>
+        <Counter
+          ml={1}
+          size='l'
+          theme={emails.length < MAX_EMAIL_TAGS ? '' : 'warning'}
+        >
+          {`${emails.length}/${MAX_EMAIL_TAGS}`}
+        </Counter>
+      </Flex>
+      <Tooltip
+        interaction='none'
+        placement='right'
+        theme='warning'
+        w='100%'
+        animationsDisabled
+        visible={showErrorTooltip}
+      >
+        <Tooltip.Trigger
+          tag={InputTags}
+          size='l'
+          state={invalid ? 'invalid' : 'normal'}
+          onAppend={handleAppendEmailTags}
+          onRemove={handleRemoveEmailTag}
+        >
+          {emails.map((tag, idx) => (
+            <InputTags.Tag key={idx}>
+              <InputTags.Tag.Text>{tag}</InputTags.Tag.Text>
+              <InputTags.Tag.Close data-id={idx} onClick={handleCloseEmailTag} />
+            </InputTags.Tag>
+          ))}
+          <InputTags.Value
+            id='request-form-emails'
+            name='email'
+            type='email'
+            autoComplete='email'
+            value={emailTagInput}
+            onChange={handleEmailTagChange}
+            onBlur={handleEmailTagBlur}
+            onFocus={handleFocus}
+            aria-invalid={invalid}
+            aria-describedby={showErrorTooltip ? 'request-form-emails-error' : undefined}
+            __excludeProps={['aria-haspopup']}
+          />
+        </Tooltip.Trigger>
+        <Tooltip.Popper id='request-form-emails-error'>
+          {error ?? ''}
+        </Tooltip.Popper>
+      </Tooltip>
+    </Flex>
+  );
+}
diff --git a/stories/patterns/core/tests/all-components/components/Form/RequestForm/countries.ts b/stories/patterns/core/tests/all-components/components/Form/RequestForm/countries.ts
new file mode 100644
index 0000000000..e0efa122cd
--- /dev/null
+++ b/stories/patterns/core/tests/all-components/components/Form/RequestForm/countries.ts
@@ -0,0 +1,6 @@
+export const REQUEST_FORM_COUNTRIES = {
+  US: { name: 'United States', prefix: '+1', mask: '+1 (___) ___-____' },
+  GB: { name: 'United Kingdom', prefix: '+44', mask: '+44 ____ ______' },
+} as const;
+
+export type RequestFormCountryKey = keyof typeof REQUEST_FORM_COUNTRIES;
diff --git a/stories/patterns/core/tests/all-components/components/Form/RequestForm/index.tsx b/stories/patterns/core/tests/all-components/components/Form/RequestForm/index.tsx
new file mode 100644
index 0000000000..7aa5b57eac
--- /dev/null
+++ b/stories/patterns/core/tests/all-components/components/Form/RequestForm/index.tsx
@@ -0,0 +1,130 @@
+import { Box, Flex } from '@semcore/ui/base-components';
+import Button from '@semcore/ui/button';
+import Card from '@semcore/ui/card';
+import Checkbox from '@semcore/ui/checkbox';
+import Input from '@semcore/ui/input';
+import InputMask from '@semcore/ui/input-mask';
+import Select from '@semcore/ui/select';
+import Textarea from '@semcore/ui/textarea';
+import { Text } from '@semcore/ui/typography';
+import React from 'react';
+
+import { CardBodySkeleton } from '../CardBodySkeleton';
+import { REQUEST_FORM_COUNTRIES, type RequestFormCountryKey } from './countries';
+import { EmailTagsField } from './EmailTagsField';
+import Switch from '../../../../../../../components/switch/docs/examples/basic_example';
+
+type RequestFormProps = {
+  mt?: number;
+  contentReady?: boolean;
+};
+
+export function RequestForm({ mt = 4, contentReady = true }: RequestFormProps) {
+  const phoneRef = React.useRef<HTMLInputElement>(null);
+  const [country, setCountry] = React.useState<RequestFormCountryKey>('US');
+  const prefix = REQUEST_FORM_COUNTRIES[country].prefix;
+  const [phone, setPhone] = React.useState<string>(prefix);
+  const [mask, setMask] = React.useState(REQUEST_FORM_COUNTRIES[country].mask);
+
+  React.useEffect(() => {
+    setPhone(prefix);
+    setMask(REQUEST_FORM_COUNTRIES[country].mask);
+  }, [country, prefix]);
+
+  return (
+    <Card mt={mt}>
+      <Card.Header>
+        <Card.Title innerHint='Something'>Request a Custom Plan</Card.Title>
+      </Card.Header>
+      <Card.Body tag={Flex} direction='column' gap={4}>
+        <CardBodySkeleton contentReady={contentReady} h={400}>
+          <>
+            <Text size={300}>
+              Please fill out and submit the contact form below to request a Custom Plan.
+            </Text>
+
+            <Flex direction='column' gap={6}>
+              <Flex direction='column' gap={2}>
+                <Text tag='label' size={300} htmlFor='request-form-name'>
+                  Your name
+                </Text>
+                <Input size='l'>
+                  <Input.Value id='request-form-name' />
+                </Input>
+              </Flex>
+
+              <Flex direction='column' gap={2}>
+                <Text tag='label' size={300} htmlFor='request-form-phone'>
+                  Phone
+                </Text>
+                <Box w='100%'>
+                  <Select
+                    value={country}
+                    onChange={(value: RequestFormCountryKey) => {
+                      setCountry(value);
+                      setTimeout(() => phoneRef.current?.focus(), 0);
+                    }}
+                    size='l'
+                  >
+                    <Select.Trigger aria-label='Country code' neighborLocation='right' />
+                    <Select.Menu>
+                      {Object.entries(REQUEST_FORM_COUNTRIES).map(([key, c]) => (
+                        <Select.Option key={key} value={key}>
+                          <Text size={200} mr={2}>
+                            {c.name}
+                          </Text>
+                          <Text size={200} color='text-secondary'>
+                            {c.prefix}
+                          </Text>
+                        </Select.Option>
+                      ))}
+                    </Select.Menu>
+                  </Select>
+                  <InputMask w='90%' neighborLocation='left' size='l'>
+                    <InputMask.Value
+                      id='request-form-phone'
+                      ref={phoneRef}
+                      value={phone}
+                      onChange={(value) => setPhone(value)}
+                      aliases={{ _: /\d/ }}
+                      mask={mask}
+                      type='tel'
+                      autoComplete='tel'
+                    />
+                  </InputMask>
+                </Box>
+              </Flex>
+
+              <EmailTagsField />
+
+              <Flex direction='column' gap={2}>
+                <Flex justifyContent='space-between' alignItems='baseline'>
+                  <Text tag='label' size={300} htmlFor='request-form-details'>
+                    Additional details
+                  </Text>
+                  <Text size={300} color='text-secondary'>
+                    (optional)
+                  </Text>
+                </Flex>
+                <Textarea size='l' id='request-form-details' />
+              </Flex>
+
+              <Checkbox size='l' label={'I agree to the Terms and Conditions\nand Privacy Policy'} />
+
+              <Switch />
+            </Flex>
+
+            <Flex flexWrap gap={3} pt={4}>
+              <Button size='l' use='primary' theme='success'>
+                Send request
+              </Button>
+              <Button size='l' use='secondary' theme='muted'>
+                Cancel
+              </Button>
+            </Flex>
+          </>
+        </CardBodySkeleton>
+      </Card.Body>
+    </Card>
+  );
+}
diff --git a/stories/patterns/core/tests/all-components/components/Form/form-utils/constants.ts b/stories/patterns/core/tests/all-components/components/Form/form-utils/constants.ts
new file mode 100644
index 0000000000..dfbc98b622
--- /dev/null
+++ b/stories/patterns/core/tests/all-components/components/Form/form-utils/constants.ts
@@ -0,0 +1,9 @@
+export const FORM_TAB_LOADING_MS = 3000;
+
+export const FORM_TAB_COLUMN_STYLE = {
+  flex: '1 1 calc(50% - 8px)',
+  minWidth: 0,
+  maxWidth: 'calc(50% - 8px)',
+} as const;
+
+export type FormTabColumnStyle = typeof FORM_TAB_COLUMN_STYLE;
diff --git a/stories/patterns/core/tests/all-components/components/Form/form-utils/index.ts b/stories/patterns/core/tests/all-components/components/Form/form-utils/index.ts
new file mode 100644
index 0000000000..92245ff0da
--- /dev/null
+++ b/stories/patterns/core/tests/all-components/components/Form/form-utils/index.ts
@@ -0,0 +1,6 @@
+export {
+  FORM_TAB_COLUMN_STYLE,
+  FORM_TAB_LOADING_MS,
+  type FormTabColumnStyle,
+} from './constants';
+export { useSimulatedSkeleton } from './useSimulatedSkeleton';
diff --git a/stories/patterns/core/tests/all-components/components/Form/form-utils/useSimulatedSkeleton.ts b/stories/patterns/core/tests/all-components/components/Form/form-utils/useSimulatedSkeleton.ts
new file mode 100644
index 0000000000..1acd6c08aa
--- /dev/null
+++ b/stories/patterns/core/tests/all-components/components/Form/form-utils/useSimulatedSkeleton.ts
@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { FORM_TAB_LOADING_MS } from './constants';
+
+export function useSimulatedSkeleton(): boolean {
+  const [contentReady, setContentReady] = React.useState(false);
+
+  React.useEffect(() => {
+    const timer = window.setTimeout(() => setContentReady(true), FORM_TAB_LOADING_MS);
+    return () => window.clearTimeout(timer);
+  }, []);
+
+  return contentReady;
+}
diff --git a/stories/patterns/core/tests/all-components/components/Form/index.tsx b/stories/patterns/core/tests/all-components/components/Form/index.tsx
new file mode 100644
index 0000000000..f04cf64555
--- /dev/null
+++ b/stories/patterns/core/tests/all-components/components/Form/index.tsx
@@ -0,0 +1,24 @@
+import { Flex } from '@semcore/ui/base-components';
+import React from 'react';
+
+import { FORM_TAB_COLUMN_STYLE, useSimulatedSkeleton } from './form-utils';
+import { FormCards } from './FormCards';
+
+export function Form() {
+  const contentReady = useSimulatedSkeleton();
+
+  return (
+    <Flex
+      mt={4}
+      gap={4}
+      alignItems='flex-start'
+      w='100%'
+      flexWrap
+      aria-busy={!contentReady}
+      aria-live='polite'
+      role={contentReady ? undefined : 'status'}
+    >
+      <FormCards columnStyle={FORM_TAB_COLUMN_STYLE} contentReady={contentReady} />
+    </Flex>
+  );
+}
diff --git a/stories/patterns/core/tests/all-components/components/Tables/BeforeTablesControls.tsx b/stories/patterns/core/tests/all-components/components/Tables/BeforeTablesControls.tsx
index a43378e80d..1be6f6ddc0 100644
--- a/stories/patterns/core/tests/all-components/components/Tables/BeforeTablesControls.tsx
+++ b/stories/patterns/core/tests/all-components/components/Tables/BeforeTablesControls.tsx
@@ -1,11 +1,12 @@
 import Settings from '@semcore/icon/Settings/m';
-import { Box, Flex, ScreenReaderOnly } from '@semcore/ui/base-components';
+import { Flex } from '@semcore/ui/base-components';
 import Button, { ButtonLink } from '@semcore/ui/button';
 import type { DataTableProps } from '@semcore/ui/data-table';
 import { DatePicker, DateRangeComparator, DateRangePicker } from '@semcore/ui/date-picker';
 import DnD from '@semcore/ui/drag-and-drop';
 import DropdownMenu from '@semcore/ui/dropdown-menu';
 import FeaturePopover from '@semcore/ui/feature-popover';
+import TimePicker from '@semcore/ui/time-picker';
 import { Text } from '@semcore/ui/typography';
 import React from 'react';
 
@@ -41,12 +42,10 @@ export function BeforeTablesControls(props: Props) {
     }
   }, [selectedColumns, columns]);
 
-  // featurepopover
   const [fpVisible, setFpVisible] = React.useState(true);
 
   return (
     <Flex gap={3} my={4}>
-
       <DatePicker>
         <DatePicker.Trigger />
         <DatePicker.Popper />
@@ -59,12 +58,18 @@ export function BeforeTablesControls(props: Props) {
 
       <DateRangeComparator />
 
+      <TimePicker is12Hour id='primary-table-filters-time'>
+        <TimePicker.Hours />
+        <TimePicker.Separator />
+        <TimePicker.Minutes />
+        <TimePicker.Format />
+      </TimePicker>
+
       <FeaturePopover
         visible={fpVisible}
         onVisibleChange={setFpVisible}
         disablePortal
         placement='bottom-end'
-        theme='neutral'
       >
         <FeaturePopover.Trigger>
           <DropdownMenu
@@ -90,7 +95,7 @@ export function BeforeTablesControls(props: Props) {
               </Flex>
               <DropdownMenu.List hMax={500}>
                 <DnD onDnD={handleDnD} aria-label='drag-and-drop container'>
-                  {columns.map((column, index) => (
+                  {columns.map((column) => (
                     <DropdownMenu.Item
                       tag={DnD.Draggable}
                       isCustomFocus={true}
@@ -120,7 +125,8 @@ export function BeforeTablesControls(props: Props) {
         </FeaturePopover.Trigger>
         <FeaturePopover.Popper
           closeIcon
-          wMax={400}
+          autoFocus={false}
+          wMax={320}
           aria-label='New feature: Export'
         >
           <FPContent />
@@ -132,16 +138,6 @@ export function BeforeTablesControls(props: Props) {
 
 const FPContent = () => (
   <Flex alignItems='start'>
-    <Box
-      w={40}
-      h={40}
-      mr={4}
-      flex='0 0 auto'
-      style={{
-        borderRadius: '50%',
-        background: 'orange',
-      }}
-    />
     <div>
       <Text size={300} bold tag='h3' mb={1} mt={0}>
         Export your data
@@ -157,18 +153,11 @@ const FPContent = () => (
           Next
         </Button>
         <Button
-          theme='invert'
+          theme='muted'
           use='tertiary'
         >
           Remind me later
         </Button>
-
-        <Text size={200} aria-live='polite' ml='auto'>
-          Step 1
-          <span aria-hidden='true'>/</span>
-          <ScreenReaderOnly>of</ScreenReaderOnly>
-          5
-        </Text>
       </Flex>
     </div>
   </Flex>
diff --git a/stories/patterns/core/tests/all-components/components/Tables/PrimaryTable.tsx b/stories/patterns/core/tests/all-components/components/Tables/PrimaryTable.tsx
index 262cddbc8e..fa8c57e2ef 100644
--- a/stories/patterns/core/tests/all-components/components/Tables/PrimaryTable.tsx
+++ b/stories/patterns/core/tests/all-components/components/Tables/PrimaryTable.tsx
@@ -1,33 +1,42 @@
+import ReloadM from '@semcore/icon/Reload/m';
 import Return from '@semcore/icon/Return/m';
-import { Flex } from '@semcore/ui/base-components';
-import { ButtonLink } from '@semcore/ui/button';
+import TrashM from '@semcore/icon/Trash/m';
+import WarningM from '@semcore/icon/Warning/m';
+import { Box, Flex } from '@semcore/ui/base-components';
+import Button, { ButtonLink } from '@semcore/ui/button';
 import Card from '@semcore/ui/card';
 import { ACCORDION, type CellRenderProps, SelectableRows } from '@semcore/ui/data-table';
-import Divider from '@semcore/ui/divider';
+import Dot from '@semcore/ui/dot';
+import { PageError } from '@semcore/ui/errors';
+import FullscreenModal from '@semcore/ui/fullscreen-modal';
+import { NoticeBubbleContainer, NoticeBubbleManager } from '@semcore/ui/notice-bubble';
 import Pagination from '@semcore/ui/pagination';
 import Pills from '@semcore/ui/pills';
+import ProgressBar from '@semcore/ui/progress-bar';
+import SidePanel from '@semcore/ui/side-panel';
 import { Text } from '@semcore/ui/typography';
 import React, { useState } from 'react';
 import { IntlProvider } from 'react-intl';
 
 import { BeforeTablesControls } from './BeforeTablesControls';
+import PrimaryTableAddFilter from './PrimaryTableAddFilter';
 import { CopyCell, Currency, DateCell, Money, OperationType, StatusCell, TimeCell } from './table_perf/cells';
 import { SelectedRowsInfo } from './table_perf/SelectedRowsInfo';
-import Table from './table_perf/table_perf';
-import AddFilter from '../../../../../../components/add-filter/docs/examples/add-filter-basic';
+import Table, { type TableDemoState } from './table_perf/table_perf';
 import AdvancedFilter from '../../../../../filters/advanced-filters/docs/examples/filters-with-filter-conditions';
 
 const refsMap: Record<string | symbol, HTMLElement | null> = {};
 
 const COLUMNS_CONFIG = [
   {
-    id: 'payment_intent_id',
+    id: 'name',
+    copyHandle: false,
     defaultActive: true,
     Component: CopyCell,
     wMin: 180,
     ref: (node: HTMLElement | null) => {
       if (node) {
-        refsMap['payment_intent_id'] = node;
+        refsMap.name = node;
       }
     },
     fixed: 'left' as const,
@@ -84,7 +93,7 @@ const COLUMNS_CONFIG = [
     id: 'percent_tax',
     defaultActive: true,
     justifyContent: 'flex-end',
-    wMin: 120,
+    wMin: 220,
   },
   {
     id: 'currency',
@@ -186,6 +195,12 @@ const COLUMNS_CONFIG = [
     defaultActive: false,
     wMin: 100,
   },
+  {
+    id: 'actions',
+    defaultActive: true,
+    wMin: 200,
+    fixed: 'right' as const,
+  },
 ];
 
 // with React.memo
@@ -201,49 +216,6 @@ const componentsMap = Object.fromEntries(
   COLUMNS_CONFIG.map((c) => [c.id, c.Component]),
 );
 
-const CellRenderer = (props: CellRenderProps<any, any>) => {
-  const parentRowIndex = props.rowIndex;
-
-  if (parentRowIndex === 0 && props.columnName === ACCORDION) {
-    return {
-      p: 0, // set empty paddings for the first accordion
-      children: props.defaultRender(),
-    };
-  }
-
-  if (props.dataKey === 'description_ellipsis') {
-    return {
-      children: (
-        <Text
-          ellipsis:cropPosition='middle'
-        >
-          {String(props.row.payment_description)}
-        </Text>
-      ),
-    };
-  }
-
-  // @ts-ignore
-  const Component = componentsMap[props.columnName];
-  if (Component) {
-    return {
-      children: (
-        <Component
-          value={props.value}
-          row={props.row}
-          cellProps={props}
-          headerRef={refsMap[props.columnName]}
-          cropPosition='middle'
-        />
-      ),
-    };
-  }
-
-  return {
-    children: <Text>{props.value}</Text>,
-  };
-};
-
 const cols = COLUMNS_CONFIG.map((c) => ({
   name: c.id,
   children: c.id,
@@ -251,18 +223,161 @@ const cols = COLUMNS_CONFIG.map((c) => ({
   ref: c.ref,
   fixed: c.fixed,
   sortable: c.sortable,
+  alignItems: 'flex-start' as const,
+  ...('justifyContent' in c && c.justifyContent ? { justifyContent: c.justifyContent } : {}),
 }));
 
+const ALWAYS_VISIBLE_COLUMN_NAME = 'name';
+const manageableCols = cols.filter((c) => c.name !== ALWAYS_VISIBLE_COLUMN_NAME);
+
+const COLUMN_COPY_HANDLE = Object.fromEntries(
+  COLUMNS_CONFIG.map((c) => [c.id, 'copyHandle' in c ? Boolean(c.copyHandle) : true]),
+);
+
 const DEFAULT_LOCALE = 'en-US';
 const DEFAULT_MESSAGES = {};
 
 const selectedRows = new SelectableRows<string>();
 
-export default function PrimaryTable() {
-  const [columns, setColumns] = useState<string[]>(cols.map((c) => c.name));
+export type PrimaryTableProps = {
+  onPageErrorChange?: (active: boolean) => void;
+};
+
+type PillValue = TableDemoState | 'pageError' | 'progress';
+
+export default function PrimaryTable({ onPageErrorChange }: PrimaryTableProps = {}) {
+  const [columns, setColumns] = useState<string[]>(manageableCols.map((c) => c.name));
 
   const [currentPage, setCurrentPage] = React.useState(1);
+  const [pillValue, setPillValue] = React.useState<PillValue>('default');
+  const tableDemoState: TableDemoState =
+    pillValue === 'pageError' || pillValue === 'progress' ? 'default' : pillValue;
+  const [nameFilter, setNameFilter] = React.useState('');
+  const [debouncedNameFilter, setDebouncedNameFilter] = React.useState('');
+  const [sidePanelOpen, setSidePanelOpen] = React.useState(false);
+  const [sidePanelRow, setSidePanelRow] = React.useState<Record<string, unknown> | null>(null);
+  const [fullReportModalVisible, setFullReportModalVisible] = React.useState(false);
   const inputRef = React.useRef<HTMLInputElement>(null);
+  const [noticeBubbleManager] = React.useState(() => new NoticeBubbleManager());
+
+  React.useEffect(() => {
+    const id = window.setTimeout(() => setDebouncedNameFilter(nameFilter), 400);
+    return () => window.clearTimeout(id);
+  }, [nameFilter]);
+
+  const searchPending = nameFilter !== debouncedNameFilter;
+
+  const showFailureNoticeBubble = React.useCallback(() => {
+    noticeBubbleManager.add({
+      children: 'Unfortunately, your recent changes were not saved. Try again later.',
+      icon: <WarningM color='--intergalactic-icon-primary-warning' />,
+      action: (
+        <Button theme='invert' addonLeft={ReloadM}>
+          Reload the page
+        </Button>
+      ),
+      initialAnimation: true,
+      duration: 0,
+      type: 'info',
+      focusLock: false,
+    });
+  }, [noticeBubbleManager]);
+
+  const cellRenderer = React.useCallback(
+    (props: CellRenderProps<any, any>) => {
+      const parentRowIndex = props.rowIndex;
+
+      if (parentRowIndex === 0 && props.columnName === ACCORDION) {
+        return {
+          p: 0,
+          children: props.defaultRender(),
+        };
+      }
+
+      if (props.columnName === 'actions') {
+        return {
+          children: (
+            <Flex gap={2} alignItems='flex-start' inline>
+              <Button
+                use='tertiary'
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setSidePanelRow(props.row);
+                  setSidePanelOpen(true);
+                }}
+              >
+                Open SidePanel
+              </Button>
+              <Button
+                use='tertiary'
+                theme='muted'
+                addonLeft={TrashM}
+                aria-label='Delete'
+                title='Delete'
+                onClick={(e) => {
+                  e.stopPropagation();
+                  showFailureNoticeBubble();
+                }}
+              />
+            </Flex>
+          ),
+        };
+      }
+
+      if (props.dataKey === 'description_ellipsis') {
+        return {
+          children: (
+            <Text
+              ellipsis:cropPosition='middle'
+            >
+              {String(props.row.payment_description)}
+            </Text>
+          ),
+        };
+      }
+
+      if (props.columnName === 'percent_tax') {
+        return {
+          children: (
+            <Flex direction='column' alignItems='flex-end' gap={1} w='100%'>
+              <Text>{props.value != null ? String(props.value) : ''}</Text>
+              <ButtonLink
+                use='secondary'
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setFullReportModalVisible(true);
+                }}
+              >
+                Open full report
+              </ButtonLink>
+            </Flex>
+          ),
+        };
+      }
+
+      // @ts-ignore
+      const Component = componentsMap[props.columnName];
+      if (Component) {
+        return {
+          children: (
+            <Component
+              value={props.value}
+              row={props.row}
+              cellProps={props}
+              headerRef={refsMap[props.columnName]}
+              cropPosition='middle'
+              handle={COLUMN_COPY_HANDLE[props.columnName as string] ?? true}
+            />
+          ),
+        };
+      }
+
+      return {
+        children: <Text>{props.value}</Text>,
+      };
+    },
+    [showFailureNoticeBubble],
+  );
 
   const handleApplyPage = () => {
     const newValue = Number(inputRef.current?.value);
@@ -283,73 +398,143 @@ export default function PrimaryTable() {
     });
   }, [columns, setColumns]);
 
+  const mainTableContent =
+    pillValue === 'pageError'
+      ? (
+          <Box w='100%'>
+            <PageError />
+          </Box>
+        )
+      : (
+          <Card w='100%'>
+            <Card.Body p={0}>
+              <Flex justifyContent='space-between' alignItems='center' px={4}>
+                <SelectedRowsInfo selectedRows={selectedRows} />
+
+                <BeforeTablesControls
+                  columns={manageableCols}
+                  selectedColumns={columns}
+                  setSelectedColumns={(columns: string[] | null) => {
+                    if (columns === null) {
+                      setColumns(manageableCols.map((c) => c.name));
+                    } else {
+                      setColumns(columns);
+                    }
+                  }}
+                  onChangeColumns={handleChangeColumns}
+                />
+              </Flex>
+              <Table
+                loading={searchPending}
+                currentPage={currentPage}
+                selectedRows={selectedRows}
+                columns={cols.filter((c) => c.name === ALWAYS_VISIBLE_COLUMN_NAME || columns.includes(c.name))}
+                CellRenderer={cellRenderer}
+                demoState={tableDemoState}
+                nameSearchQuery={debouncedNameFilter}
+              />
+              <Pagination currentPage={currentPage} totalPages={100} onCurrentPageChange={setCurrentPage} p={4}>
+                <Pagination.FirstPage />
+                <Pagination.PrevPage />
+                <Pagination.NextPage />
+                <Pagination.PageInput>
+                  <Pagination.PageInput.Value ref={inputRef} />
+                  {/* @ts-ignore */}
+                  <Pagination.PageInput.Addon
+                    data-testid='selectPageButton'
+                    tag={ButtonLink}
+                    onClick={handleApplyPage}
+                    p={0}
+                    h='calc(100% - 8px)'
+                  >
+                    <ButtonLink.Addon tag={Return} />
+                  </Pagination.PageInput.Addon>
+                </Pagination.PageInput>
+                <Pagination.TotalPages />
+              </Pagination>
+            </Card.Body>
+          </Card>
+        );
+
   return (
     <IntlProvider
       locale={DEFAULT_LOCALE}
       defaultLocale={DEFAULT_LOCALE}
       messages={DEFAULT_MESSAGES}
     >
-      <Flex gap={3} alignItems='center' my={4} justifyContent='space-between'>
-        <Flex>
-          <Pills defaultValue={1}>
-            <Pills.Item value={1}>Visibility</Pills.Item>
-            <Pills.Item value={2}>Est. Traffic</Pills.Item>
-            <Pills.Item value={3}>Avg. Position</Pills.Item>
+      <Flex gap={3} alignItems='flex-start' my={4} justifyContent='space-between'>
+        <Flex gap={2} alignItems='flex-start'>
+          <Pills
+            value={pillValue}
+            onChange={(v: string | null) => {
+              if (v === 'default' || v === 'progress' || v === 'limited' || v === 'pageError') {
+                setPillValue(v);
+                onPageErrorChange?.(v === 'pageError');
+              }
+            }}
+            aria-label='Table state'
+          >
+            <Pills.Item value='default'>Default state</Pills.Item>
+            <Pills.Item value='progress'>Progress</Pills.Item>
+            <Pills.Item value='limited'>
+              <Pills.Item.Text>Limited data</Pills.Item.Text>
+              <Dot
+                aria-label='New'
+                size='l'
+                up={true}
+              />
+            </Pills.Item>
+            <Pills.Item value='pageError'>Page error</Pills.Item>
           </Pills>
-          <Divider orientation='vertical' mx={2} />
-          <AddFilter />
+          <PrimaryTableAddFilter nameFilter={nameFilter} onNameFilterChange={setNameFilter} />
         </Flex>
 
-        <AdvancedFilter />
+        <Flex gap={3} alignItems='center'>
+          {pillValue === 'progress' && (
+            <ProgressBar
+              tabIndex={0}
+              value={65}
+              size='l'
+              w={120}
+              aria-label='Progress'
+            >
+              <ProgressBar.Value />
+            </ProgressBar>
+          )}
+          <AdvancedFilter />
+        </Flex>
 
       </Flex>
 
-      <Card w='100%'>
-        <Card.Body p={0}>
-          <Flex justifyContent='space-between' px={4}>
-            <SelectedRowsInfo selectedRows={selectedRows} />
-
-            <BeforeTablesControls
-              columns={cols}
-              selectedColumns={columns}
-              setSelectedColumns={(columns: string[] | null) => {
-                if (columns === null) {
-                  setColumns(cols.map((c) => c.name));
-                } else {
-                  setColumns(columns);
-                }
-              }}
-              onChangeColumns={handleChangeColumns}
-            />
-          </Flex>
-          <Table
-            loading={false}
-            currentPage={currentPage}
-            selectedRows={selectedRows}
-            columns={cols.filter((c) => columns.includes(c.name))}
-            CellRenderer={CellRenderer}
-          />
-          <Pagination currentPage={currentPage} totalPages={100} onCurrentPageChange={setCurrentPage} p={4}>
-            <Pagination.FirstPage />
-            <Pagination.PrevPage />
-            <Pagination.NextPage />
-            <Pagination.PageInput>
-              <Pagination.PageInput.Value ref={inputRef} />
-              {/* @ts-ignore */}
-              <Pagination.PageInput.Addon
-                data-testid='selectPageButton'
-                tag={ButtonLink}
-                onClick={handleApplyPage}
-                p={0}
-                h='calc(100% - 8px)'
-              >
-                <ButtonLink.Addon tag={Return} />
-              </Pagination.PageInput.Addon>
-            </Pagination.PageInput>
-            <Pagination.TotalPages />
-          </Pagination>
-        </Card.Body>
-      </Card>
+      {mainTableContent}
+
+      <NoticeBubbleContainer manager={noticeBubbleManager} />
+
+      <SidePanel
+        visible={sidePanelOpen}
+        onClose={() => {
+          setSidePanelOpen(false);
+          setSidePanelRow(null);
+        }}
+        aria-label='Row data'
+      >
+        <SidePanel.Body px={5} py={4}>
+          {sidePanelRow && (
+            <Text tag='p' size={200}>
+              payment_intent_id:
+              {' '}
+              {String(sidePanelRow.payment_intent_id ?? '')}
+            </Text>
+          )}
+        </SidePanel.Body>
+      </SidePanel>
+
+      <FullscreenModal visible={fullReportModalVisible} onClose={() => setFullReportModalVisible(false)}>
+        <FullscreenModal.Close />
+        <FullscreenModal.Back>Go to Tool Name</FullscreenModal.Back>
+        <FullscreenModal.Header title='Modal Window Title' description='Additional information' />
+        <FullscreenModal.Footer />
+      </FullscreenModal>
     </IntlProvider>
   );
 };
diff --git a/stories/patterns/core/tests/all-components/components/Tables/PrimaryTableAddFilter.tsx b/stories/patterns/core/tests/all-components/components/Tables/PrimaryTableAddFilter.tsx
new file mode 100644
index 0000000000..11bd46850c
--- /dev/null
+++ b/stories/patterns/core/tests/all-components/components/Tables/PrimaryTableAddFilter.tsx
@@ -0,0 +1,187 @@
+import CloseM from '@semcore/icon/Close/m';
+import SearchM from '@semcore/icon/Search/m';
+import AddFilter from '@semcore/ui/add-filter';
+import { FilterTrigger } from '@semcore/ui/base-trigger';
+import { ButtonLink } from '@semcore/ui/button';
+import Input from '@semcore/ui/input';
+import Select from '@semcore/ui/select';
+import React from 'react';
+
+type FilterData = Record<string, any>;
+
+const defaultFilterData = {
+  name: '',
+  size: '',
+  Device: '',
+  Language: '',
+  Material: '',
+  Shape: '',
+  Color: '',
+};
+
+export type PrimaryTableAddFilterProps = {
+  nameFilter?: string;
+  onNameFilterChange?: (value: string) => void;
+};
+
+const filters = [
+  {
+    name: 'Color',
+    values: ['Blue', 'Gray', 'Green', 'Orange', 'Pink', 'Red', 'Salad', 'Violet', 'Yellow'],
+  },
+  {
+    id: '254c8b3d-bd58-4019-ae45-0e0babfadd34',
+    name: 'Device',
+    values: ['Desktop', 'Phone', 'Tablet'],
+  },
+  {
+    id: 'bdf21be3-b398-4e0c-bcbe-6afa7fcab43e',
+    name: 'Language',
+    values: ['Chinese', 'English', 'French', 'German', 'Italian', 'Korean', 'Spanish', 'Turkish'],
+  },
+  {
+    id: 'e8409dcd-a3ad-405b-8840-4623e752cb92',
+    name: 'Material',
+    values: ['Glass', 'Metal', 'Paper', 'Wood'],
+  },
+  {
+    id: '80b9d5ae-882f-4457-9beb-f6481cfe26c6',
+    name: 'Shape',
+    values: ['Circle', 'Rectangle', 'Star', 'Triangle'],
+  },
+];
+
+const sizes = ['Small', 'Medium', 'Large'];
+
+function PrimaryTableAddFilter({
+  nameFilter: nameFilterProp,
+  onNameFilterChange,
+}: PrimaryTableAddFilterProps = {}) {
+  const isNameControlled = onNameFilterChange !== undefined;
+  const [filterData, setFilterData] = React.useState<FilterData>(defaultFilterData);
+
+  React.useEffect(() => {
+    if (!isNameControlled || nameFilterProp === undefined) {
+      return;
+    }
+    setFilterData((prev) => (prev.name === nameFilterProp ? prev : { ...prev, name: nameFilterProp }));
+  }, [isNameControlled, nameFilterProp]);
+
+  const filterDataForUi = isNameControlled ? { ...filterData, name: nameFilterProp ?? '' } : filterData;
+
+  const updateFilterData = (value: string, name: string) => {
+    if (name === 'name' && isNameControlled) {
+      onNameFilterChange(value);
+      return;
+    }
+    setFilterData((prevData) => {
+      return { ...prevData, ...{ [name]: value } };
+    });
+  };
+
+  const clearField = React.useCallback(
+    (name: keyof FilterData) => {
+      if (name === 'name' && isNameControlled) {
+        onNameFilterChange?.('');
+        return;
+      }
+      const tempData = { ...filterData, [name]: '' };
+      setFilterData(tempData);
+    },
+    [filterData, isNameControlled, onNameFilterChange],
+  );
+
+  return (
+    <AddFilter
+      filterData={filterDataForUi}
+      onClearAll={() => {
+        setFilterData(defaultFilterData);
+        if (isNameControlled) {
+          onNameFilterChange?.('');
+        }
+      }}
+      gap={2}
+      flexWrap
+    >
+      <Input w={160}>
+        <Input.Addon>
+          <SearchM />
+        </Input.Addon>
+        <Input.Value
+          value={filterDataForUi.name}
+          onChange={(v) => updateFilterData(v, 'name')}
+          placeholder='Filter by name'
+          aria-label='Filter by name'
+        />
+        {filterDataForUi.name && (
+          <Input.Addon>
+            <ButtonLink
+              use='secondary'
+              addonLeft={CloseM}
+              title='Clear'
+              onClick={() => clearField('name')}
+            />
+          </Input.Addon>
+        )}
+      </Input>
+
+      <Select value={filterDataForUi.size} onChange={(v: string) => updateFilterData(v, 'size')}>
+        <Select.Trigger
+          empty={!filterDataForUi.size}
+          placeholder='Size'
+          tag={FilterTrigger}
+          onClear={() => clearField('size')}
+          aria-label='Size'
+        >
+          <span aria-hidden>Size:</span>
+          {' '}
+          {filterDataForUi.size}
+        </Select.Trigger>
+        <Select.Menu aria-label='Size'>
+          {sizes.map((item, idx) => (
+            <Select.Option key={idx} value={item}>
+              {item}
+            </Select.Option>
+          ))}
+        </Select.Menu>
+      </Select>
+
+      {filters.map(({ name, values }) => {
+        return (
+          <AddFilter.Select
+            key={name}
+            name={name}
+            displayName={name}
+            onChange={(v: any) => {
+              updateFilterData(v, name);
+            }}
+          >
+            <AddFilter.Select.Trigger
+              placeholder={name}
+              aria-label={name}
+              onClear={() => {
+                clearField(name);
+              }}
+            >
+              <span aria-hidden>
+                {name}
+                :
+              </span>
+              {' '}
+              {filterDataForUi[name]}
+            </AddFilter.Select.Trigger>
+            <AddFilter.Select.Menu aria-label={name}>
+              {values.map((item, idx) => (
+                <AddFilter.Select.Option key={idx} value={item}>
+                  {item}
+                </AddFilter.Select.Option>
+              ))}
+            </AddFilter.Select.Menu>
+          </AddFilter.Select>
+        );
+      })}
+    </AddFilter>
+  );
+}
+
+export default PrimaryTableAddFilter;
diff --git a/stories/patterns/core/tests/all-components/components/Tables/SecondaryTable.tsx b/stories/patterns/core/tests/all-components/components/Tables/SecondaryTable.tsx
index 88b4886ddd..d873e13edb 100644
--- a/stories/patterns/core/tests/all-components/components/Tables/SecondaryTable.tsx
+++ b/stories/patterns/core/tests/all-components/components/Tables/SecondaryTable.tsx
@@ -1,10 +1,17 @@
 import LinkExternalM from '@semcore/icon/LinkExternal/m';
+import SortDesc from '@semcore/icon/SortDesc/m';
+import { Flex } from '@semcore/ui/base-components';
 import { DataTable } from '@semcore/ui/data-table';
 import Link from '@semcore/ui/link';
 import React from 'react';
 
 const removeProtocol = (url: string): string => url.replace(/^(http|https):\/\//, '');
 
+const parseKd = (kd: string) => {
+  const num = Number(kd);
+  return Number.isFinite(num) ? num : Number.NEGATIVE_INFINITY;
+};
+
 export function SecondaryTable() {
   const urlRef = React.useRef(null);
   const [columnElement, setColumnElement] = React.useState<HTMLElement | undefined>(undefined);
@@ -15,16 +22,27 @@ export function SecondaryTable() {
     }
   }, []);
 
+  const sortedData = React.useMemo(
+    () => [...data].sort((a, b) => parseKd(b.kd) - parseKd(a.kd)),
+    [],
+  );
+
   return (
     <DataTable
-      data={data}
+      data={sortedData}
       use='secondary'
+      variant='card'
       aria-label='Table title'
       columns={[
         { name: 'keyword', children: 'Keyword' },
         {
           name: 'kd',
-          children: 'KD, %',
+          children: (
+            <Flex alignItems='center' justifyContent='flex-end' gap={1}>
+              KD, %
+              <SortDesc color='icon-secondary-neutral' />
+            </Flex>
+          ),
           gtcWidth: 'minmax(70px, auto)',
           justifyContent: 'flex-end',
         },
@@ -99,6 +117,24 @@ const data = [
     cpc: '$0.65',
     url: 'https://developer.semrush.com/intergalactic/',
   },
+  {
+    keyword: 'buy on ebay',
+    kd: '34.1',
+    cpc: '$2.10',
+    url: 'https://www.ebay.com/',
+  },
+  {
+    keyword: 'ebay deals',
+    kd: '58.3',
+    cpc: '$1.80',
+    url: 'https://www.ebay.com/deals',
+  },
+  {
+    keyword: 'semrush intergalactic',
+    kd: '5.7',
+    cpc: '$0.00',
+    url: 'https://developer.semrush.com/intergalactic/',
+  },
   {
     keyword: 'ebay buy',
     kd: '-',
diff --git a/stories/patterns/core/tests/all-components/components/Tables/index.tsx b/stories/patterns/core/tests/all-components/components/Tables/index.tsx
index d3a029184f..d8a0e78339 100644
--- a/stories/patterns/core/tests/all-components/components/Tables/index.tsx
+++ b/stories/patterns/core/tests/all-components/components/Tables/index.tsx
@@ -1,70 +1,44 @@
-import Accordion from '@semcore/ui/accordion';
-import { Flex, Box } from '@semcore/ui/base-components';
+import { Box, Flex } from '@semcore/ui/base-components';
 import Card from '@semcore/ui/card';
-import { Text } from '@semcore/ui/typography';
 import React from 'react';
 
 import PrimaryTable from './PrimaryTable';
 import { SecondaryTable } from './SecondaryTable';
-import WidgetEmpty from '../../../../../../components/widget-empty/docs/examples/nodata_example';
+import FeedbackRatingFormExample from '../../../../../../patterns/ux-patterns/feedback-rating/docs/examples/feedback_rating_form';
+
+export type TablesProps = {
+  showPrimaryAndSecondary?: boolean;
+};
+
+export function Tables({ showPrimaryAndSecondary = true }: TablesProps) {
+  const [pageErrorActive, setPageErrorActive] = React.useState(false);
 
-export function Tables() {
   return (
     <Box w='100%'>
-      <PrimaryTable />
-
-      <Flex my={4} gap={4}>
-        <Card my={4} w='50%'>
-          <Text size={400} tag='h3' mb={3} mt={0} semibold textAlign='center'>
-            Some questions
-          </Text>
-          <Accordion use='primary'>
-            {[1, 2, 3].map((_, index) => (
-              <Accordion.Item value={index} key={index}>
-                <Accordion.Item.Toggle wMax={500} mx='auto'>
-                  <Accordion.Item.ToggleButton gap={2}>
-                    <Accordion.Item.Chevron />
-                    {`Section ${index + 1}`}
-                  </Accordion.Item.ToggleButton>
-                </Accordion.Item.Toggle>
-                <Accordion.Item.Collapse wMax={500} mx='auto'>
-                  <Box m={3} ml={6}>
-                    {`Hello Section ${index + 1}`}
-                  </Box>
-                </Accordion.Item.Collapse>
-              </Accordion.Item>
-            ))}
-          </Accordion>
-          <Text size={400} tag='h3' mb={3} mt={6} semibold textAlign='center'>
-            Other questions
-          </Text>
-          <Accordion>
-            {[1, 2, 3].map((_, index) => (
-              <Accordion.Item value={index} key={index}>
-                <Accordion.Item.Toggle wMax={500} mx='auto'>
-                  <Accordion.Item.ToggleButton gap={2}>
-                    <Accordion.Item.Chevron />
-                    {`Section ${index + 1}`}
-                  </Accordion.Item.ToggleButton>
-                </Accordion.Item.Toggle>
-                <Accordion.Item.Collapse wMax={500} mx='auto'>
-                  <Box m={3} ml={6}>
-                    {`Hello Section ${index + 1}`}
-                  </Box>
-                </Accordion.Item.Collapse>
-              </Accordion.Item>
-            ))}
-          </Accordion>
-        </Card>
+      {showPrimaryAndSecondary && (
+        <>
+          <PrimaryTable onPageErrorChange={setPageErrorActive} />
 
-        <Card w='50%'>
-          <Card.Body>
-            <WidgetEmpty />
-          </Card.Body>
-        </Card>
-      </Flex>
+          {!pageErrorActive && (
+            <>
+              <Box my={4} w='100%'>
+                <FeedbackRatingFormExample />
+              </Box>
 
-      <SecondaryTable />
+              <Flex my={4} gap={4}>
+                <Card w='100%'>
+                  <Card.Header>
+                    <Card.Title tag='h3'>Keywords</Card.Title>
+                  </Card.Header>
+                  <Card.Body p={0} pb={1}>
+                    <SecondaryTable />
+                  </Card.Body>
+                </Card>
+              </Flex>
+            </>
+          )}
+        </>
+      )}
     </Box>
   );
 }
diff --git a/stories/patterns/core/tests/all-components/components/Tables/table_perf/SelectedRowsInfo.tsx b/stories/patterns/core/tests/all-components/components/Tables/table_perf/SelectedRowsInfo.tsx
index 5539b2a76d..0959020433 100644
--- a/stories/patterns/core/tests/all-components/components/Tables/table_perf/SelectedRowsInfo.tsx
+++ b/stories/patterns/core/tests/all-components/components/Tables/table_perf/SelectedRowsInfo.tsx
@@ -26,7 +26,6 @@ export function SelectedRowsInfo({ selectedRows }: Props) {
       alignItems='center'
       gap={6}
       py={2}
-      px={3}
       style={{
         backgroundColor: 'var(--intergalactic-bg-primary-neutral, #ffffff)',
       }}
@@ -37,7 +36,7 @@ export function SelectedRowsInfo({ selectedRows }: Props) {
         {' '}
         <Text bold>{count}</Text>
       </Text>
-      <Button use='tertiary' onClick={handleDeselectAll}>
+      <Button use='tertiary' onClick={handleDeselectAll} disabled={count === 0}>
         Deselect all
       </Button>
     </Flex>
diff --git a/stories/patterns/core/tests/all-components/components/Tables/table_perf/cells/index.tsx b/stories/patterns/core/tests/all-components/components/Tables/table_perf/cells/index.tsx
index 1692c00624..a6a68e2694 100644
--- a/stories/patterns/core/tests/all-components/components/Tables/table_perf/cells/index.tsx
+++ b/stories/patterns/core/tests/all-components/components/Tables/table_perf/cells/index.tsx
@@ -38,6 +38,7 @@ type CopyProps = {
 
 // `width - 28` because there is custom copy icon (20px) on each cell + 8px gap between text and Icon. Therefore, the header width should be reduced based on the width of this icon.
 const recalcFunc = (width: number) => (width - 28 - 26);
+const recalcFuncNoHandle = (width: number) => width - 26;
 
 const Copy: FC<CopyProps> = ({ value, cropPosition = 'none', handle = true, cellProps, headerRef }) => {
   const timeourRef = useRef<Timeout>();
@@ -46,6 +47,28 @@ const Copy: FC<CopyProps> = ({ value, cropPosition = 'none', handle = true, cell
 
   useEffect(() => () => clearTimeout(timeourRef.current), []);
 
+  if (!handle) {
+    return (
+      <Flex w='100%' inline alignItems='flex-start'>
+        {cropPosition === 'none'
+          ? (
+              <Box inline>{value}</Box>
+            )
+          : (
+              <Text
+                ellipsis:cropPosition={cropPosition ?? 'end'}
+                ellipsis:containerElement={headerRef ?? undefined}
+                ellipsis:recalculateContainerWidth={recalcFuncNoHandle}
+                hint={false}
+                data-test-id={cellProps.dataKey}
+              >
+                {value}
+              </Text>
+            )}
+      </Flex>
+    );
+  }
+
   const onClick = (e: SyntheticEvent) => {
     e.stopPropagation();
     clearTimeout(timeourRef.current);
@@ -67,7 +90,7 @@ const Copy: FC<CopyProps> = ({ value, cropPosition = 'none', handle = true, cell
       onClick={onClick}
       inline
       title={copied ? copiedTitle : defaultTitle}
-      alignItems='center'
+      alignItems='flex-start'
       gap={2}
     >
       {cropPosition === 'none'
@@ -94,7 +117,9 @@ const Copy: FC<CopyProps> = ({ value, cropPosition = 'none', handle = true, cell
   );
 };
 
-const CopyCell = ({ value, cellProps, headerRef, cropPosition = 'middle' }: any) => <Copy value={value} cropPosition={cropPosition} cellProps={cellProps} headerRef={headerRef} />;
+const CopyCell = ({ value, cellProps, headerRef, cropPosition = 'middle', handle = true }: any) => (
+  <Copy value={value} cropPosition={cropPosition} cellProps={cellProps} headerRef={headerRef} handle={handle} />
+);
 
 const StatusCell = ({ value }: any) => <PaymentStatus status={value} />;
 
diff --git a/stories/patterns/core/tests/all-components/components/Tables/table_perf/cells/payment_status.tsx b/stories/patterns/core/tests/all-components/components/Tables/table_perf/cells/payment_status.tsx
index 3e44113834..7b962efd7e 100644
--- a/stories/patterns/core/tests/all-components/components/Tables/table_perf/cells/payment_status.tsx
+++ b/stories/patterns/core/tests/all-components/components/Tables/table_perf/cells/payment_status.tsx
@@ -6,7 +6,7 @@ import type { FC } from 'react';
 import { defineMessage, useIntl } from 'react-intl';
 
 type PaymentStatusProps = {
-  status: 'success' | 'failed';
+  status: 'success' | 'failed' | 'pending';
   short?: boolean;
   testIdPrefix?: string;
 } & Omit<TagProps, 'color'>;
@@ -14,6 +14,7 @@ type PaymentStatusProps = {
 const colorsMap = {
   success: 'green-500',
   failed: 'red-500',
+  pending: 'gray-500',
 };
 
 const textsMap = {
@@ -25,6 +26,10 @@ const textsMap = {
     defaultMessage: 'Failure',
     id: 'app.components.payments_status.failed',
   }),
+  pending: defineMessage({
+    defaultMessage: 'Pending',
+    id: 'app.components.payments_status.pending',
+  }),
 };
 
 const PaymentStatus: FC<PaymentStatusProps> = ({
diff --git a/stories/patterns/core/tests/all-components/components/Tables/table_perf/data.tsx b/stories/patterns/core/tests/all-components/components/Tables/table_perf/data.tsx
index c414ea7ee6..465e2442d0 100644
--- a/stories/patterns/core/tests/all-components/components/Tables/table_perf/data.tsx
+++ b/stories/patterns/core/tests/all-components/components/Tables/table_perf/data.tsx
@@ -4,23 +4,43 @@ import React from 'react';
 
 const ChartExample = () => {
   return (
-    <div style={{ width: '600px', height: '400px', background: '#fff' }} />
+    <div
+      style={{
+        width: '100%',
+        maxWidth: '600px',
+        height: '200px',
+        background: 'var(--intergalactic-bg-primary-neutral)',
+      }}
+    />
   );
 };
 
-function getRandomInt(min: number, max: number) {
-  return Math.floor(Math.random() * (max - min + 1)) + min;
-}
-
-const operationType = [
-  'refund',
-  'purchase',
-  'charge',
-];
-
-const paymentStatus = [
-  'success',
-  'failed',
+const TRANSACTION_CATEGORY_NAMES = [
+  'Shop',
+  'Vet Clinic',
+  'Bills',
+  'Auto',
+  'Concert',
+  'Groceries',
+  'Pharmacy',
+  'Streaming',
+  'Gym',
+  'Travel',
+  'Restaurant',
+  'Coffee',
+  'Utilities',
+  'Education',
+  'Electronics',
+  'Books',
+  'Subscription',
+  'Rent',
+  'Donations',
+  'Insurance',
+  'Hardware',
+  'Software',
+  'Parking',
+  'Fuel',
+  'Public transport',
 ];
 
 export const data: (page: number) => DataTableData = (page: number) => {
@@ -586,13 +606,11 @@ export const data: (page: number) => DataTableData = (page: number) => {
     },
   ];
 
-  return data.map((item) => {
+  return data.map((item, idx) => {
     return {
       ...item,
+      name: TRANSACTION_CATEGORY_NAMES[idx % TRANSACTION_CATEGORY_NAMES.length],
       payment_intent_id: `${page}__${item.payment_intent_id}`,
-      affected_payment_intent_id: getRandomInt(0, 1) === 0 ? null : crypto.randomUUID(),
-      operation_type: operationType[getRandomInt(0, 2)],
-      payment_status: paymentStatus[getRandomInt(0, 1)],
     };
   });
 };
diff --git a/stories/patterns/core/tests/all-components/components/Tables/table_perf/table_perf.tsx b/stories/patterns/core/tests/all-components/components/Tables/table_perf/table_perf.tsx
index a54c22b4b5..79db76e9c5 100644
--- a/stories/patterns/core/tests/all-components/components/Tables/table_perf/table_perf.tsx
+++ b/stories/patterns/core/tests/all-components/components/Tables/table_perf/table_perf.tsx
@@ -1,9 +1,66 @@
+import { Flex } from '@semcore/ui/base-components';
+import Button from '@semcore/ui/button';
 import type { CellRenderProps, DataTableSort, SelectableRows } from '@semcore/ui/data-table';
 import { DataTable } from '@semcore/ui/data-table';
+import { Text } from '@semcore/ui/typography';
+import { NoData } from '@semcore/ui/widget-empty';
 import React from 'react';
 
 import { data } from './data';
 
+function rowMatchesNameQuery(row: Record<string, unknown>, query: string): boolean {
+  const q = query.trim().toLowerCase();
+  if (!q) {
+    return true;
+  }
+  for (const [, value] of Object.entries(row)) {
+    if (value == null) {
+      continue;
+    }
+    if (typeof value === 'object') {
+      continue;
+    }
+    if (String(value).toLowerCase().includes(q)) {
+      return true;
+    }
+  }
+  return false;
+}
+
+const BIG_TABLE_ROW_THEMES: Array<'success' | 'warning' | 'danger' | 'info' | 'muted'> = [
+  'success',
+  'warning',
+  'danger',
+  'info',
+  'muted',
+];
+
+const TABLE_LIMIT: NonNullable<React.ComponentProps<typeof DataTable>['limit']> = {
+  fromRow: 5,
+  fromColumn: 3,
+  renderOverlay() {
+    return (
+      <Flex alignItems='center' direction='column' gap={3} py={6} wMax={320} style={{ textWrap: 'balance' }}>
+        <Text size={300} fontWeight='bold' textAlign='center' id='limited_rows_title'>
+          You've reached your report limit for today
+        </Text>
+        <Text size={200} textAlign='center' id='limited_rows_description'>
+          To increase your daily report limit, upgrade to a Guru plan.
+        </Text>
+        <Button
+          theme='success'
+          use='primary'
+          aria-describedby='limited_rows_title limited_rows_description'
+        >
+          Upgrade to Guru
+        </Button>
+      </Flex>
+    );
+  },
+};
+
+export type TableDemoState = 'default' | 'limited';
+
 export type AccordionInTableProps = {
   loading: boolean;
   hintProps?: false;
@@ -16,30 +73,48 @@ type Props = {
   selectedRows: SelectableRows<string>;
   columns: any[];
   CellRenderer: (props: CellRenderProps<any, any>) => { p?: number; children?: React.ReactNode };
+  variant?: React.ComponentProps<typeof DataTable>['variant'];
+  demoState?: TableDemoState;
+  nameSearchQuery?: string;
 };
 
 const Demo = (props: Props) => {
-  const tableData = data(props.currentPage);
+  const demoState = props.demoState ?? 'default';
+  const tableData = React.useMemo(() => {
+    const rows = data(props.currentPage);
+    const q = props.nameSearchQuery?.trim() ?? '';
+    if (!q) {
+      return rows;
+    }
+    return rows.filter((row) => rowMatchesNameQuery(row as Record<string, unknown>, q));
+  }, [props.currentPage, props.nameSearchQuery]);
 
-  const [sort, setSort] = React.useState<DataTableSort<keyof typeof tableData[0]>>(['payment_status', 'desc']);
+  const [sort, setSort] = React.useState<DataTableSort<any>>(['payment_status', 'desc']);
   const sortedData = React.useMemo(
     () =>
       [...tableData].sort((aRow, bRow) => {
         const [prop, sortDirection] = sort;
 
-        const a = prop === 'amount_base' ? Number(aRow[prop]) : aRow[prop] ?? '';
-        const b = prop === 'amount_base' ? Number(bRow[prop]) : bRow[prop] ?? '';
+        const aRaw = aRow[prop as keyof typeof aRow];
+        const bRaw = bRow[prop as keyof typeof bRow];
+        const a = prop === 'amount_base' ? Number(aRaw ?? 0) : (aRaw ?? '');
+        const b = prop === 'amount_base' ? Number(bRaw ?? 0) : (bRaw ?? '');
         if (a === b) return 0;
         if (sortDirection === 'asc') return a > b ? 1 : -1;
         else return a > b ? -1 : 1;
       }),
-    [sort],
+    [sort, tableData],
   );
 
+  const loading = props.loading;
+  const showEmptySearch = Boolean(props.nameSearchQuery?.trim()) && sortedData.length === 0;
+
   return (
     <DataTable
-      loading={props.loading}
+      variant={props.variant}
+      loading={loading}
       data={sortedData}
+      sideIndents='wide'
       aria-label='Accordion inside table'
       w='100%'
       defaultGridTemplateColumnWidth='1fr'
@@ -54,6 +129,18 @@ const Demo = (props: Props) => {
       renderCell={props.CellRenderer}
       sort={sort}
       onSortChange={setSort}
+      rowProps={(_row, rowIndex) => {
+        const theme = BIG_TABLE_ROW_THEMES[rowIndex];
+        return theme ? { theme } : {};
+      }}
+      {...(showEmptySearch
+        ? {
+            renderEmptyData: () => (
+              <NoData type='nothing-found' my={7} mx='auto' />
+            ),
+          }
+        : {})}
+      {...(demoState === 'limited' ? { limit: TABLE_LIMIT } : {})}
     />
   );
 };
diff --git a/stories/patterns/core/tests/all-components/index.tsx b/stories/patterns/core/tests/all-components/index.tsx
index a184152a1e..2aeab39043 100644
--- a/stories/patterns/core/tests/all-components/index.tsx
+++ b/stories/patterns/core/tests/all-components/index.tsx
@@ -3,10 +3,9 @@ import { Box } from '@semcore/ui/base-components';
 import TabLine from '@semcore/ui/tab-line';
 import React from 'react';
 
-import { Carousel } from './components/Carousel';
-import { Controls } from './components/Controls';
 import { Dashboard } from './components/Dashboard';
 import { FeatureHighlight } from './components/FeatureHighlight';
+import { Form } from './components/Form';
 import { Tables } from './components/Tables';
 import PageHeader from '../../../../components/product-head/docs/examples/extended_example';
 
@@ -18,7 +17,7 @@ function Demo({ defaultTab = 1 }: { defaultTab?: number }) {
   const [tab, setTab] = React.useState(defaultTab);
 
   return (
-    <Box w='calc(100vw - 64px)' style={{ background: 'var(--intergalactic-bg-secondary-neutral)' }} p={8}>
+    <Box w='calc(100vw - 64px)' style={{ background: 'var(--intergalactic-bg-secondary-neutral)', overflowX: 'clip' }} p={8}>
       <PageHeader />
 
       <TabLine size='l' mx={-8} px={8} mt={8} value={tab} onChange={setTab}>
@@ -34,21 +33,17 @@ function Demo({ defaultTab = 1 }: { defaultTab?: number }) {
           </TabLine.Item.Addon>
         </TabLine.Item>
         <TabLine.Item value={3}>
-          Controls
+          Form
         </TabLine.Item>
         <TabLine.Item value={4}>
-          Carousel
-        </TabLine.Item>
-        <TabLine.Item value={5}>
           Feature highlight
         </TabLine.Item>
       </TabLine>
 
       {tab === 1 && <Tables />}
       {tab === 2 && <Dashboard />}
-      {tab === 3 && <Controls />}
-      {tab === 4 && <Carousel />}
-      {tab === 5 && <FeatureHighlight />}
+      {tab === 3 && <Form />}
+      {tab === 4 && <FeatureHighlight />}
     </Box>
   );
 }
diff --git a/tools/continuous-delivery/src/utils/changelog.ts b/tools/continuous-delivery/src/utils/changelog.ts
index 61261e1e84..17cddb7db2 100644
--- a/tools/continuous-delivery/src/utils/changelog.ts
+++ b/tools/continuous-delivery/src/utils/changelog.ts
@@ -77,7 +77,10 @@ export class Changelog {
       }
 
       return collectedSet.has(element);
-    }).concat(...semcoreBaseComponents);
+    });
+    if (collectedSet.has('base-components')) {
+      allowed.push(...semcoreBaseComponents);
+    }
     const allAllowedScopes = new Set(allowed);
 
     let traversingComponent: string | null = null;
diff --git a/website/docs/components/spin/spin-api.md b/website/docs/components/spin/spin-api.md
index d68a498090..f620dac0ca 100644
--- a/website/docs/components/spin/spin-api.md
+++ b/website/docs/components/spin/spin-api.md
@@ -13,6 +13,6 @@ import Spin from '@semcore/ui/spin';
 <Spin />;
 ```
 
-<TypesView type="SpinProps" :types={...types} />
+<TypesView type="NSSpin.Props" :types={...types} />
 
 <script setup>import { data as types } from '@types.data.ts';</script>