diff --git a/.claude/skills/vibe-breaking-change/SKILL.md b/.claude/skills/vibe-breaking-change/SKILL.md
new file mode 100644
index 0000000000..7600228356
--- /dev/null
+++ b/.claude/skills/vibe-breaking-change/SKILL.md
@@ -0,0 +1,598 @@
+---
+name: vibe-breaking-change
+description: Implements Vibe Design System breaking changes with full workflow automation including component updates, migration guide updates, codemod generation, testing, and PR creation. Use when implementing breaking changes to Vibe components that require coordinated updates across the design system.
+---
+
+# Vibe Breaking Change Implementation
+
+## Overview
+
+Implements breaking changes to Vibe Design System components following the established workflow with automated validation, documentation updates, and codemod generation where applicable.
+
+## When to Use
+
+**Use this skill when:**
+- Implementing breaking API changes to Vibe components
+- Deprecating component props or methods
+- Changing component behavior that affects dependent components
+- Updating component interfaces that require migration documentation
+- Making changes that need coordinated updates across the design system
+
+**Do NOT use for:**
+- Non-breaking enhancements or bug fixes
+- Internal refactoring that doesn't affect public APIs
+- Style-only changes without behavioral impact
+- Emergency hotfixes that bypass normal workflow
+
+## Quick Reference
+
+| Phase | Actions | Validation |
+|-------|---------|------------|
+| 1. Analysis | Identify affected components, dependencies | Component mapping complete |
+| 2. Implementation | Apply breaking change, update dependents | Tests pass locally |
+| 3. Testing | Run full test suite, update failing tests | All tests green |
+| 4. Documentation | Update migration guide, add codemod if deterministic | Documentation complete |
+| 5. Cleanup & Delivery | lint:fix, lint, build, test → commit, push, PR with task link | All checks pass, PR ready for review |
+
+## Core Workflow
+
+### Phase 1: Analysis and Planning
+
+**🔍 Comprehensive Dependency Analysis:**
+
+```bash
+# 1. Find all imports and usage across packages
+grep -r "import.*ComponentName" packages/
+grep -r "ComponentName" packages/ --include="*.tsx" --include="*.ts" --include="*.jsx" --include="*.js"
+
+# 2. Find specific prop usage being changed (comprehensive search)
+grep -r "oldProp=" packages/ --include="*.tsx" --include="*.ts" --include="*.jsx" --include="*.js"
+find packages -name "*.tsx" -o -name "*.ts" -o -name "*.jsx" -o -name "*.js" | xargs grep -l "oldProp\|deprecatedMethod"
+
+# 3. Analyze by package structure
+find packages/components -name "*.tsx" | xargs grep -l "ComponentName"  # Standalone packages
+find packages/core/src -name "*.tsx" | xargs grep -l "ComponentName"    # Core package
+find packages/docs -name "*.tsx" | xargs grep -l "ComponentName"        # Documentation
+find packages/mcp -name "*.ts" | xargs grep -l "ComponentName"          # MCP examples
+```
+
+**📋 Analysis Checklist:**
+1. **Map Dependencies:**
+   - [ ] Components that import the target component
+   - [ ] Components that use the target component inline
+   - [ ] Hook or utility functions that reference the component
+   - [ ] Documentation and example files
+
+2. **Assess Impact Scope:**
+   - [ ] Standalone component packages (packages/components/*)
+   - [ ] Core package components (packages/core/src/components/*)
+   - [ ] Supporting packages (docs, mcp, testkit)
+   - [ ] Test files and stories
+
+3. **Plan Migration Strategy:**
+   - [ ] Order of updates (component first, then dependents)
+   - [ ] TypeScript interface changes needed
+   - [ ] Codemod feasibility (deterministic vs manual)
+   - [ ] Documentation updates required
+
+See `references/dependency-analysis.md` for advanced dependency mapping techniques.
+
+**📊 Expected Findings:**
+- **20-40 component files** typically need updates for major component changes
+- **Multiple package types** - standalone, core, docs, examples
+- **Mixed file types** - .tsx, .ts, .jsx, .js all may need updates
+- **Hidden dependencies** - MCP tools, test utilities, etc.
+
+### Phase 2: Implementation
+
+**🏗️ Systematic Update Approach:**
+
+**Step 1: Source Component Updates**
+```typescript
+// 1. Update component interface
+interface ComponentProps {
+  // ❌ Remove deprecated props
+  // oldProp?: string;
+  // deprecatedMethod?: () => void;
+
+  // ✅ Add new props with better API
+  newProp?: string;
+  improvedMethod?: () => void;
+}
+
+// 2. Update component implementation
+const Component = ({ newProp, ...props }: ComponentProps) => {
+  // Implementation with new API
+};
+```
+
+**Step 2: Internal Dependencies (same package)**
+```typescript
+// Update hooks, utilities, and helpers in the same package
+// Example: Icon component's useIconProps hook
+export default function useIconProps({
+  label,        // ✅ Updated from iconLabel
+  // iconLabel, // ❌ Removed
+}) {
+  // Implementation
+}
+```
+
+**Step 3: Cross-Package Updates (systematic)**
+```bash
+# Process 20-40 files systematically
+# Group by package for efficient updates:
+
+# A. Standalone component packages
+packages/components/tooltip/src/Tooltip/Tooltip.tsx
+packages/components/button/src/Button/Button.tsx
+
+# B. Core package components (bulk of changes)
+packages/core/src/components/AttentionBox/AttentionBox.tsx
+packages/core/src/components/Checkbox/Checkbox.tsx
+# ... (typically 20-30 files)
+
+# C. Supporting files
+packages/mcp/src/server/tools/list-vibe-icons.ts
+packages/docs/src/pages/components/ComponentName/ComponentName.stories.tsx
+```
+
+**🔄 Implementation Order:**
+1. **Component Package** - Update source component and internal dependencies
+2. **Individual Packages** - Update standalone packages that use the component
+3. **Core Package** - Systematically update all core components (largest effort)
+4. **Build Fix** - Address any TypeScript errors revealed by changes
+5. **Supporting Files** - Update docs, examples, MCP tools
+
+**✅ Implementation Checklist:**
+- [ ] Source component interface updated
+- [ ] Internal component dependencies updated (hooks, utilities)
+- [ ] Standalone packages updated (5-10 files typically)
+- [ ] Core package components updated (20-30 files typically)
+- [ ] TypeScript build errors resolved
+- [ ] Documentation and examples updated
+- [ ] All updates maintain semantic consistency
+
+### Phase 3: Testing and Validation
+
+```bash
+# Run comprehensive tests
+yarn workspace @vibe/core test
+lerna run test
+
+# Run specific component tests
+yarn workspace @vibe/core test -- Component
+
+# Update snapshots if needed
+yarn workspace @vibe/core test -- --updateSnapshot
+```
+
+See `references/testing-validation.md` for detailed testing patterns and examples.
+
+**Testing requirements:**
+- All existing tests pass or are updated appropriately
+- New tests cover breaking change scenarios
+- Integration tests verify dependent components work
+- No TypeScript errors across the monorepo
+
+### Phase 4: Documentation Updates
+
+#### Migration Guide Update (VIBE4_MIGRATION_GUIDE.md)
+
+```markdown
+## ComponentName API Changes
+
+### Breaking Changes
+
+**Removed `oldProp` prop**
+- **Before:** `<ComponentName oldProp="value" />`
+- **After:** `<ComponentName newProp="value" />`
+- **Reason:** Better API consistency and performance
+
+### Migration Path
+
+1. Replace `oldProp` with `newProp` in all usages
+2. Update prop value format if needed
+3. Test component behavior matches expected outcome
+
+### Codemod Available
+```bash
+npx @vibe/codemod componentname-old-prop-to-new-prop
+```
+```
+
+#### Codemod Generation (if deterministic)
+
+⚠️ **CRITICAL**: Follow established Vibe codemod patterns to avoid common pitfalls.
+See `references/codemod-best-practices.md` and `references/codemod-examples.md` for detailed patterns and real examples.
+
+```typescript
+// packages/codemod/transformations/core/v3-to-v4/ComponentName-component-migration.ts
+import {
+  wrap,
+  getImports,
+  getComponentNameOrAliasFromImports,
+  findComponentElements,
+  migratePropsNames
+} from "../../../src/utils";
+import { NEW_CORE_IMPORT_PATH } from "../../../src/consts";
+import { TransformationContext } from "../../../types";
+
+/**
+ * ComponentName migration for v3 to v4:
+ * 1. Rename oldProp1 to newProp1
+ * 2. Rename oldProp2 to newProp2
+ */
+function transform({ j, root, filePath }: TransformationContext) {
+  // ✅ Use correct import path detection
+  const imports = getImports(root, NEW_CORE_IMPORT_PATH);
+  const componentName = getComponentNameOrAliasFromImports(j, imports, "ComponentName");
+  if (!componentName) return;
+
+  const elements = findComponentElements(root, componentName);
+  if (!elements.length) return;
+
+  // ✅ Single efficient call handles all prop renames
+  elements.forEach(elementPath => {
+    migratePropsNames(j, elementPath, filePath, componentName, {
+      oldProp1: "newProp1",
+      oldProp2: "newProp2",
+      oldProp3: "newProp3"
+    });
+  });
+}
+
+export default wrap(transform);
+```
+
+**Key Pattern Elements:**
+- ✅ Use `getImports(root, NEW_CORE_IMPORT_PATH)` not `getCoreImportsForFile()`
+- ✅ Use `migratePropsNames()` not non-existent `renameProp()`
+- ✅ Single loop with batch prop updates
+- ✅ Include `filePath` parameter for error reporting
+- ✅ Use established utility imports
+
+### Phase 5: Cleanup, Validation, and PR Creation
+
+**⚠️ ABSOLUTE REQUIREMENT: Do NOT commit, push, or create a PR until every validation step below passes with zero errors. A PR with failing CI is not acceptable.**
+
+**Step 1: Validation gate — run each command, fix failures, repeat until all pass**
+
+Run these commands **sequentially**. If ANY command fails, fix the issue and **restart from that command**. Do NOT skip ahead.
+
+```bash
+# 1. Fix lint issues across all packages
+yarn lint:fix
+
+# 2. Verify lint passes with zero errors
+yarn lint
+
+# 3. Build all packages — must exit 0
+yarn build
+
+# 4. Run full test suite — must exit 0
+yarn test
+```
+
+**If a step fails:**
+1. Read the error output carefully
+2. Fix the root cause (do not suppress or skip)
+3. Re-run **from that step** through the remaining steps
+4. Repeat until all 4 steps pass cleanly in sequence
+
+**Only proceed to Step 2 when lint, build, AND tests all pass with zero errors.**
+
+**Step 2: Create branch and commit only after all checks pass**
+
+See `references/pr-templates.md` for PR description, commit message, and migration guide templates.
+See `references/workflow-checklist.md` for a comprehensive checklist of all phases.
+
+**📋 Monday.com Task Link:**
+Extract the Monday.com task link from the user's original prompt if provided.
+The link format is: `https://monday.monday.com/boards/<BOARD_ID>/pulses/<PULSE_ID>`
+Include this link in the PR description under the "Task Link" section.
+If no task link was provided in the original prompt, ask the user for it before creating the PR.
+
+**Commit and PR titles MUST follow [Conventional Commits](https://www.conventionalcommits.org/).**
+
+Use the appropriate type based on the nature of the change:
+- `feat:` — new feature or capability change
+- `fix:` — bug fix
+- `refactor:` — refactor without behavior change
+
+Always include a `BREAKING CHANGE:` footer in the commit body.
+
+```bash
+# Create feature branch from vibe4
+git checkout vibe4
+git pull origin vibe4
+git checkout -b breaking-change/component-name-api-update
+
+# Commit changes (only after all checks above pass)
+git add .
+git commit -m "feat(ComponentName): remove oldProp in favor of newProp
+
+- Remove deprecated oldProp in favor of newProp
+- Update all dependent components
+- Add migration guide and codemod
+- Update tests for new API
+
+BREAKING CHANGE: ComponentName.oldProp has been removed.
+Use ComponentName.newProp instead.
+
+Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>"
+
+# Push and create PR
+git push -u origin breaking-change/component-name-api-update
+gh pr create \
+  --title "feat(ComponentName): remove oldProp in favor of newProp" \
+  --body "## Summary
+• Remove deprecated \`oldProp\` from ComponentName
+• Update all dependent components to use \`newProp\`
+• Add comprehensive migration guide
+• Include codemod for automated migration
+
+## Breaking Changes
+- \`ComponentName.oldProp\` → \`ComponentName.newProp\`
+
+## Task Link
+[Monday.com Task](https://monday.monday.com/boards/<BOARD_ID>/pulses/<PULSE_ID>)
+
+## Test Plan
+- [ ] All component tests pass
+- [ ] Dependent components work correctly
+- [ ] Codemod transforms existing usage
+- [ ] Migration guide tested
+- [ ] Build and lint checks pass
+
+🤖 Generated with [Claude Code](https://claude.com/claude-code)"
+```
+
+## Common Patterns
+
+### Comprehensive Component Updates
+
+**Pattern: Systematic Cross-Package Updates**
+```bash
+# Real example from Icon migration (28 files updated):
+
+# 1. Component package (source)
+packages/components/icon/src/Icon/Icon.tsx                    # Main component
+packages/components/icon/src/Icon/hooks/useIconProps.tsx      # Internal hooks
+
+# 2. Related component packages
+packages/components/tooltip/src/Tooltip/Tooltip.tsx          # Uses Icon
+packages/components/icon-button/src/IconButton/IconButton.tsx # Uses Icon internally
+
+# 3. Core package components (bulk updates)
+packages/core/src/components/AttentionBox/AttentionBox.tsx   # 2 Icon instances
+packages/core/src/components/Checkbox/Checkbox.tsx          # 2 Icon instances
+packages/core/src/components/Chips/Chips.tsx                # 2 Icon instances
+# ... 20+ more core components
+
+# 4. Supporting updates
+packages/mcp/src/server/tools/list-vibe-icons.ts           # Documentation examples
+packages/core/src/components/DatePicker/DatePickerHeader.tsx # Related component fixes
+```
+
+**🔧 Batch Update Strategy:**
+1. Use `replace_all=true` for simple prop renames across files
+2. Use `replace_all=false` for context-specific updates
+3. Group similar changes together for efficiency
+4. Verify build after each logical group of changes
+
+### Deterministic Changes (Add Codemod)
+- Simple prop renames (`iconSize` → `size`)
+- Enum value updates
+- Import path changes
+- Method signature changes with clear mapping
+
+### Non-Deterministic Changes (No Codemod)
+- Complex behavioral changes requiring human judgment
+- Context-dependent prop usage
+- Changes requiring business logic updates
+- Multi-step migration requiring staged approach
+
+### Mixed Changes (Partial Codemod + Manual)
+- Prop renames (codemod) + related component fixes (manual)
+- API changes (codemod) + TypeScript error fixes (manual)
+- Interface updates (codemod) + documentation updates (manual)
+
+### Error Recovery
+- If tests fail: Fix broken components, don't skip tests
+- If build fails: Check import/export consistency
+- If codemod fails: Validate transform logic with test cases
+- If PR blocked: Address review feedback before merging
+
+## ⚠️ Common Pitfalls & Lessons Learned
+
+### Codemod Implementation Issues
+
+**❌ Wrong Function Usage:**
+```typescript
+// WRONG - this function doesn't exist
+renameProp(j, elementPath, "oldProp", "newProp");
+
+// CORRECT - use established utility
+migratePropsNames(j, elementPath, filePath, componentName, {
+  oldProp: "newProp"
+});
+```
+
+**❌ Wrong Import Path:**
+```typescript
+// WRONG - looks for old package name
+const imports = getCoreImportsForFile(root);
+
+// CORRECT - specify the right import path
+const imports = getImports(root, NEW_CORE_IMPORT_PATH); // "@vibe/core"
+```
+
+**❌ Inefficient Multiple Loops:**
+```typescript
+// WRONG - separate loops for each prop
+if (isPropExists(j, elementPath, "prop1")) {
+  // handle prop1
+}
+if (isPropExists(j, elementPath, "prop2")) {
+  // handle prop2
+}
+
+// CORRECT - single efficient call
+migratePropsNames(j, elementPath, filePath, componentName, {
+  prop1: "newProp1",
+  prop2: "newProp2",
+  prop3: "newProp3"
+});
+```
+
+### JSCodeshift Formatting Artifacts
+
+**⚠️ Problem:** jscodeshift adds unnecessary parentheses around JSX elements in files that don't even use the target component.
+
+**Example Artifacts:**
+```jsx
+// Before codemod
+<div className="wrapper">
+
+// After codemod (WRONG!)
+(<div className="wrapper">
+```
+
+**🔧 Prevention:**
+1. **Target specific files** instead of entire directories
+2. **Use `--dry` run first** to verify only expected files change
+3. **Review all diffs carefully** before committing
+4. **Create cleanup commits** if formatting issues slip through
+
+**🔧 Cleanup Pattern:**
+```typescript
+// Find files with formatting artifacts
+git diff HEAD~1 HEAD --name-only | grep -v "target-component"
+
+// Manual cleanup needed for unintended changes
+```
+
+### Documentation Reversion Issues
+
+**⚠️ Problem:** Linters, formatters, or branch switches can revert documentation changes.
+
+**🔧 Prevention:**
+- **Commit documentation separately** from code changes
+- **Verify documentation persists** after all code changes
+- **Check git status** before final PR creation
+- **Re-add documentation** if reverted by automation
+
+### Component Package Dependencies
+
+**⚠️ Problem:** Components in different packages need different import handling.
+
+```typescript
+// Icon is in @vibe/icon but also re-exported from @vibe/core
+// Both need to be handled correctly
+```
+
+**🔧 Solution:**
+- Check component package structure first
+- Handle both direct imports and re-exports
+- Test codemod on actual usage patterns
+
+### Build System Validation
+
+**⚠️ Problem:** Not all components build even before changes, causing false positives.
+
+**🔧 Approach:**
+- **Test individual packages** first (`yarn workspace @vibe/icon build`)
+- **Focus on changed packages** rather than full monorepo build
+- **Separate build issues** from breaking change issues
+
+### Cross-Package Component Updates
+
+**⚠️ Problem:** Breaking changes often affect components across multiple packages, not just the main @vibe/core package.
+
+**Real Example - Icon Migration:**
+Icon component is in `@vibe/icon` but used throughout:
+- `packages/components/tooltip/` - standalone package using Icon
+- `packages/core/src/components/` - 25+ core components using Icon
+- `packages/components/icon-button/` - IconButton using Icon internally
+- `packages/mcp/` - documentation and examples
+
+**🔧 Comprehensive Search Strategy:**
+
+```bash
+# 1. Find ALL files with old prop usage across entire monorepo
+grep -r "iconType\|iconSize\|iconLabel" packages/ --include="*.tsx" --include="*.ts" --include="*.jsx" --include="*.js"
+
+# 2. Identify usage by package type
+find packages/components -name "*.tsx" -o -name "*.ts" | xargs grep -l "iconType="
+find packages/core/src -name "*.tsx" -o -name "*.ts" | xargs grep -l "iconSize="
+
+# 3. Check supporting files (docs, examples, tests)
+grep -r "iconLabel=" packages/mcp packages/docs
+```
+
+**🔧 Update Strategy:**
+1. **Component Package First** - Update the source component and its internal hooks
+2. **Core Package Components** - Systematically update all core components (20-30 files typical)
+3. **Standalone Packages** - Update components that depend on the changed component
+4. **Supporting Files** - Update documentation, examples, and MCP tools
+5. **Build Verification** - Test each package individually before full build
+
+### TypeScript Build Errors in Related Components
+
+**⚠️ Problem:** Breaking changes can reveal existing TypeScript errors in related components.
+
+**Real Example - IconButton Props:**
+```typescript
+// DatePickerHeader was using deprecated Button static properties
+<IconButton
+  kind={Button.kinds.TERTIARY}  // ❌ Error: Property 'kind' does not exist
+  size={Button.sizes.SMALL}     // ❌ Error: Property 'size' does not exist
+/>
+
+// Fixed to use string literals
+<IconButton
+  kind="tertiary"     // ✅ Correct
+  size="small"        // ✅ Correct
+/>
+```
+
+**🔧 Resolution Approach:**
+1. **Isolate the error** - determine if it's related to your breaking change or pre-existing
+2. **Check component API** - verify correct prop values for the component
+3. **Use string literals** instead of deprecated static enum properties
+4. **Test build** after each fix to catch additional issues
+
+### Documentation and Example Updates
+
+**⚠️ Problem:** Code examples in documentation and MCP tools need updating with new API.
+
+**🔧 Required Updates:**
+- **MCP Documentation** - Update usage examples with new props
+- **Component Stories** - Storybook examples using the component
+- **README files** - Any inline code examples
+- **Test files** - Update snapshot tests and component tests
+
+## Quality Gates
+
+**⚠️ These are hard gates, not suggestions. Do NOT proceed past a gate until every item passes.**
+
+**Before committing (all must pass with exit code 0):**
+- [ ] `yarn lint` — zero errors
+- [ ] `yarn build` — zero errors
+- [ ] `yarn test` — zero failures
+- [ ] Migration guide entry complete
+
+**Before creating PR:**
+- [ ] All of the above still pass after final commit
+- [ ] Codemod tested (if applicable)
+- [ ] Documentation updated
+
+## Integration Points
+
+- **Package Dependencies:** Update `package.json` files as needed
+- **TypeScript:** Ensure type consistency across packages
+- **Build System:** Verify Rollup configurations handle changes
+- **Storybook:** Update stories to reflect new API
+- **Documentation:** Sync with component documentation site
+
diff --git a/.claude/skills/vibe-breaking-change/references/codemod-best-practices.md b/.claude/skills/vibe-breaking-change/references/codemod-best-practices.md
new file mode 100644
index 0000000000..536093d03f
--- /dev/null
+++ b/.claude/skills/vibe-breaking-change/references/codemod-best-practices.md
@@ -0,0 +1,273 @@
+# Codemod Best Practices for Vibe Breaking Changes
+
+## Lessons Learned from Real Implementation
+
+This guide covers critical lessons learned from implementing the Icon component prop renames codemod, including major pitfalls to avoid.
+
+## ❌ Common Mistakes to Avoid
+
+### 1. Using Non-Existent Functions
+
+**WRONG:**
+```typescript
+import { renameProp } from "../../../src/utils"; // ❌ Doesn't exist
+
+elements.forEach(elementPath => {
+  if (isPropExists(j, elementPath, "oldProp")) {
+    renameProp(j, elementPath, "oldProp", "newProp"); // ❌ Function doesn't exist
+  }
+});
+```
+
+**CORRECT:**
+```typescript
+import { migratePropsNames } from "../../../src/utils"; // ✅ Real function
+
+elements.forEach(elementPath => {
+  migratePropsNames(j, elementPath, filePath, componentName, {
+    oldProp: "newProp",
+    anotherOld: "anotherNew"
+  }); // ✅ Handles all props in one efficient call
+});
+```
+
+### 2. Wrong Import Path Detection
+
+**WRONG:**
+```typescript
+// This only finds "monday-ui-react-core" imports, not "@vibe/core"
+const imports = getCoreImportsForFile(root);
+```
+
+**CORRECT:**
+```typescript
+import { NEW_CORE_IMPORT_PATH } from "../../../src/consts";
+
+// This finds "@vibe/core" imports correctly
+const imports = getImports(root, NEW_CORE_IMPORT_PATH);
+```
+
+### 3. Inefficient Multiple Loops
+
+**WRONG:**
+```typescript
+elements.forEach(elementPath => {
+  // Separate check for each prop - inefficient!
+  if (isPropExists(j, elementPath, "iconLabel")) {
+    renameProp(j, elementPath, "iconLabel", "label");
+  }
+  if (isPropExists(j, elementPath, "iconType")) {
+    renameProp(j, elementPath, "iconType", "type");
+  }
+  if (isPropExists(j, elementPath, "iconSize")) {
+    renameProp(j, elementPath, "iconSize", "size");
+  }
+});
+```
+
+**CORRECT:**
+```typescript
+elements.forEach(elementPath => {
+  // Single call handles all prop renames efficiently
+  migratePropsNames(j, elementPath, filePath, componentName, {
+    iconLabel: "label",
+    iconType: "type",
+    iconSize: "size"
+  });
+});
+```
+
+## 🔧 Proven Codemod Pattern
+
+Based on successful v2-v3 codemods, use this proven pattern:
+
+```typescript
+import {
+  wrap,
+  getImports,
+  getComponentNameOrAliasFromImports,
+  findComponentElements,
+  migratePropsNames
+} from "../../../src/utils";
+import { NEW_CORE_IMPORT_PATH } from "../../../src/consts";
+import { TransformationContext } from "../../../types";
+
+function transform({ j, root, filePath }: TransformationContext) {
+  // 1. Find imports from correct package
+  const imports = getImports(root, NEW_CORE_IMPORT_PATH);
+
+  // 2. Check if component is imported
+  const componentName = getComponentNameOrAliasFromImports(j, imports, "ComponentName");
+  if (!componentName) return;
+
+  // 3. Find all component elements
+  const elements = findComponentElements(root, componentName);
+  if (!elements.length) return;
+
+  // 4. Migrate props efficiently
+  elements.forEach(elementPath => {
+    migratePropsNames(j, elementPath, filePath, componentName, {
+      oldProp1: "newProp1",
+      oldProp2: "newProp2",
+      oldProp3: "newProp3"
+    });
+  });
+}
+
+export default wrap(transform);
+```
+
+## ⚠️ JSCodeshift Formatting Artifacts
+
+### The Problem
+
+JSCodeshift can add unnecessary parentheses around JSX elements, even in files that **don't use the target component**.
+
+**Example:**
+```jsx
+// Original code
+<div className="wrapper">
+  <span>Content</span>
+</div>
+
+// After codemod (WRONG!)
+(<div className="wrapper">
+  <span>Content</span>
+</div>)
+```
+
+### Root Cause
+
+JSCodeshift parses and rebuilds the AST, which can introduce formatting changes even when no transforms are applied.
+
+### Prevention Strategies
+
+#### 1. Target Specific Files
+```bash
+# WRONG - transforms entire directory
+npx jscodeshift -t transform.js packages/core/src/components/
+
+# BETTER - target specific files known to use the component
+npx jscodeshift -t transform.js packages/core/src/components/Button/Button.tsx packages/core/src/components/IconButton/IconButton.tsx
+```
+
+#### 2. Use Dry Run First
+```bash
+# Always run dry first to see what changes
+npx jscodeshift -t transform.js packages/ --dry
+
+# Review the output carefully
+# Only proceed if changes look correct
+npx jscodeshift -t transform.js packages/
+```
+
+#### 3. Filter by Import Detection
+```typescript
+function transform({ j, root, filePath }: TransformationContext) {
+  // Only proceed if file actually imports the component
+  const imports = getImports(root, NEW_CORE_IMPORT_PATH);
+  const componentName = getComponentNameOrAliasFromImports(j, imports, "ComponentName");
+  if (!componentName) return; // ✅ Exit early, no changes
+
+  // ... rest of transform
+}
+```
+
+### Cleanup Process
+
+If formatting artifacts slip through:
+
+```bash
+# 1. Identify files with unintended changes
+git diff HEAD~1 HEAD --name-only | grep -E "(Checkbox|AvatarGroup|Dropdown)"
+
+# 2. Review each file
+git diff HEAD~1 HEAD -- path/to/file.tsx
+
+# 3. Manual cleanup
+# Remove extra parentheses: (<div> → <div>
+# Fix indentation as needed
+
+# 4. Commit cleanup
+git add .
+git commit -m "fix: remove codemod formatting artifacts"
+```
+
+## 🧪 Testing Best Practices
+
+### Test Development
+```typescript
+// Cover edge cases in tests
+defineInlineTest(
+  transform,
+  {},
+  prependImport('const element = <Icon icon={Home} iconLabel="Home" iconType="svg" iconSize={24} />;'),
+  prependImport('const element = <Icon icon={Home} label="Home" type="svg" size={24} />;'),
+  "should rename all three props"
+);
+
+// Test aliased imports
+defineInlineTest(
+  transform,
+  {},
+  `import { Icon as VibeIcon } from "@vibe/core";
+   const element = <VibeIcon icon={Home} iconLabel="Home" />;`,
+  `import { Icon as VibeIcon } from "@vibe/core";
+   const element = <VibeIcon icon={Home} label="Home" />;`,
+  "should work with aliased imports"
+);
+```
+
+### Expected Results
+- **7-8 out of 8 tests pass** - indicates working codemod
+- **1 formatting test failure** - expected jscodeshift artifact (acceptable)
+- **0 tests pass** - indicates broken codemod logic
+
+## 📝 Documentation Integration
+
+### Migration Guide Entry
+```markdown
+## ComponentName API Changes
+
+### Breaking Changes
+**Props Renamed:**
+- `oldProp` → `newProp`
+- `anotherOld` → `anotherNew`
+
+### Automated Migration
+```bash
+npx @vibe/codemod component-name-props-update src/
+```
+
+### Manual Migration
+[Include before/after examples]
+```
+
+### Changelog Entry
+```markdown
+#### ComponentName v2.0.0
+- **BREAKING**: Renamed props for better consistency
+- **Migration**: Use `npx @vibe/codemod component-name-props-update`
+- **Task**: Monday.com #[task-id]
+```
+
+## 🚀 Success Criteria
+
+A successful codemod implementation should:
+
+1. **✅ Follow established patterns** from v2-v3 codemods
+2. **✅ Use correct utility functions** (migratePropsNames, getImports)
+3. **✅ Handle import paths correctly** (NEW_CORE_IMPORT_PATH)
+4. **✅ Be efficient** (single loop, batch prop updates)
+5. **✅ Have comprehensive tests** (7+ passing test cases)
+6. **✅ Minimize formatting artifacts** (targeted file updates)
+7. **✅ Include cleanup process** (for any artifacts that slip through)
+
+## 🔄 Iteration Process
+
+1. **RED**: Write failing tests first
+2. **GREEN**: Implement minimal working codemod
+3. **REFACTOR**: Fix issues, improve efficiency
+4. **CLEANUP**: Remove formatting artifacts
+5. **DOCUMENT**: Update migration guide and changelog
+6. **VALIDATE**: Test on real codebase examples
\ No newline at end of file
diff --git a/.claude/skills/vibe-breaking-change/references/codemod-examples.md b/.claude/skills/vibe-breaking-change/references/codemod-examples.md
new file mode 100644
index 0000000000..32e8519813
--- /dev/null
+++ b/.claude/skills/vibe-breaking-change/references/codemod-examples.md
@@ -0,0 +1,125 @@
+# Codemod Examples for Vibe Breaking Changes
+
+## Simple Prop Rename
+
+```typescript
+// Transform: oldProp → newProp
+import type { Transform } from 'jscodeshift';
+
+const transform: Transform = (file, api) => {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  // Transform JSX prop usage
+  root
+    .find(j.JSXElement)
+    .filter(path => {
+      const name = path.value.openingElement?.name;
+      return name && name.type === 'JSXIdentifier' && name.name === 'ComponentName';
+    })
+    .forEach(path => {
+      const attributes = path.value.openingElement?.attributes || [];
+      attributes.forEach(attr => {
+        if (
+          attr.type === 'JSXAttribute' &&
+          attr.name?.type === 'JSXIdentifier' &&
+          attr.name.name === 'oldProp'
+        ) {
+          attr.name.name = 'newProp';
+        }
+      });
+    });
+
+  return root.toSource();
+};
+
+export default transform;
+```
+
+## Enum to String Union Migration
+
+```typescript
+// Transform: ComponentName.SIZE.LARGE → "large"
+import type { Transform } from 'jscodeshift';
+
+const transform: Transform = (file, api) => {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  // Replace enum member access with string literal
+  root
+    .find(j.MemberExpression, {
+      object: {
+        type: 'MemberExpression',
+        object: { name: 'ComponentName' },
+        property: { name: 'SIZE' }
+      }
+    })
+    .forEach(path => {
+      const property = path.value.property;
+      if (property.type === 'Identifier') {
+        const stringValue = property.name.toLowerCase();
+        j(path).replaceWith(j.literal(stringValue));
+      }
+    });
+
+  return root.toSource();
+};
+
+export default transform;
+```
+
+## Complex Import Path Update
+
+```typescript
+// Transform: from old package to new package structure
+import type { Transform } from 'jscodeshift';
+
+const transform: Transform = (file, api) => {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  // Update import declarations
+  root
+    .find(j.ImportDeclaration)
+    .filter(path => {
+      return path.value.source.value?.includes('@vibe/core/components/ComponentName');
+    })
+    .forEach(path => {
+      if (path.value.source.type === 'Literal') {
+        path.value.source.value = '@vibe/component-name';
+      }
+    });
+
+  return root.toSource();
+};
+
+export default transform;
+```
+
+## Testing Codemod Changes
+
+```bash
+# Test codemod on specific file
+npx jscodeshift -t packages/codemod/src/transforms/component-prop-rename.ts packages/core/src/components/Button/__tests__/Button.test.tsx --dry
+
+# Test on directory
+npx jscodeshift -t packages/codemod/src/transforms/component-prop-rename.ts packages/core/src/components/ --dry
+
+# Apply transformation
+npx jscodeshift -t packages/codemod/src/transforms/component-prop-rename.ts packages/core/src/components/
+
+# Add to codemod CLI
+# Edit packages/codemod/src/index.ts to include new transform
+```
+
+## Codemod Integration Checklist
+
+- [ ] Transform handles JSX usage
+- [ ] Transform handles TypeScript interfaces
+- [ ] Transform handles prop destructuring
+- [ ] Transform handles spread props appropriately
+- [ ] Test cases cover edge cases
+- [ ] Dry run shows expected changes
+- [ ] Added to codemod CLI interface
+- [ ] Documentation includes usage example
\ No newline at end of file
diff --git a/.claude/skills/vibe-breaking-change/references/dependency-analysis.md b/.claude/skills/vibe-breaking-change/references/dependency-analysis.md
new file mode 100644
index 0000000000..5c37b6145b
--- /dev/null
+++ b/.claude/skills/vibe-breaking-change/references/dependency-analysis.md
@@ -0,0 +1,150 @@
+# Dependency Analysis for Breaking Changes
+
+## Component Dependency Mapping
+
+### Finding Direct Dependencies
+
+```bash
+# Find components importing the target component
+grep -r "import.*ComponentName" packages/core/src/components/
+grep -r "import.*ComponentName" packages/components/
+
+# Find usage in TypeScript files
+grep -r "ComponentName" packages/*/src/**/*.tsx
+grep -r "ComponentName" packages/*/src/**/*.ts
+
+# Find usage in test files
+grep -r "ComponentName" packages/*/src/**/__tests__/*.tsx
+grep -r "ComponentName" packages/*/src/**/__stories__/*.tsx
+```
+
+### Finding Indirect Dependencies
+
+```bash
+# Check for components that extend or compose target component
+grep -r "extends.*ComponentNameProps" packages/
+grep -r "ComponentName.*Props" packages/
+
+# Find re-exports
+grep -r "export.*ComponentName" packages/*/src/index.ts
+grep -r "export.*from.*ComponentName" packages/
+```
+
+### Analyzing Package Dependencies
+
+```bash
+# Check package.json dependencies
+find packages/ -name "package.json" -exec grep -l "@vibe/component-name\|ComponentName" {} \;
+
+# Check workspace dependencies
+yarn workspace @vibe/core info
+yarn workspaces info
+```
+
+## Impact Assessment Matrix
+
+| Component | Import Type | Usage Pattern | Breaking Impact | Update Required |
+|-----------|-------------|---------------|-----------------|-----------------|
+| ButtonGroup | Direct | Props passed through | High | Yes - API change |
+| Dialog | Indirect | Used in composition | Medium | Yes - prop update |
+| Form | Test only | Test utilities | Low | Maybe - test update |
+
+## Component Relationship Types
+
+### Direct Usage
+- Component imports and uses target component
+- Props passed directly to target component
+- **Impact:** High - requires immediate update
+
+### Composed Usage
+- Component wraps or extends target component
+- May add additional props or behavior
+- **Impact:** Medium - requires careful testing
+
+### Re-export Usage
+- Package re-exports target component
+- May not use component directly
+- **Impact:** Low - update exports only
+
+### Test/Story Usage
+- Only used in test files or Storybook
+- No runtime impact on users
+- **Impact:** Minimal - update tests/stories
+
+## Dependency Update Strategy
+
+### Phase 1: Core Component Update
+1. Update target component with breaking change
+2. Update component types and interfaces
+3. Ensure component builds and basic tests pass
+
+### Phase 2: Direct Dependencies
+1. Update components with direct imports
+2. Update prop passing and usage patterns
+3. Fix compilation errors
+
+### Phase 3: Indirect Dependencies
+1. Update composed components
+2. Update complex usage patterns
+3. Verify behavioral consistency
+
+### Phase 4: Package Dependencies
+1. Update package.json versions if needed
+2. Update workspace dependencies
+3. Verify cross-package compatibility
+
+## Validation Commands
+
+```bash
+# Check TypeScript compilation across all packages
+lerna run type-check
+
+# Check for remaining references to old API
+grep -r "oldProp" packages/ --include="*.ts" --include="*.tsx"
+
+# Verify no broken imports
+yarn workspace @vibe/core build
+lerna run build
+
+# Check for usage in Storybook
+grep -r "oldProp" packages/**/__stories__/
+```
+
+## Common Dependency Patterns
+
+### Button Dependencies
+- ButtonGroup, IconButton, SplitButton
+- Form components (FieldButton, FormButton)
+- Dialog components (DialogButton)
+
+### Icon Dependencies
+- All components using icons
+- IconButton, Button with icons
+- Menu items, navigation components
+
+### Layout Dependencies
+- Grid system components
+- Container components
+- Responsive utilities
+
+### Hook Dependencies
+- Components using shared hooks
+- Custom hook implementations
+- Test utilities using hooks
+
+## Risk Mitigation
+
+### High-Risk Changes
+- Core utility changes (hooks, constants)
+- Base component changes (Button, Icon)
+- Type system changes (VibeComponentProps)
+
+### Medium-Risk Changes
+- Layout component changes
+- Form component changes
+- Complex composite components
+
+### Low-Risk Changes
+- Leaf components (no dependencies)
+- Style-only changes
+- Test utility changes
\ No newline at end of file
diff --git a/.claude/skills/vibe-breaking-change/references/pr-templates.md b/.claude/skills/vibe-breaking-change/references/pr-templates.md
new file mode 100644
index 0000000000..2e8e6f8b3c
--- /dev/null
+++ b/.claude/skills/vibe-breaking-change/references/pr-templates.md
@@ -0,0 +1,290 @@
+# PR and Documentation Templates
+
+## PR Template for Breaking Changes
+
+### PR Title Format
+
+Follow [Conventional Commits](https://www.conventionalcommits.org/). Use the appropriate type (`feat`, `fix`, `refactor`, etc.):
+
+```
+<type>(<scope>): brief description
+
+Examples:
+feat(Button): remove deprecated size prop
+refactor(Dialog): update API for better accessibility
+fix(Form): replace onSubmit with onFormSubmit
+```
+
+### PR Description Template
+
+```markdown
+## Summary
+• Brief description of the breaking change
+• Why this change was necessary
+• Impact on existing users
+
+## Breaking Changes
+**[ComponentName] API Changes:**
+- ❌ Removed: `oldProp` prop
+- ✅ Added: `newProp` prop with enhanced functionality
+- 🔄 Changed: `existingProp` now requires different value format
+
+## Migration Path
+
+### Automated Migration (Codemod Available)
+```bash
+npx @vibe/codemod component-name-api-update
+```
+
+### Manual Migration
+**Before:**
+```jsx
+<ComponentName
+  oldProp="value"
+  existingProp={oldFormat}
+/>
+```
+
+**After:**
+```jsx
+<ComponentName
+  newProp="value"
+  existingProp={newFormat}
+/>
+```
+
+## Task Link
+[Monday.com Task](https://monday.monday.com/boards/<BOARD_ID>/pulses/<PULSE_ID>)
+
+## Testing
+- [ ] All component tests pass
+- [ ] Integration tests updated and passing
+- [ ] Dependent components tested
+- [ ] Storybook stories render correctly
+- [ ] Codemod tested on real codebase examples
+- [ ] Performance impact assessed
+
+## Documentation
+- [ ] Migration guide updated
+- [ ] API documentation updated
+- [ ] Changelog entry added
+- [ ] Codemod documentation added
+
+## Validation
+- [ ] Full monorepo build passes
+- [ ] All linting checks pass
+- [ ] TypeScript compilation successful
+- [ ] No broken imports or exports
+- [ ] Manual testing completed
+
+## Reviewer Notes
+- Focus on [specific areas of concern]
+- Pay attention to [migration complexity/edge cases]
+- Verify [specific functionality still works]
+
+---
+🤖 Generated with [Claude Code](https://claude.com/claude-code)
+```
+
+## Commit Message Template
+
+Follow [Conventional Commits](https://www.conventionalcommits.org/). Use the appropriate type (`feat`, `fix`, `refactor`, etc.):
+
+```
+<type>(<scope>): brief description
+
+Detailed explanation of what changed and why.
+Include context about the problem being solved.
+
+BREAKING CHANGE: Specific description of what breaks.
+Explain the old behavior vs new behavior.
+
+Migration:
+- Old usage: ComponentName.oldProp
+- New usage: ComponentName.newProp
+- Codemod: npx @vibe/codemod component-migration
+
+Affects:
+- ComponentName API
+- Dependent components: ButtonGroup, Dialog
+- Documentation: Migration guide updated
+
+Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
+```
+
+## Migration Guide Entry Template
+
+```markdown
+## [ComponentName] API Changes
+
+### Overview
+Brief explanation of what changed and why the breaking change was necessary.
+
+### Breaking Changes
+
+#### Removed `oldProp` prop
+- **Impact**: High - affects all usage
+- **Reason**: Simplifies API and improves performance
+- **Migration**: Replace with `newProp`
+
+#### Changed `existingProp` format
+- **Impact**: Medium - affects complex usage
+- **Reason**: Better type safety and validation
+- **Migration**: Convert values using utility function
+
+### Before and After
+
+#### Basic Usage
+```jsx
+// Before
+<ComponentName
+  oldProp="value"
+  existingProp={complexOldFormat}
+  size="large"
+/>
+
+// After
+<ComponentName
+  newProp="value"
+  existingProp={simpleNewFormat}
+  size="large"
+/>
+```
+
+#### Advanced Usage
+```jsx
+// Before
+<ComponentName
+  oldProp={dynamicValue}
+  onOldEvent={(data) => handleOldWay(data)}
+/>
+
+// After
+<ComponentName
+  newProp={transformValue(dynamicValue)}
+  onNewEvent={(data) => handleNewWay(data)}
+/>
+```
+
+### Migration Strategies
+
+#### Automated Migration
+Use the provided codemod for straightforward cases:
+```bash
+npx @vibe/codemod componentname-api-update src/
+```
+
+The codemod handles:
+- Simple prop renames
+- Basic value transformations
+- Import statement updates
+
+#### Manual Migration
+For complex cases requiring human judgment:
+
+1. **Dynamic prop values**: Review logic and update calculations
+2. **Event handlers**: Update to match new event signature
+3. **Conditional usage**: Verify new API handles all conditions
+4. **Tests**: Update test assertions and mocks
+
+#### Gradual Migration
+For large codebases, consider a phased approach:
+
+1. **Phase 1**: Update critical components first
+2. **Phase 2**: Update high-traffic components
+3. **Phase 3**: Update remaining components
+4. **Phase 4**: Remove any compatibility shims
+
+### Common Issues
+
+#### TypeScript Errors
+```typescript
+// Error: Property 'oldProp' does not exist
+<ComponentName oldProp="value" />
+
+// Solution: Use new prop name
+<ComponentName newProp="value" />
+```
+
+#### Runtime Errors
+```javascript
+// Error: onOldEvent is not a function
+props.onOldEvent?.(data);
+
+// Solution: Use new event name
+props.onNewEvent?.(data);
+```
+
+### Validation
+After migration, verify:
+- [ ] No TypeScript compilation errors
+- [ ] Component renders as expected
+- [ ] Event handlers work correctly
+- [ ] Tests pass
+- [ ] No console warnings
+```
+
+## Changelog Entry Template
+
+```markdown
+### BREAKING CHANGES
+
+#### ComponentName v2.0.0
+- **BREAKING**: Removed `oldProp` in favor of `newProp` for better API consistency
+- **BREAKING**: Changed `existingProp` format from object to string for improved performance
+- **Migration**: Use `npx @vibe/codemod componentname-api-update` for automated migration
+- **Affects**: All ComponentName usage, ButtonGroup, Dialog components
+
+##### Migration Example
+```jsx
+// Before
+<ComponentName oldProp="value" existingProp={{key: "value"}} />
+
+// After
+<ComponentName newProp="value" existingProp="value" />
+```
+
+See [Migration Guide](./VIBE4_MIGRATION_GUIDE.md#componentname-api-changes) for detailed instructions.
+```
+
+## Code Review Checklist Template
+
+```markdown
+## Breaking Change Review Checklist
+
+### API Design
+- [ ] Breaking change is necessary and well-justified
+- [ ] New API is more intuitive than old API
+- [ ] API follows Vibe design system conventions
+- [ ] TypeScript types are accurate and helpful
+
+### Implementation
+- [ ] Target component updated correctly
+- [ ] All dependent components updated
+- [ ] No lingering references to old API
+- [ ] Error handling updated appropriately
+
+### Testing
+- [ ] Component tests updated and comprehensive
+- [ ] Integration tests cover dependent components
+- [ ] Edge cases tested
+- [ ] Performance impact assessed
+
+### Documentation
+- [ ] Migration guide entry is clear and complete
+- [ ] Code examples work correctly
+- [ ] Codemod documented and tested
+- [ ] Breaking change clearly flagged
+
+### Developer Experience
+- [ ] TypeScript errors are helpful
+- [ ] Runtime errors (if any) are clear
+- [ ] Migration path is straightforward
+- [ ] Documentation is discoverable
+
+### Build System
+- [ ] All packages build successfully
+- [ ] No circular dependencies introduced
+- [ ] Import/export structure clean
+- [ ] Version bumps appropriate
+```
\ No newline at end of file
diff --git a/.claude/skills/vibe-breaking-change/references/testing-validation.md b/.claude/skills/vibe-breaking-change/references/testing-validation.md
new file mode 100644
index 0000000000..336e05852b
--- /dev/null
+++ b/.claude/skills/vibe-breaking-change/references/testing-validation.md
@@ -0,0 +1,211 @@
+# Testing and Validation for Breaking Changes
+
+## Testing Strategy
+
+### 1. Unit Tests
+Test individual component behavior with new API
+
+```typescript
+// Before: Test with old API
+it('should handle oldProp correctly', () => {
+  render(<ComponentName oldProp="value" />);
+  expect(screen.getByRole('button')).toHaveAttribute('data-old', 'value');
+});
+
+// After: Test with new API
+it('should handle newProp correctly', () => {
+  render(<ComponentName newProp="value" />);
+  expect(screen.getByRole('button')).toHaveAttribute('data-new', 'value');
+});
+
+// Migration test: Ensure old API no longer works
+it('should not accept oldProp', () => {
+  // TypeScript should prevent this at compile time
+  // @ts-expect-error - oldProp no longer exists
+  render(<ComponentName oldProp="value" />);
+});
+```
+
+### 2. Integration Tests
+Test dependent components work with changes
+
+```typescript
+// Test component that uses the changed component
+it('should work with updated ComponentName API', () => {
+  render(
+    <ParentComponent>
+      <ComponentName newProp="value" />
+    </ParentComponent>
+  );
+
+  // Verify integration works
+  expect(screen.getByTestId('parent-wrapper')).toBeInTheDocument();
+  expect(screen.getByRole('button')).toHaveAttribute('data-new', 'value');
+});
+```
+
+### 3. Snapshot Testing
+Update snapshots for visual regression testing
+
+```bash
+# Update component snapshots
+yarn workspace @vibe/core test -- ComponentName --updateSnapshot
+
+# Update all affected snapshots
+yarn workspace @vibe/core test -- --updateSnapshot
+
+# Check snapshot diffs are intentional
+git diff packages/core/src/components/ComponentName/__tests__/__snapshots__/
+```
+
+## Validation Checklist
+
+### Pre-Implementation Validation
+- [ ] Impact analysis complete
+- [ ] Dependent components identified
+- [ ] Migration strategy defined
+- [ ] Breaking change justified and approved
+
+### Implementation Validation
+- [ ] Target component updated correctly
+- [ ] TypeScript compilation passes
+- [ ] Component tests updated and passing
+- [ ] No console errors in development
+
+### Dependency Validation
+- [ ] All dependent components updated
+- [ ] Integration tests passing
+- [ ] No broken imports or exports
+- [ ] Cross-package dependencies resolved
+
+### Build Validation
+```bash
+# Full monorepo build
+lerna run build
+
+# Individual package builds
+yarn workspace @vibe/core build
+yarn workspace @vibe/components build
+
+# TypeScript validation
+lerna run type-check
+
+# Lint validation
+lerna run lint
+```
+
+### Runtime Validation
+```bash
+# Storybook validation
+yarn storybook
+# Manually verify affected stories render correctly
+
+# Test app validation (if available)
+yarn start
+# Test breaking changes in demo application
+```
+
+### Documentation Validation
+- [ ] Migration guide updated with clear examples
+- [ ] Breaking change documented with before/after
+- [ ] Codemod usage documented (if applicable)
+- [ ] API documentation updated
+
+## Test Update Patterns
+
+### Props Interface Changes
+```typescript
+// Old interface
+interface OldComponentProps {
+  oldProp?: string;
+  size?: 'small' | 'medium' | 'large';
+}
+
+// New interface
+interface NewComponentProps {
+  newProp?: string;
+  size?: ComponentSize; // enum to string union
+}
+
+// Test updates needed:
+// 1. Update prop names in test cases
+// 2. Update enum values to string literals
+// 3. Add tests for new API behavior
+// 4. Remove tests for deprecated functionality
+```
+
+### Behavior Changes
+```typescript
+// Test behavioral changes
+describe('ComponentName behavior changes', () => {
+  it('should trigger callback on new event', () => {
+    const mockCallback = jest.fn();
+    render(<ComponentName onNewEvent={mockCallback} />);
+
+    // Trigger new behavior
+    fireEvent.click(screen.getByRole('button'));
+    expect(mockCallback).toHaveBeenCalledWith(/* new signature */);
+  });
+
+  it('should not trigger old callback', () => {
+    // Ensure old behavior is removed
+    const mockOldCallback = jest.fn();
+    // @ts-expect-error - old callback should not exist
+    render(<ComponentName onOldEvent={mockOldCallback} />);
+  });
+});
+```
+
+## Common Testing Pitfalls
+
+### 1. Incomplete Test Updates
+- **Problem:** Tests still use old API but pass due to lenient typing
+- **Solution:** Enable strict TypeScript checking in tests
+- **Validation:** `yarn workspace @vibe/core test --typecheck`
+
+### 2. Missing Integration Tests
+- **Problem:** Individual components work but integration breaks
+- **Solution:** Test component composition scenarios
+- **Validation:** Create test cases for typical usage patterns
+
+### 3. Snapshot Pollution
+- **Problem:** Snapshots updated but changes not reviewed
+- **Solution:** Review snapshot diffs before committing
+- **Validation:** `git diff --no-index old-snapshot new-snapshot`
+
+### 4. Performance Regressions
+- **Problem:** New API performs worse than old API
+- **Solution:** Add performance benchmarks for critical components
+- **Validation:** Use React DevTools Profiler
+
+## Automated Validation Scripts
+
+### Pre-commit Validation
+```bash
+#!/bin/bash
+# scripts/validate-breaking-change.sh
+
+echo "🔍 Validating breaking change implementation..."
+
+# 1. Check TypeScript compilation
+echo "Checking TypeScript..."
+lerna run type-check || exit 1
+
+# 2. Run tests
+echo "Running tests..."
+lerna run test || exit 1
+
+# 3. Check for old API usage
+echo "Checking for old API usage..."
+if grep -r "oldProp" packages/ --include="*.ts" --include="*.tsx"; then
+  echo "❌ Found old API usage"
+  exit 1
+fi
+
+# 4. Build validation
+echo "Validating build..."
+lerna run build || exit 1
+
+echo "✅ Breaking change validation passed"
+```
+
diff --git a/.claude/skills/vibe-breaking-change/references/workflow-checklist.md b/.claude/skills/vibe-breaking-change/references/workflow-checklist.md
new file mode 100644
index 0000000000..c637405ce0
--- /dev/null
+++ b/.claude/skills/vibe-breaking-change/references/workflow-checklist.md
@@ -0,0 +1,194 @@
+# Complete Breaking Change Workflow Checklist
+
+## Pre-Implementation Phase
+
+### Planning and Analysis
+- [ ] Breaking change request approved by team
+- [ ] Impact analysis completed
+- [ ] Alternative solutions considered and ruled out
+- [ ] Migration strategy defined
+- [ ] Timeline established
+
+### Dependency Mapping
+- [ ] Direct dependencies identified
+- [ ] Indirect dependencies mapped
+- [ ] Cross-package impacts assessed
+- [ ] Test dependencies catalogued
+- [ ] Documentation dependencies noted
+
+## Implementation Phase
+
+### Code Changes
+- [ ] Target component updated with breaking change
+- [ ] TypeScript interfaces updated
+- [ ] Component logic implements new API
+- [ ] Old API removed or deprecated appropriately
+- [ ] Component constants updated
+
+### Dependent Components
+- [ ] Direct dependents updated
+- [ ] Prop passing updated
+- [ ] Event handling updated
+- [ ] Composition patterns maintained
+- [ ] Integration points verified
+
+### Type System
+- [ ] Component props interfaces updated
+- [ ] Export types updated
+- [ ] Enum to string union conversions (if applicable)
+- [ ] Generic constraints updated
+- [ ] Utility type helpers updated
+
+## Testing Phase
+
+### Unit Testing
+- [ ] Component tests updated for new API
+- [ ] Old API tests removed
+- [ ] Edge cases covered
+- [ ] Error conditions tested
+- [ ] Accessibility tests updated
+
+### Integration Testing
+- [ ] Dependent component tests updated
+- [ ] Cross-package integration tested
+- [ ] Composition scenarios tested
+- [ ] Event flow tested
+- [ ] State management tested
+
+### Build and Compilation
+- [ ] TypeScript compilation passes
+- [ ] All packages build successfully
+- [ ] No circular dependencies
+- [ ] Import/export consistency verified
+- [ ] Bundle size impact assessed
+
+### Quality Assurance
+- [ ] Linting passes
+- [ ] Style linting passes
+- [ ] Prettier formatting applied
+- [ ] No console errors/warnings
+- [ ] Performance benchmarks within acceptable range
+
+## Documentation Phase
+
+### Migration Guide
+- [ ] Clear before/after examples
+- [ ] Migration strategies documented
+- [ ] Common issues addressed
+- [ ] Validation steps provided
+- [ ] Timeline for migration suggested
+
+### API Documentation
+- [ ] Component API docs updated
+- [ ] Props documentation current
+- [ ] Examples reflect new API
+- [ ] TypeScript signatures accurate
+- [ ] Deprecation notices removed
+
+### Changelog
+- [ ] Breaking change clearly flagged
+- [ ] Version bump appropriate
+- [ ] Impact description clear
+- [ ] Migration instructions included
+- [ ] Related issues referenced
+
+## Codemod Phase (If Applicable)
+
+### Codemod Development
+- [ ] Transform logic implements correctly
+- [ ] Edge cases handled
+- [ ] TypeScript compatibility maintained
+- [ ] JSX patterns covered
+- [ ] Test cases comprehensive
+
+### Codemod Testing
+- [ ] Dry run on real examples
+- [ ] Before/after comparison reviewed
+- [ ] Complex scenarios tested
+- [ ] Error handling validated
+- [ ] Performance acceptable
+
+### Codemod Integration
+- [ ] Added to codemod CLI
+- [ ] Documentation written
+- [ ] Usage examples provided
+- [ ] Integration tests added
+- [ ] Release notes updated
+
+## Validation Phase
+
+### Comprehensive Testing
+- [ ] Full test suite passes
+- [ ] Storybook stories render correctly
+- [ ] Example applications work
+- [ ] Performance tests pass
+- [ ] Accessibility tests pass
+
+### Build Verification
+- [ ] All packages build
+- [ ] Linting checks pass
+- [ ] Type checking passes
+- [ ] Bundle analysis clean
+- [ ] No build warnings
+
+### Manual Testing
+- [ ] Component behavior verified in browser
+- [ ] Responsive behavior tested
+- [ ] Keyboard navigation tested
+- [ ] Screen reader compatibility verified
+- [ ] Cross-browser testing completed
+
+## Release Phase
+
+### Branch and Commit
+- [ ] Feature branch created from vibe4
+- [ ] Meaningful commit messages
+- [ ] Breaking change flagged in commit
+- [ ] Co-authored appropriately
+- [ ] Commit history clean
+
+### Pull Request
+- [ ] PR title follows convention
+- [ ] Description comprehensive and clear
+- [ ] Breaking changes highlighted
+- [ ] Migration instructions included
+- [ ] Task/issue linked
+- [ ] Reviewers assigned
+
+### Code Review
+- [ ] API design reviewed
+- [ ] Implementation reviewed
+- [ ] Test coverage reviewed
+- [ ] Documentation reviewed
+- [ ] Migration path validated
+
+### CI/CD Pipeline
+- [ ] All automated tests pass
+- [ ] Build artifacts generated
+- [ ] Quality gates passed
+- [ ] Security scans clean
+- [ ] Performance benchmarks acceptable
+
+## Post-Implementation Phase
+
+### Merge and Deploy
+- [ ] PR approved and merged
+- [ ] Branch cleaned up
+- [ ] Version tagged appropriately
+- [ ] Release notes published
+- [ ] Team notified of changes
+
+### Monitoring
+- [ ] Error rates monitored
+- [ ] Performance impact tracked
+- [ ] User feedback collected
+- [ ] Migration adoption tracked
+- [ ] Support requests handled
+
+### Follow-up Actions
+- [ ] Migration deadline set and communicated
+- [ ] Deprecated API removal scheduled
+- [ ] Backward compatibility plan finalized
+- [ ] Success metrics defined
+- [ ] Lessons learned documented
+
diff --git a/.cursor/rules/base-components.mdc b/.cursor/rules/base-components.mdc
index 4607c0d938..db4f425e7e 100644
--- a/.cursor/rules/base-components.mdc
+++ b/.cursor/rules/base-components.mdc
@@ -234,7 +234,7 @@ Components support various size variants.
 
 Components use CSS custom properties for theming:
 
-- Design tokens from Vibe's styling library (`monday-ui-style`)
+- Design tokens from Vibe's styling library (`@vibe/style`)
 - Automatic dark/light mode support
 - Consistent spacing and typography scales
 
diff --git a/.cursor/rules/component-internal-structure.mdc b/.cursor/rules/component-internal-structure.mdc
index 8c8fdfbb64..04c0cdaeb1 100644
--- a/.cursor/rules/component-internal-structure.mdc
+++ b/.cursor/rules/component-internal-structure.mdc
@@ -13,7 +13,6 @@ alwaysApply: false
 2. **TypeScript**: All components must be written in TypeScript.
 3. **`forwardRef`**: Prefer using `React.forwardRef` for all components that might need to expose their underlying DOM element or instance to parent components. The `ref` should be typed directly on the function's second argument.
 4. **Props Typing and Destructuring**: Props must be destructured in the component function's first argument, and this argument must be explicitly typed with the component's props type.
-5. **No Static Properties**: Never use the `withStaticProps` utility or assign static properties to components. Components should remain without attached static properties. This means avoiding patterns like `MyComponent.colors = {...}`, `MyComponent.sizes = {...}`, and even avoiding `MyComponent.displayName = "..."`.
 
 ## File Structure (within the `.tsx` file)
 
diff --git a/.cursor/rules/styling-conventions.mdc b/.cursor/rules/styling-conventions.mdc
index 189d341a3c..d01cad5744 100644
--- a/.cursor/rules/styling-conventions.mdc
+++ b/.cursor/rules/styling-conventions.mdc
@@ -1,5 +1,5 @@
 ---
-description: "Provides comprehensive guidelines for writing CSS Modules specifically for UI components within the `@vibe/core` library (under `packages/core/src/components/`). This rule covers file naming conventions (e.g., `ComponentName.module.scss`), CSS nesting, mandatory browser compatibility, strategies for adopting newer CSS APIs with fallbacks, the exclusive use of design tokens from `monday-ui-style` (via CSS custom properties like `var(--primary-text-color)`), discouraging mixin usage from `monday-ui-style`, typography best practices (using `Text`/`Heading` components instead of direct font tokens), `camelCase` class naming, and common anti-patterns like avoiding theme-specific styles directly in component SCSS, never using `:global`, and never using `!important`. Activate this rule when working with `.module.scss` files in `packages/core/src/components/` or when styling Vibe core components."
+description: "Provides comprehensive guidelines for writing CSS Modules specifically for UI components within the `@vibe/core` library (under `packages/core/src/components/`). This rule covers file naming conventions (e.g., `ComponentName.module.scss`), CSS nesting, mandatory browser compatibility, strategies for adopting newer CSS APIs with fallbacks, the exclusive use of design tokens from `@vibe/style` (via CSS custom properties like `var(--primary-text-color)`), discouraging mixin usage from `@vibe/style`, typography best practices (using `Text`/`Heading` components instead of direct font tokens), `camelCase` class naming, and common anti-patterns like avoiding theme-specific styles directly in component SCSS, never using `:global`, and never using `!important`. Activate this rule when working with `.module.scss` files in `packages/core/src/components/` or when styling Vibe core components."
 globs:
   - "packages/core/src/components/**/*.module.scss"
 alwaysApply: false
@@ -62,20 +62,20 @@ This document outlines the rules and best practices for writing styles using SCS
 ## 3. Design Tokens
 
 - **Utilize Design Tokens:** Always prefer design tokens over hardcoded values (e.g., pixel values for spacing, specific hex codes for colors).
-- **Source of Tokens:** Design tokens are provided by the `monday-ui-style` package, located in the `packages/style` directory. The available tokens are defined as CSS custom properties within the theme classes (e.g., `.default-app-theme`, `.dark-app-theme`, `.black-app-theme`) in the `packages/style/dist/index.css` file. This file serves as the source of truth for all available tokens.
+- **Source of Tokens:** Design tokens are provided by the `@vibe/style` package, located in the `packages/style` directory. The available tokens are defined as CSS custom properties within the theme classes (e.g., `.default-app-theme`, `.dark-app-theme`, `.black-app-theme`) in the `packages/style/dist/index.css` file. This file serves as the source of truth for all available tokens.
   - Tokens are typically used as CSS custom properties: `var(--token-name)`.
   - Example: `color: var(--primary-text-color);`, `margin-bottom: var(--space-8);`
 - **Semantic Usage:** Use tokens semantically. For instance, use a background color token for backgrounds, a text color token for text, and spacing tokens for margins/paddings, according to their intended purpose.
 - **Pixel Units for Non-Token Values:** When a design token is not available or suitable for a specific dimension (e.g., a unique border width, a specific icon size not covered by spacing tokens), always use pixel (`px`) units. Do not use `em`, `rem`, percentages, or other relative units for these cases unless explicitly part of a design token's definition or a well-justified, specific requirement.
 - **Prefer New Spacing System:** For layout spacing (margins, paddings, gaps, etc.), prioritize the new numeric spacing tokens (e.g., `var(--space-2)`, `var(--space-4)`, `var(--space-8)`). These should be used instead of the legacy named spacing tokens (e.g., `var(--spacing-xs)`, `var(--spacing-small)`, `var(--spacing-medium)`). Strive to use the new system in all new code or in any css code you're asked to refactor.
 
-## 4. Mixins from `monday-ui-style`
+## 4. Mixins from `@vibe/style`
 
-- **Discourage Use of Mixins:** While some existing components might use mixins imported from `monday-ui-style` (e.g., `@import "~monday-ui-style/dist/mixins";` and usages like `@include focus-style();`), the preference is to **avoid using these mixins for new development or when refactoring existing components.**
+- **Discourage Use of Mixins:** While some existing components might use mixins imported from `@vibe/style` (e.g., `@import "~@vibe/style/dist/mixins";` and usages like `@include focus-style();`), the preference is to **avoid using these mixins for new development or when refactoring existing components.**
 
 ## 5. Typography
 
-- **Use Vibe Components for Typography:** Do not directly use font family, font size, font weight, or line height tokens from `monday-ui-style` within your `.module.scss` files.
+- **Use Vibe Components for Typography:** Do not directly use font family, font size, font weight, or line height tokens from `@vibe/style` within your `.module.scss` files.
 - Instead, leverage the `Text` and `Heading` components from `@vibe/core` (`packages/core/src/components/Typography/Text` and `packages/core/src/components/Typography/Heading`). These components are already configured to apply the correct typography design tokens according to supplied props.
 
 ## 6. Class Naming Conventions
diff --git a/.cursor/templates/package-separation/package.json b/.cursor/templates/package-separation/package.json
index ba72926007..a99b83dce5 100644
--- a/.cursor/templates/package-separation/package.json
+++ b/.cursor/templates/package-separation/package.json
@@ -48,7 +48,7 @@
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
     "react-test-renderer": "16",
-    "typescript": "^4.7.3",
+    "typescript": "^5.9.3",
     "vitest": "^1.6.0"
   },
   "peerDependencies": {
diff --git a/CLAUDE.md b/CLAUDE.md
index 95eca3c8ae..3e8a2be997 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -132,7 +132,7 @@ The repository includes an MCP (Model Context Protocol) server (`@vibe/mcp`) tha
 - **Rollup** for bundling with TypeScript support
 - **Independent versioning** via Lerna
 - **Metadata generation** for component documentation
-- **CSS token handling** via `monday-ui-style` package
+- **CSS token handling** via `@vibe/style` package
 
 ## Important Files and Conventions
 
diff --git a/README.md b/README.md
index e560bdf2a9..9338a41aa7 100644
--- a/README.md
+++ b/README.md
@@ -58,16 +58,16 @@ To get started, follow the installation instructions in the [@vibe/mcp](https://
 - [@vibe/icons](https://github.com/mondaycom/vibe/blob/master/packages/icons/README.md): Icons library
 - [@vibe/testkit](https://github.com/mondaycom/vibe/blob/master/packages/testkit/README.md): Testing utilities for Playwright
 - [@vibe/codemod](https://github.com/mondaycom/vibe/blob/master/packages/codemod/README.md): Codemods and CLI tools
-- [monday-ui-style](https://github.com/mondaycom/vibe/blob/master/packages/style/README.md): Styling foundations (included in @vibe/core)
+- [@vibe/style](https://github.com/mondaycom/vibe/blob/master/packages/style/README.md): Styling foundations (included in @vibe/core)
 - [vibe-storybook-components](https://github.com/mondaycom/vibe/blob/master/packages/storybook-blocks/README.md): Vibe Storybook Blocks
 - [storybook-addon-playground](https://github.com/mondaycom/storybook-addon-playground/): A Component Playground Addon for Storybook
 - [@vibe/mcp](https://github.com/mondaycom/vibe/blob/master/packages/mcp/README.md): MCP server for Vibe Design System
 
 ## Older Versions
 
-Vibe 2 ([`monday-ui-react-core`](https://www.npmjs.com/package/monday-ui-react-core)) will no longer receive new features or enhancements but will continue to receive critical bug fixes as needed. We highly recommend following the [migration guide](http://vibe.monday.com/?path=/docs/migration-guide--docs) to upgrade to the actively maintained Vibe 3, which includes the latest improvements, new components, and ongoing support.
+Vibe 3 ([`@vibe/core` v3](https://www.npmjs.com/package/@vibe/core)) will no longer receive new features or enhancements but will continue to receive critical bug fixes as needed. We highly recommend following the [migration guide](http://vibe.monday.com/?path=/docs/migration-guide--docs) to upgrade to the actively maintained Vibe 4, which includes the latest improvements, new components, and ongoing support.For version 3 documentation, see [vibe.monday.com/v3](https://vibe.monday.com/v3).
 
-For version 2 documentation, see [vibe.monday.com/v2](https://vibe.monday.com/v2).
+Vibe 2 ([`monday-ui-react-core`](https://www.npmjs.com/package/monday-ui-react-core)) is no longer maintained. For version 2 documentation, see [vibe.monday.com/v2](https://vibe.monday.com/v2).
 
 ## Contributing
 
diff --git a/package.json b/package.json
index 6bee866497..361ce58d78 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
     "bytes": "^3.1.2",
     "lerna": "^8.1.2",
     "size-limit": "^11.2.0",
-    "typescript": "^4.7.3"
+    "typescript": "^5.9.3"
   },
   "workspaces": [
     "packages/*",
diff --git a/packages/base/package.json b/packages/base/package.json
index 81043e10ed..83040c5a56 100644
--- a/packages/base/package.json
+++ b/packages/base/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vibe/base",
-  "version": "3.0.5",
+  "version": "4.0.0-rc.0",
   "description": "Vibe sub-package for base components",
   "repository": {
     "type": "git",
@@ -38,17 +38,18 @@
     "lint": "eslint \"./src/**/*.{js,jsx,ts,tsx}\""
   },
   "dependencies": {
-    "@vibe/shared": "3.0.8",
+    "@vibe/shared": "^4.0.0-rc.0",
+    "@vibe/style": "^4.0.0-rc.0",
     "classnames": "^2.5.1"
   },
   "devDependencies": {
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
-    "@vibe/config": "3.0.5",
+    "@vibe/config": "^4.0.0-rc.0",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
     "react-test-renderer": "16",
-    "typescript": "^4.7.3",
+    "typescript": "^5.9.3",
     "vitest": "^1.6.0"
   },
   "peerDependencies": {
diff --git a/packages/base/src/BaseInput/BaseInput.module.scss b/packages/base/src/BaseInput/BaseInput.module.scss
index acebc52744..c9f500d601 100644
--- a/packages/base/src/BaseInput/BaseInput.module.scss
+++ b/packages/base/src/BaseInput/BaseInput.module.scss
@@ -1,13 +1,13 @@
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 
 .wrapper {
   width: 100%;
   position: relative;
   display: flex;
   align-items: center;
-  gap: var(--spacing-small);
-  padding-block: var(--spacing-xs);
-  padding-inline: var(--spacing-medium) var(--spacing-xs);
+  gap: var(--space-8);
+  padding-block: var(--space-8);
+  padding-inline: var(--space-12) var(--space-4);
 
   @include vibe-text(text1, normal);
   @include smoothing-text;
@@ -22,6 +22,8 @@
   &.small {
     min-height: 32px;
     height: 32px;
+    padding-inline-start: var(--space-8);
+    gap: var(--space-4);
     @include vibe-text(text2, normal);
   }
 
@@ -33,11 +35,11 @@
   &.large {
     min-height: 48px;
     height: 48px;
-    padding-block: var(--spacing-small);
+    padding-block: var(--space-8);
   }
 
   &.rightThinnerPadding {
-    padding-inline-end: var(--spacing-medium);
+    padding-inline-end: var(--space-16);
   }
 
   &:hover {
@@ -160,7 +162,7 @@
     outline: none;
 
     &::placeholder {
-      color: var(--secondary-text-color);
+      color: var(--placeholder-color);
       font-weight: 400;
     }
 
diff --git a/packages/codemod/README.md b/packages/codemod/README.md
index 6d9666f278..76673b567a 100644
--- a/packages/codemod/README.md
+++ b/packages/codemod/README.md
@@ -16,13 +16,13 @@ npx @vibe/codemod [options]
 
 ### `--migration` (alias: `-m`)
 
-- **Description**: Specifies which migration type to run (e.g., `v3`).
-- **Choices**: `v3`
+- **Description**: Specifies which migration type to run (e.g., `v3`, `v4`).
+- **Choices**: `v3`, `v4`
 - **Required**: Yes
 - **Example**:
 
   ```bash
-  npx @vibe/codemod --migration v3
+  npx @vibe/codemod --migration v4
   ```
 
 ### `--target` (alias: `-t`)
@@ -77,6 +77,11 @@ The following migrations are included in this CLI:
 - **Migration Type**: `v3` (`--migration v3`)
 - **Description**: This migration transforms components and files to comply with version 3 of @vibe/code.
 
+### `v4` Migration
+
+- **Migration Type**: `v4` (`--migration v4`)
+- **Description**: This migration transforms components and files to comply with version 4 of @vibe/core. Handles breaking changes including component API updates, type changes, and package structure modifications.
+
 ### `enums` Migration
 
 - **Migration Type**: `enums` (`--migration enums`)
diff --git a/packages/codemod/bin/vibe-codemod.ts b/packages/codemod/bin/vibe-codemod.ts
index 784e7e5024..6641a4cc01 100755
--- a/packages/codemod/bin/vibe-codemod.ts
+++ b/packages/codemod/bin/vibe-codemod.ts
@@ -13,7 +13,8 @@ import { hideBin } from "yargs/helpers";
 
 const mapMigrationType: { [key: string]: string } = {
   v3: "v2-to-v3",
-  enums: "v2-to-v3/enums"
+  enums: "v2-to-v3/enums",
+  v4: "v3-to-v4"
 };
 
 const migrations = Object.keys(mapMigrationType);
@@ -22,7 +23,7 @@ const argv = yargs(hideBin(process.argv))
   .option("migration", {
     alias: "m",
     type: "string",
-    description: "Migration type to run (e.g., v3, enums)",
+    description: "Migration type to run (e.g., v3, v4, enums)",
     choices: migrations
   })
   .option("target", {
@@ -123,6 +124,9 @@ async function main() {
   if (migrationType === "v3" && !isVibeCoreInstalled) {
     console.log(chalk.yellow("Warning: You need to install @vibe/core package to fully apply the v3 migration."));
   }
+  if (migrationType === "v4" && !isVibeCoreInstalled) {
+    console.log(chalk.yellow("Warning: You need to install @vibe/core package to fully apply the v4 migration."));
+  }
   if (migrationType === "enums" && !isVibeCoreInstalled) {
     console.log(chalk.red("Error: Please install @vibe/core to run the enum migration."));
     process.exit(1);
@@ -259,7 +263,12 @@ async function main() {
           resolve(transformationsDir, "type-imports-migration.js"),
           resolve(transformationsDir, "packages-rename-migration.js")
         ]
-      : [];
+      : migrationType === "v4"
+        ? [
+            resolve(transformationsDir, "next-imports-migration.js"),
+            resolve(transformationsDir, "packages-rename-migration.js")
+          ]
+        : [];
   const orderedTransformationFiles = [
     ...transformationFiles.filter(file => !filesToProcessLast.includes(file)),
     ...filesToProcessLast
diff --git a/packages/codemod/package.json b/packages/codemod/package.json
index 89c7ac5340..6bfa4e8909 100644
--- a/packages/codemod/package.json
+++ b/packages/codemod/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vibe/codemod",
-  "version": "1.1.0",
+  "version": "4.0.0-rc.0",
   "description": "Vibe's component library migration tool",
   "repository": {
     "type": "git",
diff --git a/packages/codemod/transformations/core/v3-to-v4/Chips-component-migration.ts b/packages/codemod/transformations/core/v3-to-v4/Chips-component-migration.ts
new file mode 100644
index 0000000000..ad4524dfe6
--- /dev/null
+++ b/packages/codemod/transformations/core/v3-to-v4/Chips-component-migration.ts
@@ -0,0 +1,28 @@
+import {
+  wrap,
+  getImports,
+  getComponentNameOrAliasFromImports,
+  findComponentElements,
+  removeProp
+} from "../../../src/utils";
+import { NEW_CORE_IMPORT_PATH } from "../../../src/consts";
+import { TransformationContext } from "../../../types";
+
+/**
+ * Chips migration for v3 to v4:
+ * Remove the deprecated `disableClickableBehavior` prop
+ */
+function transform({ j, root }: TransformationContext) {
+  const imports = getImports(root, NEW_CORE_IMPORT_PATH);
+  const componentName = getComponentNameOrAliasFromImports(j, imports, "Chips");
+  if (!componentName) return;
+
+  const elements = findComponentElements(root, componentName);
+  if (!elements.length) return;
+
+  elements.forEach(elementPath => {
+    removeProp(j, elementPath, "disableClickableBehavior");
+  });
+}
+
+export default wrap(transform);
diff --git a/packages/codemod/transformations/core/v3-to-v4/Dialog-component-migration.ts b/packages/codemod/transformations/core/v3-to-v4/Dialog-component-migration.ts
new file mode 100644
index 0000000000..59d1ba0c53
--- /dev/null
+++ b/packages/codemod/transformations/core/v3-to-v4/Dialog-component-migration.ts
@@ -0,0 +1,29 @@
+import {
+  wrap,
+  getImports,
+  getComponentNameOrAliasFromImports,
+  findComponentElements,
+  removeProp
+} from "../../../src/utils";
+import { NEW_CORE_IMPORT_PATH } from "../../../src/consts";
+import { TransformationContext } from "../../../types";
+
+/**
+ * Dialog migration for v3 to v4:
+ * Remove the deprecated `enableNestedDialogLayer` prop.
+ * Dialog now always wraps content with LayerProvider.
+ */
+function transform({ j, root }: TransformationContext) {
+  const imports = getImports(root, NEW_CORE_IMPORT_PATH);
+  const componentName = getComponentNameOrAliasFromImports(j, imports, "Dialog");
+  if (!componentName) return;
+
+  const elements = findComponentElements(root, componentName);
+  if (!elements.length) return;
+
+  elements.forEach(elementPath => {
+    removeProp(j, elementPath, "enableNestedDialogLayer");
+  });
+}
+
+export default wrap(transform);
diff --git a/packages/codemod/transformations/core/v3-to-v4/Flex-component-migration.ts b/packages/codemod/transformations/core/v3-to-v4/Flex-component-migration.ts
new file mode 100644
index 0000000000..8d83dbb425
--- /dev/null
+++ b/packages/codemod/transformations/core/v3-to-v4/Flex-component-migration.ts
@@ -0,0 +1,38 @@
+import {
+  wrap,
+  getCoreImportsForFile,
+  getComponentNameOrAliasFromImports,
+  findComponentElements,
+  isPropExists,
+  findProps,
+  getPropValue,
+  removeProp
+} from "../../../src/utils";
+import { NEW_CORE_IMPORT_PATH } from "../../../src/consts";
+import { TransformationContext } from "../../../types";
+
+/**
+ * Flex component migration for v3 to v4:
+ * 1. Remove `justify="stretch"` — "stretch" is not a valid value for justify-content in flexbox
+ *    and had no CSS implementation. The prop is removed entirely.
+ * 2. Remove `justify={FlexJustify.STRETCH}` — same reason, enum value removed.
+ */
+function transform({ j, root }: TransformationContext) {
+  const imports = getCoreImportsForFile(root, NEW_CORE_IMPORT_PATH);
+  const componentName = getComponentNameOrAliasFromImports(j, imports, "Flex");
+  if (!componentName) return;
+
+  const elements = findComponentElements(root, componentName);
+  if (!elements.length) return;
+
+  elements.forEach(elementPath => {
+    if (!isPropExists(j, elementPath, "justify")) return;
+    const prop = findProps(j, elementPath, "justify").get(0);
+    const justifyValue = getPropValue(j, prop.node);
+    if (justifyValue === "stretch" || justifyValue === "FlexJustify.STRETCH") {
+      removeProp(j, elementPath, "justify");
+    }
+  });
+}
+
+export default wrap(transform);
diff --git a/packages/codemod/transformations/core/v3-to-v4/Icon-component-migration.ts b/packages/codemod/transformations/core/v3-to-v4/Icon-component-migration.ts
new file mode 100644
index 0000000000..3b043fc98e
--- /dev/null
+++ b/packages/codemod/transformations/core/v3-to-v4/Icon-component-migration.ts
@@ -0,0 +1,34 @@
+import {
+  wrap,
+  getImports,
+  getComponentNameOrAliasFromImports,
+  findComponentElements,
+  migratePropsNames
+} from "../../../src/utils";
+import { NEW_CORE_IMPORT_PATH } from "../../../src/consts";
+import { TransformationContext } from "../../../types";
+
+/**
+ * Icon component migration for v3 to v4:
+ * 1. Rename iconLabel prop to label
+ * 2. Rename iconType prop to type
+ * 3. Rename iconSize prop to size
+ */
+function transform({ j, root, filePath }: TransformationContext) {
+  const imports = getImports(root, NEW_CORE_IMPORT_PATH);
+  const componentName = getComponentNameOrAliasFromImports(j, imports, "Icon");
+  if (!componentName) return;
+
+  const elements = findComponentElements(root, componentName);
+  if (!elements.length) return;
+
+  elements.forEach(elementPath => {
+    migratePropsNames(j, elementPath, filePath, componentName, {
+      iconLabel: "label",
+      iconType: "type",
+      iconSize: "size"
+    });
+  });
+}
+
+export default wrap(transform);
diff --git a/packages/codemod/transformations/core/v3-to-v4/LinearProgressBar-component-migration.ts b/packages/codemod/transformations/core/v3-to-v4/LinearProgressBar-component-migration.ts
new file mode 100644
index 0000000000..010dcb882f
--- /dev/null
+++ b/packages/codemod/transformations/core/v3-to-v4/LinearProgressBar-component-migration.ts
@@ -0,0 +1,53 @@
+import { wrap, getImports } from "../../../src/utils";
+import { NEW_CORE_IMPORT_PATH } from "../../../src/consts";
+import { TransformationContext } from "../../../types";
+
+/**
+ * LinearProgressBar migration for v3 to v4:
+ * 1. Rename LinearProgressBar import to ProgressBar
+ * 2. Rename LinearProgressBarProps type import to ProgressBarProps
+ * 3. Rename JSX usage from <LinearProgressBar> to <ProgressBar>
+ */
+function transform({ j, root }: TransformationContext) {
+  const imports = getImports(root, NEW_CORE_IMPORT_PATH);
+
+  // Rename the component import specifier
+  imports.find(j.ImportSpecifier).forEach(specifier => {
+    const imported = specifier.node.imported;
+    if (imported.type === "Identifier") {
+      if (imported.name === "LinearProgressBar") {
+        // If no local alias, rename both imported and local
+        if (!specifier.node.local || specifier.node.local.name === "LinearProgressBar") {
+          imported.name = "ProgressBar";
+          specifier.node.local = j.identifier("ProgressBar");
+        } else {
+          // Has an alias — only rename the imported name
+          imported.name = "ProgressBar";
+        }
+      }
+      if (imported.name === "LinearProgressBarProps") {
+        if (!specifier.node.local || specifier.node.local.name === "LinearProgressBarProps") {
+          imported.name = "ProgressBarProps";
+          specifier.node.local = j.identifier("ProgressBarProps");
+        } else {
+          imported.name = "ProgressBarProps";
+        }
+      }
+    }
+  });
+
+  // Find all JSX elements named LinearProgressBar and rename them
+  root.find(j.JSXIdentifier, { name: "LinearProgressBar" }).forEach(path => {
+    path.node.name = "ProgressBar";
+  });
+
+  // Rename any remaining references (e.g. in type annotations)
+  root.find(j.Identifier, { name: "LinearProgressBarProps" }).forEach(path => {
+    // Don't rename import specifiers (already handled above)
+    if (path.parent.node.type !== "ImportSpecifier") {
+      path.node.name = "ProgressBarProps";
+    }
+  });
+}
+
+export default wrap(transform);
diff --git a/packages/codemod/transformations/core/v3-to-v4/README.md b/packages/codemod/transformations/core/v3-to-v4/README.md
new file mode 100644
index 0000000000..5d53ff84a5
--- /dev/null
+++ b/packages/codemod/transformations/core/v3-to-v4/README.md
@@ -0,0 +1,139 @@
+# Vibe v3 to v4 Migration Transformations
+
+This directory contains all transformation files for migrating from Vibe v3 to v4.
+
+## Structure
+
+```
+v3-to-v4/
+├── README.md                           # This file
+├── {Component}-component-migration.ts  # Component-specific migrations
+├── enums/                             # Enum-related migrations
+│   ├── Enums-migration.ts
+│   ├── enumMappings.json
+│   └── __tests__/
+└── __tests__/                         # Test files for migrations
+    └── {Component}-component-migration.test.ts
+```
+
+## Adding New Transformations
+
+### 1. Component Migration
+
+For component-specific breaking changes, create a file named `{ComponentName}-component-migration.ts`:
+
+```typescript
+import {
+  wrap,
+  getCoreImportsForFile,
+  getComponentNameOrAliasFromImports,
+  findComponentElements,
+  migratePropsNames
+} from "../../../src/utils";
+import { TransformationContext } from "../../../types";
+
+/**
+ * Migration description:
+ * 1. Change description
+ * 2. Another change
+ */
+function transform({ j, root, filePath }: TransformationContext) {
+  const imports = getCoreImportsForFile(root);
+  const componentName = getComponentNameOrAliasFromImports(j, imports, "ComponentName");
+  if (!componentName) return;
+
+  const elements = findComponentElements(root, componentName);
+  if (!elements.length) return;
+
+  elements.forEach(elementPath => {
+    // Apply transformations here
+    migratePropsNames(j, elementPath, filePath, componentName, {
+      oldPropName: "newPropName"
+    });
+  });
+}
+
+export default wrap(transform);
+```
+
+### 2. Add Tests
+
+Create a corresponding test file in `__tests__/{ComponentName}-component-migration.test.ts`:
+
+```typescript
+import { defineInlineTest } from "jscodeshift/dist/testUtils";
+import transform from "../{ComponentName}-component-migration";
+
+describe("{ComponentName} Migration", () => {
+  defineInlineTest(
+    { default: transform, parser: "tsx" },
+    {},
+    `
+import { ComponentName } from "@vibe/core";
+<ComponentName oldPropName="value" />
+    `,
+    `
+import { ComponentName } from "@vibe/core";
+<ComponentName newPropName="value" />
+    `,
+    "should migrate oldPropName to newPropName"
+  );
+});
+```
+
+### 3. Update CLI Support
+
+The CLI will automatically pick up new transformation files. No additional registration needed.
+
+## Migration Types
+
+### Component Props
+
+- Renaming props
+- Changing prop types
+- Removing deprecated props
+- Adding required props with defaults
+
+### Component Names
+
+- Renaming components
+- Moving components between packages
+
+### Imports
+
+- Changing import paths
+- Updating package names
+
+### Enums
+
+- Converting enums to string literals
+- Renaming enum values
+
+## Testing
+
+Run tests for all v3-to-v4 transformations:
+
+```bash
+yarn workspace @vibe/codemod test v3-to-v4
+```
+
+Run a specific transformation test:
+
+```bash
+yarn workspace @vibe/codemod test ComponentName-component-migration
+```
+
+## Running Transformations
+
+Once implemented, users can run the v4 migration:
+
+```bash
+npx @vibe/codemod --migration v4
+```
+
+## Notes
+
+- All transformations should be idempotent (safe to run multiple times)
+- Consider edge cases and provide helpful error messages
+- Document the reasoning for each breaking change
+- Update the main VIBE4_CHANGELOG.md when adding new transformations
diff --git a/packages/codemod/transformations/core/v3-to-v4/TextField-component-migration.ts b/packages/codemod/transformations/core/v3-to-v4/TextField-component-migration.ts
new file mode 100644
index 0000000000..3f7e0a87da
--- /dev/null
+++ b/packages/codemod/transformations/core/v3-to-v4/TextField-component-migration.ts
@@ -0,0 +1,86 @@
+import {
+  wrap,
+  getImports,
+  getComponentNameOrAliasFromImports,
+  findComponentElements,
+  isPropExists,
+  findProps,
+  removeProp,
+  migratePropsNames
+} from "../../../src/utils";
+import { NEW_CORE_IMPORT_PATH } from "../../../src/consts";
+import { TransformationContext } from "../../../types";
+
+/**
+ * TextField migration for v3 to v4:
+ * - Replace object prop `iconsNames={{ primary, secondary }}` with flat props `iconLabel` and `secondaryIconLabel`
+ * - Rename `iconName` prop to `icon`
+ */
+function transform({ j, root, filePath }: TransformationContext) {
+  const imports = getImports(root, NEW_CORE_IMPORT_PATH);
+  const componentName = getComponentNameOrAliasFromImports(j, imports, "TextField");
+  if (!componentName) return;
+
+  const elements = findComponentElements(root, componentName);
+  if (!elements.length) return;
+
+  elements.forEach(elementPath => {
+    // Rename `iconName` prop to `icon`
+    migratePropsNames(j, elementPath, filePath, componentName, { iconName: "icon" });
+
+    if (!isPropExists(j, elementPath, "iconsNames")) return;
+
+    const iconsNamesProp = findProps(j, elementPath, "iconsNames");
+    if (!iconsNamesProp.length) return;
+
+    const propNode = iconsNamesProp.at(0).get().node;
+    const value = propNode.value;
+
+    // Handle object expression: iconsNames={{ primary: "X", secondary: "Y" }}
+    if (value?.type === "JSXExpressionContainer" && value.expression.type === "ObjectExpression") {
+      const properties = value.expression.properties;
+
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      properties.forEach((prop: any) => {
+        if (prop.type !== "ObjectProperty" && prop.type !== "Property") return;
+
+        const key = prop.key;
+        const keyName = key.type === "Identifier" ? key.name : key.type === "StringLiteral" ? key.value : null;
+
+        if (!keyName) return;
+
+        let newPropName: string | null = null;
+        if (keyName === "primary") {
+          newPropName = "iconLabel";
+        } else if (keyName === "secondary") {
+          newPropName = "secondaryIconLabel";
+        }
+
+        if (!newPropName) return;
+
+        // Skip if the new prop already exists
+        if (isPropExists(j, elementPath, newPropName)) return;
+
+        const propValue = prop.value;
+
+        let newAttr;
+        if (propValue.type === "StringLiteral") {
+          // Static string: primary: "Search" -> iconLabel="Search"
+          newAttr = j.jsxAttribute(j.jsxIdentifier(newPropName), j.literal(propValue.value));
+        } else {
+          // Dynamic expression: primary: dynamicLabel -> iconLabel={dynamicLabel}
+          newAttr = j.jsxAttribute(j.jsxIdentifier(newPropName), j.jsxExpressionContainer(propValue));
+        }
+
+        elementPath.node.openingElement.attributes?.push(newAttr);
+      });
+
+      // Remove the old iconsNames prop
+      removeProp(j, elementPath, "iconsNames");
+    }
+    // For non-object expressions (e.g. iconsNames={someVariable}), we can't safely transform
+    // Leave as-is and let the developer handle manually
+  });
+}
+
+export default wrap(transform);
diff --git a/packages/codemod/transformations/core/v3-to-v4/TextWithHighlight-component-migration.ts b/packages/codemod/transformations/core/v3-to-v4/TextWithHighlight-component-migration.ts
new file mode 100644
index 0000000000..f198bf3367
--- /dev/null
+++ b/packages/codemod/transformations/core/v3-to-v4/TextWithHighlight-component-migration.ts
@@ -0,0 +1,84 @@
+import {
+  wrap,
+  getCoreImportsForFile,
+  getComponentNameOrAliasFromImports,
+  findComponentElements,
+  removeProp,
+  isPropExists,
+  findProps,
+  getPropValue
+} from "../../../src/utils";
+import { NEW_CORE_IMPORT_PATH } from "../../../src/consts";
+import { TransformationContext } from "../../../types";
+
+/**
+ * TextWithHighlight migration for v3 to v4:
+ * 1. Migrate tooltipPosition prop to tooltipProps={{ position: "..." }}
+ */
+function transform({ j, root, filePath }: TransformationContext) {
+  const imports = getCoreImportsForFile(root, NEW_CORE_IMPORT_PATH);
+  const componentName = getComponentNameOrAliasFromImports(j, imports, "TextWithHighlight");
+  if (!componentName) return;
+
+  const elements = findComponentElements(root, componentName);
+  if (!elements.length) return;
+
+  elements.forEach(elementPath => {
+    if (isPropExists(j, elementPath, "tooltipPosition")) {
+      // Get the tooltipPosition value
+      const tooltipPositionProps = findProps(j, elementPath, "tooltipPosition");
+      if (!tooltipPositionProps.length) return;
+
+      const tooltipPositionValue = getPropValue(j, tooltipPositionProps.get().node);
+
+      // Check if tooltipProps already exists
+      const hasTooltipProps = isPropExists(j, elementPath, "tooltipProps");
+
+      // Handle different value types: string literals, expressions, etc.
+      const tooltipPositionAttr = tooltipPositionProps.get().node;
+
+      let positionValue;
+      if (tooltipPositionAttr.value?.type === "JSXExpressionContainer") {
+        // Use the expression directly (e.g., {pos} becomes pos)
+        positionValue = tooltipPositionAttr.value.expression;
+      } else {
+        // Use literal value (e.g., "top" stays "top")
+        positionValue = j.literal(String(tooltipPositionValue));
+      }
+
+      if (hasTooltipProps) {
+        // Merge position into existing tooltipProps
+        const existingTooltipProps = findProps(j, elementPath, "tooltipProps");
+        const existingTooltipPropsAttr = existingTooltipProps.get().node;
+
+        if (
+          existingTooltipPropsAttr.value?.type === "JSXExpressionContainer" &&
+          existingTooltipPropsAttr.value.expression?.type === "ObjectExpression"
+        ) {
+          // Add position property to existing object
+          const existingObject = existingTooltipPropsAttr.value.expression;
+          const positionProperty = j.property("init", j.identifier("position"), positionValue);
+          existingObject.properties.push(positionProperty);
+        } else {
+          console.warn(
+            `[MANUAL] ${filePath}: ${componentName} has both tooltipPosition and tooltipProps with complex structure. ` +
+              `Please manually merge tooltipPosition="${tooltipPositionValue}" into existing tooltipProps.`
+          );
+        }
+      } else {
+        // Create new tooltipProps={{ position: value }}
+        const tooltipPropsValue = j.jsxExpressionContainer(
+          j.objectExpression([j.property("init", j.identifier("position"), positionValue)])
+        );
+
+        const tooltipPropAttr = j.jsxAttribute(j.jsxIdentifier("tooltipProps"), tooltipPropsValue);
+        elementPath.node.openingElement.attributes?.push(tooltipPropAttr);
+      }
+
+      // Remove the old tooltipPosition prop
+      removeProp(j, elementPath, "tooltipPosition");
+    }
+  });
+}
+
+export default wrap(transform);
diff --git a/packages/codemod/transformations/core/v3-to-v4/TipseenImage-component-migration.ts b/packages/codemod/transformations/core/v3-to-v4/TipseenImage-component-migration.ts
new file mode 100644
index 0000000000..826e13096a
--- /dev/null
+++ b/packages/codemod/transformations/core/v3-to-v4/TipseenImage-component-migration.ts
@@ -0,0 +1,108 @@
+import {
+  wrap,
+  getImports,
+  getComponentNameOrAliasFromImports,
+  findComponentElements,
+  findProps,
+  removeSpecifierFromImport,
+  findImportsThatIncludesSpecifier
+} from "../../../src/utils";
+import { NEW_CORE_IMPORT_PATH } from "../../../src/consts";
+import { TransformationContext } from "../../../types";
+import { JSXAttribute } from "jscodeshift";
+
+/**
+ * TipseenImage migration for v3 to v4:
+ * 1. Replace <TipseenImage src={..} alt={..} className={..} tipseenMediaClassName={..} />
+ *    with <TipseenMedia className={..}><img src={..} alt={..} className={..} style={{ objectFit: "cover", width: "100%" }} /></TipseenMedia>
+ * 2. Update imports: remove TipseenImage, add TipseenMedia if not already imported
+ */
+function transform({ j, root }: TransformationContext) {
+  const imports = getImports(root, NEW_CORE_IMPORT_PATH);
+  const componentName = getComponentNameOrAliasFromImports(j, imports, "TipseenImage");
+  if (!componentName) return;
+
+  const elements = findComponentElements(root, componentName);
+  if (!elements.length) return;
+
+  elements.forEach(elementPath => {
+    // Extract prop values from TipseenImage
+    const srcProps = findProps(j, elementPath, "src");
+    const altProps = findProps(j, elementPath, "alt");
+    const classNameProps = findProps(j, elementPath, "className");
+    const tipseenMediaClassNameProps = findProps(j, elementPath, "tipseenMediaClassName");
+
+    // Build img attributes
+    const imgAttrs: JSXAttribute[] = [];
+
+    if (srcProps.length) {
+      const srcAttr = srcProps.get().node;
+      imgAttrs.push(j.jsxAttribute(j.jsxIdentifier("src"), srcAttr.value));
+    }
+
+    if (altProps.length) {
+      const altAttr = altProps.get().node;
+      imgAttrs.push(j.jsxAttribute(j.jsxIdentifier("alt"), altAttr.value));
+    }
+
+    if (classNameProps.length) {
+      const classNameAttr = classNameProps.get().node;
+      imgAttrs.push(j.jsxAttribute(j.jsxIdentifier("className"), classNameAttr.value));
+    }
+
+    // Add style={{ objectFit: "cover", width: "100%" }}
+    imgAttrs.push(
+      j.jsxAttribute(
+        j.jsxIdentifier("style"),
+        j.jsxExpressionContainer(
+          j.objectExpression([
+            j.property("init", j.identifier("objectFit"), j.literal("cover")),
+            j.property("init", j.identifier("width"), j.literal("100%"))
+          ])
+        )
+      )
+    );
+
+    // Create <img ... /> element
+    const imgElement = j.jsxElement(j.jsxOpeningElement(j.jsxIdentifier("img"), imgAttrs, true), null, []);
+
+    // Build TipseenMedia attributes
+    const mediaAttrs: JSXAttribute[] = [];
+
+    if (tipseenMediaClassNameProps.length) {
+      const mediaClassNameAttr = tipseenMediaClassNameProps.get().node;
+      mediaAttrs.push(j.jsxAttribute(j.jsxIdentifier("className"), mediaClassNameAttr.value));
+    }
+
+    // Determine the TipseenMedia component name to use
+    const tipseenMediaName = getComponentNameOrAliasFromImports(j, imports, "TipseenMedia") || "TipseenMedia";
+
+    // Create <TipseenMedia>{img}</TipseenMedia>
+    const mediaElement = j.jsxElement(
+      j.jsxOpeningElement(j.jsxIdentifier(tipseenMediaName), mediaAttrs, false),
+      j.jsxClosingElement(j.jsxIdentifier(tipseenMediaName)),
+      [j.jsxText("\n  "), imgElement, j.jsxText("\n")]
+    );
+
+    // Replace TipseenImage with TipseenMedia wrapping img
+    j(elementPath).replaceWith(mediaElement);
+  });
+
+  // Update imports: remove TipseenImage, add TipseenMedia if not present
+  const tipseenImageImports = findImportsThatIncludesSpecifier(j, imports, "TipseenImage");
+  if (tipseenImageImports.length) {
+    const hasTipseenMedia = getComponentNameOrAliasFromImports(j, imports, "TipseenMedia") !== null;
+
+    tipseenImageImports.forEach(importPath => {
+      if (!hasTipseenMedia) {
+        // Add TipseenMedia specifier before removing TipseenImage
+        const newSpecifier = j.importSpecifier(j.identifier("TipseenMedia"), j.identifier("TipseenMedia"));
+        importPath.node.specifiers?.push(newSpecifier);
+      }
+
+      removeSpecifierFromImport(j, importPath, "TipseenImage");
+    });
+  }
+}
+
+export default wrap(transform);
diff --git a/packages/codemod/transformations/core/v3-to-v4/Toggle-component-migration.ts b/packages/codemod/transformations/core/v3-to-v4/Toggle-component-migration.ts
new file mode 100644
index 0000000000..3bfa19e373
--- /dev/null
+++ b/packages/codemod/transformations/core/v3-to-v4/Toggle-component-migration.ts
@@ -0,0 +1,29 @@
+import {
+  wrap,
+  getImports,
+  getComponentNameOrAliasFromImports,
+  findComponentElements,
+  removeProp
+} from "../../../src/utils";
+import { NEW_CORE_IMPORT_PATH } from "../../../src/consts";
+import { TransformationContext } from "../../../types";
+
+/**
+ * Toggle migration for v3 to v4:
+ * Remove the deprecated `noSpacing` prop — the toggle now automatically
+ * removes its margin when `areLabelsHidden` is true.
+ */
+function transform({ j, root }: TransformationContext) {
+  const imports = getImports(root, NEW_CORE_IMPORT_PATH);
+  const componentName = getComponentNameOrAliasFromImports(j, imports, "Toggle");
+  if (!componentName) return;
+
+  const elements = findComponentElements(root, componentName);
+  if (!elements.length) return;
+
+  elements.forEach(elementPath => {
+    removeProp(j, elementPath, "noSpacing");
+  });
+}
+
+export default wrap(transform);
diff --git a/packages/codemod/transformations/core/v3-to-v4/VirtualizedList-component-migration.ts b/packages/codemod/transformations/core/v3-to-v4/VirtualizedList-component-migration.ts
new file mode 100644
index 0000000000..a7249f603b
--- /dev/null
+++ b/packages/codemod/transformations/core/v3-to-v4/VirtualizedList-component-migration.ts
@@ -0,0 +1,32 @@
+import {
+  wrap,
+  getImports,
+  getComponentNameOrAliasFromImports,
+  findComponentElements,
+  migratePropsNames
+} from "../../../src/utils";
+import { NEW_CORE_IMPORT_PATH } from "../../../src/consts";
+import { TransformationContext } from "../../../types";
+
+/**
+ * VirtualizedList component migration for v3 to v4:
+ * 1. Rename getItemHeight prop to getItemSize
+ * 2. Rename onVerticalScrollbarVisiblityChange prop to onLayoutDirectionScrollbarVisibilityChange
+ */
+function transform({ j, root, filePath }: TransformationContext) {
+  const imports = getImports(root, NEW_CORE_IMPORT_PATH);
+  const componentName = getComponentNameOrAliasFromImports(j, imports, "VirtualizedList");
+  if (!componentName) return;
+
+  const elements = findComponentElements(root, componentName);
+  if (!elements.length) return;
+
+  elements.forEach(elementPath => {
+    migratePropsNames(j, elementPath, filePath, componentName, {
+      getItemHeight: "getItemSize",
+      onVerticalScrollbarVisiblityChange: "onLayoutDirectionScrollbarVisibilityChange"
+    });
+  });
+}
+
+export default wrap(transform);
diff --git a/packages/codemod/transformations/core/v3-to-v4/__tests__/Chips-component-migration.test.ts b/packages/codemod/transformations/core/v3-to-v4/__tests__/Chips-component-migration.test.ts
new file mode 100644
index 0000000000..8c08f705d1
--- /dev/null
+++ b/packages/codemod/transformations/core/v3-to-v4/__tests__/Chips-component-migration.test.ts
@@ -0,0 +1,40 @@
+import transform from "../Chips-component-migration";
+import { defineInlineTest } from "jscodeshift/src/testUtils";
+
+function prependImport(source: string): string {
+  return `import { Chips } from "@vibe/core";\n${source}`;
+}
+
+describe("Chips component migration", () => {
+  defineInlineTest(
+    transform,
+    {},
+    prependImport('const element = <Chips label="Tag" disableClickableBehavior />;'),
+    prependImport('const element = <Chips label="Tag" />;'),
+    "should remove disableClickableBehavior boolean prop"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    prependImport('const element = <Chips label="Tag" disableClickableBehavior={true} />;'),
+    prependImport('const element = <Chips label="Tag" />;'),
+    "should remove disableClickableBehavior with explicit true value"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    prependImport('const element = <Chips label="Tag" disableClickableBehavior={false} onClick={fn} />;'),
+    prependImport('const element = <Chips label="Tag" onClick={fn} />;'),
+    "should remove disableClickableBehavior with false value"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    prependImport('const element = <Chips label="Tag" onClick={fn} />;'),
+    prependImport('const element = <Chips label="Tag" onClick={fn} />;'),
+    "should not modify Chips without disableClickableBehavior prop"
+  );
+});
diff --git a/packages/codemod/transformations/core/v3-to-v4/__tests__/Dialog-component-migration.test.ts b/packages/codemod/transformations/core/v3-to-v4/__tests__/Dialog-component-migration.test.ts
new file mode 100644
index 0000000000..221dcbeb35
--- /dev/null
+++ b/packages/codemod/transformations/core/v3-to-v4/__tests__/Dialog-component-migration.test.ts
@@ -0,0 +1,44 @@
+import transform from "../Dialog-component-migration";
+import { defineInlineTest } from "jscodeshift/src/testUtils";
+
+function prependImport(source: string): string {
+  return `import { Dialog } from "@vibe/core";\n${source}`;
+}
+
+describe("Dialog component migration", () => {
+  defineInlineTest(
+    transform,
+    {},
+    prependImport("const element = <Dialog enableNestedDialogLayer content={<div />}><button>Ref</button></Dialog>;"),
+    prependImport("const element = <Dialog content={<div />}><button>Ref</button></Dialog>;"),
+    "should remove enableNestedDialogLayer boolean prop"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    prependImport(
+      "const element = <Dialog enableNestedDialogLayer={true} content={<div />}><button>Ref</button></Dialog>;"
+    ),
+    prependImport("const element = <Dialog content={<div />}><button>Ref</button></Dialog>;"),
+    "should remove enableNestedDialogLayer with explicit true value"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    prependImport(
+      "const element = <Dialog enableNestedDialogLayer={false} content={<div />}><button>Ref</button></Dialog>;"
+    ),
+    prependImport("const element = <Dialog content={<div />}><button>Ref</button></Dialog>;"),
+    "should remove enableNestedDialogLayer with false value"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    prependImport("const element = <Dialog content={<div />}><button>Ref</button></Dialog>;"),
+    prependImport("const element = <Dialog content={<div />}><button>Ref</button></Dialog>;"),
+    "should not modify Dialog without enableNestedDialogLayer prop"
+  );
+});
diff --git a/packages/codemod/transformations/core/v3-to-v4/__tests__/Flex-component-migration.test.ts b/packages/codemod/transformations/core/v3-to-v4/__tests__/Flex-component-migration.test.ts
new file mode 100644
index 0000000000..a84018e8d1
--- /dev/null
+++ b/packages/codemod/transformations/core/v3-to-v4/__tests__/Flex-component-migration.test.ts
@@ -0,0 +1,74 @@
+import transform from "../Flex-component-migration";
+import { defineInlineTest } from "jscodeshift/src/testUtils";
+
+describe("Flex component migration", () => {
+  defineInlineTest(
+    { default: transform, parser: "tsx" },
+    {},
+    `
+import { Flex } from "@vibe/core";
+<Flex justify="stretch" />
+    `,
+    `
+import { Flex } from "@vibe/core";
+<Flex />
+    `,
+    "should remove justify prop when value is stretch"
+  );
+
+  defineInlineTest(
+    { default: transform, parser: "tsx" },
+    {},
+    `
+import { Flex, FlexJustify } from "@vibe/core";
+<Flex justify={FlexJustify.STRETCH} />
+    `,
+    `
+import { Flex, FlexJustify } from "@vibe/core";
+<Flex />
+    `,
+    "should remove justify prop when value is FlexJustify.STRETCH"
+  );
+
+  defineInlineTest(
+    { default: transform, parser: "tsx" },
+    {},
+    `
+import { Flex } from "@vibe/core";
+<Flex justify="start" />
+    `,
+    `
+import { Flex } from "@vibe/core";
+<Flex justify="start" />
+    `,
+    "should not change justify prop for valid values"
+  );
+
+  defineInlineTest(
+    { default: transform, parser: "tsx" },
+    {},
+    `
+import { Flex } from "@vibe/core";
+<Flex justify="stretch" gap="medium" />
+    `,
+    `
+import { Flex } from "@vibe/core";
+<Flex gap="medium" />
+    `,
+    "should remove only the justify prop when value is stretch, leaving other props intact"
+  );
+
+  defineInlineTest(
+    { default: transform, parser: "tsx" },
+    {},
+    `
+import { Flex } from "another-library";
+<Flex justify="stretch" />
+    `,
+    `
+import { Flex } from "another-library";
+<Flex justify="stretch" />
+    `,
+    "should not change Flex not imported from @vibe/core"
+  );
+});
diff --git a/packages/codemod/transformations/core/v3-to-v4/__tests__/Icon-component-migration.test.ts b/packages/codemod/transformations/core/v3-to-v4/__tests__/Icon-component-migration.test.ts
new file mode 100644
index 0000000000..3f6a887472
--- /dev/null
+++ b/packages/codemod/transformations/core/v3-to-v4/__tests__/Icon-component-migration.test.ts
@@ -0,0 +1,112 @@
+import transform from "../Icon-component-migration";
+import { defineInlineTest } from "jscodeshift/src/testUtils";
+
+function prependImport(source: string): string {
+  return `import { Icon } from "@vibe/core";\n${source}`;
+}
+
+describe("Icon component migration", () => {
+  defineInlineTest(
+    transform,
+    {},
+    prependImport('const element = <Icon icon={Home} iconLabel="Home" iconType="svg" iconSize={24} />;'),
+    prependImport('const element = <Icon icon={Home} label="Home" type="svg" size={24} />;'),
+    "should rename iconLabel, iconType, and iconSize props"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    prependImport('const element = <Icon icon={Search} iconLabel="Search" />;'),
+    prependImport('const element = <Icon icon={Search} label="Search" />;'),
+    "should rename only iconLabel prop when other props are not present"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    prependImport('const element = <Icon icon={Close} iconType="font" iconSize="16px" />;'),
+    prependImport('const element = <Icon icon={Close} type="font" size="16px" />;'),
+    "should rename iconType and iconSize props when iconLabel is not present"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    prependImport("const element = <Icon icon={MyIcon} />;"),
+    prependImport("const element = <Icon icon={MyIcon} />;"),
+    "should not change Icon without deprecated props"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    prependImport(`
+      const element = (
+        <Icon
+          icon={StarFilled}
+          iconLabel={dynamicLabel}
+          iconType="svg"
+          iconSize={size === "small" ? 16 : 24}
+          className="my-icon"
+        />
+      );
+    `),
+    prependImport(`
+      const element = (
+        <Icon
+          icon={StarFilled}
+          label={dynamicLabel}
+          type="svg"
+          size={size === "small" ? 16 : 24}
+          className="my-icon"
+        />
+      );
+    `),
+    "should handle complex prop expressions"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    prependImport(`
+      function MyComponent() {
+        return (
+          <div>
+            <Icon icon={Home} iconLabel="Home" />
+            <Icon icon={Settings} iconType="font" iconSize={20} />
+          </div>
+        );
+      }
+    `),
+    prependImport(`
+      function MyComponent() {
+        return (
+          (<div>
+            <Icon icon={Home} label="Home" />
+            <Icon icon={Settings} type="font" size={20} />
+          </div>)
+        );
+      }
+    `),
+    "should handle multiple Icon components"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    `import { Icon as VibeIcon } from "@vibe/core";
+     const element = <VibeIcon icon={Home} iconLabel="Home" iconType="svg" />;`,
+    `import { Icon as VibeIcon } from "@vibe/core";
+     const element = <VibeIcon icon={Home} label="Home" type="svg" />;`,
+    "should work with aliased imports"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    'const element = <Icon icon={Home} iconLabel="Home" />;',
+    'const element = <Icon icon={Home} iconLabel="Home" />;',
+    "should not transform Icon without import from @vibe/core"
+  );
+});
diff --git a/packages/codemod/transformations/core/v3-to-v4/__tests__/LinearProgressBar-component-migration.test.ts b/packages/codemod/transformations/core/v3-to-v4/__tests__/LinearProgressBar-component-migration.test.ts
new file mode 100644
index 0000000000..da2ed26429
--- /dev/null
+++ b/packages/codemod/transformations/core/v3-to-v4/__tests__/LinearProgressBar-component-migration.test.ts
@@ -0,0 +1,52 @@
+import transform from "../LinearProgressBar-component-migration";
+import { defineInlineTest } from "jscodeshift/src/testUtils";
+
+function prependImport(source: string, importName = "LinearProgressBar"): string {
+  return `import { ${importName} } from "@vibe/core";\n${source}`;
+}
+
+describe("LinearProgressBar component migration", () => {
+  defineInlineTest(
+    transform,
+    {},
+    prependImport(`const element = <LinearProgressBar value={50} />;`),
+    `import { ProgressBar } from "@vibe/core";\nconst element = <ProgressBar value={50} />;`,
+    "should rename LinearProgressBar to ProgressBar in import and JSX"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    prependImport(`const element = <LinearProgressBar value={50} max={100} />;`),
+    `import { ProgressBar } from "@vibe/core";\nconst element = <ProgressBar value={50} max={100} />;`,
+    "should rename LinearProgressBar with multiple props"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    `import { LinearProgressBar, LinearProgressBarProps } from "@vibe/core";
+const props: LinearProgressBarProps = { value: 50 };
+const element = <LinearProgressBar value={50} />;`,
+    `import { ProgressBar, ProgressBarProps } from "@vibe/core";
+const props: ProgressBarProps = { value: 50 };
+const element = <ProgressBar value={50} />;`,
+    "should rename both LinearProgressBar and LinearProgressBarProps"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    `import { Button } from "@vibe/core";\nconst element = <Button />;`,
+    `import { Button } from "@vibe/core";\nconst element = <Button />;`,
+    "should not modify other components"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    `import { Button } from "another-library";\nconst element = <Button />;`,
+    `import { Button } from "another-library";\nconst element = <Button />;`,
+    "should not modify components from another library"
+  );
+});
diff --git a/packages/codemod/transformations/core/v3-to-v4/__tests__/TextField-component-migration.test.ts b/packages/codemod/transformations/core/v3-to-v4/__tests__/TextField-component-migration.test.ts
new file mode 100644
index 0000000000..a7a2f05d68
--- /dev/null
+++ b/packages/codemod/transformations/core/v3-to-v4/__tests__/TextField-component-migration.test.ts
@@ -0,0 +1,86 @@
+import transform from "../TextField-component-migration";
+import { defineInlineTest } from "jscodeshift/src/testUtils";
+
+function prependImport(source: string): string {
+  return `import { TextField } from "@vibe/core";\n${source}`;
+}
+
+describe("TextField iconName migration", () => {
+  defineInlineTest(
+    transform,
+    {},
+    prependImport('const element = <TextField iconName={Search} placeholder="Search" />;'),
+    prependImport('const element = <TextField icon={Search} placeholder="Search" />;'),
+    "should rename iconName to icon"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    prependImport('const element = <TextField placeholder="Search" />;'),
+    prependImport('const element = <TextField placeholder="Search" />;'),
+    "should not modify TextField without iconName prop"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    `import { TextField as MyField } from "@vibe/core";
+const element = <MyField iconName={Search} />;`,
+    `import { TextField as MyField } from "@vibe/core";
+const element = <MyField icon={Search} />;`,
+    "should work with aliased imports"
+  );
+});
+
+describe("TextField component migration", () => {
+  defineInlineTest(
+    transform,
+    {},
+    prependImport('const element = <TextField iconsNames={{ primary: "Search", secondary: "Clear" }} />;'),
+    prependImport('const element = <TextField iconLabel="Search" secondaryIconLabel="Clear" />;'),
+    "should replace iconsNames with both iconLabel and secondaryIconLabel"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    prependImport('const element = <TextField iconsNames={{ primary: "Search" }} />;'),
+    prependImport('const element = <TextField iconLabel="Search" />;'),
+    "should replace iconsNames with only iconLabel when secondary is not present"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    prependImport('const element = <TextField iconsNames={{ secondary: "Clear" }} />;'),
+    prependImport('const element = <TextField secondaryIconLabel="Clear" />;'),
+    "should replace iconsNames with only secondaryIconLabel when primary is not present"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    prependImport("const element = <TextField iconsNames={{ primary: dynamicLabel, secondary: tooltipText }} />;"),
+    prependImport("const element = <TextField iconLabel={dynamicLabel} secondaryIconLabel={tooltipText} />;"),
+    "should handle dynamic expression values"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    `import { TextField as MyTextField } from "@vibe/core";
+const element = <MyTextField iconsNames={{ primary: "Search" }} />;`,
+    `import { TextField as MyTextField } from "@vibe/core";
+const element = <MyTextField iconLabel="Search" />;`,
+    "should work with aliased imports"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    prependImport('const element = <TextField placeholder="Search..." />;'),
+    prependImport('const element = <TextField placeholder="Search..." />;'),
+    "should not modify TextField without iconsNames prop"
+  );
+});
diff --git a/packages/codemod/transformations/core/v3-to-v4/__tests__/TextWithHighlight-component-migration.test.ts b/packages/codemod/transformations/core/v3-to-v4/__tests__/TextWithHighlight-component-migration.test.ts
new file mode 100644
index 0000000000..56a1ce602f
--- /dev/null
+++ b/packages/codemod/transformations/core/v3-to-v4/__tests__/TextWithHighlight-component-migration.test.ts
@@ -0,0 +1,158 @@
+import { defineInlineTest } from "jscodeshift/dist/testUtils";
+import transform from "../TextWithHighlight-component-migration";
+
+describe("TextWithHighlight component migration", () => {
+  defineInlineTest(
+    { default: transform, parser: "tsx" },
+    {},
+    `
+import { TextWithHighlight } from "@vibe/core";
+<TextWithHighlight tooltipPosition="top" text="hello" highlightTerm="he" />
+    `,
+    `
+import { TextWithHighlight } from "@vibe/core";
+<TextWithHighlight text="hello" highlightTerm="he" tooltipProps={{
+  position: "top"
+}} />
+    `,
+    "should migrate tooltipPosition to tooltipProps"
+  );
+
+  defineInlineTest(
+    { default: transform, parser: "tsx" },
+    {},
+    `
+import { TextWithHighlight } from "@vibe/core";
+<TextWithHighlight text="hello" highlightTerm="he" tooltipProps={{ position: "top" }} />
+    `,
+    `
+import { TextWithHighlight } from "@vibe/core";
+<TextWithHighlight text="hello" highlightTerm="he" tooltipProps={{ position: "top" }} />
+    `,
+    "should not change TextWithHighlight without tooltipPosition prop"
+  );
+
+  defineInlineTest(
+    { default: transform, parser: "tsx" },
+    {},
+    `
+import { TextWithHighlight as TWH } from "@vibe/core";
+<TWH tooltipPosition="bottom" text="hello" highlightTerm="he" />
+    `,
+    `
+import { TextWithHighlight as TWH } from "@vibe/core";
+<TWH text="hello" highlightTerm="he" tooltipProps={{
+  position: "bottom"
+}} />
+    `,
+    "should handle aliased imports"
+  );
+
+  defineInlineTest(
+    { default: transform, parser: "tsx" },
+    {},
+    `
+import { Button } from "@vibe/core";
+<Button tooltipPosition="top">Click</Button>
+    `,
+    `
+import { Button } from "@vibe/core";
+<Button tooltipPosition="top">Click</Button>
+    `,
+    "should not affect non-TextWithHighlight components"
+  );
+
+  defineInlineTest(
+    { default: transform, parser: "tsx" },
+    {},
+    `
+import { TextWithHighlight } from "@vibe/core";
+<TextWithHighlight tooltipPosition="left" text="hello" />
+    `,
+    `
+import { TextWithHighlight } from "@vibe/core";
+<TextWithHighlight text="hello" tooltipProps={{
+  position: "left"
+}} />
+    `,
+    "should handle different position values"
+  );
+
+  defineInlineTest(
+    { default: transform, parser: "tsx" },
+    {},
+    `
+import { TextWithHighlight } from "@vibe/core";
+const pos = "right";
+<TextWithHighlight tooltipPosition={pos} text="hello" />
+    `,
+    `
+import { TextWithHighlight } from "@vibe/core";
+const pos = "right";
+<TextWithHighlight text="hello" tooltipProps={{
+  position: pos
+}} />
+    `,
+    "should handle expression values"
+  );
+
+  defineInlineTest(
+    { default: transform, parser: "tsx" },
+    {},
+    `
+import { TextWithHighlight } from "@vibe/core";
+<TextWithHighlight tooltipPosition="top" tooltipProps={{content: "test"}} text="hello" />
+    `,
+    `
+import { TextWithHighlight } from "@vibe/core";
+<TextWithHighlight
+  tooltipProps={{
+    content: "test",
+    position: "top"
+  }}
+  text="hello" />
+    `,
+    "should merge tooltipPosition into existing tooltipProps"
+  );
+
+  defineInlineTest(
+    { default: transform, parser: "tsx" },
+    {},
+    `
+import { TextWithHighlight } from "@vibe/core";
+<TextWithHighlight tooltipPosition="bottom" tooltipProps={{content: "test", showDelay: 100}} text="hello" />
+    `,
+    `
+import { TextWithHighlight } from "@vibe/core";
+<TextWithHighlight
+  tooltipProps={{
+    content: "test",
+    showDelay: 100,
+    position: "bottom"
+  }}
+  text="hello" />
+    `,
+    "should merge tooltipPosition into existing tooltipProps with multiple properties"
+  );
+
+  defineInlineTest(
+    { default: transform, parser: "tsx" },
+    {},
+    `
+import { TextWithHighlight } from "@vibe/core";
+const pos = "left";
+<TextWithHighlight tooltipPosition={pos} tooltipProps={{content: "dynamic"}} text="hello" />
+    `,
+    `
+import { TextWithHighlight } from "@vibe/core";
+const pos = "left";
+<TextWithHighlight
+  tooltipProps={{
+    content: "dynamic",
+    position: pos
+  }}
+  text="hello" />
+    `,
+    "should merge expression tooltipPosition into existing tooltipProps"
+  );
+});
diff --git a/packages/codemod/transformations/core/v3-to-v4/__tests__/TipseenImage-component-migration.test.ts b/packages/codemod/transformations/core/v3-to-v4/__tests__/TipseenImage-component-migration.test.ts
new file mode 100644
index 0000000000..d65721c738
--- /dev/null
+++ b/packages/codemod/transformations/core/v3-to-v4/__tests__/TipseenImage-component-migration.test.ts
@@ -0,0 +1,152 @@
+import { defineInlineTest } from "jscodeshift/dist/testUtils";
+import transform from "../TipseenImage-component-migration";
+
+describe("TipseenImage component migration", () => {
+  defineInlineTest(
+    { default: transform, parser: "tsx" },
+    {},
+    `
+import { TipseenImage } from "@vibe/core";
+<TipseenImage src="image.png" alt="description" />
+    `,
+    `
+import { TipseenMedia } from "@vibe/core";
+<TipseenMedia>
+  <img
+    src="image.png"
+    alt="description"
+    style={{
+      objectFit: "cover",
+      width: "100%"
+    }} />
+</TipseenMedia>
+    `,
+    "should migrate basic TipseenImage to TipseenMedia with img"
+  );
+
+  defineInlineTest(
+    { default: transform, parser: "tsx" },
+    {},
+    `
+import { TipseenImage } from "@vibe/core";
+<TipseenImage src={picture} alt="description" className="custom" tipseenMediaClassName="mediaClass" />
+    `,
+    `
+import { TipseenMedia } from "@vibe/core";
+<TipseenMedia className="mediaClass">
+  <img
+    src={picture}
+    alt="description"
+    className="custom"
+    style={{
+      objectFit: "cover",
+      width: "100%"
+    }} />
+</TipseenMedia>
+    `,
+    "should handle all props including tipseenMediaClassName"
+  );
+
+  defineInlineTest(
+    { default: transform, parser: "tsx" },
+    {},
+    `
+import { TipseenImage, TipseenMedia } from "@vibe/core";
+<TipseenImage src="image.png" />
+    `,
+    `
+import { TipseenMedia } from "@vibe/core";
+<TipseenMedia>
+  <img
+    src="image.png"
+    style={{
+      objectFit: "cover",
+      width: "100%"
+    }} />
+</TipseenMedia>
+    `,
+    "should not duplicate TipseenMedia import when already imported"
+  );
+
+  defineInlineTest(
+    { default: transform, parser: "tsx" },
+    {},
+    `
+import { TipseenImage as MyImage } from "@vibe/core";
+<MyImage src="image.png" alt="test" />
+    `,
+    `
+import { TipseenMedia } from "@vibe/core";
+<TipseenMedia>
+  <img
+    src="image.png"
+    alt="test"
+    style={{
+      objectFit: "cover",
+      width: "100%"
+    }} />
+</TipseenMedia>
+    `,
+    "should handle aliased imports"
+  );
+
+  defineInlineTest(
+    { default: transform, parser: "tsx" },
+    {},
+    `
+import { Button } from "@vibe/core";
+<Button>Click</Button>
+    `,
+    `
+import { Button } from "@vibe/core";
+<Button>Click</Button>
+    `,
+    "should not affect files without TipseenImage"
+  );
+
+  defineInlineTest(
+    { default: transform, parser: "tsx" },
+    {},
+    `
+import { TipseenImage } from "@vibe/core";
+<TipseenImage src={picture} />
+    `,
+    `
+import { TipseenMedia } from "@vibe/core";
+<TipseenMedia>
+  <img
+    src={picture}
+    style={{
+      objectFit: "cover",
+      width: "100%"
+    }} />
+</TipseenMedia>
+    `,
+    "should handle expression values for src"
+  );
+
+  defineInlineTest(
+    { default: transform, parser: "tsx" },
+    {},
+    `
+import { Tipseen, TipseenImage, TipseenContent } from "@vibe/core";
+<Tipseen content={<><TipseenImage src={picture} /><TipseenContent title="Title">Text</TipseenContent></>}>
+  <div />
+</Tipseen>
+    `,
+    `
+import { Tipseen, TipseenContent, TipseenMedia } from "@vibe/core";
+<Tipseen content={<><TipseenMedia>
+  <img
+    src={picture}
+    style={{
+      objectFit: "cover",
+      width: "100%"
+    }} />
+</TipseenMedia><TipseenContent title="Title">Text</TipseenContent></>}>
+  <div />
+</Tipseen>
+    `,
+    "should work within Tipseen content prop and update imports"
+  );
+});
diff --git a/packages/codemod/transformations/core/v3-to-v4/__tests__/Toggle-component-migration.test.ts b/packages/codemod/transformations/core/v3-to-v4/__tests__/Toggle-component-migration.test.ts
new file mode 100644
index 0000000000..5aa44e08c1
--- /dev/null
+++ b/packages/codemod/transformations/core/v3-to-v4/__tests__/Toggle-component-migration.test.ts
@@ -0,0 +1,40 @@
+import transform from "../Toggle-component-migration";
+import { defineInlineTest } from "jscodeshift/src/testUtils";
+
+function prependImport(source: string): string {
+  return `import { Toggle } from "@vibe/core";\n${source}`;
+}
+
+describe("Toggle component migration", () => {
+  defineInlineTest(
+    transform,
+    {},
+    prependImport('const element = <Toggle ariaLabel="My Toggle" noSpacing />;'),
+    prependImport('const element = <Toggle ariaLabel="My Toggle" />;'),
+    "should remove noSpacing boolean prop"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    prependImport('const element = <Toggle ariaLabel="My Toggle" noSpacing={true} />;'),
+    prependImport('const element = <Toggle ariaLabel="My Toggle" />;'),
+    "should remove noSpacing with explicit true value"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    prependImport('const element = <Toggle ariaLabel="My Toggle" noSpacing={false} areLabelsHidden />;'),
+    prependImport('const element = <Toggle ariaLabel="My Toggle" areLabelsHidden />;'),
+    "should remove noSpacing with false value"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    prependImport('const element = <Toggle ariaLabel="My Toggle" areLabelsHidden />;'),
+    prependImport('const element = <Toggle ariaLabel="My Toggle" areLabelsHidden />;'),
+    "should not modify Toggle without noSpacing prop"
+  );
+});
diff --git a/packages/codemod/transformations/core/v3-to-v4/__tests__/VirtualizedList-component-migration.test.ts b/packages/codemod/transformations/core/v3-to-v4/__tests__/VirtualizedList-component-migration.test.ts
new file mode 100644
index 0000000000..5870eca7b3
--- /dev/null
+++ b/packages/codemod/transformations/core/v3-to-v4/__tests__/VirtualizedList-component-migration.test.ts
@@ -0,0 +1,66 @@
+import transform from "../VirtualizedList-component-migration";
+import { defineInlineTest } from "jscodeshift/src/testUtils";
+
+function prependImport(source: string): string {
+  return `import { VirtualizedList } from "@vibe/core";\n${source}`;
+}
+
+describe("VirtualizedList component migration", () => {
+  defineInlineTest(
+    transform,
+    {},
+    prependImport("<VirtualizedList items={items} getItemHeight={item => item.height} itemRenderer={renderer} />"),
+    prependImport("<VirtualizedList items={items} getItemSize={item => item.height} itemRenderer={renderer} />"),
+    "should rename getItemHeight prop to getItemSize"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    prependImport(
+      "<VirtualizedList items={items} getItemSize={item => item.height} onVerticalScrollbarVisiblityChange={cb} itemRenderer={renderer} />"
+    ),
+    prependImport(
+      "<VirtualizedList items={items} getItemSize={item => item.height} onLayoutDirectionScrollbarVisibilityChange={cb} itemRenderer={renderer} />"
+    ),
+    "should rename onVerticalScrollbarVisiblityChange prop to onLayoutDirectionScrollbarVisibilityChange"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    prependImport(
+      "<VirtualizedList items={items} getItemHeight={item => item.height} onVerticalScrollbarVisiblityChange={cb} itemRenderer={renderer} />"
+    ),
+    prependImport(
+      "<VirtualizedList items={items} getItemSize={item => item.height} onLayoutDirectionScrollbarVisibilityChange={cb} itemRenderer={renderer} />"
+    ),
+    "should rename both deprecated props at once"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    prependImport("<VirtualizedList items={items} getItemSize={item => item.height} itemRenderer={renderer} />"),
+    prependImport("<VirtualizedList items={items} getItemSize={item => item.height} itemRenderer={renderer} />"),
+    "should not change VirtualizedList without deprecated props"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    `import { VirtualizedList as VList } from "@vibe/core";
+<VList items={items} getItemHeight={item => item.height} itemRenderer={renderer} />`,
+    `import { VirtualizedList as VList } from "@vibe/core";
+<VList items={items} getItemSize={item => item.height} itemRenderer={renderer} />`,
+    "should work with aliased imports"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    "<VirtualizedList items={items} getItemHeight={item => item.height} itemRenderer={renderer} />",
+    "<VirtualizedList items={items} getItemHeight={item => item.height} itemRenderer={renderer} />",
+    "should not transform VirtualizedList without import from @vibe/core"
+  );
+});
diff --git a/packages/codemod/transformations/core/v3-to-v4/__tests__/aria-props-migration.test.ts b/packages/codemod/transformations/core/v3-to-v4/__tests__/aria-props-migration.test.ts
new file mode 100644
index 0000000000..6617c6e2ec
--- /dev/null
+++ b/packages/codemod/transformations/core/v3-to-v4/__tests__/aria-props-migration.test.ts
@@ -0,0 +1,251 @@
+import transform from "../aria-props-migration";
+import { defineInlineTest } from "jscodeshift/src/testUtils";
+
+function prependImport(source: string): string {
+  return `
+    import { Button } from "@vibe/core";
+    ${source}
+  `;
+}
+
+function prependLinkImport(source: string): string {
+  return `
+    import { Link } from "@vibe/core";
+    ${source}
+  `;
+}
+
+function prependMultiImport(source: string): string {
+  return `
+    import { Button, IconButton, Search } from "@vibe/core";
+    ${source}
+  `;
+}
+
+describe("Aria props migration", () => {
+  describe("ariaLabel", () => {
+    defineInlineTest(
+      transform,
+      {},
+      prependImport(`<Button ariaLabel="Click me">test</Button>`),
+      prependImport(`<Button aria-label="Click me">test</Button>`),
+      "should update 'ariaLabel' to 'aria-label'"
+    );
+
+    defineInlineTest(
+      transform,
+      {},
+      prependImport(`<Button ariaLabel={label}>test</Button>`),
+      prependImport(`<Button aria-label={label}>test</Button>`),
+      "should update 'ariaLabel' to 'aria-label' with expression value"
+    );
+  });
+
+  describe("ariaHidden", () => {
+    defineInlineTest(
+      transform,
+      {},
+      `
+        import { Icon } from "@vibe/core";
+        <Icon ariaHidden={true} />
+      `,
+      `
+        import { Icon } from "@vibe/core";
+        <Icon aria-hidden={true} />
+      `,
+      "should update 'ariaHidden' to 'aria-hidden'"
+    );
+  });
+
+  describe("ariaExpanded", () => {
+    defineInlineTest(
+      transform,
+      {},
+      prependImport(`<Button ariaExpanded={isOpen}>test</Button>`),
+      prependImport(`<Button aria-expanded={isOpen}>test</Button>`),
+      "should update 'ariaExpanded' to 'aria-expanded'"
+    );
+  });
+
+  describe("ariaControls", () => {
+    defineInlineTest(
+      transform,
+      {},
+      prependImport(`<Button ariaControls="panel-1">test</Button>`),
+      prependImport(`<Button aria-controls="panel-1">test</Button>`),
+      "should update 'ariaControls' to 'aria-controls'"
+    );
+  });
+
+  describe("ariaHasPopup", () => {
+    defineInlineTest(
+      transform,
+      {},
+      prependImport(`<Button ariaHasPopup={true}>test</Button>`),
+      prependImport(`<Button aria-haspopup={true}>test</Button>`),
+      "should update 'ariaHasPopup' to 'aria-haspopup'"
+    );
+  });
+
+  describe("ariaLabeledBy (misspelled)", () => {
+    defineInlineTest(
+      transform,
+      {},
+      prependImport(`<Button ariaLabeledBy="label-id">test</Button>`),
+      prependImport(`<Button aria-labelledby="label-id">test</Button>`),
+      "should update 'ariaLabeledBy' to 'aria-labelledby' (fixing spelling)"
+    );
+  });
+
+  describe("ariaLabelledBy", () => {
+    defineInlineTest(
+      transform,
+      {},
+      `
+        import { Checkbox } from "@vibe/core";
+        <Checkbox ariaLabelledBy="label-id" />
+      `,
+      `
+        import { Checkbox } from "@vibe/core";
+        <Checkbox aria-labelledby="label-id" />
+      `,
+      "should update 'ariaLabelledBy' to 'aria-labelledby'"
+    );
+  });
+
+  describe("ariaDescribedBy", () => {
+    defineInlineTest(
+      transform,
+      {},
+      `
+        import { List } from "@vibe/core";
+        <List ariaDescribedBy="desc-id" />
+      `,
+      `
+        import { List } from "@vibe/core";
+        <List aria-describedby="desc-id" />
+      `,
+      "should update 'ariaDescribedBy' to 'aria-describedby'"
+    );
+  });
+
+  describe("Link ariaLabelDescription", () => {
+    defineInlineTest(
+      transform,
+      {},
+      prependLinkImport(`<Link ariaLabelDescription="Go to page" href="/page" />`),
+      prependLinkImport(`<Link aria-label="Go to page" href="/page" />`),
+      "should update Link 'ariaLabelDescription' to 'aria-label'"
+    );
+  });
+
+  describe("multiple props on same element", () => {
+    defineInlineTest(
+      transform,
+      {},
+      prependImport(`<Button ariaLabel="Click" ariaExpanded={isOpen} ariaControls="panel">test</Button>`),
+      prependImport(`<Button aria-label="Click" aria-expanded={isOpen} aria-controls="panel">test</Button>`),
+      "should update multiple aria props on the same element"
+    );
+  });
+
+  describe("multiple components", () => {
+    defineInlineTest(
+      transform,
+      {},
+      prependMultiImport(`
+        <div>
+          <Button ariaLabel="Click">test</Button>
+          <IconButton ariaLabel="Icon" ariaHasPopup={true} />
+          <Search ariaExpanded={true} ariaHasPopup="listbox" />
+        </div>
+      `),
+      prependMultiImport(`
+        <div>
+          <Button aria-label="Click">test</Button>
+          <IconButton aria-label="Icon" aria-haspopup={true} />
+          <Search aria-expanded={true} aria-haspopup="listbox" />
+        </div>
+      `),
+      "should update aria props across multiple different components"
+    );
+  });
+
+  describe("no import - no change", () => {
+    defineInlineTest(
+      transform,
+      {},
+      `<Button ariaLabel="Click">test</Button>`,
+      `<Button ariaLabel="Click">test</Button>`,
+      "should not change when no vibe import exists"
+    );
+  });
+
+  describe("other library - no change", () => {
+    defineInlineTest(
+      transform,
+      {},
+      `
+        import { Button } from "other-library";
+        <Button ariaLabel="Click">test</Button>
+      `,
+      `
+        import { Button } from "other-library";
+        <Button ariaLabel="Click">test</Button>
+      `,
+      "should not change when component is imported from another library"
+    );
+  });
+
+  describe("aliased import", () => {
+    defineInlineTest(
+      transform,
+      {},
+      `
+        import { Button as MyButton } from "@vibe/core";
+        <MyButton ariaLabel="Click">test</MyButton>
+      `,
+      `
+        import { Button as MyButton } from "@vibe/core";
+        <MyButton aria-label="Click">test</MyButton>
+      `,
+      "should handle aliased imports"
+    );
+  });
+
+  describe("legacy import path", () => {
+    defineInlineTest(
+      transform,
+      {},
+      `
+        import { Button } from "monday-ui-react-core";
+        <Button ariaLabel="Click">test</Button>
+      `,
+      `
+        import { Button } from "monday-ui-react-core";
+        <Button aria-label="Click">test</Button>
+      `,
+      "should handle legacy import path"
+    );
+  });
+
+  describe("both old and new props with same value", () => {
+    defineInlineTest(
+      transform,
+      {},
+      prependImport(`<Button ariaLabel="Click" aria-label="Click">test</Button>`),
+      prependImport(`<Button aria-label="Click">test</Button>`),
+      "should remove old prop when both exist with same value"
+    );
+  });
+
+  describe("both old and new props with different values", () => {
+    defineInlineTest(
+      transform,
+      {},
+      prependImport(`<Button ariaLabel="Old" aria-label="New">test</Button>`),
+      prependImport(`<Button ariaLabel="Old" aria-label="New">test</Button>`),
+      "should not change when both old and new props exist with different values"
+    );
+  });
+});
diff --git a/packages/codemod/transformations/core/v3-to-v4/__tests__/enums-migration.test.ts b/packages/codemod/transformations/core/v3-to-v4/__tests__/enums-migration.test.ts
new file mode 100644
index 0000000000..3bed5c79f5
--- /dev/null
+++ b/packages/codemod/transformations/core/v3-to-v4/__tests__/enums-migration.test.ts
@@ -0,0 +1,63 @@
+import transform from "../enums-migration";
+import { defineInlineTest } from "jscodeshift/src/testUtils";
+
+function prependImport(source: string): string {
+  return `
+    import { Button } from "@vibe/core";
+    ${source}
+  `;
+}
+
+describe("Enums migration", () => {
+  defineInlineTest(
+    transform,
+    {},
+    prependImport(`<Button kind={Button.kinds.PRIMARY}/>`),
+    prependImport(`<Button kind="primary"/>`),
+    "should replace enum value with string literal"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    prependImport(`<Button kind={Button.kinds.SECONDARY} size={Button.sizes.SMALL} />`),
+    prependImport(`<Button kind="secondary" size="small" />`),
+    "should replace multiple enum values on the same element"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    `
+      import { Button } from "another-library";
+      <Button size={Button.sizes.SMALL} />
+    `,
+    `
+      import { Button } from "another-library";
+      <Button size={Button.sizes.SMALL} />
+    `,
+    "should not change components not imported from @vibe/core"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    prependImport(`<Button kind="primary" />`),
+    prependImport(`<Button kind="primary" />`),
+    "should not modify props that are already string literals"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    `
+      import { Dropdown } from "@vibe/core";
+      <Dropdown size={Dropdown.sizes.SMALL} />
+    `,
+    `
+      import { Dropdown } from "@vibe/core";
+      <Dropdown size="small" />
+    `,
+    "should replace enum values on other components"
+  );
+});
diff --git a/packages/codemod/transformations/core/v3-to-v4/__tests__/next-imports-migration.test.ts b/packages/codemod/transformations/core/v3-to-v4/__tests__/next-imports-migration.test.ts
new file mode 100644
index 0000000000..68860bc4eb
--- /dev/null
+++ b/packages/codemod/transformations/core/v3-to-v4/__tests__/next-imports-migration.test.ts
@@ -0,0 +1,81 @@
+import transform from "../next-imports-migration";
+import { defineInlineTest } from "jscodeshift/src/testUtils";
+
+describe("Next imports migration", () => {
+  defineInlineTest(
+    transform,
+    {},
+    `import { AttentionBox } from "@vibe/core/next";`,
+    `import { AttentionBox } from "@vibe/core";`,
+    "should rename '@vibe/core/next' to '@vibe/core'"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    `import { Dropdown, Modal } from "@vibe/core/next";`,
+    `import { Dropdown, Modal } from "@vibe/core";`,
+    "should rename '@vibe/core/next' with multiple imports"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    `import { Button } from "@vibe/core";`,
+    `import { Button } from "@vibe/core";`,
+    "should not modify imports already from '@vibe/core'"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    `import { SomeComponent } from "another-library";`,
+    `import { SomeComponent } from "another-library";`,
+    "should not change unrelated imports"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    `import { AttentionBox } from "@vibe/core/next";
+     import { Button } from "@vibe/core";`,
+    `import { AttentionBox } from "@vibe/core";
+     import { Button } from "@vibe/core";`,
+    "should rename '@vibe/core/next' and leave '@vibe/core' unchanged"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    `import { DatePicker } from "@vibe/core/next";
+     import { SomeOther } from "another-library";`,
+    `import { DatePicker } from "@vibe/core";
+     import { SomeOther } from "another-library";`,
+    "should rename '@vibe/core/next' and leave other imports unchanged"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    `import { List } from "@vibe/core/next";`,
+    `import { List } from "@vibe/core/next";`,
+    "should not move List — it remains in @vibe/core/next"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    `import { AttentionBox, List } from "@vibe/core/next";`,
+    `import { AttentionBox } from "@vibe/core";
+import { List } from "@vibe/core/next";`,
+    "should split mixed imports — move promoted components, keep List in /next"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    `import { Dropdown, Modal, DatePicker } from "@vibe/core/next";`,
+    `import { Dropdown, Modal, DatePicker } from "@vibe/core";`,
+    "should move multiple promoted components together"
+  );
+});
diff --git a/packages/codemod/transformations/core/v3-to-v4/__tests__/packages-rename-migration.test.ts b/packages/codemod/transformations/core/v3-to-v4/__tests__/packages-rename-migration.test.ts
new file mode 100644
index 0000000000..8f8cda0d52
--- /dev/null
+++ b/packages/codemod/transformations/core/v3-to-v4/__tests__/packages-rename-migration.test.ts
@@ -0,0 +1,56 @@
+import transform from "../packages-rename-migration";
+import { defineInlineTest } from "jscodeshift/src/testUtils";
+
+describe("Packages rename migration", () => {
+  defineInlineTest(
+    transform,
+    {},
+    `import "monday-ui-style";`,
+    `import "@vibe/style";`,
+    "should rename 'monday-ui-style' to '@vibe/style'"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    `import "monday-ui-style/tokens";`,
+    `import "@vibe/style/tokens";`,
+    "should rename 'monday-ui-style/tokens' to '@vibe/style/tokens'"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    `import { spacingVar } from "monday-ui-style/dist/utils";`,
+    `import { spacingVar } from "@vibe/style/dist/utils";`,
+    "should rename deep import paths from 'monday-ui-style'"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    `import { Button } from "@vibe/core";`,
+    `import { Button } from "@vibe/core";`,
+    "should not change unrelated imports"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    `import "monday-ui-style";
+     import { Button } from "@vibe/core";`,
+    `import "@vibe/style";
+     import { Button } from "@vibe/core";`,
+    "should rename 'monday-ui-style' and leave other imports unchanged"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    `import "monday-ui-style/tokens";
+     import "monday-ui-style/dist/mixins";`,
+    `import "@vibe/style/tokens";
+     import "@vibe/style/dist/mixins";`,
+    "should rename multiple 'monday-ui-style' imports"
+  );
+});
diff --git a/packages/codemod/transformations/core/v3-to-v4/aria-props-migration.ts b/packages/codemod/transformations/core/v3-to-v4/aria-props-migration.ts
new file mode 100644
index 0000000000..4be4d3efd1
--- /dev/null
+++ b/packages/codemod/transformations/core/v3-to-v4/aria-props-migration.ts
@@ -0,0 +1,79 @@
+import {
+  wrap,
+  getCoreImportsForFile,
+  getComponentNameOrAliasFromImports,
+  findComponentElements,
+  migratePropsNames
+} from "../../../src/utils";
+import { TransformationContext } from "../../../types";
+import { NEW_CORE_IMPORT_PATH } from "../../../src/consts/vibe-import-paths";
+
+const ARIA_PROPS_MAPPING: Record<string, string> = {
+  ariaLabel: "aria-label",
+  ariaHidden: "aria-hidden",
+  ariaExpanded: "aria-expanded",
+  ariaControls: "aria-controls",
+  ariaHasPopup: "aria-haspopup",
+  ariaLabeledBy: "aria-labelledby",
+  ariaLabelledBy: "aria-labelledby",
+  ariaLabelledby: "aria-labelledby",
+  ariaDescribedBy: "aria-describedby",
+  ariaDescribedby: "aria-describedby"
+};
+
+const LINK_ARIA_PROPS_MAPPING: Record<string, string> = {
+  ...ARIA_PROPS_MAPPING,
+  ariaLabelDescription: "aria-label"
+};
+
+const COMPONENTS_WITH_ARIA_PROPS = [
+  "Avatar",
+  "AlertBanner",
+  "Button",
+  "ButtonGroup",
+  "Checkbox",
+  "Clickable",
+  "Counter",
+  "DatePickerHeader",
+  "DialogContentContainer",
+  "Dropdown",
+  "EditableHeading",
+  "EditableText",
+  "Flex",
+  "Icon",
+  "IconButton",
+  "LinearProgressBar",
+  "Link",
+  "List",
+  "Menu",
+  "MenuButton",
+  "RadioButton",
+  "Search",
+  "Slider",
+  "Switch",
+  "Toggle",
+  "VirtualizedList"
+];
+
+function transform({ j, root, filePath }: TransformationContext) {
+  const imports = getCoreImportsForFile(root);
+  const newImports = getCoreImportsForFile(root, NEW_CORE_IMPORT_PATH);
+
+  for (const componentName of COMPONENTS_WITH_ARIA_PROPS) {
+    const name =
+      getComponentNameOrAliasFromImports(j, imports, componentName) ||
+      getComponentNameOrAliasFromImports(j, newImports, componentName);
+    if (!name) continue;
+
+    const elements = findComponentElements(root, name);
+    if (!elements.length) continue;
+
+    const mapping = componentName === "Link" ? LINK_ARIA_PROPS_MAPPING : ARIA_PROPS_MAPPING;
+
+    elements.forEach(elementPath => {
+      migratePropsNames(j, elementPath, filePath, name, mapping);
+    });
+  }
+}
+
+export default wrap(transform);
diff --git a/packages/codemod/transformations/core/v3-to-v4/enums-migration.ts b/packages/codemod/transformations/core/v3-to-v4/enums-migration.ts
new file mode 100644
index 0000000000..c486ba62f0
--- /dev/null
+++ b/packages/codemod/transformations/core/v3-to-v4/enums-migration.ts
@@ -0,0 +1,49 @@
+import { TransformationContext } from "../../../types";
+import { getCoreImportsForFile, getPropValue, setPropValue, wrap } from "../../../src/utils";
+import enumToStringMapping from "./enums/enumMappings.json";
+import { NEW_CORE_IMPORT_PATH } from "../../../src/consts";
+
+const enumToString: Record<string, string> = enumToStringMapping;
+
+/**
+ * Replace enums with string equivalent
+ */
+function transform({ j, root }: TransformationContext) {
+  // Since it runs after the imports are updated need to get the new import path
+  const coreImports = getCoreImportsForFile(root, NEW_CORE_IMPORT_PATH);
+
+  const importedComponents = coreImports
+    .find(j.ImportSpecifier)
+    .nodes()
+    .map(importSpecifier => {
+      if (importSpecifier.local && importSpecifier.local.name) {
+        return importSpecifier.local.name;
+      }
+      return null;
+    })
+    .filter(Boolean);
+
+  const allElements = root.find(j.JSXElement).nodes();
+
+  const elements = allElements.filter(path => {
+    const openingElement = path.openingElement;
+    const elementName = openingElement.name.type === "JSXIdentifier" ? openingElement.name.name : null;
+    return elementName && importedComponents.includes(elementName);
+  });
+
+  if (!elements.length) return;
+  elements.forEach(elementPath => {
+    const props = j(elementPath).find(j.JSXOpeningElement).find(j.JSXAttribute);
+    props.forEach(prop => {
+      const propValue = getPropValue(j, prop.node) as string;
+      if (enumToString[propValue]) {
+        setPropValue(j, prop, {
+          value: enumToString[propValue],
+          type: "Literal"
+        });
+      }
+    });
+  });
+}
+
+export default wrap(transform);
diff --git a/packages/codemod/transformations/core/v3-to-v4/enums/enumMappings.json b/packages/codemod/transformations/core/v3-to-v4/enums/enumMappings.json
new file mode 100644
index 0000000000..2642f53a05
--- /dev/null
+++ b/packages/codemod/transformations/core/v3-to-v4/enums/enumMappings.json
@@ -0,0 +1,692 @@
+{
+  "TabPanels.animationDirections.RTL": "rtl",
+  "TabPanels.animationDirections.LTR": "ltr",
+  "Dropdown.sizes.SMALL": "small",
+  "Dropdown.sizes.MEDIUM": "medium",
+  "Dropdown.sizes.LARGE": "large",
+  "Dropdown.chipColors.PRIMARY": "primary",
+  "Dropdown.chipColors.NEGATIVE": "negative",
+  "Dropdown.chipColors.POSITIVE": "positive",
+  "Dropdown.menuPlacements.TOP": "top",
+  "Dropdown.menuPlacements.BOTTOM": "bottom",
+  "Dropdown.menuPlacements.AUTO": "auto",
+  "Dropdown.menuPositions.ABSOLUTE": "absolute",
+  "Dropdown.menuPositions.FIXED": "fixed",
+  "Tipseen.closeButtonThemes.LIGHT": "light",
+  "Tipseen.closeButtonThemes.DARK": "dark",
+  "Tipseen.closeButtonThemes.FIXED_LIGHT": "fixed-light",
+  "Tipseen.closeButtonThemes.FIXED_DARK": "fixed-dark",
+  "Tipseen.animationTypes.OPACITY_AND_SLIDE": "opacity-and-slide",
+  "Tipseen.animationTypes.EXPAND": "expand",
+  "Tipseen.hideShowTriggers.CLICK": "click",
+  "Tipseen.hideShowTriggers.CLICK_OUTSIDE": "clickoutside",
+  "Tipseen.hideShowTriggers.ESCAPE_KEY": "esckey",
+  "Tipseen.hideShowTriggers.TAB_KEY": "tab",
+  "Tipseen.hideShowTriggers.MOUSE_ENTER": "mouseenter",
+  "Tipseen.hideShowTriggers.MOUSE_LEAVE": "mouseleave",
+  "Tipseen.hideShowTriggers.ENTER": "enter",
+  "Tipseen.hideShowTriggers.MOUSE_DOWN": "mousedown",
+  "Tipseen.hideShowTriggers.FOCUS": "focus",
+  "Tipseen.hideShowTriggers.BLUR": "blur",
+  "Tipseen.hideShowTriggers.CONTENT_CLICK": "onContentClick",
+  "Tipseen.hideShowTriggers.CONTEXT_MENU": "contextmenu",
+  "Tipseen.colors.PRIMARY": "primary",
+  "Tipseen.colors.INVERTED": "inverted",
+  "Tipseen.positions.TOP": "top",
+  "Tipseen.positions.RIGHT": "right",
+  "Tipseen.positions.BOTTOM": "bottom",
+  "Tipseen.positions.LEFT": "left",
+  "Box.borderColors.UI_BORDER_COLOR": "uiBorderColor",
+  "Box.borderColors.LAYOUT_BORDER_COLOR": "layoutBorderColor",
+  "Box.roundeds.SMALL": "roundedSmall",
+  "Box.roundeds.MEDIUM": "roundedMedium",
+  "Box.roundeds.BIG": "roundedBig",
+  "Box.shadows.XS": "shadowXs",
+  "Box.shadows.SMALL": "shadowSmall",
+  "Box.shadows.MEDIUM": "shadowMedium",
+  "Box.shadows.LARGE": "shadowLarge",
+  "Box.margins.AUTO": "mAuto",
+  "Box.margins.XS": "mXs",
+  "Box.margins.SMALL": "mSmall",
+  "Box.margins.MEDIUM": "mMedium",
+  "Box.margins.LARGE": "mLarge",
+  "Box.margins.XL": "mXl",
+  "Box.margins.XXL": "mXxl",
+  "Box.margins.XXXL": "mXxxl",
+  "Box.marginXs.AUTO": "mxAuto",
+  "Box.marginXs.XS": "mxXs",
+  "Box.marginXs.SMALL": "mxSmall",
+  "Box.marginXs.MEDIUM": "mxMedium",
+  "Box.marginXs.LARGE": "mxLarge",
+  "Box.marginXs.XL": "mxXl",
+  "Box.marginXs.XXL": "mxXxl",
+  "Box.marginXs.XXXL": "mxXxxl",
+  "Box.marginYs.AUTO": "myAuto",
+  "Box.marginYs.XS": "myXs",
+  "Box.marginYs.SMALL": "mySmall",
+  "Box.marginYs.MEDIUM": "myMedium",
+  "Box.marginYs.LARGE": "myLarge",
+  "Box.marginYs.XL": "myXl",
+  "Box.marginYs.XXL": "myXxl",
+  "Box.marginYs.XXXL": "myXxxl",
+  "Box.marginTops.AUTO": "mtAuto",
+  "Box.marginTops.XS": "mtXs",
+  "Box.marginTops.SMALL": "mtSmall",
+  "Box.marginTops.MEDIUM": "mtMedium",
+  "Box.marginTops.LARGE": "mtLarge",
+  "Box.marginTops.XL": "mtXl",
+  "Box.marginTops.XXL": "mtXxl",
+  "Box.marginTops.XXXL": "mtXxxl",
+  "Box.marginEnds.AUTO": "meAuto",
+  "Box.marginEnds.XS": "meXs",
+  "Box.marginEnds.SMALL": "meSmall",
+  "Box.marginEnds.MEDIUM": "meMedium",
+  "Box.marginEnds.LARGE": "meLarge",
+  "Box.marginEnds.XL": "meXl",
+  "Box.marginEnds.XXL": "meXxl",
+  "Box.marginEnds.XXXL": "meXxxl",
+  "Box.marginBottoms.AUTO": "mbAuto",
+  "Box.marginBottoms.XS": "mbXs",
+  "Box.marginBottoms.SMALL": "mbSmall",
+  "Box.marginBottoms.MEDIUM": "mbMedium",
+  "Box.marginBottoms.LARGE": "mbLarge",
+  "Box.marginBottoms.XL": "mbXl",
+  "Box.marginBottoms.XXL": "mbXxl",
+  "Box.marginBottoms.XXXL": "mbXxxl",
+  "Box.marginStarts.AUTO": "msAuto",
+  "Box.marginStarts.XS": "msXs",
+  "Box.marginStarts.SMALL": "msSmall",
+  "Box.marginStarts.MEDIUM": "msMedium",
+  "Box.marginStarts.LARGE": "msLarge",
+  "Box.marginStarts.XL": "msXl",
+  "Box.marginStarts.XXL": "msXxl",
+  "Box.marginStarts.XXXL": "msXxxl",
+  "Box.paddings.XS": "pXs",
+  "Box.paddings.SMALL": "pSmall",
+  "Box.paddings.MEDIUM": "pMedium",
+  "Box.paddings.LARGE": "pLarge",
+  "Box.paddings.XL": "pXl",
+  "Box.paddings.XXL": "pXxl",
+  "Box.paddings.XXXL": "pXxxl",
+  "Box.paddingXs.XS": "pxXs",
+  "Box.paddingXs.SMALL": "pxSmall",
+  "Box.paddingXs.MEDIUM": "pxMedium",
+  "Box.paddingXs.LARGE": "pxLarge",
+  "Box.paddingXs.XL": "pxXl",
+  "Box.paddingXs.XXL": "pxXxl",
+  "Box.paddingXs.XXXL": "pxXxxl",
+  "Box.paddingYs.XS": "pyXs",
+  "Box.paddingYs.SMALL": "pySmall",
+  "Box.paddingYs.MEDIUM": "pyMedium",
+  "Box.paddingYs.LARGE": "pyLarge",
+  "Box.paddingYs.XL": "pyXl",
+  "Box.paddingYs.XXL": "pyXxl",
+  "Box.paddingYs.XXXL": "pyXxxl",
+  "Box.paddingTops.XS": "ptXs",
+  "Box.paddingTops.SMALL": "ptSmall",
+  "Box.paddingTops.MEDIUM": "ptMedium",
+  "Box.paddingTops.LARGE": "ptLarge",
+  "Box.paddingTops.XL": "ptXl",
+  "Box.paddingTops.XXL": "ptXxl",
+  "Box.paddingTops.XXXL": "ptXxxl",
+  "Box.paddingEnds.XS": "peXs",
+  "Box.paddingEnds.SMALL": "peSmall",
+  "Box.paddingEnds.MEDIUM": "peMedium",
+  "Box.paddingEnds.LARGE": "peLarge",
+  "Box.paddingEnds.XL": "peXl",
+  "Box.paddingEnds.XXL": "peXxl",
+  "Box.paddingEnds.XXXL": "peXxxl",
+  "Box.paddingBottoms.XS": "pbXs",
+  "Box.paddingBottoms.SMALL": "pbSmall",
+  "Box.paddingBottoms.MEDIUM": "pbMedium",
+  "Box.paddingBottoms.LARGE": "pbLarge",
+  "Box.paddingBottoms.XL": "pbXl",
+  "Box.paddingBottoms.XXL": "pbXxl",
+  "Box.paddingBottoms.XXXL": "pbXxxl",
+  "Box.paddingStarts.XS": "psXs",
+  "Box.paddingStarts.SMALL": "psSmall",
+  "Box.paddingStarts.MEDIUM": "psMedium",
+  "Box.paddingStarts.LARGE": "psLarge",
+  "Box.paddingStarts.XL": "psXl",
+  "Box.paddingStarts.XXL": "psXxl",
+  "Box.paddingStarts.XXXL": "psXxxl",
+  "Box.backgroundColors": "BackgroundColor",
+  "Box.textColors": "BoxTextColor",
+  "MenuButton.sizes.XXS": "xxs",
+  "MenuButton.sizes.XS": "xs",
+  "MenuButton.sizes.SMALL": "small",
+  "MenuButton.sizes.MEDIUM": "medium",
+  "MenuButton.sizes.LARGE": "large",
+  "MenuButton.paddingSizes.NONE": "none",
+  "MenuButton.paddingSizes.SMALL": "small",
+  "MenuButton.paddingSizes.MEDIUM": "medium",
+  "MenuButton.paddingSizes.LARGE": "large",
+  "MenuButton.dialogPositions.LEFT": "left",
+  "MenuButton.dialogPositions.LEFT_START": "left-start",
+  "MenuButton.dialogPositions.LEFT_END": "left-end",
+  "MenuButton.dialogPositions.RIGHT": "right",
+  "MenuButton.dialogPositions.RIGHT_START": "right-start",
+  "MenuButton.dialogPositions.RIGHT_END": "right-end",
+  "MenuButton.dialogPositions.TOP": "top",
+  "MenuButton.dialogPositions.TOP_START": "top-start",
+  "MenuButton.dialogPositions.TOP_END": "top-end",
+  "MenuButton.dialogPositions.BOTTOM": "bottom",
+  "MenuButton.dialogPositions.BOTTOM_START": "bottom-start",
+  "MenuButton.dialogPositions.BOTTOM_END": "bottom-end",
+  "MenuButton.hideTriggers.CLICK": "click",
+  "MenuButton.hideTriggers.CLICK_OUTSIDE": "clickoutside",
+  "MenuButton.hideTriggers.ESCAPE_KEY": "esckey",
+  "MenuButton.hideTriggers.TAB_KEY": "tab",
+  "MenuButton.hideTriggers.MOUSE_ENTER": "mouseenter",
+  "MenuButton.hideTriggers.MOUSE_LEAVE": "mouseleave",
+  "MenuButton.hideTriggers.ENTER": "enter",
+  "MenuButton.hideTriggers.MOUSE_DOWN": "mousedown",
+  "MenuButton.hideTriggers.FOCUS": "focus",
+  "MenuButton.hideTriggers.BLUR": "blur",
+  "MenuButton.hideTriggers.CONTENT_CLICK": "onContentClick",
+  "MenuButton.hideTriggers.CONTEXT_MENU": "contextmenu",
+  "MenuButton.componentPositions.START": "start",
+  "MenuButton.componentPositions.END": "end",
+  "ThemeProvider.systemThemes.LIGHT": "light",
+  "ThemeProvider.systemThemes.DARK": "dark",
+  "ThemeProvider.systemThemes.BLACK": "black",
+  "ThemeProvider.colors.primaryColor": "primary-color",
+  "ThemeProvider.colors.primaryHoverColor": "primary-hover-color",
+  "ThemeProvider.colors.primarySelectedColor": "primary-selected-color",
+  "ThemeProvider.colors.primarySelectedHoverColor": "primary-selected-hover-color",
+  "ThemeProvider.colors.primarySelectedOnSecondaryColor": "primary-selected-on-secondary-color",
+  "ThemeProvider.colors.textColorOnPrimary": "text-color-on-primary",
+  "ThemeProvider.colors.brandColor": "brand-color",
+  "ThemeProvider.colors.brandHoverColor": "brand-hover-color",
+  "ThemeProvider.colors.brandSelectedColor": "brand-selected-color",
+  "ThemeProvider.colors.brandSelectedHoverColor": "brand-selected-hover-color",
+  "ThemeProvider.colors.textColorOnBrand": "text-color-on-brand",
+  "ButtonGroup.sizes.XXS": "xxs",
+  "ButtonGroup.sizes.XS": "xs",
+  "ButtonGroup.sizes.SMALL": "small",
+  "ButtonGroup.sizes.MEDIUM": "medium",
+  "ButtonGroup.sizes.LARGE": "large",
+  "ButtonGroup.kinds.PRIMARY": "primary",
+  "ButtonGroup.kinds.SECONDARY": "secondary",
+  "ButtonGroup.kinds.TERTIARY": "tertiary",
+  "EditableHeading.types.H1": "h1",
+  "EditableHeading.types.H2": "h2",
+  "EditableHeading.types.H3": "h3",
+  "EditableHeading.weights.BOLD": "bold",
+  "EditableHeading.weights.MEDIUM": "medium",
+  "EditableHeading.weights.NORMAL": "normal",
+  "EditableHeading.weights.LIGHT": "light",
+  "Chips.colors.GRASS_GREEN": "grass_green",
+  "Chips.colors.DONE_GREEN": "done-green",
+  "Chips.colors.BRIGHT_GREEN": "bright-green",
+  "Chips.colors.SALADISH": "saladish",
+  "Chips.colors.EGG_YOLK": "egg_yolk",
+  "Chips.colors.WORKING_ORANGE": "working_orange",
+  "Chips.colors.DARK_ORANGE": "dark-orange",
+  "Chips.colors.PEACH": "peach",
+  "Chips.colors.SUNSET": "sunset",
+  "Chips.colors.STUCK_RED": "stuck-red",
+  "Chips.colors.DARK_RED": "dark-red",
+  "Chips.colors.SOFIA_PINK": "sofia_pink",
+  "Chips.colors.LIPSTICK": "lipstick",
+  "Chips.colors.BUBBLE": "bubble",
+  "Chips.colors.PURPLE": "purple",
+  "Chips.colors.DARK_PURPLE": "dark_purple",
+  "Chips.colors.BERRY": "berry",
+  "Chips.colors.DARK_INDIGO": "dark_indigo",
+  "Chips.colors.INDIGO": "indigo",
+  "Chips.colors.NAVY": "navy",
+  "Chips.colors.BRIGHT_BLUE": "bright-blue",
+  "Chips.colors.DARK_BLUE": "dark-blue",
+  "Chips.colors.AQUAMARINE": "aquamarine",
+  "Chips.colors.CHILI_BLUE": "chili-blue",
+  "Chips.colors.RIVER": "river",
+  "Chips.colors.WINTER": "winter",
+  "Chips.colors.EXPLOSIVE": "explosive",
+  "Chips.colors.AMERICAN_GRAY": "american_gray",
+  "Chips.colors.BLACKISH": "blackish",
+  "Chips.colors.BROWN": "brown",
+  "Chips.colors.ORCHID": "orchid",
+  "Chips.colors.TAN": "tan",
+  "Chips.colors.SKY": "sky",
+  "Chips.colors.COFFEE": "coffee",
+  "Chips.colors.ROYAL": "royal",
+  "Chips.colors.TEAL": "teal",
+  "Chips.colors.LAVENDER": "lavender",
+  "Chips.colors.STEEL": "steel",
+  "Chips.colors.LILAC": "lilac",
+  "Chips.colors.PECAN": "pecan",
+  "Chips.colors.POSITIVE": "positive",
+  "Chips.colors.NEGATIVE": "negative",
+  "Chips.colors.PRIMARY": "primary",
+  "Chips.colors.WARNING": "warning",
+  "Chips.avatarTypes.IMG": "img",
+  "Chips.avatarTypes.ICON": "icon",
+  "Chips.avatarTypes.TEXT": "text",
+  "BreadcrumbsBar.types.NAVIGATION": "navigation",
+  "BreadcrumbsBar.types.INDICATION": "indication",
+  "Skeleton.types.CIRCLE": "circle",
+  "Skeleton.types.RECTANGLE": "rectangle",
+  "Skeleton.types.TEXT": "text",
+  "Skeleton.sizes.CUSTOM": "custom",
+  "Heading.types.H1": "h1",
+  "Heading.types.H2": "h2",
+  "Heading.types.H3": "h3",
+  "Heading.weights.BOLD": "bold",
+  "Heading.weights.MEDIUM": "medium",
+  "Heading.weights.NORMAL": "normal",
+  "Heading.weights.LIGHT": "light",
+  "Heading.align.START": "start",
+  "Heading.align.CENTER": "center",
+  "Heading.align.END": "end",
+  "Heading.colors.PRIMARY": "primary",
+  "Heading.colors.SECONDARY": "secondary",
+  "Heading.colors.ON_PRIMARY": "onPrimary",
+  "Heading.colors.ON_INVERTED": "onInverted",
+  "Heading.colors.FIXED_LIGHT": "fixedLight",
+  "Heading.colors.FIXED_DARK": "fixedDark",
+  "Heading.colors.INHERIT": "inherit",
+  "Toast.types.NORMAL": "normal",
+  "Toast.types.POSITIVE": "positive",
+  "Toast.types.NEGATIVE": "negative",
+  "Toast.types.WARNING": "warning",
+  "Toast.types.DARK": "dark",
+  "Toast.actionTypes.LINK": "link",
+  "Toast.actionTypes.BUTTON": "button",
+  "AttentionBox.types.PRIMARY": "primary",
+  "AttentionBox.types.SUCCESS": "success",
+  "AttentionBox.types.DANGER": "danger",
+  "AttentionBox.types.DARK": "dark",
+  "AttentionBox.types.WARNING": "warning",
+  "AttentionBox.iconTypes.SVG": "svg",
+  "AttentionBox.iconTypes.ICON_FONT": "font",
+  "AttentionBox.iconTypes.SRC": "src",
+  "MultiStepIndicator.types.PRIMARY": "primary",
+  "MultiStepIndicator.types.SUCCESS": "success",
+  "MultiStepIndicator.types.DANGER": "danger",
+  "MultiStepIndicator.types.DARK": "dark",
+  "MultiStepIndicator.stepStatuses.PENDING": "pending",
+  "MultiStepIndicator.stepStatuses.ACTIVE": "active",
+  "MultiStepIndicator.stepStatuses.FULFILLED": "fulfilled",
+  "MultiStepIndicator.textPlacements.HORIZONTAL": "horizontal",
+  "MultiStepIndicator.textPlacements.VERTICAL": "vertical",
+  "MultiStepIndicator.sizes.SMALL": "small",
+  "MultiStepIndicator.sizes.MEDIUM": "medium",
+  "MultiStepIndicator.sizes.LARGE": "large",
+  "ListItemIcon.margin.START": "start",
+  "ListItemIcon.margin.END": "end",
+  "ListItemIcon.components.DIV": "div",
+  "ListItemIcon.components.LI": "li",
+  "ListItemIcon.components.A": "a",
+  "Label.colors.PRIMARY": "primary",
+  "Label.colors.DARK": "dark",
+  "Label.colors.NEGATIVE": "negative",
+  "Label.colors.POSITIVE": "positive",
+  "Label.kinds.FILL": "fill",
+  "Label.kinds.LINE": "line",
+  "TextField.sizes.SMALL": "small",
+  "TextField.sizes.MEDIUM": "medium",
+  "TextField.sizes.LARGE": "large",
+  "TextField.feedbacks.ERROR": "error",
+  "TextField.feedbacks.SUCCESS": "success",
+  "TextField.types.TEXT": "text",
+  "TextField.types.PASSWORD": "password",
+  "TextField.types.SEARCH": "search",
+  "TextField.types.DATE": "date",
+  "TextField.types.DATE_TIME": "datetime-local",
+  "TextField.types.NUMBER": "number",
+  "TextField.types.TEL": "tel",
+  "TextField.types.URL": "url",
+  "TextField.types.EMAIL": "email",
+  "Slider.sizes.SMALL": "small",
+  "Slider.sizes.MEDIUM": "medium",
+  "Slider.sizes.LARGE": "large",
+  "Slider.colors.PRIMARY": "primary",
+  "Slider.colors.NEGATIVE": "negative",
+  "Slider.colors.POSITIVE": "positive",
+  "SliderInfix.kinds.PREFIX": "prefix",
+  "SliderInfix.kinds.POSTFIX": "postfix",
+  "Combobox.sizes.SMALL": "small",
+  "Combobox.sizes.MEDIUM": "medium",
+  "Combobox.sizes.LARGE": "large",
+  "Combobox.iconTypes.DEFAULT": "default",
+  "Combobox.iconTypes.RENDERER": "renderer",
+  "ComboboxOption.iconTypes.DEFAULT": "default",
+  "ComboboxOption.iconTypes.RENDERER": "renderer",
+  "AlertBanner.backgroundColors.PRIMARY": "primary",
+  "AlertBanner.backgroundColors.POSITIVE": "positive",
+  "AlertBanner.backgroundColors.NEGATIVE": "negative",
+  "AlertBanner.backgroundColors.DARK": "dark",
+  "AlertBanner.backgroundColors.WARNING": "warning",
+  "ListItem.sizes.XXS": "xxs",
+  "ListItem.sizes.XS": "xs",
+  "ListItem.sizes.SMALL": "small",
+  "ListItem.sizes.MEDIUM": "medium",
+  "ListItem.sizes.LARGE": "large",
+  "ListItem.components.DIV": "div",
+  "ListItem.components.LI": "li",
+  "ListItem.components.A": "a",
+  "Button.sizes.XXS": "xxs",
+  "Button.sizes.XS": "xs",
+  "Button.sizes.SMALL": "small",
+  "Button.sizes.MEDIUM": "medium",
+  "Button.sizes.LARGE": "large",
+  "Button.colors.PRIMARY": "primary",
+  "Button.colors.POSITIVE": "positive",
+  "Button.colors.NEGATIVE": "negative",
+  "Button.colors.INVERTED": "inverted",
+  "Button.colors.ON_PRIMARY_COLOR": "on-primary-color",
+  "Button.colors.ON_INVERTED_BACKGROUND": "on-inverted-background",
+  "Button.colors.BRAND": "brand",
+  "Button.colors.FIXED_LIGHT": "fixed-light",
+  "Button.kinds.PRIMARY": "primary",
+  "Button.kinds.SECONDARY": "secondary",
+  "Button.kinds.TERTIARY": "tertiary",
+  "Button.types.BUTTON": "button",
+  "Button.types.SUBMIT": "submit",
+  "Button.types.RESET": "reset",
+  "Button.inputTags.BUTTON": "button",
+  "Button.inputTags.SUBMIT": "submit",
+  "Button.inputTags.RESET": "reset",
+  "Steps.types.NUMBERS": "numbers",
+  "Steps.types.GALLERY": "gallery",
+  "Steps.colors.PRIMARY": "primary",
+  "Steps.colors.ON_PRIMARY_COLOR": "on-primary-color",
+  "Steps.colors.ON_INVERTED_BACKGROUND": "on-inverted-background",
+  "Link.position.START": "start",
+  "Link.position.END": "end",
+  "Link.iconPositions.START": "start",
+  "Link.iconPositions.END": "end",
+  "Link.targets.NEW_WINDOW": "_blank",
+  "Link.targets.SELF": "_self",
+  "Link.targets.PARENT": "_parent",
+  "Link.targets.TOP": "_top",
+  "Table.sizes.SMALL": "small",
+  "Table.sizes.MEDIUM": "medium",
+  "Table.sizes.LARGE": "large",
+  "Loader.sizes.XS": "xs",
+  "Loader.sizes.SMALL": "small",
+  "Loader.sizes.MEDIUM": "medium",
+  "Loader.sizes.LARGE": "large",
+  "Loader.colors.PRIMARY": "primary",
+  "Loader.colors.SECONDARY": "secondary",
+  "Loader.colors.ON_PRIMARY": "onPrimary",
+  "Loader.colors.DARK": "dark",
+  "List.components.DIV": "div",
+  "List.components.NAV": "nav",
+  "List.components.UL": "ul",
+  "List.components.OL": "ol",
+  "Divider.directions.VERTICAL": "vertical",
+  "Divider.directions.HORIZONTAL": "horizontal",
+  "MenuItemButton.kinds": "Button",
+  "MenuItemButton.tooltipPositions.TOP": "top",
+  "MenuItemButton.tooltipPositions.RIGHT": "right",
+  "MenuItemButton.tooltipPositions.BOTTOM": "bottom",
+  "MenuItemButton.tooltipPositions.LEFT": "left",
+  "MenuTitle.positions.TOP": "top",
+  "MenuTitle.positions.BOTTOM": "bottom",
+  "MenuTitle.positions.CENTER": "center",
+  "MenuTitle.captionPositions.TOP": "top",
+  "MenuTitle.captionPositions.BOTTOM": "bottom",
+  "MenuTitle.captionPositions.CENTER": "center",
+  "MenuItem.iconType.SVG": "svg",
+  "MenuItem.iconType.ICON_FONT": "font",
+  "MenuItem.iconType.SRC": "src",
+  "MenuItem.tooltipPositions.TOP": "top",
+  "MenuItem.tooltipPositions.RIGHT": "right",
+  "MenuItem.tooltipPositions.BOTTOM": "bottom",
+  "MenuItem.tooltipPositions.LEFT": "left",
+  "Menu.sizes.XXS": "xxs",
+  "Menu.sizes.XS": "xs",
+  "Menu.sizes.SMALL": "small",
+  "Menu.sizes.MEDIUM": "medium",
+  "Menu.sizes.LARGE": "large",
+  "Avatar.types.IMG": "img",
+  "Avatar.types.ICON": "icon",
+  "Avatar.types.TEXT": "text",
+  "Avatar.sizes.SMALL": "small",
+  "Avatar.sizes.MEDIUM": "medium",
+  "Avatar.sizes.LARGE": "large",
+  "Avatar.colors.GRASS_GREEN": "grass_green",
+  "Avatar.colors.DONE_GREEN": "done-green",
+  "Avatar.colors.BRIGHT_GREEN": "bright-green",
+  "Avatar.colors.SALADISH": "saladish",
+  "Avatar.colors.EGG_YOLK": "egg_yolk",
+  "Avatar.colors.WORKING_ORANGE": "working_orange",
+  "Avatar.colors.DARK_ORANGE": "dark-orange",
+  "Avatar.colors.PEACH": "peach",
+  "Avatar.colors.SUNSET": "sunset",
+  "Avatar.colors.STUCK_RED": "stuck-red",
+  "Avatar.colors.DARK_RED": "dark-red",
+  "Avatar.colors.SOFIA_PINK": "sofia_pink",
+  "Avatar.colors.LIPSTICK": "lipstick",
+  "Avatar.colors.BUBBLE": "bubble",
+  "Avatar.colors.PURPLE": "purple",
+  "Avatar.colors.DARK_PURPLE": "dark_purple",
+  "Avatar.colors.BERRY": "berry",
+  "Avatar.colors.DARK_INDIGO": "dark_indigo",
+  "Avatar.colors.INDIGO": "indigo",
+  "Avatar.colors.NAVY": "navy",
+  "Avatar.colors.BRIGHT_BLUE": "bright-blue",
+  "Avatar.colors.DARK_BLUE": "dark-blue",
+  "Avatar.colors.AQUAMARINE": "aquamarine",
+  "Avatar.colors.CHILI_BLUE": "chili-blue",
+  "Avatar.colors.RIVER": "river",
+  "Avatar.colors.WINTER": "winter",
+  "Avatar.colors.EXPLOSIVE": "explosive",
+  "Avatar.colors.AMERICAN_GRAY": "american_gray",
+  "Avatar.colors.BLACKISH": "blackish",
+  "Avatar.colors.BROWN": "brown",
+  "Avatar.colors.ORCHID": "orchid",
+  "Avatar.colors.TAN": "tan",
+  "Avatar.colors.SKY": "sky",
+  "Avatar.colors.COFFEE": "coffee",
+  "Avatar.colors.ROYAL": "royal",
+  "Avatar.colors.TEAL": "teal",
+  "Avatar.colors.LAVENDER": "lavender",
+  "Avatar.colors.STEEL": "steel",
+  "Avatar.colors.LILAC": "lilac",
+  "Avatar.colors.PECAN": "pecan",
+  "Avatar.colors.POSITIVE": "positive",
+  "Avatar.colors.NEGATIVE": "negative",
+  "Avatar.colors.PRIMARY": "primary",
+  "Avatar.colors.WARNING": "warning",
+  "Avatar.backgroundColors.GRASS_GREEN": "grass_green",
+  "Avatar.backgroundColors.DONE_GREEN": "done-green",
+  "Avatar.backgroundColors.BRIGHT_GREEN": "bright-green",
+  "Avatar.backgroundColors.SALADISH": "saladish",
+  "Avatar.backgroundColors.EGG_YOLK": "egg_yolk",
+  "Avatar.backgroundColors.WORKING_ORANGE": "working_orange",
+  "Avatar.backgroundColors.DARK_ORANGE": "dark-orange",
+  "Avatar.backgroundColors.PEACH": "peach",
+  "Avatar.backgroundColors.SUNSET": "sunset",
+  "Avatar.backgroundColors.STUCK_RED": "stuck-red",
+  "Avatar.backgroundColors.DARK_RED": "dark-red",
+  "Avatar.backgroundColors.SOFIA_PINK": "sofia_pink",
+  "Avatar.backgroundColors.LIPSTICK": "lipstick",
+  "Avatar.backgroundColors.BUBBLE": "bubble",
+  "Avatar.backgroundColors.PURPLE": "purple",
+  "Avatar.backgroundColors.DARK_PURPLE": "dark_purple",
+  "Avatar.backgroundColors.BERRY": "berry",
+  "Avatar.backgroundColors.DARK_INDIGO": "dark_indigo",
+  "Avatar.backgroundColors.INDIGO": "indigo",
+  "Avatar.backgroundColors.NAVY": "navy",
+  "Avatar.backgroundColors.BRIGHT_BLUE": "bright-blue",
+  "Avatar.backgroundColors.DARK_BLUE": "dark-blue",
+  "Avatar.backgroundColors.AQUAMARINE": "aquamarine",
+  "Avatar.backgroundColors.CHILI_BLUE": "chili-blue",
+  "Avatar.backgroundColors.RIVER": "river",
+  "Avatar.backgroundColors.WINTER": "winter",
+  "Avatar.backgroundColors.EXPLOSIVE": "explosive",
+  "Avatar.backgroundColors.AMERICAN_GRAY": "american_gray",
+  "Avatar.backgroundColors.BLACKISH": "blackish",
+  "Avatar.backgroundColors.BROWN": "brown",
+  "Avatar.backgroundColors.ORCHID": "orchid",
+  "Avatar.backgroundColors.TAN": "tan",
+  "Avatar.backgroundColors.SKY": "sky",
+  "Avatar.backgroundColors.COFFEE": "coffee",
+  "Avatar.backgroundColors.ROYAL": "royal",
+  "Avatar.backgroundColors.TEAL": "teal",
+  "Avatar.backgroundColors.LAVENDER": "lavender",
+  "Avatar.backgroundColors.STEEL": "steel",
+  "Avatar.backgroundColors.LILAC": "lilac",
+  "Avatar.backgroundColors.PECAN": "pecan",
+  "Avatar.backgroundColors.POSITIVE": "positive",
+  "Avatar.backgroundColors.NEGATIVE": "negative",
+  "Avatar.backgroundColors.PRIMARY": "primary",
+  "Avatar.backgroundColors.WARNING": "warning",
+  "ColorPicker.sizes.SMALL": "small",
+  "ColorPicker.sizes.MEDIUM": "medium",
+  "ColorPicker.sizes.LARGE": "large",
+  "ColorPicker.colorStyles.REGULAR": "regular",
+  "ColorPicker.colorStyles.HOVER": "hover",
+  "ColorPicker.colorStyles.SELECTED": "selected",
+  "ColorPicker.colorSizes.SMALL": "small",
+  "ColorPicker.colorSizes.MEDIUM": "medium",
+  "ColorPicker.colorSizes.LARGE": "large",
+  "ColorPicker.colorShapes.SQUARE": "square",
+  "ColorPicker.colorShapes.CIRCLE": "circle",
+  "ColorPickerContent.sizes.SMALL": "small",
+  "ColorPickerContent.sizes.MEDIUM": "medium",
+  "ColorPickerContent.sizes.LARGE": "large",
+  "ColorPickerContent.colorStyles.REGULAR": "regular",
+  "ColorPickerContent.colorStyles.HOVER": "hover",
+  "ColorPickerContent.colorStyles.SELECTED": "selected",
+  "ColorPickerContent.colorSizes.SMALL": "small",
+  "ColorPickerContent.colorSizes.MEDIUM": "medium",
+  "ColorPickerContent.colorSizes.LARGE": "large",
+  "ColorPickerContent.colorShapes.SQUARE": "square",
+  "ColorPickerContent.colorShapes.CIRCLE": "circle",
+  "SplitButton.secondaryPositions.BOTTOM_START": "bottom-start",
+  "SplitButton.secondaryPositions.BOTTOM_MIDDLE": "bottom",
+  "SplitButton.secondaryPositions.BOTTOM_END": "bottom-end",
+  "SplitButton.secondaryDialogPositions.BOTTOM_START": "bottom-start",
+  "SplitButton.secondaryDialogPositions.BOTTOM_MIDDLE": "bottom",
+  "SplitButton.secondaryDialogPositions.BOTTOM_END": "bottom-end",
+  "SplitButton.sizes.XXS": "xxs",
+  "SplitButton.sizes.XS": "xs",
+  "SplitButton.sizes.SMALL": "small",
+  "SplitButton.sizes.MEDIUM": "medium",
+  "SplitButton.sizes.LARGE": "large",
+  "SplitButton.colors.PRIMARY": "primary",
+  "SplitButton.colors.POSITIVE": "positive",
+  "SplitButton.colors.NEGATIVE": "negative",
+  "SplitButton.colors.INVERTED": "inverted",
+  "SplitButton.colors.ON_PRIMARY_COLOR": "on-primary-color",
+  "SplitButton.colors.ON_INVERTED_BACKGROUND": "on-inverted-background",
+  "SplitButton.colors.BRAND": "brand",
+  "SplitButton.colors.FIXED_LIGHT": "fixed-light",
+  "SplitButton.kinds.PRIMARY": "primary",
+  "SplitButton.kinds.SECONDARY": "secondary",
+  "SplitButton.kinds.TERTIARY": "tertiary",
+  "SplitButton.types.BUTTON": "button",
+  "SplitButton.types.SUBMIT": "submit",
+  "SplitButton.types.RESET": "reset",
+  "SplitButton.inputTags.BUTTON": "button",
+  "SplitButton.inputTags.SUBMIT": "submit",
+  "SplitButton.inputTags.RESET": "reset",
+  "SplitButton.dialogPaddingSizes.NONE": "none",
+  "SplitButton.dialogPaddingSizes.SMALL": "small",
+  "SplitButton.dialogPaddingSizes.MEDIUM": "medium",
+  "SplitButton.dialogPaddingSizes.LARGE": "large",
+  "EditableText.types.TEXT1": "text1",
+  "EditableText.types.TEXT2": "text2",
+  "EditableText.types.TEXT3": "text3",
+  "EditableText.weights.BOLD": "bold",
+  "EditableText.weights.MEDIUM": "medium",
+  "EditableText.weights.NORMAL": "normal",
+  "DialogContentContainer.types.MODAL": "modal",
+  "DialogContentContainer.types.POPOVER": "popover",
+  "DialogContentContainer.sizes.NONE": "none",
+  "DialogContentContainer.sizes.SMALL": "small",
+  "DialogContentContainer.sizes.MEDIUM": "medium",
+  "DialogContentContainer.sizes.LARGE": "large",
+  "LinearProgressBar.styles.PRIMARY": "primary",
+  "LinearProgressBar.styles.SECONDARY": "secondary",
+  "LinearProgressBar.styles.POSITIVE": "positive",
+  "LinearProgressBar.styles.NEGATIVE": "negative",
+  "LinearProgressBar.styles.WARNING": "warning",
+  "LinearProgressBar.styles.NONE": "none",
+  "LinearProgressBar.barStyles.PRIMARY": "primary",
+  "LinearProgressBar.barStyles.SECONDARY": "secondary",
+  "LinearProgressBar.barStyles.POSITIVE": "positive",
+  "LinearProgressBar.barStyles.NEGATIVE": "negative",
+  "LinearProgressBar.barStyles.WARNING": "warning",
+  "LinearProgressBar.barStyles.NONE": "none",
+  "LinearProgressBar.types.PRIMARY": "primary",
+  "LinearProgressBar.types.SECONDARY": "secondary",
+  "LinearProgressBar.barTypes.PRIMARY": "primary",
+  "LinearProgressBar.barTypes.SECONDARY": "secondary",
+  "LinearProgressBar.sizes.XXS": "xxs",
+  "LinearProgressBar.sizes.XS": "xs",
+  "LinearProgressBar.sizes.SMALL": "small",
+  "LinearProgressBar.sizes.MEDIUM": "medium",
+  "LinearProgressBar.sizes.LARGE": "large",
+  "IconButton.sizes.XXS": "xxs",
+  "IconButton.sizes.XS": "xs",
+  "IconButton.sizes.SMALL": "small",
+  "IconButton.sizes.MEDIUM": "medium",
+  "IconButton.sizes.LARGE": "large",
+  "IconButton.colors.PRIMARY": "primary",
+  "IconButton.colors.POSITIVE": "positive",
+  "IconButton.colors.NEGATIVE": "negative",
+  "IconButton.colors.INVERTED": "inverted",
+  "IconButton.colors.ON_PRIMARY_COLOR": "on-primary-color",
+  "IconButton.colors.ON_INVERTED_BACKGROUND": "on-inverted-background",
+  "IconButton.colors.BRAND": "brand",
+  "IconButton.colors.FIXED_LIGHT": "fixed-light",
+  "IconButton.kinds.PRIMARY": "primary",
+  "IconButton.kinds.SECONDARY": "secondary",
+  "IconButton.kinds.TERTIARY": "tertiary",
+  "Text.types.TEXT1": "text1",
+  "Text.types.TEXT2": "text2",
+  "Text.types.TEXT3": "text3",
+  "Text.weights.BOLD": "bold",
+  "Text.weights.MEDIUM": "medium",
+  "Text.weights.NORMAL": "normal",
+  "Text.colors.PRIMARY": "primary",
+  "Text.colors.SECONDARY": "secondary",
+  "Text.colors.ON_PRIMARY": "onPrimary",
+  "Text.colors.ON_INVERTED": "onInverted",
+  "Text.colors.FIXED_LIGHT": "fixedLight",
+  "Text.colors.FIXED_DARK": "fixedDark",
+  "Text.colors.INHERIT": "inherit",
+  "Text.align.START": "start",
+  "Text.align.CENTER": "center",
+  "Text.align.END": "end",
+  "Counter.sizes.SMALL": "small",
+  "Counter.sizes.LARGE": "large",
+  "Counter.colors.PRIMARY": "primary",
+  "Counter.colors.DARK": "dark",
+  "Counter.colors.NEGATIVE": "negative",
+  "Counter.colors.LIGHT": "light",
+  "Counter.kinds.FILL": "fill",
+  "Counter.kinds.LINE": "line",
+  "Icon.type.SVG": "svg",
+  "Icon.type.ICON_FONT": "font",
+  "Icon.type.SRC": "src",
+  "ListItemAvatar.components.DIV": "div",
+  "ListItemAvatar.components.LI": "li",
+  "ListItemAvatar.components.A": "a",
+  "Modal.width.DEFAULT": "default",
+  "Modal.width.FULL_WIDTH": "full-width",
+  "Flex.justify.START": "start",
+  "Flex.justify.CENTER": "center",
+  "Flex.justify.END": "end",
+  "Flex.justify.STRETCH": "stretch",
+  "Flex.justify.SPACE_AROUND": "space-around",
+  "Flex.justify.SPACE_BETWEEN": "space-between",
+  "Flex.justify.INITIAL": "initial",
+  "Flex.align.START": "start",
+  "Flex.align.CENTER": "center",
+  "Flex.align.END": "end",
+  "Flex.align.STRETCH": "stretch",
+  "Flex.align.BASELINE": "baseline",
+  "Flex.align.INITIAL": "initial",
+  "Flex.gaps.XS": "xs",
+  "Flex.gaps.SMALL": "small",
+  "Flex.gaps.MEDIUM": "medium",
+  "Flex.gaps.LARGE": "large",
+  "Flex.directions.ROW": "row",
+  "Flex.directions.COLUMN": "column"
+}
diff --git a/packages/codemod/transformations/core/v3-to-v4/next-imports-migration.ts b/packages/codemod/transformations/core/v3-to-v4/next-imports-migration.ts
new file mode 100644
index 0000000000..7dd134fd36
--- /dev/null
+++ b/packages/codemod/transformations/core/v3-to-v4/next-imports-migration.ts
@@ -0,0 +1,48 @@
+import { NEW_CORE_IMPORT_PATH } from "../../../src/consts";
+import { wrap, renameImportPath, getImports } from "../../../src/utils";
+import { TransformationContext } from "../../../types";
+
+// Components that remain in @vibe/core/next and should NOT be moved
+const NEXT_ONLY_COMPONENTS = ["List"];
+
+/**
+ * Changes imports from '@vibe/core/next' to '@vibe/core'
+ * In v4, AttentionBox, Dropdown, DatePicker, Dialog, and Modal
+ * have been promoted from @vibe/core/next to @vibe/core.
+ * List remains in @vibe/core/next and is left unchanged.
+ */
+function transform({ j, root }: TransformationContext) {
+  const nextImports = getImports(root, `${NEW_CORE_IMPORT_PATH}/next`);
+
+  nextImports.forEach(importPath => {
+    const specifiers = importPath.node.specifiers;
+    if (!specifiers || specifiers.length === 0) {
+      // Bare import (import "@vibe/core/next") — move it
+      renameImportPath(importPath, NEW_CORE_IMPORT_PATH);
+      return;
+    }
+
+    // Split specifiers into promoted (move to @vibe/core) and remaining (stay in /next)
+    const promoted = specifiers.filter(s => {
+      if (s.type === "ImportSpecifier" && s.imported.type === "Identifier") {
+        return !NEXT_ONLY_COMPONENTS.includes(s.imported.name);
+      }
+      return true;
+    });
+    const remaining = specifiers.filter(s => !promoted.includes(s));
+
+    if (remaining.length === 0) {
+      // All specifiers are promoted — just rename the path
+      renameImportPath(importPath, NEW_CORE_IMPORT_PATH);
+    } else if (promoted.length === 0) {
+      // All specifiers stay in /next — do nothing
+    } else {
+      // Mixed: split into two import declarations
+      importPath.node.specifiers = remaining;
+      const newImport = j.importDeclaration(promoted, j.literal(NEW_CORE_IMPORT_PATH));
+      j(importPath).insertBefore(newImport);
+    }
+  });
+}
+
+export default wrap(transform);
diff --git a/packages/codemod/transformations/core/v3-to-v4/packages-rename-migration.ts b/packages/codemod/transformations/core/v3-to-v4/packages-rename-migration.ts
new file mode 100644
index 0000000000..c46d105c68
--- /dev/null
+++ b/packages/codemod/transformations/core/v3-to-v4/packages-rename-migration.ts
@@ -0,0 +1,25 @@
+import { wrap, renameImportPath } from "../../../src/utils";
+import { TransformationContext } from "../../../types";
+import { ImportDeclaration } from "jscodeshift";
+
+const OLD_STYLE_IMPORT_PATH = "monday-ui-style";
+const NEW_STYLE_IMPORT_PATH = "@vibe/style";
+
+/**
+ * Changes imports from 'monday-ui-style' (and subpaths) to '@vibe/style'
+ */
+function transform({ root }: TransformationContext) {
+  root
+    .find(ImportDeclaration)
+    .filter(path => {
+      const source = path.node.source.value as string;
+      return source === OLD_STYLE_IMPORT_PATH || source.startsWith(`${OLD_STYLE_IMPORT_PATH}/`);
+    })
+    .forEach(importPath => {
+      const currentPath = importPath.node.source.value as string;
+      const newPath = currentPath.replace(OLD_STYLE_IMPORT_PATH, NEW_STYLE_IMPORT_PATH);
+      renameImportPath(importPath, newPath);
+    });
+}
+
+export default wrap(transform);
diff --git a/packages/components/button/package.json b/packages/components/button/package.json
index c2142ba60c..f9e2a26440 100644
--- a/packages/components/button/package.json
+++ b/packages/components/button/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vibe/button",
-  "version": "3.0.16",
+  "version": "4.0.0-rc.0",
   "description": "Vibe sub-package for button components",
   "repository": {
     "type": "git",
@@ -38,20 +38,21 @@
     "lint": "eslint \"./src/**/*.{js,jsx,ts,tsx}\""
   },
   "dependencies": {
-    "@vibe/icon": "3.0.11",
-    "@vibe/loader": "3.0.11",
-    "@vibe/shared": "3.0.8",
+    "@vibe/icon": "^4.0.0-rc.0",
+    "@vibe/loader": "^4.0.0-rc.0",
+    "@vibe/shared": "^4.0.0-rc.0",
+    "@vibe/style": "^4.0.0-rc.0",
     "classnames": "^2.5.1",
     "es-toolkit": "^1.39.10"
   },
   "devDependencies": {
     "@testing-library/react": "^12.1.2",
-    "@vibe/config": "3.0.5",
-    "@vibe/icons": "1.16.0",
+    "@vibe/config": "^4.0.0-rc.0",
+    "@vibe/icons": "^4.0.0-rc.0",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
     "react-test-renderer": "16",
-    "typescript": "^4.7.3",
+    "typescript": "^5.9.3",
     "vitest": "^1.6.0"
   },
   "peerDependencies": {
diff --git a/packages/components/button/src/Button/Button.module.scss b/packages/components/button/src/Button/Button.module.scss
index e29e62ec88..ad95129ef4 100644
--- a/packages/components/button/src/Button/Button.module.scss
+++ b/packages/components/button/src/Button/Button.module.scss
@@ -1,4 +1,4 @@
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 
 $disabled-on-primary-color-opacity: 0.5;
 
@@ -56,21 +56,21 @@ $disabled-on-primary-color-opacity: 0.5;
 }
 
 .marginRight {
-  margin-right: var(--spacing-small);
+  margin-inline-end: var(--space-8);
 }
 
 .marginLeft {
-  margin-left: var(--spacing-small);
+  margin-inline-start: var(--space-8);
 }
 
 .rightFlat {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
 }
 
 .leftFlat {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
 }
 
 .button:active:not(.preventClickAnimation) {
@@ -78,17 +78,17 @@ $disabled-on-primary-color-opacity: 0.5;
 }
 
 .button .leftIcon {
-  margin-right: var(--spacing-small);
+  margin-inline-end: var(--space-8);
 }
 
 .button .rightIcon {
-  margin-left: var(--spacing-small);
+  margin-inline-start: var(--space-8);
 }
 
 .sizeXxs {
   @include smoothing-text;
   @include vibe-text(text2, normal);
-  padding: 2px var(--spacing-xs);
+  padding: 2px var(--space-4);
   height: 16px;
   line-height: 16px;
 }
@@ -96,7 +96,7 @@ $disabled-on-primary-color-opacity: 0.5;
 .sizeXs {
   @include smoothing-text;
   @include vibe-text(text2, normal);
-  padding: var(--spacing-xs) var(--spacing-small);
+  padding: var(--space-4) var(--space-8);
   height: 24px;
   line-height: 21px;
 }
@@ -104,7 +104,7 @@ $disabled-on-primary-color-opacity: 0.5;
 .sizeSmall {
   @include smoothing-text;
   @include vibe-text(text2, normal);
-  padding: var(--spacing-xs) var(--spacing-small);
+  padding: var(--space-4) var(--space-8);
   height: 32px;
   line-height: 24px;
 }
@@ -116,14 +116,14 @@ $disabled-on-primary-color-opacity: 0.5;
 .sizeMedium {
   @include smoothing-text;
   @include vibe-text(text1, normal);
-  padding: var(--spacing-small) var(--spacing-medium);
+  padding: var(--space-8) var(--space-16);
   height: 40px;
 }
 
 .sizeLarge {
   @include smoothing-text;
   @include vibe-text(text1, normal);
-  padding: 12px var(--spacing-large);
+  padding: 12px var(--space-24);
   height: 48px;
 }
 
@@ -570,8 +570,7 @@ $disabled-on-primary-color-opacity: 0.5;
 }
 
 .noSidePadding {
-  padding-right: 0;
-  padding-left: 0;
+  padding-inline: 0;
 }
 
 .button.insetFocusStyle {
diff --git a/packages/components/button/src/Button/Button.tsx b/packages/components/button/src/Button/Button.tsx
index 91e0a16260..8d86b98f52 100644
--- a/packages/components/button/src/Button/Button.tsx
+++ b/packages/components/button/src/Button/Button.tsx
@@ -2,23 +2,12 @@
 import React, { type AriaAttributes, forwardRef, useCallback, useEffect, useMemo, useRef } from "react";
 import { camelCase } from "es-toolkit";
 import cx from "classnames";
-import { SIZES, useMergeRef, NOOP } from "@vibe/shared";
+import { useMergeRef, NOOP } from "@vibe/shared";
 import { Icon, type SubIcon } from "@vibe/icon";
 import { Loader } from "@vibe/loader";
-import {
-  ButtonColor as ButtonColorEnum,
-  ButtonInputType as ButtonInputTypeEnum,
-  ButtonType as ButtonTypeEnum
-} from "./ButtonConstants";
 import { type ButtonColor, type ButtonInputType, type ButtonType, type ButtonSize } from "./Button.types";
 import { getParentBackgroundColorNotTransparent, TRANSPARENT_COLOR } from "./helper/dom-helpers";
-import {
-  getTestId,
-  type VibeComponentProps,
-  withStaticProps,
-  ComponentDefaultTestId,
-  ComponentVibeId
-} from "@vibe/shared";
+import { getTestId, type VibeComponentProps, ComponentDefaultTestId, ComponentVibeId } from "@vibe/shared";
 import { getStyle } from "@vibe/shared";
 import styles from "./Button.module.scss";
 import { useButtonLoading } from "./helper/useButtonLoading";
@@ -69,15 +58,15 @@ export interface ButtonProps extends VibeComponentProps {
   /** adds 8px margin to the left */
   marginLeft?: boolean;
   /** element id to describe the button accordingly */
-  ariaLabeledBy?: string;
+  "aria-labelledby"?: string;
   /** aria label to provide important when providing only Icon */
-  ariaLabel?: string;
+  "aria-label"?: string;
   /** aria for a button popup */
-  ariaHasPopup?: React.HTMLProps<HTMLButtonElement>["aria-haspopup"];
+  "aria-haspopup"?: React.HTMLProps<HTMLButtonElement>["aria-haspopup"];
   /** aria to be set if the popup is open */
-  ariaExpanded?: boolean;
+  "aria-expanded"?: boolean;
   /** aria controls - receives id for the controlled region */
-  ariaControls?: string;
+  "aria-controls"?: string;
   "aria-describedby"?: AriaAttributes["aria-describedby"];
   /**
    * aria to be used for screen reader to know if the button is hidden
@@ -130,18 +119,18 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       marginLeft = false,
       type = "button",
       onMouseDown = NOOP,
-      ariaLabel,
+      "aria-label": ariaLabel,
       rightFlat = false,
       leftFlat = false,
       preventClickAnimation = false,
       noSidePadding = false,
       onFocus = NOOP,
       onBlur = NOOP,
-      ariaLabeledBy,
+      "aria-labelledby": ariaLabelledBy,
       defaultTextColorOnPrimaryColor = TRANSPARENT_COLOR,
-      ariaExpanded,
-      ariaHasPopup,
-      ariaControls,
+      "aria-expanded": ariaExpanded,
+      "aria-haspopup": ariaHasPopup,
+      "aria-controls": ariaControls,
       "aria-describedby": ariaDescribedBy,
       "aria-hidden": ariaHidden,
       "aria-pressed": ariaPressed,
@@ -262,7 +251,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         onMouseDown: onMouseDownClicked,
         "aria-disabled": disabled,
         "aria-busy": loading,
-        "aria-labelledby": ariaLabeledBy,
+        "aria-labelledby": ariaLabelledBy,
         "aria-label": ariaLabel,
         "aria-haspopup": ariaHasPopup,
         "aria-expanded": ariaExpanded,
@@ -288,7 +277,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       onMouseDownClicked,
       disabled,
       loading,
-      ariaLabeledBy,
+      ariaLabelledBy,
       ariaLabel,
       ariaHasPopup,
       ariaExpanded,
@@ -319,9 +308,9 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         <>
           {leftIcon ? (
             <Icon
-              iconType="font"
+              type="font"
               icon={leftIcon}
-              iconSize={iconSize(leftIcon)}
+              size={iconSize(leftIcon)}
               className={cx({
                 [styles.leftIcon]: hasRenderableChildren
               })}
@@ -331,9 +320,9 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
           {children}
           {rightIcon ? (
             <Icon
-              iconType="font"
+              type="font"
               icon={rightIcon}
-              iconSize={iconSize(rightIcon)}
+              size={iconSize(rightIcon)}
               className={cx({
                 [styles.rightIcon]: hasRenderableChildren
               })}
@@ -364,9 +353,9 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
           <span className={styles.successContent}>
             {successIcon ? (
               <Icon
-                iconType="font"
+                type="font"
                 icon={successIcon}
-                iconSize={iconSize(successIcon)}
+                size={iconSize(successIcon)}
                 className={cx({
                   [styles.leftIcon]: !!successText
                 })}
@@ -390,18 +379,4 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   }
 );
 
-interface ButtonStaticProps {
-  sizes: typeof SIZES;
-  colors: typeof ButtonColorEnum;
-  kinds: typeof ButtonTypeEnum;
-  types: typeof ButtonInputTypeEnum;
-  inputTags: typeof ButtonInputTypeEnum;
-}
-
-export default withStaticProps<ButtonProps, ButtonStaticProps>(Button, {
-  sizes: SIZES,
-  colors: ButtonColorEnum,
-  kinds: ButtonTypeEnum,
-  types: ButtonInputTypeEnum,
-  inputTags: ButtonInputTypeEnum
-});
+export default Button;
diff --git a/packages/components/button/src/Button/ButtonConstants.ts b/packages/components/button/src/Button/ButtonConstants.ts
deleted file mode 100644
index b13ab6bd1a..0000000000
--- a/packages/components/button/src/Button/ButtonConstants.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { type SIZES } from "@vibe/shared";
-
-/**
- * @deprecated
- */
-export enum ButtonType {
-  PRIMARY = "primary",
-  SECONDARY = "secondary",
-  TERTIARY = "tertiary"
-}
-
-/**
- * @deprecated
- */
-export enum ButtonColor {
-  PRIMARY = "primary",
-  POSITIVE = "positive",
-  NEGATIVE = "negative",
-  INVERTED = "inverted",
-  ON_PRIMARY_COLOR = "on-primary-color",
-  ON_INVERTED_BACKGROUND = "on-inverted-background",
-  BRAND = "brand",
-  FIXED_LIGHT = "fixed-light",
-  FIXED_DARK = "fixed-dark"
-}
-
-export type Size = (typeof SIZES)[keyof typeof SIZES];
-
-export const BUTTON_KIND_CLASS_NAMES = {
-  PRIMARY: ""
-};
-
-/**
- * @deprecated
- */
-export enum ButtonInputType {
-  BUTTON = "button",
-  SUBMIT = "submit",
-  RESET = "reset"
-}
diff --git a/packages/components/button/src/Button/__tests__/Button.snapshot.test.tsx b/packages/components/button/src/Button/__tests__/Button.snapshot.test.tsx
index 88ad6e344e..5bbf4f5400 100644
--- a/packages/components/button/src/Button/__tests__/Button.snapshot.test.tsx
+++ b/packages/components/button/src/Button/__tests__/Button.snapshot.test.tsx
@@ -1,14 +1,24 @@
-import { vi, describe, it, expect } from "vitest";
+import { describe, it, expect } from "vitest";
 import React from "react";
 import renderer from "react-test-renderer";
 import { noop as NOOP } from "es-toolkit";
 import Button from "../Button";
 import { WhatsNew } from "@vibe/icons";
-import { type ButtonSize } from "../Button.types";
+import { type ButtonSize, type ButtonColor, type ButtonType } from "../Button.types";
 
-vi.mock("../../Icon/CustomSvgIcon/CustomSvgIcon", () => ({
-  default: () => <div data-testid="custom-icon-mock" />
-}));
+const BUTTON_COLORS: ButtonColor[] = [
+  "primary",
+  "positive",
+  "negative",
+  "inverted",
+  "on-primary-color",
+  "on-inverted-background",
+  "brand",
+  "fixed-light",
+  "fixed-dark"
+];
+
+const BUTTON_KINDS: ButtonType[] = ["primary", "secondary", "tertiary"];
 
 describe("Button renders correctly", () => {
   it("renders correctly with empty props", () => {
@@ -37,21 +47,21 @@ describe("Button renders correctly", () => {
     expect(tree).toMatchSnapshot();
   });
 
-  Object.values(["small", "medium", "large"]).forEach(size => {
+  (["small", "medium", "large"] as ButtonSize[]).forEach(size => {
     it(`renders Button size- ${size}`, () => {
-      const tree = renderer.create(<Button size={size as ButtonSize}>Button</Button>).toJSON();
+      const tree = renderer.create(<Button size={size}>Button</Button>).toJSON();
       expect(tree).toMatchSnapshot();
     });
   });
 
-  Object.values(Button.colors).forEach(color => {
+  BUTTON_COLORS.forEach(color => {
     it(`renders Button color- ${color}`, () => {
       const tree = renderer.create(<Button color={color}>Button</Button>).toJSON();
       expect(tree).toMatchSnapshot();
     });
   });
 
-  Object.values(Button.kinds).forEach(kind => {
+  BUTTON_KINDS.forEach(kind => {
     it(`renders Button kind- ${kind}`, () => {
       const tree = renderer.create(<Button kind={kind}>Button</Button>).toJSON();
       expect(tree).toMatchSnapshot();
@@ -82,7 +92,13 @@ describe("Button renders correctly", () => {
     it("renders correctly with a11y props (false)", () => {
       const tree = renderer
         .create(
-          <Button ariaLabel="text" ariaControls="area" ariaExpanded={false} ariaLabeledBy="id" ariaHasPopup={false}>
+          <Button
+            aria-label="text"
+            aria-controls="area"
+            aria-expanded={false}
+            aria-labelledby="id"
+            aria-haspopup={false}
+          >
             Button
           </Button>
         )
@@ -93,7 +109,7 @@ describe("Button renders correctly", () => {
     it("renders correctly with a11y props (true)", () => {
       const tree = renderer
         .create(
-          <Button ariaLabel="text" ariaControls="area" ariaExpanded={true} ariaLabeledBy="id" ariaHasPopup={true}>
+          <Button aria-label="text" aria-controls="area" aria-expanded={true} aria-labelledby="id" aria-haspopup={true}>
             Button
           </Button>
         )
diff --git a/packages/components/button/src/Button/__tests__/Button.test.jsx b/packages/components/button/src/Button/__tests__/Button.test.tsx
similarity index 99%
rename from packages/components/button/src/Button/__tests__/Button.test.jsx
rename to packages/components/button/src/Button/__tests__/Button.test.tsx
index 109befc51d..b9e39cd772 100644
--- a/packages/components/button/src/Button/__tests__/Button.test.jsx
+++ b/packages/components/button/src/Button/__tests__/Button.test.tsx
@@ -199,7 +199,7 @@ describe("<Button />", () => {
       const ariaLabel = "Icon Name";
       const onClick = vi.fn();
       const { getByLabelText } = render(
-        <Button ariaLabel={ariaLabel} onClick={onClick}>
+        <Button aria-label={ariaLabel} onClick={onClick}>
           {text}
         </Button>
       );
diff --git a/packages/components/clickable/package.json b/packages/components/clickable/package.json
index 0d80ae991e..8f2946caea 100644
--- a/packages/components/clickable/package.json
+++ b/packages/components/clickable/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vibe/clickable",
-  "version": "3.0.3",
+  "version": "4.0.0-rc.0",
   "description": "Vibe sub-package for Clickable component",
   "repository": {
     "type": "git",
@@ -38,18 +38,19 @@
     "lint": "eslint \"./src/**/*.{js,jsx,ts,tsx}\""
   },
   "dependencies": {
-    "@vibe/shared": "3.0.8",
+    "@vibe/shared": "^4.0.0-rc.0",
+    "@vibe/style": "^4.0.0-rc.0",
     "classnames": "^2.5.1",
     "es-toolkit": "^1.39.10"
   },
   "devDependencies": {
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
-    "@vibe/config": "3.0.5",
+    "@vibe/config": "^4.0.0-rc.0",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
     "react-test-renderer": "16",
-    "typescript": "^4.7.3",
+    "typescript": "^5.9.3",
     "vitest": "^1.6.0"
   },
   "peerDependencies": {
diff --git a/packages/components/clickable/src/Clickable/Clickable.module.scss b/packages/components/clickable/src/Clickable/Clickable.module.scss
index 3b2d74f801..cbb6c6536a 100644
--- a/packages/components/clickable/src/Clickable/Clickable.module.scss
+++ b/packages/components/clickable/src/Clickable/Clickable.module.scss
@@ -1,5 +1,5 @@
-@import "~monday-ui-style/dist/mixins/typography";
-@import "~monday-ui-style/dist/mixins/states";
+@import "~@vibe/style/dist/mixins/typography";
+@import "~@vibe/style/dist/mixins/states";
 
 .clickable {
   @include clickable;
diff --git a/packages/components/clickable/src/Clickable/Clickable.tsx b/packages/components/clickable/src/Clickable/Clickable.tsx
index 25a07c09ef..0beb053b6f 100644
--- a/packages/components/clickable/src/Clickable/Clickable.tsx
+++ b/packages/components/clickable/src/Clickable/Clickable.tsx
@@ -41,25 +41,23 @@ export interface ClickableProps extends VibeComponentProps {
   /**
    * The label of the element for accessibility.
    */
-  ariaLabel?: string;
+  "aria-label"?: string;
   /**
    * If true, hides the element from assistive technologies.
    */
-  ariaHidden?: boolean;
-  // TODO: [breaking] remove string type
+  "aria-hidden"?: boolean;
   /**
    * Indicates the presence of a popup associated with the element.
    */
-  ariaHasPopup?: boolean | string;
+  "aria-haspopup"?: boolean;
   /**
    * If true, indicates that the associated popup is open.
    */
-  ariaExpanded?: boolean;
-  // TODO: [breaking] remove string type
+  "aria-expanded"?: boolean;
   /**
    * The tab order of the element.
    */
-  tabIndex?: string | number;
+  tabIndex?: number;
   /**
    * If true, the element is disabled.
    */
@@ -83,11 +81,11 @@ const Clickable = forwardRef(
       onMouseDown = NOOP,
       onMouseEnter = NOOP,
       onMouseLeave = NOOP,
-      ariaLabel,
-      ariaHidden,
-      ariaHasPopup,
-      ariaExpanded,
-      tabIndex = "0",
+      "aria-label": ariaLabel,
+      "aria-hidden": ariaHidden,
+      "aria-haspopup": ariaHasPopup,
+      "aria-expanded": ariaExpanded,
+      tabIndex = 0,
       disabled = false,
       style,
       "data-testid": dataTestId
@@ -105,10 +103,10 @@ const Clickable = forwardRef(
         "data-testid": dataTestId,
         role,
         tabIndex,
-        ariaLabel,
-        ariaHidden,
-        ariaHasPopup,
-        ariaExpanded
+        "aria-label": ariaLabel,
+        "aria-hidden": ariaHidden,
+        "aria-haspopup": ariaHasPopup,
+        "aria-expanded": ariaExpanded
       },
       ref
     );
diff --git a/packages/components/clickable/src/Clickable/__tests__/Clickable.test.tsx b/packages/components/clickable/src/Clickable/__tests__/Clickable.test.tsx
index b38e779b39..73dbc533dd 100644
--- a/packages/components/clickable/src/Clickable/__tests__/Clickable.test.tsx
+++ b/packages/components/clickable/src/Clickable/__tests__/Clickable.test.tsx
@@ -44,7 +44,7 @@ describe("Clickable tests", () => {
   describe("a11y", () => {
     it("should add the label", () => {
       const ariaLabel = "Lable Name";
-      const { getByLabelText } = renderComponent({ ariaLabel });
+      const { getByLabelText } = renderComponent({ "aria-label": ariaLabel });
       const element = getByLabelText(ariaLabel);
       expect(element).toBeTruthy();
     });
diff --git a/packages/components/clickable/src/useClickableProps/useClickableProps.ts b/packages/components/clickable/src/useClickableProps/useClickableProps.ts
index b13cc77c9e..1124fb5fef 100644
--- a/packages/components/clickable/src/useClickableProps/useClickableProps.ts
+++ b/packages/components/clickable/src/useClickableProps/useClickableProps.ts
@@ -17,19 +17,16 @@ export default function useClickableProps(
     "data-testid": dataTestId,
     role = "button",
     tabIndex = 0,
-    ariaLabel,
-    ariaHidden,
-    ariaHasPopup,
-    ariaExpanded
+    "aria-label": ariaLabel,
+    "aria-hidden": ariaHidden,
+    "aria-haspopup": ariaHasPopup,
+    "aria-expanded": ariaExpanded
   }: ClickableProps,
   ref: React.ForwardedRef<HTMLElement>
 ) {
   const onKeyDown = useKeyboardButtonPressedFunc(onClick);
   const componentRef = useRef<HTMLElement | null>(null);
   const mergedRef = useMergeRef(ref, componentRef);
-  // Remove when ariaHasPopup is no longer a string
-  const overrideAriaHasPopup = ariaHasPopup === undefined ? undefined : !!ariaHasPopup;
-
   return {
     ref: mergedRef,
     id,
@@ -39,11 +36,11 @@ export default function useClickableProps(
     onMouseDown,
     onMouseEnter,
     onMouseLeave,
-    tabIndex: disabled ? -1 : Number(tabIndex),
+    tabIndex: disabled ? -1 : tabIndex,
     role,
     "aria-label": ariaLabel,
     "aria-hidden": ariaHidden,
-    "aria-haspopup": overrideAriaHasPopup,
+    "aria-haspopup": ariaHasPopup,
     "aria-expanded": ariaExpanded
   };
 }
diff --git a/packages/components/dialog/package.json b/packages/components/dialog/package.json
index 4267c8db5b..a017e01d47 100644
--- a/packages/components/dialog/package.json
+++ b/packages/components/dialog/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vibe/dialog",
-  "version": "3.0.12",
+  "version": "4.0.0-rc.0",
   "description": "Vibe sub-package for dialog components",
   "repository": {
     "type": "git",
@@ -38,13 +38,13 @@
     "lint": "eslint \"./src/**/*.{js,jsx,ts,tsx}\""
   },
   "dependencies": {
-    "@popperjs/core": "2.11.6",
-    "@vibe/hooks": "3.0.3",
-    "@vibe/layer": "3.0.10",
-    "@vibe/shared": "3.0.8",
+    "@floating-ui/react-dom": "^2.1.2",
+    "@vibe/hooks": "^4.0.0-rc.0",
+    "@vibe/layer": "^4.0.0-rc.0",
+    "@vibe/shared": "^4.0.0-rc.0",
+    "@vibe/style": "^4.0.0-rc.0",
     "classnames": "^2.5.1",
     "es-toolkit": "^1.39.10",
-    "react-popper": "^2.3.0",
     "react-transition-group": "^4.4.5"
   },
   "devDependencies": {
@@ -52,11 +52,11 @@
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^13.5.0",
     "@types/react-transition-group": "^4.4.5",
-    "@vibe/config": "3.0.5",
+    "@vibe/config": "^4.0.0-rc.0",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
     "react-test-renderer": "16",
-    "typescript": "^4.7.3",
+    "typescript": "^5.9.3",
     "vitest": "^1.6.0"
   },
   "peerDependencies": {
diff --git a/packages/components/dialog/src/Dialog/Dialog.tsx b/packages/components/dialog/src/Dialog/Dialog.tsx
index cc42d6ad2f..f3bda28a99 100644
--- a/packages/components/dialog/src/Dialog/Dialog.tsx
+++ b/packages/components/dialog/src/Dialog/Dialog.tsx
@@ -1,7 +1,17 @@
 import cx from "classnames";
-import React, { PureComponent, type ReactElement } from "react";
+import React, { useState, useEffect, useRef, useContext, useCallback, useMemo } from "react";
 import { createPortal } from "react-dom";
-import { Manager, type Modifier, Popper, Reference } from "react-popper";
+import {
+  useFloating,
+  offset,
+  flip,
+  shift,
+  hide,
+  arrow as arrowMiddleware,
+  autoUpdate,
+  type Placement,
+  type Middleware
+} from "@floating-ui/react-dom";
 import { isFunction } from "es-toolkit";
 import {
   chainFunctions,
@@ -9,715 +19,530 @@ import {
   convertToArray,
   NOOP,
   isInsideClass,
-  type VibeComponentProps,
   ComponentDefaultTestId,
   getTestId,
   isClient
 } from "@vibe/shared";
-import DialogContent from "./DialogContent/DialogContent";
-import { Refable } from "../Refable/Refable";
-import {
-  AnimationType as AnimationTypeEnum,
-  HideShowEvent as DialogTriggerEventEnum,
-  DialogPosition as DialogPositionEnum
-} from "./DialogConstants";
-import type * as PopperJS from "@popperjs/core";
+import DialogContent from "./components/DialogContent/DialogContent";
+import { Refable } from "./components/Refable/Refable";
 import styles from "./Dialog.module.scss";
-import {
-  type DialogAnimationType,
-  type DialogPosition,
-  type DialogTriggerEvent,
-  type DialogEvent
-} from "./Dialog.types";
+import { type DialogTriggerEvent, type DialogEvent, type DialogProps } from "./Dialog.types";
 import { LayerContext, LayerProvider } from "@vibe/layer";
-import { createObserveContentResizeModifier } from "./modifiers/observeContentResizeModifier";
-
-export interface DialogProps extends VibeComponentProps {
-  /**
-   * Class name applied to the reference wrapper element.
-   */
-  referenceWrapperClassName?: string;
-  /**
-   * The wrapper element type to use for React components. Defaults to "span".
-   */
-  referenceWrapperElement?: "span" | "div";
-  /**
-   * The placement of the dialog relative to the reference element.
-   */
-  position?: DialogPosition;
-  /**
-   * Custom Popper.js modifiers.
-   * https://popper.js.org/docs/v2/modifiers/
-   */
-  modifiers?: Modifier<any>[];
-  /**
-   * The starting edge of the dialog.
-   */
-  startingEdge?: string;
-  /**
-   * Offset values for positioning adjustments.
-   * `main` - horizontal offset
-   * `secondary` - vertical offset
-   */
-  moveBy?: { main?: number; secondary?: number };
-  /**
-   * Delay in milliseconds before showing the dialog.
-   */
-  showDelay?: number;
-  /**
-   * Delay in milliseconds before hiding the dialog.
-   */
-  hideDelay?: number;
-  /**
-   * Events that trigger showing the dialog.
-   */
-  showTrigger?: DialogTriggerEvent | DialogTriggerEvent[];
-  /**
-   * Events that trigger hiding the dialog.
-   */
-  hideTrigger?: DialogTriggerEvent | DialogTriggerEvent[];
-  /**
-   * If true, prevents closing the dialog when the mouse enters it.
-   */
-  showOnDialogEnter?: boolean;
-  /**
-   * If true, shows the dialog when the component mounts.
-   */
-  shouldShowOnMount?: boolean;
-  /**
-   * If true, disables opening the dialog.
-   */
-  disable?: boolean;
-  /**
-   * Controls the open state of the dialog.
-   */
-  open?: boolean;
-  /**
-   * Derived state control for managing dialog visibility.
-   */
-  isOpen?: boolean;
-  /**
-   * Classes that prevent showing the dialog when present.
-   */
-  showTriggerIgnoreClass?: string | Array<string>;
-  /**
-   * Classes that prevent hiding the dialog when present.
-   */
-  hideTriggerIgnoreClass?: string | Array<string>;
-  /**
-   * The animation type used for the dialog.
-   */
-  animationType?: DialogAnimationType;
-  /**
-   * Class name applied to the dialog content container.
-   */
-  wrapperClassName?: string;
-  /**
-   * If true, prevents animation when mounting.
-   */
-  preventAnimationOnMount?: boolean;
-  /**
-   * The CSS selector of the container where the dialog is rendered.
-   */
-  containerSelector?: string;
-  /**
-   * If true, positions the tooltip element.
-   */
-  tooltip?: boolean;
-  /**
-   * Class name applied to the tooltip element.
-   */
-  tooltipClassName?: string;
-  /**
-   * Callback fired when the dialog is shown.
-   */
-  onDialogDidShow?: (event?: DialogEvent, eventName?: DialogTriggerEvent | string) => void;
-  /**
-   * Callback fired when the dialog is hidden.
-   */
-  onDialogDidHide?: (event: DialogEvent, eventName: DialogTriggerEvent | string) => void;
-  /**
-   * Callback fired when clicking outside the dialog.
-   */
-  onClickOutside?: (event: React.MouseEvent) => void;
-  /**
-   * Callback fired when clicking inside the dialog content.
-   */
-  onContentClick?: (event: React.MouseEvent) => void;
-  /**
-   * The z-index applied to the dialog.
-   */
-  zIndex?: number;
-  /**
-   * If true, uses derived state from props.
-   */
-  useDerivedStateFromProps?: boolean;
-  /**
-   * If true, makes the dialog disappear when the reference element is hidden.
-   */
-  hideWhenReferenceHidden?: boolean;
-  /**
-   * If true, triggers the callback when the dialog mounts.
-   */
-  shouldCallbackOnMount?: boolean;
-  /**
-   * If true, instantly shows and hides the dialog without delay.
-   */
-  instantShowAndHide?: boolean;
-  /**
-   * Callback to dynamically adjust show delay and animation behavior.
-   */
-  getDynamicShowDelay?: () => { showDelay: number; preventAnimation: boolean };
-  /**
-   * The content displayed inside the dialog.
-   */
-  content?: (() => JSX.Element) | JSX.Element;
-  /**
-   * The element to position the dialog beside.
-   */
-  children?: ReactElement | ReactElement[] | string;
-  /**
-   * If true, keyboard focus/blur events behave like mouse enter/leave.
-   */
-  addKeyboardHideShowTriggersByDefault?: boolean;
-  /**
-   * If true, disables scrolling for the container element.
-   */
-  disableContainerScroll?: boolean | string;
-  /**
-   * Enables the observation of content resize for the popper element.
-   * When set to `true`, a ResizeObserver is attached to the popper content,
-   * automatically triggering repositioning when the size of the content changes.
-   *
-   * This is useful for dialogs, tooltips, or popovers with dynamic content
-   * that may grow or shrink without a re-render being triggered.
-   */
-  observeContentResize?: boolean;
-  /**
-   * If true, provides a LayerProvider context for nested dialogs to render correctly.
-   * This is useful when you have components that use Dialog internally (like Dropdown)
-   * inside another Dialog, ensuring proper z-index stacking and click-outside behavior.
-   */
-  enableNestedDialogLayer?: boolean;
-}
 
-export interface DialogState {
-  /**
-   * If true, the dialog is open.
-   */
-  isOpen?: boolean;
-  /**
-   * If true, the dialog state is derived from props.
-   */
-  shouldUseDerivedStateFromProps?: boolean;
-  /**
-   * If true, prevents animation when opening or closing the dialog.
-   */
-  preventAnimation?: boolean;
-}
-
-export default class Dialog extends PureComponent<DialogProps, DialogState> {
-  static hideShowTriggers = DialogTriggerEventEnum;
-  static positions = DialogPositionEnum;
-  static animationTypes = AnimationTypeEnum;
-  static defaultProps = {
-    position: "top",
-    modifiers: [] as Modifier<any>[],
-    moveBy: { main: 0, secondary: 0 },
-    showDelay: 100,
-    hideDelay: 100,
-    showTrigger: Dialog.hideShowTriggers.MOUSE_ENTER,
-    hideTrigger: Dialog.hideShowTriggers.MOUSE_LEAVE,
-    showOnDialogEnter: false,
-    shouldShowOnMount: false,
-    disable: false,
-    open: false,
-    animationType: Dialog.animationTypes.EXPAND,
-    preventAnimationOnMount: false,
-    tooltip: false,
-    onDialogDidShow: NOOP,
-    onDialogDidHide: NOOP,
-    onClickOutside: NOOP,
-    onContentClick: NOOP,
-    useDerivedStateFromProps: false,
-    hideWhenReferenceHidden: false,
-    shouldCallbackOnMount: false,
-    instantShowAndHide: false,
-    addKeyboardHideShowTriggersByDefault: false,
-    observeContentResize: false,
-    enableNestedDialogLayer: false
-  };
-  private showTimeout: NodeJS.Timeout;
-  private hideTimeout: NodeJS.Timeout;
-  private containerRef: React.RefObject<HTMLDivElement>;
-  context!: React.ContextType<typeof LayerContext>;
-
-  constructor(props: DialogProps) {
-    super(props);
-    this.state = {
-      shouldUseDerivedStateFromProps: props.useDerivedStateFromProps,
-      isOpen: props.shouldShowOnMount
-    };
-
-    this.containerRef = React.createRef<HTMLDivElement>();
-
-    // Binding section.
-    this.onMouseEnter = this.onMouseEnter.bind(this);
-    this.onMouseLeave = this.onMouseLeave.bind(this);
-    this.onMouseDown = this.onMouseDown.bind(this);
-    this.onClick = this.onClick.bind(this);
-    this.onFocus = this.onFocus.bind(this);
-    this.onBlur = this.onBlur.bind(this);
-    this.isShown = this.isShown.bind(this);
-    this.onEsc = this.onEsc.bind(this);
-    this.onClickOutside = this.onClickOutside.bind(this);
-    this.onDialogEnter = this.onDialogEnter.bind(this);
-    this.onDialogLeave = this.onDialogLeave.bind(this);
-    this.getContainer = this.getContainer.bind(this);
-    this.onContentClick = this.onContentClick.bind(this);
-    this.onKeyDown = this.onKeyDown.bind(this);
-    this.closeDialogOnEscape = this.closeDialogOnEscape.bind(this);
-    this.onContextMenu = this.onContextMenu.bind(this);
-    this.getDefaultContainer = this.getDefaultContainer.bind(this);
-
-    // Timeouts
-    this.hideTimeout = null;
-    this.showTimeout = null;
-  }
-
-  closeDialogOnEscape(event: KeyboardEvent) {
-    const { isOpen } = this.state;
-    if (!isOpen) {
-      return;
-    }
-    switch (event.key) {
-      case "Escape":
-        this.hideDialogIfNeeded(event, DialogTriggerEventEnum.ESCAPE_KEY);
-        break;
-      case "Tab":
-        this.handleEvent(DialogTriggerEventEnum.TAB_KEY, event.target, event);
-        break;
-      case "Enter":
-        this.handleEvent(DialogTriggerEventEnum.ENTER, event.target, event);
-        break;
-      default:
-        break;
-    }
-  }
-
-  componentDidMount() {
-    const { shouldCallbackOnMount, onDialogDidShow } = this.props;
-    const { isOpen } = this.state;
-    if (isClient()) {
-      document.addEventListener("keyup", this.closeDialogOnEscape);
-    }
-    if (shouldCallbackOnMount && isOpen) {
-      onDialogDidShow && onDialogDidShow();
-    }
-  }
-
-  componentWillUnmount() {
-    if (isClient()) {
-      document.removeEventListener("keyup", this.closeDialogOnEscape);
-    }
-    if (this.showTimeout) {
-      clearTimeout(this.showTimeout);
-      this.showTimeout = null;
-    }
-    if (this.hideTimeout) {
-      clearTimeout(this.hideTimeout);
-      this.hideTimeout = null;
-    }
-  }
-
-  static getDerivedStateFromProps(nextProps: DialogProps, state: DialogState): DialogState {
-    if (state.shouldUseDerivedStateFromProps) {
-      return { isOpen: nextProps.isOpen };
-    }
-    return null;
-  }
-
-  getDefaultContainer() {
-    const { layerRef } = this.context;
-    if (layerRef?.current) {
-      return layerRef.current;
-    }
-    return document.body;
-  }
-
-  getContainer() {
-    const { containerSelector } = this.props;
-    if (!containerSelector) {
-      return this.getDefaultContainer();
-    }
-
-    const containerElement = document.querySelector(containerSelector);
-    if (!containerElement || !(containerElement instanceof Element)) {
-      return this.getDefaultContainer();
-    }
-    return containerElement;
-  }
-
-  showDialog(event: DialogEvent, eventName: DialogTriggerEvent | string, options: { preventAnimation?: boolean } = {}) {
-    const { showDelay, instantShowAndHide, getDynamicShowDelay } = this.props;
-    let finalShowDelay = showDelay;
-    let preventAnimation = options.preventAnimation;
-    if (getDynamicShowDelay) {
-      const dynamicDelayObj = getDynamicShowDelay();
-      finalShowDelay = dynamicDelayObj.showDelay || 0;
-      preventAnimation = preventAnimation || dynamicDelayObj.preventAnimation;
-    }
-
-    if (instantShowAndHide) {
-      this.onShowDialog(event, eventName);
-      this.setState({ isOpen: true, preventAnimation });
-      this.showTimeout = null;
-    } else {
-      this.showTimeout = setTimeout(() => {
-        this.onShowDialog(event, eventName);
-        this.showTimeout = null;
-        this.setState({ isOpen: true, preventAnimation });
-      }, finalShowDelay);
-    }
-  }
-
-  onShowDialog(event: DialogEvent, eventName: DialogTriggerEvent | string) {
-    if (this.isShown()) return;
-    const { onDialogDidShow } = this.props;
-    onDialogDidShow(event, eventName);
-  }
+function Dialog({
+  // Core props
+  id,
+  "data-testid": dataTestId,
+  children,
+  content,
+  position = "top",
+  moveBy = { main: 0, secondary: 0 },
+  middleware: middlewareProp = [],
+  startingEdge,
+  showDelay = 100,
+  hideDelay = 100,
+  instantShowAndHide = false,
+  getDynamicShowDelay,
+  showTrigger = "mouseenter",
+  hideTrigger = "mouseleave",
+  showOnDialogEnter = false,
+  showTriggerIgnoreClass,
+  hideTriggerIgnoreClass,
+  addKeyboardHideShowTriggersByDefault = true,
+  shouldShowOnMount = false,
+  disable = false,
+  open = false,
+  isOpen: isOpenProp,
+  useDerivedStateFromProps = false,
+  animationType = "expand",
+  preventAnimationOnMount = false,
+  tooltip = false,
+  tooltipClassName,
+  containerSelector,
+  disableContainerScroll,
+  zIndex,
+  wrapperClassName,
+  referenceWrapperClassName,
+  referenceWrapperElement,
+  onBlur: onBlurProp,
+  onKeyDown: onKeyDownProp,
+  onClick: onClickProp,
+  onFocus: onFocusProp,
+  onMouseDown: onMouseDownProp,
+  onMouseEnter: onMouseEnterProp,
+  onMouseLeave: onMouseLeaveProp,
+  onContextMenu: onContextMenuProp,
+  onDialogDidShow = NOOP,
+  onDialogDidHide = NOOP,
+  onClickOutside: onClickOutsideProp = NOOP,
+  onContentClick: onContentClickProp = NOOP,
+  hideWhenReferenceHidden = false,
+  shouldCallbackOnMount = false,
+  observeContentResize = false,
+  enableNestedDialogLayer = true
+}: DialogProps) {
+  const [isOpenState, setIsOpenState] = useState(shouldShowOnMount);
+  const [preventAnimation, setPreventAnimation] = useState(false);
+  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);
+
+  const showTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const hideTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const arrowRef = useRef<HTMLDivElement>(null);
+
+  // Check if children are valid React elements (Refable returns null for non-elements)
+  const hasValidChildren = React.Children.toArray(children).some(child => React.isValidElement(child));
+
+  const { layerRef } = useContext(LayerContext);
+
+  // Derived state
+  const isOpenInternal = useDerivedStateFromProps ? isOpenProp : isOpenState;
+  const isShown = isOpenInternal || open;
+
+  // Build middleware array for Floating UI
+  const floatingMiddleware = useMemo<Middleware[]>(() => {
+    const middlewareList: Middleware[] = [];
+
+    // Get user-provided middleware (filter out invalid ones)
+    const validMiddleware = middlewareProp.filter(
+      (m): m is Middleware => m != null && typeof m === "object" && typeof m.fn === "function"
+    );
 
-  showDialogIfNeeded(event: DialogEvent, eventName: DialogTriggerEvent | string, options = {}) {
-    const { disable } = this.props;
-    if (disable) {
-      return;
-    }
+    // Check if user provided their own middleware to override defaults
+    const hasCustomOffset = validMiddleware.some(m => m.name === "offset");
+    const hasCustomFlip = validMiddleware.some(m => m.name === "flip");
+    const hasCustomShift = validMiddleware.some(m => m.name === "shift");
 
-    if (this.hideTimeout) {
-      clearTimeout(this.hideTimeout);
-      this.hideTimeout = null;
+    // Offset middleware - skip if user provided their own
+    if (!hasCustomOffset && (moveBy.main !== 0 || moveBy.secondary !== 0)) {
+      middlewareList.push(offset({ mainAxis: moveBy.main || 0, crossAxis: moveBy.secondary || 0 }));
     }
 
-    if (!this.showTimeout) {
-      this.showDialog(event, eventName, options);
+    // Core positioning middleware - skip if user provided their own
+    if (!hasCustomFlip) {
+      middlewareList.push(flip());
     }
-  }
-
-  hideDialog(event: DialogEvent, eventName: DialogTriggerEvent | string) {
-    const { hideDelay, instantShowAndHide } = this.props;
-    if (instantShowAndHide) {
-      this.onHideDialog(event, eventName);
-      this.setState({ isOpen: false });
-      this.hideTimeout = null;
-    } else {
-      this.hideTimeout = setTimeout(() => {
-        this.onHideDialog(event, eventName);
-        this.setState({ isOpen: false });
-        this.hideTimeout = null;
-      }, hideDelay);
+    if (!hasCustomShift) {
+      middlewareList.push(shift());
     }
-  }
 
-  onHideDialog(event: DialogEvent, eventName: DialogTriggerEvent | string) {
-    const { onDialogDidHide } = this.props;
-    if (onDialogDidHide) onDialogDidHide(event, eventName);
-  }
-
-  hideDialogIfNeeded(event: DialogEvent, eventName: DialogTriggerEvent | string) {
-    if (this.showTimeout) {
-      clearTimeout(this.showTimeout);
-      this.showTimeout = null;
-    }
+    // Add user-provided middleware
+    middlewareList.push(...validMiddleware);
 
-    if (this.hideTimeout) {
-      return;
+    // Arrow middleware - pass ref directly, Floating UI handles null refs
+    if (tooltip) {
+      middlewareList.push(arrowMiddleware({ element: arrowRef }));
     }
-    this.hideDialog(event, eventName);
-  }
 
-  handleEvent(eventName: DialogTriggerEvent, target: EventTarget, event: DialogEvent) {
-    const { showTriggerIgnoreClass, hideTriggerIgnoreClass } = this.props;
-    if (
-      this.isShowTrigger(eventName) &&
-      !this.isShown() &&
-      !isInsideClass(target as HTMLElement, showTriggerIgnoreClass)
-    ) {
-      return this.showDialogIfNeeded(event, eventName);
+    // Hide middleware for detecting when reference is hidden
+    if (hideWhenReferenceHidden) {
+      middlewareList.push(hide());
     }
 
-    if (this.isHideTrigger(eventName) && !isInsideClass(target as HTMLElement, hideTriggerIgnoreClass)) {
-      return this.hideDialogIfNeeded(event, eventName);
+    return middlewareList;
+  }, [moveBy.main, moveBy.secondary, tooltip, hideWhenReferenceHidden, middlewareProp]);
+
+  // Configure autoUpdate for position tracking
+  const whileElementsMounted = useCallback(
+    (reference: HTMLElement, floating: HTMLElement, update: () => void) => {
+      return autoUpdate(reference, floating, update, {
+        elementResize: observeContentResize,
+        layoutShift: false
+      });
+    },
+    [observeContentResize]
+  );
+
+  // Use Floating UI hook
+  const { refs, floatingStyles, placement, middlewareData } = useFloating({
+    placement: position as Placement,
+    middleware: floatingMiddleware,
+    whileElementsMounted,
+    elements: {
+      reference: referenceElement
     }
-  }
-
-  isShown() {
-    const { isOpen } = this.state;
-    const { open } = this.props;
-
-    return isOpen || open;
-  }
+  });
 
-  isShowTrigger(eventName: DialogTriggerEvent) {
-    const { showTrigger, addKeyboardHideShowTriggersByDefault } = this.props;
-    const showTriggersArray = convertToArray(showTrigger);
+  // Check if reference is hidden (from hide middleware)
+  const isReferenceHidden = middlewareData.hide?.referenceHidden ?? false;
 
-    if (addKeyboardHideShowTriggersByDefault) {
-      if (eventName === "focus" && showTriggersArray.indexOf("mouseenter") > -1) {
+  const isShowTrigger = useCallback(
+    (eventName: DialogTriggerEvent) => {
+      const showTriggersArray = convertToArray(showTrigger);
+      if (addKeyboardHideShowTriggersByDefault && eventName === "focus" && showTriggersArray.includes("mouseenter")) {
         return true;
       }
-    }
-
-    return showTriggersArray.indexOf(eventName) > -1;
-  }
-
-  isHideTrigger(eventName: DialogTriggerEvent) {
-    const { hideTrigger, addKeyboardHideShowTriggersByDefault } = this.props;
-    const hideTriggersArray = convertToArray(hideTrigger);
-
-    if (addKeyboardHideShowTriggersByDefault) {
-      if (eventName === "blur" && hideTriggersArray.indexOf("mouseleave") > -1) {
+      return showTriggersArray.includes(eventName);
+    },
+    [showTrigger, addKeyboardHideShowTriggersByDefault]
+  );
+
+  const isHideTrigger = useCallback(
+    (eventName: DialogTriggerEvent) => {
+      const hideTriggersArray = convertToArray(hideTrigger);
+      if (addKeyboardHideShowTriggersByDefault && eventName === "blur" && hideTriggersArray.includes("mouseleave")) {
         return true;
       }
-    }
+      return hideTriggersArray.includes(eventName);
+    },
+    [hideTrigger, addKeyboardHideShowTriggersByDefault]
+  );
+
+  const showDialog = useCallback(
+    (event: DialogEvent, eventName: DialogTriggerEvent | string, options: { preventAnimation?: boolean } = {}) => {
+      let finalShowDelay = showDelay;
+      let preventAnimationValue = options.preventAnimation;
+      if (getDynamicShowDelay) {
+        const dynamicDelayObj = getDynamicShowDelay();
+        finalShowDelay = dynamicDelayObj.showDelay || 0;
+        preventAnimationValue = preventAnimationValue ?? dynamicDelayObj.preventAnimation;
+      }
 
-    return hideTriggersArray.indexOf(eventName) > -1;
-  }
+      if (instantShowAndHide) {
+        onDialogDidShow(event, eventName);
+        setIsOpenState(true);
+        setPreventAnimation(!!preventAnimationValue);
+        showTimeoutRef.current = null;
+      } else {
+        showTimeoutRef.current = setTimeout(() => {
+          onDialogDidShow(event, eventName);
+          showTimeoutRef.current = null;
+          setIsOpenState(true);
+          setPreventAnimation(!!preventAnimationValue);
+        }, finalShowDelay);
+      }
+    },
+    [showDelay, getDynamicShowDelay, instantShowAndHide, onDialogDidShow]
+  );
+
+  const hideDialog = useCallback(
+    (event: DialogEvent, eventName: DialogTriggerEvent | string) => {
+      if (instantShowAndHide) {
+        onDialogDidHide(event, eventName);
+        setIsOpenState(false);
+        hideTimeoutRef.current = null;
+      } else {
+        hideTimeoutRef.current = setTimeout(() => {
+          onDialogDidHide(event, eventName);
+          setIsOpenState(false);
+          hideTimeoutRef.current = null;
+        }, hideDelay);
+      }
+    },
+    [hideDelay, instantShowAndHide, onDialogDidHide]
+  );
+
+  const showDialogIfNeeded = useCallback(
+    (event: DialogEvent, eventName: DialogTriggerEvent | string, options = {}) => {
+      if (disable) {
+        return;
+      }
 
-  onMouseEnter(e: React.MouseEvent) {
-    this.handleEvent("mouseenter", e.target, e);
-  }
+      if (hideTimeoutRef.current) {
+        clearTimeout(hideTimeoutRef.current);
+        hideTimeoutRef.current = null;
+      }
 
-  onMouseLeave(e: React.MouseEvent) {
-    this.handleEvent("mouseleave", e.target, e);
-  }
+      if (!showTimeoutRef.current) {
+        showDialog(event, eventName, options);
+      }
+    },
+    [disable, showDialog]
+  );
+
+  const hideDialogIfNeeded = useCallback(
+    (event: DialogEvent, eventName: DialogTriggerEvent | string) => {
+      if (showTimeoutRef.current) {
+        clearTimeout(showTimeoutRef.current);
+        showTimeoutRef.current = null;
+      }
 
-  onClick(e: React.MouseEvent) {
-    if (e.button) return;
-    this.handleEvent("click", e.target, e);
-  }
+      if (!hideTimeoutRef.current) {
+        hideDialog(event, eventName);
+      }
+    },
+    [hideDialog]
+  );
+
+  // Event handling
+  const handleEvent = useCallback(
+    (eventName: DialogTriggerEvent, target: EventTarget | null, event: DialogEvent) => {
+      if (!target) return; // Guard against null targets (e.g., when focus leaves the document)
+      if (isShowTrigger(eventName) && !isShown && !isInsideClass(target as HTMLElement, showTriggerIgnoreClass)) {
+        return showDialogIfNeeded(event, eventName);
+      }
 
-  onKeyDown(event: React.KeyboardEvent) {
-    if (event.key === "Enter") {
-      this.handleEvent("enter", event.target, event);
+      if (isHideTrigger(eventName) && !isInsideClass(target as HTMLElement, hideTriggerIgnoreClass)) {
+        return hideDialogIfNeeded(event, eventName);
+      }
+    },
+    [
+      isShowTrigger,
+      isHideTrigger,
+      isShown,
+      showTriggerIgnoreClass,
+      hideTriggerIgnoreClass,
+      showDialogIfNeeded,
+      hideDialogIfNeeded
+    ]
+  );
+
+  const getContainer = useCallback(() => {
+    if (containerSelector) {
+      const containerElement = document.querySelector(containerSelector);
+      if (containerElement instanceof Element) {
+        return containerElement;
+      }
     }
+    return layerRef?.current || document.body;
+  }, [containerSelector, layerRef]);
+
+  // Memoized event handlers to prevent unnecessary re-renders
+  const onMouseEnter = useCallback((e: React.MouseEvent) => handleEvent("mouseenter", e.target, e), [handleEvent]);
+  const onMouseLeave = useCallback((e: React.MouseEvent) => handleEvent("mouseleave", e.target, e), [handleEvent]);
+  const onClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (e.button) return;
+      handleEvent("click", e.target, e);
+    },
+    [handleEvent]
+  );
+  const onKeyDown = useCallback(
+    (event: React.KeyboardEvent) => {
+      // Handle element-level keyboard events for triggers
+      if (event.key === "Enter") handleEvent("enter", event.target, event);
+      if (event.key === "Tab") handleEvent("tab", event.target, event);
+    },
+    [handleEvent]
+  );
+
+  const onMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      if (e.button) return;
+      handleEvent("mousedown", e.target, e);
+    },
+    [handleEvent]
+  );
+  const onFocus = useCallback((e: React.FocusEvent) => handleEvent("focus", e.target, e), [handleEvent]);
+  const onBlur = useCallback(
+    (e: React.FocusEvent) => {
+      const target = e.relatedTarget || e.target;
+      handleEvent("blur", target, e);
+    },
+    [handleEvent]
+  );
+  const onEsc = useCallback((e: React.KeyboardEvent) => handleEvent("esckey", e.target, e), [handleEvent]);
+  const onContextMenu = useCallback(
+    (e: React.MouseEvent) => {
+      if ((isShowTrigger("contextmenu") && !isShown) || (isHideTrigger("contextmenu") && isShown)) {
+        e.preventDefault();
+      }
+      handleEvent("contextmenu", e.target, e);
+    },
+    [isShown, isShowTrigger, isHideTrigger, handleEvent]
+  );
+
+  const onClickOutside = useCallback(
+    (event: React.MouseEvent) => {
+      handleEvent("clickoutside", event.target, event);
+      onClickOutsideProp(event);
+    },
+    [handleEvent, onClickOutsideProp]
+  );
+
+  const onDialogEnter = useCallback(
+    (event: React.MouseEvent) => {
+      if (showOnDialogEnter) showDialogIfNeeded(event, "DialogEnter");
+    },
+    [showOnDialogEnter, showDialogIfNeeded]
+  );
+
+  const onDialogLeave = useCallback(
+    (event: React.MouseEvent) => {
+      if (showOnDialogEnter) hideDialogIfNeeded(event, "DialogLeave");
+    },
+    [showOnDialogEnter, hideDialogIfNeeded]
+  );
+
+  const onContentClick = useCallback(
+    (e: React.MouseEvent) => {
+      handleEvent("onContentClick", e.target, e);
+      onContentClickProp(e);
+    },
+    [handleEvent, onContentClickProp]
+  );
+
+  // Memoized chained event handlers to prevent Refable children re-renders
+  const chainedOnBlur = useMemo(() => chainFunctions([onBlurProp, onBlur], true), [onBlurProp, onBlur]);
+  const chainedOnKeyDown = useMemo(() => chainFunctions([onKeyDownProp, onKeyDown], true), [onKeyDownProp, onKeyDown]);
+  const chainedOnClick = useMemo(() => chainFunctions([onClickProp, onClick], true), [onClickProp, onClick]);
+  const chainedOnFocus = useMemo(() => chainFunctions([onFocusProp, onFocus], true), [onFocusProp, onFocus]);
+  const chainedOnMouseDown = useMemo(
+    () => chainFunctions([onMouseDownProp, onMouseDown], true),
+    [onMouseDownProp, onMouseDown]
+  );
+  const chainedOnMouseEnter = useMemo(
+    () => chainFunctions([onMouseEnterProp, onMouseEnter], true),
+    [onMouseEnterProp, onMouseEnter]
+  );
+  const chainedOnMouseLeave = useMemo(
+    () => chainFunctions([onMouseLeaveProp, onMouseLeave], true),
+    [onMouseLeaveProp, onMouseLeave]
+  );
+  const chainedOnContextMenu = useMemo(
+    () => chainFunctions([onContextMenuProp, onContextMenu], true),
+    [onContextMenuProp, onContextMenu]
+  );
+
+  // Document-level keyboard handler using stable ref pattern
+  // Must handle Escape, Tab, and Enter at document level to match old behavior
+  const closeDialogOnEscapeRef = useRef<(event: KeyboardEvent) => void>();
+  closeDialogOnEscapeRef.current = (event: KeyboardEvent) => {
+    if (!isShown) return;
 
-    if (event.key === "Tab") {
-      this.handleEvent("tab", event.target, event);
+    switch (event.key) {
+      case "Escape":
+        hideDialogIfNeeded(event, "esckey");
+        break;
+      case "Tab":
+        handleEvent("tab", event.target, event);
+        break;
+      case "Enter":
+        handleEvent("enter", event.target, event);
+        break;
     }
-  }
-
-  onMouseDown(e: React.MouseEvent) {
-    if (e.button) return;
-    this.handleEvent("mousedown", e.target, e);
-  }
-
-  onFocus(e: React.FocusEvent) {
-    this.handleEvent("focus", e.target, e);
-  }
-
-  onBlur(e: React.FocusEvent) {
-    this.handleEvent("blur", e.relatedTarget, e);
-  }
+  };
 
-  onEsc(e: React.KeyboardEvent) {
-    this.handleEvent("esckey", e.target, e);
-  }
+  // Effects
 
-  onContextMenu(e: React.MouseEvent) {
-    const isShown = this.isShown();
-    if ((this.isShowTrigger("contextmenu") && !isShown) || (this.isHideTrigger("contextmenu") && isShown)) {
-      e.preventDefault();
+  // Callback on mount
+  useEffect(() => {
+    if (shouldCallbackOnMount && shouldShowOnMount) {
+      onDialogDidShow();
     }
-    this.handleEvent("contextmenu", e.target, e);
-  }
-
-  onClickOutside(event: React.MouseEvent) {
-    const { onClickOutside } = this.props;
-    this.handleEvent("clickoutside", event.target, event);
-    onClickOutside(event);
-  }
-
-  onDialogEnter(event: React.MouseEvent) {
-    const { showOnDialogEnter } = this.props;
-    if (showOnDialogEnter) this.showDialogIfNeeded(event, "DialogEnter");
-  }
-
-  onDialogLeave(event: React.MouseEvent) {
-    const { showOnDialogEnter } = this.props;
-    if (showOnDialogEnter) this.hideDialogIfNeeded(event, "DialogLeave");
-  }
-
-  onContentClick(e: React.MouseEvent) {
-    const { onContentClick } = this.props;
-    this.handleEvent("onContentClick", e.target, e);
-    onContentClick(e);
-  }
-
-  render() {
-    const {
-      wrapperClassName,
-      content,
-      startingEdge,
-      children,
-      preventAnimationOnMount,
-      animationType,
-      position,
-      showDelay,
-      moveBy,
-      modifiers,
-      tooltip,
-      tooltipClassName,
-      referenceWrapperClassName,
-      referenceWrapperElement,
-      zIndex,
-      hideWhenReferenceHidden,
-      disableContainerScroll,
-      containerSelector,
-      observeContentResize,
-      enableNestedDialogLayer,
-      id,
-      "data-testid": dataTestId
-    } = this.props;
-    const { preventAnimation } = this.state;
-    const overrideDataTestId = dataTestId || getTestId(ComponentDefaultTestId.DIALOG, id);
-
-    const animationTypeCalculated = preventAnimationOnMount || preventAnimation ? undefined : animationType;
-    const contentRendered = isFunction(content) ? content() : content;
-
-    if (!contentRendered) {
-      return children;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Cleanup timeouts on unmount
+  useEffect(() => {
+    return () => {
+      if (showTimeoutRef.current) clearTimeout(showTimeoutRef.current);
+      if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current);
+    };
+  }, []);
+
+  // Document keyboard listener (stable reference via ref)
+  useEffect(() => {
+    if (!isClient()) return;
+
+    const handler = (event: KeyboardEvent) => closeDialogOnEscapeRef.current?.(event);
+    document.addEventListener("keyup", handler);
+    return () => document.removeEventListener("keyup", handler);
+  }, []);
+
+  // Handle reference hidden state
+  useEffect(() => {
+    if (hideWhenReferenceHidden && isReferenceHidden && isShown) {
+      const event = new CustomEvent("onReferenceHidden");
+      hideDialog(event, "onReferenceHidden");
     }
-    return (
-      <Manager>
-        <Reference>
-          {({ ref }) => {
-            return (
-              <Refable
-                className={cx(referenceWrapperClassName)}
-                wrapperElement={referenceWrapperElement}
-                ref={ref}
-                onBlur={chainOnPropsAndInstance("onBlur", this, this.props)}
-                onKeyDown={chainOnPropsAndInstance("onKeyDown", this, this.props)}
-                onClick={chainOnPropsAndInstance("onClick", this, this.props)}
-                onFocus={chainOnPropsAndInstance("onFocus", this, this.props)}
-                onMouseDown={chainOnPropsAndInstance("onMouseDown", this, this.props)}
-                onMouseEnter={chainOnPropsAndInstance("onMouseEnter", this, this.props)}
-                onMouseLeave={chainOnPropsAndInstance("onMouseLeave", this, this.props)}
-                onContextMenu={chainOnPropsAndInstance("onContextMenu", this, this.props)}
-              >
-                {children}
-              </Refable>
-            );
-          }}
-        </Reference>
-        {isClient() &&
-          createPortal(
-            <Popper
-              placement={position as unknown as PopperJS.Placement}
-              modifiers={[
-                {
-                  name: "offset",
-                  options: {
-                    offset: [moveBy.secondary, moveBy.main]
-                  }
-                },
-                {
-                  name: "zIndex",
-                  enabled: true,
-                  phase: "write",
-                  fn({ state }) {
-                    if (zIndex) {
-                      state.styles.popper.zIndex = String(zIndex);
-                    }
-                    return state;
-                  }
-                },
-                {
-                  name: "rotator",
-                  enabled: true,
-                  phase: "write",
-                  fn({ state }) {
-                    if (!state.styles.arrow) {
-                      return state;
-                    }
-                    // const reg = new RegExp(
-                    //   /translate\(([0-9].*)px, ([0-9].*)px\)/
-                    // );
-                    // const transform = state.styles.arrow.transform;
-                    // const res = reg.exec(transform);
-                    // state.styles.popper.transformOrigin = `${100 -
-                    //   res[1]}% ${100 - res[2]}%`;
-                    state.styles.arrow.transform = `${state.styles.arrow.transform} rotate(45deg)`;
-                    return state;
-                  }
-                },
-                createObserveContentResizeModifier(observeContentResize),
-                ...modifiers
-              ]}
-            >
-              {({ placement, style, ref, arrowProps, isReferenceHidden }) => {
-                if (!this.isShown() && placement) {
-                  return null;
-                }
-
-                if (hideWhenReferenceHidden && isReferenceHidden) {
-                  const event = new CustomEvent("onReferenceHidden");
-                  this.hideDialog(event, "onReferenceHidden");
-                }
-
-                const mergedRef = chainRefFunctions([ref, this.containerRef]);
-
-                const dialogContent = (
-                  <DialogContent
-                    data-testid={overrideDataTestId}
-                    isReferenceHidden={hideWhenReferenceHidden && isReferenceHidden}
-                    onMouseEnter={this.onDialogEnter}
-                    onMouseLeave={this.onDialogLeave}
-                    onClickOutside={this.onClickOutside}
-                    onContextMenu={this.onContextMenu}
-                    onEsc={this.onEsc}
-                    animationType={animationTypeCalculated}
-                    position={placement}
-                    wrapperClassName={wrapperClassName}
-                    startingEdge={startingEdge}
-                    isOpen={this.isShown()}
-                    showDelay={showDelay}
-                    styleObject={style}
-                    ref={mergedRef}
-                    onClick={this.onContentClick}
-                    hasTooltip={!!tooltip}
-                    containerSelector={containerSelector}
-                    disableContainerScroll={disableContainerScroll}
-                  >
-                    {contentRendered}
-                    {tooltip && (
-                      <div
-                        style={arrowProps.style}
-                        ref={arrowProps.ref}
-                        className={cx(styles.arrow, tooltipClassName)}
-                        data-placement={placement}
-                      />
-                    )}
-                  </DialogContent>
-                );
-
-                return enableNestedDialogLayer ? (
-                  <LayerProvider layerRef={this.containerRef}>{dialogContent}</LayerProvider>
-                ) : (
-                  dialogContent
-                );
-              }}
-            </Popper>,
-            this.getContainer()
-          )}
-      </Manager>
-    );
+  }, [hideWhenReferenceHidden, isReferenceHidden, isShown, hideDialog]);
+
+  // Computed values
+  const overrideDataTestId = dataTestId || getTestId(ComponentDefaultTestId.DIALOG, id);
+
+  const arrowStyles = useMemo<React.CSSProperties>(() => {
+    if (!middlewareData.arrow) return {};
+    const { x, y } = middlewareData.arrow;
+    return {
+      left: x != null ? `${x}px` : "",
+      top: y != null ? `${y}px` : "",
+      transform: "rotate(45deg)"
+    };
+  }, [middlewareData.arrow]);
+
+  // Skip Floating UI positioning when no children (e.g. floating Tipseen) — let CSS handle it
+  const finalFloatingStyles = useMemo<React.CSSProperties>(
+    () =>
+      hasValidChildren
+        ? { ...floatingStyles, ...(zIndex !== undefined && { zIndex }) }
+        : { ...(zIndex !== undefined && { zIndex }) },
+    [floatingStyles, zIndex, hasValidChildren]
+  );
+
+  const animationTypeCalculated = preventAnimationOnMount || preventAnimation ? undefined : animationType;
+  const contentRendered = isFunction(content) ? content() : content;
+
+  // Early return if no content - wrap in fragment for type safety
+  if (!contentRendered) {
+    return <>{children}</>;
   }
-}
 
-function chainOnPropsAndInstance(name: string, instance: Dialog, props: DialogProps) {
-  // @ts-ignore
-  return chainFunctions([props[name], instance[name]], true);
+  const mergedFloatingRef = chainRefFunctions([refs.setFloating, containerRef]);
+
+  const dialogContent = (
+    <DialogContent
+      data-testid={overrideDataTestId}
+      isReferenceHidden={hideWhenReferenceHidden && isReferenceHidden}
+      onMouseEnter={onDialogEnter}
+      onMouseLeave={onDialogLeave}
+      onClickOutside={onClickOutside}
+      onContextMenu={onContextMenu}
+      onEsc={onEsc}
+      animationType={animationTypeCalculated}
+      position={placement}
+      wrapperClassName={wrapperClassName}
+      startingEdge={startingEdge}
+      isOpen={isShown}
+      showDelay={showDelay}
+      styleObject={finalFloatingStyles}
+      ref={mergedFloatingRef}
+      onClick={onContentClick}
+      hasTooltip={!!tooltip}
+      containerSelector={containerSelector}
+      disableContainerScroll={disableContainerScroll}
+    >
+      {contentRendered}
+      {tooltip && (
+        <div
+          style={arrowStyles}
+          ref={arrowRef}
+          className={cx(styles.arrow, tooltipClassName)}
+          data-placement={placement}
+        />
+      )}
+    </DialogContent>
+  );
+
+  return (
+    <>
+      <Refable
+        className={cx(referenceWrapperClassName)}
+        wrapperElement={referenceWrapperElement}
+        ref={setReferenceElement}
+        onBlur={chainedOnBlur}
+        onKeyDown={chainedOnKeyDown}
+        onClick={chainedOnClick}
+        onFocus={chainedOnFocus}
+        onMouseDown={chainedOnMouseDown}
+        onMouseEnter={chainedOnMouseEnter}
+        onMouseLeave={chainedOnMouseLeave}
+        onContextMenu={chainedOnContextMenu}
+      >
+        {children}
+      </Refable>
+      {isClient() &&
+        isShown &&
+        createPortal(
+          enableNestedDialogLayer ? (
+            <LayerProvider layerRef={containerRef}>{dialogContent}</LayerProvider>
+          ) : (
+            dialogContent
+          ),
+          getContainer()
+        )}
+    </>
+  );
 }
 
-Dialog.contextType = LayerContext;
+export default Dialog;
diff --git a/packages/components/dialog/src/Dialog/Dialog.types.ts b/packages/components/dialog/src/Dialog/Dialog.types.ts
index af8a11c42c..9cc02e448c 100644
--- a/packages/components/dialog/src/Dialog/Dialog.types.ts
+++ b/packages/components/dialog/src/Dialog/Dialog.types.ts
@@ -1,3 +1,8 @@
+import type React from "react";
+import type { ReactElement } from "react";
+import type { VibeComponentProps } from "@vibe/shared";
+import type { Middleware, Placement } from "@floating-ui/react-dom";
+
 export type DialogType = "modal" | "popover";
 
 export type DialogSize = "none" | "small" | "medium" | "large";
@@ -32,9 +37,213 @@ export type DialogTriggerEvent =
 
 export type DialogAnimationType = "opacity-and-slide" | "expand";
 
+export type DialogStartingEdge = "top" | "bottom";
+
 export type DialogOffset = {
   main?: number;
   secondary?: number;
 };
 
 export type DialogEvent = React.MouseEvent | React.KeyboardEvent | KeyboardEvent | React.FocusEvent | CustomEvent;
+
+export type DialogMiddleware = Middleware;
+
+export type DialogPlacement = Placement;
+
+export interface DialogProps extends VibeComponentProps {
+  /**
+   * Event handler for blur events on the reference element.
+   */
+  onBlur?: (e: React.FocusEvent) => void;
+  /**
+   * Event handler for keydown events on the reference element.
+   */
+  onKeyDown?: (e: React.KeyboardEvent) => void;
+  /**
+   * Event handler for click events on the reference element.
+   */
+  onClick?: (e: React.MouseEvent) => void;
+  /**
+   * Event handler for focus events on the reference element.
+   */
+  onFocus?: (e: React.FocusEvent) => void;
+  /**
+   * Event handler for mousedown events on the reference element.
+   */
+  onMouseDown?: (e: React.MouseEvent) => void;
+  /**
+   * Event handler for mouseenter events on the reference element.
+   */
+  onMouseEnter?: (e: React.MouseEvent) => void;
+  /**
+   * Event handler for mouseleave events on the reference element.
+   */
+  onMouseLeave?: (e: React.MouseEvent) => void;
+  /**
+   * Event handler for contextmenu events on the reference element.
+   */
+  onContextMenu?: (e: React.MouseEvent) => void;
+  /**
+   * Class name applied to the reference wrapper element.
+   */
+  referenceWrapperClassName?: string;
+  /**
+   * The wrapper element type to use for React components. Defaults to "span".
+   */
+  referenceWrapperElement?: "span" | "div";
+  /**
+   * The placement of the dialog relative to the reference element.
+   */
+  position?: DialogPosition;
+  /**
+   * Custom Floating UI middleware for positioning logic.
+   * If you provide `offset`, `flip`, or `shift` middleware, the defaults will be skipped.
+   * Other middleware (like `size`, `inline`, `autoPlacement`) are added to the chain.
+   * @see https://floating-ui.com/docs/middleware
+   */
+  middleware?: DialogMiddleware[];
+  /**
+   * The starting edge of the dialog animation.
+   */
+  startingEdge?: DialogStartingEdge;
+  /**
+   * Offset values for positioning adjustments.
+   * `main` - distance from reference element
+   * `secondary` - cross-axis offset (skidding)
+   */
+  moveBy?: { main?: number; secondary?: number };
+  /**
+   * Delay in milliseconds before showing the dialog.
+   */
+  showDelay?: number;
+  /**
+   * Delay in milliseconds before hiding the dialog.
+   */
+  hideDelay?: number;
+  /**
+   * Events that trigger showing the dialog.
+   */
+  showTrigger?: DialogTriggerEvent | DialogTriggerEvent[];
+  /**
+   * Events that trigger hiding the dialog.
+   */
+  hideTrigger?: DialogTriggerEvent | DialogTriggerEvent[];
+  /**
+   * If true, keeps the dialog open when mouse enters it.
+   */
+  showOnDialogEnter?: boolean;
+  /**
+   * If true, shows the dialog when the component mounts.
+   */
+  shouldShowOnMount?: boolean;
+  /**
+   * If true, disables opening the dialog.
+   */
+  disable?: boolean;
+  /**
+   * Controls the open state of the dialog (controlled mode).
+   */
+  open?: boolean;
+  /**
+   * Controlled open state for derived state pattern.
+   */
+  isOpen?: boolean;
+  /**
+   * CSS class names that, when present on target, prevent showing the dialog.
+   */
+  showTriggerIgnoreClass?: string | string[];
+  /**
+   * CSS class names that, when present on target, prevent hiding the dialog.
+   */
+  hideTriggerIgnoreClass?: string | string[];
+  /**
+   * The animation type used for the dialog.
+   */
+  animationType?: DialogAnimationType;
+  /**
+   * Class name applied to the dialog content wrapper.
+   */
+  wrapperClassName?: string;
+  /**
+   * If true, prevents animation when mounting.
+   */
+  preventAnimationOnMount?: boolean;
+  /**
+   * CSS selector of the container where the dialog is portaled.
+   */
+  containerSelector?: string;
+  /**
+   * If true, renders with tooltip arrow styling.
+   */
+  tooltip?: boolean;
+  /**
+   * Class name applied to the tooltip arrow element.
+   */
+  tooltipClassName?: string;
+  /**
+   * Callback fired when the dialog is shown.
+   */
+  onDialogDidShow?: (event?: DialogEvent, eventName?: DialogTriggerEvent | string) => void;
+  /**
+   * Callback fired when the dialog is hidden.
+   */
+  onDialogDidHide?: (event: DialogEvent, eventName: DialogTriggerEvent | string) => void;
+  /**
+   * Callback fired when clicking outside the dialog.
+   */
+  onClickOutside?: (event: React.MouseEvent) => void;
+  /**
+   * Callback fired when clicking inside the dialog content.
+   */
+  onContentClick?: (event: React.MouseEvent) => void;
+  /**
+   * The z-index applied to the dialog.
+   */
+  zIndex?: number;
+  /**
+   * If true, uses derived state from props pattern.
+   */
+  useDerivedStateFromProps?: boolean;
+  /**
+   * If true, hides the dialog when the reference element scrolls out of view.
+   */
+  hideWhenReferenceHidden?: boolean;
+  /**
+   * If true, fires onDialogDidShow callback on mount.
+   */
+  shouldCallbackOnMount?: boolean;
+  /**
+   * If true, shows and hides the dialog without delay.
+   */
+  instantShowAndHide?: boolean;
+  /**
+   * Callback to dynamically adjust show delay and animation behavior.
+   */
+  getDynamicShowDelay?: () => { showDelay: number; preventAnimation: boolean };
+  /**
+   * The content displayed inside the dialog. Can be a render function.
+   */
+  content?: (() => JSX.Element) | JSX.Element;
+  /**
+   * The reference element(s) that the dialog is positioned relative to.
+   */
+  children?: ReactElement | ReactElement[] | string;
+  /**
+   * If true, keyboard focus/blur events behave like mouse enter/leave.
+   */
+  addKeyboardHideShowTriggersByDefault?: boolean;
+  /**
+   * If true or a selector string, disables scrolling in the container when open.
+   */
+  disableContainerScroll?: boolean | string;
+  /**
+   * If true, automatically updates position when content resizes.
+   */
+  observeContentResize?: boolean;
+  /**
+   * If true, provides a LayerProvider context for nested dialogs to render correctly.
+   * This is useful when you have components that use Dialog internally (like Dropdown)
+   * inside another Dialog, ensuring proper z-index stacking and click-outside behavior.
+   */
+  enableNestedDialogLayer?: boolean;
+}
diff --git a/packages/components/dialog/src/Dialog/DialogConstants.ts b/packages/components/dialog/src/Dialog/DialogConstants.ts
index 3ec1fce9bc..355311b60b 100644
--- a/packages/components/dialog/src/Dialog/DialogConstants.ts
+++ b/packages/components/dialog/src/Dialog/DialogConstants.ts
@@ -1,65 +1,3 @@
-/**
- * @deprecated
- */
-export enum HideShowEvent {
-  CLICK = "click",
-  CLICK_OUTSIDE = "clickoutside",
-  ESCAPE_KEY = "esckey",
-  TAB_KEY = "tab",
-  MOUSE_ENTER = "mouseenter",
-  MOUSE_LEAVE = "mouseleave",
-  ENTER = "enter",
-  MOUSE_DOWN = "mousedown",
-  FOCUS = "focus",
-  BLUR = "blur",
-  CONTENT_CLICK = "onContentClick",
-  CONTEXT_MENU = "contextmenu"
-}
-
-/**
- * @deprecated
- */
-export enum AnimationType {
-  OPACITY_AND_SLIDE = "opacity-and-slide",
-  EXPAND = "expand"
-}
-
-/**
- * @deprecated
- */
-export enum DialogType {
-  MODAL = "modal",
-  POPOVER = "popover"
-}
-
-/**
- * @deprecated
- */
-export enum DialogSize {
-  NONE = "none",
-  SMALL = "small",
-  MEDIUM = "medium",
-  LARGE = "large"
-}
-
-/**
- * @deprecated
- */
-export enum DialogPosition {
-  LEFT = "left",
-  LEFT_START = "left-start",
-  LEFT_END = "left-end",
-  RIGHT = "right",
-  RIGHT_START = "right-start",
-  RIGHT_END = "right-end",
-  TOP = "top",
-  TOP_START = "top-start",
-  TOP_END = "top-end",
-  BOTTOM = "bottom",
-  BOTTOM_START = "bottom-start",
-  BOTTOM_END = "bottom-end"
-}
-
 export enum DialogPlacement {
   RIGHT = "right",
   RIGHT_START = "right-start",
diff --git a/packages/components/dialog/src/Dialog/DialogContent/DialogContent.module.scss b/packages/components/dialog/src/Dialog/DialogContent/DialogContent.module.scss
deleted file mode 100644
index 2d7be3db69..0000000000
--- a/packages/components/dialog/src/Dialog/DialogContent/DialogContent.module.scss
+++ /dev/null
@@ -1,173 +0,0 @@
-@import "~monday-ui-style/dist/mixins";
-
-.contentWrapper {
-  outline: 0;
-
-  &.top,
-  &.right,
-  &.left,
-  &.bottom {
-    padding: var(--spacing-xs);
-  }
-  &.bottomStart,
-  &.topStart,
-  &.bottomEnd,
-  &.topEnd {
-    padding-block: var(--spacing-xs);
-  }
-  &.bottomStart,
-  &.topStart {
-    padding-inline-end: var(--spacing-xs);
-  }
-  &.bottomEnd,
-  &.topEnd {
-    padding-inline-start: var(--spacing-xs);
-  }
-  &.leftStart,
-  &.rightStart,
-  &.leftEnd,
-  &.rightEnd {
-    padding-inline: var(--spacing-xs);
-  }
-  &.leftStart,
-  &.rightStart {
-    padding-block-end: var(--spacing-xs);
-  }
-  &.leftEnd,
-  &.rightEnd {
-    padding-block-start: var(--spacing-xs);
-  }
-}
-
-.contentWrapper[data-popper-reference-hidden="true"] {
-  visibility: hidden;
-  pointer-events: none;
-}
-
-.contentComponent:focus {
-  outline: none;
-}
-
-.contentComponent.hasTooltip {
-  padding: 6px;
-}
-
-// Animations
-
-$translate-minus-px: calc(var(--spacing-medium) * -1);
-
-.opacitySlideAppear {
-  opacity: 0;
-
-  &.top {
-    transform: translateY(var(--spacing-medium));
-  }
-
-  &.right {
-    transform: translateX($translate-minus-px);
-  }
-
-  &.bottom {
-    transform: translateY($translate-minus-px);
-  }
-
-  &.left {
-    transform: translateX(var(--spacing-medium));
-  }
-}
-
-.opacitySlideAppearActive {
-  transition: opacity 0.2s ease, transform 0.2s ease-out;
-  opacity: 1;
-  pointer-events: none;
-
-  &.top,
-  &.bottom {
-    transform: translateY(0);
-  }
-
-  &.right,
-  &.left {
-    transform: translateX(0);
-  }
-}
-
-.expandAppear,
-.expandExit {
-  transition: transform 0.1s $expand-animation-timing;
-  &.top,
-  &.topStart,
-  &.topEnd {
-    transform-origin: bottom center;
-    transform: scale(0.8);
-    &.edgeBottom {
-      transform-origin: bottom left;
-    }
-    &.edgeTop {
-      transform-origin: bottom right;
-    }
-  }
-
-  &.right,
-  &.rightStart,
-  &.rightEnd {
-    transform-origin: left;
-    transform: scale(0.8);
-    &.edgeBottom {
-      transform-origin: top left;
-    }
-    &.edgeTop {
-      transform-origin: bottom left;
-    }
-  }
-
-  &.bottom,
-  &.bottomStart,
-  &.bottomEnd {
-    transform-origin: top;
-    transform: scale(0.8);
-    &.edgeBottom {
-      transform-origin: top left;
-    }
-    &.edgeTop {
-      transform-origin: top right;
-    }
-  }
-
-  &.left,
-  &.leftStart,
-  &.leftEnd {
-    transform-origin: right;
-    transform: scale(0.8);
-    &.edgeBottom {
-      transform-origin: top right;
-    }
-    &.edgeTop {
-      transform-origin: bottom right;
-    }
-  }
-}
-
-.expandExit {
-  transition: transform 0.1s $expand-animation-timing;
-}
-
-.expandAppearActive {
-  transition: transform 0.1s $expand-animation-timing;
-  pointer-events: none;
-
-  &.top,
-  &.topStart,
-  &.topEnd,
-  &.bottom,
-  &.bottomStart,
-  &.bottomEnd,
-  &.right,
-  &.rightStart,
-  &.rightEnd,
-  &.left,
-  &.leftStart,
-  &.leftEnd {
-    transform: scale(1);
-  }
-}
diff --git a/packages/components/dialog/src/Dialog/DialogContent/DialogContent.tsx b/packages/components/dialog/src/Dialog/DialogContent/DialogContent.tsx
deleted file mode 100644
index 6d03518c5c..0000000000
--- a/packages/components/dialog/src/Dialog/DialogContent/DialogContent.tsx
+++ /dev/null
@@ -1,225 +0,0 @@
-import React, {
-  cloneElement,
-  type CSSProperties,
-  forwardRef,
-  type ReactElement,
-  useCallback,
-  useEffect,
-  useRef
-} from "react";
-import cx from "classnames";
-import { camelCase } from "es-toolkit";
-import { CSSTransition } from "react-transition-group";
-import { type CSSTransitionProps } from "react-transition-group/CSSTransition";
-import { useClickOutside } from "@vibe/hooks";
-import {
-  chainFunctions,
-  NOOP,
-  useKeyEvent,
-  type VibeComponentProps,
-  keyCodes,
-  getStyle,
-  useMergeRef
-} from "@vibe/shared";
-import { type DialogAnimationType, type DialogTriggerEvent } from "../Dialog.types";
-import type * as PopperJS from "@popperjs/core";
-import styles from "./DialogContent.module.scss";
-import useDisableScroll from "./useDisableScroll";
-
-const EMPTY_OBJECT = {};
-const ESCAPE_KEYS = [keyCodes.ESCAPE];
-
-export interface DialogContentProps extends VibeComponentProps {
-  /**
-   * The content inside the dialog.
-   */
-  children?: ReactElement | ReactElement[];
-  /**
-   * The placement of the dialog relative to the reference element.
-   */
-  position?: PopperJS.Placement;
-  /**
-   * Class name applied to the dialog wrapper.
-   */
-  wrapperClassName?: string;
-  /**
-   * If true, the dialog is open.
-   */
-  isOpen?: boolean;
-  // TODO: [breaking] use type
-  /**
-   * The starting edge of the dialog.
-   */
-  startingEdge?: any;
-  /**
-   * The animation type used for showing/hiding the dialog.
-   */
-  animationType?: DialogAnimationType;
-  /**
-   * Callback fired when the Escape key is pressed.
-   */
-  onEsc?: (event: React.KeyboardEvent) => void;
-  /**
-   * Callback fired when the mouse enters the dialog.
-   */
-  onMouseEnter?: (event: React.MouseEvent) => void;
-  /**
-   * Callback fired when the mouse leaves the dialog.
-   */
-  onMouseLeave?: (event: React.MouseEvent) => void;
-  /**
-   * Callback fired when clicking outside the dialog.
-   */
-  onClickOutside?: (event: React.MouseEvent, hideShowEvent: DialogTriggerEvent) => void;
-  /**
-   * Callback fired when clicking inside the dialog.
-   */
-  onClick?: (event: React.MouseEvent) => void;
-  /**
-   * Delay before showing the dialog.
-   */
-  showDelay?: number;
-  /**
-   * Inline styles applied to the dialog.
-   */
-  styleObject?: CSSProperties;
-  /**
-   * If true, hides the reference element when the dialog is shown.
-   */
-  isReferenceHidden?: boolean;
-  /**
-   * If true, applies tooltip arrow to the dialog.
-   */
-  hasTooltip?: boolean;
-  /**
-   * The CSS selector of the container where the dialog should be rendered.
-   */
-  containerSelector?: string;
-  /**
-   * If true, disables scrolling in the container when the dialog is open.
-   */
-  disableContainerScroll?: boolean | string;
-  /**
-   * Callback fired when the context menu (right-click) event occurs outside the dialog.
-   */
-  onContextMenu?: (e: React.MouseEvent) => void;
-}
-
-const DialogContent = forwardRef(
-  (
-    {
-      onEsc = NOOP,
-      children,
-      position,
-      wrapperClassName,
-      isOpen = false,
-      startingEdge,
-      animationType = "expand",
-      onMouseEnter = NOOP,
-      onMouseLeave = NOOP,
-      onClickOutside = NOOP,
-      onClick = NOOP,
-      onContextMenu = NOOP,
-      showDelay,
-      styleObject = EMPTY_OBJECT,
-      isReferenceHidden,
-      hasTooltip = false,
-      containerSelector,
-      disableContainerScroll = false,
-      "data-testid": dataTestId
-    }: DialogContentProps,
-    forwardRef: React.ForwardedRef<HTMLElement>
-  ) => {
-    const contentRef = useRef<HTMLDivElement>(null);
-
-    const wrapperRef = useRef<HTMLSpanElement>(null);
-    const mergedWrapperRef = useMergeRef(forwardRef, wrapperRef);
-
-    const onOutSideClick = useCallback(
-      (event: React.MouseEvent) => {
-        if (isOpen) {
-          return onClickOutside(event, "clickoutside");
-        }
-      },
-      [isOpen, onClickOutside]
-    );
-    const overrideOnContextMenu = useCallback(
-      (event: React.MouseEvent) => {
-        if (isOpen) {
-          onContextMenu(event);
-        }
-      },
-      [isOpen, onContextMenu]
-    );
-    useKeyEvent({ keys: ESCAPE_KEYS, callback: onEsc });
-    // Watch the wrapper ref to include padding area, tooltip arrows, and nested Dialogs
-    useClickOutside({ callback: onOutSideClick, ref: wrapperRef });
-    useClickOutside({ eventName: "contextmenu", callback: overrideOnContextMenu, ref: wrapperRef });
-    const selectorToDisable = typeof disableContainerScroll === "string" ? disableContainerScroll : containerSelector;
-    const { disableScroll, enableScroll } = useDisableScroll(selectorToDisable);
-
-    useEffect(() => {
-      if (disableContainerScroll) {
-        if (isOpen) {
-          disableScroll();
-        } else {
-          enableScroll();
-        }
-      }
-    }, [disableContainerScroll, disableScroll, enableScroll, isOpen]);
-
-    const transitionOptions: Partial<CSSTransitionProps> = { classNames: undefined };
-
-    switch (animationType) {
-      case "expand":
-        transitionOptions.classNames = {
-          appear: styles.expandAppear,
-          appearActive: styles.expandAppearActive,
-          exit: styles.expandExit
-        };
-        break;
-      case "opacity-and-slide":
-        transitionOptions.classNames = {
-          appear: styles.opacitySlideAppear,
-          appearActive: styles.opacitySlideAppearActive
-        };
-        break;
-    }
-    return (
-      <span
-        // don't remove old classname - override from Monolith
-        className={cx("monday-style-dialog-content-wrapper", styles.contentWrapper, wrapperClassName)}
-        ref={mergedWrapperRef}
-        data-testid={dataTestId}
-        style={styleObject}
-        onClickCapture={onClick}
-        data-popper-reference-hidden={isReferenceHidden}
-      >
-        <CSSTransition
-          classNames={transitionOptions.classNames}
-          nodeRef={contentRef}
-          in={isOpen}
-          appear={!!animationType}
-          timeout={showDelay}
-        >
-          <div
-            className={cx(styles.contentComponent, getStyle(styles, camelCase(position)), {
-              [getStyle(styles, camelCase("edge-" + startingEdge))]: startingEdge,
-              [styles.hasTooltip]: hasTooltip
-            })}
-            ref={contentRef}
-          >
-            {React.Children.toArray(children).map((child: ReactElement) => {
-              return cloneElement(child, {
-                onMouseEnter: chainFunctions([child.props.onMouseEnter, onMouseEnter]),
-                onMouseLeave: chainFunctions([child.props.onMouseLeave, onMouseLeave])
-              });
-            })}
-          </div>
-        </CSSTransition>
-      </span>
-    );
-  }
-);
-
-export default DialogContent;
diff --git a/packages/components/dialog/src/Dialog/DialogContent/useDisableScroll.ts b/packages/components/dialog/src/Dialog/DialogContent/useDisableScroll.ts
deleted file mode 100644
index 572c892385..0000000000
--- a/packages/components/dialog/src/Dialog/DialogContent/useDisableScroll.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { useCallback, useEffect } from "react";
-
-const useDisableScroll = (scrollableQuerySelector: string) => {
-  const _disableScroll = useCallback((e: Event) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    return false;
-  }, []);
-
-  const disableScroll = useCallback(() => {
-    if (scrollableQuerySelector?.length > 0) {
-      document.querySelectorAll(scrollableQuerySelector).forEach((item: Element) => {
-        item.addEventListener("wheel", _disableScroll);
-      });
-    }
-  }, [_disableScroll, scrollableQuerySelector]);
-
-  const enableScroll = useCallback(() => {
-    if (scrollableQuerySelector?.length > 0) {
-      document.querySelectorAll(scrollableQuerySelector).forEach((item: Element) => {
-        item.removeEventListener("wheel", _disableScroll);
-      });
-    }
-  }, [_disableScroll, scrollableQuerySelector]);
-
-  useEffect(() => {
-    return enableScroll;
-  }, [enableScroll]);
-
-  return {
-    disableScroll,
-    enableScroll
-  };
-};
-
-export default useDisableScroll;
diff --git a/packages/components/dialog/src/Dialog/__tests__/Dialog.test.tsx b/packages/components/dialog/src/Dialog/__tests__/Dialog.test.tsx
index e8e38bb917..37e682c104 100644
--- a/packages/components/dialog/src/Dialog/__tests__/Dialog.test.tsx
+++ b/packages/components/dialog/src/Dialog/__tests__/Dialog.test.tsx
@@ -1,18 +1,27 @@
-import { vi, describe, it, expect } from "vitest";
+import { vi, describe, it, expect, beforeEach, afterEach } from "vitest";
 import React from "react";
 import userEvent from "@testing-library/user-event";
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor, within } from "@testing-library/react";
 import Dialog, { type DialogProps } from "../Dialog";
 
 function renderVisibleDialogOnMount(dialogProps: DialogProps) {
-  renderDialogOnMount({ ...dialogProps, shouldShowOnMount: true });
+  return renderDialogOnMount({ ...dialogProps, shouldShowOnMount: true });
 }
 
 function renderDialogOnMount(dialogProps: DialogProps) {
-  render(<Dialog {...dialogProps} />);
+  return render(<Dialog {...dialogProps} />);
 }
 
 describe("Dialog tests", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    vi.useRealTimers();
+  });
+
   describe("Callbacks", () => {
     it("should call onClickOutside callback when click outside", async () => {
       const onClickOutsideMock = vi.fn();
@@ -20,6 +29,7 @@ describe("Dialog tests", () => {
       userEvent.click(document.body);
       expect(onClickOutsideMock).toBeCalled();
     });
+
     it("should not call onClickOutside callback when clicking inside the dialog", async () => {
       const onClickOutsideMock = vi.fn();
       renderVisibleDialogOnMount({ onClickOutside: onClickOutsideMock, content: <div>Dialog</div> });
@@ -27,5 +37,436 @@ describe("Dialog tests", () => {
       userEvent.click(dialog);
       expect(onClickOutsideMock).not.toBeCalled();
     });
+
+    it("should call onDialogDidShow callback when dialog is shown", async () => {
+      const onDialogDidShowMock = vi.fn();
+      renderVisibleDialogOnMount({
+        onDialogDidShow: onDialogDidShowMock,
+        content: <div>Dialog</div>,
+        shouldCallbackOnMount: true
+      });
+      vi.runAllTimers();
+      expect(onDialogDidShowMock).toBeCalled();
+    });
+
+    it("should call onDialogDidHide callback when dialog is hidden", async () => {
+      const onDialogDidHideMock = vi.fn();
+      const { container } = render(
+        <Dialog
+          shouldShowOnMount
+          onDialogDidHide={onDialogDidHideMock}
+          content={<div>Dialog</div>}
+          showTrigger={["click"]}
+          hideTrigger={["click"]}
+        >
+          <button type="button">Toggle</button>
+        </Dialog>
+      );
+      vi.runAllTimers();
+
+      const button = within(container).getByText("Toggle");
+      await userEvent.click(button);
+      vi.runAllTimers();
+      await waitFor(() => expect(onDialogDidHideMock).toBeCalled());
+    });
+
+    it("should call onContentClick callback when clicking inside dialog", async () => {
+      const onContentClickMock = vi.fn();
+      renderVisibleDialogOnMount({ onContentClick: onContentClickMock, content: <div>Dialog Content</div> });
+      const dialog = await screen.findByText("Dialog Content");
+      await userEvent.click(dialog);
+      expect(onContentClickMock).toBeCalled();
+    });
+  });
+
+  describe("Show/Hide Triggers", () => {
+    it("should show dialog on click when showTrigger is click", async () => {
+      const { container } = render(
+        <Dialog showTrigger={["click"]} content={<div>Dialog Content</div>}>
+          <button type="button">Click Me</button>
+        </Dialog>
+      );
+
+      expect(screen.queryByText("Dialog Content")).not.toBeInTheDocument();
+
+      const button = within(container).getByText("Click Me");
+      await userEvent.click(button);
+      vi.runAllTimers();
+
+      await waitFor(() => expect(screen.getByText("Dialog Content")).toBeInTheDocument());
+    });
+
+    it("should show dialog on mouseenter when showTrigger is mouseenter", async () => {
+      const { container } = render(
+        <Dialog showTrigger={["mouseenter"]} hideTrigger={["mouseleave"]} content={<div>Hover Content</div>}>
+          <div>Hover Me</div>
+        </Dialog>
+      );
+
+      expect(screen.queryByText("Hover Content")).not.toBeInTheDocument();
+
+      const trigger = within(container).getByText("Hover Me");
+      await userEvent.hover(trigger);
+      vi.runAllTimers();
+
+      await waitFor(() => expect(screen.getByText("Hover Content")).toBeInTheDocument());
+    });
+
+    it("should show dialog on focus when showTrigger is focus", async () => {
+      const { container } = render(
+        <Dialog showTrigger={["focus"]} hideTrigger={["blur"]} content={<div>Focus Content</div>}>
+          <input placeholder="Focus Me" />
+        </Dialog>
+      );
+
+      expect(screen.queryByText("Focus Content")).not.toBeInTheDocument();
+
+      const input = within(container).getByPlaceholderText("Focus Me");
+      input.focus();
+      vi.runAllTimers();
+
+      await waitFor(() => expect(screen.getByText("Focus Content")).toBeInTheDocument());
+    });
+
+    it("should hide dialog on mouseleave when hideTrigger is mouseleave", async () => {
+      const { container } = render(
+        <Dialog
+          shouldShowOnMount
+          showTrigger={["mouseenter"]}
+          hideTrigger={["mouseleave"]}
+          content={<div>Hover Content</div>}
+        >
+          <div>Hover Me</div>
+        </Dialog>
+      );
+      vi.runAllTimers();
+
+      await waitFor(() => expect(screen.getByText("Hover Content")).toBeInTheDocument());
+
+      const trigger = within(container).getByText("Hover Me");
+      await userEvent.unhover(trigger);
+      vi.runAllTimers();
+
+      await waitFor(() => expect(screen.queryByText("Hover Content")).not.toBeInTheDocument());
+    });
+
+    it("should hide dialog on blur when hideTrigger is blur", async () => {
+      const onDialogDidHideMock = vi.fn();
+      const { container } = render(
+        <Dialog
+          shouldShowOnMount
+          showTrigger={["focus"]}
+          hideTrigger={["blur"]}
+          onDialogDidHide={onDialogDidHideMock}
+          instantShowAndHide={true}
+          content={<div>Focus Content</div>}
+        >
+          <input placeholder="Focus Me" />
+        </Dialog>
+      );
+
+      await waitFor(() => expect(screen.getByText("Focus Content")).toBeInTheDocument());
+
+      const input = within(container).getByPlaceholderText("Focus Me");
+      input.focus();
+
+      // Trigger blur by focusing something else
+      await userEvent.tab();
+
+      await waitFor(() => expect(onDialogDidHideMock).toBeCalled());
+    });
+  });
+
+  describe("Keyboard Interactions", () => {
+    it("should hide dialog on Escape key when hideTrigger includes esckey", async () => {
+      render(
+        <Dialog shouldShowOnMount showTrigger={["click"]} hideTrigger={["esckey"]} content={<div>Press Escape</div>}>
+          <button type="button">Toggle</button>
+        </Dialog>
+      );
+      vi.runAllTimers();
+
+      await waitFor(() => expect(screen.getByText("Press Escape")).toBeInTheDocument());
+
+      await userEvent.keyboard("{Escape}");
+      vi.runAllTimers();
+
+      await waitFor(() => expect(screen.queryByText("Press Escape")).not.toBeInTheDocument());
+    });
+
+    it("should trigger enter event on Enter key", async () => {
+      const onDialogDidHideMock = vi.fn();
+      const { container } = render(
+        <Dialog
+          shouldShowOnMount
+          showTrigger={["click"]}
+          hideTrigger={["enter"]}
+          onDialogDidHide={onDialogDidHideMock}
+          content={<div>Press Enter</div>}
+        >
+          <button type="button">Toggle</button>
+        </Dialog>
+      );
+      vi.runAllTimers();
+
+      await waitFor(() => expect(screen.getByText("Press Enter")).toBeInTheDocument());
+
+      const button = within(container).getByText("Toggle");
+      button.focus();
+      await userEvent.keyboard("{Enter}");
+      vi.runAllTimers();
+
+      await waitFor(() => expect(onDialogDidHideMock).toBeCalled());
+    });
+  });
+
+  describe("Delay Behavior", () => {
+    it("should respect showDelay when showing dialog", async () => {
+      const onDialogDidShowMock = vi.fn();
+      const { container } = render(
+        <Dialog
+          showDelay={500}
+          showTrigger={["click"]}
+          onDialogDidShow={onDialogDidShowMock}
+          content={<div>Delayed</div>}
+        >
+          <button type="button">Click</button>
+        </Dialog>
+      );
+
+      const button = within(container).getByText("Click");
+      await userEvent.click(button);
+
+      // Should not show immediately
+      expect(onDialogDidShowMock).not.toBeCalled();
+
+      // Advance timers by 500ms
+      vi.advanceTimersByTime(500);
+
+      await waitFor(() => expect(onDialogDidShowMock).toBeCalled());
+    });
+
+    it("should respect hideDelay when hiding dialog", async () => {
+      const onDialogDidHideMock = vi.fn();
+      const { container } = render(
+        <Dialog
+          shouldShowOnMount
+          hideDelay={300}
+          showTrigger={["click"]}
+          hideTrigger={["click"]}
+          onDialogDidHide={onDialogDidHideMock}
+          content={<div>Delayed Hide</div>}
+        >
+          <button type="button">Click</button>
+        </Dialog>
+      );
+      vi.runAllTimers();
+
+      const button = within(container).getByText("Click");
+      await userEvent.click(button);
+
+      // Should not hide immediately
+      expect(onDialogDidHideMock).not.toBeCalled();
+
+      // Advance timers by 300ms
+      vi.advanceTimersByTime(300);
+
+      await waitFor(() => expect(onDialogDidHideMock).toBeCalled());
+    });
+
+    it("should cancel show timeout when hiding is triggered", async () => {
+      const onDialogDidShowMock = vi.fn();
+      const { container } = render(
+        <Dialog
+          showDelay={500}
+          showTrigger={["mouseenter"]}
+          hideTrigger={["mouseleave"]}
+          onDialogDidShow={onDialogDidShowMock}
+          content={<div>Hover</div>}
+        >
+          <div>Hover Me</div>
+        </Dialog>
+      );
+
+      const trigger = within(container).getByText("Hover Me");
+
+      // Start hovering
+      await userEvent.hover(trigger);
+      vi.advanceTimersByTime(200);
+
+      // Stop hovering before showDelay completes
+      await userEvent.unhover(trigger);
+      vi.runAllTimers();
+
+      // Should not have shown
+      expect(onDialogDidShowMock).not.toBeCalled();
+    });
+  });
+
+  describe("Controlled Mode", () => {
+    it("should show dialog when open prop is true", async () => {
+      render(
+        <Dialog open={true} content={<div>Controlled Open</div>}>
+          <button type="button">Reference</button>
+        </Dialog>
+      );
+
+      await waitFor(() => expect(screen.getByText("Controlled Open")).toBeInTheDocument());
+    });
+
+    it("should hide dialog when open prop is false", async () => {
+      const { rerender } = render(
+        <Dialog open={true} content={<div>Controlled</div>}>
+          <button type="button">Reference</button>
+        </Dialog>
+      );
+
+      await waitFor(() => expect(screen.getByText("Controlled")).toBeInTheDocument());
+
+      rerender(
+        <Dialog open={false} content={<div>Controlled</div>}>
+          <button type="button">Reference</button>
+        </Dialog>
+      );
+
+      expect(screen.queryByText("Controlled")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("Positioning", () => {
+    it("should render dialog with top position", async () => {
+      renderVisibleDialogOnMount({
+        position: "top",
+        content: <div data-testid="dialog-content">Top Dialog</div>
+      });
+
+      const dialogContent = await screen.findByTestId("dialog-content");
+      expect(dialogContent).toBeInTheDocument();
+    });
+
+    it("should render dialog with bottom position", async () => {
+      renderVisibleDialogOnMount({ position: "bottom", content: <div>Bottom Dialog</div> });
+
+      await waitFor(() => expect(screen.getByText("Bottom Dialog")).toBeInTheDocument());
+    });
+
+    it("should render dialog with left position", async () => {
+      renderVisibleDialogOnMount({ position: "left", content: <div>Left Dialog</div> });
+
+      await waitFor(() => expect(screen.getByText("Left Dialog")).toBeInTheDocument());
+    });
+
+    it("should render dialog with right position", async () => {
+      renderVisibleDialogOnMount({ position: "right", content: <div>Right Dialog</div> });
+
+      await waitFor(() => expect(screen.getByText("Right Dialog")).toBeInTheDocument());
+    });
+  });
+
+  describe("Disable Prop", () => {
+    it("should not show dialog when disable is true", async () => {
+      const { container } = render(
+        <Dialog disable={true} showTrigger={["click"]} content={<div>Disabled Dialog</div>}>
+          <button type="button">Click</button>
+        </Dialog>
+      );
+
+      const button = within(container).getByText("Click");
+      await userEvent.click(button);
+      vi.runAllTimers();
+
+      expect(screen.queryByText("Disabled Dialog")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("Animation", () => {
+    it("should apply expand animation by default", async () => {
+      renderVisibleDialogOnMount({ content: <div>Animated</div> });
+      vi.runAllTimers();
+
+      await waitFor(() => expect(screen.getByText("Animated")).toBeInTheDocument());
+    });
+
+    it("should apply opacity-and-slide animation when specified", async () => {
+      renderVisibleDialogOnMount({ animationType: "opacity-and-slide", content: <div>Slide Animated</div> });
+      vi.runAllTimers();
+
+      await waitFor(() => expect(screen.getByText("Slide Animated")).toBeInTheDocument());
+    });
+
+    it("should prevent animation on mount when preventAnimationOnMount is true", async () => {
+      renderVisibleDialogOnMount({ preventAnimationOnMount: true, content: <div>No Animation</div> });
+      vi.runAllTimers();
+
+      await waitFor(() => expect(screen.getByText("No Animation")).toBeInTheDocument());
+    });
+  });
+
+  describe("Event Handler Chaining", () => {
+    it("should chain onClick handlers", async () => {
+      const dialogOnClickMock = vi.fn();
+      const childOnClickMock = vi.fn();
+
+      const { container } = render(
+        <Dialog showTrigger={["click"]} onClick={dialogOnClickMock} content={<div>Content</div>}>
+          <button type="button" onClick={childOnClickMock}>
+            Click Both
+          </button>
+        </Dialog>
+      );
+
+      const button = within(container).getByText("Click Both");
+      await userEvent.click(button);
+
+      expect(dialogOnClickMock).toBeCalled();
+      expect(childOnClickMock).toBeCalled();
+    });
+
+    it("should chain onMouseEnter handlers", async () => {
+      const dialogOnMouseEnterMock = vi.fn();
+      const childOnMouseEnterMock = vi.fn();
+
+      const { container } = render(
+        <Dialog showTrigger={["mouseenter"]} onMouseEnter={dialogOnMouseEnterMock} content={<div>Content</div>}>
+          <div onMouseEnter={childOnMouseEnterMock}>Hover</div>
+        </Dialog>
+      );
+
+      const trigger = within(container).getByText("Hover");
+      await userEvent.hover(trigger);
+
+      expect(dialogOnMouseEnterMock).toBeCalled();
+      expect(childOnMouseEnterMock).toBeCalled();
+    });
+  });
+
+  describe("Instant Show and Hide", () => {
+    it("should show and hide instantly when instantShowAndHide is true", async () => {
+      const onDialogDidShowMock = vi.fn();
+      const onDialogDidHideMock = vi.fn();
+
+      const { container } = render(
+        <Dialog
+          instantShowAndHide
+          showTrigger={["click"]}
+          hideTrigger={["click"]}
+          onDialogDidShow={onDialogDidShowMock}
+          onDialogDidHide={onDialogDidHideMock}
+          content={<div>Instant</div>}
+        >
+          <button type="button">Toggle</button>
+        </Dialog>
+      );
+
+      const button = within(container).getByText("Toggle");
+
+      // Show
+      await userEvent.click(button);
+      expect(onDialogDidShowMock).toBeCalled();
+
+      // Hide
+      await userEvent.click(button);
+      expect(onDialogDidHideMock).toBeCalled();
+    });
   });
 });
diff --git a/packages/core/src/components/next/Dialog/__tests__/useDisableScroll.test.ts b/packages/components/dialog/src/Dialog/__tests__/useDisableScroll.test.ts
similarity index 100%
rename from packages/core/src/components/next/Dialog/__tests__/useDisableScroll.test.ts
rename to packages/components/dialog/src/Dialog/__tests__/useDisableScroll.test.ts
diff --git a/packages/core/src/components/next/Dialog/components/DialogContent/DialogContent.module.scss b/packages/components/dialog/src/Dialog/components/DialogContent/DialogContent.module.scss
similarity index 98%
rename from packages/core/src/components/next/Dialog/components/DialogContent/DialogContent.module.scss
rename to packages/components/dialog/src/Dialog/components/DialogContent/DialogContent.module.scss
index 6cdaebfa23..9638037113 100644
--- a/packages/core/src/components/next/Dialog/components/DialogContent/DialogContent.module.scss
+++ b/packages/components/dialog/src/Dialog/components/DialogContent/DialogContent.module.scss
@@ -1,4 +1,4 @@
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 
 .contentWrapper {
   outline: 0;
diff --git a/packages/core/src/components/next/Dialog/components/DialogContent/DialogContent.tsx b/packages/components/dialog/src/Dialog/components/DialogContent/DialogContent.tsx
similarity index 100%
rename from packages/core/src/components/next/Dialog/components/DialogContent/DialogContent.tsx
rename to packages/components/dialog/src/Dialog/components/DialogContent/DialogContent.tsx
diff --git a/packages/core/src/components/next/Dialog/components/Refable/Refable.tsx b/packages/components/dialog/src/Dialog/components/Refable/Refable.tsx
similarity index 100%
rename from packages/core/src/components/next/Dialog/components/Refable/Refable.tsx
rename to packages/components/dialog/src/Dialog/components/Refable/Refable.tsx
diff --git a/packages/components/dialog/src/Refable/__tests__/Refable.test.tsx b/packages/components/dialog/src/Dialog/components/Refable/__tests__/Refable.test.tsx
similarity index 100%
rename from packages/components/dialog/src/Refable/__tests__/Refable.test.tsx
rename to packages/components/dialog/src/Dialog/components/Refable/__tests__/Refable.test.tsx
diff --git a/packages/core/src/components/next/Dialog/hooks/__tests__/useDisableScroll.test.ts b/packages/components/dialog/src/Dialog/hooks/__tests__/useDisableScroll.test.ts
similarity index 100%
rename from packages/core/src/components/next/Dialog/hooks/__tests__/useDisableScroll.test.ts
rename to packages/components/dialog/src/Dialog/hooks/__tests__/useDisableScroll.test.ts
diff --git a/packages/core/src/components/next/Dialog/hooks/useDisableScroll.ts b/packages/components/dialog/src/Dialog/hooks/useDisableScroll.ts
similarity index 100%
rename from packages/core/src/components/next/Dialog/hooks/useDisableScroll.ts
rename to packages/components/dialog/src/Dialog/hooks/useDisableScroll.ts
diff --git a/packages/components/dialog/src/Dialog/index.ts b/packages/components/dialog/src/Dialog/index.ts
index 1f273dc78c..c725fbef1d 100644
--- a/packages/components/dialog/src/Dialog/index.ts
+++ b/packages/components/dialog/src/Dialog/index.ts
@@ -1,10 +1,3 @@
-export { default as Dialog, type DialogProps } from "./Dialog";
-export {
-  HideShowEvent as DialogTriggerEventEnum,
-  AnimationType as DialogAnimationTypeEnum,
-  DialogPosition as DialogPositionEnum,
-  DialogSize as DialogSizeEnum,
-  DialogPlacement as DialogPlacementEnum
-} from "./DialogConstants";
-export { default as usePopover } from "./usePopover";
+export { default as Dialog } from "./Dialog";
+export { DialogPlacement as DialogPlacementEnum } from "./DialogConstants";
 export * from "./Dialog.types";
diff --git a/packages/components/dialog/src/Dialog/modifiers/observeContentResizeModifier.ts b/packages/components/dialog/src/Dialog/modifiers/observeContentResizeModifier.ts
deleted file mode 100644
index 8684ededdd..0000000000
--- a/packages/components/dialog/src/Dialog/modifiers/observeContentResizeModifier.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { type Modifier } from "react-popper";
-
-export const createObserveContentResizeModifier = (isEnabled = false): Modifier<"observeContentResize"> => ({
-  name: "observeContentResize",
-  enabled: isEnabled,
-  phase: "beforeWrite",
-  fn() {},
-  effect({ state, instance }) {
-    const observer = new ResizeObserver(() => {
-      instance.update();
-    });
-    observer.observe(state.elements.popper);
-
-    return () => {
-      observer.disconnect();
-    };
-  }
-});
diff --git a/packages/components/dialog/src/Dialog/modifiers/observeReferenceResizeModifier.ts b/packages/components/dialog/src/Dialog/modifiers/observeReferenceResizeModifier.ts
deleted file mode 100644
index 06f271047e..0000000000
--- a/packages/components/dialog/src/Dialog/modifiers/observeReferenceResizeModifier.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { type Modifier } from "react-popper";
-
-export const createObserveReferenceResizeModifier = (isEnabled = false): Modifier<"observeReferenceResize"> => ({
-  name: "observeReferenceResize",
-  enabled: isEnabled,
-  phase: "beforeWrite",
-  fn() {},
-  effect({ state, instance }) {
-    if (!state.elements.reference) return;
-
-    const observer = new ResizeObserver(() => {
-      instance.update();
-    });
-
-    const reference = state.elements.reference as Element;
-    observer.observe(reference);
-
-    return () => {
-      observer.disconnect();
-    };
-  }
-});
diff --git a/packages/components/dialog/src/Dialog/useForceUpdate.ts b/packages/components/dialog/src/Dialog/useForceUpdate.ts
deleted file mode 100644
index 0719c4ed94..0000000000
--- a/packages/components/dialog/src/Dialog/useForceUpdate.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { useReducer } from "react";
-
-// the second argument of useReducer is the dispatch function
-// after calling dispatch we will set a new object in the state
-// if the state will change by reference it will force rerender of the component
-
-const reducerAlwaysReturningNewObj = () => ({});
-
-export default function useForceUpdate() {
-  return useReducer(reducerAlwaysReturningNewObj, {})[1];
-}
diff --git a/packages/components/dialog/src/Dialog/usePopover.ts b/packages/components/dialog/src/Dialog/usePopover.ts
deleted file mode 100644
index 8cb6cb92cd..0000000000
--- a/packages/components/dialog/src/Dialog/usePopover.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import { useMemo } from "react";
-import { usePopper } from "react-popper";
-import { DialogPlacement as Placement } from "./DialogConstants";
-import { useIsomorphicLayoutEffect } from "@vibe/shared";
-import useForceUpdate from "./useForceUpdate";
-import type { Options, State } from "@popperjs/core";
-import { createObserveContentResizeModifier } from "./modifiers/observeContentResizeModifier";
-import { createObserveReferenceResizeModifier } from "./modifiers/observeReferenceResizeModifier";
-const { RIGHT_START, RIGHT_END, LEFT_START, LEFT_END } = Placement;
-
-const DEFAULT_FALLBACK_PLACEMENTS = [RIGHT_END, LEFT_START, LEFT_END];
-
-export default function usePopover(
-  referenceElement: HTMLElement,
-  popperElement: HTMLElement,
-  {
-    isOpen,
-    placement = RIGHT_START,
-    observeContentResize,
-    observeReferenceResize,
-    offset,
-    fallbackPlacements = DEFAULT_FALLBACK_PLACEMENTS
-  }: {
-    isOpen?: boolean;
-    placement?: Placement;
-    observeContentResize?: boolean;
-    observeReferenceResize?: boolean;
-    offset?: [number, number];
-    fallbackPlacements?: Placement[];
-  }
-) {
-  const forceUpdate = useForceUpdate();
-
-  // we have to use forceUpdate because
-  // usePopper need to run again after any refs changes, even after the first render.
-  useIsomorphicLayoutEffect(() => {
-    forceUpdate();
-  }, [referenceElement, popperElement, forceUpdate]);
-
-  const popperOptions: Pick<Options, "placement" | "modifiers"> = useMemo(() => {
-    return {
-      placement,
-      modifiers: [
-        {
-          name: "flip",
-          options: {
-            fallbackPlacements
-          }
-        },
-        {
-          name: "displayNone",
-          enabled: true,
-          phase: "write",
-          fn: ({ state }: { state: State }) => {
-            state.styles.popper.visibility = isOpen ? "visible" : "hidden";
-            return state;
-          }
-        },
-        createObserveContentResizeModifier(observeContentResize),
-        createObserveReferenceResizeModifier(observeReferenceResize),
-        ...(offset !== undefined
-          ? [
-              {
-                name: "offset" as const,
-                options: { offset }
-              }
-            ]
-          : [])
-      ]
-    };
-  }, [placement, observeContentResize, offset, isOpen]);
-
-  const { styles, attributes } = usePopper(referenceElement, popperElement, popperOptions);
-
-  return { styles, attributes };
-}
diff --git a/packages/components/dialog/src/DialogContentContainer/DialogContentContainer.module.scss b/packages/components/dialog/src/DialogContentContainer/DialogContentContainer.module.scss
index 81c391bc51..9a926dc690 100644
--- a/packages/components/dialog/src/DialogContentContainer/DialogContentContainer.module.scss
+++ b/packages/components/dialog/src/DialogContentContainer/DialogContentContainer.module.scss
@@ -3,15 +3,15 @@
 }
 
 .sizeSmall {
-  padding: var(--spacing-small);
+  padding: var(--space-8);
 }
 
 .sizeMedium {
-  padding: var(--spacing-medium);
+  padding: var(--space-16);
 }
 
 .sizeLarge {
-  padding: var(--spacing-large);
+  padding: var(--space-24);
 }
 
 .typePopover {
diff --git a/packages/components/dialog/src/DialogContentContainer/DialogContentContainer.tsx b/packages/components/dialog/src/DialogContentContainer/DialogContentContainer.tsx
index 05fc2fa270..66c680110b 100644
--- a/packages/components/dialog/src/DialogContentContainer/DialogContentContainer.tsx
+++ b/packages/components/dialog/src/DialogContentContainer/DialogContentContainer.tsx
@@ -1,15 +1,7 @@
 import { camelCase } from "es-toolkit";
 import cx from "classnames";
 import React, { useRef, forwardRef } from "react";
-import {
-  useMergeRef,
-  type VibeComponentProps,
-  withStaticProps,
-  ComponentDefaultTestId,
-  getTestId,
-  getStyle
-} from "@vibe/shared";
-import { DialogSize as DialogSizeEnum, DialogType as DialogTypeEnum } from "../Dialog/DialogConstants";
+import { useMergeRef, type VibeComponentProps, ComponentDefaultTestId, getTestId, getStyle } from "@vibe/shared";
 import { type DialogSize, type DialogType } from "../Dialog";
 import styles from "./DialogContentContainer.module.scss";
 
@@ -21,11 +13,11 @@ export interface DialogContentContainerProps extends VibeComponentProps {
   /**
    * The ID of the element that labels this dialog.
    */
-  ariaLabelledby?: string;
+  "aria-labelledby"?: string;
   /**
    * The ID of the element that describes this dialog.
    */
-  ariaDescribedby?: string;
+  "aria-describedby"?: string;
   /**
    * The type of dialog.
    */
@@ -50,8 +42,8 @@ const DialogContentContainer = forwardRef(
     {
       id,
       className = "",
-      ariaLabelledby = "",
-      ariaDescribedby = "",
+      "aria-labelledby": ariaLabelledby = "",
+      "aria-describedby": ariaDescribedby = "",
       type = "popover",
       size = "small",
       children,
@@ -90,12 +82,4 @@ const DialogContentContainer = forwardRef(
   }
 );
 
-interface DialogContentContainerStaticProps {
-  types: typeof DialogTypeEnum;
-  sizes: typeof DialogSizeEnum;
-}
-
-export default withStaticProps<DialogContentContainerProps, DialogContentContainerStaticProps>(DialogContentContainer, {
-  types: DialogTypeEnum,
-  sizes: DialogSizeEnum
-});
+export default DialogContentContainer;
diff --git a/packages/components/dialog/src/Refable/Refable.tsx b/packages/components/dialog/src/Refable/Refable.tsx
deleted file mode 100644
index 3023aedb41..0000000000
--- a/packages/components/dialog/src/Refable/Refable.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React, { type HTMLProps, type MutableRefObject, type ReactElement } from "react";
-import { chainFunctions, chainRefFunctions, type VibeComponentProps } from "@vibe/shared";
-
-export const Refable = React.forwardRef<
-  ReactElement,
-  React.PropsWithChildren<unknown & HTMLProps<any> & VibeComponentProps> & {
-    children: ReactElement | ReactElement[] | string;
-    /**
-     * The wrapper element type to use for React components. Defaults to "span".
-     */
-    wrapperElement?: "span" | "div";
-  }
-  //   @ts-expect-error React forwardRef type def doesn't seem to support multiple refs
->(({ children, wrapperElement = "span", ...rest }, ref) => {
-  return React.Children.map(children, child => {
-    if (!React.isValidElement(child)) return null;
-
-    if (typeof child.type !== "string") {
-      const WrapperElement = wrapperElement;
-      return (
-        <WrapperElement ref={ref as MutableRefObject<any>} {...rest}>
-          {React.cloneElement(child, { ...child.props })}
-        </WrapperElement>
-      );
-    }
-
-    return React.cloneElement(child, {
-      ...rest,
-      ...child.props,
-      onClick: getChainedFunction("onClick", child.props, rest),
-      onBlur: getChainedFunction("onBlur", child.props, rest),
-      onMouseEnter: getChainedFunction("onMouseEnter", child.props, rest),
-      onMouseLeave: getChainedFunction("onMouseLeave", child.props, rest),
-      onMouseDown: getChainedFunction("onMouseDown", child.props, rest),
-      onFocus: getChainedFunction("onFocus", child.props, rest),
-      // @ts-expect-error
-      ref: chainRefFunctions([child.ref, ref as MutableRefObject<any>])
-    });
-  });
-});
-
-function getChainedFunction(
-  name: keyof React.HTMLProps<unknown>,
-  childProps: React.PropsWithChildren<React.HTMLProps<unknown>>,
-  wrapperProps: React.HTMLProps<unknown>
-) {
-  return chainFunctions([childProps[name], wrapperProps[name]], true);
-}
diff --git a/packages/components/dialog/src/Refable/index.ts b/packages/components/dialog/src/Refable/index.ts
deleted file mode 100644
index dc9552f090..0000000000
--- a/packages/components/dialog/src/Refable/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Refable } from "./Refable";
diff --git a/packages/components/icon-button/package.json b/packages/components/icon-button/package.json
index 29d2166abb..fb3e7edd0e 100644
--- a/packages/components/icon-button/package.json
+++ b/packages/components/icon-button/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vibe/icon-button",
-  "version": "3.0.5",
+  "version": "4.0.0-rc.0",
   "description": "Vibe sub-package for icon button component",
   "repository": {
     "type": "git",
@@ -38,21 +38,21 @@
     "lint": "eslint \"./src/**/*.{js,jsx,ts,tsx}\""
   },
   "dependencies": {
-    "@vibe/button": "3.0.16",
-    "@vibe/icon": "3.0.11",
-    "@vibe/icons": "1.16.0",
-    "@vibe/shared": "3.0.8",
-    "@vibe/tooltip": "3.0.5",
+    "@vibe/button": "^4.0.0-rc.0",
+    "@vibe/icon": "^4.0.0-rc.0",
+    "@vibe/icons": "^4.0.0-rc.0",
+    "@vibe/shared": "^4.0.0-rc.0",
+    "@vibe/tooltip": "^4.0.0-rc.0",
     "classnames": "^2.5.1",
     "es-toolkit": "^1.39.10"
   },
   "devDependencies": {
     "@testing-library/react": "^12.1.2",
-    "@vibe/config": "3.0.5",
+    "@vibe/config": "^4.0.0-rc.0",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
     "react-test-renderer": "16",
-    "typescript": "^4.7.3",
+    "typescript": "^5.9.3",
     "vitest": "^1.6.0"
   },
   "peerDependencies": {
diff --git a/packages/components/icon-button/src/IconButton/IconButton.tsx b/packages/components/icon-button/src/IconButton/IconButton.tsx
index 79a7c7d4e6..9df267698d 100644
--- a/packages/components/icon-button/src/IconButton/IconButton.tsx
+++ b/packages/components/icon-button/src/IconButton/IconButton.tsx
@@ -4,7 +4,6 @@ import { noop as NOOP } from "es-toolkit";
 import {
   useMergeRef,
   type VibeComponentProps,
-  withStaticProps,
   getTestId,
   ComponentDefaultTestId,
   ComponentVibeId,
@@ -37,23 +36,23 @@ export interface IconButtonProps extends VibeComponentProps {
   /**
    * The ID of the element that labels this button.
    */
-  ariaLabeledBy?: string;
+  "aria-labelledby"?: string;
   /**
    * The ARIA label for accessibility.
    */
-  ariaLabel?: string;
+  "aria-label"?: string;
   /**
    * If true, indicates that the button controls a popup.
    */
-  ariaHasPopup?: React.HTMLProps<HTMLButtonElement>["aria-haspopup"];
+  "aria-haspopup"?: React.HTMLProps<HTMLButtonElement>["aria-haspopup"];
   /**
    * If true, indicates that the associated popup is open.
    */
-  ariaExpanded?: boolean;
+  "aria-expanded"?: boolean;
   /**
    * The ID of the region controlled by the button.
    */
-  ariaControls?: string;
+  "aria-controls"?: string;
   /**
    * ID of the element describing the button.
    */
@@ -127,11 +126,11 @@ const IconButton = forwardRef(
       size = "medium",
       tooltipProps = {} as TooltipProps,
       tooltipContent,
-      ariaLabeledBy,
-      ariaLabel,
-      ariaHasPopup,
-      ariaExpanded,
-      ariaControls,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-label": ariaLabel,
+      "aria-haspopup": ariaHasPopup,
+      "aria-expanded": ariaExpanded,
+      "aria-controls": ariaControls,
       "aria-describedby": ariaDescribedBy,
       "aria-hidden": ariaHidden,
       "aria-pressed": ariaPressed,
@@ -214,11 +213,11 @@ const IconButton = forwardRef(
             disabled={disabled}
             color={color}
             kind={kind}
-            ariaLabeledBy={ariaLabeledBy}
-            ariaLabel={buttonAriaLabel}
-            ariaHasPopup={ariaHasPopup}
-            ariaExpanded={ariaExpanded}
-            ariaControls={ariaControls}
+            aria-labelledby={ariaLabelledBy}
+            aria-label={buttonAriaLabel}
+            aria-haspopup={ariaHasPopup}
+            aria-expanded={ariaExpanded}
+            aria-controls={ariaControls}
             aria-describedby={ariaDescribedBy}
             aria-hidden={ariaHidden}
             aria-pressed={ariaPressed}
@@ -235,7 +234,7 @@ const IconButton = forwardRef(
             loading={loading}
             loaderClassName={cx(styles.loader, getStyle(styles, size))}
           >
-            <Icon icon={icon} iconType="svg" iconSize={iconSize} ignoreFocusStyle className={iconClassName} />
+            <Icon icon={icon} type="svg" size={iconSize} ignoreFocusStyle className={iconClassName} />
           </Button>
         </Tooltip>
       </IconButtonWrapper>
@@ -243,14 +242,4 @@ const IconButton = forwardRef(
   }
 );
 
-interface IconButtonStaticProps {
-  sizes: typeof Button.sizes;
-  kinds: typeof Button.kinds;
-  colors: typeof Button.colors;
-}
-
-export default withStaticProps<IconButtonProps, IconButtonStaticProps>(IconButton, {
-  sizes: Button.sizes,
-  kinds: Button.kinds,
-  colors: Button.colors
-});
+export default IconButton;
diff --git a/packages/components/icon-button/src/IconButton/__tests__/IconButton.snapshot.test.tsx b/packages/components/icon-button/src/IconButton/__tests__/IconButton.snapshot.test.tsx
index 9cb8c7fe5f..9c25643aae 100644
--- a/packages/components/icon-button/src/IconButton/__tests__/IconButton.snapshot.test.tsx
+++ b/packages/components/icon-button/src/IconButton/__tests__/IconButton.snapshot.test.tsx
@@ -43,7 +43,7 @@ describe("IconButton renders correctly", () => {
   });
 
   it("with aria label", () => {
-    const tree = renderer.create(<IconButton ariaLabel="My aria label" />).toJSON();
+    const tree = renderer.create(<IconButton aria-label="My aria label" />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
diff --git a/packages/components/icon-button/src/IconButton/__tests__/IconButton.test.tsx b/packages/components/icon-button/src/IconButton/__tests__/IconButton.test.tsx
index 4332fad8c5..d2bafd5839 100644
--- a/packages/components/icon-button/src/IconButton/__tests__/IconButton.test.tsx
+++ b/packages/components/icon-button/src/IconButton/__tests__/IconButton.test.tsx
@@ -8,7 +8,7 @@ vi.useFakeTimers();
 const ariaLabel = "Button Icon";
 
 const renderComponent = (props: IconButtonProps = {}) => {
-  return render(<IconButton ariaLabel={ariaLabel} {...props} />);
+  return render(<IconButton aria-label={ariaLabel} {...props} />);
 };
 
 describe("IconButton tests", () => {
diff --git a/packages/components/icon/package.json b/packages/components/icon/package.json
index 949be34081..8af8145316 100644
--- a/packages/components/icon/package.json
+++ b/packages/components/icon/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vibe/icon",
-  "version": "3.0.11",
+  "version": "4.0.0-rc.0",
   "description": "Vibe sub-package for icon components",
   "repository": {
     "type": "git",
@@ -38,16 +38,16 @@
     "lint": "eslint \"./src/**/*.{js,jsx,ts,tsx}\""
   },
   "dependencies": {
-    "@vibe/shared": "3.0.8",
+    "@vibe/shared": "^4.0.0-rc.0",
     "classnames": "^2.5.1",
     "es-toolkit": "^1.39.10",
     "react-inlinesvg": "^4.1.3"
   },
   "devDependencies": {
-    "@vibe/config": "3.0.5",
+    "@vibe/config": "^4.0.0-rc.0",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
-    "typescript": "^4.7.3",
+    "typescript": "^5.9.3",
     "vitest": "^1.6.0"
   },
   "peerDependencies": {
diff --git a/packages/components/icon/src/Icon/CustomSvgIcon/CustomSvgIcon.tsx b/packages/components/icon/src/Icon/CustomSvgIcon/CustomSvgIcon.tsx
index cfc78286b1..49f45d36c0 100644
--- a/packages/components/icon/src/Icon/CustomSvgIcon/CustomSvgIcon.tsx
+++ b/packages/components/icon/src/Icon/CustomSvgIcon/CustomSvgIcon.tsx
@@ -14,10 +14,6 @@ function modifySvgCode(svg: string, color = "currentColor") {
 }
 
 export interface CustomSvgIconProps extends VibeComponentProps {
-  /**
-   * Callback fired when the icon is clicked.
-   */
-  onClick?: (event: React.MouseEvent) => void;
   /**
    * The source URL or object of the SVG icon.
    */
@@ -25,7 +21,7 @@ export interface CustomSvgIconProps extends VibeComponentProps {
   /**
    * The accessible label for the icon.
    */
-  ariaLabel?: string;
+  "aria-label"?: string;
   /**
    * The tab index of the icon for keyboard navigation.
    */
@@ -37,11 +33,7 @@ export interface CustomSvgIconProps extends VibeComponentProps {
   /**
    * If true, hides the icon from screen readers.
    */
-  ariaHidden?: boolean;
-  /**
-   * If true, makes the icon clickable.
-   */
-  clickable?: boolean;
+  "aria-hidden"?: boolean;
   /**
    * If true, replaces the `fill` attribute in the SVG with `currentColor`.
    */
@@ -50,6 +42,10 @@ export interface CustomSvgIconProps extends VibeComponentProps {
    * Overrides the default color of the icon.
    */
   customColor?: string;
+  /**
+   * The size (width and height) of the icon.
+   */
+  size?: number | string;
   /**
    * Reference to the SVG element.
    */
@@ -60,17 +56,16 @@ const CustomSvgIcon: FunctionComponent<CustomSvgIconProps> = ({
   className,
   ref,
   src,
-  onClick,
-  clickable,
-  ariaLabel,
-  ariaHidden,
+  "aria-label": ariaLabel,
+  "aria-hidden": ariaHidden,
   replaceToCurrentColor = false,
   customColor,
+  size,
   id,
   "data-testid": dataTestId
 }) => {
   const screenReaderAccessProps = useIconScreenReaderAccessProps({
-    isClickable: clickable,
+    isClickable: false,
     label: ariaLabel,
     isDecorationOnly: ariaHidden
   });
@@ -101,11 +96,12 @@ const CustomSvgIcon: FunctionComponent<CustomSvgIconProps> = ({
     <SVGComponent
       innerRef={ref}
       {...screenReaderAccessProps}
-      onClick={onClick}
       loader={PlaceHolder} // avoid flickering
       src={src}
       className={className}
       preProcessor={svgProcessor}
+      width={size}
+      height={size}
       id={id}
       data-testid={dataTestId || getTestId(ComponentDefaultTestId.SVG_ICON, id)}
       data-vibe={ComponentVibeId.ICON}
diff --git a/packages/components/icon/src/Icon/Icon.tsx b/packages/components/icon/src/Icon/Icon.tsx
index d88dae04df..868d04c250 100644
--- a/packages/components/icon/src/Icon/Icon.tsx
+++ b/packages/components/icon/src/Icon/Icon.tsx
@@ -1,14 +1,6 @@
 import cx from "classnames";
 import React, { forwardRef } from "react";
-import {
-  type VibeComponentProps,
-  withStaticProps,
-  ComponentDefaultTestId,
-  getTestId,
-  ComponentVibeId,
-  useMergeRef
-} from "@vibe/shared";
-import { IconTypeEnum } from "./constants";
+import { type VibeComponentProps, ComponentDefaultTestId, getTestId, ComponentVibeId, useMergeRef } from "@vibe/shared";
 import CustomSvgIcon from "./CustomSvgIcon/CustomSvgIcon";
 import FontIcon from "./FontIcon/FontIcon";
 import useIconProps from "./hooks/useIconProps";
@@ -33,15 +25,15 @@ export interface IconProps extends VibeComponentProps {
   /**
    * The accessible label for the icon.
    */
-  iconLabel?: string;
+  label?: string;
   /**
    * The type of the icon: `svg`, `font`, or `src` (external source).
    */
-  iconType?: IconType;
+  type?: IconType;
   /**
    * The size of the icon.
    */
-  iconSize?: number | string;
+  size?: number | string;
   /**
    * If true, removes focus styles from the icon.
    */
@@ -53,7 +45,7 @@ export interface IconProps extends VibeComponentProps {
   /**
    * If true, hides the icon from screen readers.
    */
-  ariaHidden?: boolean;
+  "aria-hidden"?: boolean;
   /**
    * Inline styles applied to the icon.
    */
@@ -77,12 +69,12 @@ const Icon = forwardRef(
       id,
       className,
       icon = "",
-      iconLabel,
-      iconType = "svg",
-      iconSize = 16,
+      label,
+      type = "svg",
+      size = 16,
       ignoreFocusStyle = false,
       tabindex: externalTabIndex,
-      ariaHidden,
+      "aria-hidden": ariaHidden,
       style,
       useCurrentColor = false,
       customColor,
@@ -92,7 +84,7 @@ const Icon = forwardRef(
   ) => {
     const overrideExternalTabIndex = externalTabIndex && +externalTabIndex;
     const { screenReaderAccessProps, onClickCallback, computedClassName, iconRef } = useIconProps({
-      iconLabel,
+      label,
       className,
       isDecorationOnly: ariaHidden,
       ignoreFocusStyle,
@@ -108,27 +100,27 @@ const Icon = forwardRef(
     const isFunctionType = typeof icon === "function";
     const overrideDataTestId = dataTestId || getTestId(ComponentDefaultTestId.ICON, id);
 
-    if (iconType === "svg" || isFunctionType || typeof icon === "object") {
+    if (type === "svg" || isFunctionType || typeof icon === "object") {
       return renderIcon(icon as React.FC<IconSubComponentProps>, {
         id,
         ...screenReaderAccessProps,
         ref: isFunctionType ? undefined : mergedRef,
-        size: iconSize.toString(),
+        size: size.toString(),
         className: computedClassName,
         style,
         "data-testid": overrideDataTestId
       });
     }
-    if (iconType === "src") {
+    if (type === "src") {
       return (
         <CustomSvgIcon
           id={id}
           src={icon}
           {...screenReaderAccessProps}
           className={cx(computedClassName)}
-          onClick={onClickCallback}
           replaceToCurrentColor={useCurrentColor}
           customColor={customColor}
+          size={size}
           data-testid={overrideDataTestId}
         />
       );
@@ -147,10 +139,4 @@ const Icon = forwardRef(
   }
 );
 
-interface IconStaticProps {
-  type: typeof IconTypeEnum;
-}
-
-export default withStaticProps<IconProps, IconStaticProps>(Icon, {
-  type: IconTypeEnum
-});
+export default Icon;
diff --git a/packages/components/icon/src/Icon/constants.ts b/packages/components/icon/src/Icon/constants.ts
deleted file mode 100644
index c2339df67c..0000000000
--- a/packages/components/icon/src/Icon/constants.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * @deprecated
- */
-export enum IconTypeEnum {
-  SVG = "svg",
-  ICON_FONT = "font",
-  SRC = "src"
-}
diff --git a/packages/components/icon/src/Icon/hooks/useIconProps.tsx b/packages/components/icon/src/Icon/hooks/useIconProps.tsx
index 04706e2aa8..b40b8406ca 100644
--- a/packages/components/icon/src/Icon/hooks/useIconProps.tsx
+++ b/packages/components/icon/src/Icon/hooks/useIconProps.tsx
@@ -13,7 +13,7 @@ export default function useIconProps({
   clickable,
   ignoreFocusStyle,
   isDecorationOnly,
-  iconLabel,
+  label,
   externalTabIndex
 }: {
   onClick?: (event: UIEvent) => void;
@@ -21,7 +21,7 @@ export default function useIconProps({
   clickable?: boolean;
   ignoreFocusStyle?: boolean;
   isDecorationOnly?: boolean;
-  iconLabel?: string;
+  label?: string;
   externalTabIndex?: number | undefined;
 }) {
   const iconRef = useRef(null);
@@ -73,7 +73,7 @@ export default function useIconProps({
 
   const screenReaderAccessProps = useIconScreenReaderAccessProps({
     isClickable: clickable,
-    label: iconLabel,
+    label,
     isDecorationOnly
   });
 
diff --git a/packages/components/layer/package.json b/packages/components/layer/package.json
index c3bbe54b0c..c9eb5f1397 100644
--- a/packages/components/layer/package.json
+++ b/packages/components/layer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vibe/layer",
-  "version": "3.0.10",
+  "version": "4.0.0-rc.0",
   "description": "Vibe sub-package for layering components",
   "repository": {
     "type": "git",
@@ -38,20 +38,20 @@
     "lint": "eslint \"./src/**/*.{js,jsx,ts,tsx}\""
   },
   "dependencies": {
-    "@vibe/icon": "3.0.11",
-    "@vibe/loader": "3.0.11",
-    "@vibe/shared": "3.0.8",
+    "@vibe/icon": "^4.0.0-rc.0",
+    "@vibe/loader": "^4.0.0-rc.0",
+    "@vibe/shared": "^4.0.0-rc.0",
     "classnames": "^2.5.1",
     "es-toolkit": "^1.39.10"
   },
   "devDependencies": {
     "@testing-library/react": "^12.1.2",
-    "@vibe/config": "3.0.5",
-    "@vibe/icons": "1.16.0",
+    "@vibe/config": "^4.0.0-rc.0",
+    "@vibe/icons": "^4.0.0-rc.0",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
     "react-test-renderer": "16",
-    "typescript": "^4.7.3",
+    "typescript": "^5.9.3",
     "vitest": "^1.6.0"
   },
   "peerDependencies": {
diff --git a/packages/components/layout/package.json b/packages/components/layout/package.json
index f6277a28fc..81d28ae01e 100644
--- a/packages/components/layout/package.json
+++ b/packages/components/layout/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vibe/layout",
-  "version": "3.0.3",
+  "version": "4.0.0-rc.0",
   "description": "Vibe sub-package for layout components",
   "repository": {
     "type": "git",
@@ -38,18 +38,19 @@
     "lint": "eslint \"./src/**/*.{js,jsx,ts,tsx}\""
   },
   "dependencies": {
-    "@vibe/clickable": "3.0.3",
-    "@vibe/shared": "3.0.8",
+    "@vibe/clickable": "^4.0.0-rc.0",
+    "@vibe/shared": "^4.0.0-rc.0",
+    "@vibe/style": "^4.0.0-rc.0",
     "classnames": "^2.5.1",
     "es-toolkit": "^1.39.10"
   },
   "devDependencies": {
     "@testing-library/react": "^12.1.2",
-    "@vibe/config": "3.0.5",
+    "@vibe/config": "^4.0.0-rc.0",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
     "react-test-renderer": "16",
-    "typescript": "^4.7.3",
+    "typescript": "^5.9.3",
     "vitest": "^1.6.0"
   },
   "peerDependencies": {
diff --git a/packages/components/layout/src/Box/Box.module.scss b/packages/components/layout/src/Box/Box.module.scss
index 5cfd84f5a9..cfdb6f6ec9 100644
--- a/packages/components/layout/src/Box/Box.module.scss
+++ b/packages/components/layout/src/Box/Box.module.scss
@@ -1,5 +1,5 @@
 // Monday ui styles dependencies
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 @import "./utilities";
 
 .box {
diff --git a/packages/components/layout/src/Box/Box.tsx b/packages/components/layout/src/Box/Box.tsx
index 066d1bef97..3154e96c39 100644
--- a/packages/components/layout/src/Box/Box.tsx
+++ b/packages/components/layout/src/Box/Box.tsx
@@ -1,28 +1,7 @@
 import React, { forwardRef, useRef } from "react";
 import { camelCase } from "es-toolkit";
 import cx from "classnames";
-import {
-  BackgroundColor as BackgroundColorEnum,
-  BorderColor as BorderColorEnum,
-  BoxTextColor as BoxTextColorEnum,
-  Margin as MarginEnum,
-  MarginBottom as MarginBottomEnum,
-  MarginEnd as MarginEndEnum,
-  MarginStart as MarginStartEnum,
-  MarginTop as MarginTopEnum,
-  MarginX as MarginXEnum,
-  MarginY as MarginYEnum,
-  Padding as PaddingEnum,
-  PaddingBottom as PaddingBottomEnum,
-  PaddingEnd as PaddingEndEnum,
-  PaddingStart as PaddingStartEnum,
-  PaddingTop as PaddingTopEnum,
-  PaddingX as PaddingXEnum,
-  PaddingY as PaddingYEnum,
-  Rounded as RoundedEnum,
-  Shadow as ShadowEnum,
-  SizePrefixMapping
-} from "./BoxConstants";
+import { SizePrefixMapping } from "./BoxConstants";
 import {
   type BackgroundColor,
   type BorderColor,
@@ -34,7 +13,6 @@ import {
 } from "./Box.types";
 import {
   type VibeComponentProps,
-  withStaticProps,
   type ElementContent,
   getTestId,
   ComponentDefaultTestId,
@@ -194,46 +172,4 @@ const Box = forwardRef(
   }
 );
 
-interface BoxStaticProps {
-  borderColors: typeof BorderColorEnum;
-  roundeds: typeof RoundedEnum;
-  shadows: typeof ShadowEnum;
-  margins: typeof MarginEnum;
-  marginXs: typeof MarginXEnum;
-  marginYs: typeof MarginYEnum;
-  marginTops: typeof MarginTopEnum;
-  marginEnds: typeof MarginEndEnum;
-  marginBottoms: typeof MarginBottomEnum;
-  marginStarts: typeof MarginStartEnum;
-  paddings: typeof PaddingEnum;
-  paddingXs: typeof PaddingXEnum;
-  paddingYs: typeof PaddingYEnum;
-  paddingTops: typeof PaddingTopEnum;
-  paddingEnds: typeof PaddingEndEnum;
-  paddingBottoms: typeof PaddingBottomEnum;
-  paddingStarts: typeof PaddingStartEnum;
-  backgroundColors: typeof BackgroundColorEnum;
-  textColors: typeof BoxTextColorEnum;
-}
-
-export default withStaticProps<BoxProps, BoxStaticProps>(Box, {
-  borderColors: BorderColorEnum,
-  roundeds: RoundedEnum,
-  shadows: ShadowEnum,
-  margins: MarginEnum,
-  marginXs: MarginXEnum,
-  marginYs: MarginYEnum,
-  marginTops: MarginTopEnum,
-  marginEnds: MarginEndEnum,
-  marginBottoms: MarginBottomEnum,
-  marginStarts: MarginStartEnum,
-  paddings: PaddingEnum,
-  paddingXs: PaddingXEnum,
-  paddingYs: PaddingYEnum,
-  paddingTops: PaddingTopEnum,
-  paddingEnds: PaddingEndEnum,
-  paddingBottoms: PaddingBottomEnum,
-  paddingStarts: PaddingStartEnum,
-  backgroundColors: BackgroundColorEnum,
-  textColors: BoxTextColorEnum
-});
+export default Box;
diff --git a/packages/components/layout/src/Box/BoxConstants.ts b/packages/components/layout/src/Box/BoxConstants.ts
index 011af9be84..b405b82fa9 100644
--- a/packages/components/layout/src/Box/BoxConstants.ts
+++ b/packages/components/layout/src/Box/BoxConstants.ts
@@ -1,253 +1,3 @@
-/**
- * @deprecated
- */
-export enum Disabled {
-  DISABLED = "opacityDisabled"
-}
-
-/**
- * @deprecated
- */
-export enum Border {
-  DEFAULT = "border"
-}
-
-/**
- * @deprecated
- */
-export enum BorderColor {
-  UI_BORDER_COLOR = "uiBorderColor",
-  LAYOUT_BORDER_COLOR = "layoutBorderColor"
-}
-
-/**
- * @deprecated
- */
-export enum Rounded {
-  SMALL = "small",
-  MEDIUM = "medium",
-  BIG = "big"
-}
-
-/**
- * @deprecated
- */
-export enum Shadow {
-  XS = "xs",
-  SMALL = "small",
-  MEDIUM = "medium",
-  LARGE = "large"
-}
-
-/**
- * @deprecated
- */
-export enum Margin {
-  AUTO = "auto",
-  XS = "xs",
-  SMALL = "small",
-  MEDIUM = "medium",
-  LARGE = "large",
-  XL = "xl",
-  XXL = "xxl",
-  XXXL = "xxxl"
-}
-
-/**
- * @deprecated
- */
-export enum MarginX {
-  AUTO = "auto",
-  XS = "xs",
-  SMALL = "small",
-  MEDIUM = "medium",
-  LARGE = "large",
-  XL = "xl",
-  XXL = "xxl",
-  XXXL = "xxxl"
-}
-
-/**
- * @deprecated
- */
-export enum MarginY {
-  AUTO = "auto",
-  XS = "xs",
-  SMALL = "small",
-  MEDIUM = "medium",
-  LARGE = "large",
-  XL = "xl",
-  XXL = "xxl",
-  XXXL = "xxxl"
-}
-
-/**
- * @deprecated
- */
-export enum MarginTop {
-  AUTO = "auto",
-  XS = "xs",
-  SMALL = "small",
-  MEDIUM = "medium",
-  LARGE = "large",
-  XL = "xl",
-  XXL = "xxl",
-  XXXL = "xxxl"
-}
-
-/**
- * @deprecated
- */
-export enum MarginEnd {
-  AUTO = "auto",
-  XS = "xs",
-  SMALL = "small",
-  MEDIUM = "medium",
-  LARGE = "large",
-  XL = "xl",
-  XXL = "xxl",
-  XXXL = "xxxl"
-}
-
-/**
- * @deprecated
- */
-export enum MarginBottom {
-  AUTO = "auto",
-  XS = "xs",
-  SMALL = "small",
-  MEDIUM = "medium",
-  LARGE = "large",
-  XL = "xl",
-  XXL = "xxl",
-  XXXL = "xxxl"
-}
-
-/**
- * @deprecated
- */
-export enum MarginStart {
-  AUTO = "auto",
-  XS = "xs",
-  SMALL = "small",
-  MEDIUM = "medium",
-  LARGE = "large",
-  XL = "xl",
-  XXL = "xxl",
-  XXXL = "xxxl"
-}
-
-/**
- * @deprecated
- */
-export enum Padding {
-  XS = "xs",
-  SMALL = "small",
-  MEDIUM = "medium",
-  LARGE = "large",
-  XL = "xl",
-  XXL = "xxl",
-  XXXL = "xxxl"
-}
-
-/**
- * @deprecated
- */
-export enum PaddingX {
-  XS = "xs",
-  SMALL = "small",
-  MEDIUM = "medium",
-  LARGE = "large",
-  XL = "xl",
-  XXL = "xxl",
-  XXXL = "xxxl"
-}
-
-/**
- * @deprecated
- */
-export enum PaddingY {
-  XS = "xs",
-  SMALL = "small",
-  MEDIUM = "medium",
-  LARGE = "large",
-  XL = "xl",
-  XXL = "xxl",
-  XXXL = "xxxl"
-}
-
-/**
- * @deprecated
- */
-export enum PaddingTop {
-  XS = "xs",
-  SMALL = "small",
-  MEDIUM = "medium",
-  LARGE = "large",
-  XL = "xl",
-  XXL = "xxl",
-  XXXL = "xxxl"
-}
-
-/**
- * @deprecated
- */
-export enum PaddingEnd {
-  XS = "xs",
-  SMALL = "small",
-  MEDIUM = "medium",
-  LARGE = "large",
-  XL = "xl",
-  XXL = "xxl",
-  XXXL = "xxxl"
-}
-
-/**
- * @deprecated
- */
-export enum PaddingBottom {
-  XS = "xs",
-  SMALL = "small",
-  MEDIUM = "medium",
-  LARGE = "large",
-  XL = "xl",
-  XXL = "xxl",
-  XXXL = "xxxl"
-}
-
-/**
- * @deprecated
- */
-export enum PaddingStart {
-  XS = "xs",
-  SMALL = "small",
-  MEDIUM = "medium",
-  LARGE = "large",
-  XL = "xl",
-  XXL = "xxl",
-  XXXL = "xxxl"
-}
-
-/**
- * @deprecated
- */
-export enum BackgroundColor {
-  PRIMARY_BACKGROUND_COLOR = "primaryBackgroundColor",
-  SECONDARY_BACKGROUND_COLOR = "secondaryBackgroundColor",
-  GREY_BACKGROUND_COLOR = "greyBackgroundColor",
-  ALL_GREY_BACKGROUND_COLOR = "allgreyBackgroundColor",
-  INVERTED_COLOR_BACKGROUND = "invertedColorBackground"
-}
-
-/**
- * @deprecated
- */
-export enum BoxTextColor {
-  PRIMARY_TEXT_COLOR = "primaryTextColor",
-  TEXT_COLOR_ON_INVERTED = "textColorOnInverted",
-  SECONDARY_TEXT_COLOR = "secondaryTextColor"
-}
-
 export const SizePrefixMapping = {
   margin: "m",
   marginX: "mx",
diff --git a/packages/components/layout/src/Box/_utilities.scss b/packages/components/layout/src/Box/_utilities.scss
index 2f2c1f65cb..2e3e366520 100644
--- a/packages/components/layout/src/Box/_utilities.scss
+++ b/packages/components/layout/src/Box/_utilities.scss
@@ -1,18 +1,18 @@
 @use "sass:map";
 @use "sass:string";
 @use "sass:list";
-@import "~monday-ui-style/dist/functions";
+@import "~@vibe/style/dist/functions";
 
 /*  stylelint-disable scss/at-if-no-null */
 $utility-spacing-vars: (
   0: 0,
-  xs: var(--spacing-xs),
-  small: var(--spacing-small),
-  medium: var(--spacing-medium),
-  large: var(--spacing-large),
-  xl: var(--spacing-xl),
-  xxl: var(--spacing-xxl),
-  xxxl: var(--spacing-xxxl)
+  xs: var(--space-4),
+  small: var(--space-8),
+  medium: var(--space-16),
+  large: var(--space-24),
+  xl: var(--space-32),
+  xxl: var(--space-48),
+  xxxl: var(--space-64)
 );
 
 $utility-border-colors-vars: (
@@ -84,7 +84,7 @@ $utilities-modules: (
       )
   ),
   "marginX": (
-    property: margin-right margin-left,
+    property: margin-inline,
     class: mx,
     values:
       map.merge(
@@ -155,7 +155,7 @@ $utilities-modules: (
     values: $utility-spacing-vars
   ),
   "paddingX": (
-    property: padding-right padding-left,
+    property: padding-inline,
     class: px,
     values: $utility-spacing-vars
   ),
diff --git a/packages/components/layout/src/Flex/Flex.tsx b/packages/components/layout/src/Flex/Flex.tsx
index 69e8b01710..c0867ebe86 100644
--- a/packages/components/layout/src/Flex/Flex.tsx
+++ b/packages/components/layout/src/Flex/Flex.tsx
@@ -1,14 +1,8 @@
 import React, { forwardRef, useMemo, useRef } from "react";
 import cx from "classnames";
 import { Clickable } from "@vibe/clickable";
-import {
-  FlexAlign as FlexAlignEnum,
-  FlexDirection as FlexDirectionEnum,
-  FlexGap as FlexGapEnum,
-  FlexJustify as FlexJustifyEnum
-} from "./FlexConstants";
 import { type FlexDirection, type FlexJustify, type FlexAlign, type FlexGap, type FlexShorthand } from "./Flex.types";
-import { type ElementContent, withStaticProps, type VibeComponentProps, getStyle, useMergeRef } from "@vibe/shared";
+import { type ElementContent, type VibeComponentProps, getStyle, useMergeRef } from "@vibe/shared";
 import styles from "./Flex.module.scss";
 import { camelCase } from "es-toolkit";
 
@@ -52,7 +46,7 @@ export interface FlexProps extends VibeComponentProps {
   /**
    * The label of the flex container for accessibility.
    */
-  ariaLabel?: string;
+  "aria-label"?: string;
   /**
    * The tab order of the element.
    */
@@ -68,7 +62,7 @@ export interface FlexProps extends VibeComponentProps {
   /**
    * ID of the element describing the flex container.
    */
-  ariaLabelledby?: string;
+  "aria-labelledby"?: string;
 }
 
 const Flex = forwardRef(
@@ -87,8 +81,8 @@ const Flex = forwardRef(
       onClick,
       onMouseDown,
       style,
-      ariaLabelledby,
-      ariaLabel,
+      "aria-labelledby": ariaLabelledby,
+      "aria-label": ariaLabel,
       tabIndex,
       "data-testid": dataTestId
     }: FlexProps,
@@ -104,7 +98,13 @@ const Flex = forwardRef(
       if (typeof gap === "number") {
         return { gap: `${gap}px` };
       }
-      return { gap: `var(--spacing-${gap})` };
+      const gapTokenMap: Record<string, string> = {
+        xs: "var(--space-4)",
+        small: "var(--space-8)",
+        medium: "var(--space-16)",
+        large: "var(--space-24)"
+      };
+      return { gap: gapTokenMap[gap] };
     }, [gap]);
 
     const flexStyle = useMemo(() => {
@@ -127,7 +127,7 @@ const Flex = forwardRef(
 
     const overrideStyle = useMemo(() => ({ ...style, ...gapStyle, ...flexStyle }), [style, gapStyle, flexStyle]);
     const onClickProps = useMemo(() => {
-      if (onClick) return { elementType, ariaLabelledby };
+      if (onClick) return { elementType, "aria-labelledby": ariaLabelledby };
       return { "aria-labelledby": ariaLabelledby };
     }, [onClick, elementType, ariaLabelledby]);
     const Element = onClick ? Clickable : elementType;
@@ -160,16 +160,4 @@ const Flex = forwardRef(
   }
 );
 
-interface FlexStaticProps {
-  justify: typeof FlexJustifyEnum;
-  align: typeof FlexAlignEnum;
-  gaps: typeof FlexGapEnum;
-  directions: typeof FlexDirectionEnum;
-}
-
-export default withStaticProps<FlexProps, FlexStaticProps>(Flex, {
-  justify: FlexJustifyEnum,
-  align: FlexAlignEnum,
-  gaps: FlexGapEnum,
-  directions: FlexDirectionEnum
-});
+export default Flex;
diff --git a/packages/components/layout/src/Flex/Flex.types.ts b/packages/components/layout/src/Flex/Flex.types.ts
index 680c51aeec..67bf5b28b3 100644
--- a/packages/components/layout/src/Flex/Flex.types.ts
+++ b/packages/components/layout/src/Flex/Flex.types.ts
@@ -2,7 +2,7 @@ import type { CSSProperties } from "react";
 
 export type FlexAlign = "start" | "center" | "end" | "stretch" | "baseline" | "initial";
 
-export type FlexJustify = "start" | "center" | "end" | "stretch" | "space-around" | "space-between" | "initial";
+export type FlexJustify = "start" | "center" | "end" | "space-around" | "space-between" | "initial";
 
 export type FlexGap = "xs" | "small" | "medium" | "large";
 
diff --git a/packages/components/layout/src/Flex/FlexConstants.ts b/packages/components/layout/src/Flex/FlexConstants.ts
deleted file mode 100644
index e040c170af..0000000000
--- a/packages/components/layout/src/Flex/FlexConstants.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * @deprecated
- */
-export enum FlexAlign {
-  START = "start",
-  CENTER = "center",
-  END = "end",
-  STRETCH = "stretch",
-  BASELINE = "baseline",
-  INITIAL = "initial"
-}
-
-/**
- * @deprecated
- */
-export enum FlexJustify {
-  START = "start",
-  CENTER = "center",
-  END = "end",
-  STRETCH = "stretch",
-  SPACE_AROUND = "space-around",
-  SPACE_BETWEEN = "space-between",
-  INITIAL = "initial"
-}
-
-/**
- * @deprecated
- */
-export enum FlexGap {
-  XS = "xs",
-  SMALL = "small",
-  MEDIUM = "medium",
-  LARGE = "large"
-}
-
-/**
- * @deprecated
- */
-export enum FlexDirection {
-  ROW = "row",
-  COLUMN = "column"
-}
diff --git a/packages/components/layout/src/Flex/__tests__/__snapshots__/Flex.snapshot.test.tsx.snap b/packages/components/layout/src/Flex/__tests__/__snapshots__/Flex.snapshot.test.tsx.snap
index 146f5d2dba..4471280ef5 100644
--- a/packages/components/layout/src/Flex/__tests__/__snapshots__/Flex.snapshot.test.tsx.snap
+++ b/packages/components/layout/src/Flex/__tests__/__snapshots__/Flex.snapshot.test.tsx.snap
@@ -121,7 +121,7 @@ exports[`Flex renders correctly > Horizontal display > with gap 1`] = `
   className="container directionRow justifyStart alignCenter"
   style={
     {
-      "gap": "var(--spacing-large)",
+      "gap": "var(--space-24)",
     }
   }
 >
diff --git a/packages/components/loader/package.json b/packages/components/loader/package.json
index f22dcaf866..c9851fe578 100644
--- a/packages/components/loader/package.json
+++ b/packages/components/loader/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vibe/loader",
-  "version": "3.0.11",
+  "version": "4.0.0-rc.0",
   "description": "Vibe sub-package for loader components",
   "repository": {
     "type": "git",
@@ -38,16 +38,16 @@
     "lint": "eslint \"./src/**/*.{js,jsx,ts,tsx}\""
   },
   "dependencies": {
-    "@vibe/shared": "3.0.8",
+    "@vibe/shared": "^4.0.0-rc.0",
     "classnames": "^2.5.1"
   },
   "devDependencies": {
     "@testing-library/react": "^12.1.2",
-    "@vibe/config": "3.0.5",
+    "@vibe/config": "^4.0.0-rc.0",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
     "react-test-renderer": "16",
-    "typescript": "^4.7.3",
+    "typescript": "^5.9.3",
     "vitest": "^1.6.0"
   },
   "peerDependencies": {
diff --git a/packages/components/loader/src/Loader/Loader.tsx b/packages/components/loader/src/Loader/Loader.tsx
index 14df44601d..55d37586bc 100644
--- a/packages/components/loader/src/Loader/Loader.tsx
+++ b/packages/components/loader/src/Loader/Loader.tsx
@@ -1,8 +1,7 @@
 import React, { type ForwardedRef, forwardRef, useMemo } from "react";
 import cx from "classnames";
-import { LoaderColors as LoaderColorsEnum, LoaderSizes as LoaderSizesEnum } from "./LoaderConstants";
 import { type LoaderColors, type LoaderSize, type LoaderSizes } from "./Loader.types";
-import { getTestId, type VibeComponentProps, withStaticProps, ComponentDefaultTestId } from "@vibe/shared";
+import { getTestId, type VibeComponentProps, ComponentDefaultTestId } from "@vibe/shared";
 import styles from "./Loader.module.scss";
 
 const mapSizesToLoaderSize: Record<LoaderSizes, number> = {
@@ -84,12 +83,4 @@ const Loader = forwardRef(
   }
 );
 
-interface LoaderStaticProps {
-  sizes: typeof LoaderSizesEnum;
-  colors: typeof LoaderColorsEnum;
-}
-
-export default withStaticProps<LoaderProps, LoaderStaticProps>(Loader, {
-  sizes: LoaderSizesEnum,
-  colors: LoaderColorsEnum
-});
+export default Loader;
diff --git a/packages/components/loader/src/Loader/LoaderConstants.ts b/packages/components/loader/src/Loader/LoaderConstants.ts
deleted file mode 100644
index 8b31dfcb86..0000000000
--- a/packages/components/loader/src/Loader/LoaderConstants.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * @deprecated
- */
-export enum LoaderColors {
-  PRIMARY = "primary",
-  SECONDARY = "secondary",
-  ON_PRIMARY = "onPrimary",
-  DARK = "dark"
-}
-
-/**
- * @deprecated
- */
-export enum LoaderSizes {
-  XS = "xs",
-  SMALL = "small",
-  MEDIUM = "medium",
-  LARGE = "large"
-}
diff --git a/packages/components/loader/src/Loader/__tests__/Loader.test.jsx b/packages/components/loader/src/Loader/__tests__/Loader.test.tsx
similarity index 100%
rename from packages/components/loader/src/Loader/__tests__/Loader.test.jsx
rename to packages/components/loader/src/Loader/__tests__/Loader.test.tsx
diff --git a/packages/components/tooltip/package.json b/packages/components/tooltip/package.json
index c77aa4b943..2b5b8386d1 100644
--- a/packages/components/tooltip/package.json
+++ b/packages/components/tooltip/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vibe/tooltip",
-  "version": "3.0.5",
+  "version": "4.0.0-rc.0",
   "description": "Vibe sub-package for tooltip components",
   "repository": {
     "type": "git",
@@ -38,21 +38,22 @@
     "lint": "eslint \"./src/**/*.{js,jsx,ts,tsx}\""
   },
   "dependencies": {
-    "@vibe/dialog": "3.0.12",
-    "@vibe/icon": "3.0.11",
-    "@vibe/layout": "3.0.3",
-    "@vibe/shared": "3.0.8",
+    "@vibe/dialog": "^4.0.0-rc.0",
+    "@vibe/icon": "^4.0.0-rc.0",
+    "@vibe/layout": "^4.0.0-rc.0",
+    "@vibe/shared": "^4.0.0-rc.0",
+    "@vibe/style": "^4.0.0-rc.0",
     "classnames": "^2.5.1",
     "es-toolkit": "^1.39.10"
   },
   "devDependencies": {
     "@testing-library/react": "^12.1.2",
-    "@vibe/config": "3.0.5",
-    "@vibe/icons": "1.16.0",
+    "@vibe/config": "^4.0.0-rc.0",
+    "@vibe/icons": "^4.0.0-rc.0",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
     "react-test-renderer": "16",
-    "typescript": "^4.7.3",
+    "typescript": "^5.9.3",
     "vitest": "^1.6.0"
   },
   "peerDependencies": {
diff --git a/packages/components/tooltip/src/Tooltip/Tooltip.module.scss b/packages/components/tooltip/src/Tooltip/Tooltip.module.scss
index 0be926d050..e933178fc7 100644
--- a/packages/components/tooltip/src/Tooltip/Tooltip.module.scss
+++ b/packages/components/tooltip/src/Tooltip/Tooltip.module.scss
@@ -1,4 +1,4 @@
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 
 .tooltip {
   position: relative;
@@ -16,8 +16,8 @@
   .image {
     display: block;
     position: relative;
-    border-top-right-radius: 2px;
-    border-top-left-radius: 2px;
+    border-start-end-radius: 2px;
+    border-start-start-radius: 2px;
     padding: 2px 2px 0 2px;
     object-fit: cover;
     width: 100%;
@@ -33,13 +33,13 @@
   .content {
     word-break: break-word;
     display: inline-block;
-    padding: var(--tooltip-padding, #{var(--spacing-small) var(--spacing-medium)});
+    padding: var(--tooltip-padding, #{var(--space-8) var(--space-16)});
   }
 }
 
 .tooltip.paddingSizeMd {
   border-radius: var(--border-radius-medium);
-  padding: var(--spacing-medium);
+  padding: var(--space-16);
   @include vibe-text(text2, normal);
 }
 
diff --git a/packages/components/tooltip/src/Tooltip/Tooltip.tsx b/packages/components/tooltip/src/Tooltip/Tooltip.tsx
index 922277e27f..0aa20035bd 100644
--- a/packages/components/tooltip/src/Tooltip/Tooltip.tsx
+++ b/packages/components/tooltip/src/Tooltip/Tooltip.tsx
@@ -3,21 +3,8 @@ import { isFunction } from "es-toolkit";
 import { camelCase } from "es-toolkit";
 import cx from "classnames";
 import React, { type CSSProperties, isValidElement, PureComponent, type ReactElement } from "react";
-import { type Modifier } from "react-popper";
-import { Dialog, type DialogAnimationType, type DialogTriggerEvent } from "@vibe/dialog";
-import {
-  DialogTriggerEventEnum as HideShowEventEnum,
-  DialogAnimationTypeEnum as AnimationTypeEnum
-} from "@vibe/dialog";
-import {
-  type VibeComponentProps,
-  type ElementContent,
-  type MoveBy,
-  getStyle,
-  ComponentDefaultTestId,
-  getTestId
-} from "@vibe/shared";
-import { TooltipTheme as TooltipThemeEnum, TooltipPositions as TooltipPositionsEnum } from "./TooltipConstants";
+import { Dialog, type DialogProps } from "@vibe/dialog";
+import { type ElementContent, getStyle, ComponentDefaultTestId, getTestId } from "@vibe/shared";
 import styles from "./Tooltip.module.scss";
 import { Icon, type SubIcon } from "@vibe/icon";
 import { Flex } from "@vibe/layout";
@@ -47,8 +34,7 @@ interface TooltipWithChildrenProps {
   children: ReactElement | Array<ReactElement>;
 }
 
-// TODO TS-migration extend DialogProps, once Dialog is migrated to TS
-interface TooltipBaseProps extends VibeComponentProps {
+interface TooltipBaseProps extends Omit<DialogProps, "position" | "content" | "children"> {
   /**
    * The content displayed inside the tooltip.
    */
@@ -61,10 +47,6 @@ interface TooltipBaseProps extends VibeComponentProps {
    * Class name applied to the tooltip arrow.
    */
   arrowClassName?: string;
-  /**
-   * Offset values for positioning adjustments.
-   */
-  moveBy?: MoveBy;
   /**
    * The theme of the tooltip.
    */
@@ -73,30 +55,14 @@ interface TooltipBaseProps extends VibeComponentProps {
    * Function to get the container where the tooltip should be rendered.
    */
   getContainer?: () => HTMLElement;
-  /**
-   * Delay in milliseconds before hiding the tooltip.
-   */
-  hideDelay?: number;
-  /**
-   * Delay in milliseconds before showing the tooltip.
-   */
-  showDelay?: number;
   /**
    * If true, disables the slide animation of the tooltip.
    */
   disableDialogSlide?: boolean;
-  /**
-   * The animation type used for showing/hiding the tooltip.
-   */
-  animationType?: DialogAnimationType;
   /**
    * If true, renders the tooltip without a dialog.
    */
   withoutDialog?: boolean;
-  /**
-   * The CSS selector of the container where the tooltip should be rendered.
-   */
-  containerSelector?: string;
   /**
    * Delay in milliseconds before showing the tooltip immediately.
    */
@@ -105,14 +71,6 @@ interface TooltipBaseProps extends VibeComponentProps {
    * If false, hides the arrow of the tooltip.
    */
   tip?: boolean;
-  /**
-   * If true, the tooltip is shown when the component mounts.
-   */
-  shouldShowOnMount?: boolean;
-  /**
-   * If true, hides the tooltip when the reference element is hidden.
-   */
-  hideWhenReferenceHidden?: boolean;
   /**
    * Callback fired when the tooltip is hidden.
    */
@@ -121,43 +79,10 @@ interface TooltipBaseProps extends VibeComponentProps {
    * Callback fired when the tooltip is shown.
    */
   onTooltipShow?: () => void;
-  /**
-   * Custom Popper.js modifiers.
-   * https://popper.js.org/docs/v2/modifiers/
-   */
-  modifiers?: Array<Modifier<unknown>>;
   /**
    * The placement of the tooltip relative to the reference element.
    */
   position?: TooltipPositions;
-  /**
-   * Events that trigger showing the tooltip.
-   */
-  showTrigger?: DialogTriggerEvent | Array<DialogTriggerEvent>;
-  /**
-   * Events that trigger hiding the tooltip.
-   */
-  hideTrigger?: DialogTriggerEvent | Array<DialogTriggerEvent>;
-  /**
-   * If true, prevents closing the tooltip when the mouse enters it.
-   */
-  showOnDialogEnter?: boolean;
-  /**
-   * Class name applied to the reference wrapper element.
-   */
-  referenceWrapperClassName?: string;
-  /**
-   * If true, keyboard focus/blur events behave like mouse enter/leave.
-   */
-  addKeyboardHideShowTriggersByDefault?: boolean;
-  /**
-   * If true, controls the open state of the tooltip.
-   */
-  open?: boolean;
-  /**
-   * The z-index applied to the tooltip.
-   */
-  zIndex?: number;
   /**
    * The title of the tooltip.
    */
@@ -190,10 +115,7 @@ const globalState: { lastTooltipHideTS: number; openTooltipsCount: number } = {
 
 export default class Tooltip extends PureComponent<TooltipProps> {
   wasShown: boolean;
-  static positions = TooltipPositionsEnum;
-  static hideShowTriggers = HideShowEventEnum;
-  static themes = TooltipThemeEnum;
-  static animationTypes = AnimationTypeEnum;
+  /* eslint-disable react/default-props-match-prop-types -- props inherited from DialogProps via Omit<> */
   static defaultProps = {
     moveBy: { main: 4, secondary: 0 },
     theme: "dark",
@@ -201,18 +123,18 @@ export default class Tooltip extends PureComponent<TooltipProps> {
     hideDelay: 100,
     showDelay: 300,
     disableDialogSlide: true,
-    animationType: AnimationTypeEnum.EXPAND,
+    animationType: "expand",
     withoutDialog: false,
     tip: true,
     hideWhenReferenceHidden: false,
-    modifiers: new Array<Modifier<unknown>>(),
-    showTrigger: Tooltip.hideShowTriggers.MOUSE_ENTER,
-    hideTrigger: Tooltip.hideShowTriggers.MOUSE_LEAVE,
+    showTrigger: "mouseenter",
+    hideTrigger: "mouseleave",
     showOnDialogEnter: true,
     referenceWrapperClassName: "",
     addKeyboardHideShowTriggersByDefault: true,
     open: false
   };
+  /* eslint-enable react/default-props-match-prop-types */
   constructor(props: TooltipProps) {
     super(props);
     this.renderTooltipContent = this.renderTooltipContent.bind(this);
@@ -255,7 +177,7 @@ export default class Tooltip extends PureComponent<TooltipProps> {
         <div className={cx(styles.content)}>
           {title && (
             <Flex gap="xs">
-              {icon && <Icon iconSize="20" icon={icon} />}
+              {icon && <Icon size="20" icon={icon} />}
               <div className={styles.title}>{title}</div>
             </Flex>
           )}
diff --git a/packages/components/tooltip/src/Tooltip/TooltipConstants.ts b/packages/components/tooltip/src/Tooltip/TooltipConstants.ts
deleted file mode 100644
index 15f7f3bedb..0000000000
--- a/packages/components/tooltip/src/Tooltip/TooltipConstants.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * @deprecated
- */
-export enum TooltipPositions {
-  TOP = "top",
-  RIGHT = "right",
-  BOTTOM = "bottom",
-  LEFT = "left"
-}
-
-/**
- * @deprecated
- */
-export enum TooltipTheme {
-  Dark = "dark",
-  Primary = "primary"
-}
diff --git a/packages/components/tooltip/src/Tooltip/__tests__/__snapshots__/Tooltip.snapshot.test.tsx.snap b/packages/components/tooltip/src/Tooltip/__tests__/__snapshots__/Tooltip.snapshot.test.tsx.snap
index a87e9b676a..2eeba803d1 100644
--- a/packages/components/tooltip/src/Tooltip/__tests__/__snapshots__/Tooltip.snapshot.test.tsx.snap
+++ b/packages/components/tooltip/src/Tooltip/__tests__/__snapshots__/Tooltip.snapshot.test.tsx.snap
@@ -9,9 +9,9 @@ exports[`Tooltip renders correctly > with data-testid 1`] = `
   </div>
   <span
     class="monday-style-dialog-content-wrapper contentWrapper"
-    data-popper-reference-hidden="false"
+    data-dialog-reference-hidden="false"
     data-testid="test"
-    style="position: absolute; left: 0px; top: 0px;"
+    style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 0px);"
   >
     <div
       class="contentComponent top hasTooltip expandAppear expandAppearActive"
@@ -28,7 +28,6 @@ exports[`Tooltip renders correctly > with data-testid 1`] = `
       <div
         class="arrow arrow dark"
         data-placement="top"
-        style="position: absolute;"
       />
     </div>
   </span>
@@ -44,8 +43,9 @@ exports[`Tooltip renders correctly > with hideWhenReferenceHidden 1`] = `
   </div>
   <span
     class="monday-style-dialog-content-wrapper contentWrapper"
+    data-dialog-reference-hidden="false"
     data-testid="tooltip"
-    style="position: absolute; left: 0px; top: 0px;"
+    style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 0px);"
   >
     <div
       class="contentComponent top hasTooltip expandAppear expandAppearActive"
@@ -62,7 +62,6 @@ exports[`Tooltip renders correctly > with hideWhenReferenceHidden 1`] = `
       <div
         class="arrow arrow dark"
         data-placement="top"
-        style="position: absolute;"
       />
     </div>
   </span>
@@ -78,9 +77,9 @@ exports[`Tooltip renders correctly > with position 1`] = `
   </div>
   <span
     class="monday-style-dialog-content-wrapper contentWrapper"
-    data-popper-reference-hidden="false"
+    data-dialog-reference-hidden="false"
     data-testid="tooltip"
-    style="position: absolute; left: 0px; top: 0px;"
+    style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 0px);"
   >
     <div
       class="contentComponent left hasTooltip expandAppear expandAppearActive"
@@ -97,7 +96,6 @@ exports[`Tooltip renders correctly > with position 1`] = `
       <div
         class="arrow arrow dark"
         data-placement="left"
-        style="position: absolute;"
       />
     </div>
   </span>
@@ -113,9 +111,9 @@ exports[`Tooltip renders correctly > with style 1`] = `
   </div>
   <span
     class="monday-style-dialog-content-wrapper contentWrapper"
-    data-popper-reference-hidden="false"
+    data-dialog-reference-hidden="false"
     data-testid="tooltip"
-    style="position: absolute; left: 0px; top: 0px;"
+    style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 0px);"
   >
     <div
       class="contentComponent top hasTooltip expandAppear expandAppearActive"
@@ -133,7 +131,6 @@ exports[`Tooltip renders correctly > with style 1`] = `
       <div
         class="arrow arrow dark"
         data-placement="top"
-        style="position: absolute;"
       />
     </div>
   </span>
@@ -149,9 +146,9 @@ exports[`Tooltip renders correctly > with theme 1`] = `
   </div>
   <span
     class="monday-style-dialog-content-wrapper contentWrapper"
-    data-popper-reference-hidden="false"
+    data-dialog-reference-hidden="false"
     data-testid="tooltip"
-    style="position: absolute; left: 0px; top: 0px;"
+    style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 0px);"
   >
     <div
       class="contentComponent top hasTooltip expandAppear expandAppearActive"
@@ -168,7 +165,6 @@ exports[`Tooltip renders correctly > with theme 1`] = `
       <div
         class="arrow arrow primary"
         data-placement="top"
-        style="position: absolute;"
       />
     </div>
   </span>
@@ -196,9 +192,9 @@ exports[`Tooltip renders correctly > without arrow 1`] = `
   </div>
   <span
     class="monday-style-dialog-content-wrapper contentWrapper"
-    data-popper-reference-hidden="false"
+    data-dialog-reference-hidden="false"
     data-testid="tooltip"
-    style="position: absolute; left: 0px; top: 0px;"
+    style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 0px);"
   >
     <div
       class="contentComponent top expandAppear expandAppearActive"
diff --git a/packages/components/tooltip/src/Tooltip/index.ts b/packages/components/tooltip/src/Tooltip/index.ts
index b65d058c07..c83426eb78 100644
--- a/packages/components/tooltip/src/Tooltip/index.ts
+++ b/packages/components/tooltip/src/Tooltip/index.ts
@@ -1,3 +1,2 @@
 export { default as Tooltip, type TooltipProps } from "./Tooltip";
-export { TooltipPositions as TooltipPositionsEnum, TooltipTheme as TooltipThemeEnum } from "./TooltipConstants";
 export * from "./Tooltip.types";
diff --git a/packages/components/typography/package.json b/packages/components/typography/package.json
index 32eae3552f..e8255f5d86 100644
--- a/packages/components/typography/package.json
+++ b/packages/components/typography/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vibe/typography",
-  "version": "3.0.5",
+  "version": "4.0.0-rc.0",
   "description": "Vibe sub-package for typography components (Text and Typography)",
   "repository": {
     "type": "git",
@@ -37,20 +37,20 @@
     "lint": "eslint \"./src/**/*.{js,jsx,ts,tsx}\""
   },
   "dependencies": {
-    "@vibe/hooks": "3.0.3",
-    "@vibe/shared": "3.0.8",
-    "@vibe/tooltip": "3.0.5",
+    "@vibe/hooks": "^4.0.0-rc.0",
+    "@vibe/shared": "^4.0.0-rc.0",
+    "@vibe/style": "^4.0.0-rc.0",
+    "@vibe/tooltip": "^4.0.0-rc.0",
     "classnames": "^2.5.1",
-    "es-toolkit": "^1.39.10",
-    "monday-ui-style": "0.26.2"
+    "es-toolkit": "^1.39.10"
   },
   "devDependencies": {
     "@testing-library/react": "^12.1.2",
-    "@vibe/config": "3.0.5",
+    "@vibe/config": "^4.0.0-rc.0",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
     "react-test-renderer": "16",
-    "typescript": "^4.7.3",
+    "typescript": "^5.9.3",
     "vitest": "^1.6.0"
   },
   "peerDependencies": {
diff --git a/packages/components/typography/src/Heading/Heading.module.scss b/packages/components/typography/src/Heading/Heading.module.scss
index 00b3c80b1a..a22a3bae0b 100644
--- a/packages/components/typography/src/Heading/Heading.module.scss
+++ b/packages/components/typography/src/Heading/Heading.module.scss
@@ -1,4 +1,4 @@
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 @import "../styles/typography";
 
 @include create-title-classes;
diff --git a/packages/components/typography/src/Heading/Heading.tsx b/packages/components/typography/src/Heading/Heading.tsx
index a44cdfca91..4f54f80ab1 100644
--- a/packages/components/typography/src/Heading/Heading.tsx
+++ b/packages/components/typography/src/Heading/Heading.tsx
@@ -1,13 +1,8 @@
 import React, { forwardRef, type ReactNode } from "react";
 import cx from "classnames";
 import { camelCase } from "es-toolkit";
-import { getStyle, withStaticProps } from "@vibe/shared";
-import { HeadingType as HeadingTypeEnum, HeadingWeight as HeadingWeightEnum } from "./HeadingConstants";
+import { getStyle } from "@vibe/shared";
 import Typography, { type TypographyProps } from "../Typography/Typography";
-import {
-  TypographyAlign as TypographyAlignEnum,
-  TypographyColor as TypographyColorEnum
-} from "../Typography/TypographyConstants";
 import { TypographyContext } from "../Typography/TypographyContext";
 import styles from "./Heading.module.scss";
 import { type HeadingType, type HeadingWeight } from "./Heading.types";
@@ -56,16 +51,4 @@ const Heading = forwardRef(
   }
 );
 
-interface HeadingStaticProps {
-  types: typeof HeadingTypeEnum;
-  weights: typeof HeadingWeightEnum;
-  colors: typeof TypographyColorEnum;
-  align: typeof TypographyAlignEnum;
-}
-
-export default withStaticProps<HeadingProps, HeadingStaticProps>(Heading, {
-  types: HeadingTypeEnum,
-  weights: HeadingWeightEnum,
-  align: TypographyAlignEnum,
-  colors: TypographyColorEnum
-});
+export default Heading;
diff --git a/packages/components/typography/src/Heading/HeadingConstants.ts b/packages/components/typography/src/Heading/HeadingConstants.ts
deleted file mode 100644
index 7a9b676854..0000000000
--- a/packages/components/typography/src/Heading/HeadingConstants.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * @deprecated
- */
-export enum HeadingType {
-  H1 = "h1",
-  H2 = "h2",
-  H3 = "h3"
-}
-
-/**
- * @deprecated
- */
-export enum HeadingWeight {
-  BOLD = "bold",
-  MEDIUM = "medium",
-  NORMAL = "normal",
-  LIGHT = "light"
-}
diff --git a/packages/components/typography/src/Text/Text.module.scss b/packages/components/typography/src/Text/Text.module.scss
index db1465f307..f2aca2c9dd 100644
--- a/packages/components/typography/src/Text/Text.module.scss
+++ b/packages/components/typography/src/Text/Text.module.scss
@@ -7,7 +7,7 @@ p:first-of-type.text {
 }
 
 p.text + p {
-  margin-block-start: var(--spacing-large);
+  margin-block-start: var(--space-24);
   margin-block-end: 0;
 }
 
diff --git a/packages/components/typography/src/Text/Text.tsx b/packages/components/typography/src/Text/Text.tsx
index 965bcc5b9c..077ce6c55a 100644
--- a/packages/components/typography/src/Text/Text.tsx
+++ b/packages/components/typography/src/Text/Text.tsx
@@ -1,13 +1,8 @@
 import React, { forwardRef, type ReactNode } from "react";
 import cx from "classnames";
 import { camelCase } from "es-toolkit";
-import { getStyle, withStaticProps } from "@vibe/shared";
-import { TextType as TextTypeEnum, TextWeight as TextWeightEnum } from "./TextConstants";
+import { getStyle } from "@vibe/shared";
 import Typography, { type TypographyProps } from "../Typography/Typography";
-import {
-  TypographyAlign as TypographyAlignEnum,
-  TypographyColor as TypographyColorEnum
-} from "../Typography/TypographyConstants";
 import { type TextType, type TextWeight } from "./Text.types";
 import styles from "./Text.module.scss";
 
@@ -54,16 +49,4 @@ const Text = forwardRef(
   }
 );
 
-interface TextStaticProps {
-  types: typeof TextTypeEnum;
-  weights: typeof TextWeightEnum;
-  colors: typeof TypographyColorEnum;
-  align: typeof TypographyAlignEnum;
-}
-
-export default withStaticProps<TextProps, TextStaticProps>(Text, {
-  types: TextTypeEnum,
-  weights: TextWeightEnum,
-  colors: TypographyColorEnum,
-  align: TypographyAlignEnum
-});
+export default Text;
diff --git a/packages/components/typography/src/Text/TextConstants.ts b/packages/components/typography/src/Text/TextConstants.ts
deleted file mode 100644
index 39a8c9d10c..0000000000
--- a/packages/components/typography/src/Text/TextConstants.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * @deprecated
- */
-export enum TextType {
-  TEXT1 = "text1",
-  TEXT2 = "text2",
-  TEXT3 = "text3"
-}
-
-/**
- * @deprecated
- */
-export enum TextWeight {
-  BOLD = "bold",
-  MEDIUM = "medium",
-  NORMAL = "normal"
-}
diff --git a/packages/components/typography/src/Typography/Typography.module.scss b/packages/components/typography/src/Typography/Typography.module.scss
index f13a4bac31..510658abbd 100644
--- a/packages/components/typography/src/Typography/Typography.module.scss
+++ b/packages/components/typography/src/Typography/Typography.module.scss
@@ -1,4 +1,4 @@
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 
 .typography {
   // TODO: [breaking] remove anchor styles
diff --git a/packages/components/typography/src/Typography/TypographyConstants.ts b/packages/components/typography/src/Typography/TypographyConstants.ts
deleted file mode 100644
index fa7b861abb..0000000000
--- a/packages/components/typography/src/Typography/TypographyConstants.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * @deprecated
- */
-export enum TypographyColor {
-  PRIMARY = "primary",
-  SECONDARY = "secondary",
-  ON_PRIMARY = "onPrimary",
-  ON_INVERTED = "onInverted",
-  FIXED_LIGHT = "fixedLight",
-  FIXED_DARK = "fixedDark",
-  INHERIT = "inherit",
-  NEGATIVE = "negative"
-}
-
-/**
- * @deprecated
- */
-export enum TypographyAlign {
-  START = "start",
-  CENTER = "center",
-  END = "end",
-  INHERIT = "inherit"
-}
diff --git a/packages/components/typography/src/index.ts b/packages/components/typography/src/index.ts
index 21a1426fc3..f9a4b77a71 100644
--- a/packages/components/typography/src/index.ts
+++ b/packages/components/typography/src/index.ts
@@ -1,7 +1,4 @@
 export { Text, type TextProps, type TextType, type TextWeight } from "./Text";
 export { Heading, type HeadingProps, type HeadingType, type HeadingWeight } from "./Heading";
 
-export { TextType as TextTypeEnum, TextWeight as TextWeightEnum } from "./Text/TextConstants";
-export { HeadingType as HeadingTypeEnum, HeadingWeight as HeadingWeightEnum } from "./Heading/HeadingConstants";
-
 export type { TypographyColor, TypographyAlign } from "./Typography";
diff --git a/packages/components/typography/src/styles/typography.scss b/packages/components/typography/src/styles/typography.scss
index 0752cd3170..8bbac7bbf9 100644
--- a/packages/components/typography/src/styles/typography.scss
+++ b/packages/components/typography/src/styles/typography.scss
@@ -1,6 +1,6 @@
 @use "sass:string";
-@import "~monday-ui-style/dist/mixins";
-@import "~monday-ui-style/dist/functions";
+@import "~@vibe/style/dist/mixins";
+@import "~@vibe/style/dist/functions";
 
 @mixin create-text-classes() {
   @include create-typography-classes($textClasses, text);
diff --git a/packages/config/package.json b/packages/config/package.json
index 3d1381861a..b86f758d34 100644
--- a/packages/config/package.json
+++ b/packages/config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vibe/config",
-  "version": "3.0.5",
+  "version": "4.0.0-rc.0",
   "private": true,
   "description": "Shared configurations for Vibe packages",
   "repository": {
@@ -23,7 +23,7 @@
     "./vitest.config": "./vitest.config.mjs"
   },
   "devDependencies": {
-    "typescript": "^4.7.3"
+    "typescript": "^5.9.3"
   },
   "dependencies": {
     "@rollup/plugin-babel": "^6.0.2",
diff --git a/packages/config/rollup.config.mjs b/packages/config/rollup.config.mjs
index e716ceb351..287b9ef12e 100644
--- a/packages/config/rollup.config.mjs
+++ b/packages/config/rollup.config.mjs
@@ -64,7 +64,7 @@ export default {
   },
   input: path.join(SRC_PATH, "index.ts"),
   external: [
-    /node_modules\/(?!monday-ui-style)(.*)/,
+    /node_modules\/(?!@vibe\/style)(.*)/,
     /@vibe\/.*/ // Externalize all @vibe packages
   ],
   plugins: [
diff --git a/packages/core/.stylelintrc.json b/packages/core/.stylelintrc.json
index bb25e4a2db..d3bf4c00ba 100644
--- a/packages/core/.stylelintrc.json
+++ b/packages/core/.stylelintrc.json
@@ -1,15 +1,15 @@
 {
-  "extends": ["stylelint-config-recommended-scss", "monday-ui-style/stylelint-config"],
+  "extends": ["stylelint-config-recommended-scss", "@vibe/style/stylelint-config"],
   "plugins": ["stylelint-use-logical", "stylelint-no-unsupported-browser-features"],
   "rules": {
     "no-descending-specificity": null,
-    "monday-ui-style/use-defined-css-var-when-available": [
+    "@vibe/style/use-defined-css-var-when-available": [
       true,
       {
         "severity": "warning"
       }
     ],
-    "monday-ui-style/use-new-spacing-tokens": [
+    "@vibe/style/use-new-spacing-tokens": [
       null,
       {
         "severity": "warning"
diff --git a/packages/core/README.md b/packages/core/README.md
index d97fe65534..67e979a6d0 100644
--- a/packages/core/README.md
+++ b/packages/core/README.md
@@ -13,6 +13,18 @@ Components are imported from the library's root entry:
 import { Button } from "@vibe/core";
 ```
 
+### Global CSS Setup
+
+Vibe components require `box-sizing: border-box` to be applied globally. Add the following to your root stylesheet:
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+```
+
 ### Font installation
 
 We don't import fonts ourselves, we work best with the following fonts -
diff --git a/packages/core/package.json b/packages/core/package.json
index e50d2dc6f0..e66a266f4c 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vibe/core",
-  "version": "3.88.0",
+  "version": "4.0.0-rc.0",
   "description": "Official monday.com UI resources for application development in React.js",
   "repository": {
     "type": "git",
@@ -90,42 +90,34 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.2",
-    "@popperjs/core": "2.11.6",
-    "@vibe/base": "3.0.5",
-    "@vibe/button": "3.0.16",
-    "@vibe/clickable": "3.0.3",
-    "@vibe/dialog": "3.0.12",
-    "@vibe/hooks": "3.0.3",
-    "@vibe/icon": "3.0.11",
-    "@vibe/icon-button": "3.0.5",
-    "@vibe/icons": "1.16.0",
-    "@vibe/layer": "3.0.10",
-    "@vibe/layout": "3.0.3",
-    "@vibe/loader": "3.0.11",
-    "@vibe/shared": "3.0.8",
-    "@vibe/tooltip": "3.0.5",
-    "@vibe/typography": "3.0.5",
-    "a11y-dialog": "^7.5.2",
-    "body-scroll-lock": "^4.0.0-beta.0",
+    "@vibe/base": "^4.0.0-rc.0",
+    "@vibe/button": "^4.0.0-rc.0",
+    "@vibe/clickable": "^4.0.0-rc.0",
+    "@vibe/dialog": "^4.0.0-rc.0",
+    "@vibe/hooks": "^4.0.0-rc.0",
+    "@vibe/icon": "^4.0.0-rc.0",
+    "@vibe/icon-button": "^4.0.0-rc.0",
+    "@vibe/icons": "^4.0.0-rc.0",
+    "@vibe/layer": "^4.0.0-rc.0",
+    "@vibe/layout": "^4.0.0-rc.0",
+    "@vibe/loader": "^4.0.0-rc.0",
+    "@vibe/shared": "^4.0.0-rc.0",
+    "@vibe/style": "^4.0.0-rc.0",
+    "@vibe/tooltip": "^4.0.0-rc.0",
+    "@vibe/typography": "^4.0.0-rc.0",
     "browserslist-config-monday": "1.0.6",
     "classnames": "^2.3.2",
     "date-fns": "^2.30.0",
     "downshift": "^9.0.8",
     "es-toolkit": "^1.39.10",
-    "framer-motion": "^6.5.1",
-    "monday-ui-style": "0.26.2",
-    "react-dates": "21.8.0",
     "react-day-picker": "^8.8.0",
     "react-focus-lock": "^2.13.2",
     "react-inlinesvg": "^4.1.3",
     "react-is": "^16.9.0",
-    "react-popper": "^2.3.0",
     "react-remove-scroll": "^2.6.0",
-    "react-select": "npm:react-select-module@3.4.0",
     "react-transition-group": "^4.4.5",
     "react-virtualized-auto-sizer": "^1.0.7",
     "react-window": "^1.8.7",
-    "react-windowed-select": "^2.0.4",
     "style-inject": "^0.3.0"
   },
   "devDependencies": {
@@ -177,13 +169,10 @@
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^13.5.0",
     "@types/babel__standalone": "^7.1.7",
-    "@types/body-scroll-lock": "^3.1.0",
     "@types/jest-axe": "^3.5.9",
     "@types/react": "^18.0.25",
-    "@types/react-dates": "^21.8.3",
     "@types/react-is": "^16.7.5",
     "@types/react-resizable": "^3.0.7",
-    "@types/react-select": "^3.1.2",
     "@types/react-syntax-highlighter": "^11.0.5",
     "@types/react-test-renderer": "^16.9.0",
     "@types/react-transition-group": "^4.4.5",
@@ -194,7 +183,7 @@
     "@uiw/codemirror-extensions-langs": "^4.21.25",
     "@uiw/codemirror-theme-github": "^4.21.25",
     "@uiw/react-codemirror": "^4.21.25",
-    "@vibe/config": "3.0.5",
+    "@vibe/config": "^4.0.0-rc.0",
     "@vitejs/plugin-react": "^4.3.1",
     "@vitest/coverage-v8": "^1.6.0",
     "@vitest/ui": "^1.6.0",
@@ -265,14 +254,13 @@
     "ts-morph": "^25.0.1",
     "ts-node": "^10.9.2",
     "tsx": "^4.20.3",
-    "typescript": "^4.7.3",
+    "typescript": "^5.9.3",
     "typescript-plugin-css-modules": "^4.2.1",
-    "vibe-storybook-components": "1.0.7",
+    "vibe-storybook-components": "^4.0.0-rc.0",
     "vite": "^5.3.1",
     "vitest": "^1.6.0"
   },
   "peerDependencies": {
-    "moment": "^2.29.1",
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"
   },
diff --git a/packages/core/rollup.config.js b/packages/core/rollup.config.js
index 1894a5e643..b186c6bad3 100644
--- a/packages/core/rollup.config.js
+++ b/packages/core/rollup.config.js
@@ -100,7 +100,7 @@ export default {
     testIds: path.join(SRC_PATH, "tests/test-ids-utils.ts"),
     next: path.join(SRC_PATH, "components/next.ts")
   },
-  external: [/node_modules\/(?!monday-ui-style)(.*)/],
+  external: [/node_modules\/(?!@vibe\/style)(.*)/],
   plugins: [
     ...(shouldMockModularClassnames
       ? [
@@ -176,7 +176,7 @@ export default {
     copy({
       targets: [
         {
-          src: "../../node_modules/monday-ui-style/dist/index.min.css",
+          src: "../../node_modules/@vibe/style/dist/index.min.css",
           dest: "dist/tokens",
           rename: () => "tokens.css"
         },
diff --git a/packages/core/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/core/src/__tests__/__snapshots__/exports.test.ts.snap
index 19a9c9df72..b2ee49832e 100644
--- a/packages/core/src/__tests__/__snapshots__/exports.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/exports.test.ts.snap
@@ -9,7 +9,6 @@ exports[`exports > should export all components 1`] = `
   "AlertBannerLink",
   "AlertBannerText",
   "AttentionBox",
-  "AttentionBoxLink",
   "Avatar",
   "AvatarGroup",
   "Badge",
@@ -34,9 +33,6 @@ exports[`exports > should export all components 1`] = `
   "DialogContentContainer",
   "Divider",
   "Dropdown",
-  "DropdownMenu",
-  "DropdownOption",
-  "DropdownSingleValue",
   "EditableHeading",
   "EditableText",
   "EmptyState",
@@ -51,7 +47,6 @@ exports[`exports > should export all components 1`] = `
   "Info",
   "Label",
   "LayerProvider",
-  "LinearProgressBar",
   "Link",
   "List",
   "ListItem",
@@ -67,12 +62,17 @@ exports[`exports > should export all components 1`] = `
   "MenuItemButton",
   "MenuTitle",
   "Modal",
+  "ModalBasicLayout",
   "ModalContent",
   "ModalFooter",
-  "ModalFooterButtons",
+  "ModalFooterWizard",
   "ModalHeader",
+  "ModalMedia",
+  "ModalMediaLayout",
+  "ModalSideBySideLayout",
   "MultiStepIndicator",
   "NumberField",
+  "ProgressBar",
   "RadioButton",
   "Search",
   "Skeleton",
@@ -101,7 +101,6 @@ exports[`exports > should export all components 1`] = `
   "ThemeProvider",
   "Tipseen",
   "TipseenContent",
-  "TipseenImage",
   "TipseenMedia",
   "TipseenWizard",
   "Toast",
@@ -130,9 +129,7 @@ exports[`exports > should export all hooks 1`] = `
   "useIsMouseOver",
   "useIsOverflowing",
   "useKeyEvent",
-  "useListenFocusTriggers",
   "useMediaQuery",
-  "useMergeRefs",
   "usePrevious",
   "useResizeObserver",
   "useSetFocus",
@@ -145,21 +142,8 @@ exports[`exports > should export all hooks 1`] = `
 
 exports[`exports > should export next all components 1`] = `
 [
-  "AttentionBox",
-  "DatePicker",
-  "Dialog",
-  "Dropdown",
   "List",
   "ListItem",
   "ListTitle",
-  "Modal",
-  "ModalBasicLayout",
-  "ModalContent",
-  "ModalFooter",
-  "ModalFooterWizard",
-  "ModalHeader",
-  "ModalMedia",
-  "ModalMediaLayout",
-  "ModalSideBySideLayout",
 ]
 `;
diff --git a/packages/core/src/components/Accordion/Accordion/Accordion.module.scss b/packages/core/src/components/Accordion/Accordion/Accordion.module.scss
index 77403e2ef7..1d89f50726 100644
--- a/packages/core/src/components/Accordion/Accordion/Accordion.module.scss
+++ b/packages/core/src/components/Accordion/Accordion/Accordion.module.scss
@@ -8,8 +8,7 @@
 .accordion .accordionItemExpandCollapse {
   border-radius: 0;
   border-top: none;
-  border-left: none;
-  border-right: none;
+  border-inline: none;
   border-color: var(--ui-border-color);
 }
 
diff --git a/packages/core/src/components/AlertBanner/AlertBanner.module.scss b/packages/core/src/components/AlertBanner/AlertBanner.module.scss
index 595c0f409e..c85bf0dac1 100644
--- a/packages/core/src/components/AlertBanner/AlertBanner.module.scss
+++ b/packages/core/src/components/AlertBanner/AlertBanner.module.scss
@@ -38,7 +38,7 @@
   min-width: 0;
   align-items: center;
   justify-content: center;
-  padding-left: var(--spacing-medium);
+  padding-inline-start: var(--space-16);
 }
 
 .closeButtonWrapper {
@@ -50,7 +50,7 @@
 
 .closeBtn {
   position: absolute;
-  right: 4px;
+  inset-inline-end: 4px;
   top: 4px;
 }
 
diff --git a/packages/core/src/components/AlertBanner/AlertBanner.tsx b/packages/core/src/components/AlertBanner/AlertBanner.tsx
index 2f1d78da06..3accbbdecb 100644
--- a/packages/core/src/components/AlertBanner/AlertBanner.tsx
+++ b/packages/core/src/components/AlertBanner/AlertBanner.tsx
@@ -3,7 +3,6 @@ import cx from "classnames";
 import React, { type ForwardedRef, forwardRef, type ReactElement, useMemo } from "react";
 import { IconButton } from "@vibe/icon-button";
 import { CloseSmall } from "@vibe/icons";
-import { AlertBannerBackgroundColor as AlertBannerBackgroundColorEnum } from "./AlertBannerConstants";
 import { type AlertBannerBackgroundColor } from "./AlertBanner.types";
 import { NOOP } from "../../utils/function-utils";
 import { type AlertBannerLinkProps } from "./AlertBannerLink/AlertBannerLink";
@@ -11,7 +10,7 @@ import { type AlertBannerButtonProps } from "./AlertBannerButton/AlertBannerButt
 import { type AlertBannerTextProps } from "./AlertBannerText/AlertBannerText";
 import { ComponentDefaultTestId, ComponentVibeId } from "../../tests/constants";
 import { getTestId } from "../../tests/test-ids-utils";
-import { type VibeComponentProps, withStaticProps } from "../../types";
+import { type VibeComponentProps } from "../../types";
 import styles from "./AlertBanner.module.scss";
 import { Text } from "@vibe/typography";
 import { AlertBannerContext } from "./AlertBannerContext";
@@ -30,7 +29,7 @@ export interface AlertBannerProps extends VibeComponentProps {
   /**
    * The ARIA label of the alert banner for accessibility.
    */
-  ariaLabel?: string;
+  "aria-label"?: string;
   /**
    * The ARIA label of the close button for accessibility.
    */
@@ -52,7 +51,7 @@ const AlertBanner = forwardRef(
       className,
       backgroundColor = "primary",
       onClose = NOOP,
-      ariaLabel = "",
+      "aria-label": ariaLabel = "",
       closeButtonAriaLabel = "Close",
       isCloseHidden = false,
       id,
@@ -145,7 +144,7 @@ const AlertBanner = forwardRef(
               size="small"
               kind="tertiary"
               color={isDarkBackground ? "on-inverted-background" : "on-primary-color"}
-              ariaLabel={closeButtonAriaLabel}
+              aria-label={closeButtonAriaLabel}
             />
           )}
         </div>
@@ -154,10 +153,4 @@ const AlertBanner = forwardRef(
   }
 );
 
-interface AlertBannerStaticProps {
-  backgroundColors: typeof AlertBannerBackgroundColorEnum;
-}
-
-export default withStaticProps<AlertBannerProps, AlertBannerStaticProps>(AlertBanner, {
-  backgroundColors: AlertBannerBackgroundColorEnum
-});
+export default AlertBanner;
diff --git a/packages/core/src/components/AlertBanner/AlertBannerButton/AlertBannerButton.module.scss b/packages/core/src/components/AlertBanner/AlertBannerButton/AlertBannerButton.module.scss
index 074d4ae115..9048472310 100644
--- a/packages/core/src/components/AlertBanner/AlertBannerButton/AlertBannerButton.module.scss
+++ b/packages/core/src/components/AlertBanner/AlertBannerButton/AlertBannerButton.module.scss
@@ -9,5 +9,5 @@
 }
 
 .marginLeft {
-  margin-left: var(--spacing-small);
+  margin-inline-start: var(--space-8);
 }
diff --git a/packages/core/src/components/AlertBanner/AlertBannerConstants.ts b/packages/core/src/components/AlertBanner/AlertBannerConstants.ts
deleted file mode 100644
index 5b717f02d3..0000000000
--- a/packages/core/src/components/AlertBanner/AlertBannerConstants.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * @deprecated
- */
-export enum AlertBannerBackgroundColor {
-  PRIMARY = "primary",
-  POSITIVE = "positive",
-  NEGATIVE = "negative",
-  DARK = "dark",
-  WARNING = "warning"
-}
diff --git a/packages/core/src/components/AlertBanner/AlertBannerLink/AlertBannerLink.module.scss b/packages/core/src/components/AlertBanner/AlertBannerLink/AlertBannerLink.module.scss
index 53596f03f5..b0311f19c4 100644
--- a/packages/core/src/components/AlertBanner/AlertBannerLink/AlertBannerLink.module.scss
+++ b/packages/core/src/components/AlertBanner/AlertBannerLink/AlertBannerLink.module.scss
@@ -13,5 +13,5 @@
 }
 
 .marginLeft {
-  margin-left: var(--spacing-small);
+  margin-inline-start: var(--space-8);
 }
diff --git a/packages/core/src/components/AlertBanner/AlertBannerText/AlertBannerText.module.scss b/packages/core/src/components/AlertBanner/AlertBannerText/AlertBannerText.module.scss
index 6d5b90525f..6689e502f2 100644
--- a/packages/core/src/components/AlertBanner/AlertBannerText/AlertBannerText.module.scss
+++ b/packages/core/src/components/AlertBanner/AlertBannerText/AlertBannerText.module.scss
@@ -5,5 +5,5 @@
 }
 
 .marginLeft {
-  margin-left: var(--spacing-small);
+  margin-inline-start: var(--space-8);
 }
diff --git a/packages/core/src/components/AlertBanner/__tests__/AlertBanner.snapshot.test.tsx b/packages/core/src/components/AlertBanner/__tests__/AlertBanner.snapshot.test.tsx
index 36672e4873..5cbde309b0 100644
--- a/packages/core/src/components/AlertBanner/__tests__/AlertBanner.snapshot.test.tsx
+++ b/packages/core/src/components/AlertBanner/__tests__/AlertBanner.snapshot.test.tsx
@@ -19,7 +19,7 @@ describe("AlertBanner", () => {
         <AlertBanner
           onClose={NOOP}
           backgroundColor="negative"
-          ariaLabel="lorem-banner"
+          aria-label="lorem-banner"
           className="my-lorem-ipsum-banner"
         >
           <AlertBannerText text="Lorem ipsum dolor sit amet" />
diff --git a/packages/core/src/components/AlertBanner/__tests__/AlertBanner.test.tsx b/packages/core/src/components/AlertBanner/__tests__/AlertBanner.test.tsx
index 2777b5018f..5b89ece55e 100644
--- a/packages/core/src/components/AlertBanner/__tests__/AlertBanner.test.tsx
+++ b/packages/core/src/components/AlertBanner/__tests__/AlertBanner.test.tsx
@@ -39,7 +39,7 @@ describe("<AlertBanner />", () => {
     describe("a11y", () => {
       it("should add the label", () => {
         const ariaLabel = "Lable Name";
-        const { getByLabelText } = render(<AlertBanner ariaLabel={ariaLabel} />);
+        const { getByLabelText } = render(<AlertBanner aria-label={ariaLabel} />);
         const alertBannerComponentLabel = getByLabelText(ariaLabel);
         expect(alertBannerComponentLabel).toBeTruthy();
       });
diff --git a/packages/core/src/components/AttentionBox/AttentionBox.module.scss b/packages/core/src/components/AttentionBox/AttentionBox.module.scss
index 94425c6bad..48de2c4698 100644
--- a/packages/core/src/components/AttentionBox/AttentionBox.module.scss
+++ b/packages/core/src/components/AttentionBox/AttentionBox.module.scss
@@ -1,100 +1,45 @@
-@keyframes entryAnimation {
+@keyframes attentionBoxAnimation {
   0% {
-    transform: translateY(-10px);
     opacity: 0;
+    transform: translateY(-10px);
   }
   50% {
     opacity: 1;
   }
   100% {
-    transform: translateX(0);
     opacity: 1;
+    transform: translateY(0);
   }
 }
 
-.attentionBox {
-  position: relative;
-  padding: 12px var(--spacing-medium);
+.attention {
+  width: 100%;
   border-radius: var(--border-radius-medium);
-  width: fit-content;
-  max-width: 100%;
-  height: fit-content;
+  padding: var(--space-12) var(--space-16);
+  position: relative;
+  overflow: hidden;
 
-  &.entryAnimation {
-    animation: entryAnimation 200ms cubic-bezier(0.00, 0.00, 0.40, 1.00) forwards;
+  &.animate {
+    animation: attentionBoxAnimation 200ms var(--motion-timing-transition);
   }
 
-  // Overriding on primary icon color should be with bigger specificity than the original color
-  & .closeIconWrapper .closeIcon {
-    color: var(--primary-text-color);
+  &.primary {
+    background-color: var(--primary-selected-color);
   }
 
-  .icon {
-    flex-shrink: 0;
+  &.positive {
+    background-color: var(--positive-color-selected);
   }
-}
-
-.title {
-  margin: 0;
-  padding-right: var(--spacing-xl);
-}
-
-.text,
-.titleContainer {
-  color: var(--primary-text-color);
-}
-
-.typePrimary {
-  color: var(--primary-text-color);
-  background-color: var(--primary-selected-color);
-}
-
-.typeDanger {
-  background-color: var(--negative-color-selected);
-}
-
-.typeSuccess {
-  background-color: var(--positive-color-selected);
-}
-
-.typeDark {
-  background-color: var(--ui-background-color);
-  color: var(--primary-text-color);
-}
-
-.typeWarning {
-  background-color: var(--warning-color-selected);
-  color: var(--primary-text-color);
-}
-
-.titleContainer {
-  margin-bottom: var(--spacing-xs);
-}
 
-.titleContainer:empty {
-  margin-bottom: 0;
-}
-
-.closeIconWrapper {
-  position: absolute;
-  top: 12px;
-  right: 12px;
-}
-
-.closeIconCompact {
-  top: calc(50% - 16px);
-}
-
-.text {
-  &.compact {
-    flex: 1;
+  &.negative {
+    background-color: var(--negative-color-selected);
+  }
 
-    &.dismissible {
-      padding-right: var(--spacing-xl);
-    }
+  &.warning {
+    background-color: var(--warning-color-selected);
   }
 
-  &.paragraph {
-    margin: 0 var(--spacing-medium) 0 0;
+  &.neutral {
+    background-color: var(--allgrey-background-color);
   }
 }
diff --git a/packages/core/src/components/AttentionBox/AttentionBox.tsx b/packages/core/src/components/AttentionBox/AttentionBox.tsx
index 0cd4d501b2..c6edae9356 100644
--- a/packages/core/src/components/AttentionBox/AttentionBox.tsx
+++ b/packages/core/src/components/AttentionBox/AttentionBox.tsx
@@ -1,167 +1,74 @@
+import React, { forwardRef } from "react";
 import cx from "classnames";
-import React, { useMemo } from "react";
-import { camelCase } from "es-toolkit";
-import { getStyle } from "../../helpers/typesciptCssModulesHelper";
-import { ComponentDefaultTestId, getTestId } from "../../tests/test-ids-utils";
-import { Icon, type SubIcon } from "@vibe/icon";
-import { IconButton } from "@vibe/icon-button";
-import { CloseSmall, Alert as AlertIcon, Info as InfoIcon } from "@vibe/icons";
-import { AttentionBoxType as AttentionBoxTypeEnum, IconTypeEnum } from "./AttentionBoxConstants";
-import { type AttentionBoxType } from "./AttentionBox.types";
-import { type VibeComponentProps, type ElementContent, withStaticPropsWithoutForwardRef } from "../../types";
-import { Text } from "@vibe/typography";
-import { Flex } from "@vibe/layout";
+import type { AttentionBoxProps, AttentionBoxRole } from "./AttentionBox.types";
+import AttentionBoxDefault from "./layouts/AttentionBoxDefault/AttentionBoxDefault";
+import AttentionBoxCompact from "./layouts/AttentionBoxCompact/AttentionBoxCompact";
+import { resolveAttentionBoxIcon } from "./utils/iconUtils";
+import { ComponentDefaultTestId, ComponentVibeId } from "../../tests/constants";
+import { getTestId } from "../../tests/test-ids-utils";
 import styles from "./AttentionBox.module.scss";
-import { ComponentVibeId } from "../../tests/constants";
 
-/**
- * @deprecated AttentionBox is deprecated. Please use AttentionBox from "@vibe/core/next" instead.
- */
-export interface AttentionBoxProps extends VibeComponentProps {
-  // TODO: [breaking] remove prop
-  /**
-   * If true, displays an icon even when no header is provided.
-   */
-  withIconWithoutHeader?: boolean;
-  /**
-   * The type of the AttentionBox.
-   */
-  type?: AttentionBoxType;
-  /**
-   * The icon displayed next to the title or text.
-   */
-  icon?: SubIcon;
-  /**
-   * The type of the icon.
-   */
-  iconType?: "svg" | "font";
-  /**
-   * The title of the component.
-   */
-  title?: string;
-  /**
-   * The text content displayed inside.
-   */
-  text?: string;
-  /**
-   * The content of the component.
-   */
-  children?: ElementContent;
-  // TODO: [breaking] remove prop
-  /**
-   * If true, the icon is not displayed.
-   */
-  withoutIcon?: boolean;
-  /**
-   * Callback fired when the close button is clicked.
-   */
-  onClose?: (event: React.MouseEvent) => void;
-  /**
-   * If true, renders in compact mode.
-   */
-  compact?: boolean;
-  /**
-   * The label of the close button.
-   */
-  closeButtonAriaLabel?: string;
-  /**
-   * If true, an entry animation is applied when the component appears.
-   */
-  entryAnimation?: boolean;
-}
+const AttentionBox = forwardRef(
+  (
+    {
+      compact = false,
+      title,
+      animate = true,
+      icon,
+      iconType = "svg",
+      type = "primary",
+      children,
+      text,
+      action,
+      link,
+      id,
+      onClose,
+      closeButtonAriaLabel,
+      className,
+      "data-testid": dataTestId
+    }: AttentionBoxProps,
+    ref: React.ForwardedRef<HTMLDivElement>
+  ) => {
+    const role: AttentionBoxRole = type === "negative" ? "alert" : "status";
+    const displayIcon = resolveAttentionBoxIcon(icon, type);
+    const content = children || text;
 
-/**
- * @deprecated AttentionBox is deprecated. Please use AttentionBox from "@vibe/core/next" instead.
- */
-const AttentionBox = ({
-  className,
-  withIconWithoutHeader = false,
-  type = "primary",
-  icon,
-  iconType = "svg",
-  title,
-  text,
-  children,
-  withoutIcon = false,
-  onClose,
-  compact = false,
-  id,
-  "data-testid": dataTestId,
-  closeButtonAriaLabel = "Close",
-  entryAnimation = false
-}: AttentionBoxProps) => {
-  const defaultIcon = useMemo(() => {
-    return type === "primary" ? InfoIcon : AlertIcon;
-  }, [type]);
+    const baseClasses = cx(
+      styles.attention,
+      styles[type],
+      {
+        [styles.animate]: animate
+      },
+      className
+    );
 
-  const overrideIcon = icon === undefined ? defaultIcon : icon;
+    const layoutSharedProps = {
+      onClose,
+      closeButtonAriaLabel,
+      action,
+      link,
+      icon: displayIcon,
+      iconType,
+      content
+    };
 
-  return (
-    <aside
-      className={cx(styles.attentionBox, getStyle(styles, camelCase(`type-${type}`)), className, {
-        [styles.entryAnimation]: entryAnimation
-      })}
-      role="alert"
-      data-testid={dataTestId || getTestId(ComponentDefaultTestId.ATTENTION_BOX, id)}
-      data-vibe={ComponentVibeId.ATTENTION_BOX}
-    >
-      {title && (
-        <Flex justify="start" align="center" className={styles.titleContainer} gap="xs">
-          {!withoutIcon && (
-            <Icon
-              className={styles.icon}
-              iconType={iconType}
-              ariaHidden
-              icon={overrideIcon}
-              ignoreFocusStyle
-              iconSize="20"
-            />
-          )}
-          <Text type="text1" element="h5" weight="medium" className={styles.title}>
-            {title}
-          </Text>
-        </Flex>
-      )}
-      <Flex justify="start" align="center" gap="xs">
-        {!title && compact && !withoutIcon && withIconWithoutHeader && (
-          <Icon iconType={iconType} iconSize={18} ariaHidden icon={overrideIcon} ignoreFocusStyle />
+    return (
+      <div
+        ref={ref}
+        className={baseClasses}
+        role={role}
+        id={id}
+        data-testid={dataTestId || getTestId(ComponentDefaultTestId.ATTENTION_BOX, id)}
+        data-vibe={ComponentVibeId.ATTENTION_BOX}
+      >
+        {compact ? (
+          <AttentionBoxCompact {...layoutSharedProps} />
+        ) : (
+          <AttentionBoxDefault title={title} {...layoutSharedProps} />
         )}
-        <Text
-          type="text2"
-          element={compact ? undefined : "p"}
-          className={cx(styles.text, {
-            [styles.compact]: compact,
-            [styles.dismissible]: !!onClose,
-            [styles.paragraph]: !compact
-          })}
-        >
-          {text || children}
-        </Text>
-      </Flex>
-      {onClose && (
-        <IconButton
-          size="small"
-          color="on-primary-color"
-          className={styles.closeIcon}
-          wrapperClassName={cx(styles.closeIconWrapper, {
-            [styles.closeIconCompact]: compact
-          })}
-          ariaLabel={closeButtonAriaLabel}
-          hideTooltip
-          icon={CloseSmall}
-          onClick={onClose}
-        />
-      )}
-    </aside>
-  );
-};
+      </div>
+    );
+  }
+);
 
-interface AttentionBoxStaticProps {
-  types: typeof AttentionBoxTypeEnum;
-  iconTypes: typeof IconTypeEnum;
-}
-
-export default withStaticPropsWithoutForwardRef<AttentionBoxProps, AttentionBoxStaticProps>(AttentionBox, {
-  types: AttentionBoxTypeEnum,
-  iconTypes: IconTypeEnum
-});
+export default AttentionBox;
diff --git a/packages/core/src/components/AttentionBox/AttentionBox.types.ts b/packages/core/src/components/AttentionBox/AttentionBox.types.ts
index 0a86f624ac..4da4679602 100644
--- a/packages/core/src/components/AttentionBox/AttentionBox.types.ts
+++ b/packages/core/src/components/AttentionBox/AttentionBox.types.ts
@@ -1 +1,86 @@
-export type AttentionBoxType = "primary" | "success" | "danger" | "dark" | "warning";
+import type { ReactNode, MouseEvent } from "react";
+import type { VibeComponentProps } from "../../types";
+import type { SubIcon, IconType } from "@vibe/icon";
+import type { AttentionBoxButtonProps } from "./components/AttentionBoxButton/AttentionBoxButton";
+import type { AttentionBoxLinkProps } from "./components/AttentionBoxLink/AttentionBoxLink";
+
+export type AttentionBoxType = "primary" | "positive" | "negative" | "warning" | "neutral";
+
+// Mutually exclusive content props
+export type AttentionBoxContentProps =
+  | {
+      /**
+       * The main text content
+       */
+      text: string;
+      children?: never;
+    }
+  | {
+      /**
+       * Custom children to override the default text content
+       */
+      children: ReactNode;
+      text?: never;
+    };
+
+// Shared props for both compact and default layouts
+export interface AttentionBoxLayoutSharedProps
+  extends Pick<AttentionBoxProps, "icon" | "iconType" | "onClose" | "closeButtonAriaLabel" | "action" | "link"> {
+  content: ReactNode;
+}
+
+// Mutually exclusive title props
+export type AttentionBoxCompactTitleProps =
+  | {
+      compact?: false;
+      /**
+       * The title of the attention box
+       */
+      title?: string;
+    }
+  | {
+      /**
+       * When true, the attention box will be displayed in compact mode of one-liner
+       */
+      compact: true;
+      title?: never;
+    };
+
+export type AttentionBoxRole = "alert" | "status";
+
+export type AttentionBoxProps = VibeComponentProps &
+  AttentionBoxContentProps &
+  AttentionBoxCompactTitleProps & {
+    /**
+     * The variant type of the attention box
+     */
+    type?: AttentionBoxType;
+    /**
+     * The type of the icon
+     */
+    iconType?: IconType;
+    /**
+     * The icon to display. Pass `false` to hide the icon entirely, or omit to use the default icon for the type.
+     */
+    icon?: SubIcon | false;
+    /**
+     * Callback when the close button is clicked
+     */
+    onClose?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Custom aria label for the close button
+     */
+    closeButtonAriaLabel?: string;
+    /**
+     * Whether to animate the entrance
+     */
+    animate?: boolean;
+    /**
+     * Action button configuration
+     */
+    action?: AttentionBoxButtonProps;
+    /**
+     * Link configuration
+     */
+    link?: Omit<AttentionBoxLinkProps, "inlineText">;
+  };
diff --git a/packages/core/src/components/AttentionBox/AttentionBoxConstants.ts b/packages/core/src/components/AttentionBox/AttentionBoxConstants.ts
deleted file mode 100644
index 63a94fc8ca..0000000000
--- a/packages/core/src/components/AttentionBox/AttentionBoxConstants.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * @deprecated
- */
-export enum AttentionBoxType {
-  PRIMARY = "primary",
-  SUCCESS = "success",
-  DANGER = "danger",
-  DARK = "dark",
-  WARNING = "warning"
-}
-
-/**
- * @deprecated
- */
-export enum IconTypeEnum {
-  SVG = "svg",
-  ICON_FONT = "font",
-  SRC = "src"
-}
diff --git a/packages/core/src/components/AttentionBox/AttentionBoxLink/AttentionBoxLink.module.scss b/packages/core/src/components/AttentionBox/AttentionBoxLink/AttentionBoxLink.module.scss
deleted file mode 100644
index 8334da7fbf..0000000000
--- a/packages/core/src/components/AttentionBox/AttentionBoxLink/AttentionBoxLink.module.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-// TODO: use just a class (without [href]) after removing anchor style from Typography
-// Using [href] to increase specificity and override `Typography a` styles
-a[href].attentionBoxLink,
-a[href].attentionBoxLink:hover {
-  color: var(--primary-text-color);
-  text-decoration: underline;
-}
diff --git a/packages/core/src/components/AttentionBox/AttentionBoxLink/AttentionBoxLink.tsx b/packages/core/src/components/AttentionBox/AttentionBoxLink/AttentionBoxLink.tsx
deleted file mode 100644
index 110fe2260b..0000000000
--- a/packages/core/src/components/AttentionBox/AttentionBoxLink/AttentionBoxLink.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from "react";
-import styles from "./AttentionBoxLink.module.scss";
-import Link, { type LinkProps } from "../../Link/Link";
-import cx from "classnames";
-
-/**
- * @deprecated AttentionBoxLink is deprecated. Please use AttentionBox from "@vibe/core/next" instead.
- */
-export type AttentionBoxLinkProps = LinkProps;
-
-/**
- * @deprecated AttentionBoxLink is deprecated. Please use AttentionBox from "@vibe/core/next" instead.
- */
-const AttentionBoxLink = ({
-  href,
-  text,
-  // TODO: use Link's target default in next major
-  // For backward compatibility - using _self as default
-  target = "_self",
-  className,
-  ...linkProps
-}: AttentionBoxLinkProps) => {
-  return (
-    <Link className={cx(styles.attentionBoxLink, className)} href={href} text={text} target={target} {...linkProps} />
-  );
-};
-
-export default AttentionBoxLink;
diff --git a/packages/core/src/components/AttentionBox/__tests__/AttentionBox.snapshot.test.tsx b/packages/core/src/components/AttentionBox/__tests__/AttentionBox.snapshot.test.tsx
deleted file mode 100644
index efb4ef303a..0000000000
--- a/packages/core/src/components/AttentionBox/__tests__/AttentionBox.snapshot.test.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { describe, it, expect } from "vitest";
-import React from "react";
-import renderer from "react-test-renderer";
-import AttentionBox from "../AttentionBox";
-
-describe("AttentionBox renders correctly", () => {
-  it("renders correctly", () => {
-    const tree = renderer.create(<AttentionBox className="dummy-class-name" title="Title" text="Text" />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it("renders correctly with empty props", () => {
-    const tree = renderer.create(<AttentionBox />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it("renders correctly with empty title prop", () => {
-    const tree = renderer.create(<AttentionBox title="" text="Text" />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it("renders correctly with no icon", () => {
-    const tree = renderer.create(<AttentionBox title="Title" text="Text" withoutIcon />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it("renders correctly when compact", () => {
-    const tree = renderer.create(<AttentionBox title="Title" text="Text" compact />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it("renders correctly dark type", () => {
-    const tree = renderer.create(<AttentionBox title="Title" text="Text" type="dark" />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it("renders with icon font type", () => {
-    const tree = renderer.create(<AttentionBox title="Title" text="Text" iconType="font" icon="fa fa-star" />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it("renders correctly className", () => {
-    const tree = renderer.create(<AttentionBox title="Title" text="Text" className="test-classNmae" />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it("renders correctly with onClose", () => {
-    const tree = renderer.create(<AttentionBox title="Title" text="Text" onClose={() => {}} />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it("renders correctly with renderer", () => {
-    const tree = renderer
-      .create(
-        <AttentionBox>
-          <span>
-            renderer with components <div>and sub components</div>
-          </span>
-        </AttentionBox>
-      )
-      .toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});
diff --git a/packages/core/src/components/AttentionBox/__tests__/AttentionBox.test.tsx b/packages/core/src/components/AttentionBox/__tests__/AttentionBox.test.tsx
index a302d00354..b7b451bcc7 100644
--- a/packages/core/src/components/AttentionBox/__tests__/AttentionBox.test.tsx
+++ b/packages/core/src/components/AttentionBox/__tests__/AttentionBox.test.tsx
@@ -1,16 +1,196 @@
-import { vi, describe, it, expect } from "vitest";
 import React from "react";
-import { fireEvent, render, screen } from "@testing-library/react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { vi, describe, it, expect, beforeEach } from "vitest";
+import { Robot } from "@vibe/icons";
 import AttentionBox from "../AttentionBox";
+import userEvent from "@testing-library/user-event";
+import type { AttentionBoxType } from "../AttentionBox.types";
 
-describe("AttentionBox tests", () => {
-  const title = "title";
-  const text = "text";
+describe("AttentionBox", () => {
+  beforeEach(() => {
+    vi.clearAllTimers();
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.runOnlyPendingTimers();
+    vi.useRealTimers();
+  });
+
+  describe("Core Functionality", () => {
+    it("renders in default mode with title and text", () => {
+      render(<AttentionBox title="Test Title" text="Test text" />);
+
+      expect(screen.getByText("Test Title")).toBeInTheDocument();
+      expect(screen.getByText("Test text")).toBeInTheDocument();
+    });
+
+    it("renders all variant types with correct class styling", () => {
+      const variants: AttentionBoxType[] = ["primary", "positive", "negative", "warning", "neutral"];
+
+      variants.forEach(variant => {
+        const { unmount } = render(<AttentionBox type={variant} text="Test" />);
+        const container = screen.getByRole(variant === "negative" ? "alert" : "status");
+        expect(container).toHaveClass(`${variant}`);
+        unmount();
+      });
+    });
+
+    it("renders negative variant with alert role", () => {
+      render(<AttentionBox type="negative" text="Error message" />);
+      expect(screen.getByRole("alert")).toBeInTheDocument();
+    });
+
+    it("renders non-negative variants with status role", () => {
+      render(<AttentionBox type="primary" text="Info message" />);
+      expect(screen.getByRole("status")).toBeInTheDocument();
+    });
+  });
+
+  describe("Icon Control", () => {
+    it("renders default icon when no icon is provided", () => {
+      render(<AttentionBox type="primary" text="Test" />);
+      expect(screen.getByTestId("icon")).toBeInTheDocument();
+    });
+
+    it("renders custom icon when provided", () => {
+      render(<AttentionBox text="Test" icon={Robot} />);
+      expect(screen.getByTestId("icon")).toBeInTheDocument();
+    });
+
+    it("hides icon when icon is false", () => {
+      render(<AttentionBox text="Test" icon={false} />);
+      expect(screen.queryByTestId("icon")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("Dismiss Control", () => {
+    it("renders close button when onClose is provided", () => {
+      const onClose = vi.fn();
+      render(<AttentionBox text="Test" onClose={onClose} />);
+
+      const closeButton = screen.getByRole("button", { name: /close/i });
+      expect(closeButton).toBeInTheDocument();
+    });
+
+    it("does not render close button when onClose is not provided", () => {
+      render(<AttentionBox text="Test" />);
+      expect(screen.queryByRole("button", { name: /close/i })).not.toBeInTheDocument();
+    });
+
+    it("calls onClose when close button is clicked", () => {
+      const onClose = vi.fn();
+      render(<AttentionBox text="Test" onClose={onClose} />);
+
+      const closeButton = screen.getByRole("button", { name: /close/i });
+      fireEvent.click(closeButton);
+
+      expect(onClose).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("Action Button", () => {
+    it("renders action button when provided", () => {
+      const onClick = vi.fn();
+      render(<AttentionBox text="Test" action={{ text: "Action", onClick }} />);
+
+      const actionButton = screen.getByRole("button", { name: "Action" });
+      expect(actionButton).toBeInTheDocument();
+    });
+
+    it("calls action onClick when button is clicked", () => {
+      const onClick = vi.fn();
+      render(<AttentionBox text="Test" action={{ text: "Action", onClick }} />);
+
+      const actionButton = screen.getByRole("button", { name: "Action" });
+      fireEvent.click(actionButton);
+
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("Link", () => {
+    it("renders link when provided", () => {
+      render(<AttentionBox text="Test" link={{ href: "/test", text: "Test Link" }} />);
+
+      const link = screen.getByRole("link", { name: "Test Link" });
+      expect(link).toBeInTheDocument();
+      expect(link).toHaveAttribute("href", "/test");
+    });
+
+    it("renders link as block level element", () => {
+      render(<AttentionBox text="Test text" link={{ href: "/test", text: "Test Link" }} />);
+
+      const link = screen.getByRole("link", { name: "Test Link" });
+      expect(link).toBeInTheDocument();
+      expect(link).not.toHaveClass("inlineText");
+    });
+
+    it("renders link in action section when action also exists", () => {
+      const onClick = vi.fn();
+      render(
+        <AttentionBox
+          text="Test text"
+          link={{ href: "/test", text: "Test Link" }}
+          action={{ text: "Action", onClick }}
+        />
+      );
+
+      const link = screen.getByRole("link", { name: "Test Link" });
+      const actionButton = screen.getByRole("button", { name: "Action" });
+      expect(link).toBeInTheDocument();
+      expect(actionButton).toBeInTheDocument();
+    });
+  });
+
+  describe("Animation", () => {
+    it("applies animation classes when animate is true", () => {
+      render(<AttentionBox text="Test" animate />);
+
+      vi.advanceTimersByTime(200);
+
+      const container = screen.getByRole("status");
+      expect(container).toHaveClass("animate");
+    });
+  });
+
+  describe("Children Override", () => {
+    it("renders children instead of text when provided", () => {
+      render(
+        <AttentionBox text="Original text">
+          <span>Custom children</span>
+        </AttentionBox>
+      );
+
+      expect(screen.getByText("Custom children")).toBeInTheDocument();
+      expect(screen.queryByText("Original text")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("Accessibility", () => {
+    it("has correct tab order", () => {
+      const onClose = vi.fn();
+      const actionClick = vi.fn();
+
+      render(
+        <AttentionBox
+          text="Test"
+          onClose={onClose}
+          link={{ href: "/test", text: "Link" }}
+          action={{ text: "Action", onClick: actionClick }}
+        />
+      );
+
+      const closeButton = screen.getByRole("button", { name: /close/i });
+      const link = screen.getByRole("link");
+      const actionButton = screen.getByRole("button", { name: "Action" });
 
-  it("should call onClose callback when close button clicked", () => {
-    const onCloseMock = vi.fn();
-    render(<AttentionBox onClose={onCloseMock} title={title} text={text} />);
-    fireEvent.click(screen.getByLabelText("Close"));
-    expect(onCloseMock.mock.calls.length).toBe(1);
+      userEvent.tab();
+      expect(closeButton).toHaveFocus();
+      userEvent.tab();
+      expect(link).toHaveFocus();
+      userEvent.tab();
+      expect(actionButton).toHaveFocus();
+    });
   });
 });
diff --git a/packages/core/src/components/AttentionBox/__tests__/__snapshots__/AttentionBox.snapshot.test.tsx.snap b/packages/core/src/components/AttentionBox/__tests__/__snapshots__/AttentionBox.snapshot.test.tsx.snap
deleted file mode 100644
index 26cae706df..0000000000
--- a/packages/core/src/components/AttentionBox/__tests__/__snapshots__/AttentionBox.snapshot.test.tsx.snap
+++ /dev/null
@@ -1,495 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`AttentionBox renders correctly > renders correctly 1`] = `
-<aside
-  className="attentionBox typePrimary dummy-class-name"
-  data-testid="attention-box"
-  data-vibe="AttentionBox"
-  role="alert"
->
-  <div
-    className="container directionRow justifyStart alignCenter titleContainer"
-    style={
-      {
-        "gap": "var(--spacing-xs)",
-      }
-    }
-  >
-    <svg
-      aria-hidden={true}
-      className="icon icon noFocusStyle"
-      data-testid="icon"
-      data-vibe="Icon"
-      fill="currentColor"
-      height="20"
-      viewBox="0 0 20 20"
-      width="20"
-    >
-      <path
-        clipRule="evenodd"
-        d="M4.5559 4.55593C5.99976 3.11206 7.95806 2.3009 10 2.3009C12.0419 2.3009 14.0002 3.11206 15.4441 4.55593C16.888 5.99979 17.6991 7.9581 17.6991 10C17.6991 12.042 16.888 14.0003 15.4441 15.4441C14.0002 16.888 12.0419 17.6992 10 17.6992C7.95806 17.6992 5.99976 16.888 4.5559 15.4441C3.11203 14.0003 2.30087 12.042 2.30087 10C2.30087 7.9581 3.11203 5.99979 4.5559 4.55593ZM10 3.8009C8.35589 3.8009 6.77912 4.45402 5.61656 5.61659C4.45399 6.77915 3.80087 8.35592 3.80087 10C3.80087 11.6441 4.45399 13.2209 5.61656 14.3835C6.77912 15.546 8.35589 16.1992 10 16.1992C11.6441 16.1992 13.2209 15.546 14.3834 14.3835C15.546 13.2209 16.1991 11.6441 16.1991 10C16.1991 8.35592 15.546 6.77915 14.3834 5.61659C13.2209 4.45402 11.6441 3.8009 10 3.8009ZM10 9.25006C10.4142 9.25006 10.75 9.58585 10.75 10.0001V13.4746C10.75 13.8888 10.4142 14.2246 10 14.2246C9.58579 14.2246 9.25 13.8888 9.25 13.4746V10.0001C9.25 9.58585 9.58579 9.25006 10 9.25006ZM9.54135 6.21669C9.7058 6.10681 9.89914 6.04816 10.0969 6.04816C10.3621 6.04816 10.6165 6.15351 10.804 6.34105C10.9916 6.52859 11.0969 6.78294 11.0969 7.04816C11.0969 7.24593 11.0383 7.43927 10.9284 7.60373C10.8185 7.76818 10.6623 7.89635 10.4796 7.97204C10.2969 8.04772 10.0958 8.06753 9.90183 8.02894C9.70786 7.99036 9.52967 7.89512 9.38982 7.75526C9.24996 7.61541 9.15472 7.43722 9.11614 7.24325C9.07755 7.04927 9.09736 6.8482 9.17304 6.66547C9.24873 6.48275 9.3769 6.32657 9.54135 6.21669Z"
-        fill="currentColor"
-        fillRule="evenodd"
-      />
-    </svg>
-    <h5
-      className="typography primary start singleLineEllipsis text text1Medium title"
-      data-testid="text"
-    >
-      Title
-    </h5>
-  </div>
-  <div
-    className="container directionRow justifyStart alignCenter"
-    style={
-      {
-        "gap": "var(--spacing-xs)",
-      }
-    }
-  >
-    <p
-      className="typography primary start text text2Normal text paragraph"
-      data-testid="text"
-    >
-      Text
-    </p>
-  </div>
-</aside>
-`;
-
-exports[`AttentionBox renders correctly > renders correctly className 1`] = `
-<aside
-  className="attentionBox typePrimary test-classNmae"
-  data-testid="attention-box"
-  data-vibe="AttentionBox"
-  role="alert"
->
-  <div
-    className="container directionRow justifyStart alignCenter titleContainer"
-    style={
-      {
-        "gap": "var(--spacing-xs)",
-      }
-    }
-  >
-    <svg
-      aria-hidden={true}
-      className="icon icon noFocusStyle"
-      data-testid="icon"
-      data-vibe="Icon"
-      fill="currentColor"
-      height="20"
-      viewBox="0 0 20 20"
-      width="20"
-    >
-      <path
-        clipRule="evenodd"
-        d="M4.5559 4.55593C5.99976 3.11206 7.95806 2.3009 10 2.3009C12.0419 2.3009 14.0002 3.11206 15.4441 4.55593C16.888 5.99979 17.6991 7.9581 17.6991 10C17.6991 12.042 16.888 14.0003 15.4441 15.4441C14.0002 16.888 12.0419 17.6992 10 17.6992C7.95806 17.6992 5.99976 16.888 4.5559 15.4441C3.11203 14.0003 2.30087 12.042 2.30087 10C2.30087 7.9581 3.11203 5.99979 4.5559 4.55593ZM10 3.8009C8.35589 3.8009 6.77912 4.45402 5.61656 5.61659C4.45399 6.77915 3.80087 8.35592 3.80087 10C3.80087 11.6441 4.45399 13.2209 5.61656 14.3835C6.77912 15.546 8.35589 16.1992 10 16.1992C11.6441 16.1992 13.2209 15.546 14.3834 14.3835C15.546 13.2209 16.1991 11.6441 16.1991 10C16.1991 8.35592 15.546 6.77915 14.3834 5.61659C13.2209 4.45402 11.6441 3.8009 10 3.8009ZM10 9.25006C10.4142 9.25006 10.75 9.58585 10.75 10.0001V13.4746C10.75 13.8888 10.4142 14.2246 10 14.2246C9.58579 14.2246 9.25 13.8888 9.25 13.4746V10.0001C9.25 9.58585 9.58579 9.25006 10 9.25006ZM9.54135 6.21669C9.7058 6.10681 9.89914 6.04816 10.0969 6.04816C10.3621 6.04816 10.6165 6.15351 10.804 6.34105C10.9916 6.52859 11.0969 6.78294 11.0969 7.04816C11.0969 7.24593 11.0383 7.43927 10.9284 7.60373C10.8185 7.76818 10.6623 7.89635 10.4796 7.97204C10.2969 8.04772 10.0958 8.06753 9.90183 8.02894C9.70786 7.99036 9.52967 7.89512 9.38982 7.75526C9.24996 7.61541 9.15472 7.43722 9.11614 7.24325C9.07755 7.04927 9.09736 6.8482 9.17304 6.66547C9.24873 6.48275 9.3769 6.32657 9.54135 6.21669Z"
-        fill="currentColor"
-        fillRule="evenodd"
-      />
-    </svg>
-    <h5
-      className="typography primary start singleLineEllipsis text text1Medium title"
-      data-testid="text"
-    >
-      Title
-    </h5>
-  </div>
-  <div
-    className="container directionRow justifyStart alignCenter"
-    style={
-      {
-        "gap": "var(--spacing-xs)",
-      }
-    }
-  >
-    <p
-      className="typography primary start text text2Normal text paragraph"
-      data-testid="text"
-    >
-      Text
-    </p>
-  </div>
-</aside>
-`;
-
-exports[`AttentionBox renders correctly > renders correctly dark type 1`] = `
-<aside
-  className="attentionBox typeDark"
-  data-testid="attention-box"
-  data-vibe="AttentionBox"
-  role="alert"
->
-  <div
-    className="container directionRow justifyStart alignCenter titleContainer"
-    style={
-      {
-        "gap": "var(--spacing-xs)",
-      }
-    }
-  >
-    <svg
-      aria-hidden={true}
-      className="icon icon noFocusStyle"
-      data-testid="icon"
-      data-vibe="Icon"
-      fill="currentColor"
-      height="20"
-      viewBox="0 0 20 20"
-      width="20"
-    >
-      <path
-        clipRule="evenodd"
-        d="M10 2.10596C9.661 2.10596 9.32868 2.20028 9.04023 2.37836C8.75177 2.55645 8.51855 2.81128 8.36665 3.11435L8.36633 3.11498L2.44277 14.9621L2.44269 14.9623C2.30353 15.2407 2.23784 15.5502 2.25185 15.8612C2.26586 16.1721 2.3591 16.4744 2.52272 16.7392C2.68635 17.0041 2.91493 17.2227 3.18678 17.3744C3.45863 17.5261 3.76473 17.6058 4.07604 17.606H4.07644H15.9236H15.924C16.2353 17.6058 16.5414 17.5261 16.8132 17.3744C17.0851 17.2227 17.3137 17.0041 17.4773 16.7392C17.6409 16.4744 17.7341 16.1721 17.7481 15.8612C17.7622 15.5502 17.6965 15.2407 17.5573 14.9623L17.5572 14.9621L11.6337 3.11498L11.6333 3.11435C11.4815 2.81128 11.2482 2.55645 10.9598 2.37836C10.6713 2.20028 10.339 2.10596 10 2.10596ZM9.82821 3.65471C9.87984 3.62284 9.93932 3.60596 10 3.60596C10.0607 3.60596 10.1202 3.62284 10.1718 3.65471C10.2233 3.68654 10.265 3.73207 10.2922 3.78622L10.2923 3.78645L16.2155 15.6328L16.2156 15.6329C16.2404 15.6827 16.2522 15.7381 16.2497 15.7937C16.2472 15.8493 16.2305 15.9034 16.2012 15.9508C16.1719 15.9982 16.131 16.0374 16.0823 16.0645C16.0337 16.0917 15.9789 16.1059 15.9232 16.106H4.07684C4.02112 16.1059 3.96633 16.0917 3.91767 16.0645C3.86901 16.0374 3.8281 15.9982 3.79881 15.9508C3.76953 15.9034 3.75284 15.8493 3.75033 15.7937C3.74783 15.7381 3.75956 15.6827 3.78441 15.6329L3.78449 15.6328L9.70765 3.78645L9.70777 3.7862C9.73496 3.73206 9.77666 3.68654 9.82821 3.65471ZM10 6.95135C10.4142 6.95135 10.75 7.28714 10.75 7.70135V10.9324C10.75 11.3466 10.4142 11.6824 10 11.6824C9.58579 11.6824 9.25 11.3466 9.25 10.9324V7.70135C9.25 7.28714 9.58579 6.95135 10 6.95135ZM9.2303 13.3937C9.43444 13.1896 9.7113 13.0749 9.99999 13.0749C10.2887 13.0749 10.5655 13.1896 10.7697 13.3937C10.9738 13.5979 11.0885 13.8747 11.0885 14.1634C11.0885 14.4521 10.9738 14.729 10.7697 14.9331C10.5655 15.1372 10.2887 15.2519 9.99999 15.2519C9.7113 15.2519 9.43444 15.1372 9.2303 14.9331C9.02617 14.729 8.91149 14.4521 8.91149 14.1634C8.91149 13.8747 9.02617 13.5979 9.2303 13.3937ZM9.99999 14.1749C10.003 14.1749 10.006 14.1737 10.0081 14.1715C10.0103 14.1694 10.0115 14.1665 10.0115 14.1634C10.0115 14.1604 10.0103 14.1574 10.0081 14.1553C10.006 14.1531 10.003 14.1519 9.99999 14.1519C9.99695 14.1519 9.99402 14.1531 9.99187 14.1553C9.98971 14.1574 9.9885 14.1604 9.9885 14.1634C9.9885 14.1665 9.98971 14.1694 9.99187 14.1715C9.99402 14.1737 9.99695 14.1749 9.99999 14.1749Z"
-        fill="currentColor"
-        fillRule="evenodd"
-      />
-    </svg>
-    <h5
-      className="typography primary start singleLineEllipsis text text1Medium title"
-      data-testid="text"
-    >
-      Title
-    </h5>
-  </div>
-  <div
-    className="container directionRow justifyStart alignCenter"
-    style={
-      {
-        "gap": "var(--spacing-xs)",
-      }
-    }
-  >
-    <p
-      className="typography primary start text text2Normal text paragraph"
-      data-testid="text"
-    >
-      Text
-    </p>
-  </div>
-</aside>
-`;
-
-exports[`AttentionBox renders correctly > renders correctly when compact 1`] = `
-<aside
-  className="attentionBox typePrimary"
-  data-testid="attention-box"
-  data-vibe="AttentionBox"
-  role="alert"
->
-  <div
-    className="container directionRow justifyStart alignCenter titleContainer"
-    style={
-      {
-        "gap": "var(--spacing-xs)",
-      }
-    }
-  >
-    <svg
-      aria-hidden={true}
-      className="icon icon noFocusStyle"
-      data-testid="icon"
-      data-vibe="Icon"
-      fill="currentColor"
-      height="20"
-      viewBox="0 0 20 20"
-      width="20"
-    >
-      <path
-        clipRule="evenodd"
-        d="M4.5559 4.55593C5.99976 3.11206 7.95806 2.3009 10 2.3009C12.0419 2.3009 14.0002 3.11206 15.4441 4.55593C16.888 5.99979 17.6991 7.9581 17.6991 10C17.6991 12.042 16.888 14.0003 15.4441 15.4441C14.0002 16.888 12.0419 17.6992 10 17.6992C7.95806 17.6992 5.99976 16.888 4.5559 15.4441C3.11203 14.0003 2.30087 12.042 2.30087 10C2.30087 7.9581 3.11203 5.99979 4.5559 4.55593ZM10 3.8009C8.35589 3.8009 6.77912 4.45402 5.61656 5.61659C4.45399 6.77915 3.80087 8.35592 3.80087 10C3.80087 11.6441 4.45399 13.2209 5.61656 14.3835C6.77912 15.546 8.35589 16.1992 10 16.1992C11.6441 16.1992 13.2209 15.546 14.3834 14.3835C15.546 13.2209 16.1991 11.6441 16.1991 10C16.1991 8.35592 15.546 6.77915 14.3834 5.61659C13.2209 4.45402 11.6441 3.8009 10 3.8009ZM10 9.25006C10.4142 9.25006 10.75 9.58585 10.75 10.0001V13.4746C10.75 13.8888 10.4142 14.2246 10 14.2246C9.58579 14.2246 9.25 13.8888 9.25 13.4746V10.0001C9.25 9.58585 9.58579 9.25006 10 9.25006ZM9.54135 6.21669C9.7058 6.10681 9.89914 6.04816 10.0969 6.04816C10.3621 6.04816 10.6165 6.15351 10.804 6.34105C10.9916 6.52859 11.0969 6.78294 11.0969 7.04816C11.0969 7.24593 11.0383 7.43927 10.9284 7.60373C10.8185 7.76818 10.6623 7.89635 10.4796 7.97204C10.2969 8.04772 10.0958 8.06753 9.90183 8.02894C9.70786 7.99036 9.52967 7.89512 9.38982 7.75526C9.24996 7.61541 9.15472 7.43722 9.11614 7.24325C9.07755 7.04927 9.09736 6.8482 9.17304 6.66547C9.24873 6.48275 9.3769 6.32657 9.54135 6.21669Z"
-        fill="currentColor"
-        fillRule="evenodd"
-      />
-    </svg>
-    <h5
-      className="typography primary start singleLineEllipsis text text1Medium title"
-      data-testid="text"
-    >
-      Title
-    </h5>
-  </div>
-  <div
-    className="container directionRow justifyStart alignCenter"
-    style={
-      {
-        "gap": "var(--spacing-xs)",
-      }
-    }
-  >
-    <div
-      className="typography primary start singleLineEllipsis text text2Normal text compact"
-      data-testid="text"
-    >
-      Text
-    </div>
-  </div>
-</aside>
-`;
-
-exports[`AttentionBox renders correctly > renders correctly with empty props 1`] = `
-<aside
-  className="attentionBox typePrimary"
-  data-testid="attention-box"
-  data-vibe="AttentionBox"
-  role="alert"
->
-  <div
-    className="container directionRow justifyStart alignCenter"
-    style={
-      {
-        "gap": "var(--spacing-xs)",
-      }
-    }
-  >
-    <p
-      className="typography primary start text text2Normal text paragraph"
-      data-testid="text"
-    />
-  </div>
-</aside>
-`;
-
-exports[`AttentionBox renders correctly > renders correctly with empty title prop 1`] = `
-<aside
-  className="attentionBox typePrimary"
-  data-testid="attention-box"
-  data-vibe="AttentionBox"
-  role="alert"
->
-  
-  <div
-    className="container directionRow justifyStart alignCenter"
-    style={
-      {
-        "gap": "var(--spacing-xs)",
-      }
-    }
-  >
-    <p
-      className="typography primary start text text2Normal text paragraph"
-      data-testid="text"
-    >
-      Text
-    </p>
-  </div>
-</aside>
-`;
-
-exports[`AttentionBox renders correctly > renders correctly with no icon 1`] = `
-<aside
-  className="attentionBox typePrimary"
-  data-testid="attention-box"
-  data-vibe="AttentionBox"
-  role="alert"
->
-  <div
-    className="container directionRow justifyStart alignCenter titleContainer"
-    style={
-      {
-        "gap": "var(--spacing-xs)",
-      }
-    }
-  >
-    <h5
-      className="typography primary start singleLineEllipsis text text1Medium title"
-      data-testid="text"
-    >
-      Title
-    </h5>
-  </div>
-  <div
-    className="container directionRow justifyStart alignCenter"
-    style={
-      {
-        "gap": "var(--spacing-xs)",
-      }
-    }
-  >
-    <p
-      className="typography primary start text text2Normal text paragraph"
-      data-testid="text"
-    >
-      Text
-    </p>
-  </div>
-</aside>
-`;
-
-exports[`AttentionBox renders correctly > renders correctly with onClose 1`] = `
-<aside
-  className="attentionBox typePrimary"
-  data-testid="attention-box"
-  data-vibe="AttentionBox"
-  role="alert"
->
-  <div
-    className="container directionRow justifyStart alignCenter titleContainer"
-    style={
-      {
-        "gap": "var(--spacing-xs)",
-      }
-    }
-  >
-    <svg
-      aria-hidden={true}
-      className="icon icon noFocusStyle"
-      data-testid="icon"
-      data-vibe="Icon"
-      fill="currentColor"
-      height="20"
-      viewBox="0 0 20 20"
-      width="20"
-    >
-      <path
-        clipRule="evenodd"
-        d="M4.5559 4.55593C5.99976 3.11206 7.95806 2.3009 10 2.3009C12.0419 2.3009 14.0002 3.11206 15.4441 4.55593C16.888 5.99979 17.6991 7.9581 17.6991 10C17.6991 12.042 16.888 14.0003 15.4441 15.4441C14.0002 16.888 12.0419 17.6992 10 17.6992C7.95806 17.6992 5.99976 16.888 4.5559 15.4441C3.11203 14.0003 2.30087 12.042 2.30087 10C2.30087 7.9581 3.11203 5.99979 4.5559 4.55593ZM10 3.8009C8.35589 3.8009 6.77912 4.45402 5.61656 5.61659C4.45399 6.77915 3.80087 8.35592 3.80087 10C3.80087 11.6441 4.45399 13.2209 5.61656 14.3835C6.77912 15.546 8.35589 16.1992 10 16.1992C11.6441 16.1992 13.2209 15.546 14.3834 14.3835C15.546 13.2209 16.1991 11.6441 16.1991 10C16.1991 8.35592 15.546 6.77915 14.3834 5.61659C13.2209 4.45402 11.6441 3.8009 10 3.8009ZM10 9.25006C10.4142 9.25006 10.75 9.58585 10.75 10.0001V13.4746C10.75 13.8888 10.4142 14.2246 10 14.2246C9.58579 14.2246 9.25 13.8888 9.25 13.4746V10.0001C9.25 9.58585 9.58579 9.25006 10 9.25006ZM9.54135 6.21669C9.7058 6.10681 9.89914 6.04816 10.0969 6.04816C10.3621 6.04816 10.6165 6.15351 10.804 6.34105C10.9916 6.52859 11.0969 6.78294 11.0969 7.04816C11.0969 7.24593 11.0383 7.43927 10.9284 7.60373C10.8185 7.76818 10.6623 7.89635 10.4796 7.97204C10.2969 8.04772 10.0958 8.06753 9.90183 8.02894C9.70786 7.99036 9.52967 7.89512 9.38982 7.75526C9.24996 7.61541 9.15472 7.43722 9.11614 7.24325C9.07755 7.04927 9.09736 6.8482 9.17304 6.66547C9.24873 6.48275 9.3769 6.32657 9.54135 6.21669Z"
-        fill="currentColor"
-        fillRule="evenodd"
-      />
-    </svg>
-    <h5
-      className="typography primary start singleLineEllipsis text text1Medium title"
-      data-testid="text"
-    >
-      Title
-    </h5>
-  </div>
-  <div
-    className="container directionRow justifyStart alignCenter"
-    style={
-      {
-        "gap": "var(--spacing-xs)",
-      }
-    }
-  >
-    <p
-      className="typography primary start text text2Normal text dismissible paragraph"
-      data-testid="text"
-    >
-      Text
-    </p>
-  </div>
-  <div
-    className="closeIconWrapper wrapper"
-  >
-    <button
-      aria-busy={false}
-      aria-disabled={false}
-      aria-label="Close"
-      className="closeIcon button sizeMedium kindTertiary colorOnPrimaryColor noSidePadding"
-      data-testid="icon-button"
-      data-vibe="Button"
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onMouseDown={[Function]}
-      onMouseUp={[Function]}
-      style={
-        {
-          "alignItems": "center",
-          "height": "32px",
-          "justifyContent": "center",
-          "padding": 0,
-          "width": "32px",
-        }
-      }
-      type="button"
-    >
-      <svg
-        aria-hidden={true}
-        className="icon noFocusStyle"
-        data-testid="icon"
-        data-vibe="Icon"
-        fill="currentColor"
-        height="20"
-        viewBox="0 0 20 20"
-        width="20"
-      >
-        <path
-          d="M6.331 5.27a.75.75 0 0 0-1.06 1.06L8.94 10l-3.67 3.668a.75.75 0 1 0 1.06 1.06L10 11.06l3.668 3.669a.75.75 0 0 0 1.06-1.06l-3.668-3.67 3.67-3.669a.75.75 0 0 0-1.061-1.06L10 8.939l-3.669-3.67Z"
-        />
-      </svg>
-    </button>
-  </div>
-</aside>
-`;
-
-exports[`AttentionBox renders correctly > renders correctly with renderer 1`] = `
-<aside
-  className="attentionBox typePrimary"
-  data-testid="attention-box"
-  data-vibe="AttentionBox"
-  role="alert"
->
-  <div
-    className="container directionRow justifyStart alignCenter"
-    style={
-      {
-        "gap": "var(--spacing-xs)",
-      }
-    }
-  >
-    <p
-      className="typography primary start text text2Normal text paragraph"
-      data-testid="text"
-    >
-      <span>
-        renderer with components 
-        <div>
-          and sub components
-        </div>
-      </span>
-    </p>
-  </div>
-</aside>
-`;
-
-exports[`AttentionBox renders correctly > renders with icon font type 1`] = `
-<aside
-  className="attentionBox typePrimary"
-  data-testid="attention-box"
-  data-vibe="AttentionBox"
-  role="alert"
->
-  <div
-    className="container directionRow justifyStart alignCenter titleContainer"
-    style={
-      {
-        "gap": "var(--spacing-xs)",
-      }
-    }
-  >
-    <span
-      aria-hidden={true}
-      className="icon icon noFocusStyle fa fa fa-star"
-      data-testid="icon"
-      data-vibe="Icon"
-      onClick={[Function]}
-      role="img"
-    />
-    <h5
-      className="typography primary start singleLineEllipsis text text1Medium title"
-      data-testid="text"
-    >
-      Title
-    </h5>
-  </div>
-  <div
-    className="container directionRow justifyStart alignCenter"
-    style={
-      {
-        "gap": "var(--spacing-xs)",
-      }
-    }
-  >
-    <p
-      className="typography primary start text text2Normal text paragraph"
-      data-testid="text"
-    >
-      Text
-    </p>
-  </div>
-</aside>
-`;
diff --git a/packages/core/src/components/next/AttentionBox/components/AttentionBoxButton/AttentionBoxButton.tsx b/packages/core/src/components/AttentionBox/components/AttentionBoxButton/AttentionBoxButton.tsx
similarity index 100%
rename from packages/core/src/components/next/AttentionBox/components/AttentionBoxButton/AttentionBoxButton.tsx
rename to packages/core/src/components/AttentionBox/components/AttentionBoxButton/AttentionBoxButton.tsx
diff --git a/packages/core/src/components/next/AttentionBox/components/AttentionBoxCloseButton/AttentionBoxCloseButton.module.scss b/packages/core/src/components/AttentionBox/components/AttentionBoxCloseButton/AttentionBoxCloseButton.module.scss
similarity index 100%
rename from packages/core/src/components/next/AttentionBox/components/AttentionBoxCloseButton/AttentionBoxCloseButton.module.scss
rename to packages/core/src/components/AttentionBox/components/AttentionBoxCloseButton/AttentionBoxCloseButton.module.scss
diff --git a/packages/core/src/components/next/AttentionBox/components/AttentionBoxCloseButton/AttentionBoxCloseButton.tsx b/packages/core/src/components/AttentionBox/components/AttentionBoxCloseButton/AttentionBoxCloseButton.tsx
similarity index 94%
rename from packages/core/src/components/next/AttentionBox/components/AttentionBoxCloseButton/AttentionBoxCloseButton.tsx
rename to packages/core/src/components/AttentionBox/components/AttentionBoxCloseButton/AttentionBoxCloseButton.tsx
index 937f912328..62bfd0c293 100644
--- a/packages/core/src/components/next/AttentionBox/components/AttentionBoxCloseButton/AttentionBoxCloseButton.tsx
+++ b/packages/core/src/components/AttentionBox/components/AttentionBoxCloseButton/AttentionBoxCloseButton.tsx
@@ -21,7 +21,7 @@ const AttentionBoxCloseButton = ({
       size="xs"
       kind="tertiary"
       onClick={onClose}
-      ariaLabel={closeButtonAriaLabel}
+      aria-label={closeButtonAriaLabel}
       hideTooltip
       className={cx(styles.closeButton, className)}
     />
diff --git a/packages/core/src/components/next/AttentionBox/components/AttentionBoxLeadingIcon/AttentionBoxLeadingIcon.module.scss b/packages/core/src/components/AttentionBox/components/AttentionBoxLeadingIcon/AttentionBoxLeadingIcon.module.scss
similarity index 100%
rename from packages/core/src/components/next/AttentionBox/components/AttentionBoxLeadingIcon/AttentionBoxLeadingIcon.module.scss
rename to packages/core/src/components/AttentionBox/components/AttentionBoxLeadingIcon/AttentionBoxLeadingIcon.module.scss
diff --git a/packages/core/src/components/next/AttentionBox/components/AttentionBoxLeadingIcon/AttentionBoxLeadingIcon.tsx b/packages/core/src/components/AttentionBox/components/AttentionBoxLeadingIcon/AttentionBoxLeadingIcon.tsx
similarity index 81%
rename from packages/core/src/components/next/AttentionBox/components/AttentionBoxLeadingIcon/AttentionBoxLeadingIcon.tsx
rename to packages/core/src/components/AttentionBox/components/AttentionBoxLeadingIcon/AttentionBoxLeadingIcon.tsx
index 3f8a463f83..74a9e0fb72 100644
--- a/packages/core/src/components/next/AttentionBox/components/AttentionBoxLeadingIcon/AttentionBoxLeadingIcon.tsx
+++ b/packages/core/src/components/AttentionBox/components/AttentionBoxLeadingIcon/AttentionBoxLeadingIcon.tsx
@@ -10,7 +10,7 @@ export interface AttentionBoxLeadingIconProps {
 }
 
 const AttentionBoxLeadingIcon = ({ icon, iconType = "svg", className }: AttentionBoxLeadingIconProps) => {
-  return <Icon icon={icon} iconType={iconType} iconSize={20} className={cx(styles.icon, className)} />;
+  return <Icon icon={icon} type={iconType} size={20} className={cx(styles.icon, className)} />;
 };
 
 export default AttentionBoxLeadingIcon;
diff --git a/packages/core/src/components/next/AttentionBox/components/AttentionBoxLink/AttentionBoxLink.module.scss b/packages/core/src/components/AttentionBox/components/AttentionBoxLink/AttentionBoxLink.module.scss
similarity index 100%
rename from packages/core/src/components/next/AttentionBox/components/AttentionBoxLink/AttentionBoxLink.module.scss
rename to packages/core/src/components/AttentionBox/components/AttentionBoxLink/AttentionBoxLink.module.scss
diff --git a/packages/core/src/components/next/AttentionBox/components/AttentionBoxLink/AttentionBoxLink.tsx b/packages/core/src/components/AttentionBox/components/AttentionBoxLink/AttentionBoxLink.tsx
similarity index 83%
rename from packages/core/src/components/next/AttentionBox/components/AttentionBoxLink/AttentionBoxLink.tsx
rename to packages/core/src/components/AttentionBox/components/AttentionBoxLink/AttentionBoxLink.tsx
index af1c1a6650..078f4bd160 100644
--- a/packages/core/src/components/next/AttentionBox/components/AttentionBoxLink/AttentionBoxLink.tsx
+++ b/packages/core/src/components/AttentionBox/components/AttentionBoxLink/AttentionBoxLink.tsx
@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
 import cx from "classnames";
-import { Link } from "../../../../Link";
-import type { LinkProps } from "../../../../Link";
+import { Link } from "../../../Link";
+import type { LinkProps } from "../../../Link";
 import styles from "./AttentionBoxLink.module.scss";
 
 export type AttentionBoxLinkProps = LinkProps;
diff --git a/packages/core/src/components/next/AttentionBox/consts/icons.ts b/packages/core/src/components/AttentionBox/consts/icons.ts
similarity index 100%
rename from packages/core/src/components/next/AttentionBox/consts/icons.ts
rename to packages/core/src/components/AttentionBox/consts/icons.ts
diff --git a/packages/core/src/components/AttentionBox/index.ts b/packages/core/src/components/AttentionBox/index.ts
index 4847d2fac9..8e3617834c 100644
--- a/packages/core/src/components/AttentionBox/index.ts
+++ b/packages/core/src/components/AttentionBox/index.ts
@@ -1,4 +1,2 @@
-export { default as AttentionBox, type AttentionBoxProps } from "./AttentionBox";
-export { default as AttentionBoxLink, type AttentionBoxLinkProps } from "./AttentionBoxLink/AttentionBoxLink";
-
-export * from "./AttentionBox.types";
+export { default as AttentionBox } from "./AttentionBox";
+export type { AttentionBoxProps, AttentionBoxType } from "./AttentionBox.types";
diff --git a/packages/core/src/components/next/AttentionBox/layouts/AttentionBoxCompact/AttentionBoxCompact.module.scss b/packages/core/src/components/AttentionBox/layouts/AttentionBoxCompact/AttentionBoxCompact.module.scss
similarity index 100%
rename from packages/core/src/components/next/AttentionBox/layouts/AttentionBoxCompact/AttentionBoxCompact.module.scss
rename to packages/core/src/components/AttentionBox/layouts/AttentionBoxCompact/AttentionBoxCompact.module.scss
diff --git a/packages/core/src/components/next/AttentionBox/layouts/AttentionBoxCompact/AttentionBoxCompact.tsx b/packages/core/src/components/AttentionBox/layouts/AttentionBoxCompact/AttentionBoxCompact.tsx
similarity index 100%
rename from packages/core/src/components/next/AttentionBox/layouts/AttentionBoxCompact/AttentionBoxCompact.tsx
rename to packages/core/src/components/AttentionBox/layouts/AttentionBoxCompact/AttentionBoxCompact.tsx
diff --git a/packages/core/src/components/next/AttentionBox/layouts/AttentionBoxCompact/__tests__/AttentionBoxCompact.test.tsx b/packages/core/src/components/AttentionBox/layouts/AttentionBoxCompact/__tests__/AttentionBoxCompact.test.tsx
similarity index 100%
rename from packages/core/src/components/next/AttentionBox/layouts/AttentionBoxCompact/__tests__/AttentionBoxCompact.test.tsx
rename to packages/core/src/components/AttentionBox/layouts/AttentionBoxCompact/__tests__/AttentionBoxCompact.test.tsx
diff --git a/packages/core/src/components/next/AttentionBox/layouts/AttentionBoxDefault/AttentionBoxDefault.module.scss b/packages/core/src/components/AttentionBox/layouts/AttentionBoxDefault/AttentionBoxDefault.module.scss
similarity index 100%
rename from packages/core/src/components/next/AttentionBox/layouts/AttentionBoxDefault/AttentionBoxDefault.module.scss
rename to packages/core/src/components/AttentionBox/layouts/AttentionBoxDefault/AttentionBoxDefault.module.scss
diff --git a/packages/core/src/components/next/AttentionBox/layouts/AttentionBoxDefault/AttentionBoxDefault.tsx b/packages/core/src/components/AttentionBox/layouts/AttentionBoxDefault/AttentionBoxDefault.tsx
similarity index 100%
rename from packages/core/src/components/next/AttentionBox/layouts/AttentionBoxDefault/AttentionBoxDefault.tsx
rename to packages/core/src/components/AttentionBox/layouts/AttentionBoxDefault/AttentionBoxDefault.tsx
diff --git a/packages/core/src/components/next/AttentionBox/layouts/AttentionBoxDefault/__tests__/AttentionBoxDefault.test.tsx b/packages/core/src/components/AttentionBox/layouts/AttentionBoxDefault/__tests__/AttentionBoxDefault.test.tsx
similarity index 100%
rename from packages/core/src/components/next/AttentionBox/layouts/AttentionBoxDefault/__tests__/AttentionBoxDefault.test.tsx
rename to packages/core/src/components/AttentionBox/layouts/AttentionBoxDefault/__tests__/AttentionBoxDefault.test.tsx
diff --git a/packages/core/src/components/next/AttentionBox/utils/__tests__/iconUtils.test.ts b/packages/core/src/components/AttentionBox/utils/__tests__/iconUtils.test.ts
similarity index 100%
rename from packages/core/src/components/next/AttentionBox/utils/__tests__/iconUtils.test.ts
rename to packages/core/src/components/AttentionBox/utils/__tests__/iconUtils.test.ts
diff --git a/packages/core/src/components/next/AttentionBox/utils/iconUtils.ts b/packages/core/src/components/AttentionBox/utils/iconUtils.ts
similarity index 100%
rename from packages/core/src/components/next/AttentionBox/utils/iconUtils.ts
rename to packages/core/src/components/AttentionBox/utils/iconUtils.ts
diff --git a/packages/core/src/components/Avatar/Avatar.module.scss b/packages/core/src/components/Avatar/Avatar.module.scss
index d990390776..9b4dc9f9da 100644
--- a/packages/core/src/components/Avatar/Avatar.module.scss
+++ b/packages/core/src/components/Avatar/Avatar.module.scss
@@ -1,4 +1,4 @@
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 @import "./AvatarConstants";
 
 .avatar {
@@ -86,8 +86,7 @@
   transform: translate(-50%, -50%);
   display: grid;
   grid-template-columns: 50% 50%;
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline: auto;
   height: 110%;
   width: 110%;
 }
diff --git a/packages/core/src/components/Avatar/Avatar.tsx b/packages/core/src/components/Avatar/Avatar.tsx
index 2df10fb4e4..081716a32a 100644
--- a/packages/core/src/components/Avatar/Avatar.tsx
+++ b/packages/core/src/components/Avatar/Avatar.tsx
@@ -4,15 +4,13 @@ import { ComponentDefaultTestId, getTestId } from "../../tests/test-ids-utils";
 import cx from "classnames";
 import React, { type AriaRole, useCallback, useMemo } from "react";
 import { isNil } from "es-toolkit";
-import { ElementAllowedColor as ElementAllowedColorEnum } from "../../utils/colors-vars-map";
 import { type ElementAllowedColor, getElementColor } from "../../types/Colors";
-import { AvatarSize as AvatarSizeEnum, AvatarType as AvatarTypeEnum } from "./AvatarConstants";
 import { type AvatarSize, type AvatarType } from "./Avatar.types";
 import AvatarBadge, { type AvatarBadgeProps } from "./AvatarBadge";
 import AvatarContent from "./AvatarContent";
 import { Tooltip, type TooltipProps } from "@vibe/tooltip";
 import { ClickableWrapper } from "@vibe/clickable";
-import { type VibeComponentProps, withStaticPropsWithoutForwardRef } from "../../types";
+import { type VibeComponentProps } from "../../types";
 import { type SubIcon } from "@vibe/icon";
 import styles from "./Avatar.module.scss";
 import { ComponentVibeId } from "../../tests/constants";
@@ -33,7 +31,7 @@ export interface AvatarProps extends VibeComponentProps {
   /**
    * The ARIA label of the avatar.
    */
-  ariaLabel?: string;
+  "aria-label"?: string;
   /**
    * If true, the tooltip is disabled.
    */
@@ -81,7 +79,7 @@ export interface AvatarProps extends VibeComponentProps {
   /**
    * If true, the avatar is hidden from assistive technologies.
    */
-  ariaHidden?: boolean;
+  "aria-hidden"?: boolean;
   /**
    * If true, the avatar is disabled.
    */
@@ -127,14 +125,14 @@ const Avatar = ({
   icon,
   text,
   tooltipProps,
-  ariaLabel,
+  "aria-label": ariaLabel,
   withoutTooltip = false,
   role,
   backgroundColor = "chili-blue",
   square,
   disabled,
   tabIndex,
-  ariaHidden = false,
+  "aria-hidden": ariaHidden = false,
   topLeftBadgeProps,
   topRightBadgeProps,
   bottomLeftBadgeProps,
@@ -228,7 +226,7 @@ const Avatar = ({
         isClickable={!!onClick}
         clickableProps={{
           onClick: clickHandler,
-          tabIndex: "-1",
+          tabIndex: -1,
           className: styles.clickableWrapper
         }}
       >
@@ -254,7 +252,7 @@ const Avatar = ({
               src={src}
               icon={icon}
               text={text}
-              ariaLabel={ariaLabel}
+              aria-label={ariaLabel}
               role={role}
               textClassName={textClassName}
             />
@@ -266,16 +264,4 @@ const Avatar = ({
   );
 };
 
-interface AvatarStaticProps {
-  types: typeof AvatarTypeEnum;
-  sizes: typeof AvatarSizeEnum;
-  colors: typeof ElementAllowedColorEnum;
-  backgroundColors: typeof ElementAllowedColorEnum;
-}
-
-export default withStaticPropsWithoutForwardRef<AvatarProps, AvatarStaticProps>(Avatar, {
-  types: AvatarTypeEnum,
-  sizes: AvatarSizeEnum,
-  colors: ElementAllowedColorEnum,
-  backgroundColors: ElementAllowedColorEnum
-});
+export default Avatar;
diff --git a/packages/core/src/components/Avatar/AvatarBadge.tsx b/packages/core/src/components/Avatar/AvatarBadge.tsx
index a985d401a1..f666f033de 100644
--- a/packages/core/src/components/Avatar/AvatarBadge.tsx
+++ b/packages/core/src/components/Avatar/AvatarBadge.tsx
@@ -4,11 +4,11 @@ import { getStyle } from "../../helpers/typesciptCssModulesHelper";
 import { ComponentDefaultTestId, getTestId } from "../../tests/test-ids-utils";
 import cx from "classnames";
 import { Icon, CustomSvgIcon } from "@vibe/icon";
-import { AvatarSize as AvatarSizeEnum } from "./AvatarConstants";
 import { type AvatarSize } from "./Avatar.types";
 import styles from "./AvatarBadge.module.scss";
-import { type VibeComponentProps, withStaticPropsWithoutForwardRef } from "../../types";
+import { type VibeComponentProps } from "../../types";
 import { type SubIcon } from "@vibe/icon";
+import { ClickableWrapper } from "@vibe/clickable";
 
 export interface AvatarBadgeProps extends VibeComponentProps {
   /**
@@ -22,11 +22,15 @@ export interface AvatarBadgeProps extends VibeComponentProps {
   /**
    * The tab index of the badge.
    */
-  tabIndex?: string | number;
+  tabIndex?: number;
   /**
    * The size of the badge.
    */
   size?: AvatarSize;
+  /**
+   * Callback fired when the badge is clicked.
+   */
+  onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
 }
 
 const AvatarBadge = ({
@@ -36,25 +40,35 @@ const AvatarBadge = ({
   className,
   size = "large",
   id,
+  onClick,
   "data-testid": dataTestId,
   ...otherProps
 }: AvatarBadgeProps) => {
   const classNames = cx(getStyle(styles, camelCase("badge--" + size)), className);
   const testId = dataTestId || getTestId(ComponentDefaultTestId.AVATAR_BADGE, id);
+  const isClickable = tabIndex === -1 && !!onClick;
 
   if (icon) {
-    return <Icon icon={icon} className={classNames} {...otherProps} data-testid={testId} />;
+    return isClickable ? (
+      <ClickableWrapper isClickable clickableProps={{ onClick, tabIndex }}>
+        <Icon icon={icon} className={classNames} {...otherProps} data-testid={testId} />
+      </ClickableWrapper>
+    ) : (
+      <Icon icon={icon} className={classNames} tabindex={tabIndex} {...otherProps} data-testid={testId} />
+    );
   }
 
+  const svgIcon = <CustomSvgIcon src={src} className={classNames} {...otherProps} data-testid={testId} />;
+
   return src ? (
-    <CustomSvgIcon src={src} className={classNames} clickable={tabIndex === -1} {...otherProps} data-testid={testId} />
+    isClickable ? (
+      <ClickableWrapper isClickable clickableProps={{ onClick, tabIndex }}>
+        {svgIcon}
+      </ClickableWrapper>
+    ) : (
+      svgIcon
+    )
   ) : null;
 };
 
-interface AvatarBadgeStaticProps {
-  sizes: typeof AvatarSizeEnum;
-}
-
-export default withStaticPropsWithoutForwardRef<AvatarBadgeProps, AvatarBadgeStaticProps>(AvatarBadge, {
-  sizes: AvatarSizeEnum
-});
+export default AvatarBadge;
diff --git a/packages/core/src/components/Avatar/AvatarConstants.tsx b/packages/core/src/components/Avatar/AvatarConstants.tsx
deleted file mode 100644
index fd8941cd7d..0000000000
--- a/packages/core/src/components/Avatar/AvatarConstants.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * @deprecated
- */
-export enum AvatarType {
-  IMG = "img",
-  ICON = "icon",
-  TEXT = "text"
-}
-
-/**
- * @deprecated
- */
-export enum AvatarSize {
-  XS = "xs",
-  SMALL = "small",
-  MEDIUM = "medium",
-  LARGE = "large"
-}
diff --git a/packages/core/src/components/Avatar/AvatarContent.tsx b/packages/core/src/components/Avatar/AvatarContent.tsx
index 5b618680c6..a80eb8e0c5 100644
--- a/packages/core/src/components/Avatar/AvatarContent.tsx
+++ b/packages/core/src/components/Avatar/AvatarContent.tsx
@@ -3,10 +3,9 @@ import { getStyle } from "../../helpers/typesciptCssModulesHelper";
 import { ComponentDefaultTestId, getTestId } from "../../tests/test-ids-utils";
 import cx from "classnames";
 import React from "react";
-import { AvatarSize as AvatarSizeEnum, AvatarType as AvatarTypeEnum } from "./AvatarConstants";
 import { type AvatarSize, type AvatarType } from "./Avatar.types";
 import { Icon, type SubIcon } from "@vibe/icon";
-import { type VibeComponentProps, withStaticPropsWithoutForwardRef } from "../../types";
+import { type VibeComponentProps } from "../../types";
 import styles from "./AvatarContent.module.scss";
 
 export interface AvatarContentProps extends VibeComponentProps {
@@ -29,7 +28,7 @@ export interface AvatarContentProps extends VibeComponentProps {
   /**
    * The label of the content for accessibility.
    */
-  ariaLabel?: string;
+  "aria-label"?: string;
   /**
    * The icon displayed when the type is set to `icon`.
    */
@@ -49,7 +48,7 @@ const AvatarContent = ({
   src,
   icon,
   text,
-  ariaLabel,
+  "aria-label": ariaLabel,
   role,
   size = "large",
   textClassName = "",
@@ -79,7 +78,7 @@ const AvatarContent = ({
           aria-label={ariaLabel}
           // role={role}
           className={className}
-          ariaHidden={false}
+          aria-hidden={false}
           id={id}
           data-testid={dataTestId || getTestId(ComponentDefaultTestId.AVATAR_CONTENT, id)}
         />
@@ -101,12 +100,4 @@ const AvatarContent = ({
   }
 };
 
-interface AvatarContentStaticProps {
-  sizes: typeof AvatarSizeEnum;
-  types: typeof AvatarTypeEnum;
-}
-
-export default withStaticPropsWithoutForwardRef<AvatarContentProps, AvatarContentStaticProps>(AvatarContent, {
-  sizes: AvatarSizeEnum,
-  types: AvatarTypeEnum
-});
+export default AvatarContent;
diff --git a/packages/core/src/components/Avatar/__tests__/Avatar.snapshot.test.tsx b/packages/core/src/components/Avatar/__tests__/Avatar.snapshot.test.tsx
index 50fc51451d..b722ea6e87 100644
--- a/packages/core/src/components/Avatar/__tests__/Avatar.snapshot.test.tsx
+++ b/packages/core/src/components/Avatar/__tests__/Avatar.snapshot.test.tsx
@@ -78,7 +78,7 @@ describe("Avatar renders correctly", () => {
   });
 
   it("renders correctly accessibility props", () => {
-    const tree = renderer.create(<Avatar tabIndex={-1} ariaHidden />).toJSON();
+    const tree = renderer.create(<Avatar tabIndex={-1} aria-hidden />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/packages/core/src/components/AvatarGroup/AvatarGroup.module.scss b/packages/core/src/components/AvatarGroup/AvatarGroup.module.scss
index fbc9c226fb..ceb28f1d91 100644
--- a/packages/core/src/components/AvatarGroup/AvatarGroup.module.scss
+++ b/packages/core/src/components/AvatarGroup/AvatarGroup.module.scss
@@ -8,5 +8,5 @@
 }
 
 .avatarContainer {
-  margin-left: calc(-1 * var(--spacing-small));
+  margin-inline-start: calc(-1 * var(--space-8));
 }
diff --git a/packages/core/src/components/AvatarGroup/AvatarGroupCounter.module.scss b/packages/core/src/components/AvatarGroup/AvatarGroupCounter.module.scss
index 393cca766c..b4fb673e6b 100644
--- a/packages/core/src/components/AvatarGroup/AvatarGroupCounter.module.scss
+++ b/packages/core/src/components/AvatarGroup/AvatarGroupCounter.module.scss
@@ -1,5 +1,5 @@
 @use "sass:math";
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 @import "../../components/Avatar/AvatarConstants";
 
 .counterContainer.counterContainer {
@@ -7,7 +7,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-left: calc(-1 * var(--spacing-small));
+  margin-inline-start: calc(-1 * var(--space-8));
   z-index: 1;
   border: 1px solid var(--primary-background-color);
 
@@ -36,7 +36,7 @@
   }
   &.large {
     @include counterSize($avatar-size-large);
-    padding: 0 var(--spacing-xs);
+    padding: 0 var(--space-4);
   }
 
   &.primary {
diff --git a/packages/core/src/components/AvatarGroup/AvatarGroupCounter.tsx b/packages/core/src/components/AvatarGroup/AvatarGroupCounter.tsx
index c24c9c5fa3..a503648a29 100644
--- a/packages/core/src/components/AvatarGroup/AvatarGroupCounter.tsx
+++ b/packages/core/src/components/AvatarGroup/AvatarGroupCounter.tsx
@@ -84,7 +84,7 @@ const AvatarGroupCounter: React.FC<AvatarGroupCounterProps> = ({
         count={counterValue}
         prefix={counterPrefix}
         maxDigits={counterMaxDigits}
-        ariaLabel={counterAriaLabel ? counterAriaLabel : `Tab for more ${counterAriaLabelItemsName}`}
+        aria-label={counterAriaLabel ? counterAriaLabel : `Tab for more ${counterAriaLabelItemsName}`}
         noAnimation={noAnimation}
         counterClassName={cx({ [styles.disabled]: disabled })}
         size={size === "xs" ? "xs" : undefined}
@@ -123,23 +123,23 @@ const AvatarGroupCounter: React.FC<AvatarGroupCounterProps> = ({
         component={counterComponent}
         zIndex={1}
         className={cx(styles.counterContainer, counterSizeStyle, counterColorStyle)}
-        ariaLabel={counterAriaLabel ? counterAriaLabel : `${counterValue} additional ${counterAriaLabelItemsName}`}
+        aria-label={counterAriaLabel ? counterAriaLabel : `${counterValue} additional ${counterAriaLabelItemsName}`}
         dialogContainerSelector={dialogContainerSelector}
       >
-        <Menu id="menu" size={Menu.sizes.MEDIUM} className={styles.menu} focusItemIndexOnMount={0}>
+        <Menu id="menu" size="medium" className={styles.menu} focusItemIndexOnMount={0}>
           {counterTooltipAvatars.map((avatar, index) => {
             return (
               // eslint-disable-next-line react/jsx-key
               <AvatarMenuItem
                 menuItemProps={{
                   key: avatar.props?.id || String(index),
-                  title: (avatar.props?.tooltipProps?.content as string) || avatar?.props?.ariaLabel,
+                  title: (avatar.props?.tooltipProps?.content as string) || avatar?.props?.["aria-label"],
                   onClick: (event: React.MouseEvent | React.KeyboardEvent) => avatarOnClick(event, avatar.props)
                 }}
                 avatarProps={{
                   ...avatar.props,
                   customSize: AVATAR_GROUP_COUNTER_AVATAR_SIZE,
-                  ariaLabel: "",
+                  "aria-label": "",
                   tabIndex: -1
                 }}
               />
diff --git a/packages/core/src/components/AvatarGroup/AvatarGroupCounterTooltipContent.module.scss b/packages/core/src/components/AvatarGroup/AvatarGroupCounterTooltipContent.module.scss
index e099daa6b7..354d446ba1 100644
--- a/packages/core/src/components/AvatarGroup/AvatarGroupCounterTooltipContent.module.scss
+++ b/packages/core/src/components/AvatarGroup/AvatarGroupCounterTooltipContent.module.scss
@@ -1,4 +1,4 @@
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 
 .tooltipAvatarItemTitle {
   white-space: nowrap;
@@ -10,11 +10,11 @@
 
 .tooltipContainer {
   max-height: 300px;
-  padding-right: var(--spacing-medium);
+  padding-inline-end: var(--space-16);
   align-items: flex-start !important;
   overflow-x: visible;
   overflow-y: auto;
-  margin-top: var(--spacing-small);
+  margin-top: var(--space-8);
   &:focus,
   &:focus-visible,
   &.focus-visible { /* stylelint-disable-line selector-class-pattern */
@@ -24,7 +24,7 @@
 
 .tooltipGridContainer {
   max-width: 160px;
-  padding-right: 0;
+  padding-inline-end: 0;
 }
 .scrollableContainer {
   @include scroller();
diff --git a/packages/core/src/components/AvatarGroup/AvatarGroupCounterTooltipContent.tsx b/packages/core/src/components/AvatarGroup/AvatarGroupCounterTooltipContent.tsx
index 263286168b..e670c27e87 100644
--- a/packages/core/src/components/AvatarGroup/AvatarGroupCounterTooltipContent.tsx
+++ b/packages/core/src/components/AvatarGroup/AvatarGroupCounterTooltipContent.tsx
@@ -1,6 +1,6 @@
 import React, { type ReactElement, type Ref, useCallback, useMemo } from "react";
 import cx from "classnames";
-import { Flex } from "@vibe/layout";
+import { Flex, type FlexProps } from "@vibe/layout";
 import { type AvatarProps } from "../Avatar/Avatar";
 import AvatarGroupCounterTooltipContentVirtualizedList from "./AvatarGroupCounterTooltipContentVirtualizedList";
 import { avatarRenderer } from "./AvatarGroupCounterTooltipHelper";
@@ -35,7 +35,7 @@ const AvatarGroupCounterTooltipContent: React.FC<AvatarGroupCounterTooltipConten
   tooltipContentContainerRef
 }) => {
   const getTooltipContent = useCallback((avatarProps: AvatarProps) => {
-    return avatarProps?.tooltipProps?.content || avatarProps?.ariaLabel;
+    return avatarProps?.tooltipProps?.content || avatarProps?.["aria-label"];
   }, []);
 
   const { avatarItems, displayAsGrid, tooltipContainerAriaLabel } = useMemo(() => {
@@ -70,16 +70,16 @@ const AvatarGroupCounterTooltipContent: React.FC<AvatarGroupCounterTooltipConten
     ref: tooltipContentContainerRef,
     tabIndex: -1,
     role: "treegrid",
-    ariaLabel: tooltipContainerAriaLabel,
+    "aria-label": tooltipContainerAriaLabel,
     className: displayAsGrid
       ? cx(styles.scrollableContainer, styles.tooltipContainer, styles.tooltipGridContainer, className)
       : cx(styles.scrollableContainer, styles.tooltipContainer, className),
-    direction: displayAsGrid ? Flex.directions.ROW : Flex.directions.COLUMN,
-    gap: displayAsGrid ? Flex.gaps.XS : Flex.gaps.SMALL,
+    direction: displayAsGrid ? "row" : "column",
+    gap: displayAsGrid ? "xs" : "small",
     wrap: displayAsGrid
   };
 
-  return <Flex {...flexProps}>{renderedItems}</Flex>;
+  return <Flex {...(flexProps as FlexProps)}>{renderedItems}</Flex>;
 };
 
 export default AvatarGroupCounterTooltipContent;
diff --git a/packages/core/src/components/AvatarGroup/AvatarGroupCounterTooltipContentVirtualizedList.module.scss b/packages/core/src/components/AvatarGroup/AvatarGroupCounterTooltipContentVirtualizedList.module.scss
index bf21442f61..6f6e138576 100644
--- a/packages/core/src/components/AvatarGroup/AvatarGroupCounterTooltipContentVirtualizedList.module.scss
+++ b/packages/core/src/components/AvatarGroup/AvatarGroupCounterTooltipContentVirtualizedList.module.scss
@@ -1,4 +1,4 @@
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 
 .scrollableContainer {
   @include scroller();
diff --git a/packages/core/src/components/AvatarGroup/AvatarGroupCounterTooltipHelper.tsx b/packages/core/src/components/AvatarGroup/AvatarGroupCounterTooltipHelper.tsx
index 87e31e6045..cb1ffb6987 100644
--- a/packages/core/src/components/AvatarGroup/AvatarGroupCounterTooltipHelper.tsx
+++ b/packages/core/src/components/AvatarGroup/AvatarGroupCounterTooltipHelper.tsx
@@ -129,18 +129,18 @@ export const avatarRenderer = (
     <ClickableWrapper
       key={index}
       isClickable={!!avatarProps?.onClick}
-      clickableProps={{ onClick: event => avatarProps.onClick(event, avatarProps.id), tabIndex: "-1" }}
+      clickableProps={{ onClick: event => avatarProps.onClick(event, avatarProps.id), tabIndex: -1 }}
     >
       <div style={overrideStyle}>
-        <Flex direction="row" gap="xs" ariaLabelledby={labelId}>
+        <Flex direction="row" gap="xs" aria-labelledby={labelId}>
           <Avatar
             {...avatarProps}
             tooltipProps={undefined}
-            ariaLabel={""}
+            aria-label={""}
             customSize={AVATAR_GROUP_COUNTER_AVATAR_SIZE}
             type={type || avatarProps?.type}
             tabIndex={-1}
-            size={Avatar.sizes.SMALL}
+            size="small"
             className={avatarGroupCounterTooltipContentStyles.tooltipAvatarItemAvatar}
           />
           {!displayAsGrid && (
diff --git a/packages/core/src/components/AvatarGroup/__tests__/AvatarGroup.snapshot.test.jsx b/packages/core/src/components/AvatarGroup/__tests__/AvatarGroup.snapshot.test.tsx
similarity index 94%
rename from packages/core/src/components/AvatarGroup/__tests__/AvatarGroup.snapshot.test.jsx
rename to packages/core/src/components/AvatarGroup/__tests__/AvatarGroup.snapshot.test.tsx
index b1602dbf2f..bbbbce85d7 100644
--- a/packages/core/src/components/AvatarGroup/__tests__/AvatarGroup.snapshot.test.jsx
+++ b/packages/core/src/components/AvatarGroup/__tests__/AvatarGroup.snapshot.test.tsx
@@ -81,12 +81,12 @@ describe("AvatarGroup renders correctly", () => {
     expect(tree).toMatchSnapshot();
   });
 
-  it("renders correctly with counter ariaLabel default-tooltip", () => {
+  it("renders correctly with counter aria-label default-tooltip", () => {
     const tree = renderer
       .create(
         <AvatarGroup max={1}>
-          <Avatar text="P1" ariaLabel="Person 1" />
-          <Avatar text="P2" ariaLabel="Person 2" />
+          <Avatar text="P1" aria-label="Person 1" />
+          <Avatar text="P2" aria-label="Person 2" />
         </AvatarGroup>
       )
       .toJSON();
diff --git a/packages/core/src/components/AvatarGroup/__tests__/__snapshots__/AvatarGroup.snapshot.test.jsx.snap b/packages/core/src/components/AvatarGroup/__tests__/__snapshots__/AvatarGroup.snapshot.test.jsx.snap
index b59293bfdf..4c20e77413 100644
--- a/packages/core/src/components/AvatarGroup/__tests__/__snapshots__/AvatarGroup.snapshot.test.jsx.snap
+++ b/packages/core/src/components/AvatarGroup/__tests__/__snapshots__/AvatarGroup.snapshot.test.jsx.snap
@@ -90,7 +90,7 @@ exports[`AvatarGroup renders correctly > renders correctly with counter 1`] = `
 </div>
 `;
 
-exports[`AvatarGroup renders correctly > renders correctly with counter ariaLabel default-tooltip 1`] = `
+exports[`AvatarGroup renders correctly > renders correctly with counter aria-label default-tooltip 1`] = `
 <div
   className="avatarGroupContainer"
   data-vibe="AvatarGroup"
diff --git a/packages/core/src/components/AvatarGroup/__tests__/__snapshots__/AvatarGroup.snapshot.test.tsx.snap b/packages/core/src/components/AvatarGroup/__tests__/__snapshots__/AvatarGroup.snapshot.test.tsx.snap
new file mode 100644
index 0000000000..4c20e77413
--- /dev/null
+++ b/packages/core/src/components/AvatarGroup/__tests__/__snapshots__/AvatarGroup.snapshot.test.tsx.snap
@@ -0,0 +1,764 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AvatarGroup renders correctly > renders correctly with counter 1`] = `
+<div
+  className="avatarGroupContainer"
+  data-vibe="AvatarGroup"
+>
+  <div
+    className="avatar large avatarContainer"
+    data-testid="avatar"
+    data-vibe="Avatar"
+    style={{}}
+  >
+    <div
+      className="clickable clickableWrapper disableTextSelection"
+      data-testid="clickable"
+      onClick={[Function]}
+      onKeyDown={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      role="button"
+      tabIndex={-1}
+    >
+      <div
+        aria-hidden={false}
+        className="circle circleText"
+        style={
+          {
+            "backgroundColor": "var(--color-chili-blue)",
+          }
+        }
+        tabIndex={0}
+      >
+        <span
+          className="contentText contentTextLarge"
+          data-testid="avatar-content"
+        >
+          P1
+        </span>
+      </div>
+    </div>
+  </div>
+  <div
+    className=""
+    onBlur={[Function]}
+    onClick={[Function]}
+    onContextMenu={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDown={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    tabIndex={-1}
+  />
+  <div
+    className="counterContainer medium light"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onContextMenu={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDown={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    tabIndex={0}
+  >
+    <span
+      aria-label="Tab for more items 1"
+      aria-labelledby=""
+      data-vibe="Counter"
+      onMouseDown={[Function]}
+    >
+      <div
+        aria-label="1"
+        className="counter sizeLarge kindFill colorLight"
+      >
+        <span
+          data-testid="counter"
+          id="counter"
+        >
+          +1
+        </span>
+      </div>
+    </span>
+    <div
+      tabIndex={-1}
+    />
+  </div>
+</div>
+`;
+
+exports[`AvatarGroup renders correctly > renders correctly with counter aria-label default-tooltip 1`] = `
+<div
+  className="avatarGroupContainer"
+  data-vibe="AvatarGroup"
+>
+  <div
+    className="avatar large avatarContainer"
+    data-testid="avatar"
+    data-vibe="Avatar"
+    style={{}}
+  >
+    <div
+      className="clickable clickableWrapper disableTextSelection"
+      data-testid="clickable"
+      onClick={[Function]}
+      onKeyDown={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      role="button"
+      tabIndex={-1}
+    >
+      <div
+        aria-hidden={false}
+        className="circle circleText"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onContextMenu={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        style={
+          {
+            "backgroundColor": "var(--color-chili-blue)",
+          }
+        }
+        tabIndex={0}
+      >
+        <span
+          aria-label="Person 1"
+          className="contentText contentTextLarge"
+          data-testid="avatar-content"
+        >
+          P1
+        </span>
+      </div>
+    </div>
+  </div>
+  <div
+    className=""
+    onBlur={[Function]}
+    onClick={[Function]}
+    onContextMenu={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDown={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    tabIndex={-1}
+  />
+  <div
+    className="counterContainer medium light"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onContextMenu={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDown={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    tabIndex={0}
+  >
+    <span
+      aria-label="Tab for more items 1"
+      aria-labelledby=""
+      data-vibe="Counter"
+      onMouseDown={[Function]}
+    >
+      <div
+        aria-label="1"
+        className="counter sizeLarge kindFill colorLight"
+      >
+        <span
+          data-testid="counter"
+          id="counter"
+        >
+          +1
+        </span>
+      </div>
+    </span>
+    <div
+      tabIndex={-1}
+    />
+  </div>
+</div>
+`;
+
+exports[`AvatarGroup renders correctly > renders correctly with counter default-tooltip 1`] = `
+<div
+  className="avatarGroupContainer"
+  data-vibe="AvatarGroup"
+>
+  <div
+    className="avatar large avatarContainer"
+    data-testid="avatar"
+    data-vibe="Avatar"
+    style={{}}
+  >
+    <div
+      className="clickable clickableWrapper disableTextSelection"
+      data-testid="clickable"
+      onClick={[Function]}
+      onKeyDown={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      role="button"
+      tabIndex={-1}
+    >
+      <div
+        aria-hidden={false}
+        className="circle circleText"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onContextMenu={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        style={
+          {
+            "backgroundColor": "var(--color-chili-blue)",
+          }
+        }
+        tabIndex={0}
+      >
+        <span
+          className="contentText contentTextLarge"
+          data-testid="avatar-content"
+        >
+          P1
+        </span>
+      </div>
+    </div>
+  </div>
+  <div
+    className=""
+    onBlur={[Function]}
+    onClick={[Function]}
+    onContextMenu={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDown={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    tabIndex={-1}
+  />
+  <div
+    className="counterContainer medium light"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onContextMenu={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDown={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    tabIndex={0}
+  >
+    <span
+      aria-label="Tab for more items 1"
+      aria-labelledby=""
+      data-vibe="Counter"
+      onMouseDown={[Function]}
+    >
+      <div
+        aria-label="1"
+        className="counter sizeLarge kindFill colorLight"
+      >
+        <span
+          data-testid="counter"
+          id="counter"
+        >
+          +1
+        </span>
+      </div>
+    </span>
+    <div
+      tabIndex={-1}
+    />
+  </div>
+</div>
+`;
+
+exports[`AvatarGroup renders correctly > renders correctly with custom counter tooltip 1`] = `
+<div
+  className="avatarGroupContainer"
+  data-vibe="AvatarGroup"
+>
+  <div
+    className="avatar large avatarContainer"
+    data-testid="avatar"
+    data-vibe="Avatar"
+    style={{}}
+  >
+    <div
+      className="clickable clickableWrapper disableTextSelection"
+      data-testid="clickable"
+      onClick={[Function]}
+      onKeyDown={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      role="button"
+      tabIndex={-1}
+    >
+      <div
+        aria-hidden={false}
+        className="circle circleText"
+        style={
+          {
+            "backgroundColor": "var(--color-chili-blue)",
+          }
+        }
+        tabIndex={0}
+      >
+        <span
+          className="contentText contentTextLarge"
+          data-testid="avatar-content"
+        >
+          P1
+        </span>
+      </div>
+    </div>
+  </div>
+  <div
+    className=""
+    onBlur={[Function]}
+    onClick={[Function]}
+    onContextMenu={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDown={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    tabIndex={-1}
+  />
+  <div
+    className="counterContainer medium light"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onContextMenu={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDown={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    tabIndex={0}
+  >
+    <span
+      aria-label="Tab for more items 1"
+      aria-labelledby=""
+      data-vibe="Counter"
+      onMouseDown={[Function]}
+    >
+      <div
+        aria-label="1"
+        className="counter sizeLarge kindFill colorLight"
+      >
+        <span
+          data-testid="counter"
+          id="counter"
+        >
+          +1
+        </span>
+      </div>
+    </span>
+    <div
+      tabIndex={-1}
+    />
+  </div>
+</div>
+`;
+
+exports[`AvatarGroup renders correctly > renders correctly with custom counter value 1`] = `
+<div
+  className="avatarGroupContainer"
+  data-vibe="AvatarGroup"
+>
+  <div
+    className="avatar large avatarContainer"
+    data-testid="avatar"
+    data-vibe="Avatar"
+    style={{}}
+  >
+    <div
+      className="clickable clickableWrapper disableTextSelection"
+      data-testid="clickable"
+      onClick={[Function]}
+      onKeyDown={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      role="button"
+      tabIndex={-1}
+    >
+      <div
+        aria-hidden={false}
+        className="circle circleText"
+        style={
+          {
+            "backgroundColor": "var(--color-chili-blue)",
+          }
+        }
+        tabIndex={0}
+      >
+        <span
+          className="contentText contentTextLarge"
+          data-testid="avatar-content"
+        >
+          P1
+        </span>
+      </div>
+    </div>
+  </div>
+  <div
+    className="avatar large avatarContainer"
+    data-testid="avatar"
+    data-vibe="Avatar"
+    style={{}}
+  >
+    <div
+      className="clickable clickableWrapper disableTextSelection"
+      data-testid="clickable"
+      onClick={[Function]}
+      onKeyDown={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      role="button"
+      tabIndex={-1}
+    >
+      <div
+        aria-hidden={false}
+        className="circle circleText"
+        style={
+          {
+            "backgroundColor": "var(--color-chili-blue)",
+          }
+        }
+        tabIndex={0}
+      >
+        <span
+          className="contentText contentTextLarge"
+          data-testid="avatar-content"
+        >
+          P2
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`AvatarGroup renders correctly > renders correctly with dummy class name 1`] = `
+<div
+  className="avatarGroupContainer dummy-class-name"
+  data-vibe="AvatarGroup"
+>
+  <div
+    className="avatar large avatarContainer"
+    data-testid="avatar"
+    data-vibe="Avatar"
+    style={{}}
+  >
+    <div
+      className="clickable clickableWrapper disableTextSelection"
+      data-testid="clickable"
+      onClick={[Function]}
+      onKeyDown={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      role="button"
+      tabIndex={-1}
+    >
+      <div
+        aria-hidden={false}
+        className="circle circleText"
+        style={
+          {
+            "backgroundColor": "var(--color-chili-blue)",
+          }
+        }
+        tabIndex={0}
+      >
+        <span
+          className="contentText contentTextLarge"
+          data-testid="avatar-content"
+        >
+          P1
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`AvatarGroup renders correctly > renders correctly with large size 1`] = `
+<div
+  className="avatarGroupContainer"
+  data-vibe="AvatarGroup"
+>
+  <div
+    className="avatar large avatarContainer"
+    data-testid="avatar"
+    data-vibe="Avatar"
+    style={{}}
+  >
+    <div
+      className="clickable clickableWrapper disableTextSelection"
+      data-testid="clickable"
+      onClick={[Function]}
+      onKeyDown={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      role="button"
+      tabIndex={-1}
+    >
+      <div
+        aria-hidden={false}
+        className="circle circleText"
+        style={
+          {
+            "backgroundColor": "var(--color-chili-blue)",
+          }
+        }
+        tabIndex={0}
+      >
+        <span
+          className="contentText contentTextLarge"
+          data-testid="avatar-content"
+        >
+          P1
+        </span>
+      </div>
+    </div>
+  </div>
+  <div
+    className=""
+    onBlur={[Function]}
+    onClick={[Function]}
+    onContextMenu={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDown={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    tabIndex={-1}
+  />
+  <div
+    className="counterContainer large light"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onContextMenu={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDown={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    tabIndex={0}
+  >
+    <span
+      aria-label="Tab for more items 1"
+      aria-labelledby=""
+      data-vibe="Counter"
+      onMouseDown={[Function]}
+    >
+      <div
+        aria-label="1"
+        className="counter sizeLarge kindFill colorLight"
+      >
+        <span
+          data-testid="counter"
+          id="counter"
+        >
+          +1
+        </span>
+      </div>
+    </span>
+    <div
+      tabIndex={-1}
+    />
+  </div>
+</div>
+`;
+
+exports[`AvatarGroup renders correctly > renders correctly with xs size 1`] = `
+<div
+  className="avatarGroupContainer"
+  data-vibe="AvatarGroup"
+>
+  <div
+    className="avatar xs avatarContainer"
+    data-testid="avatar"
+    data-vibe="Avatar"
+    style={{}}
+  >
+    <div
+      className="clickable clickableWrapper disableTextSelection"
+      data-testid="clickable"
+      onClick={[Function]}
+      onKeyDown={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      role="button"
+      tabIndex={-1}
+    >
+      <div
+        aria-hidden={false}
+        className="circle circleText"
+        style={
+          {
+            "backgroundColor": "var(--color-chili-blue)",
+          }
+        }
+        tabIndex={0}
+      >
+        <span
+          className="contentText contentTextXs"
+          data-testid="avatar-content"
+        >
+          P1
+        </span>
+      </div>
+    </div>
+  </div>
+  <div
+    className=""
+    onBlur={[Function]}
+    onClick={[Function]}
+    onContextMenu={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDown={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    tabIndex={-1}
+  />
+  <div
+    className="counterContainer xs light"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onContextMenu={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDown={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    tabIndex={0}
+  >
+    <span
+      aria-label="Tab for more items 1"
+      aria-labelledby=""
+      data-vibe="Counter"
+      onMouseDown={[Function]}
+    >
+      <div
+        aria-label="1"
+        className="counter sizeXs kindFill colorLight"
+      >
+        <span
+          data-testid="counter"
+          id="counter"
+        >
+          +1
+        </span>
+      </div>
+    </span>
+    <div
+      tabIndex={-1}
+    />
+  </div>
+</div>
+`;
+
+exports[`AvatarGroup renders correctly > renders correctly without counter 1`] = `
+<div
+  className="avatarGroupContainer"
+  data-vibe="AvatarGroup"
+>
+  <div
+    className="avatar large avatarContainer"
+    data-testid="avatar"
+    data-vibe="Avatar"
+    style={{}}
+  >
+    <div
+      className="clickable clickableWrapper disableTextSelection"
+      data-testid="clickable"
+      onClick={[Function]}
+      onKeyDown={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      role="button"
+      tabIndex={-1}
+    >
+      <div
+        aria-hidden={false}
+        className="circle circleText"
+        style={
+          {
+            "backgroundColor": "var(--color-chili-blue)",
+          }
+        }
+        tabIndex={0}
+      >
+        <span
+          className="contentText contentTextLarge"
+          data-testid="avatar-content"
+        >
+          P1
+        </span>
+      </div>
+    </div>
+  </div>
+  <div
+    className="avatar large avatarContainer"
+    data-testid="avatar"
+    data-vibe="Avatar"
+    style={{}}
+  >
+    <div
+      className="clickable clickableWrapper disableTextSelection"
+      data-testid="clickable"
+      onClick={[Function]}
+      onKeyDown={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      role="button"
+      tabIndex={-1}
+    >
+      <div
+        aria-hidden={false}
+        className="circle circleText"
+        style={
+          {
+            "backgroundColor": "var(--color-chili-blue)",
+          }
+        }
+        tabIndex={0}
+      >
+        <span
+          className="contentText contentTextLarge"
+          data-testid="avatar-content"
+        >
+          P2
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`AvatarGroup renders correctly > with empty props 1`] = `null`;
diff --git a/packages/core/src/components/Badge/Badge.module.scss b/packages/core/src/components/Badge/Badge.module.scss
index 5688afa716..1b868837c4 100644
--- a/packages/core/src/components/Badge/Badge.module.scss
+++ b/packages/core/src/components/Badge/Badge.module.scss
@@ -16,19 +16,19 @@ $embeddedPosition: 15%;
     &.topEnd {
       &.rectangular {
         top: 0;
-        right: 0;
+        inset-inline-end: 0;
         translate: 50% -50%;
       }
 
       &.outside {
         top: 0;
-        right: -2px;
+        inset-inline-end: -2px;
         translate: 100% 0;
       }
 
       &.circular {
         top: $embeddedPosition;
-        right: $embeddedPosition;
+        inset-inline-end: $embeddedPosition;
         translate: 50% -50%;
       }
     }
@@ -36,19 +36,19 @@ $embeddedPosition: 15%;
     &.topStart {
       &.rectangular {
         top: 0;
-        left: 0;
+        inset-inline-start: 0;
         translate: -50% -50%;
       }
 
       &.outside {
         top: 0;
-        left: -2px;
+        inset-inline-start: -2px;
         translate: -100% 0;
       }
 
       &.circular {
         top: $embeddedPosition;
-        left: $embeddedPosition;
+        inset-inline-start: $embeddedPosition;
         translate: -50% -50%;
       }
     }
@@ -56,19 +56,19 @@ $embeddedPosition: 15%;
     &.bottomEnd {
       &.rectangular {
         bottom: 0;
-        right: 0;
+        inset-inline-end: 0;
         translate: 50% 50%;
       }
 
       &.outside {
         bottom: 0;
-        right: -2px;
+        inset-inline-end: -2px;
         translate: 100% 0;
       }
 
       &.circular {
         bottom: $embeddedPosition;
-        right: $embeddedPosition;
+        inset-inline-end: $embeddedPosition;
         translate: 50% 50%;
       }
     }
@@ -76,19 +76,19 @@ $embeddedPosition: 15%;
     &.bottomStart {
       &.rectangular {
         bottom: 0;
-        left: 0;
+        inset-inline-start: 0;
         translate: -50% 50%;
       }
 
       &.outside {
         bottom: 0;
-        left: -2px;
+        inset-inline-start: -2px;
         translate: -100% 0;
       }
 
       &.circular {
         bottom: $embeddedPosition;
-        left: $embeddedPosition;
+        inset-inline-start: $embeddedPosition;
         translate: -50% 50%;
       }
     }
diff --git a/packages/core/src/components/Badge/Badge.tsx b/packages/core/src/components/Badge/Badge.tsx
index 08df64b3be..931c2370c3 100644
--- a/packages/core/src/components/Badge/Badge.tsx
+++ b/packages/core/src/components/Badge/Badge.tsx
@@ -4,19 +4,14 @@ import { camelCase } from "es-toolkit";
 import useMergeRef from "../../hooks/useMergeRef";
 import { getTestId } from "../../tests/test-ids-utils";
 import { ComponentDefaultTestId, ComponentVibeId } from "../../tests/constants";
-import {
-  BadgeAlignments as BadgeAlignmentsEnum,
-  BadgeAnchor as BadgeAnchorEnum,
-  BadgeType as BadgeTypeEnum
-} from "./BadgeConstants";
 import { type BadgeAlignments, type BadgeAnchor, type BadgeType } from "./Badge.types";
 import Indicator, { type IndicatorProps } from "./Indicator/Indicator";
 import Counter, { type CounterProps } from "../Counter/Counter";
 import { getStyle } from "../../helpers/typesciptCssModulesHelper";
-import { type IndicatorColor } from "./Indicator/IndicatorConstants";
-import { type CounterColor } from "../Counter/CounterConstants";
+import { type IndicatorColor } from "./Indicator/Indicator.types";
+import { type CounterColor } from "../Counter/Counter.types";
 import styles from "./Badge.module.scss";
-import { type VibeComponentProps, withStaticProps } from "../../types";
+import { type VibeComponentProps } from "../../types";
 
 export interface BadgeBaseProps extends VibeComponentProps {
   /**
@@ -88,14 +83,4 @@ const Badge = forwardRef(
   }
 );
 
-interface BadgeStaticProps {
-  types: typeof BadgeTypeEnum;
-  alignments: typeof BadgeAlignmentsEnum;
-  anchors: typeof BadgeAnchorEnum;
-}
-
-export default withStaticProps<BadgeProps, BadgeStaticProps>(Badge, {
-  types: BadgeTypeEnum,
-  alignments: BadgeAlignmentsEnum,
-  anchors: BadgeAnchorEnum
-});
+export default Badge;
diff --git a/packages/core/src/components/Badge/BadgeConstants.ts b/packages/core/src/components/Badge/BadgeConstants.ts
deleted file mode 100644
index ce3fdd79c5..0000000000
--- a/packages/core/src/components/Badge/BadgeConstants.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { DialogPositionEnum as DialogPosition } from "@vibe/dialog";
-
-/**
- * @deprecated
- */
-export enum BadgeType {
-  INDICATOR = "indicator",
-  COUNTER = "counter"
-}
-
-/**
- * @deprecated
- */
-export enum BadgeAnchor {
-  TOP_START = DialogPosition.TOP_START,
-  TOP_END = DialogPosition.TOP_END,
-  BOTTOM_START = DialogPosition.BOTTOM_START,
-  BOTTOM_END = DialogPosition.BOTTOM_END
-}
-
-/**
- * @deprecated
- */
-export enum BadgeAlignments {
-  RECTANGULAR = "rectangular",
-  OUTSIDE = "outside",
-  CIRCULAR = "circular"
-}
diff --git a/packages/core/src/components/Badge/Indicator/Indicator.tsx b/packages/core/src/components/Badge/Indicator/Indicator.tsx
index 35cacf71ae..9d9874d3c0 100644
--- a/packages/core/src/components/Badge/Indicator/Indicator.tsx
+++ b/packages/core/src/components/Badge/Indicator/Indicator.tsx
@@ -1,10 +1,9 @@
 import React from "react";
 import cx from "classnames";
 import styles from "./Indicator.module.scss";
-import { IndicatorColor as IndicatorColorEnum } from "./IndicatorConstants";
 import { type IndicatorColor } from "./Indicator.types";
 import { ComponentDefaultTestId } from "../../../tests/constants";
-import { type VibeComponentProps, withStaticPropsWithoutForwardRef } from "../../../types";
+import { type VibeComponentProps } from "../../../types";
 import { getTestId } from "../../../tests/test-ids-utils";
 
 export interface IndicatorProps extends VibeComponentProps {
@@ -23,10 +22,4 @@ const Indicator = ({ color = "notification", className, id, "data-testid": dataT
   );
 };
 
-interface IndicatorStaticProps {
-  colors: typeof IndicatorColorEnum;
-}
-
-export default withStaticPropsWithoutForwardRef<IndicatorProps, IndicatorStaticProps>(Indicator, {
-  colors: IndicatorColorEnum
-});
+export default Indicator;
diff --git a/packages/core/src/components/Badge/Indicator/IndicatorConstants.ts b/packages/core/src/components/Badge/Indicator/IndicatorConstants.ts
deleted file mode 100644
index da42c85de7..0000000000
--- a/packages/core/src/components/Badge/Indicator/IndicatorConstants.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * @deprecated
- */
-export enum IndicatorColor {
-  PRIMARY = "primary",
-  NOTIFICATION = "notification"
-}
diff --git a/packages/core/src/components/Badge/Indicator/__tests__/Indicator.snapshot.test.tsx b/packages/core/src/components/Badge/Indicator/__tests__/Indicator.snapshot.test.tsx
index bcd1af8e57..cd5c85c5d4 100644
--- a/packages/core/src/components/Badge/Indicator/__tests__/Indicator.snapshot.test.tsx
+++ b/packages/core/src/components/Badge/Indicator/__tests__/Indicator.snapshot.test.tsx
@@ -2,7 +2,6 @@ import { describe, it, expect } from "vitest";
 import React from "react";
 import renderer from "react-test-renderer";
 import Indicator from "../Indicator";
-import { IndicatorColor } from "../IndicatorConstants";
 
 describe("Indicator", () => {
   it("renders correctly with empty props", () => {
@@ -11,7 +10,7 @@ describe("Indicator", () => {
   });
 
   it("renders correctly with a custom color", () => {
-    const tree = renderer.create(<Indicator color={IndicatorColor.PRIMARY} />).toJSON();
+    const tree = renderer.create(<Indicator color="primary" />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/packages/core/src/components/BaseItem/BaseItem.module.scss b/packages/core/src/components/BaseItem/BaseItem.module.scss
index a9e6459b4b..024a56bddd 100644
--- a/packages/core/src/components/BaseItem/BaseItem.module.scss
+++ b/packages/core/src/components/BaseItem/BaseItem.module.scss
@@ -3,7 +3,7 @@
 .wrapper {
   display: flex;
   align-items: center;
-  gap: var(--spacing-xs);
+  gap: var(--space-4);
   border-radius: var(--border-radius-small);
   color: var(--primary-text-color);
   cursor: pointer;
@@ -33,7 +33,7 @@
   }
 
   &.small {
-    padding: 6px var(--spacing-small);
+    padding: 6px var(--space-8);
   }
 
   &.medium {
@@ -54,7 +54,7 @@
   }
 
   .endElement {
-    padding-inline-start: var(--spacing-small);
+    padding-inline-start: var(--space-8);
     margin-inline-start: auto;
     display: flex;
   }
diff --git a/packages/core/src/components/BaseItem/utils.tsx b/packages/core/src/components/BaseItem/utils.tsx
index cf18ee06d1..d8de792372 100644
--- a/packages/core/src/components/BaseItem/utils.tsx
+++ b/packages/core/src/components/BaseItem/utils.tsx
@@ -25,7 +25,7 @@ export function renderSideElement(
       );
 
     case "icon":
-      return <Icon className={styles.icon} icon={element.value} iconSize={20} />;
+      return <Icon className={styles.icon} icon={element.value} size={20} />;
 
     case "indent":
       return <div className={styles.indent} />;
diff --git a/packages/core/src/components/BaseList/BaseList.module.scss b/packages/core/src/components/BaseList/BaseList.module.scss
index 8f3c216f5c..156c8fbed6 100644
--- a/packages/core/src/components/BaseList/BaseList.module.scss
+++ b/packages/core/src/components/BaseList/BaseList.module.scss
@@ -1,4 +1,4 @@
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 @import "../../styles/states";
 @import "../../styles/typography";
 
diff --git a/packages/core/src/components/BaseList/BaseList.tsx b/packages/core/src/components/BaseList/BaseList.tsx
index eef685f2ec..95f2c04e95 100644
--- a/packages/core/src/components/BaseList/BaseList.tsx
+++ b/packages/core/src/components/BaseList/BaseList.tsx
@@ -21,8 +21,8 @@ const BaseList = forwardRef(
       id,
       as = "ul",
       children,
-      ariaLabel,
-      ariaDescribedBy,
+      "aria-label": ariaLabel,
+      "aria-describedby": ariaDescribedBy,
       "aria-controls": ariaControls,
       role = "listbox",
       size = "medium",
diff --git a/packages/core/src/components/BaseList/BaseList.types.ts b/packages/core/src/components/BaseList/BaseList.types.ts
index a12b30fea1..76433450fb 100644
--- a/packages/core/src/components/BaseList/BaseList.types.ts
+++ b/packages/core/src/components/BaseList/BaseList.types.ts
@@ -21,13 +21,13 @@ export interface BaseListProps extends Omit<React.HTMLAttributes<HTMLElement>, "
    */
   children?: ReactElement | ReactElement[];
   /**
-   * The ARIA label describing the list. Required for accessibility when ariaDescribedBy is not provided.
+   * The ARIA label describing the list. Required for accessibility when aria-describedby is not provided.
    */
-  ariaLabel?: string;
+  "aria-label"?: string;
   /**
    * The ID of an element that describes the list.
    */
-  ariaDescribedBy?: string;
+  "aria-describedby"?: string;
   /**
    * The ID of an element controlled by the list.
    */
diff --git a/packages/core/src/components/BaseList/__tests__/BaseList.test.tsx b/packages/core/src/components/BaseList/__tests__/BaseList.test.tsx
index d6d3c5c50f..5592c89c56 100644
--- a/packages/core/src/components/BaseList/__tests__/BaseList.test.tsx
+++ b/packages/core/src/components/BaseList/__tests__/BaseList.test.tsx
@@ -8,7 +8,7 @@ import { type BaseListProps } from "../BaseList.types";
 
 function renderBaseList(props?: Partial<Omit<BaseListProps, "id">> & { id?: string }) {
   return render(
-    <BaseList id="test-list" ariaLabel="Test List" {...props}>
+    <BaseList id="test-list" aria-label="Test List" {...props}>
       <BaseItem item={{ label: "Item 1", value: "1" }} />
       <BaseItem item={{ label: "Item 2", value: "2" }} />
       <BaseItem item={{ label: "Item 3", value: "3" }} />
@@ -37,7 +37,7 @@ describe("BaseList", () => {
 
     it("should render with custom element type", () => {
       render(
-        <BaseList id="ordered-list" as="ol" ariaLabel="Ordered List">
+        <BaseList id="ordered-list" as="ol" aria-label="Ordered List">
           <BaseItem item={{ label: "Item 1", value: "1" }} />
         </BaseList>
       );
@@ -48,7 +48,7 @@ describe("BaseList", () => {
 
   describe("accessibility", () => {
     it("should have correct aria-label", () => {
-      renderBaseList({ ariaLabel: "Custom Label" });
+      renderBaseList({ "aria-label": "Custom Label" });
       expect(screen.getByLabelText("Custom Label")).toBeInTheDocument();
     });
 
@@ -61,7 +61,7 @@ describe("BaseList", () => {
       render(
         <>
           <span id="description">List description</span>
-          <BaseList id="described-list" ariaLabel="Test" ariaDescribedBy="description">
+          <BaseList id="described-list" aria-label="Test" aria-describedby="description">
             <BaseItem item={{ label: "Item 1", value: "1" }} />
           </BaseList>
         </>
@@ -195,7 +195,7 @@ describe("BaseList", () => {
   describe("with selected items", () => {
     it("should focus on selected item initially", () => {
       render(
-        <BaseList id="selected-list" ariaLabel="Test List">
+        <BaseList id="selected-list" aria-label="Test List">
           <BaseItem item={{ label: "Item 1", value: "1" }} />
           <BaseItem item={{ label: "Item 2", value: "2" }} selected />
           <BaseItem item={{ label: "Item 3", value: "3" }} />
@@ -211,7 +211,7 @@ describe("BaseList", () => {
   describe("with disabled items", () => {
     it("should support disabled items", () => {
       render(
-        <BaseList id="disabled-list" ariaLabel="Test List">
+        <BaseList id="disabled-list" aria-label="Test List">
           <BaseItem item={{ label: "Item 1", value: "1" }} />
           <BaseItem item={{ label: "Disabled Item", value: "disabled", disabled: true }} />
           <BaseItem item={{ label: "Item 2", value: "2" }} />
@@ -232,7 +232,7 @@ describe("BaseList", () => {
 
     it("should assign role='menuitem' to children when list role is 'menu'", () => {
       render(
-        <BaseList id="menu-list" ariaLabel="Menu" role="menu">
+        <BaseList id="menu-list" aria-label="Menu" role="menu">
           <BaseItem item={{ label: "Action 1", value: "1" }} />
           <BaseItem item={{ label: "Action 2", value: "2" }} />
         </BaseList>
@@ -243,7 +243,7 @@ describe("BaseList", () => {
 
     it("should allow explicit role override on individual items", () => {
       render(
-        <BaseList id="override-list" ariaLabel="Test List" role="listbox">
+        <BaseList id="override-list" aria-label="Test List" role="listbox">
           <BaseItem item={{ label: "Item 1", value: "1" }} />
           <BaseItem item={{ label: "Item 2", value: "2" }} role="menuitem" />
         </BaseList>
diff --git a/packages/core/src/components/BreadcrumbsBar/BreadcrumbItem/BreadcrumbContent/BreadcrumbContent.module.scss b/packages/core/src/components/BreadcrumbsBar/BreadcrumbItem/BreadcrumbContent/BreadcrumbContent.module.scss
index 39e179671f..de056f1a16 100644
--- a/packages/core/src/components/BreadcrumbsBar/BreadcrumbItem/BreadcrumbContent/BreadcrumbContent.module.scss
+++ b/packages/core/src/components/BreadcrumbsBar/BreadcrumbItem/BreadcrumbContent/BreadcrumbContent.module.scss
@@ -1,4 +1,4 @@
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 @import "../../../../styles/states";
 
 .breadcrumbContent {
diff --git a/packages/core/src/components/BreadcrumbsBar/BreadcrumbItem/__tests__/BreadcrumbItem.snapshot.test.jsx b/packages/core/src/components/BreadcrumbsBar/BreadcrumbItem/__tests__/BreadcrumbItem.snapshot.test.tsx
similarity index 100%
rename from packages/core/src/components/BreadcrumbsBar/BreadcrumbItem/__tests__/BreadcrumbItem.snapshot.test.jsx
rename to packages/core/src/components/BreadcrumbsBar/BreadcrumbItem/__tests__/BreadcrumbItem.snapshot.test.tsx
diff --git a/packages/core/src/components/BreadcrumbsBar/BreadcrumbItem/__tests__/BreadcrumbItem.test.jsx b/packages/core/src/components/BreadcrumbsBar/BreadcrumbItem/__tests__/BreadcrumbItem.test.tsx
similarity index 100%
rename from packages/core/src/components/BreadcrumbsBar/BreadcrumbItem/__tests__/BreadcrumbItem.test.jsx
rename to packages/core/src/components/BreadcrumbsBar/BreadcrumbItem/__tests__/BreadcrumbItem.test.tsx
diff --git a/packages/core/src/components/BreadcrumbsBar/BreadcrumbItem/__tests__/__snapshots__/BreadcrumbItem.snapshot.test.tsx.snap b/packages/core/src/components/BreadcrumbsBar/BreadcrumbItem/__tests__/__snapshots__/BreadcrumbItem.snapshot.test.tsx.snap
new file mode 100644
index 0000000000..d977871ed4
--- /dev/null
+++ b/packages/core/src/components/BreadcrumbsBar/BreadcrumbItem/__tests__/__snapshots__/BreadcrumbItem.snapshot.test.tsx.snap
@@ -0,0 +1,185 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BreadcrumbsItem renders correctly > when disabled item 1`] = `
+<nav
+  aria-label="Breadcrumb"
+  className="breadcrumbsBar"
+  data-testid="breadcrumbs-bar"
+  data-vibe="BreadcrumbsBar"
+>
+  <ol>
+    <li
+      className="breadcrumbItemWrapper disabled"
+      data-testid="breadcrumb-item"
+    >
+      <span
+        aria-disabled="true"
+        className="breadcrumbContent disabled notClickable"
+        tabIndex={-1}
+      >
+        <span
+          className="breadcrumbText"
+        >
+          
+        </span>
+      </span>
+    </li>
+  </ol>
+</nav>
+`;
+
+exports[`BreadcrumbsItem renders correctly > with className 1`] = `
+<nav
+  aria-label="Breadcrumb"
+  className="breadcrumbsBar"
+  data-testid="breadcrumbs-bar"
+  data-vibe="BreadcrumbsBar"
+>
+  <ol>
+    <li
+      className="breadcrumbItemWrapper test"
+      data-testid="breadcrumb-item"
+    >
+      <span
+        aria-disabled="true"
+        className="breadcrumbContent notClickable"
+        tabIndex={0}
+      >
+        <span
+          className="breadcrumbText"
+        >
+          
+        </span>
+      </span>
+    </li>
+  </ol>
+</nav>
+`;
+
+exports[`BreadcrumbsItem renders correctly > with current item 1`] = `
+<nav
+  aria-label="Breadcrumb"
+  className="breadcrumbsBar"
+  data-testid="breadcrumbs-bar"
+  data-vibe="BreadcrumbsBar"
+>
+  <ol>
+    <li
+      className="breadcrumbItemWrapper"
+      data-testid="breadcrumb-item"
+    >
+      <span
+        aria-current="page"
+        aria-disabled="true"
+        className="breadcrumbContent current notClickable"
+        tabIndex={0}
+      >
+        <span
+          className="breadcrumbText"
+        >
+          
+        </span>
+      </span>
+    </li>
+  </ol>
+</nav>
+`;
+
+exports[`BreadcrumbsItem renders correctly > with empty props 1`] = `
+<nav
+  aria-label="Breadcrumb"
+  className="breadcrumbsBar"
+  data-testid="breadcrumbs-bar"
+  data-vibe="BreadcrumbsBar"
+>
+  <ol>
+    <li
+      className="breadcrumbItemWrapper"
+      data-testid="breadcrumb-item"
+    >
+      <span
+        aria-disabled="true"
+        className="breadcrumbContent notClickable"
+        tabIndex={0}
+      >
+        <span
+          className="breadcrumbText"
+        >
+          
+        </span>
+      </span>
+    </li>
+  </ol>
+</nav>
+`;
+
+exports[`BreadcrumbsItem renders correctly > with icon 1`] = `
+<nav
+  aria-label="Breadcrumb"
+  className="breadcrumbsBar"
+  data-testid="breadcrumbs-bar"
+  data-vibe="BreadcrumbsBar"
+>
+  <ol>
+    <li
+      className="breadcrumbItemWrapper"
+      data-testid="breadcrumb-item"
+    >
+      <span
+        aria-disabled="true"
+        className="breadcrumbContent notClickable"
+        tabIndex={0}
+      >
+        <svg
+          className="breadcrumbIcon"
+          clickable={false}
+          fill="currentColor"
+          height={14}
+          viewBox="0 0 20 20"
+          width={14}
+        >
+          <path
+            clipRule="evenodd"
+            d="M7.5 4.5H16C16.2761 4.5 16.5 4.72386 16.5 5V15C16.5 15.2761 16.2761 15.5 16 15.5H7.5L7.5 4.5ZM6 4.5H4C3.72386 4.5 3.5 4.72386 3.5 5V15C3.5 15.2761 3.72386 15.5 4 15.5H6L6 4.5ZM2 5C2 3.89543 2.89543 3 4 3H16C17.1046 3 18 3.89543 18 5V15C18 16.1046 17.1046 17 16 17H4C2.89543 17 2 16.1046 2 15V5Z"
+            fill="currentColor"
+            fillRule="evenodd"
+          />
+        </svg>
+        <span
+          className="breadcrumbText"
+        >
+          
+        </span>
+      </span>
+    </li>
+  </ol>
+</nav>
+`;
+
+exports[`BreadcrumbsItem renders correctly > with text 1`] = `
+<nav
+  aria-label="Breadcrumb"
+  className="breadcrumbsBar"
+  data-testid="breadcrumbs-bar"
+  data-vibe="BreadcrumbsBar"
+>
+  <ol>
+    <li
+      className="breadcrumbItemWrapper"
+      data-testid="breadcrumb-item"
+    >
+      <span
+        aria-disabled="true"
+        className="breadcrumbContent notClickable"
+        tabIndex={0}
+      >
+        <span
+          className="breadcrumbText"
+        >
+          item
+        </span>
+      </span>
+    </li>
+  </ol>
+</nav>
+`;
diff --git a/packages/core/src/components/BreadcrumbsBar/BreadcrumbMenu/BreadcrumbMenu.tsx b/packages/core/src/components/BreadcrumbsBar/BreadcrumbMenu/BreadcrumbMenu.tsx
index b89f7cc297..4a8eeafd9b 100644
--- a/packages/core/src/components/BreadcrumbsBar/BreadcrumbMenu/BreadcrumbMenu.tsx
+++ b/packages/core/src/components/BreadcrumbsBar/BreadcrumbMenu/BreadcrumbMenu.tsx
@@ -23,12 +23,12 @@ const BreadcrumbMenu = forwardRef(
           id={menuButtonId}
           size={"xxs"}
           closeMenuOnItemClick
-          ariaLabel={"Hidden breadcrumbs menu"}
+          aria-label={"Hidden breadcrumbs menu"}
           data-testid={dataTestId || getTestId(ComponentDefaultTestId.BREADCRUMB_MENU, id)}
-          ariaControls={menuId}
+          aria-controls={menuId}
           ref={ref}
         >
-          <Menu id={menuId} size={"medium"} focusItemIndexOnMount={0} ariaLabel="Expanded breadcrumbs menu">
+          <Menu id={menuId} size={"medium"} focusItemIndexOnMount={0} aria-label="Expanded breadcrumbs menu">
             {children}
           </Menu>
         </MenuButton>
diff --git a/packages/core/src/components/BreadcrumbsBar/BreadcrumbMenu/__tests__/BreadcrumbMenu.snapshot.test.jsx b/packages/core/src/components/BreadcrumbsBar/BreadcrumbMenu/__tests__/BreadcrumbMenu.snapshot.test.tsx
similarity index 100%
rename from packages/core/src/components/BreadcrumbsBar/BreadcrumbMenu/__tests__/BreadcrumbMenu.snapshot.test.jsx
rename to packages/core/src/components/BreadcrumbsBar/BreadcrumbMenu/__tests__/BreadcrumbMenu.snapshot.test.tsx
diff --git a/packages/core/src/components/BreadcrumbsBar/BreadcrumbMenu/__tests__/BreadcrumbMenu.test.jsx b/packages/core/src/components/BreadcrumbsBar/BreadcrumbMenu/__tests__/BreadcrumbMenu.test.tsx
similarity index 100%
rename from packages/core/src/components/BreadcrumbsBar/BreadcrumbMenu/__tests__/BreadcrumbMenu.test.jsx
rename to packages/core/src/components/BreadcrumbsBar/BreadcrumbMenu/__tests__/BreadcrumbMenu.test.tsx
diff --git a/packages/core/src/components/BreadcrumbsBar/BreadcrumbMenu/__tests__/__snapshots__/BreadcrumbMenu.snapshot.test.tsx.snap b/packages/core/src/components/BreadcrumbsBar/BreadcrumbMenu/__tests__/__snapshots__/BreadcrumbMenu.snapshot.test.tsx.snap
new file mode 100644
index 0000000000..f4c681120c
--- /dev/null
+++ b/packages/core/src/components/BreadcrumbsBar/BreadcrumbMenu/__tests__/__snapshots__/BreadcrumbMenu.snapshot.test.tsx.snap
@@ -0,0 +1,127 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BreadcrumbMenu > renders correctly with custom className 1`] = `
+<li
+  className="custom-class"
+>
+  <button
+    aria-controls="breadcrumb-menu-button-menu"
+    aria-disabled={false}
+    aria-expanded={false}
+    aria-haspopup="true"
+    aria-label="Hidden breadcrumbs menu"
+    className="wrapper sizeXxs"
+    data-testid="breadcrumb-menu"
+    data-vibe="MenuButton"
+    id="breadcrumb-menu-button"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onContextMenu={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDown={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      fill="currentColor"
+      height="16"
+      role="img"
+      viewBox="0 0 20 20"
+      width="16"
+    >
+      <path
+        d="M6 10.5C6 11.3284 5.32843 12 4.5 12 3.67157 12 3 11.3284 3 10.5 3 9.67157 3.67157 9 4.5 9 5.32843 9 6 9.67157 6 10.5zM11.8333 10.5C11.8333 11.3284 11.1618 12 10.3333 12 9.50492 12 8.83334 11.3284 8.83334 10.5 8.83334 9.67157 9.50492 9 10.3333 9 11.1618 9 11.8333 9.67157 11.8333 10.5zM17.6667 10.5C17.6667 11.3284 16.9951 12 16.1667 12 15.3383 12 14.6667 11.3284 14.6667 10.5 14.6667 9.67157 15.3383 9 16.1667 9 16.9951 9 17.6667 9.67157 17.6667 10.5z"
+        fill="currentColor"
+      />
+    </svg>
+  </button>
+</li>
+`;
+
+exports[`BreadcrumbMenu > renders correctly with empty props 1`] = `
+<li
+  className="breadcrumbMenuWrapper"
+>
+  <button
+    aria-controls="breadcrumb-menu-button-menu"
+    aria-disabled={false}
+    aria-expanded={false}
+    aria-haspopup="true"
+    aria-label="Hidden breadcrumbs menu"
+    className="wrapper sizeXxs"
+    data-testid="breadcrumb-menu"
+    data-vibe="MenuButton"
+    id="breadcrumb-menu-button"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onContextMenu={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDown={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      fill="currentColor"
+      height="16"
+      role="img"
+      viewBox="0 0 20 20"
+      width="16"
+    >
+      <path
+        d="M6 10.5C6 11.3284 5.32843 12 4.5 12 3.67157 12 3 11.3284 3 10.5 3 9.67157 3.67157 9 4.5 9 5.32843 9 6 9.67157 6 10.5zM11.8333 10.5C11.8333 11.3284 11.1618 12 10.3333 12 9.50492 12 8.83334 11.3284 8.83334 10.5 8.83334 9.67157 9.50492 9 10.3333 9 11.1618 9 11.8333 9.67157 11.8333 10.5zM17.6667 10.5C17.6667 11.3284 16.9951 12 16.1667 12 15.3383 12 14.6667 11.3284 14.6667 10.5 14.6667 9.67157 15.3383 9 16.1667 9 16.9951 9 17.6667 9.67157 17.6667 10.5z"
+        fill="currentColor"
+      />
+    </svg>
+  </button>
+</li>
+`;
+
+exports[`BreadcrumbMenu > renders correctly with various MenuItem props 1`] = `
+<li
+  className="breadcrumbMenuWrapper"
+>
+  <button
+    aria-controls="breadcrumb-menu-button-menu"
+    aria-disabled={false}
+    aria-expanded={false}
+    aria-haspopup="true"
+    aria-label="Hidden breadcrumbs menu"
+    className="wrapper sizeXxs"
+    data-testid="breadcrumb-menu"
+    data-vibe="MenuButton"
+    id="breadcrumb-menu-button"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onContextMenu={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDown={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      fill="currentColor"
+      height="16"
+      role="img"
+      viewBox="0 0 20 20"
+      width="16"
+    >
+      <path
+        d="M6 10.5C6 11.3284 5.32843 12 4.5 12 3.67157 12 3 11.3284 3 10.5 3 9.67157 3.67157 9 4.5 9 5.32843 9 6 9.67157 6 10.5zM11.8333 10.5C11.8333 11.3284 11.1618 12 10.3333 12 9.50492 12 8.83334 11.3284 8.83334 10.5 8.83334 9.67157 9.50492 9 10.3333 9 11.1618 9 11.8333 9.67157 11.8333 10.5zM17.6667 10.5C17.6667 11.3284 16.9951 12 16.1667 12 15.3383 12 14.6667 11.3284 14.6667 10.5 14.6667 9.67157 15.3383 9 16.1667 9 16.9951 9 17.6667 9.67157 17.6667 10.5z"
+        fill="currentColor"
+      />
+    </svg>
+  </button>
+</li>
+`;
diff --git a/packages/core/src/components/BreadcrumbsBar/BreadcrumbsBar.tsx b/packages/core/src/components/BreadcrumbsBar/BreadcrumbsBar.tsx
index 4e76982a95..56e9010b0c 100644
--- a/packages/core/src/components/BreadcrumbsBar/BreadcrumbsBar.tsx
+++ b/packages/core/src/components/BreadcrumbsBar/BreadcrumbsBar.tsx
@@ -2,10 +2,9 @@ import React, { type ReactElement } from "react";
 import cx from "classnames";
 import { ComponentDefaultTestId, getTestId } from "../../tests/test-ids-utils";
 import { NavigationChevronRight } from "@vibe/icons";
-import { BreadcrumbsBarType as BreadcrumbsBarTypeEnum } from "./BreadcrumbsConstants";
 import { type BreadcrumbsBarType } from "./Breadcrumbs.types";
 import { type BreadcrumbItemProps } from "./BreadcrumbItem/BreadcrumbItem";
-import { type VibeComponentProps, withStaticPropsWithoutForwardRef } from "../../types";
+import { type VibeComponentProps } from "../../types";
 import styles from "./BreadcrumbsBar.module.scss";
 import { type BreadcrumbMenuProps } from "./BreadcrumbMenu/BreadcrumbMenu";
 import { ComponentVibeId } from "../../tests/constants";
@@ -54,10 +53,4 @@ const BreadcrumbsBar = ({
   </nav>
 );
 
-interface BreadcrumbsBarStaticProps {
-  types: typeof BreadcrumbsBarTypeEnum;
-}
-
-export default withStaticPropsWithoutForwardRef<BreadcrumbBarProps, BreadcrumbsBarStaticProps>(BreadcrumbsBar, {
-  types: BreadcrumbsBarTypeEnum
-});
+export default BreadcrumbsBar;
diff --git a/packages/core/src/components/BreadcrumbsBar/BreadcrumbsConstants.ts b/packages/core/src/components/BreadcrumbsBar/BreadcrumbsConstants.ts
deleted file mode 100644
index 52fa25791a..0000000000
--- a/packages/core/src/components/BreadcrumbsBar/BreadcrumbsConstants.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export enum BreadcrumbsBarType {
-  NAVIGATION = "navigation",
-  INDICATION = "indication"
-}
diff --git a/packages/core/src/components/BreadcrumbsBar/__tests__/BreadcrumbsBar.snapshot.test.jsx b/packages/core/src/components/BreadcrumbsBar/__tests__/BreadcrumbsBar.snapshot.test.tsx
similarity index 95%
rename from packages/core/src/components/BreadcrumbsBar/__tests__/BreadcrumbsBar.snapshot.test.jsx
rename to packages/core/src/components/BreadcrumbsBar/__tests__/BreadcrumbsBar.snapshot.test.tsx
index 6a42c8adf1..8dba17ceb0 100644
--- a/packages/core/src/components/BreadcrumbsBar/__tests__/BreadcrumbsBar.snapshot.test.jsx
+++ b/packages/core/src/components/BreadcrumbsBar/__tests__/BreadcrumbsBar.snapshot.test.tsx
@@ -13,7 +13,7 @@ describe("BreadcrumbsBar renders correctly", () => {
   });
 
   it("with bar type", () => {
-    Object.values(BreadcrumbsBar.types).forEach(type => {
+    Object.values(["default", "divider", "hidden"]).forEach(type => {
       const tree = renderer.create(<BreadcrumbsBar type={type} />).toJSON();
       expect(tree).toMatchSnapshot();
     });
diff --git a/packages/core/src/components/BreadcrumbsBar/__tests__/__snapshots__/BreadcrumbsBar.snapshot.test.jsx.snap b/packages/core/src/components/BreadcrumbsBar/__tests__/__snapshots__/BreadcrumbsBar.snapshot.test.jsx.snap
index bd2741b5f9..eaf7e53057 100644
--- a/packages/core/src/components/BreadcrumbsBar/__tests__/__snapshots__/BreadcrumbsBar.snapshot.test.jsx.snap
+++ b/packages/core/src/components/BreadcrumbsBar/__tests__/__snapshots__/BreadcrumbsBar.snapshot.test.jsx.snap
@@ -22,6 +22,17 @@ exports[`BreadcrumbsBar renders correctly > with bar type 2`] = `
 </nav>
 `;
 
+exports[`BreadcrumbsBar renders correctly > with bar type 3`] = `
+<nav
+  aria-label="Breadcrumb"
+  className="breadcrumbsBar"
+  data-testid="breadcrumbs-bar"
+  data-vibe="BreadcrumbsBar"
+>
+  <ol />
+</nav>
+`;
+
 exports[`BreadcrumbsBar renders correctly > with breadcrumb menu 1`] = `
 <nav
   aria-label="Breadcrumb"
diff --git a/packages/core/src/components/BreadcrumbsBar/__tests__/__snapshots__/BreadcrumbsBar.snapshot.test.tsx.snap b/packages/core/src/components/BreadcrumbsBar/__tests__/__snapshots__/BreadcrumbsBar.snapshot.test.tsx.snap
new file mode 100644
index 0000000000..eaf7e53057
--- /dev/null
+++ b/packages/core/src/components/BreadcrumbsBar/__tests__/__snapshots__/BreadcrumbsBar.snapshot.test.tsx.snap
@@ -0,0 +1,219 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BreadcrumbsBar renders correctly > with bar type 1`] = `
+<nav
+  aria-label="Breadcrumb"
+  className="breadcrumbsBar"
+  data-testid="breadcrumbs-bar"
+  data-vibe="BreadcrumbsBar"
+>
+  <ol />
+</nav>
+`;
+
+exports[`BreadcrumbsBar renders correctly > with bar type 2`] = `
+<nav
+  aria-label="Breadcrumb"
+  className="breadcrumbsBar"
+  data-testid="breadcrumbs-bar"
+  data-vibe="BreadcrumbsBar"
+>
+  <ol />
+</nav>
+`;
+
+exports[`BreadcrumbsBar renders correctly > with bar type 3`] = `
+<nav
+  aria-label="Breadcrumb"
+  className="breadcrumbsBar"
+  data-testid="breadcrumbs-bar"
+  data-vibe="BreadcrumbsBar"
+>
+  <ol />
+</nav>
+`;
+
+exports[`BreadcrumbsBar renders correctly > with breadcrumb menu 1`] = `
+<nav
+  aria-label="Breadcrumb"
+  className="breadcrumbsBar"
+  data-testid="breadcrumbs-bar"
+  data-vibe="BreadcrumbsBar"
+>
+  <ol>
+    <li
+      className="breadcrumbItemWrapper"
+      data-testid="breadcrumb-item"
+    >
+      <span
+        aria-disabled="true"
+        className="breadcrumbContent notClickable"
+        tabIndex={0}
+      >
+        <span
+          className="breadcrumbText"
+        >
+          Board
+        </span>
+      </span>
+    </li>
+    <svg
+      aria-hidden="true"
+      className="separatorIcon"
+      fill="currentColor"
+      height="14"
+      viewBox="0 0 20 20"
+      width="14"
+    >
+      <path
+        clipRule="evenodd"
+        d="M13.5303 9.46967L13 10L13.5303 10.5303C13.8232 10.2374 13.8232 9.76256 13.5303 9.46967ZM11.9393 10L5.46967 16.4697C5.17678 16.7626 5.17678 17.2374 5.46967 17.5303C5.76256 17.8232 6.23744 17.8232 6.53033 17.5303L13.5303 10.5303L13 10L13.5303 9.46967L6.53033 2.46967C6.23744 2.17678 5.76256 2.17678 5.46967 2.46967C5.17678 2.76256 5.17678 3.23744 5.46967 3.53033L11.9393 10Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+    <li
+      className="breadcrumbMenuWrapper"
+      isClickable={false}
+    >
+      <button
+        aria-controls="breadcrumb-menu-button-menu"
+        aria-disabled={false}
+        aria-expanded={false}
+        aria-haspopup="true"
+        aria-label="Hidden breadcrumbs menu"
+        className="wrapper sizeXxs"
+        data-testid="breadcrumb-menu"
+        data-vibe="MenuButton"
+        id="breadcrumb-menu-button"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onContextMenu={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        onMouseUp={[Function]}
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="16"
+          role="img"
+          viewBox="0 0 20 20"
+          width="16"
+        >
+          <path
+            d="M6 10.5C6 11.3284 5.32843 12 4.5 12 3.67157 12 3 11.3284 3 10.5 3 9.67157 3.67157 9 4.5 9 5.32843 9 6 9.67157 6 10.5zM11.8333 10.5C11.8333 11.3284 11.1618 12 10.3333 12 9.50492 12 8.83334 11.3284 8.83334 10.5 8.83334 9.67157 9.50492 9 10.3333 9 11.1618 9 11.8333 9.67157 11.8333 10.5zM17.6667 10.5C17.6667 11.3284 16.9951 12 16.1667 12 15.3383 12 14.6667 11.3284 14.6667 10.5 14.6667 9.67157 15.3383 9 16.1667 9 16.9951 9 17.6667 9.67157 17.6667 10.5z"
+            fill="currentColor"
+          />
+        </svg>
+      </button>
+    </li>
+    <svg
+      aria-hidden="true"
+      className="separatorIcon"
+      fill="currentColor"
+      height="14"
+      viewBox="0 0 20 20"
+      width="14"
+    >
+      <path
+        clipRule="evenodd"
+        d="M13.5303 9.46967L13 10L13.5303 10.5303C13.8232 10.2374 13.8232 9.76256 13.5303 9.46967ZM11.9393 10L5.46967 16.4697C5.17678 16.7626 5.17678 17.2374 5.46967 17.5303C5.76256 17.8232 6.23744 17.8232 6.53033 17.5303L13.5303 10.5303L13 10L13.5303 9.46967L6.53033 2.46967C6.23744 2.17678 5.76256 2.17678 5.46967 2.46967C5.17678 2.76256 5.17678 3.23744 5.46967 3.53033L11.9393 10Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+    <li
+      className="breadcrumbItemWrapper"
+      data-testid="breadcrumb-item"
+    >
+      <span
+        aria-current="page"
+        aria-disabled="true"
+        className="breadcrumbContent current notClickable"
+        tabIndex={0}
+      >
+        <span
+          className="breadcrumbText"
+        >
+          My Item
+        </span>
+      </span>
+    </li>
+  </ol>
+</nav>
+`;
+
+exports[`BreadcrumbsBar renders correctly > with children 1`] = `
+<nav
+  aria-label="Breadcrumb"
+  className="breadcrumbsBar"
+  data-testid="breadcrumbs-bar"
+  data-vibe="BreadcrumbsBar"
+>
+  <ol>
+    <li
+      className="breadcrumbItemWrapper"
+      data-testid="breadcrumb-item"
+    >
+      <span
+        aria-disabled="true"
+        className="breadcrumbContent notClickable"
+        tabIndex={0}
+      >
+        <span
+          className="breadcrumbText"
+        >
+          Workspace
+        </span>
+      </span>
+    </li>
+    <svg
+      aria-hidden="true"
+      className="separatorIcon"
+      fill="currentColor"
+      height="14"
+      viewBox="0 0 20 20"
+      width="14"
+    >
+      <path
+        clipRule="evenodd"
+        d="M13.5303 9.46967L13 10L13.5303 10.5303C13.8232 10.2374 13.8232 9.76256 13.5303 9.46967ZM11.9393 10L5.46967 16.4697C5.17678 16.7626 5.17678 17.2374 5.46967 17.5303C5.76256 17.8232 6.23744 17.8232 6.53033 17.5303L13.5303 10.5303L13 10L13.5303 9.46967L6.53033 2.46967C6.23744 2.17678 5.76256 2.17678 5.46967 2.46967C5.17678 2.76256 5.17678 3.23744 5.46967 3.53033L11.9393 10Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+    <li
+      className="breadcrumbItemWrapper"
+      data-testid="breadcrumb-item"
+    >
+      <span
+        aria-disabled="true"
+        className="breadcrumbContent notClickable"
+        tabIndex={0}
+      >
+        <span
+          className="breadcrumbText"
+        >
+          Board
+        </span>
+      </span>
+    </li>
+  </ol>
+</nav>
+`;
+
+exports[`BreadcrumbsBar renders correctly > with empty props 1`] = `
+<nav
+  aria-label="Breadcrumb"
+  className="breadcrumbsBar"
+  data-testid="breadcrumbs-bar"
+  data-vibe="BreadcrumbsBar"
+>
+  <ol />
+</nav>
+`;
diff --git a/packages/core/src/components/ButtonGroup/ButtonGroup.tsx b/packages/core/src/components/ButtonGroup/ButtonGroup.tsx
index 86ac554bed..d51b49d02d 100644
--- a/packages/core/src/components/ButtonGroup/ButtonGroup.tsx
+++ b/packages/core/src/components/ButtonGroup/ButtonGroup.tsx
@@ -5,11 +5,10 @@ import { getStyle } from "../../helpers/typesciptCssModulesHelper";
 import usePrevious from "../../hooks/usePrevious";
 import useMergeRef from "../../hooks/useMergeRef";
 import { type SubIcon } from "@vibe/icon";
-import { type ButtonType as ButtonTypeEnum, type ButtonValue } from "./ButtonGroupConstants";
+import { type ButtonValue } from "./ButtonGroupConstants";
 import { ButtonWrapper } from "./ButtonWrapper";
-import { type SIZES } from "../../constants";
-import { Button, type ButtonType, type ButtonSize } from "@vibe/button";
-import { type VibeComponentProps, withStaticProps } from "../../types";
+import { type ButtonType, type ButtonSize } from "@vibe/button";
+import { type VibeComponentProps } from "../../types";
 import { type MoveBy } from "../../types/MoveBy";
 import { getTestId } from "../../tests/test-ids-utils";
 import { ComponentDefaultTestId, ComponentVibeId } from "../../tests/constants";
@@ -19,7 +18,7 @@ import { type TooltipPositions } from "@vibe/tooltip";
 type ButtonGroupOption = {
   icon?: SubIcon;
   leftIcon?: SubIcon;
-  ariaLabel?: string;
+  "aria-label"?: string;
   subText?: string;
   value: ButtonValue;
   text: string;
@@ -162,7 +161,7 @@ const ButtonGroup = forwardRef(
             leftFlat={index !== 0}
             kind="tertiary"
             preventClickAnimation
-            ariaLabel={option.ariaLabel}
+            aria-label={option["aria-label"]}
             tooltipContent={option.tooltipContent}
             tooltipPosition={tooltipPosition}
             tooltipHideDelay={tooltipHideDelay}
@@ -234,12 +233,4 @@ const ButtonGroup = forwardRef(
   }
 );
 
-interface ButtonGroupStaticProps {
-  sizes: typeof SIZES;
-  kinds: typeof ButtonTypeEnum;
-}
-
-export default withStaticProps<ButtonGroupProps, ButtonGroupStaticProps>(ButtonGroup, {
-  sizes: Button.sizes,
-  kinds: Button.kinds
-});
+export default ButtonGroup;
diff --git a/packages/core/src/components/ButtonGroup/ButtonGroupConstants.ts b/packages/core/src/components/ButtonGroup/ButtonGroupConstants.ts
index bb662a9726..5d1f5fcff4 100644
--- a/packages/core/src/components/ButtonGroup/ButtonGroupConstants.ts
+++ b/packages/core/src/components/ButtonGroup/ButtonGroupConstants.ts
@@ -1,10 +1 @@
 export type ButtonValue = string | number;
-
-/**
- * @deprecated
- */
-export declare enum ButtonType {
-  PRIMARY = "primary",
-  SECONDARY = "secondary",
-  TERTIARY = "tertiary"
-}
diff --git a/packages/core/src/components/ButtonGroup/__tests__/ButtonGroup.snapshot.test.tsx b/packages/core/src/components/ButtonGroup/__tests__/ButtonGroup.snapshot.test.tsx
index f086dbce28..8c3a805022 100644
--- a/packages/core/src/components/ButtonGroup/__tests__/ButtonGroup.snapshot.test.tsx
+++ b/packages/core/src/components/ButtonGroup/__tests__/ButtonGroup.snapshot.test.tsx
@@ -27,12 +27,12 @@ describe("ButtonGroup renders correctly", () => {
   });
 
   it("with large size", () => {
-    const tree = renderer.create(<ButtonGroup size={ButtonGroup.sizes.LARGE} options={option} />).toJSON();
+    const tree = renderer.create(<ButtonGroup size="large" options={option} />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it("with TERTIARY kind", () => {
-    const tree = renderer.create(<ButtonGroup kind={ButtonGroup.kinds.TERTIARY} options={option} />).toJSON();
+    const tree = renderer.create(<ButtonGroup kind="tertiary" options={option} />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
diff --git a/packages/core/src/components/Checkbox/Checkbox.module.scss b/packages/core/src/components/Checkbox/Checkbox.module.scss
index 45b200977f..e9df81b515 100644
--- a/packages/core/src/components/Checkbox/Checkbox.module.scss
+++ b/packages/core/src/components/Checkbox/Checkbox.module.scss
@@ -1,4 +1,4 @@
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 @import "../../styles/typography";
 @import "../../styles/states";
 $checkbox-size: 16px;
@@ -45,8 +45,7 @@ $checkbox-size: 16px;
   position: absolute;
   height: $checkbox-size;
   z-index: 2;
-  left: 0;
-  right: 0;
+  inset-inline: 0;
   width: 100%;
 }
 
@@ -64,7 +63,7 @@ $checkbox-size: 16px;
   @include smoothing-text;
   cursor: pointer;
   user-select: none;
-  margin-inline-start: var(--spacing-small);
+  margin-inline-start: var(--space-8);
 }
 
 /* Since it is not possible to change the design of the checkbox according to the requirements using css, */
@@ -138,7 +137,7 @@ $checkbox-size: 16px;
   transform: scaleX(0);
   transition: transform var(--motion-productive-long);
   transform-origin: right;
-  left: 0;
+  inset-inline-start: 0;
 }
 
 .input:checked + .checkbox > .icon,
diff --git a/packages/core/src/components/Checkbox/Checkbox.tsx b/packages/core/src/components/Checkbox/Checkbox.tsx
index df6fbe67cc..4ab014382f 100644
--- a/packages/core/src/components/Checkbox/Checkbox.tsx
+++ b/packages/core/src/components/Checkbox/Checkbox.tsx
@@ -23,7 +23,7 @@ export interface CheckBoxProps extends VibeComponentProps {
   /**
    * The label of the checkbox for accessibility.
    */
-  ariaLabel?: string;
+  "aria-label"?: string;
   /**
    * The content displayed next to the checkbox.
    */
@@ -31,7 +31,7 @@ export interface CheckBoxProps extends VibeComponentProps {
   /**
    * The ID of an element describing the checkbox.
    */
-  ariaLabelledBy?: string;
+  "aria-labelledby"?: string;
   /**
    * Callback fired when the checkbox value changes.
    */
@@ -81,9 +81,9 @@ const Checkbox = forwardRef(
       className,
       checkboxClassName,
       labelClassName,
-      ariaLabel,
+      "aria-label": ariaLabel,
       label,
-      ariaLabelledBy,
+      "aria-labelledby": ariaLabelledBy,
       onChange = NOOP,
       checked,
       autoFocus,
@@ -180,11 +180,11 @@ const Checkbox = forwardRef(
           >
             <Icon
               className={styles.icon}
-              iconType="svg"
+              type="svg"
               icon={indeterminate ? Remove : Check}
               ignoreFocusStyle
-              ariaHidden={true}
-              iconSize="16"
+              aria-hidden={true}
+              size="16"
             />
           </label>
           {label === false ? null : (
@@ -239,11 +239,11 @@ const Checkbox = forwardRef(
         >
           <Icon
             className={styles.icon}
-            iconType="svg"
+            type="svg"
             icon={indeterminate ? Remove : Check}
             ignoreFocusStyle
-            ariaHidden={true}
-            iconSize="16"
+            aria-hidden={true}
+            size="16"
           />
         </div>
         {label === false ? null : (
diff --git a/packages/core/src/components/Checkbox/__tests__/Checkbox.snapshot.test.tsx b/packages/core/src/components/Checkbox/__tests__/Checkbox.snapshot.test.tsx
index 3f3a7151f5..25a55e185a 100644
--- a/packages/core/src/components/Checkbox/__tests__/Checkbox.snapshot.test.tsx
+++ b/packages/core/src/components/Checkbox/__tests__/Checkbox.snapshot.test.tsx
@@ -51,8 +51,8 @@ describe("Checkbox renders correctly", () => {
     expect(tree).toMatchSnapshot();
   });
 
-  it("with ariaLabelledBy", () => {
-    const tree = renderer.create(<Checkbox ariaLabelledBy="aria" />).toJSON();
+  it("with aria-labelledby", () => {
+    const tree = renderer.create(<Checkbox aria-labelledby="aria" />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
diff --git a/packages/core/src/components/Checkbox/__tests__/__snapshots__/Checkbox.snapshot.test.tsx.snap b/packages/core/src/components/Checkbox/__tests__/__snapshots__/Checkbox.snapshot.test.tsx.snap
index 32bb24b283..1638518bec 100644
--- a/packages/core/src/components/Checkbox/__tests__/__snapshots__/Checkbox.snapshot.test.tsx.snap
+++ b/packages/core/src/components/Checkbox/__tests__/__snapshots__/Checkbox.snapshot.test.tsx.snap
@@ -250,7 +250,7 @@ exports[`Checkbox renders correctly > when interminate 1`] = `
 </label>
 `;
 
-exports[`Checkbox renders correctly > with ariaLabelledBy 1`] = `
+exports[`Checkbox renders correctly > with aria-labelledby 1`] = `
 <label
   className="wrapper"
   data-testid="checkbox"
diff --git a/packages/core/src/components/Checkbox/hooks/useSupportFirefoxLabelClick.jsx b/packages/core/src/components/Checkbox/hooks/useSupportFirefoxLabelClick.tsx
similarity index 91%
rename from packages/core/src/components/Checkbox/hooks/useSupportFirefoxLabelClick.jsx
rename to packages/core/src/components/Checkbox/hooks/useSupportFirefoxLabelClick.tsx
index 0429de3a6e..1ca898ef82 100644
--- a/packages/core/src/components/Checkbox/hooks/useSupportFirefoxLabelClick.jsx
+++ b/packages/core/src/components/Checkbox/hooks/useSupportFirefoxLabelClick.tsx
@@ -1,7 +1,8 @@
+import type React from "react";
 import { useCallback, useRef } from "react";
 import { isFirefox } from "../../../utils/user-agent-utils";
 
-export function useSupportFirefoxLabelClick({ inputRef }) {
+export function useSupportFirefoxLabelClick({ inputRef }: { inputRef: React.RefObject<HTMLInputElement> }) {
   // The purpose of this variable is to make sure that the captured event is a checkbox's label click event and not a manual event
   // that we actually created in this hook.
   // We handle the custom event create state as ref because this variable should not be depend on the component renders
@@ -10,7 +11,7 @@ export function useSupportFirefoxLabelClick({ inputRef }) {
 
   // fix for known bug firefox bug: firefox does not support checking or unchecking checkbox by its label when shift pressed
   const onClickCapture = useCallback(
-    e => {
+    (e: React.MouseEvent) => {
       // We would like to dispatch a manual event to click on the input only for cases where there is a bug in supporting this capability -
       // firefox browsers when the shift key is pressed.
       // In addition we make sure here that the captured event is not a manually generated event created by this code because we want to prevent
diff --git a/packages/core/src/components/Chips/Chips.module.scss b/packages/core/src/components/Chips/Chips.module.scss
index 576dfa79e1..621f0d6624 100644
--- a/packages/core/src/components/Chips/Chips.module.scss
+++ b/packages/core/src/components/Chips/Chips.module.scss
@@ -1,7 +1,7 @@
 @import "../../styles/typography";
 @import "../../styles/states";
 @import "../../styles/keyframes";
-@import "~monday-ui-style/dist/mixins/states";
+@import "~@vibe/style/dist/mixins/states";
 
 .chips {
   display: inline-flex;
@@ -11,7 +11,7 @@
   padding: 0 8px;
   align-items: center;
   justify-content: center;
-  margin: var(--chips-margin, #{0 var(--spacing-xs)});
+  margin: var(--chips-margin, #{0 var(--space-4)});
   user-select: none;
   @include smoothing-text;
   color: var(--primary-text-color);
@@ -40,13 +40,13 @@
   .customRenderer {
     min-width: 18px;
     &.left {
-      margin-right: var(--spacing-xs);
+      margin-inline-end: var(--space-4);
     }
     &.right {
-      margin-left: var(--spacing-xs);
+      margin-inline-start: var(--space-4);
     }
     &.close {
-      margin-left: var(--spacing-xs);
+      margin-inline-start: var(--space-4);
       color: var(--primary-text-color);
     }
   }
diff --git a/packages/core/src/components/Chips/Chips.tsx b/packages/core/src/components/Chips/Chips.tsx
index fb6ebcd497..e4dacf88a5 100644
--- a/packages/core/src/components/Chips/Chips.tsx
+++ b/packages/core/src/components/Chips/Chips.tsx
@@ -4,15 +4,13 @@ import { Icon } from "@vibe/icon";
 import useMergeRef from "../../hooks/useMergeRef";
 import { CloseSmall } from "@vibe/icons";
 import { getCSSVar } from "../../services/themes";
-import { ElementAllowedColor as ElementAllowedColorEnum } from "../../utils/colors-vars-map";
 import { type ElementAllowedColor, getElementColor } from "../../types/Colors";
 import Avatar from "../Avatar/Avatar";
 import { IconButton } from "@vibe/icon-button";
 import { Text } from "@vibe/typography";
 import { ComponentDefaultTestId, getTestId } from "../../tests/test-ids-utils";
-import { AvatarType as AvatarTypeEnum } from "../Avatar/AvatarConstants";
 import { type AvatarType } from "../Avatar";
-import { type ElementContent, type VibeComponentProps, withStaticProps } from "../../types";
+import { type ElementContent, type VibeComponentProps } from "../../types";
 import { type SubIcon } from "@vibe/icon";
 import useSetFocus from "../../hooks/useSetFocus";
 import { useClickableProps } from "@vibe/clickable";
@@ -105,15 +103,11 @@ export interface ChipsProps extends VibeComponentProps {
   /**
    * The label of the chip for accessibility.
    */
-  ariaLabel?: string;
+  "aria-label"?: string;
   /**
    * If true, indicates that the chip has a popup.
    */
-  ariaHasPopup?: boolean;
-  /**
-   * If true, disables all click behaviors.
-   */
-  disableClickableBehavior?: boolean;
+  "aria-haspopup"?: boolean;
   /**
    * If true, displays a border around the chip.
    */
@@ -149,10 +143,9 @@ const Chips = forwardRef(
       onMouseDown,
       onClick,
       noAnimation = true,
-      ariaLabel,
-      ariaHasPopup = false,
+      "aria-label": ariaLabel,
+      "aria-haspopup": ariaHasPopup = false,
       "data-testid": dataTestId,
-      disableClickableBehavior = false,
       leftAvatarType = "img",
       rightAvatarType = "img",
       showBorder = false,
@@ -164,7 +157,7 @@ const Chips = forwardRef(
     ref: React.ForwardedRef<HTMLDivElement>
   ) => {
     const componentDataTestId = dataTestId || getTestId(ComponentDefaultTestId.CHIP, id);
-    const hasClickableWrapper = (!!onClick || !!onMouseDown) && !disableClickableBehavior;
+    const hasClickableWrapper = !!onClick || !!onMouseDown;
     const hasCloseButton = !readOnly && !disabled;
     const overrideAriaLabel = ariaLabel || (typeof label === "string" && label) || "";
 
@@ -229,10 +222,10 @@ const Chips = forwardRef(
         disabled,
         id,
         "data-testid": componentDataTestId,
-        ariaLabel: overrideAriaLabel,
-        ariaHidden: false,
-        ariaHasPopup,
-        ariaExpanded: false
+        "aria-label": overrideAriaLabel,
+        "aria-hidden": false,
+        "aria-haspopup": ariaHasPopup,
+        "aria-expanded": false
       },
       mergedRef
     );
@@ -276,9 +269,9 @@ const Chips = forwardRef(
         {leftIcon ? (
           <Icon
             className={cx(styles.icon, styles.left, iconClassName)}
-            iconType="font"
+            type="font"
             icon={leftIcon}
-            iconSize={iconSize}
+            size={iconSize}
             ignoreFocusStyle
           />
         ) : null}
@@ -289,9 +282,9 @@ const Chips = forwardRef(
         {rightIcon ? (
           <Icon
             className={cx(styles.icon, styles.right, iconClassName)}
-            iconType="font"
+            type="font"
             icon={rightIcon}
-            iconSize={iconSize}
+            size={iconSize}
             ignoreFocusStyle
           />
         ) : null}
@@ -311,7 +304,7 @@ const Chips = forwardRef(
             size="xxs"
             color="on-primary-color"
             className={cx(styles.icon, styles.close)}
-            ariaLabel={closeButtonAriaLabel}
+            aria-label={closeButtonAriaLabel}
             hideTooltip
             icon={CloseSmall}
             onClick={onDeleteCallback}
@@ -324,12 +317,4 @@ const Chips = forwardRef(
   }
 );
 
-interface ChipsStaticProps {
-  colors: typeof ElementAllowedColorEnum;
-  avatarTypes: typeof AvatarTypeEnum;
-}
-
-export default withStaticProps<ChipsProps, ChipsStaticProps>(Chips, {
-  colors: ElementAllowedColorEnum,
-  avatarTypes: AvatarTypeEnum
-});
+export default Chips;
diff --git a/packages/core/src/components/Chips/__tests__/Chips.snapshot.test.tsx b/packages/core/src/components/Chips/__tests__/Chips.snapshot.test.tsx
index 996021bc21..3ac2d7727f 100644
--- a/packages/core/src/components/Chips/__tests__/Chips.snapshot.test.tsx
+++ b/packages/core/src/components/Chips/__tests__/Chips.snapshot.test.tsx
@@ -65,7 +65,7 @@ describe("Chips renders correctly", () => {
       .create(
         <Chips
           readOnly
-          ariaLabel={"This is mandatory"}
+          aria-label={"This is mandatory"}
           label={
             <>
               This is mandatory <span>*</span>
diff --git a/packages/core/src/components/Chips/__tests__/Chips.test.tsx b/packages/core/src/components/Chips/__tests__/Chips.test.tsx
index 09f2ef24f1..772990bf51 100644
--- a/packages/core/src/components/Chips/__tests__/Chips.test.tsx
+++ b/packages/core/src/components/Chips/__tests__/Chips.test.tsx
@@ -29,18 +29,6 @@ describe("Chips tests", () => {
     fireEvent.mouseDown(screen.getByTestId(defaultTestId));
     expect(onMouseDown.mock.calls.length).toBe(1);
   });
-  it("Should call onClick callback when chips clicked with disableClickableBehavior", () => {
-    const onClick = vi.fn();
-    render(<Chips className={className} onClick={onClick} label={label} disableClickableBehavior />);
-    fireEvent.click(screen.getByTestId(defaultTestId));
-    expect(onClick.mock.calls.length).toBe(1);
-  });
-  it("Should call the onMousedown callback when mouse down with disableClickableBehavior", () => {
-    const onMouseDown = vi.fn();
-    render(<Chips className={className} onMouseDown={onMouseDown} label={label} disableClickableBehavior />);
-    fireEvent.mouseDown(screen.getByTestId(defaultTestId));
-    expect(onMouseDown.mock.calls.length).toBe(1);
-  });
   it("Should not call onClick callback when chips clicked with disabled state", () => {
     const onClick = vi.fn();
     render(<Chips className={className} onClick={onClick} label={label} disabled />);
diff --git a/packages/core/src/components/ColorPicker/ColorPicker.tsx b/packages/core/src/components/ColorPicker/ColorPicker.tsx
index b89a281df6..a6e954a55d 100644
--- a/packages/core/src/components/ColorPicker/ColorPicker.tsx
+++ b/packages/core/src/components/ColorPicker/ColorPicker.tsx
@@ -1,12 +1,11 @@
 import cx from "classnames";
 import React, { forwardRef, useCallback, useRef } from "react";
-import { BaseSizes } from "../../constants";
+import { type BaseSizes } from "../../constants";
 import useMergeRef from "../../hooks/useMergeRef";
 import { DialogContentContainer } from "@vibe/dialog";
-import { ColorStyle as ColorStyleEnum } from "../../utils/colors-vars-map";
 import { NoColor } from "@vibe/icons";
 import ColorPickerContent from "./components/ColorPickerContent/ColorPickerContent";
-import { ColorShapes as ColorShapesEnum, DEFAULT_NUMBER_OF_COLORS_IN_LINE } from "./ColorPickerConstants";
+import { DEFAULT_NUMBER_OF_COLORS_IN_LINE } from "./ColorPickerConstants";
 import {
   type ColorShapes,
   type ColorPickerSizes,
@@ -14,7 +13,7 @@ import {
   type ColorPickerArrayValueOnly
 } from "./ColorPicker.types";
 import { calculateColorPickerDialogWidth } from "./services/ColorPickerStyleService";
-import { type VibeComponentProps, withStaticProps } from "../../types";
+import { type VibeComponentProps } from "../../types";
 import { type SubIcon } from "@vibe/icon";
 import { NOOP } from "../../utils/function-utils";
 import { ComponentDefaultTestId, getTestId } from "../../tests/test-ids-utils";
@@ -133,8 +132,8 @@ const ColorPicker = forwardRef(
       <DialogContentContainer
         ref={mergedRef}
         className={cx(styles.colorPicker, styles.colorPickerDialogContent, className)}
-        ariaLabelledby="Color Picker Dialog"
-        ariaDescribedby="Pick color"
+        aria-labelledby="Color Picker Dialog"
+        aria-describedby="Pick color"
         style={{ width }}
         data-vibe={ComponentVibeId.COLOR_PICKER}
       >
@@ -164,16 +163,4 @@ const ColorPicker = forwardRef(
   }
 );
 
-interface ColorPickerStaticProps {
-  sizes: typeof BaseSizes;
-  colorStyles: typeof ColorStyleEnum;
-  colorSizes: typeof BaseSizes;
-  colorShapes: typeof ColorShapesEnum;
-}
-
-export default withStaticProps<ColorPickerProps, ColorPickerStaticProps>(ColorPicker, {
-  sizes: BaseSizes,
-  colorStyles: ColorStyleEnum,
-  colorSizes: BaseSizes,
-  colorShapes: ColorShapesEnum
-});
+export default ColorPicker;
diff --git a/packages/core/src/components/ColorPicker/ColorPickerConstants.ts b/packages/core/src/components/ColorPicker/ColorPickerConstants.ts
index f55ad0b8f4..7c2fe0f5be 100644
--- a/packages/core/src/components/ColorPicker/ColorPickerConstants.ts
+++ b/packages/core/src/components/ColorPicker/ColorPickerConstants.ts
@@ -10,11 +10,3 @@ export const COLOR_SIZES: Record<BaseSizes, number> = {
 
 export const COLOR_PADDING = 8;
 export const DIALOG_WIDTH_PADDING = 24;
-
-/**
- * @deprecated
- */
-export enum ColorShapes {
-  SQUARE = "square",
-  CIRCLE = "circle"
-}
diff --git a/packages/core/src/components/ColorPicker/components/ColorPickerContent/ColorPickerClearButton.module.scss b/packages/core/src/components/ColorPicker/components/ColorPickerContent/ColorPickerClearButton.module.scss
index 2dd4fed792..971320d5cb 100644
--- a/packages/core/src/components/ColorPicker/components/ColorPickerContent/ColorPickerClearButton.module.scss
+++ b/packages/core/src/components/ColorPicker/components/ColorPickerContent/ColorPickerClearButton.module.scss
@@ -1,7 +1,7 @@
 .clearColorIcon {
-  margin-right: var(--spacing-small);
+  margin-inline-end: var(--space-8);
 }
 
 .clearColorButton {
-  margin-top: var(--spacing-small);
+  margin-top: var(--space-8);
 }
diff --git a/packages/core/src/components/ColorPicker/components/ColorPickerContent/ColorPickerClearButton.tsx b/packages/core/src/components/ColorPicker/components/ColorPickerContent/ColorPickerClearButton.tsx
index 84c2114c1b..a057597c33 100644
--- a/packages/core/src/components/ColorPicker/components/ColorPickerContent/ColorPickerClearButton.tsx
+++ b/packages/core/src/components/ColorPicker/components/ColorPickerContent/ColorPickerClearButton.tsx
@@ -22,7 +22,7 @@ export interface ColorPickerClearButtonProps extends VibeComponentProps {
 }
 
 const ColorPickerClearButton = forwardRef(
-  ({ onClick, text, Icon }: ColorPickerClearButtonProps, ref: React.ForwardedRef<HTMLElement>) => {
+  ({ onClick, text, Icon }: ColorPickerClearButtonProps, ref: React.ForwardedRef<HTMLButtonElement>) => {
     const { onSelectionAction } = useGridKeyboardNavigation({
       ref: ref as React.MutableRefObject<HTMLElement>,
       itemsCount: 1,
diff --git a/packages/core/src/components/ColorPicker/components/ColorPickerContent/ColorPickerContent.tsx b/packages/core/src/components/ColorPicker/components/ColorPickerContent/ColorPickerContent.tsx
index 17da4be1e1..fd41d1bfbc 100644
--- a/packages/core/src/components/ColorPicker/components/ColorPickerContent/ColorPickerContent.tsx
+++ b/packages/core/src/components/ColorPicker/components/ColorPickerContent/ColorPickerContent.tsx
@@ -1,13 +1,9 @@
 import { difference as _difference, intersection as _intersection } from "es-toolkit";
 import React, { forwardRef, useCallback, useMemo, useRef } from "react";
 import { BaseSizes } from "../../../../constants";
-import {
-  ColorStyle as ColorStyleEnum,
-  type CONTENT_COLORS_VALUES,
-  contentColors
-} from "../../../../utils/colors-vars-map";
+import { type CONTENT_COLORS_VALUES, contentColors } from "../../../../utils/colors-vars-map";
 import { NoColor } from "@vibe/icons";
-import { ColorShapes as ColorShapesEnum, DEFAULT_NUMBER_OF_COLORS_IN_LINE } from "../../ColorPickerConstants";
+import { DEFAULT_NUMBER_OF_COLORS_IN_LINE } from "../../ColorPickerConstants";
 import {
   type ColorShapes,
   type ColorPickerSizes,
@@ -21,7 +17,7 @@ import {
 } from "../../../GridKeyboardNavigationContext";
 import ColorPickerClearButton from "./ColorPickerClearButton";
 import ColorPickerColorsGrid from "./ColorPickerColorsGrid";
-import { type VibeComponentProps, withStaticProps } from "../../../../types";
+import { type VibeComponentProps } from "../../../../types";
 import { type SubIcon } from "@vibe/icon";
 import useMergeRef from "../../../../hooks/useMergeRef";
 import { type ColorStyle } from "../../../../types";
@@ -200,16 +196,4 @@ const ColorPickerContent = forwardRef(
   }
 );
 
-interface ColorPickerContentStaticProps {
-  sizes: typeof BaseSizes;
-  colorStyles: typeof ColorStyleEnum;
-  colorSizes: typeof BaseSizes;
-  colorShapes: typeof ColorShapesEnum;
-}
-
-export default withStaticProps<ColorPickerContentProps, ColorPickerContentStaticProps>(ColorPickerContent, {
-  sizes: BaseSizes,
-  colorStyles: ColorStyleEnum,
-  colorSizes: BaseSizes,
-  colorShapes: ColorShapesEnum
-});
+export default ColorPickerContent;
diff --git a/packages/core/src/components/ColorPicker/components/ColorPickerItemComponent/ColorPickerItemComponent.tsx b/packages/core/src/components/ColorPicker/components/ColorPickerItemComponent/ColorPickerItemComponent.tsx
index f3601b5d71..8d3ca47e44 100644
--- a/packages/core/src/components/ColorPicker/components/ColorPickerItemComponent/ColorPickerItemComponent.tsx
+++ b/packages/core/src/components/ColorPicker/components/ColorPickerItemComponent/ColorPickerItemComponent.tsx
@@ -123,13 +123,13 @@ const ColorPickerItemComponent = forwardRef(
           <div className={cx(styles.feedbackIndicator)} />
           <Clickable
             ref={itemRef}
-            ariaLabel={color}
+            aria-label={color}
             className={cx(styles.colorItem, getStyle(styles, camelCase("color-item-size-" + colorSize)), {
               [styles.colorItemTextMode]: shouldRenderIndicatorWithoutBackground
             })}
             style={{ background: shouldRenderIndicatorWithoutBackground ? "transparent" : colorAsStyle }}
             onClick={onClick}
-            tabIndex="-1"
+            tabIndex={-1}
             onMouseDown={e => e.preventDefault()} // this is for quill to not lose the selection
           >
             <div className={cx(styles.colorIndicatorWrapper)} style={colorIndicatorWrapperStyle}>
diff --git a/packages/core/src/components/Combobox/Combobox.module.scss b/packages/core/src/components/Combobox/Combobox.module.scss
index 63d0cf36f0..d786edb106 100644
--- a/packages/core/src/components/Combobox/Combobox.module.scss
+++ b/packages/core/src/components/Combobox/Combobox.module.scss
@@ -7,7 +7,7 @@
   display: flex;
   flex-direction: column;
   position: relative;
-  margin-bottom: var(--spacing-small);
+  margin-bottom: var(--space-8);
 }
 
 .combobox.stickyCategory .comboboxCategory {
@@ -41,7 +41,7 @@
 }
 
 .comboboxNoResults {
-  margin-top: var(--spacing-small);
+  margin-top: var(--space-8);
   flex: 1 1 auto;
   height: calc(100% - 20px);
   overflow: hidden;
diff --git a/packages/core/src/components/Combobox/Combobox.tsx b/packages/core/src/components/Combobox/Combobox.tsx
index c2cbdc0f60..55bdb94faa 100644
--- a/packages/core/src/components/Combobox/Combobox.tsx
+++ b/packages/core/src/components/Combobox/Combobox.tsx
@@ -6,17 +6,15 @@ import { getStyle } from "../../helpers/typesciptCssModulesHelper";
 import { ComponentDefaultTestId, getTestId } from "../../tests/test-ids-utils";
 import useMergeRef from "../../hooks/useMergeRef";
 import Search from "../Search/Search";
-import { BASE_SIZES } from "../../constants";
 import { Button } from "@vibe/button";
 import { Text } from "@vibe/typography";
 import { useWarnDeprecated } from "../../utils/warn-deprecated";
-import ComboboxOption from "./components/ComboboxOption/ComboboxOption";
 import { defaultFilter } from "./ComboboxService";
 import { ComboboxItems } from "./components/ComboboxItems/ComboboxItems";
 import { StickyCategoryHeader } from "./components/StickyCategoryHeader/StickyCategoryHeader";
 import { useItemsData, useKeyboardNavigation } from "./ComboboxHelpers/ComboboxHelpers";
 import { getOptionId } from "./helpers";
-import { type ElementContent, type VibeComponentProps, withStaticProps } from "../../types";
+import { type ElementContent, type VibeComponentProps } from "../../types";
 import {
   type IComboboxCategoryMap,
   type IComboboxItem,
@@ -236,7 +234,7 @@ const Combobox = forwardRef(
     useWarnDeprecated({
       component: "Combobox",
       message:
-        "This component is deprecated and will be removed in the next major version. Please use Dropdown box mode from @vibe/core/next instead."
+        "This component is deprecated and will be removed in the next major version. Please use Dropdown box mode from @vibe/core instead."
     });
 
     const componentRef = useRef(null);
@@ -393,8 +391,8 @@ const Combobox = forwardRef(
             autoFocus={autoFocus}
             loading={loading}
             searchIconName={searchIcon}
-            ariaExpanded={hasFilter || hasResults}
-            ariaHasPopup="listbox"
+            aria-expanded={hasFilter || hasResults}
+            aria-haspopup="listbox"
             searchResultsContainerId={id ? `${id}-listbox` : COMBOBOX_LISTBOX_ID}
             debounceRate={debounceRate}
             renderAction={RenderAction}
@@ -439,12 +437,4 @@ const Combobox = forwardRef(
 // color it with --secondary-text-color
 // size it like the icon - we think it's 16px - make sure it's not fat
 
-interface ComboboxStaticProps {
-  sizes: typeof BASE_SIZES;
-  iconTypes: typeof ComboboxOption.iconTypes;
-}
-
-export default withStaticProps<ComboboxProps, ComboboxStaticProps>(Combobox, {
-  sizes: BASE_SIZES,
-  iconTypes: ComboboxOption.iconTypes
-});
+export default Combobox;
diff --git a/packages/core/src/components/Combobox/ComboboxHelpers/ComboboxHelpers.module.scss b/packages/core/src/components/Combobox/ComboboxHelpers/ComboboxHelpers.module.scss
index 4c2a0c5c15..87939b15af 100644
--- a/packages/core/src/components/Combobox/ComboboxHelpers/ComboboxHelpers.module.scss
+++ b/packages/core/src/components/Combobox/ComboboxHelpers/ComboboxHelpers.module.scss
@@ -15,7 +15,7 @@
 
   // 16 px are the margin of the dialog and the scroll size
   width: calc(100% + 16px);
-  margin-left: -12px;
+  margin-inline-start: -12px;
 }
 
 .sticky {
diff --git a/packages/core/src/components/Combobox/ComboboxHelpers/ComboboxHelpers.tsx b/packages/core/src/components/Combobox/ComboboxHelpers/ComboboxHelpers.tsx
index 9cd6d44713..00b54837de 100644
--- a/packages/core/src/components/Combobox/ComboboxHelpers/ComboboxHelpers.tsx
+++ b/packages/core/src/components/Combobox/ComboboxHelpers/ComboboxHelpers.tsx
@@ -115,11 +115,7 @@ export function useKeyboardNavigation({
     [getOptionId, options]
   );
 
-  const {
-    visualFocusItemIndex,
-    visualFocusItemId,
-    onItemClickCallback: onOptionClick
-  } = useActiveDescendantListFocus({
+  const { visualFocusItemIndex, visualFocusItemId } = useActiveDescendantListFocus({
     defaultVisualFocusFirstIndex,
     focusedElementRef: inputRef,
     focusedElementRole: useActiveDescendantListFocus.roles.COMBOBOX,
@@ -129,7 +125,7 @@ export function useKeyboardNavigation({
     isIgnoreSpaceAsItemSelection: true
   });
 
-  return { visualFocusItemIndex, visualFocusItemId, onOptionClick };
+  return { visualFocusItemIndex, visualFocusItemId, onOptionClick: onClick };
 }
 export function createDividerItemObject({ categoryId }: { categoryId: string }): IComboboxItem {
   return { type: COMBOBOX_DIVIDER_ITEM, height: DIVIDER_HEIGHT, id: `${categoryId}-divider` };
diff --git a/packages/core/src/components/Combobox/__tests__/Combobox.test.jsx b/packages/core/src/components/Combobox/__tests__/Combobox.test.tsx
similarity index 100%
rename from packages/core/src/components/Combobox/__tests__/Combobox.test.jsx
rename to packages/core/src/components/Combobox/__tests__/Combobox.test.tsx
diff --git a/packages/core/src/components/Combobox/__tests__/ComboboxService.test.js b/packages/core/src/components/Combobox/__tests__/ComboboxService.test.ts
similarity index 100%
rename from packages/core/src/components/Combobox/__tests__/ComboboxService.test.js
rename to packages/core/src/components/Combobox/__tests__/ComboboxService.test.ts
diff --git a/packages/core/src/components/Combobox/components/ComboboxCategory/ComboboxCategory.module.scss b/packages/core/src/components/Combobox/components/ComboboxCategory/ComboboxCategory.module.scss
index e0b1f13cd5..5d19c18595 100644
--- a/packages/core/src/components/Combobox/components/ComboboxCategory/ComboboxCategory.module.scss
+++ b/packages/core/src/components/Combobox/components/ComboboxCategory/ComboboxCategory.module.scss
@@ -5,5 +5,5 @@
   color: var(--placeholder-color);
   display: flex;
   align-items: center;
-  padding-top: var(--spacing-small);
+  padding-top: var(--space-8);
 }
diff --git a/packages/core/src/components/Combobox/components/ComboboxCategory/ComboboxCategory.tsx b/packages/core/src/components/Combobox/components/ComboboxCategory/ComboboxCategory.tsx
index 3d0fb3f37b..048af3d149 100644
--- a/packages/core/src/components/Combobox/components/ComboboxCategory/ComboboxCategory.tsx
+++ b/packages/core/src/components/Combobox/components/ComboboxCategory/ComboboxCategory.tsx
@@ -16,7 +16,7 @@ export interface ComboboxCategoryProps {
 }
 
 const ComboboxCategory: FC<ComboboxCategoryProps> = ({ category, className }) => {
-  const { label, id, ariaLabel, color } = category;
+  const { label, id, "aria-label": ariaLabel, color } = category;
 
   if (!label) return null;
 
diff --git a/packages/core/src/components/Combobox/components/ComboboxConstants.ts b/packages/core/src/components/Combobox/components/ComboboxConstants.ts
index 72eb042136..718755bab7 100644
--- a/packages/core/src/components/Combobox/components/ComboboxConstants.ts
+++ b/packages/core/src/components/Combobox/components/ComboboxConstants.ts
@@ -34,7 +34,7 @@ export interface IComboboxCategory {
   /**
    * The ARIA label for accessibility.
    */
-  ariaLabel?: string;
+  "aria-label"?: string;
   /**
    * If true, the category is only shown when searching.
    */
@@ -89,7 +89,7 @@ export interface IComboboxOption {
   /**
    * The ARIA label for accessibility.
    */
-  ariaLabel?: string;
+  "aria-label"?: string;
   /**
    * If true, the option belongs to a category.
    */
diff --git a/packages/core/src/components/Combobox/components/ComboboxItems/ComboboxItems.module.scss b/packages/core/src/components/Combobox/components/ComboboxItems/ComboboxItems.module.scss
index bc036db963..2b5899ff12 100644
--- a/packages/core/src/components/Combobox/components/ComboboxItems/ComboboxItems.module.scss
+++ b/packages/core/src/components/Combobox/components/ComboboxItems/ComboboxItems.module.scss
@@ -1,4 +1,4 @@
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 
 .scrollableContainer {
   @include scroller;
@@ -7,7 +7,7 @@
 .optionsContainer {
   overflow-x: visible;
   overflow-y: auto;
-  margin-top: var(--spacing-small);
+  margin-top: var(--space-8);
 }
 
 .categoryWithOptions,
@@ -18,7 +18,7 @@
 }
 
 .categoryWithOptions {
-  margin-bottom: var(--spacing-xs);
+  margin-bottom: var(--space-4);
 }
 
 .categoryWithoutOptions {
diff --git a/packages/core/src/components/Combobox/components/ComboboxOption/ComboboxOption.module.scss b/packages/core/src/components/Combobox/components/ComboboxOption/ComboboxOption.module.scss
index 6723cf5702..5f5524f0c7 100644
--- a/packages/core/src/components/Combobox/components/ComboboxOption/ComboboxOption.module.scss
+++ b/packages/core/src/components/Combobox/components/ComboboxOption/ComboboxOption.module.scss
@@ -1,4 +1,4 @@
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 @import "../../../../styles/states";
 $icon-margin: 4px;
 
@@ -44,5 +44,5 @@ $icon-margin: 4px;
 }
 
 .comboboxOption .optionIcon.left {
-  margin-right: $icon-margin;
+  margin-inline-end: $icon-margin;
 }
diff --git a/packages/core/src/components/Combobox/components/ComboboxOption/ComboboxOption.tsx b/packages/core/src/components/Combobox/components/ComboboxOption/ComboboxOption.tsx
index 0d15e7ff0e..edbae6a515 100644
--- a/packages/core/src/components/Combobox/components/ComboboxOption/ComboboxOption.tsx
+++ b/packages/core/src/components/Combobox/components/ComboboxOption/ComboboxOption.tsx
@@ -5,12 +5,7 @@ import { Tooltip } from "@vibe/tooltip";
 import { useIsOverflowing } from "@vibe/hooks";
 import { keyCodes } from "../../../../constants";
 import { getOptionId } from "../../helpers";
-import { withStaticPropsWithoutForwardRef } from "../../../../types";
-import {
-  ComboboxOptionIconType as ComboboxOptionIconTypeEnum,
-  type IComboboxOption,
-  type IComboboxOptionEvents
-} from "../ComboboxConstants";
+import { type IComboboxOption, type IComboboxOptionEvents } from "../ComboboxConstants";
 import { type ComboboxOptionIconType } from "../../Combobox.types";
 import { ComponentDefaultTestId, getTestId } from "../../../../tests/test-ids-utils";
 import styles from "./ComboboxOption.module.scss";
@@ -83,7 +78,7 @@ const ComboboxOption = ({
     iconSize = 18,
     disabled,
     selected,
-    ariaLabel,
+    "aria-label": ariaLabel,
     belongToCategory = false
   } = option;
   let { tooltipContent } = option;
@@ -117,9 +112,9 @@ const ComboboxOption = ({
     return (
       <Icon
         className={cx(styles.optionIcon, className)}
-        iconType="font"
+        type="font"
         icon={icon as SubIcon}
-        iconSize={iconSize}
+        size={iconSize}
         ignoreFocusStyle
       />
     );
@@ -201,10 +196,4 @@ const ComboboxOption = ({
   );
 };
 
-interface ComboboxOptionStaticProps {
-  iconTypes: typeof ComboboxOptionIconTypeEnum;
-}
-
-export default withStaticPropsWithoutForwardRef<ComboboxOptionProps, ComboboxOptionStaticProps>(ComboboxOption, {
-  iconTypes: ComboboxOptionIconTypeEnum
-});
+export default ComboboxOption;
diff --git a/packages/core/src/components/Combobox/components/StickyCategoryHeader/StickyCategoryHeader.module.scss b/packages/core/src/components/Combobox/components/StickyCategoryHeader/StickyCategoryHeader.module.scss
index 70d34f5301..ac47064d8e 100644
--- a/packages/core/src/components/Combobox/components/StickyCategoryHeader/StickyCategoryHeader.module.scss
+++ b/packages/core/src/components/Combobox/components/StickyCategoryHeader/StickyCategoryHeader.module.scss
@@ -3,7 +3,7 @@
   z-index: 10;
   width:  calc(100% - 12px);
   background-color: var(--primary-background-color);
-  padding-block: 10px var(--spacing-xs);
+  padding-block: 10px var(--space-4);
   display: flex;
   align-items: center;
 }
diff --git a/packages/core/src/components/Counter/Counter.module.scss b/packages/core/src/components/Counter/Counter.module.scss
index efcfcb9617..35cd513abd 100644
--- a/packages/core/src/components/Counter/Counter.module.scss
+++ b/packages/core/src/components/Counter/Counter.module.scss
@@ -21,20 +21,20 @@
   @include smoothing-text;
   min-width: 18px;
   line-height: 18px;
-  padding: 0 var(--spacing-small);
+  padding: 0 var(--space-8);
 }
 
 .sizeSmall {
   @include font-caption();
   min-width: 18px;
   line-height: 18px;
-  padding: 0 var(--spacing-small);
+  padding: 0 var(--space-8);
 }
 
 .sizeLarge {
   @include label-text();
   min-width: 24px;
-  padding: 2px var(--spacing-small);
+  padding: 2px var(--space-8);
 }
 
 .kindFill.colorPrimary {
diff --git a/packages/core/src/components/Counter/Counter.tsx b/packages/core/src/components/Counter/Counter.tsx
index d57161c6c9..2c884dfa1a 100644
--- a/packages/core/src/components/Counter/Counter.tsx
+++ b/packages/core/src/components/Counter/Counter.tsx
@@ -7,13 +7,8 @@ import { CSSTransition, SwitchTransition } from "react-transition-group";
 import useEventListener from "../../hooks/useEventListener";
 import useAfterFirstRender from "../../hooks/useAfterFirstRender";
 import { NOOP } from "../../utils/function-utils";
-import {
-  CounterColor as CounterColorEnum,
-  CounterSize as CounterSizeEnum,
-  CounterType as CounterTypeEnum
-} from "./CounterConstants";
 import { type CounterColor, type CounterSize, type CounterType } from "./Counter.types";
-import { type VibeComponentProps, withStaticPropsWithoutForwardRef } from "../../types";
+import { type VibeComponentProps } from "../../types";
 import styles from "./Counter.module.scss";
 import { ComponentVibeId } from "../../tests/constants";
 
@@ -21,7 +16,7 @@ export interface CounterProps extends VibeComponentProps {
   /**
    * The ID of the element describing the counter.
    */
-  ariaLabeledBy?: string;
+  "aria-labelledby"?: string;
   /**
    * Class name applied to the counter element.
    */
@@ -33,7 +28,7 @@ export interface CounterProps extends VibeComponentProps {
   /**
    * The label of the counter for accessibility.
    */
-  ariaLabel?: string;
+  "aria-label"?: string;
   /**
    * The size of the counter.
    */
@@ -72,8 +67,8 @@ const Counter = ({
   kind = "fill",
   color = "primary",
   maxDigits = 3,
-  ariaLabeledBy = "",
-  ariaLabel = "",
+  "aria-labelledby": ariaLabelledBy = "",
+  "aria-label": ariaLabel = "",
   id = "",
   prefix = "",
   onMouseDown = NOOP,
@@ -138,7 +133,7 @@ const Counter = ({
     <span
       className={className}
       aria-label={`${ariaLabel} ${countText}`}
-      aria-labelledby={ariaLabeledBy}
+      aria-labelledby={ariaLabelledBy}
       onMouseDown={onMouseDown}
       data-vibe={ComponentVibeId.COUNTER}
     >
@@ -175,14 +170,4 @@ const Counter = ({
   );
 };
 
-interface CounterStaticProps {
-  sizes: typeof CounterSizeEnum;
-  colors: typeof CounterColorEnum;
-  kinds: typeof CounterTypeEnum;
-}
-
-export default withStaticPropsWithoutForwardRef<CounterProps, CounterStaticProps>(Counter, {
-  sizes: CounterSizeEnum,
-  colors: CounterColorEnum,
-  kinds: CounterTypeEnum
-});
+export default Counter;
diff --git a/packages/core/src/components/Counter/CounterConstants.ts b/packages/core/src/components/Counter/CounterConstants.ts
deleted file mode 100644
index 6827dc7a7d..0000000000
--- a/packages/core/src/components/Counter/CounterConstants.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * @deprecated
- */
-export enum CounterType {
-  FILL = "fill",
-  LINE = "line"
-}
-
-/**
- * @deprecated
- */
-export enum CounterColor {
-  PRIMARY = "primary",
-  DARK = "dark",
-  NEGATIVE = "negative",
-  LIGHT = "light"
-}
-
-/**
- * @deprecated
- */
-export enum CounterSize {
-  XS = "xs",
-  SMALL = "small",
-  LARGE = "large"
-}
diff --git a/packages/core/src/components/Counter/__tests__/Counter.snapshot.test.tsx b/packages/core/src/components/Counter/__tests__/Counter.snapshot.test.tsx
index 0eb18192d7..79b182b603 100644
--- a/packages/core/src/components/Counter/__tests__/Counter.snapshot.test.tsx
+++ b/packages/core/src/components/Counter/__tests__/Counter.snapshot.test.tsx
@@ -39,8 +39,8 @@ describe("Counter renders correctly", () => {
     expect(tree).toMatchSnapshot();
   });
 
-  it("with ariaLabeledBy", () => {
-    const tree = renderer.create(<Counter ariaLabeledBy="aria label" />).toJSON();
+  it("with aria-labelledby", () => {
+    const tree = renderer.create(<Counter aria-labelledby="aria label" />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
diff --git a/packages/core/src/components/Counter/__tests__/Counter.test.tsx b/packages/core/src/components/Counter/__tests__/Counter.test.tsx
index a67137a4b4..1837cba88b 100644
--- a/packages/core/src/components/Counter/__tests__/Counter.test.tsx
+++ b/packages/core/src/components/Counter/__tests__/Counter.test.tsx
@@ -30,7 +30,7 @@ describe("Counter tests", () => {
     it("should add the aria label", () => {
       const count = 3;
       const ariaLabel = "Label Name ";
-      const { getByLabelText } = render(<Counter ariaLabel={ariaLabel} count={count} />);
+      const { getByLabelText } = render(<Counter aria-label={ariaLabel} count={count} />);
       const counterComponent = getByLabelText(ariaLabel + count);
       expect(counterComponent).toBeTruthy();
     });
diff --git a/packages/core/src/components/Counter/__tests__/__snapshots__/Counter.snapshot.test.tsx.snap b/packages/core/src/components/Counter/__tests__/__snapshots__/Counter.snapshot.test.tsx.snap
index 0191b41c9c..0111c9f527 100644
--- a/packages/core/src/components/Counter/__tests__/__snapshots__/Counter.snapshot.test.tsx.snap
+++ b/packages/core/src/components/Counter/__tests__/__snapshots__/Counter.snapshot.test.tsx.snap
@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Counter renders correctly > with ariaLabeledBy 1`] = `
+exports[`Counter renders correctly > with aria-labelledby 1`] = `
 <span
   aria-label=" 0"
   aria-labelledby="aria label"
diff --git a/packages/core/src/components/next/DatePicker/DateContentHoverContext.tsx b/packages/core/src/components/DatePicker/DateContentHoverContext.tsx
similarity index 100%
rename from packages/core/src/components/next/DatePicker/DateContentHoverContext.tsx
rename to packages/core/src/components/DatePicker/DateContentHoverContext.tsx
diff --git a/packages/core/src/components/DatePicker/DateNavigationItem/DateNavigationItem.module.scss b/packages/core/src/components/DatePicker/DateNavigationItem/DateNavigationItem.module.scss
deleted file mode 100644
index 788fe27c9b..0000000000
--- a/packages/core/src/components/DatePicker/DateNavigationItem/DateNavigationItem.module.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.navigationItemContainer {
-  line-height: 36px;
-  font-size: 28px;
-  color: var(--icon-color);
-  border: none;
-  padding: 0;
-  margin: 0;
-  background: none;
-  cursor: pointer;
-}
diff --git a/packages/core/src/components/DatePicker/DateNavigationItem/DateNavigationItem.tsx b/packages/core/src/components/DatePicker/DateNavigationItem/DateNavigationItem.tsx
deleted file mode 100644
index 737ed32320..0000000000
--- a/packages/core/src/components/DatePicker/DateNavigationItem/DateNavigationItem.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from "react";
-import { Icon } from "@vibe/icon";
-import { MoveArrowLeft, MoveArrowRight } from "@vibe/icons";
-import styles from "./DateNavigationItem.module.scss";
-
-const ICONS = {
-  prev: MoveArrowLeft,
-  next: MoveArrowRight
-};
-
-export interface DateNavigationItemProps {
-  /**
-   * The type of navigation button.
-   */
-  kind: keyof typeof ICONS;
-  /**
-   * Callback fired when the button is clicked.
-   */
-  onClick?: () => void;
-}
-
-const DateNavigationItem = ({ kind, onClick }: DateNavigationItemProps) => {
-  return (
-    <button type="button" className={styles.navigationItemContainer} onClick={() => onClick && onClick()}>
-      <Icon iconType="svg" icon={ICONS[kind]} iconSize={24} />
-    </button>
-  );
-};
-
-export default DateNavigationItem;
diff --git a/packages/core/src/components/DatePicker/DatePicker.module.scss b/packages/core/src/components/DatePicker/DatePicker.module.scss
index d1c7c07eba..650bfc10e0 100644
--- a/packages/core/src/components/DatePicker/DatePicker.module.scss
+++ b/packages/core/src/components/DatePicker/DatePicker.module.scss
@@ -1,285 +1,272 @@
-/* stylelint-disable selector-class-pattern, no-duplicate-selectors */
-
-@mixin pseudo-circle {
-  display: block;
-  position: absolute;
-  left: 0;
-  top: 0;
-  box-sizing: border-box;
-  content: "";
-  width: 100%;
-  height: 100%;
-  z-index: -1;
-  border-radius: 50%;
-}
-:global {
-  :local(.datepickerContainer) {
-    position: relative;
-    min-height: 302px;
-    table tbody {
-      border-spacing: 0;
-      border-collapse: collapse;
-      margin: 0;
-      padding: 0;
-      border: 0;
-      font-size: 100%;
-      box-shadow: none;
-    }
-    td {
-      border: none;
-    }
-    &:local(.monthYearSelection) {
-      table {
-        tbody {
-          opacity: 0;
+@import "~@vibe/style/dist/mixins";
+
+.datePicker {
+  --day-picker-header-height: 34px;
+  --day-picker-content-height: 234px;
+  --day-picker-day-width: 30px;
+  --day-picker-day-height: 30px;
+  --day-picker-days-horizontal-gap: 4px;
+  --day-picker-days-vertical-gap: 2px;
+  --day-picker-day-change-range: var(--primary-surface-color);
+
+  .datePickerMonths {
+    display: flex;
+    flex-direction: row;
+    gap: var(--space-16);
+    align-items: flex-start;
+  }
+
+  &.withWeekNumber {
+    --day-picker-days-horizontal-gap: 2px;
+    width: 284px;
+    margin: 0;
+
+    .datePickerHead {
+      td:first-child {
+        width: var(--day-picker-day-width);
+        border-start-start-radius: var(--border-radius-medium);
+        border-start-end-radius: var(--border-radius-medium);
+        background-color: var(--primary-background-hover-color);
+
+        &::after {
+          color: var(--secondary-text-color);
+          @include vibe-text(text2, normal);
+          display: flex;
+          justify-content: center;
+          content: "No.";
         }
       }
-      .DayPicker_transitionContainer__horizontal {
-        transition: none;
-      }
-    }
-    .CalendarMonthGrid {
-      background-color: var(--secondary-background-color);
     }
-    .CalendarMonth {
-      background-color: var(--secondary-background-color);
+
+    .datePickerBody {
+      td:first-child {
+        background-color: var(--primary-background-hover-color);
+      }
+
+      tr:last-child td:first-child {
+        border-end-start-radius: var(--border-radius-medium);
+        border-end-end-radius: var(--border-radius-medium);
+      }
     }
-    .DayPicker__horizontal {
-      background-color: var(--secondary-background-color);
+  }
+
+  .datePickerTable {
+    margin-top: var(--space-8);
+    border-collapse: collapse;
+    height: var(--day-picker-content-height);
+  }
+
+  .datePickerHead {
+    th {
+      color: var(--secondary-text-color);
+      @include vibe-text(text2, normal);
+      padding-block: var(--space-2);
+      text-align: center;
+      height: var(--day-picker-day-height);
     }
-    .DayPicker {
-      box-shadow: none;
-      border: none;
-      border-radius: 0;
+  }
+  .datePickerBody {
+    td {
+      color: var(--secondary-text-color);
+      @include vibe-text(text2, normal);
+      text-align: center;
+      padding: 0;
     }
 
-    .CalendarDay__default {
+    .datePickerDay {
+      color: var(--primary-text-color);
+      @include vibe-text(text2, normal);
+      width: var(--day-picker-day-width);
+      height: var(--day-picker-day-height);
+      background: none;
       border: none;
-      font-size: 16px;
-      font-weight: 300;
-      color: var(--primary-text-on-secondary-color);
-      background-color: var(--secondary-background-color);
-      border-top: 1px solid var(--secondary-background-color);
-      border-bottom: 1px solid var(--secondary-background-color);
-      z-index: 1;
-      position: relative;
-
-      &:hover {
-        background: none;
-        border: none;
-        border-top: 1px solid var(--secondary-background-color);
-        border-bottom: 1px solid var(--secondary-background-color);
-        &::before {
-          @include pseudo-circle;
-          border: none;
-          background-color: var(--primary-background-hover-color);
+      cursor: pointer;
+      border-radius: var(--border-radius-small);
+      margin: var(--day-picker-days-vertical-gap) var(--day-picker-days-horizontal-gap);
+      padding: 0;
+
+      .datePickerDayContent {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        border-radius: var(--border-radius-small);
+      }
+
+      &:focus-visible {
+        outline: none;
+        .datePickerDayContent {
+          outline: 2px solid var(--primary-color);
         }
       }
-      &.CalendarDay__selected {
+
+      &.datePickerDayDisabled {
+        color: var(--disabled-text-color);
+        cursor: not-allowed;
+      }
+
+      &:not(.datePickerDayDisabled):not(.datePickerAddToRangeStart):not(.datePickerAddToRangeEnd):not(
+          .datePickerAddToRangeMiddle
+        ):not(.datePickerDayRangeStart):not(.datePickerDayRangeEnd)
+        .datePickerDayContent:hover {
+        background: var(--primary-background-hover-color);
+      }
+
+      &.datePickerDayOutside {
+        color: var(--disabled-text-color);
+      }
+
+      &.datePickerDaySelected:not(.datePickerDayRangeMiddle):not(.datePickerRemoveFromRange) {
+        background: var(--primary-color);
         color: var(--text-color-on-primary);
-        &::before {
-          @include pseudo-circle;
-          border: none;
+      }
 
-          background: var(--primary-color);
-          &:hover {
-            color: var(--text-color-on-primary);
-            background: var(--primary-color);
-          }
-        }
+      &.datePickerDayRangeStart:not(.datePickerDayRangeEnd):not(.datePickerRemoveFromRange),
+      &.datePickerDayRangeEnd:not(.datePickerDayRangeStart):not(.datePickerRemoveFromRange) {
+        background: var(--primary-color);
+        width: calc(var(--day-picker-day-width) + var(--day-picker-days-horizontal-gap));
       }
-    }
-    .CalendarMonth_caption {
-      color: var(--primary-text-on-secondary-color);
-    }
 
-    .CalendarDay__today {
-      &::before {
-        @include pseudo-circle;
-        border: 1px solid var(--primary-color);
+      &.datePickerDayRangeStart.datePickerRemoveFromRange,
+      &.datePickerDayRangeEnd.datePickerRemoveFromRange {
+        background: var(--primary-color);
+        color: var(--text-color-on-primary);
       }
-      &:hover {
-        &::before {
-          border: 1px solid var(--primary-color);
-        }
+
+      &.datePickerDayRangeStart.datePickerRemoveFromRange:not(.datePickerDayRangeEnd),
+      &.datePickerDayRangeEnd.datePickerRemoveFromRange:not(.datePickerDayRangeStart) {
+        width: calc(var(--day-picker-day-width) + var(--day-picker-days-horizontal-gap));
       }
-    }
-    .CalendarDay__blocked_calendar,
-    .CalendarDay__blocked_calendar:active,
-    .CalendarDay__blocked_calendar:hover {
-      background-color: var(--secondary-background-color);
-      color: var(--primary-text-color);
-      opacity: 0.2;
-      pointer-events: none;
-    }
-    .DayPicker_weekHeader_li {
-      small {
-        font-size: 12px;
-        color: var(--secondary-text-on-secondary-color);
-        font-weight: 300;
-        cursor: default;
+
+      &.datePickerAddToRangeStart,
+      &.datePickerDayRangeStart:not(.datePickerDayRangeEnd) {
+        margin-inline-end: 0;
+        border-start-end-radius: 0;
+        border-end-end-radius: 0;
       }
-    }
-    .DayPickerNavigation_rightButton__horizontal {
-      right: 22px;
-    }
 
-    .DayPickerNavigation {
-      .DayPickerNavigation_button:nth-child(1) {
-        left: 12px;
+      &.datePickerAddToRangeEnd,
+      &.datePickerDayRangeEnd:not(.datePickerDayRangeStart) {
+        margin-inline-start: 0;
+        border-start-start-radius: 0;
+        border-end-start-radius: 0;
       }
-      .DayPickerNavigation_button:nth-child(2) {
-        right: 12px;
+
+      &.datePickerAddToRangeStart,
+      &.datePickerAddToRangeEnd,
+      &.datePickerAddToRangeMiddle {
+        margin: var(--day-picker-days-vertical-gap) 0;
+      }
+
+      &.datePickerAddToRangeStart:not(.datePickerDayRangeStart):not(.datePickerDayRangeEnd),
+      &.datePickerAddToRangeEnd:not(.datePickerDayRangeStart):not(.datePickerDayRangeEnd),
+      &.datePickerAddToRangeMiddle,
+      &.datePickerDayRangeMiddle:not(.datePickerAddToRangeStart):not(.datePickerAddToRangeEnd) {
+        background-color: var(--primary-selected-color);
+        border: var(--day-picker-days-horizontal-gap) var(--border-style) var(--primary-selected-color);
+        border-top: none;
+        border-bottom: none;
+        width: calc(var(--day-picker-day-width) + 2 * var(--day-picker-days-horizontal-gap));
       }
-    }
 
-    .DayPickerNavigation_button__horizontal {
-      position: absolute;
-      top: 15px;
-      line-height: 0.78;
-      border-radius: 3px;
-      padding: 6px 9px;
+      &.datePickerAddToRangeMiddle,
+      &.datePickerDayRangeMiddle:not(.datePickerAddToRangeStart):not(.datePickerAddToRangeEnd) {
+        background: var(--primary-selected-color);
+        margin: var(--day-picker-days-vertical-gap) 0;
+        border-radius: 0;
+      }
+
+      &.datePickerRemoveFromRange:not(.datePickerDayRangeStart):not(.datePickerDayRangeEnd),
+      &.datePickerAddToRangeStart:not(.datePickerDayRangeMiddle):not(.datePickerDayRangeEnd),
+      &.datePickerAddToRangeEnd:not(.datePickerDayRangeMiddle):not(.datePickerDayRangeStart),
+      &.datePickerAddToRangeMiddle {
+        background: var(--day-picker-day-change-range);
+        border-color: var(--day-picker-day-change-range);
+      }
     }
 
-    // range picker
-    &:local(.rangePickerMode) {
-      .CalendarDay__selected {
-        &.CalendarDay__selected_start {
-          border-radius: 0;
-          background: linear-gradient(90deg, var(--secondary-background-color) 50%, var(--primary-selected-color) 50%);
-          z-index: 1;
-          position: relative;
-          &:hover {
-            background: linear-gradient(
-              90deg,
-              var(--secondary-background-color) 50%,
-              var(--primary-selected-color) 50%
-            );
-          }
-          &::before {
-            @include pseudo-circle;
-            background-color: var(--primary-color);
-          }
+    tr {
+      td:first-child .datePickerDay {
+        &.datePickerDayRangeMiddle,
+        &.datePickerAddToRangeStart:not(.datePickerDayRangeStart):not(.datePickerDayRangeEnd),
+        &.datePickerAddToRangeMiddle,
+        &.datePickerAddToRangeEnd:not(.datePickerDayRangeStart):not(.datePickerDayRangeEnd) {
+          border: none;
+          width: calc(var(--day-picker-day-width) + var(--day-picker-days-horizontal-gap));
+          margin-inline-start: var(--day-picker-days-horizontal-gap);
+          border-inline-end: var(--day-picker-days-horizontal-gap) solid var(--primary-selected-color);
+          border-start-start-radius: var(--border-radius-small);
+          border-end-start-radius: var(--border-radius-small);
         }
-      }
-      .CalendarDay__selected {
-        &.CalendarDay__selected_end {
-          border-radius: 0;
-          background: linear-gradient(90deg, var(--primary-selected-color) 50%, var(--secondary-background-color) 50%);
-          z-index: 1;
-          position: relative;
-          &:hover {
-            background: linear-gradient(
-              90deg,
-              var(--primary-selected-color) 50%,
-              var(--secondary-background-color) 50%
-            );
-          }
-          &::before {
-            @include pseudo-circle;
-            background-color: var(--primary-color);
-          }
+
+        &.datePickerRemoveFromRange {
+          border-color: var(--day-picker-day-change-range);
         }
-      }
 
-      .CalendarDay__hovered_span,
-      .CalendarDay__hovered_span:hover {
-        border-radius: 0;
-        color: var(--primary-text-color);
-        background: var(--primary-selected-color);
-        &:hover {
-          &::before {
-            border-radius: 0;
-            background: var(--primary-selected-color);
-          }
+        &.datePickerAddToRangeEnd,
+        &.datePickerDayRangeEnd:not(.datePickerDayRangeStart) {
+          margin-inline-end: 0;
         }
       }
-      .CalendarDay__selected_span {
-        background: var(--primary-selected-color);
-        &:hover {
-          color: var(--primary-text-color);
+
+      td:last-child .datePickerDay {
+        &.datePickerDayRangeMiddle,
+        &.datePickerAddToRangeStart:not(.datePickerDayRangeStart):not(.datePickerDayRangeEnd),
+        &.datePickerAddToRangeMiddle,
+        &.datePickerAddToRangeEnd:not(.datePickerDayRangeStart):not(.datePickerDayRangeEnd) {
+          border: none;
+          width: calc(var(--day-picker-day-width) + var(--day-picker-days-horizontal-gap));
+          margin-inline-end: var(--day-picker-days-horizontal-gap);
+          border-inline-start: var(--day-picker-days-horizontal-gap) solid var(--primary-selected-color);
+          border-start-end-radius: var(--border-radius-small);
+          border-end-end-radius: var(--border-radius-small);
         }
-        &.CalendarDay__today {
-          &::before {
-            border-radius: 0;
-          }
+
+        &.datePickerRemoveFromRange {
+          border-color: var(--day-picker-day-change-range);
         }
-        &:hover {
-          &::before {
-            border-radius: 0;
-          }
+
+        &.datePickerAddToRangeStart,
+        &.datePickerDayRangeStart:not(.datePickerDayRangeEnd) {
+          margin-inline-start: 0;
         }
       }
 
-      &.range-single-date-selected {
-        .CalendarDay__hovered_span {
-          background: var(--primary-background-hover-color);
-          &.CalendarDay__today {
-            &::before {
-              border-radius: 0;
-            }
-          }
-          &:hover {
-            &::before {
-              background: var(--primary-background-hover-color);
-            }
-          }
+      td:first-child .datePickerDay,
+      td:last-child .datePickerDay {
+        &.datePickerAddToRangeStart:not(.datePickerDayRangeMiddle),
+        &.datePickerAddToRangeMiddle,
+        &.datePickerAddToRangeEnd:not(.datePickerDayRangeMiddle) {
+          border-color: var(--day-picker-day-change-range);
         }
-      }
-    }
 
-    //show number of week
-    &:local(.withWeekNumber) {
-      .CalendarDay :local(.calendarDayWeekNumber) {
-        color: #b1b1b8bf;
-        pointer-events: none;
-        visibility: visible;
-        display: none;
-        align-items: center;
-        justify-content: center;
-        position: absolute;
-        top: -1px;
-        font-size: 14px;
-        width: 40px;
-        height: 37px;
-        left: 0px;
-        transform: translateX(-100%);
-      }
-      .CalendarMonthGrid_month__horizontal:not(.CalendarMonthGrid_month__hidden) {
-        tr {
-          & > td.CalendarDay :local(.calendarDayWeekNumber) {
-            display: flex;
-          }
-
-          & > td.CalendarDay ~ td.CalendarDay :local(.calendarDayWeekNumber) {
-            display: none;
-          }
+        &.datePickerDaySelected.datePickerDayRangeEnd.datePickerAddToRangeStart {
+          border-inline-start-width: 0;
+        }
+        &.datePickerDaySelected.datePickerDayRangeStart.datePickerAddToRangeEnd {
+          border-inline-end-width: 0;
         }
       }
+    }
 
-      .DayPicker_weekHeader:before {
-        content: "Wk";
-        position: absolute;
-        font-size: 12px;
-        width: 40px;
-        top: 3px;
-        left: -28px;
-        height: 24px;
-      }
-      padding: 0 4px 0 8px;
-      .DayPicker__horizontal {
-        margin: 4px;
-      }
+    .datePickerDaySelected.datePickerDayRangeEnd.datePickerAddToRangeStart {
+      border-radius: var(--border-radius-small) !important;
+      border-color: var(--primary-color) !important;
+      background-color: var(--primary-color) !important;
 
-      .CalendarMonthGrid_month__horizontal:not(.CalendarMonthGrid_month__hidden) {
-        margin-left: 17px;
-      }
-      .DayPicker_weekHeader {
-        padding: 0 !important; //override inline style
-        left: 30px !important; //override inline style
+      &:not(.datePickerHalfRangeSelected) {
+        margin-inline-start: calc(var(--day-picker-days-horizontal-gap) * -1);
       }
-      .CalendarMonth_caption {
-        margin-right: 20px;
+    }
+
+    .datePickerDaySelected.datePickerDayRangeStart.datePickerAddToRangeEnd {
+      border-radius: var(--border-radius-small) !important;
+      border-color: var(--primary-color) !important;
+      background-color: var(--primary-color) !important;
+
+      &:not(.datePickerHalfRangeSelected) {
+        margin-inline-end: calc(var(--day-picker-days-horizontal-gap) * -1);
       }
     }
   }
diff --git a/packages/core/src/components/DatePicker/DatePicker.tsx b/packages/core/src/components/DatePicker/DatePicker.tsx
index d8a6f6cd71..d53d50d693 100644
--- a/packages/core/src/components/DatePicker/DatePicker.tsx
+++ b/packages/core/src/components/DatePicker/DatePicker.tsx
@@ -1,256 +1,188 @@
-import React, { forwardRef, useCallback, useState } from "react";
+import React, { type FC, createContext, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import cx from "classnames";
-import moment from "moment";
-import "react-dates/initialize.js";
-import {
-  type DayOfWeekShape,
-  DayPickerRangeController,
-  DayPickerSingleDateController,
-  type DayPickerPhrases
-} from "react-dates";
-/** @ts-expect-error this is exported, but not typed */
-import { DayPickerPhrases as defaultPhrases } from "react-dates/lib/defaultPhrases.js";
-import DatePickerHeaderComponent from "./DatePickerHeader/DatePickerHeader";
-import DateNavigationItem from "./DateNavigationItem/DateNavigationItem";
-import YearPicker from "./YearPicker/YearPicker";
-import { DAY_SIZE, WEEK_FIRST_DAY } from "./constants";
-import { Direction, FocusInput, type Moment, type RangeDate } from "./types";
-import { type VibeComponentProps } from "../../types";
-import { getTestId } from "../../tests/test-ids-utils";
-import { ComponentDefaultTestId, ComponentVibeId } from "../../tests/constants";
-import { NOOP } from "../../utils/function-utils";
-import { useWarnDeprecated } from "../../utils/warn-deprecated";
+import { type DateRange, DayPicker as ReactDatePicker, InternalModifier as DayModifier } from "react-day-picker";
 import styles from "./DatePicker.module.scss";
-// Make sure to update when upgrading react-dates
-import "./external_datepicker.scss";
+import DatePickerHeader, { type DatePickerHeaderProps } from "./DatePickerHeader";
+import { type DatePickerProps, type DatePickerRange } from "./DatePicker.types";
+import {
+  AddToRangeEnd,
+  AddToRangeMiddle,
+  AddToRangeStart,
+  HalfRangeSelected,
+  HoveredDayExists,
+  RemoveFromRange,
+  addToRange,
+  addToRangeModifiers
+} from "./utils";
+import { RangeDayContent } from "./RangeDayContent";
+import { SingleDayContent } from "./SingleDayContent";
+import { DayContentHoverContext, DayContentHoverProvider } from "./DateContentHoverContext";
 
-export interface DatePickerProps extends VibeComponentProps {
-  /**
-   * The first day of the week to display.
-   */
-  firstDayOfWeek?: DayOfWeekShape;
-  /**
-   * The currently selected date.
-   */
-  date?: Moment;
-  /**
-   * The end date for range selection mode.
-   */
-  endDate?: Moment;
-  /**
-   * Callback fired when a date is selected.
-   */
-  onPickDate?: (date: Moment | RangeDate) => void;
-  /**
-   * If true, hides the navigation buttons.
-   */
-  hideNavigationKeys?: boolean;
-  /**
-   * If true, allows selecting days outside the current month.
-   */
-  enableOutsideDays?: boolean;
-  /**
-   * If true, displays a column with week numbers.
-   */
-  showWeekNumber?: boolean;
-  /**
-   * The size of a single day cell.
-   */
-  daySize?: number;
-  /**
-   * Function to determine if a specific day should be disabled.
-   */
-  shouldBlockDay?: (date: Moment) => boolean;
-  /**
-   * If true, enables date range selection mode.
-   */
-  range?: boolean;
-  /**
-   * Custom phrases for accessibility and aria-labels.
-   */
-  phrases?: DayPickerPhrases;
-  /**
-   * The number of months displayed in the calendar.
-   */
-  numberOfMonths?: number;
-  /**
-   * Function to determine if a specific year should be disabled.
-   */
-  shouldBlockYear?: (year: number) => boolean;
-  /**
-   * Function to determine if a specific date range should be disabled.
-   */
-  shouldBlockRange?: (date: Moment) => boolean;
-}
+export const DEFAULT_TIME = { hours: 9, minutes: 0 };
 
-const DatePicker = forwardRef(
-  (
-    {
-      id,
-      className,
-      firstDayOfWeek = WEEK_FIRST_DAY,
-      daySize = DAY_SIZE,
-      range = false,
-      shouldBlockDay,
-      shouldBlockYear,
-      numberOfMonths = 1,
-      hideNavigationKeys = false,
-      date,
-      endDate,
-      onPickDate = NOOP,
-      enableOutsideDays = false,
-      showWeekNumber = false,
-      shouldBlockRange,
-      "data-testid": dataTestId,
-      phrases
-    }: DatePickerProps,
-    ref: React.ForwardedRef<HTMLDivElement>
-  ) => {
-    useWarnDeprecated({
-      component: "DatePicker",
-      message:
-        "This component is deprecated and will be removed in the next major version. Please use DatePicker from @vibe/core/next instead."
-    });
+const MODIFIERS_CLASS_NAMES = {
+  [DayModifier.Outside]: styles.datePickerDayOutside,
+  [DayModifier.Selected]: styles.datePickerDaySelected,
+  [DayModifier.Today]: styles.datePickerDayToday,
+  [DayModifier.Disabled]: styles.datePickerDayDisabled,
+  [DayModifier.RangeStart]: styles.datePickerDayRangeStart,
+  [DayModifier.RangeEnd]: styles.datePickerDayRangeEnd,
+  [DayModifier.RangeMiddle]: styles.datePickerDayRangeMiddle,
+  [AddToRangeMiddle]: styles.datePickerAddToRangeMiddle,
+  [AddToRangeStart]: styles.datePickerAddToRangeStart,
+  [AddToRangeEnd]: styles.datePickerAddToRangeEnd,
+  [RemoveFromRange]: styles.datePickerRemoveFromRange,
+  [HoveredDayExists]: styles.datePickerHoveredDayExists,
+  [HalfRangeSelected]: styles.datePickerHalfRangeSelected
+};
 
-    const [focusedInput, setFocusedInput] = useState(FocusInput.startDate);
-    const [isMonthYearSelection, setIsMonthYearSelection] = useState(false); //show Month/Year selection dropdown
-    const [overrideDateForView, setOverrideDateForView] = useState<Moment | null>(null);
-    const [yearFunc, setYearFunc] = useState(null);
+const DatePickerHeaderContext = createContext<DatePickerHeaderProps>({} as DatePickerHeaderProps);
 
-    const renderMonth = useCallback(
-      ({
-        month,
-        onYearSelect
-      }: {
-        month: moment.Moment;
-        onYearSelect: (currentMonth: moment.Moment, newMonthVal: string) => void;
-      }) => {
-        if (!yearFunc && onYearSelect) {
-          setYearFunc(() => onYearSelect);
-        }
-        return (
-          <DatePickerHeaderComponent
-            data-testid={dataTestId || getTestId(ComponentDefaultTestId.DATEPICKER_HEADER, id)}
-            currentDate={month || moment()}
-            isMonthYearSelection={isMonthYearSelection}
-            onToggleMonthYearPicker={() => setIsMonthYearSelection(val => !val)}
-            hideNavigationKeys={hideNavigationKeys}
-          />
-        );
-      },
-      [isMonthYearSelection, dataTestId, id, hideNavigationKeys, yearFunc]
-    );
+const Caption = () => (
+  <DatePickerHeaderContext.Consumer>{props => <DatePickerHeader {...props} />}</DatePickerHeaderContext.Consumer>
+);
 
-    const renderDay = useCallback(
-      (day: Moment) => {
-        const weekNumber = firstDayOfWeek === 0 ? day.clone().add(1, "d").isoWeek() : day.isoWeek();
-        return (
-          <>
-            <span className={styles.calendarDayWeekNumber}>{weekNumber}</span> {day.format("D")}
-          </>
-        );
-      },
-      [firstDayOfWeek]
-    );
+const DatePicker: FC<DatePickerProps> = ({
+  className,
+  dayClassName,
+  selectedDayClassName,
+  id,
+  "data-testid": dataTestId,
+  mode = "single",
+  date,
+  endDate,
+  onDateChange,
+  firstDayOfWeek = 0,
+  showWeekNumber,
+  isDateDisabled,
+  locale,
+  nextButtonAriaLabel = "Next",
+  prevButtonAriaLabel = "Previous",
+  monthSelectionAriaLabel = "Month",
+  yearSelectionAriaLabel = "Year",
+  dropdownsClassName,
+  intent = "to",
+  dialogContainerSelector
+}) => {
+  const selected = useMemo(() => (mode === "single" ? date : { from: date, to: endDate }), [date, endDate, mode]);
+  const [displayMonth, setDisplayMonth] = useState(date || new Date());
 
-    const changeCurrentDateFromMonthYearView = useCallback(
-      (newDate: Moment | null) => {
-        const oldDate = overrideDateForView || date;
-        setOverrideDateForView(newDate);
-        setIsMonthYearSelection(false);
-        yearFunc(oldDate, moment(newDate).year());
-      },
-      [overrideDateForView, date, yearFunc]
-    );
+  const prevDateRef = useRef<Date | undefined>();
+  const prevEndDateRef = useRef<Date | undefined>();
+  const lastChangeByInnerSelection = useRef(false);
+  useEffect(() => {
+    const dateChanged = +prevDateRef.current !== +date;
+    const endDateChanged = +prevEndDateRef.current !== +endDate;
+    const shouldSetDisplayMonth = !lastChangeByInnerSelection.current;
 
-    const renderMonthYearSelection = useCallback(() => {
-      return (
-        <YearPicker
-          data-testid={dataTestId || getTestId(ComponentDefaultTestId.DATEPICKER_YEAR_SELECTION, id)}
-          selectedDate={date}
-          isYearBlocked={shouldBlockYear}
-          changeCurrentDate={changeCurrentDateFromMonthYearView}
-        />
-      );
-    }, [dataTestId, id, overrideDateForView, date, shouldBlockYear, changeCurrentDateFromMonthYearView]);
+    if (dateChanged) {
+      shouldSetDisplayMonth && date && setDisplayMonth(date);
+    } else if (endDateChanged) {
+      shouldSetDisplayMonth && endDate && setDisplayMonth(endDate);
+    }
 
-    const onDateRangeChange = useCallback(
-      (date: RangeDate) => {
-        if (!onPickDate) return;
-        if (focusedInput === FocusInput.startDate) {
-          onPickDate({ ...date, endDate: null });
-        } else {
-          onPickDate(date);
-        }
-      },
-      [focusedInput, onPickDate]
-    );
+    prevDateRef.current = date;
+    prevEndDateRef.current = endDate;
+    lastChangeByInnerSelection.current = false;
+  }, [date, endDate]);
 
-    const onFocusChange = useCallback((focusedInput: FocusInput) => {
-      setFocusedInput(focusedInput || FocusInput.startDate);
-    }, []);
+  const onPickerDateChange = useCallback(
+    (newValue: Date | DateRange, selectedDay: Date) => {
+      lastChangeByInnerSelection.current = true;
 
-    const mergedPhrases = { ...defaultPhrases, ...phrases };
+      if (mode === "range") {
+        const newRange = addToRange(selectedDay, selected as DateRange, intent);
+        (onDateChange as (range: DatePickerRange) => void)({ date: newRange?.from, endDate: newRange?.to });
+      } else {
+        const newDate = newValue as Date;
+        const { hours, minutes } = date ? { hours: date.getHours(), minutes: date.getMinutes() } : DEFAULT_TIME;
+        newDate.setHours(hours, minutes);
+        (onDateChange as (date: Date | undefined) => void)(newDate);
+      }
+    },
+    [date, intent, mode, onDateChange, selected]
+  );
 
-    const shouldShowNav = !hideNavigationKeys && !isMonthYearSelection;
-    return (
-      <div
-        data-testid={dataTestId || getTestId(ComponentDefaultTestId.DATEPICKER, id)}
-        ref={ref}
-        id={id}
-        className={cx(styles.datepickerContainer, className, {
-          [styles.withWeekNumber]: showWeekNumber,
-          [styles.rangePickerMode]: range,
-          [styles.monthYearSelection]: isMonthYearSelection
-        })}
-        data-vibe={ComponentVibeId.DATE_PICKER}
-      >
-        {range ? (
-          <DayPickerRangeController
-            phrases={mergedPhrases}
-            renderDayContents={showWeekNumber ? renderDay : undefined}
-            firstDayOfWeek={firstDayOfWeek}
-            hideKeyboardShortcutsPanel
-            startDate={date}
-            endDate={endDate}
-            onDatesChange={onDateRangeChange}
-            focusedInput={focusedInput}
-            minimumNights={0}
-            onFocusChange={onFocusChange}
-            navPrev={shouldShowNav ? <DateNavigationItem kind={Direction.prev} /> : <div />}
-            navNext={shouldShowNav ? <DateNavigationItem kind={Direction.next} /> : <div />}
-            daySize={daySize}
-            isOutsideRange={shouldBlockRange}
-            isDayBlocked={shouldBlockDay}
-            renderMonthElement={renderMonth}
-            enableOutsideDays={enableOutsideDays || showWeekNumber}
-            numberOfMonths={numberOfMonths}
-            initialVisibleMonth={() => overrideDateForView || date || moment()}
-          />
-        ) : (
-          <DayPickerSingleDateController
-            phrases={mergedPhrases}
-            renderDayContents={showWeekNumber ? renderDay : undefined}
-            firstDayOfWeek={firstDayOfWeek}
-            hideKeyboardShortcutsPanel
-            onFocusChange={NOOP}
-            numberOfMonths={numberOfMonths}
-            date={date}
-            onDateChange={(date: Moment) => onPickDate(date)}
-            navPrev={shouldShowNav ? <DateNavigationItem kind={Direction.prev} /> : <div />}
-            navNext={shouldShowNav ? <DateNavigationItem kind={Direction.next} /> : <div />}
-            focused={true}
-            renderMonthElement={renderMonth}
-            enableOutsideDays={enableOutsideDays || showWeekNumber}
-            daySize={daySize}
-            isDayBlocked={shouldBlockDay}
-            initialVisibleMonth={() => overrideDateForView || date || moment()}
-          />
-        )}
-        {isMonthYearSelection && renderMonthYearSelection()}
-      </div>
-    );
-  }
-);
+  const DatePickerHeaderContextValue = useMemo<DatePickerHeaderProps>(
+    () => ({
+      setDisplayMonth,
+      locale,
+      nextButtonAriaLabel,
+      prevButtonAriaLabel,
+      monthSelectionAriaLabel,
+      yearSelectionAriaLabel,
+      dropdownsClassName,
+      dialogContainerSelector
+    }),
+    [
+      locale,
+      monthSelectionAriaLabel,
+      nextButtonAriaLabel,
+      setDisplayMonth,
+      prevButtonAriaLabel,
+      yearSelectionAriaLabel,
+      dropdownsClassName,
+      dialogContainerSelector
+    ]
+  );
+
+  const modifiersClassNames = useMemo(
+    () => ({
+      ...MODIFIERS_CLASS_NAMES,
+      [DayModifier.Selected]: cx(MODIFIERS_CLASS_NAMES[DayModifier.Selected], selectedDayClassName)
+    }),
+    [selectedDayClassName]
+  );
+
+  const classNames = useMemo(
+    () => ({
+      months: styles.datePickerMonths,
+      head: styles.datePickerHead,
+      table: styles.datePickerTable,
+      tbody: styles.datePickerBody,
+      day: cx(styles.datePickerDay, dayClassName)
+    }),
+    [dayClassName]
+  );
+
+  return (
+    <div
+      id={id}
+      className={cx(styles.datePicker, { [styles.withWeekNumber]: showWeekNumber }, className)}
+      data-testid={dataTestId}
+      data-vibe="DatePicker"
+    >
+      <DayContentHoverProvider>
+        <DatePickerHeaderContext.Provider value={DatePickerHeaderContextValue}>
+          <DayContentHoverContext.Consumer>
+            {({ hover }) => {
+              const modifiers = addToRangeModifiers(hover, selected as DateRange, intent);
+              return (
+                <ReactDatePicker
+                  fixedWeeks
+                  showOutsideDays
+                  showWeekNumber={showWeekNumber}
+                  mode={mode as "single"} // cast to avoid type errors from ReactDatePicker
+                  required
+                  weekStartsOn={firstDayOfWeek}
+                  disabled={isDateDisabled}
+                  selected={selected as Date} // cast to avoid type errors from ReactDatePicker
+                  onSelect={onPickerDateChange}
+                  month={displayMonth}
+                  onMonthChange={setDisplayMonth}
+                  components={{ Caption, DayContent: mode === "single" ? SingleDayContent : RangeDayContent }}
+                  classNames={classNames}
+                  modifiers={modifiers}
+                  modifiersClassNames={modifiersClassNames}
+                  locale={locale}
+                />
+              );
+            }}
+          </DayContentHoverContext.Consumer>
+        </DatePickerHeaderContext.Provider>
+      </DayContentHoverProvider>
+    </div>
+  );
+};
 
 export default DatePicker;
diff --git a/packages/core/src/components/next/DatePicker/DatePicker.types.ts b/packages/core/src/components/DatePicker/DatePicker.types.ts
similarity index 100%
rename from packages/core/src/components/next/DatePicker/DatePicker.types.ts
rename to packages/core/src/components/DatePicker/DatePicker.types.ts
diff --git a/packages/core/src/components/next/DatePicker/DatePickerHeader.module.scss b/packages/core/src/components/DatePicker/DatePickerHeader.module.scss
similarity index 93%
rename from packages/core/src/components/next/DatePicker/DatePickerHeader.module.scss
rename to packages/core/src/components/DatePicker/DatePickerHeader.module.scss
index 3b7de02d83..4c0addf0b3 100644
--- a/packages/core/src/components/next/DatePicker/DatePickerHeader.module.scss
+++ b/packages/core/src/components/DatePicker/DatePickerHeader.module.scss
@@ -1,4 +1,4 @@
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 
 .monthButtonDropdown {
   min-width: 70px;
diff --git a/packages/core/src/components/next/DatePicker/DatePickerHeader.tsx b/packages/core/src/components/DatePicker/DatePickerHeader.tsx
similarity index 91%
rename from packages/core/src/components/next/DatePicker/DatePickerHeader.tsx
rename to packages/core/src/components/DatePicker/DatePickerHeader.tsx
index 84c2bfed2f..d3e98b4469 100644
--- a/packages/core/src/components/next/DatePicker/DatePickerHeader.tsx
+++ b/packages/core/src/components/DatePicker/DatePickerHeader.tsx
@@ -1,10 +1,9 @@
 import React, { type FC, useCallback, useMemo } from "react";
 import cx from "classnames";
 import { useDayPicker, useNavigation } from "react-day-picker";
-import { Button } from "@vibe/button";
 import { IconButton } from "@vibe/icon-button";
 import { Flex } from "@vibe/layout";
-import Dropdown from "../../next/Dropdown/Dropdown";
+import Dropdown from "../Dropdown/Dropdown";
 import { DropdownChevronRight, DropdownChevronLeft } from "@vibe/icons";
 import styles from "./DatePickerHeader.module.scss";
 import { useMonthsOptionItems, useYearsOptionItems, type DatePickerDropdownItem } from "./datePickerHooks";
@@ -78,7 +77,7 @@ const DatePickerHeader: FC<DatePickerHeaderProps> = ({
       <Flex gap="small">
         <Dropdown
           className={styles.monthButtonDropdown}
-          ariaLabel={monthSelectionAriaLabel}
+          aria-label={monthSelectionAriaLabel}
           options={months}
           value={selectedMonth}
           onChange={onMonthSelect}
@@ -91,7 +90,7 @@ const DatePickerHeader: FC<DatePickerHeaderProps> = ({
         />
         <Dropdown
           className={styles.yearButtonDropdown}
-          ariaLabel={yearSelectionAriaLabel}
+          aria-label={yearSelectionAriaLabel}
           options={years}
           value={selectedYear}
           onChange={onYearSelect}
@@ -105,16 +104,16 @@ const DatePickerHeader: FC<DatePickerHeaderProps> = ({
       </Flex>
       <Flex>
         <IconButton
-          kind={Button.kinds.TERTIARY}
-          size={Button.sizes.SMALL}
-          ariaLabel={prevButtonAriaLabel}
+          kind="tertiary"
+          size="small"
+          aria-label={prevButtonAriaLabel}
           onClick={goToPreviousMonth}
           icon={DropdownChevronLeft}
         />
         <IconButton
-          kind={Button.kinds.TERTIARY}
-          size={Button.sizes.SMALL}
-          ariaLabel={nextButtonAriaLabel}
+          kind="tertiary"
+          size="small"
+          aria-label={nextButtonAriaLabel}
           onClick={goToNextMonth}
           icon={DropdownChevronRight}
         />
diff --git a/packages/core/src/components/DatePicker/DatePickerHeader/DatePickerHeader.module.scss b/packages/core/src/components/DatePicker/DatePickerHeader/DatePickerHeader.module.scss
deleted file mode 100644
index 92df0dc130..0000000000
--- a/packages/core/src/components/DatePicker/DatePickerHeader/DatePickerHeader.module.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-.datePickerHeader {
-  display: flex;
-  text-align: center;
-  justify-content: center;
-  align-items: center;
-
-  .button {
-    border: none;
-    padding: 0;
-    margin: 0;
-    background: none;
-    margin-left: 4px;
-    cursor: pointer;
-
-    .buttonContent {
-      border-radius: 50%;
-      width: 24px;
-      height: 24px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      font-size: 14px;
-      transition: all 0.1s ease;
-      color: var(--primary-text-on-secondary-color, true);
-      &:hover {
-        background-color: var(--primary-background-hover-on-secondary-color);
-        text-decoration: none;
-      }
-    }
-  }
-}
diff --git a/packages/core/src/components/DatePicker/DatePickerHeader/DatePickerHeader.tsx b/packages/core/src/components/DatePicker/DatePickerHeader/DatePickerHeader.tsx
deleted file mode 100644
index 3d3369f4f0..0000000000
--- a/packages/core/src/components/DatePicker/DatePickerHeader/DatePickerHeader.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import React from "react";
-import { DropdownChevronUp, DropdownChevronDown } from "@vibe/icons";
-import moment from "moment";
-import { type Moment } from "../types";
-import styles from "./DatePickerHeader.module.scss";
-import { Icon } from "@vibe/icon";
-
-export interface DatePickerHeaderProps {
-  /**
-   * The currently shown date.
-   */
-  currentDate: Moment;
-  /**
-   * If true, the month and year selection view is active.
-   */
-  isMonthYearSelection: boolean;
-  /**
-   * Callback fired when toggling the month and year picker.
-   */
-  onToggleMonthYearPicker: () => void;
-  /**
-   * If true, hides the navigation buttons.
-   */
-  hideNavigationKeys: boolean;
-  /**
-   * Test ID for testing purposes.
-   */
-  "data-testid"?: string;
-  /**
-   * The ARIA label for the toggle button.
-   */
-  ariaLabel?: string;
-}
-
-const DatePickerHeader = (props: DatePickerHeaderProps) => {
-  const {
-    currentDate,
-    isMonthYearSelection,
-    onToggleMonthYearPicker,
-    hideNavigationKeys,
-    "data-testid": dateTestId,
-    ariaLabel = "Toggle select year"
-  } = props;
-
-  const localedDated = moment(currentDate.valueOf());
-  const month = localedDated.format("MMMM");
-  const year = localedDated.format("YYYY");
-  const string = month + " " + year;
-  return (
-    <div className={styles.datePickerHeader}>
-      <div>{string}</div>
-      {!hideNavigationKeys && (
-        <button
-          data-testid={`${dateTestId}-year-toggle`}
-          type="button"
-          className={styles.button}
-          aria-label={ariaLabel}
-          onClick={onToggleMonthYearPicker}
-        >
-          <div className={styles.buttonContent}>
-            <Icon iconType="svg" icon={isMonthYearSelection ? DropdownChevronUp : DropdownChevronDown} iconSize={24} />
-          </div>
-        </button>
-      )}
-    </div>
-  );
-};
-
-export default DatePickerHeader;
diff --git a/packages/core/src/components/next/DatePicker/RangeDayContent.tsx b/packages/core/src/components/DatePicker/RangeDayContent.tsx
similarity index 100%
rename from packages/core/src/components/next/DatePicker/RangeDayContent.tsx
rename to packages/core/src/components/DatePicker/RangeDayContent.tsx
diff --git a/packages/core/src/components/next/DatePicker/SingleDayContent.tsx b/packages/core/src/components/DatePicker/SingleDayContent.tsx
similarity index 100%
rename from packages/core/src/components/next/DatePicker/SingleDayContent.tsx
rename to packages/core/src/components/DatePicker/SingleDayContent.tsx
diff --git a/packages/core/src/components/DatePicker/YearPicker/YearPicker.module.scss b/packages/core/src/components/DatePicker/YearPicker/YearPicker.module.scss
deleted file mode 100644
index 18fa926ff2..0000000000
--- a/packages/core/src/components/DatePicker/YearPicker/YearPicker.module.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-.monthYearPicker {
-  position: absolute;
-  top: 0px;
-  left: 0;
-  right: 0;
-  height: 100%;
-  z-index: 10;
-  pointer-events: none;
-
-  :global(.slide-down-appear) { /* stylelint-disable-line selector-class-pattern */
-    opacity: 0;
-  }
-
-  :global(.slide-down-appear-active) { /* stylelint-disable-line selector-class-pattern */
-    transition: opacity 0.4s ease;
-    opacity: 1;
-  }
-
-  .navigationWrapper {
-    position: absolute;
-    top: 21px;
-    pointer-events: all;
-    cursor: pointer;
-
-    &.navigationLeft {
-      left: 21px;
-    }
-
-    &.navigationRight {
-      right: 21px;
-    }
-  }
-
-  .pickerOptions {
-    text-align: center;
-    background-color: #fff;
-    background-color: var(--secondary-background-color);
-    position: absolute;
-    top: 55px;
-    pointer-events: all;
-
-    .pickerOption {
-      min-width: 66px;
-    }
-  }
-
-  :global(.CalendarYear--blocked) { /* stylelint-disable-line selector-class-pattern */
-    color: var(--disabled-text-color);
-    cursor: default;
-  }
-}
diff --git a/packages/core/src/components/DatePicker/YearPicker/YearPicker.tsx b/packages/core/src/components/DatePicker/YearPicker/YearPicker.tsx
deleted file mode 100644
index ec55cf2062..0000000000
--- a/packages/core/src/components/DatePicker/YearPicker/YearPicker.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import React, { useState } from "react";
-import moment from "moment";
-import { CSSTransition } from "react-transition-group";
-import classnames from "classnames";
-import { YEAR_FORMAT } from "../constants";
-import DateNavigationItemComponent from "../DateNavigationItem/DateNavigationItem";
-import { type Moment, Direction } from "../types";
-import styles from "./YearPicker.module.scss";
-import { calcNewYearsPage } from "../date-picker-utils";
-import YearsList from "./YearsList";
-
-const transitionOptions = {
-  classNames: "slide-down",
-  timeout: { enter: 400, exit: 400 }
-};
-
-const PAGE_SIZE = 18;
-const BUFFER_FROM_CURRENT_YEAR = 4;
-export interface YearPickerProps {
-  /**
-   * The currently selected date.
-   */
-  selectedDate?: Moment;
-  /**
-   * Function to determine if a year should be blocked.
-   */
-  isYearBlocked?: (year: number) => boolean;
-  /**
-   * Callback fired when changing the selected year.
-   */
-  changeCurrentDate: (date: Moment) => void;
-  /**
-   * Test ID for testing purposes.
-   */
-  "data-testid"?: string;
-}
-
-const YearPicker = ({ selectedDate, isYearBlocked, changeCurrentDate, "data-testid": dateTestId }: YearPickerProps) => {
-  const selectedYear = selectedDate ? selectedDate.format(YEAR_FORMAT) : moment().format(YEAR_FORMAT);
-
-  const [yearsToDisplay, setYearsToDisplay] = useState(
-    calcNewYearsPage(parseInt(selectedYear) - BUFFER_FROM_CURRENT_YEAR, PAGE_SIZE)
-  );
-
-  const onYearNavigationClick = (direction: Direction) => {
-    const firstYearInPage = yearsToDisplay[0];
-    let newYearsArray: number[] = [];
-    if (direction === Direction.prev) {
-      newYearsArray = calcNewYearsPage(firstYearInPage - PAGE_SIZE, PAGE_SIZE);
-    } else if (direction === Direction.next) {
-      newYearsArray = calcNewYearsPage(firstYearInPage + PAGE_SIZE, PAGE_SIZE);
-    }
-    setYearsToDisplay(newYearsArray);
-  };
-
-  const onYearSelect = (year: number) => {
-    changeCurrentDate(moment().year(year));
-  };
-
-  return (
-    <div data-testid={`${dateTestId}-year-picker`} className={styles.monthYearPicker}>
-      <div className={classnames(styles.navigationWrapper, styles.navigationLeft)}>
-        <DateNavigationItemComponent kind={Direction.prev} onClick={() => onYearNavigationClick(Direction.prev)} />
-      </div>
-      <div className={classnames(styles.navigationWrapper, styles.navigationRight)}>
-        <DateNavigationItemComponent kind={Direction.next} onClick={() => onYearNavigationClick(Direction.next)} />
-      </div>
-      <CSSTransition {...transitionOptions} in appear>
-        <div className={styles.pickerOptions}>
-          <YearsList
-            selectedYear={selectedYear}
-            onSelect={onYearSelect}
-            yearsItems={yearsToDisplay}
-            isYearBlocked={isYearBlocked}
-          />
-        </div>
-      </CSSTransition>
-    </div>
-  );
-};
-
-export default YearPicker;
diff --git a/packages/core/src/components/DatePicker/YearPicker/YearsList.tsx b/packages/core/src/components/DatePicker/YearPicker/YearsList.tsx
deleted file mode 100644
index 0999b088fb..0000000000
--- a/packages/core/src/components/DatePicker/YearPicker/YearsList.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from "react";
-import { Button } from "@vibe/button";
-import styles from "./YearPicker.module.scss";
-
-const NOOP = () => {};
-
-export interface YearsListProps {
-  /**
-   * The list of years to display.
-   */
-  yearsItems: number[];
-  /**
-   * Function to determine if a year should be blocked.
-   */
-  isYearBlocked?: (year: number) => boolean;
-  /**
-   * Callback fired when a year is selected.
-   */
-  onSelect: (year: number) => void;
-  /**
-   * The currently selected year.
-   */
-  selectedYear: string;
-}
-
-const YearsList = ({ yearsItems, isYearBlocked, onSelect, selectedYear }: YearsListProps) => {
-  return (
-    <>
-      {yearsItems.map(currYear => {
-        const shouldBlockYear = isYearBlocked && isYearBlocked(currYear);
-        const onClick = !shouldBlockYear ? () => onSelect(currYear) : NOOP;
-        const kind = parseInt(selectedYear, 10) === currYear ? Button?.kinds?.PRIMARY : Button?.kinds?.TERTIARY;
-
-        return (
-          <Button
-            className={styles.pickerOption}
-            key={currYear}
-            kind={kind}
-            onClick={onClick}
-            disabled={shouldBlockYear}
-            marginLeft
-            marginRight
-          >
-            {currYear.toString()}
-          </Button>
-        );
-      })}
-    </>
-  );
-};
-
-export default YearsList;
diff --git a/packages/core/src/components/DatePicker/__tests__/DatePicker.test.tsx b/packages/core/src/components/DatePicker/__tests__/DatePicker.test.tsx
index 030da72fe1..9213058d1e 100644
--- a/packages/core/src/components/DatePicker/__tests__/DatePicker.test.tsx
+++ b/packages/core/src/components/DatePicker/__tests__/DatePicker.test.tsx
@@ -1,137 +1,132 @@
-import { vi, beforeEach, afterEach, describe, it, expect, type MockInstance } from "vitest";
+import { vi, afterEach, describe, it, expect } from "vitest";
 import React from "react";
-import { fireEvent, render, waitFor } from "@testing-library/react";
+import { render, cleanup, screen, fireEvent, waitFor } from "@testing-library/react";
+import { ja } from "date-fns/locale";
 import DatePicker from "../DatePicker";
-import moment, { type Moment } from "moment";
-import { type RangeDate } from "../types";
 
-const DATE_FORMAT = "DD/MM/YYYY";
+const renderDatePicker = props => {
+  return render(<DatePicker {...props} />);
+};
 
-export function getFirstDayOfMonthElement(container: HTMLElement) {
-  const days = container.getElementsByClassName("CalendarDay");
-  return days && days.length ? days[0] : null;
-}
+describe("DatePicker tests", () => {
+  afterEach(() => {
+    cleanup();
+  });
 
-export function getNextWeekFirstDayElement(pivotElement: HTMLElement) {
-  const nextWeek = pivotElement.parentElement.nextElementSibling;
-  const days = nextWeek.getElementsByClassName("CalendarDay");
-  return days && days.length ? days[0] : null;
-}
+  describe("snapshot tests", () => {
+    it("renders correctly", () => {
+      const { container } = renderDatePicker({ date: new Date(1992, 2, 17) });
+      expect(container).toMatchSnapshot();
+    });
+  });
 
-describe("DatePicker", () => {
-  let dateNowSpy: MockInstance;
+  it("should render correctly with date - 3/17/92", () => {
+    renderDatePicker({ date: new Date(1992, 2, 17) });
 
-  beforeEach(() => {
-    dateNowSpy = vi.spyOn(Date, "now").mockImplementation(() => new Date("2023-05-01").getTime());
-  });
+    const selectedDay = screen.getByRole("gridcell", { name: "17" });
+    expect(selectedDay).toHaveAttribute("aria-selected", "true");
 
-  afterEach(() => {
-    dateNowSpy.mockRestore();
-  });
+    // Check that Mar is displayed in the month selector (abbreviated form)
+    expect(screen.getByText("Mar")).toBeInTheDocument();
 
-  it("should call onPickDate date clicked value", () => {
-    const onSaveMock = vi.fn();
-    const { container } = render(
-      <DatePicker
-        onPickDate={() => {
-          onSaveMock();
-        }}
-      />
-    );
-
-    const element = container.querySelector(".CalendarDay");
-    fireEvent.click(element);
-    expect(onSaveMock).toHaveBeenCalledTimes(1);
+    // Check that 1992 is displayed in the year selector
+    expect(screen.getByText("1992")).toBeInTheDocument();
   });
 
-  it("should call onPickDate with today's date", () => {
-    let selectedDate: Moment;
-    const { container } = render(
-      <DatePicker
-        onPickDate={date => {
-          selectedDate = date as Moment;
-        }}
-      />
-    );
-    const today = moment();
-    const element = container.querySelector(".CalendarDay__today");
-
-    fireEvent.click(element);
-
-    expect(today.format(DATE_FORMAT)).toBe(selectedDate.format(DATE_FORMAT));
-  });
+  it("should show date", () => {
+    const date = new Date(1992, 2, 17);
+    renderDatePicker({ date });
 
-  it("should call onPickDate with range date", () => {
-    const selectedRange: RangeDate = { startDate: null, endDate: null };
-    const { container } = render(
-      <DatePicker
-        range
-        onPickDate={(range: RangeDate) => {
-          selectedRange.startDate = range.startDate || selectedRange.startDate;
-          selectedRange.endDate = range.endDate || selectedRange.endDate;
-        }}
-      />
-    );
-
-    const today = moment();
-    const tomorrow = moment().add(1, "days");
-    const todayElement = container.querySelector(".CalendarDay__today") as HTMLElement;
-    const tomorrowElement = todayElement.nextElementSibling;
-
-    fireEvent.click(todayElement);
-    fireEvent.click(tomorrowElement);
-
-    expect(today.format(DATE_FORMAT)).toBe(selectedRange.startDate.format(DATE_FORMAT));
-    expect(tomorrow.format(DATE_FORMAT)).toBe(selectedRange.endDate.format(DATE_FORMAT));
+    // Check that day 17 is selected
+    const selectedDay = screen.getByRole("gridcell", { name: "17" });
+    expect(selectedDay).toHaveAttribute("aria-selected", "true");
+
+    // Check that Mar and 1992 are displayed
+    expect(screen.getByText("Mar")).toBeInTheDocument();
+    expect(screen.getByText("1992")).toBeInTheDocument();
   });
 
-  it("should render 2 months", () => {
-    const { container } = render(<DatePicker range numberOfMonths={2} />);
-    const monthsElements = container.getElementsByClassName("CalendarMonth");
+  it("should change day of date", () => {
+    const date = new Date(1992, 2, 17);
+    const onDateChange = vi.fn();
+    renderDatePicker({ date, onDateChange });
+
+    // Click on day 20
+    const day20 = screen.getByRole("gridcell", { name: "20" });
+    fireEvent.click(day20);
 
-    expect(monthsElements.length).toBe(4);
+    // Verify callback was called with the new date
+    expect(onDateChange).toHaveBeenCalledWith(new Date(1992, 2, 20));
   });
 
-  it("Should open an year selection dropdown", () => {
-    const { container } = render(<DatePicker data-testid="date-picker" />);
-    const toggleButtonElement = container.querySelector("button[data-testid='date-picker-year-toggle']");
+  it("should open months picker and change displayed month", async () => {
+    const date = new Date(1992, 2, 17);
+    renderDatePicker({ date });
+
+    // Click on the month combobox to open dropdown
+    const monthCombobox = screen.getByRole("combobox", { name: "Month" });
+    fireEvent.click(monthCombobox);
+
+    // Wait for dropdown to open and click on April
+    await waitFor(() => {
+      expect(screen.getByRole("option", { name: "Apr" })).toBeInTheDocument();
+    });
 
-    fireEvent.click(toggleButtonElement);
+    const aprilOption = screen.getByRole("option", { name: "Apr" });
+    fireEvent.click(aprilOption);
 
-    const yearSelectionElement = container.querySelector("div[data-testid='date-picker-year-picker']");
-    expect(yearSelectionElement).not.toBe(null);
+    // Verify the month changed to Apr (abbreviated) and year stayed the same
+    await waitFor(() => {
+      expect(screen.getByText("Apr")).toBeInTheDocument();
+      expect(screen.getByText("1992")).toBeInTheDocument();
+    });
   });
 
-  it("Should display new dates according to year selection", async () => {
-    const dateSelected = moment("2023-05-01");
-    const { container } = render(<DatePicker date={dateSelected} data-testid="date-picker" />);
-    const toggleButtonElement = container.querySelector("button[data-testid='date-picker-year-toggle']");
+  it("should open years picker and change displayed year", async () => {
+    const date = new Date(1992, 2, 17);
+    renderDatePicker({ date });
 
-    fireEvent.click(toggleButtonElement);
+    // Click on the year combobox to open dropdown
+    const yearCombobox = screen.getByRole("combobox", { name: "Year" });
+    fireEvent.click(yearCombobox);
 
-    const newYear = await waitFor(() => container.querySelector(".pickerOption"));
-    fireEvent.click(newYear);
+    // Wait for dropdown to open and click on 1993
+    await waitFor(() => {
+      expect(screen.getByRole("option", { name: "1993" })).toBeInTheDocument();
+    });
 
-    const newDay = await waitFor(() => container.querySelector(".CalendarDay_1"));
-    expect(newDay).toBeInTheDocument();
-    expect(newDay.getAttribute("aria-label")).toContain(newYear.innerHTML);
+    const year1993Option = screen.getByRole("option", { name: "1993" });
+    fireEvent.click(year1993Option);
+
+    // Verify the year changed to 1993 and month stayed the same (Mar)
+    await waitFor(() => {
+      expect(screen.getByText("1993")).toBeInTheDocument();
+      expect(screen.getByText("Mar")).toBeInTheDocument();
+    });
   });
 
-  it("should not crash when onPickDate is not provided and a date is clicked", () => {
-    const { container } = render(<DatePicker />);
+  it("should support disabled days", () => {
+    const date = new Date(1992, 2, 17);
+    renderDatePicker({ date, isDateDisabled: d => d.getDate() === 18 });
+
+    // Verify day 18 is disabled
+    const day18 = screen.getByRole("gridcell", { name: "18" });
+    expect(day18).toHaveAttribute("disabled");
+    expect(day18).toHaveClass("datePickerDayDisabled");
+
+    // Try to click on day 18 (should not work)
+    fireEvent.click(day18);
 
-    const element = container.querySelector(".CalendarDay");
-    expect(() => {
-      fireEvent.click(element);
-    }).not.toThrow();
+    // Verify day 17 is still selected
+    const selectedDay = screen.getByRole("gridcell", { name: "17" });
+    expect(selectedDay).toHaveAttribute("aria-selected", "true");
   });
 
-  it("should not crash when onPickDate is not provided in range mode and a date is clicked", () => {
-    const { container } = render(<DatePicker range />);
+  it("should support locale", () => {
+    const date = new Date(1992, 2, 17);
+    renderDatePicker({ date, locale: ja });
 
-    const element = container.querySelector(".CalendarDay");
-    expect(() => {
-      fireEvent.click(element);
-    }).not.toThrow();
+    // Check that the month is displayed in Japanese
+    expect(screen.getByText("3月")).toBeInTheDocument();
   });
 });
diff --git a/packages/core/src/components/next/DatePicker/__tests__/__snapshots__/DatePicker.test.jsx.snap b/packages/core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.jsx.snap
similarity index 99%
rename from packages/core/src/components/next/DatePicker/__tests__/__snapshots__/DatePicker.test.jsx.snap
rename to packages/core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.jsx.snap
index 46834f2cb3..ee174204e3 100644
--- a/packages/core/src/components/next/DatePicker/__tests__/__snapshots__/DatePicker.test.jsx.snap
+++ b/packages/core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.jsx.snap
@@ -20,7 +20,7 @@ exports[`DatePicker tests > snapshot tests > renders correctly 1`] = `
           >
             <div
               class="container directionRow justifyStart alignCenter"
-              style="gap: var(--spacing-small);"
+              style="gap: var(--space-8);"
             >
               <div
                 class="outerWrapper"
diff --git a/packages/core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap b/packages/core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap
new file mode 100644
index 0000000000..ee174204e3
--- /dev/null
+++ b/packages/core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap
@@ -0,0 +1,1093 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`DatePicker tests > snapshot tests > renders correctly 1`] = `
+<div>
+  <div
+    class="datePicker"
+    data-vibe="DatePicker"
+  >
+    <div
+      class="rdp "
+    >
+      <div
+        class="datePickerMonths"
+      >
+        <div
+          class="rdp-month rdp-caption_start rdp-caption_end"
+        >
+          <div
+            class="datePickerHeader"
+          >
+            <div
+              class="container directionRow justifyStart alignCenter"
+              style="gap: var(--space-8);"
+            >
+              <div
+                class="outerWrapper"
+              >
+                <div
+                  aria-label="Month"
+                  class="wrapper borderless monthButtonDropdown"
+                  data-testid="dropdown"
+                  data-vibe="Dropdown"
+                >
+                  <div
+                    class=""
+                  >
+                    <div
+                      class="container directionRow justifySpaceBetween alignCenter"
+                    >
+                      <div
+                        aria-activedescendant=""
+                        aria-controls="downshift-0-menu"
+                        aria-expanded="false"
+                        aria-haspopup="dialog"
+                        aria-label="Month"
+                        class="triggerWrapper small"
+                        id="downshift-0-toggle-button"
+                        role="combobox"
+                        tabindex="0"
+                      >
+                        <div
+                          class="selectedItem small"
+                        >
+                          <div
+                            aria-selected="false"
+                            class="wrapper readOnly small"
+                          >
+                            Mar
+                          </div>
+                        </div>
+                      </div>
+                      <div>
+                        <div
+                          class="container directionRow justifyStart alignCenter actionsWrapper"
+                        >
+                          <button
+                            aria-busy="false"
+                            aria-controls="downshift-0-menu"
+                            aria-disabled="false"
+                            aria-expanded="false"
+                            aria-labelledby="downshift-0-menu"
+                            class="button sizeMedium kindTertiary colorPrimary noSidePadding"
+                            data-testid="icon-button"
+                            data-vibe="Button"
+                            style="justify-content: center; align-items: center; padding: 0px; width: 24px; height: 24px;"
+                            tabindex="-1"
+                            type="button"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              class="icon noFocusStyle"
+                              data-testid="icon"
+                              data-vibe="Icon"
+                              fill="currentColor"
+                              height="16"
+                              viewBox="0 0 20 20"
+                              width="16"
+                            >
+                              <path
+                                d="M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z"
+                              />
+                            </svg>
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="outerWrapper"
+              >
+                <div
+                  aria-label="Year"
+                  class="wrapper borderless yearButtonDropdown"
+                  data-testid="dropdown"
+                  data-vibe="Dropdown"
+                >
+                  <div
+                    class=""
+                  >
+                    <div
+                      class="container directionRow justifySpaceBetween alignCenter"
+                    >
+                      <div
+                        aria-activedescendant=""
+                        aria-controls="downshift-1-menu"
+                        aria-expanded="false"
+                        aria-haspopup="dialog"
+                        aria-label="Year"
+                        class="triggerWrapper small"
+                        id="downshift-1-toggle-button"
+                        role="combobox"
+                        tabindex="0"
+                      >
+                        <div
+                          class="selectedItem small"
+                        >
+                          <div
+                            aria-selected="false"
+                            class="wrapper readOnly small"
+                          >
+                            1992
+                          </div>
+                        </div>
+                      </div>
+                      <div>
+                        <div
+                          class="container directionRow justifyStart alignCenter actionsWrapper"
+                        >
+                          <button
+                            aria-busy="false"
+                            aria-controls="downshift-1-menu"
+                            aria-disabled="false"
+                            aria-expanded="false"
+                            aria-labelledby="downshift-1-menu"
+                            class="button sizeMedium kindTertiary colorPrimary noSidePadding"
+                            data-testid="icon-button"
+                            data-vibe="Button"
+                            style="justify-content: center; align-items: center; padding: 0px; width: 24px; height: 24px;"
+                            tabindex="-1"
+                            type="button"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              class="icon noFocusStyle"
+                              data-testid="icon"
+                              data-vibe="Icon"
+                              fill="currentColor"
+                              height="16"
+                              viewBox="0 0 20 20"
+                              width="16"
+                            >
+                              <path
+                                d="M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z"
+                              />
+                            </svg>
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="container directionRow justifyStart alignCenter"
+            >
+              <span
+                class="referenceWrapper"
+              >
+                <button
+                  aria-busy="false"
+                  aria-disabled="false"
+                  aria-label="Previous"
+                  class="button sizeMedium kindTertiary colorPrimary noSidePadding"
+                  data-testid="icon-button"
+                  data-vibe="Button"
+                  style="justify-content: center; align-items: center; padding: 0px; width: 32px; height: 32px;"
+                  type="button"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="icon noFocusStyle"
+                    data-testid="icon"
+                    data-vibe="Icon"
+                    fill="currentColor"
+                    height="20"
+                    viewBox="0 0 20 20"
+                    width="20"
+                  >
+                    <path
+                      d="M7.24 9.444a.77.77 0 0 0 0 1.116l4.363 4.21a.84.84 0 0 0 1.157 0 .77.77 0 0 0 0-1.116l-3.785-3.652 3.785-3.653a.77.77 0 0 0 0-1.116.84.84 0 0 0-1.157 0L7.24 9.443Z"
+                    />
+                  </svg>
+                </button>
+              </span>
+              <span
+                class="referenceWrapper"
+              >
+                <button
+                  aria-busy="false"
+                  aria-disabled="false"
+                  aria-label="Next"
+                  class="button sizeMedium kindTertiary colorPrimary noSidePadding"
+                  data-testid="icon-button"
+                  data-vibe="Button"
+                  style="justify-content: center; align-items: center; padding: 0px; width: 32px; height: 32px;"
+                  type="button"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="icon noFocusStyle"
+                    data-testid="icon"
+                    data-vibe="Icon"
+                    fill="currentColor"
+                    height="20"
+                    viewBox="0 0 20 20"
+                    width="20"
+                  >
+                    <path
+                      d="M12.76 10.56a.77.77 0 0 0 0-1.116L8.397 5.233a.84.84 0 0 0-1.157 0 .77.77 0 0 0 0 1.116l3.785 3.653-3.785 3.652a.77.77 0 0 0 0 1.117.84.84 0 0 0 1.157 0l4.363-4.211Z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </button>
+              </span>
+            </div>
+          </div>
+          <table
+            aria-labelledby="react-day-picker-1"
+            class="datePickerTable"
+            role="grid"
+          >
+            <thead
+              class="datePickerHead"
+            >
+              <tr
+                class="rdp-head_row"
+              >
+                <th
+                  aria-label="Sunday"
+                  class="rdp-head_cell"
+                  scope="col"
+                >
+                  Su
+                </th>
+                <th
+                  aria-label="Monday"
+                  class="rdp-head_cell"
+                  scope="col"
+                >
+                  Mo
+                </th>
+                <th
+                  aria-label="Tuesday"
+                  class="rdp-head_cell"
+                  scope="col"
+                >
+                  Tu
+                </th>
+                <th
+                  aria-label="Wednesday"
+                  class="rdp-head_cell"
+                  scope="col"
+                >
+                  We
+                </th>
+                <th
+                  aria-label="Thursday"
+                  class="rdp-head_cell"
+                  scope="col"
+                >
+                  Th
+                </th>
+                <th
+                  aria-label="Friday"
+                  class="rdp-head_cell"
+                  scope="col"
+                >
+                  Fr
+                </th>
+                <th
+                  aria-label="Saturday"
+                  class="rdp-head_cell"
+                  scope="col"
+                >
+                  Sa
+                </th>
+              </tr>
+            </thead>
+            <tbody
+              class="datePickerBody"
+            >
+              <tr
+                class="rdp-row"
+              >
+                <td
+                  class="rdp-cell"
+                  role="presentation"
+                >
+                  <button
+                    class="rdp-button_reset rdp-button datePickerDay"
+                    name="day"
+                    role="gridcell"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <div
+                      class="datePickerDayContent"
+                    >
+                      1
+                    </div>
+                  </button>
+                </td>
+                <td
+                  class="rdp-cell"
+                  role="presentation"
+                >
+                  <button
+                    class="rdp-button_reset rdp-button datePickerDay"
+                    name="day"
+                    role="gridcell"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <div
+                      class="datePickerDayContent"
+                    >
+                      2
+                    </div>
+                  </button>
+                </td>
+                <td
+                  class="rdp-cell"
+                  role="presentation"
+                >
+                  <button
+                    class="rdp-button_reset rdp-button datePickerDay"
+                    name="day"
+                    role="gridcell"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <div
+                      class="datePickerDayContent"
+                    >
+                      3
+                    </div>
+                  </button>
+                </td>
+                <td
+                  class="rdp-cell"
+                  role="presentation"
+                >
+                  <button
+                    class="rdp-button_reset rdp-button datePickerDay"
+                    name="day"
+                    role="gridcell"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <div
+                      class="datePickerDayContent"
+                    >
+                      4
+                    </div>
+                  </button>
+                </td>
+                <td
+                  class="rdp-cell"
+                  role="presentation"
+                >
+                  <button
+                    class="rdp-button_reset rdp-button datePickerDay"
+                    name="day"
+                    role="gridcell"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <div
+                      class="datePickerDayContent"
+                    >
+                      5
+                    </div>
+                  </button>
+                </td>
+                <td
+                  class="rdp-cell"
+                  role="presentation"
+                >
+                  <button
+                    class="rdp-button_reset rdp-button datePickerDay"
+                    name="day"
+                    role="gridcell"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <div
+                      class="datePickerDayContent"
+                    >
+                      6
+                    </div>
+                  </button>
+                </td>
+                <td
+                  class="rdp-cell"
+                  role="presentation"
+                >
+                  <button
+                    class="rdp-button_reset rdp-button datePickerDay"
+                    name="day"
+                    role="gridcell"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <div
+                      class="datePickerDayContent"
+                    >
+                      7
+                    </div>
+                  </button>
+                </td>
+              </tr>
+              <tr
+                class="rdp-row"
+              >
+                <td
+                  class="rdp-cell"
+                  role="presentation"
+                >
+                  <button
+                    class="rdp-button_reset rdp-button datePickerDay"
+                    name="day"
+                    role="gridcell"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <div
+                      class="datePickerDayContent"
+                    >
+                      8
+                    </div>
+                  </button>
+                </td>
+                <td
+                  class="rdp-cell"
+                  role="presentation"
+                >
+                  <button
+                    class="rdp-button_reset rdp-button datePickerDay"
+                    name="day"
+                    role="gridcell"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <div
+                      class="datePickerDayContent"
+                    >
+                      9
+                    </div>
+                  </button>
+                </td>
+                <td
+                  class="rdp-cell"
+                  role="presentation"
+                >
+                  <button
+                    class="rdp-button_reset rdp-button datePickerDay"
+                    name="day"
+                    role="gridcell"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <div
+                      class="datePickerDayContent"
+                    >
+                      10
+                    </div>
+                  </button>
+                </td>
+                <td
+                  class="rdp-cell"
+                  role="presentation"
+                >
+                  <button
+                    class="rdp-button_reset rdp-button datePickerDay"
+                    name="day"
+                    role="gridcell"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <div
+                      class="datePickerDayContent"
+                    >
+                      11
+                    </div>
+                  </button>
+                </td>
+                <td
+                  class="rdp-cell"
+                  role="presentation"
+                >
+                  <button
+                    class="rdp-button_reset rdp-button datePickerDay"
+                    name="day"
+                    role="gridcell"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <div
+                      class="datePickerDayContent"
+                    >
+                      12
+                    </div>
+                  </button>
+                </td>
+                <td
+                  class="rdp-cell"
+                  role="presentation"
+                >
+                  <button
+                    class="rdp-button_reset rdp-button datePickerDay"
+                    name="day"
+                    role="gridcell"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <div
+                      class="datePickerDayContent"
+                    >
+                      13
+                    </div>
+                  </button>
+                </td>
+                <td
+                  class="rdp-cell"
+                  role="presentation"
+                >
+                  <button
+                    class="rdp-button_reset rdp-button datePickerDay"
+                    name="day"
+                    role="gridcell"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <div
+                      class="datePickerDayContent"
+                    >
+                      14
+                    </div>
+                  </button>
+                </td>
+              </tr>
+              <tr
+                class="rdp-row"
+              >
+                <td
+                  class="rdp-cell"
+                  role="presentation"
+                >
+                  <button
+                    class="rdp-button_reset rdp-button datePickerDay"
+                    name="day"
+                    role="gridcell"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <div
+                      class="datePickerDayContent"
+                    >
+                      15
+                    </div>
+                  </button>
+                </td>
+                <td
+                  class="rdp-cell"
+                  role="presentation"
+                >
+                  <button
+                    class="rdp-button_reset rdp-button datePickerDay"
+                    name="day"
+                    role="gridcell"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <div
+                      class="datePickerDayContent"
+                    >
+                      16
+                    </div>
+                  </button>
+                </td>
+                <td
+                  class="rdp-cell"
+                  role="presentation"
+                >
+                  <button
+                    aria-selected="true"
+                    class="rdp-button_reset rdp-button datePickerDay datePickerDaySelected"
+                    name="day"
+                    role="gridcell"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="datePickerDayContent"
+                    >
+                      17
+                    </div>
+                  </button>
+                </td>
+                <td
+                  class="rdp-cell"
+                  role="presentation"
+                >
+                  <button
+                    class="rdp-button_reset rdp-button datePickerDay"
+                    name="day"
+                    role="gridcell"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <div
+                      class="datePickerDayContent"
+                    >
+                      18
+                    </div>
+                  </button>
+                </td>
+                <td
+                  class="rdp-cell"
+                  role="presentation"
+                >
+                  <button
+                    class="rdp-button_reset rdp-button datePickerDay"
+                    name="day"
+                    role="gridcell"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <div
+                      class="datePickerDayContent"
+                    >
+                      19
+                    </div>
+                  </button>
+                </td>
+                <td
+                  class="rdp-cell"
+                  role="presentation"
+                >
+                  <button
+                    class="rdp-button_reset rdp-button datePickerDay"
+                    name="day"
+                    role="gridcell"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <div
+                      class="datePickerDayContent"
+                    >
+                      20
+                    </div>
+                  </button>
+                </td>
+                <td
+                  class="rdp-cell"
+                  role="presentation"
+                >
+                  <button
+                    class="rdp-button_reset rdp-button datePickerDay"
+                    name="day"
+                    role="gridcell"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <div
+                      class="datePickerDayContent"
+                    >
+                      21
+                    </div>
+                  </button>
+                </td>
+              </tr>
+              <tr
+                class="rdp-row"
+              >
+                <td
+                  class="rdp-cell"
+                  role="presentation"
+                >
+                  <button
+                    class="rdp-button_reset rdp-button datePickerDay"
+                    name="day"
+                    role="gridcell"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <div
+                      class="datePickerDayContent"
+                    >
+                      22
+                    </div>
+                  </button>
+                </td>
+                <td
+                  class="rdp-cell"
+                  role="presentation"
+                >
+                  <button
+                    class="rdp-button_reset rdp-button datePickerDay"
+                    name="day"
+                    role="gridcell"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <div
+                      class="datePickerDayContent"
+                    >
+                      23
+                    </div>
+                  </button>
+                </td>
+                <td
+                  class="rdp-cell"
+                  role="presentation"
+                >
+                  <button
+                    class="rdp-button_reset rdp-button datePickerDay"
+                    name="day"
+                    role="gridcell"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <div
+                      class="datePickerDayContent"
+                    >
+                      24
+                    </div>
+                  </button>
+                </td>
+                <td
+                  class="rdp-cell"
+                  role="presentation"
+                >
+                  <button
+                    class="rdp-button_reset rdp-button datePickerDay"
+                    name="day"
+                    role="gridcell"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <div
+                      class="datePickerDayContent"
+                    >
+                      25
+                    </div>
+                  </button>
+                </td>
+                <td
+                  class="rdp-cell"
+                  role="presentation"
+                >
+                  <button
+                    class="rdp-button_reset rdp-button datePickerDay"
+                    name="day"
+                    role="gridcell"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <div
+                      class="datePickerDayContent"
+                    >
+                      26
+                    </div>
+                  </button>
+                </td>
+                <td
+                  class="rdp-cell"
+                  role="presentation"
+                >
+                  <button
+                    class="rdp-button_reset rdp-button datePickerDay"
+                    name="day"
+                    role="gridcell"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <div
+                      class="datePickerDayContent"
+                    >
+                      27
+                    </div>
+                  </button>
+                </td>
+                <td
+                  class="rdp-cell"
+                  role="presentation"
+                >
+                  <button
+                    class="rdp-button_reset rdp-button datePickerDay"
+                    name="day"
+                    role="gridcell"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <div
+                      class="datePickerDayContent"
+                    >
+                      28
+                    </div>
+                  </button>
+                </td>
+              </tr>
+              <tr
+                class="rdp-row"
+              >
+                <td
+                  class="rdp-cell"
+                  role="presentation"
+                >
+                  <button
+                    class="rdp-button_reset rdp-button datePickerDay"
+                    name="day"
+                    role="gridcell"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <div
+                      class="datePickerDayContent"
+                    >
+                      29
+                    </div>
+                  </button>
+                </td>
+                <td
+                  class="rdp-cell"
+                  role="presentation"
+                >
+                  <button
+                    class="rdp-button_reset rdp-button datePickerDay"
+                    name="day"
+                    role="gridcell"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <div
+                      class="datePickerDayContent"
+                    >
+                      30
+                    </div>
+                  </button>
+                </td>
+                <td
+                  class="rdp-cell"
+                  role="presentation"
+                >
+                  <button
+                    class="rdp-button_reset rdp-button datePickerDay"
+                    name="day"
+                    role="gridcell"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <div
+                      class="datePickerDayContent"
+                    >
+                      31
+                    </div>
+                  </button>
+                </td>
+                <td
+                  class="rdp-cell"
+                  role="presentation"
+                >
+                  <button
+                    class="rdp-button_reset rdp-button datePickerDay datePickerDayOutside"
+                    name="day"
+                    role="gridcell"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <div
+                      class="datePickerDayContent"
+                    >
+                      1
+                    </div>
+                  </button>
+                </td>
+                <td
+                  class="rdp-cell"
+                  role="presentation"
+                >
+                  <button
+                    class="rdp-button_reset rdp-button datePickerDay datePickerDayOutside"
+                    name="day"
+                    role="gridcell"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <div
+                      class="datePickerDayContent"
+                    >
+                      2
+                    </div>
+                  </button>
+                </td>
+                <td
+                  class="rdp-cell"
+                  role="presentation"
+                >
+                  <button
+                    class="rdp-button_reset rdp-button datePickerDay datePickerDayOutside"
+                    name="day"
+                    role="gridcell"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <div
+                      class="datePickerDayContent"
+                    >
+                      3
+                    </div>
+                  </button>
+                </td>
+                <td
+                  class="rdp-cell"
+                  role="presentation"
+                >
+                  <button
+                    class="rdp-button_reset rdp-button datePickerDay datePickerDayOutside"
+                    name="day"
+                    role="gridcell"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <div
+                      class="datePickerDayContent"
+                    >
+                      4
+                    </div>
+                  </button>
+                </td>
+              </tr>
+              <tr
+                class="rdp-row"
+              >
+                <td
+                  class="rdp-cell"
+                  role="presentation"
+                >
+                  <button
+                    class="rdp-button_reset rdp-button datePickerDay datePickerDayOutside"
+                    name="day"
+                    role="gridcell"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <div
+                      class="datePickerDayContent"
+                    >
+                      5
+                    </div>
+                  </button>
+                </td>
+                <td
+                  class="rdp-cell"
+                  role="presentation"
+                >
+                  <button
+                    class="rdp-button_reset rdp-button datePickerDay datePickerDayOutside"
+                    name="day"
+                    role="gridcell"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <div
+                      class="datePickerDayContent"
+                    >
+                      6
+                    </div>
+                  </button>
+                </td>
+                <td
+                  class="rdp-cell"
+                  role="presentation"
+                >
+                  <button
+                    class="rdp-button_reset rdp-button datePickerDay datePickerDayOutside"
+                    name="day"
+                    role="gridcell"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <div
+                      class="datePickerDayContent"
+                    >
+                      7
+                    </div>
+                  </button>
+                </td>
+                <td
+                  class="rdp-cell"
+                  role="presentation"
+                >
+                  <button
+                    class="rdp-button_reset rdp-button datePickerDay datePickerDayOutside"
+                    name="day"
+                    role="gridcell"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <div
+                      class="datePickerDayContent"
+                    >
+                      8
+                    </div>
+                  </button>
+                </td>
+                <td
+                  class="rdp-cell"
+                  role="presentation"
+                >
+                  <button
+                    class="rdp-button_reset rdp-button datePickerDay datePickerDayOutside"
+                    name="day"
+                    role="gridcell"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <div
+                      class="datePickerDayContent"
+                    >
+                      9
+                    </div>
+                  </button>
+                </td>
+                <td
+                  class="rdp-cell"
+                  role="presentation"
+                >
+                  <button
+                    class="rdp-button_reset rdp-button datePickerDay datePickerDayOutside"
+                    name="day"
+                    role="gridcell"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <div
+                      class="datePickerDayContent"
+                    >
+                      10
+                    </div>
+                  </button>
+                </td>
+                <td
+                  class="rdp-cell"
+                  role="presentation"
+                >
+                  <button
+                    class="rdp-button_reset rdp-button datePickerDay datePickerDayOutside"
+                    name="day"
+                    role="gridcell"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <div
+                      class="datePickerDayContent"
+                    >
+                      11
+                    </div>
+                  </button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/core/src/components/next/DatePicker/__tests__/utils.test.js b/packages/core/src/components/DatePicker/__tests__/utils.test.ts
similarity index 100%
rename from packages/core/src/components/next/DatePicker/__tests__/utils.test.js
rename to packages/core/src/components/DatePicker/__tests__/utils.test.ts
diff --git a/packages/core/src/components/DatePicker/constants.ts b/packages/core/src/components/DatePicker/constants.ts
deleted file mode 100644
index aaadab08f7..0000000000
--- a/packages/core/src/components/DatePicker/constants.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export const YEAR_FORMAT = "YYYY";
-export const MONTH_FORMAT = "MMMM";
-export const DAY_SIZE = 40;
-export const WEEK_FIRST_DAY = 1;
diff --git a/packages/core/src/components/DatePicker/date-picker-utils.ts b/packages/core/src/components/DatePicker/date-picker-utils.ts
deleted file mode 100644
index 6293aefad9..0000000000
--- a/packages/core/src/components/DatePicker/date-picker-utils.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-const times = (n: number) => {
-  if (n <= 0) return [];
-  return [...Array(Math.floor(n)).keys()];
-};
-
-export const calcNewYearsPage = (firstYearInPage: number, pageSize: number) => {
-  return times(pageSize).map(n => firstYearInPage + n);
-};
diff --git a/packages/core/src/components/next/DatePicker/datePickerHooks.tsx b/packages/core/src/components/DatePicker/datePickerHooks.tsx
similarity index 100%
rename from packages/core/src/components/next/DatePicker/datePickerHooks.tsx
rename to packages/core/src/components/DatePicker/datePickerHooks.tsx
diff --git a/packages/core/src/components/DatePicker/external_datepicker.scss b/packages/core/src/components/DatePicker/external_datepicker.scss
deleted file mode 100644
index 26bdce5580..0000000000
--- a/packages/core/src/components/DatePicker/external_datepicker.scss
+++ /dev/null
@@ -1,887 +0,0 @@
-/*  stylelint-disable scss/no-global-function-names, selector-class-pattern */
-.PresetDateRangePicker_panel {
-  padding: 0 22px 11px;
-}
-.PresetDateRangePicker_button {
-  position: relative;
-  height: 100%;
-  text-align: center;
-  background: 0 0;
-  border: 2px solid #00a699;
-  color: #00a699;
-  padding: 4px 12px;
-  margin-right: 8px;
-  font: inherit;
-  font-weight: 700;
-  line-height: normal;
-  overflow: visible;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  cursor: pointer;
-}
-.PresetDateRangePicker_button:active {
-  outline: 0;
-}
-.PresetDateRangePicker_button__selected {
-  color: #fff;
-  background: #00a699;
-}
-.SingleDatePickerInput {
-  display: inline-block;
-  background-color: #fff;
-}
-.SingleDatePickerInput__withBorder {
-  border-radius: 2px;
-  border: 1px solid #dbdbdb;
-}
-.SingleDatePickerInput__rtl {
-  direction: rtl;
-}
-.SingleDatePickerInput__disabled {
-  background-color: #f2f2f2;
-}
-.SingleDatePickerInput__block {
-  display: block;
-}
-.SingleDatePickerInput__showClearDate {
-  padding-right: 30px;
-}
-.SingleDatePickerInput_clearDate {
-  background: 0 0;
-  border: 0;
-  color: inherit;
-  font: inherit;
-  line-height: normal;
-  overflow: visible;
-  cursor: pointer;
-  padding: 10px;
-  margin: 0 10px 0 5px;
-  position: absolute;
-  right: 0;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-.SingleDatePickerInput_clearDate__default:focus,
-.SingleDatePickerInput_clearDate__default:hover {
-  background: #dbdbdb;
-  border-radius: 50%;
-}
-.SingleDatePickerInput_clearDate__small {
-  padding: 6px;
-}
-.SingleDatePickerInput_clearDate__hide {
-  visibility: hidden;
-}
-.SingleDatePickerInput_clearDate_svg {
-  fill: #82888a;
-  height: 12px;
-  width: 15px;
-  vertical-align: middle;
-}
-.SingleDatePickerInput_clearDate_svg__small {
-  height: 9px;
-}
-.SingleDatePickerInput_calendarIcon {
-  background: 0 0;
-  border: 0;
-  color: inherit;
-  font: inherit;
-  line-height: normal;
-  overflow: visible;
-  cursor: pointer;
-  display: inline-block;
-  vertical-align: middle;
-  padding: 10px;
-  margin: 0 5px 0 10px;
-}
-.SingleDatePickerInput_calendarIcon_svg {
-  fill: #82888a;
-  height: 15px;
-  width: 14px;
-  vertical-align: middle;
-}
-.SingleDatePicker {
-  position: relative;
-  display: inline-block;
-}
-.SingleDatePicker__block {
-  display: block;
-}
-.SingleDatePicker_picker {
-  z-index: 1;
-  background-color: #fff;
-  position: absolute;
-}
-.SingleDatePicker_picker__rtl {
-  direction: rtl;
-}
-.SingleDatePicker_picker__directionLeft {
-  left: 0;
-}
-.SingleDatePicker_picker__directionRight {
-  right: 0;
-}
-.SingleDatePicker_picker__portal {
-  background-color: rgba(0, 0, 0, 0.3);
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-}
-.SingleDatePicker_picker__fullScreenPortal {
-  background-color: #fff;
-}
-.SingleDatePicker_closeButton {
-  background: 0 0;
-  border: 0;
-  color: inherit;
-  font: inherit;
-  line-height: normal;
-  overflow: visible;
-  cursor: pointer;
-  position: absolute;
-  top: 0;
-  right: 0;
-  padding: 15px;
-  z-index: 2;
-}
-.SingleDatePicker_closeButton:focus,
-.SingleDatePicker_closeButton:hover {
-  color: darken(#cacccd, 10%);
-  text-decoration: none;
-}
-.SingleDatePicker_closeButton_svg {
-  height: 15px;
-  width: 15px;
-  fill: #cacccd;
-}
-.DayPickerKeyboardShortcuts_buttonReset {
-  background: 0 0;
-  border: 0;
-  border-radius: 0;
-  color: inherit;
-  font: inherit;
-  line-height: normal;
-  overflow: visible;
-  padding: 0;
-  cursor: pointer;
-  font-size: 14px;
-}
-.DayPickerKeyboardShortcuts_buttonReset:active {
-  outline: 0;
-}
-.DayPickerKeyboardShortcuts_show {
-  width: 33px;
-  height: 26px;
-  position: absolute;
-  z-index: 2;
-}
-.DayPickerKeyboardShortcuts_show::before {
-  content: "";
-  display: block;
-  position: absolute;
-}
-.DayPickerKeyboardShortcuts_show__bottomRight {
-  bottom: 0;
-  right: 0;
-}
-.DayPickerKeyboardShortcuts_show__bottomRight::before {
-  border-top: 26px solid transparent;
-  border-right: 33px solid #00a699;
-  bottom: 0;
-  right: 0;
-}
-.DayPickerKeyboardShortcuts_show__bottomRight:hover::before {
-  border-right: 33px solid #008489;
-}
-.DayPickerKeyboardShortcuts_show__topRight {
-  top: 0;
-  right: 0;
-}
-.DayPickerKeyboardShortcuts_show__topRight::before {
-  border-bottom: 26px solid transparent;
-  border-right: 33px solid #00a699;
-  top: 0;
-  right: 0;
-}
-.DayPickerKeyboardShortcuts_show__topRight:hover::before {
-  border-right: 33px solid #008489;
-}
-.DayPickerKeyboardShortcuts_show__topLeft {
-  top: 0;
-  left: 0;
-}
-.DayPickerKeyboardShortcuts_show__topLeft::before {
-  border-bottom: 26px solid transparent;
-  border-left: 33px solid #00a699;
-  top: 0;
-  left: 0;
-}
-.DayPickerKeyboardShortcuts_show__topLeft:hover::before {
-  border-left: 33px solid #008489;
-}
-.DayPickerKeyboardShortcuts_showSpan {
-  color: #fff;
-  position: absolute;
-}
-.DayPickerKeyboardShortcuts_showSpan__bottomRight {
-  bottom: 0;
-  right: 5px;
-}
-.DayPickerKeyboardShortcuts_showSpan__topRight {
-  top: 1px;
-  right: 5px;
-}
-.DayPickerKeyboardShortcuts_showSpan__topLeft {
-  top: 1px;
-  left: 5px;
-}
-.DayPickerKeyboardShortcuts_panel {
-  overflow: auto;
-  background: #fff;
-  border: 1px solid #dbdbdb;
-  border-radius: 2px;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  z-index: 2;
-  padding: 22px;
-  margin: 33px;
-  text-align: left;
-}
-.DayPickerKeyboardShortcuts_title {
-  font-size: 16px;
-  font-weight: 700;
-  margin: 0;
-}
-.DayPickerKeyboardShortcuts_list {
-  list-style: none;
-  padding: 0;
-  font-size: 14px;
-}
-.DayPickerKeyboardShortcuts_close {
-  position: absolute;
-  right: 22px;
-  top: 22px;
-  z-index: 2;
-}
-.DayPickerKeyboardShortcuts_close:active {
-  outline: 0;
-}
-.DayPickerKeyboardShortcuts_closeSvg {
-  height: 15px;
-  width: 15px;
-  fill: #cacccd;
-}
-.DayPickerKeyboardShortcuts_closeSvg:focus,
-.DayPickerKeyboardShortcuts_closeSvg:hover {
-  fill: #82888a;
-}
-.CalendarDay {
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  cursor: pointer;
-  font-size: 14px;
-  text-align: center;
-}
-.CalendarDay:active {
-  outline: 0;
-}
-.CalendarDay__defaultCursor {
-  cursor: default;
-}
-.CalendarDay__default {
-  border: 1px solid #e4e7e7;
-  color: #484848;
-  background: #fff;
-}
-.CalendarDay__default:hover {
-  background: #e4e7e7;
-  border: 1px solid #e4e7e7;
-  color: inherit;
-}
-.CalendarDay__hovered_offset {
-  background: #f4f5f5;
-  border: 1px double #e4e7e7;
-  color: inherit;
-}
-.CalendarDay__outside {
-  border: 0;
-  background: #fff;
-  color: #484848;
-}
-.CalendarDay__outside:hover {
-  border: 0;
-}
-.CalendarDay__blocked_minimum_nights {
-  background: #fff;
-  border: 1px solid #eceeee;
-  color: #cacccd;
-}
-.CalendarDay__blocked_minimum_nights:active,
-.CalendarDay__blocked_minimum_nights:hover {
-  background: #fff;
-  color: #cacccd;
-}
-.CalendarDay__highlighted_calendar {
-  background: #ffe8bc;
-  color: #484848;
-}
-.CalendarDay__highlighted_calendar:active,
-.CalendarDay__highlighted_calendar:hover {
-  background: #ffce71;
-  color: #484848;
-}
-.CalendarDay__selected_span {
-  background: #66e2da;
-  border: 1px double #33dacd;
-  color: #fff;
-}
-.CalendarDay__selected_span:active,
-.CalendarDay__selected_span:hover {
-  background: #33dacd;
-  border: 1px double #33dacd;
-  color: #fff;
-}
-.CalendarDay__selected,
-.CalendarDay__selected:active,
-.CalendarDay__selected:hover {
-  background: #00a699;
-  border: 1px double #00a699;
-  color: #fff;
-}
-.CalendarDay__hovered_span,
-.CalendarDay__hovered_span:hover {
-  background: #b2f1ec;
-  border: 1px double #80e8e0;
-  color: #007a87;
-}
-.CalendarDay__hovered_span:active {
-  background: #80e8e0;
-  border: 1px double #80e8e0;
-  color: #007a87;
-}
-.CalendarDay__blocked_calendar,
-.CalendarDay__blocked_calendar:active,
-.CalendarDay__blocked_calendar:hover {
-  background: #cacccd;
-  border: 1px solid #cacccd;
-  color: #82888a;
-}
-.CalendarDay__blocked_out_of_range,
-.CalendarDay__blocked_out_of_range:active,
-.CalendarDay__blocked_out_of_range:hover {
-  background: #fff;
-  border: 1px solid #e4e7e7;
-  color: #cacccd;
-}
-.CalendarDay__hovered_start_first_possible_end {
-  background: #eceeee;
-  border: 1px double #eceeee;
-}
-.CalendarDay__hovered_start_blocked_min_nights {
-  background: #eceeee;
-  border: 1px double #e4e7e7;
-}
-.CalendarMonth {
-  background: #fff;
-  text-align: center;
-  vertical-align: top;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-.CalendarMonth_table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-.CalendarMonth_verticalSpacing {
-  border-collapse: separate;
-}
-.CalendarMonth_caption {
-  color: #484848;
-  font-size: 18px;
-  text-align: center;
-  padding-top: 22px;
-  padding-bottom: 37px;
-  caption-side: initial;
-}
-.CalendarMonth_caption__verticalScrollable {
-  padding-top: 12px;
-  padding-bottom: 7px;
-}
-.CalendarMonthGrid {
-  background: #fff;
-  text-align: left;
-  z-index: 0;
-}
-.CalendarMonthGrid__animating {
-  z-index: 1;
-}
-.CalendarMonthGrid__horizontal {
-  position: absolute;
-  left: 9px;
-}
-.CalendarMonthGrid__vertical,
-.CalendarMonthGrid__vertical_scrollable {
-  margin: 0 auto;
-}
-.CalendarMonthGrid_month__horizontal {
-  display: inline-block;
-  vertical-align: top;
-  min-height: 100%;
-}
-.CalendarMonthGrid_month__hideForAnimation {
-  position: absolute;
-  z-index: -1;
-  opacity: 0;
-  pointer-events: none;
-}
-.CalendarMonthGrid_month__hidden {
-  visibility: hidden;
-}
-.DayPickerNavigation {
-  position: relative;
-  z-index: 2;
-}
-.DayPickerNavigation__horizontal {
-  height: 0;
-}
-.DayPickerNavigation__verticalScrollable_prevNav {
-  z-index: 1;
-}
-.DayPickerNavigation__verticalDefault {
-  position: absolute;
-  width: 100%;
-  height: 52px;
-  bottom: 0;
-  left: 0;
-}
-.DayPickerNavigation__verticalScrollableDefault {
-  position: relative;
-}
-.DayPickerNavigation__bottom {
-  height: auto;
-}
-.DayPickerNavigation__bottomDefault {
-  -webkit-box-pack: justify;
-  -ms-flex-pack: justify;
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-}
-.DayPickerNavigation_button {
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  border: 0;
-  padding: 0;
-  margin: 0;
-}
-.DayPickerNavigation_button__default {
-  border: 1px solid #e4e7e7;
-  background-color: #fff;
-  color: #757575;
-}
-.DayPickerNavigation_button__default:focus,
-.DayPickerNavigation_button__default:hover {
-  border: 1px solid #c4c4c4;
-}
-.DayPickerNavigation_button__default:active {
-  background: #f2f2f2;
-}
-.DayPickerNavigation_button__disabled {
-  cursor: default;
-  border: 1px solid #f2f2f2;
-}
-.DayPickerNavigation_button__disabled:focus,
-.DayPickerNavigation_button__disabled:hover {
-  border: 1px solid #f2f2f2;
-}
-.DayPickerNavigation_button__disabled:active {
-  background: 0 0;
-}
-.DayPickerNavigation_button__horizontalDefault {
-  position: absolute;
-  top: 18px;
-  line-height: 0.78;
-  border-radius: 3px;
-  padding: 6px 9px;
-}
-.DayPickerNavigation_bottomButton__horizontalDefault {
-  position: static;
-  margin: -10px 22px 30px;
-}
-.DayPickerNavigation_leftButton__horizontalDefault {
-  left: 22px;
-}
-.DayPickerNavigation_rightButton__horizontalDefault {
-  right: 22px;
-}
-.DayPickerNavigation_button__verticalDefault {
-  padding: 5px;
-  background: #fff;
-  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
-  position: relative;
-  display: inline-block;
-  text-align: center;
-  height: 100%;
-  width: 50%;
-}
-.DayPickerNavigation_nextButton__verticalDefault {
-  border-left: 0;
-}
-.DayPickerNavigation_nextButton__verticalScrollableDefault,
-.DayPickerNavigation_prevButton__verticalScrollableDefault {
-  width: 100%;
-}
-.DayPickerNavigation_svg__horizontal {
-  height: 19px;
-  width: 19px;
-  fill: #82888a;
-  display: block;
-}
-.DayPickerNavigation_svg__vertical {
-  height: 42px;
-  width: 42px;
-  fill: #484848;
-}
-.DayPickerNavigation_svg__disabled {
-  fill: #f2f2f2;
-}
-.DayPicker {
-  background: #fff;
-  position: relative;
-  text-align: left;
-}
-.DayPicker__horizontal {
-  background: #fff;
-}
-.DayPicker__verticalScrollable {
-  height: 100%;
-}
-.DayPicker__hidden {
-  visibility: hidden;
-}
-.DayPicker__withBorder {
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.07);
-  border-radius: 3px;
-}
-.DayPicker_portal__horizontal {
-  box-shadow: none;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-}
-.DayPicker_portal__vertical {
-  position: initial;
-}
-.DayPicker_focusRegion {
-  outline: 0;
-}
-.DayPicker_calendarInfo__horizontal,
-.DayPicker_wrapper__horizontal {
-  display: inline-block;
-  vertical-align: top;
-}
-.DayPicker_weekHeaders {
-  position: relative;
-}
-.DayPicker_weekHeaders__horizontal {
-  margin-left: 9px;
-}
-.DayPicker_weekHeader {
-  color: #757575;
-  position: absolute;
-  top: 62px;
-  z-index: 2;
-  text-align: left;
-}
-.DayPicker_weekHeader__vertical {
-  left: 50%;
-}
-.DayPicker_weekHeader__verticalScrollable {
-  top: 0;
-  display: table-row;
-  border-bottom: 1px solid #dbdbdb;
-  background: #fff;
-  margin-left: 0;
-  left: 0;
-  width: 100%;
-  text-align: center;
-}
-.DayPicker_weekHeader_ul {
-  list-style: none;
-  margin: 1px 0;
-  padding-left: 0;
-  padding-right: 0;
-  font-size: 14px;
-}
-.DayPicker_weekHeader_li {
-  display: inline-block;
-  text-align: center;
-}
-.DayPicker_transitionContainer {
-  position: relative;
-  overflow: hidden;
-  border-radius: 3px;
-}
-.DayPicker_transitionContainer__horizontal {
-  -webkit-transition: height 0.2s ease-in-out;
-  -moz-transition: height 0.2s ease-in-out;
-  transition: height 0.2s ease-in-out;
-}
-.DayPicker_transitionContainer__vertical {
-  width: 100%;
-}
-.DayPicker_transitionContainer__verticalScrollable {
-  padding-top: 20px;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  overflow-y: scroll;
-}
-.DateInput {
-  margin: 0;
-  padding: 0;
-  background: #fff;
-  position: relative;
-  display: inline-block;
-  width: 130px;
-  vertical-align: middle;
-}
-.DateInput__small {
-  width: 97px;
-}
-.DateInput__block {
-  width: 100%;
-}
-.DateInput__disabled {
-  background: #f2f2f2;
-  color: #dbdbdb;
-}
-.DateInput_input {
-  font-weight: 200;
-  font-size: 19px;
-  line-height: 24px;
-  color: #484848;
-  background-color: #fff;
-  width: 100%;
-  padding: 11px 11px 9px;
-  border: 0;
-  border-top: 0;
-  border-right: 0;
-  border-bottom: 2px solid transparent;
-  border-left: 0;
-  border-radius: 0;
-}
-.DateInput_input__small {
-  font-size: 15px;
-  line-height: 18px;
-  letter-spacing: 0.2px;
-  padding: 7px 7px 5px;
-}
-.DateInput_input__regular {
-  font-weight: auto;
-}
-.DateInput_input__readOnly {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-.DateInput_input__focused {
-  outline: 0;
-  background: #fff;
-  border: 0;
-  border-top: 0;
-  border-right: 0;
-  border-bottom: 2px solid #008489;
-  border-left: 0;
-}
-.DateInput_input__disabled {
-  background: #f2f2f2;
-  font-style: italic;
-}
-.DateInput_screenReaderMessage {
-  border: 0;
-  clip: rect(0, 0, 0, 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-.DateInput_fang {
-  position: absolute;
-  width: 20px;
-  height: 10px;
-  left: 22px;
-  z-index: 2;
-}
-.DateInput_fangShape {
-  fill: #fff;
-}
-.DateInput_fangStroke {
-  stroke: #dbdbdb;
-  fill: transparent;
-}
-.DateRangePickerInput {
-  background-color: #fff;
-  display: inline-block;
-}
-.DateRangePickerInput__disabled {
-  background: #f2f2f2;
-}
-.DateRangePickerInput__withBorder {
-  border-radius: 2px;
-  border: 1px solid #dbdbdb;
-}
-.DateRangePickerInput__rtl {
-  direction: rtl;
-}
-.DateRangePickerInput__block {
-  display: block;
-}
-.DateRangePickerInput__showClearDates {
-  padding-right: 30px;
-}
-.DateRangePickerInput_arrow {
-  display: inline-block;
-  vertical-align: middle;
-  color: #484848;
-}
-.DateRangePickerInput_arrow_svg {
-  vertical-align: middle;
-  fill: #484848;
-  height: 24px;
-  width: 24px;
-}
-.DateRangePickerInput_clearDates {
-  background: 0 0;
-  border: 0;
-  color: inherit;
-  font: inherit;
-  line-height: normal;
-  overflow: visible;
-  cursor: pointer;
-  padding: 10px;
-  margin: 0 10px 0 5px;
-  position: absolute;
-  right: 0;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-.DateRangePickerInput_clearDates__small {
-  padding: 6px;
-}
-.DateRangePickerInput_clearDates_default:focus,
-.DateRangePickerInput_clearDates_default:hover {
-  background: #dbdbdb;
-  border-radius: 50%;
-}
-.DateRangePickerInput_clearDates__hide {
-  visibility: hidden;
-}
-.DateRangePickerInput_clearDates_svg {
-  fill: #82888a;
-  height: 12px;
-  width: 15px;
-  vertical-align: middle;
-}
-.DateRangePickerInput_clearDates_svg__small {
-  height: 9px;
-}
-.DateRangePickerInput_calendarIcon {
-  background: 0 0;
-  border: 0;
-  color: inherit;
-  font: inherit;
-  line-height: normal;
-  overflow: visible;
-  cursor: pointer;
-  display: inline-block;
-  vertical-align: middle;
-  padding: 10px;
-  margin: 0 5px 0 10px;
-}
-.DateRangePickerInput_calendarIcon_svg {
-  fill: #82888a;
-  height: 15px;
-  width: 14px;
-  vertical-align: middle;
-}
-.DateRangePicker {
-  position: relative;
-  display: inline-block;
-}
-.DateRangePicker__block {
-  display: block;
-}
-.DateRangePicker_picker {
-  z-index: 1;
-  background-color: #fff;
-  position: absolute;
-}
-.DateRangePicker_picker__rtl {
-  direction: rtl;
-}
-.DateRangePicker_picker__directionLeft {
-  left: 0;
-}
-.DateRangePicker_picker__directionRight {
-  right: 0;
-}
-.DateRangePicker_picker__portal {
-  background-color: rgba(0, 0, 0, 0.3);
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-}
-.DateRangePicker_picker__fullScreenPortal {
-  background-color: #fff;
-}
-.DateRangePicker_closeButton {
-  background: 0 0;
-  border: 0;
-  color: inherit;
-  font: inherit;
-  line-height: normal;
-  overflow: visible;
-  cursor: pointer;
-  position: absolute;
-  top: 0;
-  right: 0;
-  padding: 15px;
-  z-index: 2;
-}
-.DateRangePicker_closeButton:focus,
-.DateRangePicker_closeButton:hover {
-  color: darken(#cacccd, 10%);
-  text-decoration: none;
-}
-.DateRangePicker_closeButton_svg {
-  height: 15px;
-  width: 15px;
-  fill: #cacccd;
-}
diff --git a/packages/core/src/components/DatePicker/index.ts b/packages/core/src/components/DatePicker/index.ts
index fd17a47a02..bb4cd3f113 100644
--- a/packages/core/src/components/DatePicker/index.ts
+++ b/packages/core/src/components/DatePicker/index.ts
@@ -1 +1,3 @@
-export { default as DatePicker, type DatePickerProps } from "./DatePicker";
+export { default as DatePicker } from "./DatePicker";
+
+export * from "./DatePicker.types";
diff --git a/packages/core/src/components/DatePicker/types.ts b/packages/core/src/components/DatePicker/types.ts
deleted file mode 100644
index a6417bb169..0000000000
--- a/packages/core/src/components/DatePicker/types.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import type moment from "moment";
-
-export type Moment = moment.Moment;
-
-export enum FocusInput {
-  startDate = "startDate",
-  endDate = "endDate"
-}
-
-export enum Direction {
-  next = "next",
-  prev = "prev"
-}
-
-export interface RangeDate {
-  /**
-   * The start date of the range.
-   */
-  startDate: Moment | null;
-  /**
-   * The end date of the range.
-   */
-  endDate: Moment | null;
-}
diff --git a/packages/core/src/components/next/DatePicker/types/files.d.ts b/packages/core/src/components/DatePicker/types/files.d.ts
similarity index 100%
rename from packages/core/src/components/next/DatePicker/types/files.d.ts
rename to packages/core/src/components/DatePicker/types/files.d.ts
diff --git a/packages/core/src/components/next/DatePicker/utils.ts b/packages/core/src/components/DatePicker/utils.ts
similarity index 100%
rename from packages/core/src/components/next/DatePicker/utils.ts
rename to packages/core/src/components/DatePicker/utils.ts
diff --git a/packages/core/src/components/Divider/Divider.module.scss b/packages/core/src/components/Divider/Divider.module.scss
index b12e6d23dd..bc5f47dcdb 100644
--- a/packages/core/src/components/Divider/Divider.module.scss
+++ b/packages/core/src/components/Divider/Divider.module.scss
@@ -9,11 +9,11 @@
 .horizontal {
   height: 1px;
   width: 100%;
-  margin: var(--spacing-small) 0;
+  margin: var(--space-8) 0;
 }
 
 .vertical {
   height: 100%;
   width: 1px;
-  margin: 0 var(--spacing-xs);
+  margin: 0 var(--space-4);
 }
diff --git a/packages/core/src/components/Divider/Divider.tsx b/packages/core/src/components/Divider/Divider.tsx
index dec4a06867..5615f02571 100644
--- a/packages/core/src/components/Divider/Divider.tsx
+++ b/packages/core/src/components/Divider/Divider.tsx
@@ -1,10 +1,9 @@
 import { ComponentDefaultTestId, getTestId } from "../../tests/test-ids-utils";
 import cx from "classnames";
 import React from "react";
-import { DirectionType as DirectionTypeEnum } from "./DividerConstants";
 import { type DividerDirection } from "./Divider.types";
 import { getStyle } from "../../helpers/typesciptCssModulesHelper";
-import { type VibeComponentProps, withStaticPropsWithoutForwardRef } from "../../types";
+import { type VibeComponentProps } from "../../types";
 import styles from "./Divider.module.scss";
 import { ComponentVibeId } from "../../tests/constants";
 
@@ -38,10 +37,4 @@ const Divider = ({
   );
 };
 
-interface DividerStaticProps {
-  directions: typeof DirectionTypeEnum;
-}
-
-export default withStaticPropsWithoutForwardRef<DividerProps, DividerStaticProps>(Divider, {
-  directions: DirectionTypeEnum
-});
+export default Divider;
diff --git a/packages/core/src/components/Divider/DividerConstants.ts b/packages/core/src/components/Divider/DividerConstants.ts
deleted file mode 100644
index 597921a578..0000000000
--- a/packages/core/src/components/Divider/DividerConstants.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * @deprecated
- */
-export enum DirectionType {
-  VERTICAL = "vertical",
-  HORIZONTAL = "horizontal"
-}
diff --git a/packages/core/src/components/Dropdown/Dropdown.module.scss b/packages/core/src/components/Dropdown/Dropdown.module.scss
deleted file mode 100644
index 30f3a9eec0..0000000000
--- a/packages/core/src/components/Dropdown/Dropdown.module.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-/* stylelint-disable selector-class-pattern */
-
-.dropdown :global(.fast-option) {
-  display: flex;
-  align-content: center;
-  color: var(--primary-text-color);
-  cursor: pointer;
-  border-radius: var(--border-radius-small);
-  margin: 0 var(--spacing-small);
-  padding: 0 var(--spacing-small);
-  transition: all var(--motion-productive-medium) var(--motion-timing-enter);
-}
-
-.dropdown :global(.fast-option):disabled {
-  background-color: transparent;
-  color: var(--disabled-text-color);
-  cursor: not-allowed;
-}
-
-.dropdown :global(.fast-option-disabled) {
-  background-color: transparent;
-  color: var(--disabled-text-color);
-  cursor: not-allowed;
-}
-
-.dropdown :global(.fast-option-focused) {
-  color: var(--primary-text-color);
-  background-color: var(--primary-selected-color);
-  user-select: none;
-  box-sizing: border-box;
-}
-
-.dropdown :global(.fast-option-focused):hover {
-  color: var(--primary-text-color);
-  background-color: var(--primary-background-hover-color);
-}
-
-.dropdown :global(.fast-option-selected) {
-  color: var(--primary-color);
-  background-color: var(--primary-selected-color);
-  cursor: pointer;
-}
diff --git a/packages/core/src/components/Dropdown/Dropdown.styles.js b/packages/core/src/components/Dropdown/Dropdown.styles.js
deleted file mode 100644
index 315015528f..0000000000
--- a/packages/core/src/components/Dropdown/Dropdown.styles.js
+++ /dev/null
@@ -1,437 +0,0 @@
-import { SIZES } from "../../constants/sizes";
-import { getCSSVar } from "../../services/themes";
-import { getScrollableParent } from "../../utils/dom-utils";
-
-const getSizeInPx = size => {
-  switch (size) {
-    case SIZES.LARGE:
-      return 48;
-    case SIZES.MEDIUM:
-      return 40;
-    case SIZES.SMALL:
-    default:
-      return 32;
-  }
-};
-
-const getSize = size => {
-  const selectedSize = getSizeInPx(size);
-  return { height: `${selectedSize}px` };
-};
-
-const getInnerSize = size => {
-  const selectedSize = getSizeInPx(size) - 2;
-  return { height: `${selectedSize}px` };
-};
-
-const getIndicatorBoxSize = size => {
-  const selectedSize = getSizeInPx(size) - 8;
-  return {
-    height: `${selectedSize}px`,
-    width: `${selectedSize}px`
-  };
-};
-
-const getColor = () => {
-  const color = getCSSVar("primary-text-color");
-  const backgroundColor = getCSSVar("secondary-background-color");
-  return { color, backgroundColor };
-};
-
-const getFont = size => ({
-  fontSize: getSingleValueTextSize(size),
-  lineHeight: getSingleValueTextSize(size),
-  fontFamily: getCSSVar("font-family")
-});
-
-const disabledContainerStyle = isDisabled => {
-  if (!isDisabled) return {};
-  return {
-    backgroundColor: getCSSVar("disabled-background-color"),
-    color: getCSSVar("disabled-text-color"),
-    borderColor: "transparent",
-    cursor: "not-allowed",
-    ":active, :focus, :hover": {
-      borderColor: "transparent",
-      cursor: "not-allowed"
-    },
-    ":active, :focus": {
-      pointerEvents: "none"
-    }
-  };
-};
-
-const readOnlyContainerStyle = readOnly => {
-  if (!readOnly) return {};
-  return {
-    border: "hidden"
-  };
-};
-
-const readOnlyStyle = isReadOnly => {
-  if (!isReadOnly) {
-    return {};
-  }
-  return {
-    backgroundColor: getCSSVar("allgrey-background-color")
-  };
-};
-
-const getOptionStyle = (provided, { isDisabled, isSelected, isFocused }) => {
-  delete provided[":active"];
-  delete provided.width;
-  const general = {
-    display: "flex",
-    alignContent: "center",
-    borderRadius: getCSSVar("border-radius-small"),
-    marginRight: getCSSVar("spacing-small"),
-    marginLeft: getCSSVar("spacing-small"),
-    paddingLeft: getCSSVar("spacing-small"),
-    paddingRight: getCSSVar("spacing-small"),
-    transition: `all 0.1s ${getCSSVar("expand-animation-timing")}`
-  };
-  if (isDisabled) {
-    return {
-      ...provided,
-      ...general,
-      backgroundColor: "transparent",
-      color: getCSSVar("disabled-text-color"),
-      cursor: "not-allowed",
-      ...(isFocused && {
-        backgroundColor: getCSSVar("primary-background-hover-color")
-      })
-    };
-  }
-  if (isSelected) {
-    return {
-      ...provided,
-      ...general,
-      color: getCSSVar("primary-text-color"),
-      backgroundColor: getCSSVar("primary-selected-color"),
-      cursor: "pointer"
-    };
-  }
-  return {
-    ...provided,
-    ...general,
-    color: getCSSVar("primary-text-color"),
-    cursor: "pointer",
-    ...(isFocused && {
-      ":hover": {
-        color: getCSSVar("primary-text-color"),
-        backgroundColor: getCSSVar("primary-background-hover-color")
-      }
-    })
-  };
-};
-
-const container =
-  ({ size }) =>
-  (provided, { isDisabled, selectProps }) => {
-    const { readOnly } = selectProps;
-    delete provided.pointerEvents;
-    return {
-      ...provided,
-      ...getSize(size),
-      minHeight: "30px",
-      border: `1px solid ${getCSSVar("ui-border-color")}`,
-      boxShadow: "none",
-      borderRadius: getCSSVar("border-radius-small"),
-      boxSizing: "border-box",
-      transition: `border 0.1s ${getCSSVar("expand-animation-timing")}`,
-      ":hover": {
-        borderColor: getCSSVar("primary-text-color"),
-        borderRadius: getCSSVar("border-radius-small")
-      },
-      ":active, :focus-within": {
-        borderColor: getCSSVar("primary-color")
-      },
-      ...disabledContainerStyle(isDisabled),
-      ...readOnlyContainerStyle(readOnly)
-    };
-  };
-
-const control =
-  ({ size }) =>
-  (provided, { isDisabled, selectProps }) => {
-    const { readOnly } = selectProps;
-    return {
-      ...provided,
-      ...getInnerSize(size),
-      ...getColor(),
-      minHeight: "30px",
-      border: "0 solid transparent",
-      borderRadius: getCSSVar("border-radius-small"),
-      ":focus-within": {
-        boxShadow: `0 0 0 1px ${getCSSVar("primary-color")}`
-      },
-      ...(!isDisabled && {
-        ":hover": {
-          borderColor: "transparent",
-          borderRadius: getCSSVar("border-radius-small")
-        }
-      }),
-      cursor: readOnly ? "default" : "pointer",
-      ...disabledContainerStyle(isDisabled),
-      ...readOnlyContainerStyle(readOnly)
-    };
-  };
-
-const placeholder =
-  ({ allowPlaceholderEllipsis }) =>
-  (provided, { isDisabled }) => ({
-    ...provided,
-    ...getFont(),
-    color: isDisabled ? getCSSVar("disabled-text-color") : getCSSVar("secondary-text-color"),
-    fontWeight: getCSSVar("font-weight-normal"),
-    // 22px because we have the inner arrow of opened/closed
-    ...(allowPlaceholderEllipsis && { width: "calc(100% - 22px)" })
-  });
-
-const indicatorsContainer =
-  ({ size }) =>
-  (provided, { isDisabled }) => ({
-    ...provided,
-    ...getFont(),
-    ...getColor(),
-    borderRadius: getCSSVar("border-radius-small"),
-    ...disabledContainerStyle(isDisabled),
-    ...getInnerSize(size)
-  });
-
-const dropdownIndicator =
-  ({ size }) =>
-  (provided, { selectProps, isDisabled }) => {
-    const { menuIsOpen, readOnly } = selectProps;
-    return {
-      ...provided,
-      display: readOnly ? "none" : "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      padding: "0px",
-      ...getIndicatorBoxSize(size),
-      margin: "4px 3px 4px 0px",
-      backgroundColor: "transparent",
-      borderRadius: getCSSVar("border-radius-small"),
-      svg: {
-        transition: `transform 0.1s ${getCSSVar("expand-animation-timing")}`,
-        transform: menuIsOpen ? "rotate(180deg)" : "rotate(0deg)"
-      },
-      color: isDisabled ? getCSSVar("disabled-text-color") : getCSSVar("icon-color"),
-      ":hover, :active": {
-        backgroundColor: isDisabled ? undefined : getCSSVar("primary-background-hover-color"),
-        color: isDisabled ? undefined : getCSSVar("icon-color")
-      }
-    };
-  };
-
-const clearIndicator =
-  ({ size }) =>
-  () => ({
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    color: getCSSVar("icon-color"),
-    backgroundColor: "transparent",
-    borderRadius: getCSSVar("border-radius-small"),
-    ...getIndicatorBoxSize(size),
-    ":hover": {
-      backgroundColor: getCSSVar("primary-background-hover-color")
-    }
-  });
-
-const menuOpenOpacity = ({ menuIsOpen }) => {
-  if (menuIsOpen) {
-    return {
-      opacity: 0.6
-    };
-  }
-};
-
-const singleValue =
-  () =>
-  (provided, { isDisabled, selectProps }) => {
-    const { readOnly } = selectProps;
-    const readOnlyProps = readOnly
-      ? {
-          ...readOnlyContainerStyle(readOnly),
-          ...readOnlyStyle(readOnly),
-          cursor: "text"
-        }
-      : {};
-
-    return {
-      ...provided,
-      ...getFont(),
-      ...getColor(),
-      ...disabledContainerStyle(isDisabled),
-      ...menuOpenOpacity(selectProps),
-      ...readOnlyProps,
-      display: "flex",
-      alignItems: "center",
-      height: "100%"
-    };
-  };
-
-function getSingleValueTextSize(size) {
-  switch (size) {
-    case SIZES.LARGE:
-      return "16px";
-    case SIZES.MEDIUM:
-      return "16px";
-    case SIZES.SMALL:
-    default:
-      return "14px";
-  }
-}
-
-const input =
-  ({ searchable }) =>
-  provided => ({
-    ...provided,
-    ...getFont(),
-    ...getColor(),
-    display: "flex",
-    alignItems: "center",
-    textIndent: "-2px",
-    ...(!searchable && {
-      width: "0px"
-    })
-  });
-
-// 12px - because we have inner 4px
-const getCenterContentStyle = rtl => {
-  return {
-    display: "flex",
-    alignItems: "center",
-    [`padding${rtl ? "Right" : "Left"}`]: "12px"
-  };
-};
-
-const valueContainer =
-  ({ size, rtl }) =>
-  (provided, { isDisabled, selectProps: { readOnly } }) => ({
-    ...provided,
-    ...getCenterContentStyle(rtl),
-    ...getFont(),
-    ...getColor(),
-    ...getInnerSize(size),
-    ...disabledContainerStyle(isDisabled),
-    ...readOnlyStyle(readOnly),
-    borderRadius: getCSSVar("border-radius-small")
-  });
-
-const menu =
-  ({ controlRef, insideOverflowContainer, insideOverflowWithTransformContainer }) =>
-  provided => {
-    const baseStyle = {
-      ...provided,
-      ...getFont(),
-      color: getCSSVar("primary-text-color"),
-      backgroundColor: getCSSVar("dialog-background-color"),
-      boxShadow: getCSSVar("box-shadow-small")
-    };
-
-    if (!insideOverflowContainer && !insideOverflowWithTransformContainer) return baseStyle;
-    const parentPositionData = controlRef?.current?.getBoundingClientRect();
-    // If no location found do not add anything to hard coded style
-    if (!parentPositionData) return baseStyle;
-
-    /** If the dropdown is inside a scroll in a regular container,position: fixed content (like our dropdown menu) will be attached to the start of the viewport.
-     * For this case we will override the top menu position value to be the according the the drop down location for correct dispaly.
-     * When the dropdown container (with overflow:hidden or overflow:scroll) using transform CSS function, we can use a relative positioned inner container, which our menu will be attach to it's
-     * start when the menu position is fixed, and this is why in this case we define top:auto.
-     * we also need in this case to translate the menu y position to fit inside a scrollable parent.
-     */
-
-    if (insideOverflowContainer) {
-      return { ...baseStyle, top: parentPositionData.bottom, width: parentPositionData.width };
-    } else if (insideOverflowWithTransformContainer) {
-      const translateY = `-${getScrollableParent(controlRef?.current)?.scrollTop}px`;
-      return {
-        ...baseStyle,
-        top: "auto",
-        translate: `0 ${translateY}`,
-        width: parentPositionData.width
-      };
-    }
-    return baseStyle;
-  };
-
-const option = () => (provided, state) => ({
-  ...getFont(),
-  ...getOptionStyle(provided, state)
-});
-
-const indicatorSeparator = () => () => ({
-  display: "none"
-});
-
-const group =
-  ({ withGroupDivider }) =>
-  () => ({
-    paddingBottom: 0,
-    marginTop: "4px",
-    ...(withGroupDivider && {
-      ":not(:last-child)": {
-        position: "relative",
-        paddingBottom: "8px",
-        "::after": {
-          content: '""',
-          position: "absolute",
-          bottom: "0",
-          left: "var(--spacing-small)",
-          width: "calc(100% - (var(--spacing-small) * 2))",
-          height: "1px",
-          backgroundColor: "var(--layout-border-color)"
-        }
-      }
-    })
-  });
-
-const groupHeading = () => () => ({
-  fontSize: "14px",
-  lineHeight: "32px",
-  display: "flex",
-  alignItems: "center",
-  marginLeft: getCSSVar("spacing-medium"),
-  color: getCSSVar("secondary-text-color")
-});
-
-export const getIndicatorSize = size => {
-  switch (size) {
-    case SIZES.LARGE:
-      return "20px";
-    case SIZES.MEDIUM:
-      return "20px";
-    case SIZES.SMALL:
-    default:
-      return "16px";
-  }
-};
-
-export const customTheme = theme => ({
-  ...theme,
-  borderRadius: getCSSVar("border-radius-small"),
-  colors: {
-    ...theme.colors,
-    primary25: getCSSVar("primary-background-hover-color")
-  }
-});
-
-export default data => ({
-  container: container(data),
-  control: control(data),
-  placeholder: placeholder(data),
-  indicatorsContainer: indicatorsContainer(data),
-  dropdownIndicator: dropdownIndicator(data),
-  clearIndicator: clearIndicator(data),
-  singleValue: singleValue(data),
-  input: input(data),
-  valueContainer: valueContainer(data),
-  menu: menu(data),
-  option: option(data),
-  indicatorSeparator: indicatorSeparator(data),
-  group: group(data),
-  groupHeading: groupHeading(data)
-});
diff --git a/packages/core/src/components/Dropdown/Dropdown.tsx b/packages/core/src/components/Dropdown/Dropdown.tsx
index 4a3008e727..8324512f9e 100644
--- a/packages/core/src/components/Dropdown/Dropdown.tsx
+++ b/packages/core/src/components/Dropdown/Dropdown.tsx
@@ -1,542 +1,54 @@
-import { ComponentDefaultTestId, getTestId } from "../../tests/test-ids-utils";
-import cx from "classnames";
-import { BaseSizes, type SIZES_VALUES } from "../../constants";
-import React, { forwardRef, useCallback, useMemo, useRef, useState, useEffect, useContext } from "react";
-import Select, { type InputProps, components, createFilter, type ActionMeta } from "react-select";
-import AsyncSelect from "react-select/async";
-import BaseSelect from "react-select/base";
-import { noop as NOOP } from "es-toolkit";
-import MenuComponent from "./components/menu/menu";
-import DropdownIndicatorComponent from "./components/DropdownIndicator/DropdownIndicator";
-import OptionComponent from "./components/option/option";
-import SingleValueComponent from "./components/singleValue/singleValue";
-import ClearIndicatorComponent from "./components/ClearIndicator/ClearIndicator";
-import MultiValueContainer from "./components/MultiValueContainer/MultiValueContainer";
-import { isClient } from "../../utils/ssr-utils";
+import React, { useRef, forwardRef } from "react";
 import {
-  ADD_AUTO_HEIGHT_COMPONENTS,
-  defaultCustomStyles,
-  DROPDOWN_CHIP_COLORS,
-  DROPDOWN_ID,
-  DROPDOWN_INPUT_ARIA_LABEL,
-  DROPDOWN_MENU_ARIA_LABEL,
-  DROPDOWN_MENU_ID,
-  DROPDOWN_MENU_PLACEMENT,
-  DROPDOWN_MENU_POSITION
-} from "./DropdownConstants";
-import generateBaseStyles, { customTheme } from "./Dropdown.styles";
-import Control from "./components/Control/Control";
-import { Text } from "@vibe/typography";
-import { useWarnDeprecated } from "../../utils/warn-deprecated";
-import menuStyles from "./components/menu/menu.module.scss";
-import styles from "./Dropdown.module.scss";
-import {
-  type DropdownOption,
-  type DropdownState,
-  type CustomMenuProps,
-  type CustomOptionProps,
-  type CustomSingleValueProps,
-  type DropdownComponentProps
+  type BaseDropdownProps,
+  type DropdownMultiControllerProps,
+  type DropdownSingleControllerProps
 } from "./Dropdown.types";
-import { withStaticProps } from "../../types";
-import { ComponentVibeId } from "../../tests/constants";
-import { LayerContext } from "@vibe/layer";
+import useMergeRef from "../../hooks/useMergeRef";
+import { type BaseItemData } from "../BaseItem";
+import DropdownComboboxController from "./modes/DropdownComboboxController";
+import DropdownMultiComboboxController from "./modes/DropdownMultiComboboxController";
+import DropdownSelectController from "./modes/DropdownSelectController";
+import DropdownMultiSelectController from "./modes/DropdownMultiSelectController";
 
 const Dropdown = forwardRef(
-  (
-    {
-      className,
-      optionWrapperClassName,
-      singleValueWrapperClassName,
-      dropdownMenuWrapperClassName,
-      placeholder = "",
-      allowPlaceholderEllipsis,
-      disabled = false,
-      readOnly = false,
-      onMenuOpen = NOOP,
-      onMenuClose = NOOP,
-      onFocus = NOOP,
-      onBlur = NOOP,
-      onScroll = NOOP,
-      onMenuScrollToBottom = NOOP,
-      onChange: customOnChange = NOOP,
-      searchable = true,
-      captureMenuScroll = false,
-      options = [],
-      defaultValue,
-      value: customValue,
-      noOptionsMessage,
-      openMenuOnFocus,
-      openMenuOnClick,
-      clearable = true,
-      OptionRenderer,
-      optionRenderer,
-      ValueRenderer,
-      valueRenderer,
-      menuRenderer,
-      menuPlacement = "bottom",
-      rtl,
-      size = "medium",
-      asyncOptions,
-      cacheOptions,
-      defaultOptions,
-      isVirtualized,
-      menuPortalTarget,
-      extraStyles = defaultCustomStyles,
-      maxMenuHeight,
-      menuIsOpen,
-      tabIndex = "0",
-      id = DROPDOWN_ID,
-      menuId = DROPDOWN_MENU_ID,
-      menuAriaLabel = DROPDOWN_MENU_ARIA_LABEL,
-      inputAriaLabel = DROPDOWN_INPUT_ARIA_LABEL,
-      autoFocus = false,
-      multi = false,
-      multiline = false,
-      onOptionRemove: customOnOptionRemove,
-      onOptionSelect,
-      onClear,
-      onInputChange = NOOP,
-      closeMenuOnSelect = !multi,
-      closeMenuOnScroll: customCloseMenuOnScroll = false,
-      withMandatoryDefaultOptions = false,
-      isOptionSelected,
-      insideOverflowContainer = false,
-      insideOverflowWithTransformContainer = false,
-      insideLayerContext = false,
-      tooltipContent = "",
-      onKeyDown = NOOP,
-      isLoading = false,
-      loadingMessage,
-      ariaLabel,
-      tabSelectsValue = true,
-      popupsContainerSelector,
-      filterOption,
-      menuPosition = "absolute",
-      "data-testid": dataTestId,
-      withGroupDivider = false,
-      inputValue,
-      blurInputOnSelect,
-      multiValueDialogClassName
-    }: DropdownComponentProps,
-    ref: React.ForwardedRef<HTMLElement>
+  <Item extends BaseItemData<Record<string, unknown>>>(
+    dropdownProps: BaseDropdownProps<Item>,
+    ref: React.ForwardedRef<HTMLDivElement>
   ) => {
-    useWarnDeprecated({
-      component: "Dropdown",
-      message:
-        "This component is deprecated and will be removed in the next major version. Please use Dropdown from @vibe/core/next instead."
-    });
-
-    const controlRef = useRef();
-    const { layerRef } = useContext(LayerContext);
-    const overrideMenuPortalTarget =
-      (insideLayerContext && layerRef?.current) ||
-      menuPortalTarget ||
-      (popupsContainerSelector && document.querySelector(popupsContainerSelector));
-    const overrideDefaultValue = useMemo(() => {
-      if (defaultValue) {
-        return Array.isArray(defaultValue)
-          ? (defaultValue as DropdownOption[]).map(df => ({ ...df, isMandatory: true }))
-          : { ...(defaultValue as DropdownOption), isMandatory: true };
-      }
-
-      return defaultValue;
-    }, [defaultValue]);
-
-    BaseSelect.prototype.renderLiveRegion = (): null => {
-      return null;
-    };
-
-    // SSR support
-    const [WindowedMenuList, setWindowedMenuList] = useState(null);
-    useEffect(() => {
-      if (isClient()) {
-        if (isTestEnv()) {
-          // eslint-disable-next-line @typescript-eslint/no-var-requires
-          setWindowedMenuList(() => require("react-windowed-select").WindowedMenuList);
-        } else {
-          // Dynamically import the specific named export from react-windowed-select for SSR support
-          import("react-windowed-select").then(module => {
-            setWindowedMenuList(() => module.WindowedMenuList);
-          });
-        }
-      }
-    }, []);
+    const isSearchable = Boolean(dropdownProps.searchable);
 
-    const [selected, setSelected] = useState(overrideDefaultValue || []);
-    const [focusedOptionId, setFocusedOptionId] = useState("");
-    const finalOptionRenderer = optionRenderer || OptionRenderer;
-    const finalValueRenderer = valueRenderer || ValueRenderer;
-    const isControlled = !!customValue;
-    const selectedOptions = customValue ?? selected;
-    const selectedOptionsMap = useMemo(() => {
-      if (Array.isArray(selectedOptions)) {
-        return selectedOptions.reduce((acc, option) => ({ ...acc, [option.value]: option }), {});
-      }
-      return {};
-    }, [selectedOptions]);
+    const dropdownInternalRef = useRef<HTMLDivElement>(null);
+    const dropdownMergedRef = useMergeRef(ref, dropdownInternalRef);
 
-    const overrideAriaLabel = useMemo(() => {
-      return (
-        ariaLabel ||
-        `${readOnly ? "Readonly " : ""} ${tooltipContent} ${
-          Array.isArray(selectedOptions) ? `Selected: ${selectedOptions.map(o => o.label).join(", ")}` : "Select"
-        }`
+    if (isMultiType(dropdownProps)) {
+      return isSearchable ? (
+        <DropdownMultiComboboxController {...dropdownProps} dropdownRef={dropdownMergedRef} />
+      ) : (
+        <DropdownMultiSelectController {...dropdownProps} dropdownRef={dropdownMergedRef} />
       );
-    }, [ariaLabel, readOnly, selectedOptions, tooltipContent]);
-    const value = multi ? selectedOptions : customValue;
-
-    const inlineStyles = useMemo(() => {
-      // We first want to get the default stylized groups (e.g. "container", "menu").
-      const baseStyles = generateBaseStyles({
-        size,
-        rtl,
-        insideOverflowContainer,
-        controlRef,
-        insideOverflowWithTransformContainer,
-        withGroupDivider,
-        searchable,
-        allowPlaceholderEllipsis
-      });
-
-      type BaseStyles = typeof baseStyles;
-
-      // Then we want to run the consumer's root-level custom styles with our "base" override groups.
-      const customStyles = extraStyles(baseStyles);
-
-      // Lastly, we create a style groups object that makes sure we run each custom group with our basic overrides.
-      const mergedStyles: any = Object.entries(customStyles).reduce((accumulator, [stylesGroup, stylesFn]) => {
-        return {
-          ...accumulator,
-          [stylesGroup]: (defaultStyles: BaseStyles, state: DropdownState) => {
-            const providedFn = baseStyles[stylesGroup as keyof BaseStyles];
-            const provided = providedFn ? providedFn(defaultStyles, state) : defaultStyles;
-
-            return stylesFn(provided, state);
-          }
-        };
-      }, {} as BaseStyles);
-
-      if (multi) {
-        if (multiline) {
-          ADD_AUTO_HEIGHT_COMPONENTS.forEach((component: string) => {
-            const original = mergedStyles[component];
-            mergedStyles[component] = (provided: BaseStyles, state: DropdownState) => ({
-              ...original(provided, state),
-              height: "auto"
-            });
-          });
-        }
-
-        const originalValueContainer = mergedStyles.valueContainer;
-        mergedStyles.valueContainer = (provided: BaseStyles, state: DropdownState) => ({
-          ...originalValueContainer(provided, state),
-          paddingLeft: 6
-        });
-      }
-
-      return mergedStyles;
-    }, [
-      size,
-      rtl,
-      insideOverflowContainer,
-      insideOverflowWithTransformContainer,
-      allowPlaceholderEllipsis,
-      extraStyles,
-      multi,
-      multiline
-    ]);
-
-    const Menu = useCallback(
-      (props: CustomMenuProps) => (
-        <MenuComponent
-          {...props}
-          id={menuId}
-          ariaLabel={menuAriaLabel}
-          Renderer={menuRenderer}
-          dropdownMenuWrapperClassName={dropdownMenuWrapperClassName}
-          onScroll={onScroll}
-        />
-      ),
-      [dropdownMenuWrapperClassName, menuRenderer, menuId, menuAriaLabel, onScroll]
-    );
-
-    const DropdownIndicator = useCallback(
-      (props: React.HTMLAttributes<HTMLElement> & { size?: SIZES_VALUES }) => (
-        <DropdownIndicatorComponent {...props} size={size} />
-      ),
-      [size]
-    );
-
-    const Option = useCallback(
-      (props: CustomOptionProps) => (
-        <OptionComponent
-          setFocusedOptionId={setFocusedOptionId}
-          {...props}
-          Renderer={finalOptionRenderer}
-          optionWrapperClassName={optionWrapperClassName}
-        />
-      ),
-      [finalOptionRenderer, optionWrapperClassName, setFocusedOptionId]
-    );
-
-    const Input = useCallback(
-      (props: InputProps | any) => {
-        const { focusedOptionId, menuIsOpen } = props.selectProps;
-        const ariaActiveDescendant = focusedOptionId && menuIsOpen ? focusedOptionId : "";
-        return (
-          <components.Input
-            {...props}
-            aria-activedescendant={ariaActiveDescendant}
-            role="combobox"
-            aria-expanded={!readOnly && menuIsOpen}
-            aria-label={inputAriaLabel}
-            aria-controls={menuId}
-            readOnly={!searchable ? true : undefined}
-          />
-        );
-      },
-      [menuId, readOnly]
-    );
-
-    const SingleValue = useCallback(
-      (props: CustomSingleValueProps) => (
-        <SingleValueComponent
-          {...props}
-          readOnly={readOnly}
-          Renderer={finalValueRenderer}
-          selectedOption={selectedOptions[0]}
-          singleValueWrapperClassName={singleValueWrapperClassName}
-        />
-      ),
-      [finalValueRenderer, readOnly, selectedOptions, singleValueWrapperClassName]
-    );
+    }
 
-    const ClearIndicator = useCallback(
-      (props: React.HTMLAttributes<HTMLElement> & { size?: SIZES_VALUES }) => (
-        <ClearIndicatorComponent {...props} size={size} />
-      ),
-      [size]
-    );
-
-    const onOptionRemove = useMemo(() => {
-      return function (optionValue: number, e: React.MouseEvent | React.KeyboardEvent) {
-        if (customOnOptionRemove) {
-          customOnOptionRemove(selectedOptionsMap[optionValue]);
-        }
-        const newSelectedOptions = Array.isArray(selectedOptions)
-          ? selectedOptions.filter(option => option.value !== optionValue)
-          : selectedOptions;
-
-        if (customOnChange) {
-          customOnChange(newSelectedOptions, e);
-        }
-        setSelected(newSelectedOptions);
-      };
-    }, [customOnChange, customOnOptionRemove, selectedOptions, selectedOptionsMap]);
-
-    const customProps = useMemo(
-      () => ({
-        selectedOptions,
-        onSelectedDelete: onOptionRemove,
-        isMultiline: multiline,
-        insideOverflowContainer,
-        insideOverflowWithTransformContainer,
-        controlRef,
-        tooltipContent,
-        popupsContainerSelector: insideLayerContext ? layerRef?.current : popupsContainerSelector,
-        size,
-        dialogClassName: multiValueDialogClassName
-      }),
-      [
-        selectedOptions,
-        onOptionRemove,
-        multiline,
-        insideOverflowContainer,
-        insideOverflowWithTransformContainer,
-        tooltipContent,
-        layerRef,
-        popupsContainerSelector,
-        insideLayerContext,
-        size,
-        multiValueDialogClassName
-      ]
-    );
-    const onChange = (option: DropdownOption | DropdownOption[], meta: ActionMeta<DropdownOption>) => {
-      if (customOnChange) {
-        customOnChange(option, meta);
-      }
-
-      switch (meta.action) {
-        case "select-option": {
-          const selectedOption = multi ? meta.option : option;
-
-          if (onOptionSelect) {
-            onOptionSelect(selectedOption);
-          }
-
-          if (!isControlled) {
-            setSelected([...selectedOptions, selectedOption]);
-          }
-          break;
-        }
-
-        case "clear":
-          if (onClear) {
-            onClear();
-          }
-
-          if (!isControlled) {
-            if (withMandatoryDefaultOptions) setSelected(overrideDefaultValue);
-            else setSelected([]);
-          }
-          break;
-      }
-    };
-
-    let DropDownComponent: React.ElementType = asyncOptions ? AsyncSelect : Select;
-
-    // @ts-expect-error - We need to check if the default export is available
-    DropDownComponent = DropDownComponent.default || DropDownComponent;
-
-    const asyncAdditions = {
-      ...(asyncOptions && {
-        loadOptions: asyncOptions,
-        cacheOptions,
-        ...(defaultOptions && { defaultOptions })
-      })
-    };
-
-    const additions = {
-      ...(!asyncOptions && { options }),
-      ...(multi && {
-        isMulti: true
-      })
-    };
-
-    const closeMenuOnScroll = useCallback(
-      (event: React.FocusEvent) => {
-        const scrolledElement = event.target;
-        if (scrolledElement?.parentElement?.classList.contains(menuStyles.dropdownMenuWrapper)) {
-          return false;
-        }
-        return customCloseMenuOnScroll || insideOverflowContainer || insideOverflowWithTransformContainer;
-      },
-      [insideOverflowContainer, insideOverflowWithTransformContainer, customCloseMenuOnScroll]
-    );
-
-    const calculatedPlaceholder = useMemo(
-      () =>
-        allowPlaceholderEllipsis ? (
-          <Text type="text2" color="inherit">
-            {placeholder}
-          </Text>
-        ) : (
-          placeholder
-        ),
-      [allowPlaceholderEllipsis, placeholder]
-    );
+    if (isSingleType(dropdownProps)) {
+      return isSearchable ? (
+        <DropdownComboboxController {...dropdownProps} dropdownRef={dropdownMergedRef} />
+      ) : (
+        <DropdownSelectController {...dropdownProps} dropdownRef={dropdownMergedRef} />
+      );
+    }
 
-    return (
-      <DropDownComponent
-        className={cx(styles.dropdown, className)}
-        selectProps={customProps}
-        components={{
-          DropdownIndicator,
-          Menu,
-          ClearIndicator,
-          Input,
-          Option,
-          Control,
-          SingleValue,
-          ...(multi && {
-            MultiValue: NOOP, // We need it for react-select to behave nice with "multi"
-            ValueContainer: MultiValueContainer
-          }),
-          ...(isVirtualized && WindowedMenuList && { MenuList: WindowedMenuList })
-        }}
-        // When inside scroll we set the menu position by js and we can't follow the drop down location while use scrolling
-        closeMenuOnScroll={closeMenuOnScroll}
-        size={size}
-        noOptionsMessage={noOptionsMessage}
-        placeholder={calculatedPlaceholder}
-        isDisabled={disabled}
-        isClearable={!readOnly && clearable}
-        isSearchable={!readOnly}
-        readOnly={readOnly}
-        aria-readonly={readOnly}
-        aria-label={overrideAriaLabel}
-        aria-details={tooltipContent}
-        aria-haspopup="listbox"
-        defaultValue={defaultValue}
-        value={value}
-        onMenuOpen={onMenuOpen}
-        onMenuClose={onMenuClose}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        onMenuScrollToBottom={onMenuScrollToBottom}
-        captureMenuScroll={captureMenuScroll}
-        onChange={onChange}
-        onKeyDown={onKeyDown}
-        onInputChange={onInputChange}
-        openMenuOnFocus={openMenuOnFocus}
-        openMenuOnClick={openMenuOnClick}
-        focusedOptionId={focusedOptionId}
-        isRtl={rtl}
-        styles={inlineStyles}
-        theme={customTheme}
-        maxMenuHeight={maxMenuHeight}
-        menuPortalTarget={overrideMenuPortalTarget}
-        menuPlacement={menuPlacement}
-        menuPosition={menuPosition}
-        menuIsOpen={!readOnly && menuIsOpen}
-        tabIndex={tabIndex}
-        id={id}
-        data-testid={dataTestId || getTestId(ComponentDefaultTestId.DROPDOWN, id)}
-        data-vibe={ComponentVibeId.DROPDOWN}
-        autoFocus={autoFocus}
-        closeMenuOnSelect={closeMenuOnSelect}
-        ref={ref as React.Ref<any>}
-        withMandatoryDefaultOptions={withMandatoryDefaultOptions}
-        isOptionSelected={isOptionSelected}
-        isLoading={isLoading}
-        loadingMessage={loadingMessage}
-        tabSelectsValue={tabSelectsValue}
-        filterOption={filterOption}
-        inputValue={inputValue}
-        blurInputOnSelect={blurInputOnSelect}
-        {...asyncAdditions}
-        {...additions}
-      />
-    );
+    return null;
   }
 );
 
-interface DropdownStaticProps {
-  sizes: typeof BaseSizes;
-  chipColors: typeof DROPDOWN_CHIP_COLORS;
-  menuPlacements: typeof DROPDOWN_MENU_PLACEMENT;
-  menuPositions: typeof DROPDOWN_MENU_POSITION;
-  createFilter: typeof createFilter;
-}
+export default Dropdown as <Item extends BaseItemData<Record<string, unknown>>>(
+  props: BaseDropdownProps<Item> & { ref?: React.ForwardedRef<HTMLDivElement> }
+) => React.ReactElement;
 
-export default withStaticProps<DropdownComponentProps, DropdownStaticProps>(Dropdown, {
-  sizes: BaseSizes,
-  chipColors: DROPDOWN_CHIP_COLORS,
-  menuPlacements: DROPDOWN_MENU_PLACEMENT,
-  menuPositions: DROPDOWN_MENU_POSITION,
-  createFilter
-});
+function isMultiType(dropdownProps: BaseDropdownProps<any>): dropdownProps is DropdownMultiControllerProps<any> {
+  return dropdownProps.multi;
+}
 
-function isTestEnv() {
-  try {
-    return (
-      typeof require === "function" &&
-      typeof module !== "undefined" &&
-      typeof process !== "undefined" &&
-      process.env.NODE_ENV === "test"
-    );
-  } catch (e) {
-    return false;
-  }
+function isSingleType(dropdownProps: BaseDropdownProps<any>): dropdownProps is DropdownSingleControllerProps<any> {
+  return !dropdownProps.multi;
 }
diff --git a/packages/core/src/components/Dropdown/Dropdown.types.ts b/packages/core/src/components/Dropdown/Dropdown.types.ts
index be59590503..c877d82093 100644
--- a/packages/core/src/components/Dropdown/Dropdown.types.ts
+++ b/packages/core/src/components/Dropdown/Dropdown.types.ts
@@ -1,350 +1,292 @@
-import {
-  type ActionMeta,
-  type FocusEventHandler,
-  type InputActionMeta,
-  type KeyboardEventHandler,
-  type MenuProps,
-  type OptionProps,
-  type OptionTypeBase,
-  type SingleValueProps
-} from "react-select";
-import { type UIEventHandler, type WheelEventHandler } from "react";
 import type React from "react";
+import { type DropdownListGroup } from "./components/DropdownBaseList/DropdownBaseList.types";
 import { type VibeComponentProps } from "../../types";
+import { type BaseItemData } from "../BaseItem";
+import { type TooltipProps } from "@vibe/tooltip";
 
-export type DropdownOption = any;
+export type DropdownOption<Item = Record<string, unknown>> = BaseItemData<Item>;
+export type DropdownGroupOption<Item = Record<string, unknown>> = DropdownListGroup<Item>[] | BaseItemData<Item>[];
 
-export interface CustomSingleValueProps extends SingleValueProps<DropdownOption> {
+interface MultiSelectSpecifics<Item extends BaseItemData<Record<string, unknown>>> {
   /**
-   * The component used to render the selected value.
+   * If true, the dropdown allows multiple selections.
    */
-  Renderer: React.ComponentType;
-  /**
-   * If true, the dropdown is read-only and cannot be edited.
-   */
-  readOnly: boolean;
-  /**
-   * The currently selected option.
-   */
-  selectedOption: DropdownOption;
-}
-
-export interface CustomMenuBaseProps {
-  /**
-   * Class name applied to the dropdown menu wrapper.
-   */
-  dropdownMenuWrapperClassName?: string;
-  /**
-   * The ID of the menu container.
-   */
-  menuId?: string;
-  /**
-   * The ARIA label for the menu container.
-   */
-  menuAriaLabel?: string;
-  /**
-   * The ARIA label for the dropdown input.
-   */
-  inputAriaLabel?: string;
-}
-
-export type CustomMenuProps = CustomMenuBaseProps & MenuProps<OptionTypeBase, boolean>;
-
-export interface CustomOptionBaseProps {
+  multi: true;
   /*
-   * Class name to be added to dropdown option wrapper (dropdown-wrapper__option--reset)
-   */
-  optionWrapperClassName?: string;
-}
-
-export type CustomOptionProps = CustomOptionBaseProps & OptionProps<OptionTypeBase, boolean>;
-
-export type DropdownState = {
-  isDisabled: boolean;
-  selectProps: { readOnly: boolean };
-};
-
-export interface DropdownComponentProps extends CustomMenuBaseProps, CustomOptionBaseProps, VibeComponentProps {
-  /**
-   * Class name applied to the dropdown's single value wrapper.
-   */
-  singleValueWrapperClassName?: string;
-  /**
-   * Placeholder text displayed when no value is selected.
-   */
-  placeholder?: string;
-  /**
-   * If true, the placeholder will be truncated with an ellipsis when too long.
-   */
-  allowPlaceholderEllipsis?: boolean;
-  /**
-   * If true, the dropdown is disabled.
-   */
-  disabled?: boolean;
-  /**
-   * If true, the dropdown is read-only and cannot be edited.
-   */
-  readOnly?: boolean;
-  /**
-   * Callback fired when the dropdown menu opens.
-   */
-  onMenuOpen?: () => void;
-  /**
-   * Callback fired when the dropdown menu closes.
-   */
-  onMenuClose?: () => void;
-  /**
-   * Callback fired when a key is pressed inside the dropdown.
-   */
-  onKeyDown?: KeyboardEventHandler;
-  /**
-   * Callback fired when the dropdown gains focus.
-   */
-  onFocus?: FocusEventHandler;
-  /**
-   * Callback fired when the dropdown loses focus.
-   */
-  onBlur?: FocusEventHandler;
-  /**
-   * Callback fired when scrolling inside the dropdown.
-   */
-  onScroll?: UIEventHandler<HTMLDivElement>;
-  /**
-   * Callback fired when the user scrolls to the bottom of the menu.
-   */
-  onMenuScrollToBottom?: WheelEventHandler<HTMLDivElement>;
-  /**
-   * If true, prevents scrolling beyond the menu's boundaries.
-   */
-  captureMenuScroll?: boolean;
-  /**
-   * Callback fired when the selected value changes.
-   */
-  onChange?: (
-    option: DropdownOption | DropdownOption[],
-    meta: ActionMeta<DropdownOption> | React.MouseEvent | React.KeyboardEvent
-  ) => void;
-  /**
-   * Callback fired when the dropdown input value changes.
-   */
-  onInputChange?: (newValue: string, actionMeta: InputActionMeta) => void;
-  /**
-   * If true, enables search functionality within the dropdown.
-   */
-  searchable?: boolean;
-  /**
-   * The list of options available in the dropdown.
-   */
-  options?: DropdownOption[];
-  /**
-   * Function to customize the "no options found" message.
-   */
-  noOptionsMessage?: (obj: { inputValue: string }) => string | null;
-  /**
-   * If true, the menu opens when the dropdown gains focus.
-   */
-  openMenuOnFocus?: boolean;
-  /**
-   * If true, the menu opens when the dropdown is clicked.
-   */
-  openMenuOnClick?: boolean;
-  /**
-   * If true, displays a clear button inside the dropdown's input.
-   */
-  clearable?: boolean;
-  /**
-   * Custom renderer for each option.
-   */
-  optionRenderer?: (option: DropdownOption) => JSX.Element;
-  /**
-   * Custom renderer for the selected value.
-   */
-  valueRenderer?:
-    | React.ReactNode
-    | ((props: Omit<CustomSingleValueProps, "Renderer"> & DropdownOption) => React.ReactNode);
-  /**
-   *   Custom renderer for the selected value.
-   */
-  ValueRenderer?: React.ReactNode;
-  /**
-   * Custom renderer for the dropdown menu.
-   */
-  menuRenderer?: React.ReactElement | ((props: CustomMenuProps) => React.ReactElement);
-  /**
-   * The placement of the dropdown menu relative to the input.
-   */
-  menuPlacement?: DropdownMenuPlacement;
-  /**
-   * The CSS position property of the dropdown menu.
-   */
-  menuPosition?: DropdownMenuPosition;
-  /**
-   * If true, the dropdown is displayed in right-to-left mode.
-   */
-  rtl?: boolean;
-  /**
-   * The default selected value.
-   */
-  defaultValue?: DropdownOption[];
-  /**
-   * The controlled value of the dropdown.
-   */
-  value?: DropdownOption | DropdownOption[];
-  /**
-   * The size of the dropdown.
-   */
-  size?: DropdownSize;
-  /**
-   * Enables async loading of options.
-   */
-  asyncOptions?: (inputValue: string) => Promise<DropdownOption[]>;
-  /**
-   * If true, caches async-loaded options.
-   */
-  cacheOptions?: boolean;
-  /**
-   * If true, `asyncOptions` is invoked on mount.
-   */
-  defaultOptions?: boolean | DropdownOption[];
-  /**
-   * If true, enables virtualization for improved performance.
-   */
-  isVirtualized?: boolean;
-  /**
-   * The target element for the dropdown menu portal.
-   */
-  menuPortalTarget?: HTMLElement;
-  /**
-   * Custom styles for the dropdown.
-   */
-  extraStyles?: (...args: unknown[]) => unknown;
-  /**
-   * The maximum height of the menu before scrolling.
-   */
-  maxMenuHeight?: number;
-  /**
-   * The tab index of the dropdown for keyboard navigation.
-   */
-  tabIndex?: number | string;
-  /**
-   * If true, the dropdown input is automatically focused on mount.
-   */
-  autoFocus?: boolean;
-  /**
-   * If true, enables multi-select mode.
-   * When in multi-select mode, the selected value will be an array,
-   * and it will be displayed as our [`<Chips>`](/?path=/docs/components-chips--sandbox) component.
-   */
-  multi?: boolean;
-  /**
-   * If true, expands the dropdown to multiple lines when multiple values are selected.
+   * If true, the dropdown allows multiple lines of selected items.
    */
   multiline?: boolean;
   /**
-   * If true, closes the menu when an option is selected.
-   */
-  closeMenuOnSelect?: boolean;
-  /**
-   * If true, closes the menu when scrolling.
-   */
-  closeMenuOnScroll?: boolean;
-  /**
-   * Callback fired when an option is removed in multi-select mode.
-   */
-  onOptionRemove?: (option?: DropdownOption) => void;
-  /**
-   * If true, prevents mandatory default options from being removed.
-   */
-  withMandatoryDefaultOptions?: boolean;
-  /**
-   * Custom function to determine if an option is selected.
-   */
-  isOptionSelected?: (option: DropdownOption, options: DropdownOption[]) => boolean;
-  /**
-   * If true, allows the dropdown menu to overflow its container.
-   */
-  insideOverflowContainer?: boolean;
-  /**
-   * If true, allows the dropdown menu to overflow its container even with CSS transforms.
-   */
-  insideOverflowWithTransformContainer?: boolean;
-  /**
-   * If true, renders the dropdown menu inside its parent container in case it's inside a layer provider.
-   * Use this prop when the dropdown menu is being cut off by its parent's (such as Modal, Dialog, Tooltip, etc.)overflow settings.
-   */
-  insideLayerContext?: boolean;
-  /**
-   * Tooltip content displayed when hovering over the selected value.
-   */
-  tooltipContent?: string;
-  /**
-   * If true, displays a loading state inside the dropdown.
+   * Callback fired when an option is removed in multi-select mode. Only available when multi is true.
    */
-  isLoading?: boolean;
+  onOptionRemove?: (option: Item) => void;
   /**
-   * Function to override the default loading message.
+   * The function to call to render the selected value on single select mode.
    */
-  loadingMessage?: (obj: { inputValue: string }) => string | null;
+  valueRenderer?: never;
   /**
-   * The ARIA label for the dropdown.
+   * The default selected values for multi-select.
    */
-  ariaLabel?: string;
+  defaultValue?: Item[];
   /**
-   * If true, enables selecting values with the Tab key.
+   * The controlled selected values for multi-select.
    */
-  tabSelectsValue?: boolean;
+  value?: Item[];
   /**
-   * Custom function to filter options based on input.
+   * Callback fired when the selected values change in multi-select mode.
    */
-  filterOption?: (option: DropdownOption, inputValue: string) => boolean;
+  onChange?: (options: Item[]) => void;
   /**
-   * The current value of the input field.
+   * Minimum number of selected chips to always show before overflowing to the counter.
    */
-  inputValue?: string;
+  minVisibleCount?: number;
+}
+
+interface SingleSelectSpecifics<Item extends BaseItemData<Record<string, unknown>>> {
   /**
-   * If true, the input field loses focus when an option is selected.
+   * If true, the dropdown allows multiple selections. Defaults to false.
    */
-  blurInputOnSelect?: boolean;
+  multi?: false;
   /**
-   * Custom renderer for dropdown options.
+   * If true, the dropdown allows multiple lines of selected items. (Not available for single select)
    */
-  OptionRenderer?: React.ReactNode;
+  multiline?: never;
   /**
-   * If true, controls the menu open state.
+   * Callback fired when an option is removed in multi-select mode. (Not available for single select)
    */
-  menuIsOpen?: boolean;
+  onOptionRemove?: never;
   /**
-   * Callback fired when an option is selected.
+   * The function to call to render the selected value on single select mode.
    */
-  onOptionSelect?: (option: DropdownOption) => void;
+  valueRenderer?: (option: Item) => React.ReactNode;
   /**
-   * Callback fired when the clear button is clicked.
+   * The default selected value for single-select.
    */
-  onClear?: () => void;
+  defaultValue?: Item;
   /**
-   * CSS selector for the container where popups are rendered.
+   * The controlled selected value for single-select.
    */
-  popupsContainerSelector?: string;
+  value?: Item;
   /**
-   * Additional properties passed to the `react-select` component.
+   * Callback fired when the selected value changes in single-select mode.
    */
-  selectProps?: Record<string, string>;
+  onChange?: (option: Item) => void;
   /**
-   * If true, displays dividers between grouped options.
-   */
-  withGroupDivider?: boolean;
-  /*
-   * Class name to be added to multi select dialog
+   * Minimum number of selected chips to always show before overflowing to the counter. (Not available for single select)
    */
-  multiValueDialogClassName?: string;
+  minVisibleCount?: never;
 }
 
-export type DropdownProps = DropdownComponentProps;
+type BoxModeConstraint =
+  | {
+      /**
+       * If true, the dropdown is searchable.
+       */
+      searchable?: false;
+      /**
+       * If true, the dropdown menu is displayed inline without a popup/dialog.
+       */
+      boxMode?: false;
+    }
+  | {
+      /**
+       * If true, the dropdown is searchable.
+       */
+      searchable: true;
+      /**
+       * If true, the dropdown menu is displayed inline without a popup/dialog.
+       */
+      boxMode?: boolean;
+    };
+
+export type BaseDropdownProps<Item extends BaseItemData<Record<string, unknown>>> = VibeComponentProps &
+  BoxModeConstraint & {
+    /**
+     * The list of options available in the list.
+     */
+    options: DropdownGroupOption<Item>;
+    /**
+     * Props to be passed to the Tooltip component that wraps the dropdown.
+     */
+    tooltipProps?: Partial<TooltipProps>;
+    /**
+     * If true, displays dividers between grouped options.
+     */
+    withGroupDivider?: boolean;
+    /**
+     * If true, makes the group title sticky.
+     */
+    stickyGroupTitle?: boolean;
+    /**
+     * The size of the dropdown.
+     */
+    size?: DropdownSizes;
+    /**
+     * The direction of the dropdown.
+     */
+    dir?: DropdownDirection;
+    /**
+     * If true, the dropdown has no visible border by default, but shows border on hover, focus, and active states.
+     */
+    borderless?: boolean;
+    /**
+     * The function to call to render an option.
+     */
+    optionRenderer?: (option: Item) => React.ReactNode;
+    /**
+     * The function to call to render the menu.
+     */
+    menuRenderer?: (props: {
+      children: React.ReactNode;
+      filteredOptions: DropdownListGroup<Item>[];
+      selectedItems: Item[];
+      getItemProps: (options: any) => Record<string, unknown>;
+    }) => React.ReactNode;
+    /**
+     * The message to display when there are no options.
+     */
+    noOptionsMessage?: string | React.ReactNode;
+    /**
+     * The placeholder to display when the dropdown is empty.
+     */
+    placeholder?: string;
+    /**
+     * If true, the dropdown is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * If true, the dropdown is read only.
+     */
+    readOnly?: boolean;
+    /**
+     * If true, the dropdown is in an error state.
+     */
+    error?: boolean;
+    /**
+     * The helper text to display below the dropdown.
+     */
+    helperText?: string;
+    /**
+     * If true, the dropdown is required.
+     */
+    required?: boolean;
+    /**
+     * The label to display above the dropdown.
+     */
+    label?: string;
+    /**
+     * The ARIA label for the dropdown.
+     */
+    "aria-label"?: string;
+    /**
+     * The ARIA label for the dropdown input.
+     */
+    inputAriaLabel?: string;
+    /**
+     * The ARIA label for the menu container.
+     */
+    menuAriaLabel?: string;
+    /**
+     * The ARIA label for the clear button.
+     */
+    clearAriaLabel?: string;
+    /**
+     * The current value of the input field.
+     */
+    inputValue?: string;
+    /**
+     * The maximum height of the dropdown menu.
+     */
+    maxMenuHeight?: number;
+    /**
+     * If true, controls the menu open state.
+     */
+    isMenuOpen?: boolean;
+    /**
+     * If true, closes the menu when an option is selected.
+     */
+    closeMenuOnSelect?: boolean;
+    /**
+     * If true, the dropdown menu will be auto focused.
+     */
+    autoFocus?: boolean;
+    /**
+     * If true, the dropdown will have a clear button.
+     */
+    clearable?: boolean;
+    /**
+     * Callback fired when the dropdown loses focus.
+     */
+    onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;
+    /**
+     * Callback fired when the clear button is clicked.
+     */
+    onClear?: () => void;
+    /**
+     * Callback fired when the dropdown gains focus.
+     */
+    onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;
+    /**
+     * Callback fired when the dropdown input value changes.
+     */
+    onInputChange?: (input: string | null) => void;
+    /**
+     * Callback fired when a key is pressed inside the dropdown.
+     */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+    /**
+     * Callback fired when the dropdown menu opens.
+     */
+    onMenuOpen?: () => void;
+    /**
+     * Callback fired when the dropdown menu closes.
+     */
+    onMenuClose?: () => void;
+    /**
+     * Callback fired when an option is selected.
+     */
+    onOptionSelect?: (option: Item) => void;
+    /**
+     * Callback fired when scrolling inside the dropdown.
+     */
+    onScroll?: (event: React.UIEvent<HTMLUListElement>) => void;
+    /**
+     * A function to customize the filtering of options.
+     * It receives an option and the current input value, and should return true if the option should be included, false otherwise.
+     */
+    filterOption?: (option: Item, inputValue: string) => boolean;
+    /**
+     * If false, selected options will be hidden from the list. Defaults to true.
+     */
+    showSelectedOptions?: boolean;
+    /**
+     * The class name to be applied to the menu wrapper.
+     */
+    menuWrapperClassName?: string;
+    /**
+     * If true, displays a loading indicator in the dropdown controls.
+     */
+    loading?: boolean;
+  } & (MultiSelectSpecifics<Item> | SingleSelectSpecifics<Item>);
 
-export type DropdownChipColors = "primary" | "negative" | "positive";
+export type DropdownSizes = "small" | "medium" | "large";
 
-export type DropdownMenuPosition = "absolute" | "fixed";
+export type DropdownDirection = "ltr" | "rtl" | "auto";
 
-export type DropdownMenuPlacement = "top" | "bottom" | "auto";
+export type DropdownMultiControllerProps<Item extends BaseItemData<Record<string, unknown>>> = Omit<
+  BaseDropdownProps<Item>,
+  keyof MultiSelectSpecifics<Item> | keyof BoxModeConstraint
+> &
+  BoxModeConstraint &
+  MultiSelectSpecifics<Item> & {
+    dropdownRef: React.Ref<HTMLDivElement>;
+  };
 
-export type DropdownSize = "small" | "medium" | "large";
+export type DropdownSingleControllerProps<Item extends BaseItemData<Record<string, unknown>>> = Omit<
+  BaseDropdownProps<Item>,
+  keyof SingleSelectSpecifics<Item> | keyof BoxModeConstraint
+> &
+  BoxModeConstraint &
+  SingleSelectSpecifics<Item> & {
+    dropdownRef: React.Ref<HTMLDivElement>;
+  };
diff --git a/packages/core/src/components/Dropdown/DropdownConstants.ts b/packages/core/src/components/Dropdown/DropdownConstants.ts
deleted file mode 100644
index 5950a64ec9..0000000000
--- a/packages/core/src/components/Dropdown/DropdownConstants.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-export const defaultCustomStyles = (baseStyles: string) => baseStyles;
-
-export const ADD_AUTO_HEIGHT_COMPONENTS = ["container", "control", "valueContainer"];
-
-export const DROPDOWN_ID = "dropdown-menu-id";
-export const DROPDOWN_MENU_ID = "dropdown-menu-list-id";
-export const DROPDOWN_MENU_ARIA_LABEL = "Dropdown menu";
-export const DROPDOWN_INPUT_ARIA_LABEL = "Dropdown input";
-
-/**
- * @deprecated
- */
-export enum DROPDOWN_CHIP_COLORS {
-  PRIMARY = "primary",
-  NEGATIVE = "negative",
-  POSITIVE = "positive"
-}
-
-/**
- * @deprecated
- */
-export enum DROPDOWN_MENU_POSITION {
-  ABSOLUTE = "absolute",
-  FIXED = "fixed"
-}
-
-/**
- * @deprecated
- */
-export enum DROPDOWN_MENU_PLACEMENT {
-  TOP = "top",
-  BOTTOM = "bottom",
-  AUTO = "auto"
-}
diff --git a/packages/core/src/components/Dropdown/DropdownConstants.tsx b/packages/core/src/components/Dropdown/DropdownConstants.tsx
deleted file mode 100644
index 6f308e40d4..0000000000
--- a/packages/core/src/components/Dropdown/DropdownConstants.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { type Theme } from "../ThemeProvider/ThemeProviderConstants";
-
-export const defaultCustomStyles = (baseStyles: string) => baseStyles;
-
-export enum ADD_AUTO_HEIGHT_COMPONENTS {
-  CONTAINER = "container",
-  CONTROL = "control",
-  VALUE_CONTAINER = "valueContainer"
-}
-
-export const DROPDOWN_MENU_ARIA_LABEL = "Dropdown menu";
-
-export const DROPDOWN_MENU_ID = "dropdown-menu-list-id";
-
-export const DROPDOWN_ID = "dropdown-menu-id";
-
-export enum DROPDOWN_CHIP_COLORS {
-  PRIMARY = "PRIMARY",
-  NEGATIVE = "NEGATIVE",
-  POSITIVE = "POSITIVE"
-}
-
-export enum DROPDOWN_MENU_POSITION {
-  ABSOLUTE = "absolute",
-  FIXED = "fixed"
-}
-
-export enum DROPDOWN_MENU_PLACEMENT {
-  TOP = "top",
-  BOTTOM = "bottom",
-  AUTO = "auto"
-}
-
-export type DropdownOption = {
-  label: string;
-  value: string | number | Theme;
-  isMandatory?: boolean;
-};
diff --git a/packages/core/src/components/next/Dropdown/__tests__/BaseList.test.tsx b/packages/core/src/components/Dropdown/__tests__/BaseList.test.tsx
similarity index 100%
rename from packages/core/src/components/next/Dropdown/__tests__/BaseList.test.tsx
rename to packages/core/src/components/Dropdown/__tests__/BaseList.test.tsx
diff --git a/packages/core/src/components/Dropdown/__tests__/Dropdown.snapshot.test.jsx b/packages/core/src/components/Dropdown/__tests__/Dropdown.snapshot.test.jsx
deleted file mode 100644
index e26120c7d9..0000000000
--- a/packages/core/src/components/Dropdown/__tests__/Dropdown.snapshot.test.jsx
+++ /dev/null
@@ -1,207 +0,0 @@
-import { describe, it, expect } from "vitest";
-import React from "react";
-import renderer from "react-test-renderer";
-import Dropdown from "../Dropdown";
-import DropdownDriver from "./driver";
-import { Email } from "@vibe/icons";
-
-const mockOptions = [
-  { value: "ocean", label: "Ocean", isFixed: true },
-  { value: "blue", label: "Blue", isDisabled: true },
-  { value: "purple", label: "Purple" },
-  { value: "red", label: "Red", isFixed: true },
-  { value: "orange", label: "Orange" },
-  { value: "yellow", label: "Yellow" }
-];
-
-describe("Dropdown renders correctly", () => {
-  it("with empty props", () => {
-    const tree = renderer.create(<Dropdown />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it("with className", () => {
-    const tree = renderer.create(<Dropdown className="test" />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it("with placeholder", () => {
-    const tree = renderer.create(<Dropdown placeholder="text" />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it("when disabled", () => {
-    const tree = renderer.create(<Dropdown disabled />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it("when readOnly", () => {
-    const tree = renderer.create(<Dropdown readOnly />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it("without clear button", () => {
-    const tree = renderer.create(<Dropdown clearable={false} />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it("when rtl", () => {
-    const tree = renderer.create(<Dropdown rtl />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it("with options", () => {
-    const tree = renderer.create(<Dropdown options={mockOptions} />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it("with id", () => {
-    const tree = renderer.create(<Dropdown placeholidder="test" />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it("with autoFocus", () => {
-    const tree = renderer.create(<Dropdown autoFocus />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it("with multi", () => {
-    const tree = renderer.create(<Dropdown multi />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it("with multi and disabled", () => {
-    const tree = renderer
-      .create(<Dropdown multi disabled options={mockOptions} defaultValue={[mockOptions[0], mockOptions[1]]} />)
-      .toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it("with multi and readonly", () => {
-    const tree = renderer
-      .create(<Dropdown multi readOnly options={mockOptions} defaultValue={[mockOptions[0], mockOptions[1]]} />)
-      .toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it("with multiline", () => {
-    const tree = renderer.create(<Dropdown multiline />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it("with leftAvatar", () => {
-    const options = [
-      {
-        value: "ocean",
-        label: "Ocean",
-        leftAvatar: "image-url.jpg"
-      }
-    ];
-    const tree = renderer.create(<Dropdown options={options} defaultValue={[options[0]]} multi multiline />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it("with chip colors", () => {
-    const options = [
-      {
-        value: "primary",
-        label: "Primary",
-        chipColor: Dropdown.chipColors.PRIMARY
-      },
-      {
-        value: "positive",
-        label: "Positive",
-        chipColor: Dropdown.chipColors.POSITIVE
-      },
-      {
-        value: "negative",
-        label: "Negative",
-        chipColor: Dropdown.chipColors.NEGATIVE
-      }
-    ];
-    const tree = renderer.create(<Dropdown options={options} defaultValue={options} multi multiline />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it("with leftIcon", () => {
-    const options = [
-      {
-        value: "ocean",
-        label: "Ocean",
-        leftIcon: Email
-      }
-    ];
-    const tree = renderer.create(<Dropdown options={options} defaultValue={[options[0]]} multi multiline />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it("with tabIndex", () => {
-    const tree = renderer.create(<Dropdown tabIndex={9999} />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it("with value", () => {
-    const tree = renderer.create(<Dropdown value={mockOptions[0]} />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it("with defaultValue", () => {
-    const tree = renderer.create(<Dropdown defaultValue={mockOptions[0]} />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it("with tooltipContent", () => {
-    const tree = renderer.create(<Dropdown tooltipContent="tooltip content" />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  describe("snapshot driver", () => {
-    it("should render correctly with empty props", () => {
-      const component = new DropdownDriver();
-
-      expect(component.snapshot).toMatchSnapshot();
-    });
-
-    it("should render correctly for the different sizes", () => {
-      Object.values(Dropdown.sizes).forEach(size => {
-        const component = new DropdownDriver().withSize(size).withPlaceholder();
-
-        expect(component.snapshot).toMatchSnapshot();
-      });
-    });
-
-    it("should use virtualization if set", async () => {
-      const component = new DropdownDriver().withOpenMenuOnClick().withOpenMenuOnFocus().withVirtualizedOptions();
-
-      // Wait for useEffect to finish
-      await component.renderWithEffects();
-      component.focusInput();
-
-      expect(component.snapshot).toMatchSnapshot();
-    });
-
-    it("should use async if set", () => {
-      const component = new DropdownDriver().withAsyncOptions().withDefaultOptions();
-
-      component.focusInput();
-
-      expect(component.snapshot).toMatchSnapshot();
-    });
-
-    it("should open menu on focus if set", () => {
-      const component = new DropdownDriver().withOpenMenuOnClick().withOptions();
-
-      component.focusInput();
-
-      expect(component.snapshot).toMatchSnapshot();
-    });
-
-    it("should open menu on click if set", () => {
-      const component = new DropdownDriver().withOpenMenuOnClick().withOptions();
-
-      component.clickInput();
-
-      expect(component.snapshot).toMatchSnapshot();
-    });
-  });
-});
diff --git a/packages/core/src/components/Dropdown/__tests__/Dropdown.test.jsx b/packages/core/src/components/Dropdown/__tests__/Dropdown.test.jsx
deleted file mode 100644
index e8cbf06836..0000000000
--- a/packages/core/src/components/Dropdown/__tests__/Dropdown.test.jsx
+++ /dev/null
@@ -1,235 +0,0 @@
-import { vi, beforeEach, afterEach, describe, it, expect } from "vitest";
-import DropdownDriver from "./driver.jsx";
-import React from "react";
-
-describe("Dropdown", () => {
-  beforeEach(() => {
-    vi.useFakeTimers();
-  });
-
-  afterEach(() => {
-    vi.useRealTimers();
-  });
-
-  const mockOptions = [
-    { value: "ocean", label: "Ocean", isFixed: true },
-    { value: "blue", label: "Blue", isDisabled: true },
-    { value: "purple", label: "Purple" },
-    { value: "red", label: "Red", isFixed: true },
-    { value: "orange", label: "Orange" },
-    { value: "yellow", label: "Yellow" }
-  ];
-
-  describe("extraStyles", () => {
-    it("Should support extending style groups with monday defaults", () => {
-      const expectedWidth = 310;
-      const component = new DropdownDriver()
-        .withOptions()
-        .withOpenMenuOnFocus()
-        .withExtraStyles(baseStyles => ({
-          ...baseStyles,
-          menu: base => ({ ...base, width: expectedWidth })
-        }));
-
-      component.focusInput();
-      expect(getComputedStyle(component.dropdownMenu).width).toBe(`${expectedWidth}px`);
-    });
-
-    it("Should support extending style groupd that don't have monday defaults", () => {
-      const expectedZIndex = "9999999";
-      const component = new DropdownDriver().withOpenMenuOnFocus().withExtraStyles(() => ({
-        noOptionsMessage: base => ({ ...base, zIndex: expectedZIndex })
-      }));
-
-      component.focusInput();
-
-      expect(getComputedStyle(component.noOptionsMessage).zIndex).toBe(expectedZIndex);
-    });
-  });
-
-  describe("Controlled", () => {
-    let component;
-
-    beforeEach(() => {
-      component = new DropdownDriver().withOptions().withValue(mockOptions[0]);
-    });
-
-    it("Should display the provided value", () => {
-      component.render();
-
-      expect(component.singleValueText).toContain("Ocean");
-    });
-
-    it("Should not change value internally", () => {
-      component.selectOption(2);
-      component.render();
-
-      expect(component.singleValueText).toContain("Ocean");
-    });
-
-    it("Should change displayed value when passed a new value", () => {
-      component.withOnChange(option => {
-        component.props.value = option;
-      });
-
-      component.render();
-      component.selectOption(2);
-      component.render();
-
-      expect(component.singleValueText).toContain("Purple");
-    });
-  });
-
-  describe("ref forwarding", () => {
-    let component;
-    const ref = React.createRef();
-    const onFocus = vi.fn();
-
-    beforeEach(() => {
-      component = new DropdownDriver().withOptions().withValue(mockOptions[0]).withRef(ref).withOnFocus(onFocus);
-    });
-
-    it("Should be able to focus input via ref", () => {
-      component.render();
-
-      expect(ref.current).not.toBeUndefined();
-      component.focusSelect(ref);
-
-      expect(onFocus).toBeCalled();
-    });
-  });
-
-  describe("multi", () => {
-    let component;
-    const onChange = vi.fn();
-    const onClear = vi.fn();
-    const onOptionRemove = vi.fn();
-
-    beforeEach(() => {
-      // Reset all mocks before each test
-      onChange.mockReset();
-      onClear.mockReset();
-      onOptionRemove.mockReset();
-
-      component = new DropdownDriver()
-        .withOptions()
-        .withMulti()
-        .withOnChange(onChange)
-        .withOnOptionRemove(onOptionRemove)
-        .withOnClear(onClear);
-    });
-
-    it("Should support selecting multiple options", () => {
-      component.selectOption(0);
-      component.selectOption(2);
-      component.selectOption(3);
-
-      expect(onChange).toBeCalledTimes(3);
-      expect(onChange).toHaveBeenLastCalledWith([mockOptions[0], mockOptions[2], mockOptions[3]], {
-        action: "select-option",
-        option: mockOptions[3]
-      });
-      expect(component.chips.values).toEqual(["ocean", "purple", "red"]);
-    });
-
-    it("Should support removing selected options", () => {
-      component.selectOption(0);
-      component.selectOption(2);
-      component.selectOption(3);
-
-      component.removeOption(0);
-
-      expect(onChange).toBeCalledTimes(4);
-      expect(onChange).toHaveBeenLastCalledWith([mockOptions[2], mockOptions[3]], {
-        action: "remove-value",
-        removedValue: mockOptions[0]
-      });
-      expect(onOptionRemove).toBeCalledWith(mockOptions[0]);
-      expect(component.chips.values).toEqual(["purple", "red"]);
-    });
-
-    it("Should support clearing options", () => {
-      component.selectOption(0);
-
-      component.clearOptions();
-      component.render();
-
-      expect(onChange).toBeCalledTimes(2);
-      expect(onChange).toHaveBeenLastCalledWith(null, {
-        action: "clear"
-      });
-      expect(onClear).toBeCalled();
-      expect(component.chips.values).toEqual([]);
-    });
-
-    it("should not show the X in default value chips in default options  are mandatory state", () => {
-      component = new DropdownDriver()
-        .withMandatoryDefaultOptions()
-        .withMulti()
-        .withOptions()
-        .withDefaultValue([mockOptions[0]]);
-
-      const button = component.getCloseButton(0);
-      component.render();
-
-      expect(button).toBe(null);
-    });
-
-    describe("Controlled", () => {
-      let value;
-
-      beforeEach(() => {
-        value = [component.options[0], component.options[2]];
-        component.withValue(value);
-      });
-
-      it("Should support selecting multiple options", () => {
-        component.withOnOptionSelect(option => value.push(option));
-
-        component.selectOption(3);
-        component.render();
-
-        expect(component.chips.values).toEqual(["ocean", "purple", "red"]);
-      });
-
-      it("Should support removing options", () => {
-        component.withOnOptionRemove(() => value.pop());
-
-        component.removeOption(2);
-        component.render();
-
-        expect(component.chips.values).toEqual(["ocean"]);
-      });
-
-      it("Should support clearing options", () => {
-        component.withOnClear(() => {
-          value.length = 0;
-        });
-
-        component.clearOptions();
-        component.render();
-
-        expect(component.chips.values).toEqual([]);
-      });
-    });
-  });
-
-  describe("input aria attributes", () => {
-    const cases = [
-      { searchable: false, expectedReadOnly: true },
-      { searchable: true, expectedReadOnly: false }
-    ];
-
-    cases.forEach(({ searchable, expectedReadOnly }) => {
-      it(`Should set correct ARIA attributes when searchable is ${searchable}`, () => {
-        const component = new DropdownDriver().withOptions().withValue(mockOptions[0]).withSearchable(searchable);
-        component.render();
-        const inputElement = component.input;
-        expect(inputElement.getAttribute("aria-label")).toBe("Dropdown input");
-        expect(inputElement.getAttribute("role")).toBe("combobox");
-        expect(inputElement.hasAttribute("readOnly")).toBe(expectedReadOnly);
-        expect(inputElement.getAttribute("aria-expanded")).toBe("false");
-      });
-    });
-  });
-});
diff --git a/packages/core/src/components/next/Dropdown/__tests__/Dropdown.test.tsx b/packages/core/src/components/Dropdown/__tests__/Dropdown.test.tsx
similarity index 99%
rename from packages/core/src/components/next/Dropdown/__tests__/Dropdown.test.tsx
rename to packages/core/src/components/Dropdown/__tests__/Dropdown.test.tsx
index 9bf29ad6bc..6bf45594e0 100644
--- a/packages/core/src/components/next/Dropdown/__tests__/Dropdown.test.tsx
+++ b/packages/core/src/components/Dropdown/__tests__/Dropdown.test.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import { render, fireEvent, within } from "@testing-library/react";
 import Dropdown from "../Dropdown";
 import { type BaseDropdownProps } from "../Dropdown.types";
-import { type BaseItemData } from "../../../BaseItem";
+import { type BaseItemData } from "../../BaseItem";
 import { type DropdownListGroup } from "../components/DropdownBaseList/DropdownBaseList.types";
 
 const defaultOptions = [
diff --git a/packages/core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.snapshot.test.jsx.snap b/packages/core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.snapshot.test.jsx.snap
deleted file mode 100644
index 428d5b3bb2..0000000000
--- a/packages/core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.snapshot.test.jsx.snap
+++ /dev/null
@@ -1,4065 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`Dropdown renders correctly > snapshot driver > should open menu on click if set 1`] = `
-<DocumentFragment>
-  <div
-    class="dropdown dropdown-story css-bbwnb8-container"
-    id="dropdown-menu-id"
-  >
-    <div>
-      <div
-        class=" css-11nd28h-control"
-      >
-        <div
-          class=" css-j6eacz-ValueContainer"
-        >
-          <div
-            class=" css-1usuuna-placeholder"
-          />
-          <div
-            class="css-1m8eskj-Input"
-          >
-            <div
-              class=""
-              style="display: inline-block;"
-            >
-              <input
-                aria-activedescendant="react-select-30-option-0"
-                aria-autocomplete="list"
-                aria-controls="dropdown-menu-list-id"
-                aria-expanded="true"
-                aria-label="Dropdown input"
-                autocapitalize="none"
-                autocomplete="off"
-                autocorrect="off"
-                id="react-select-30-input"
-                role="combobox"
-                spellcheck="false"
-                style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                tabindex="0"
-                type="text"
-                value=""
-              />
-              <div
-                style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          class=" css-hcxwnl-IndicatorsContainer"
-        >
-          <span
-            class=" css-1xjgjl1-IndicatorSeparator"
-          />
-          <div
-            aria-hidden="true"
-            class="dropdown-indicator css-1pxbrck-indicatorContainer"
-          >
-            <svg
-              aria-hidden="true"
-              class="icon"
-              data-testid="icon"
-              data-vibe="Icon"
-              fill="currentColor"
-              height="20px"
-              tabindex="-1"
-              viewBox="0 0 20 20"
-              width="20px"
-            >
-              <path
-                d="M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z"
-              />
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="dropdownMenuWrapper withoutAnimation css-1ysewv0-menu"
-    >
-      <div
-        class=" css-4ljt47-MenuList"
-      >
-        <div
-          aria-selected="false"
-          class="optionReset css-1iwu591-option"
-          id="react-select-30-option-0"
-          role="option"
-          tabindex="-1"
-        >
-          <div
-            class="valueContainer"
-            data-testid="dropdown-option-content"
-          >
-            <div
-              class="typography inherit start singleLineEllipsis text text2Normal"
-              data-testid="text"
-            >
-              Ocean
-            </div>
-          </div>
-        </div>
-        <div
-          aria-selected="false"
-          class="optionReset css-qj04r2-option"
-          id="react-select-30-option-1"
-          role="option"
-          tabindex="-1"
-        >
-          <div
-            class="valueContainer"
-            data-testid="dropdown-option-content"
-          >
-            <div
-              class="typography inherit start singleLineEllipsis text text2Normal"
-              data-testid="text"
-            >
-              Blue
-            </div>
-          </div>
-        </div>
-        <div
-          aria-selected="false"
-          class="optionReset css-6ztf41-option"
-          id="react-select-30-option-2"
-          role="option"
-          tabindex="-1"
-        >
-          <div
-            class="valueContainer"
-            data-testid="dropdown-option-content"
-          >
-            <div
-              class="typography inherit start singleLineEllipsis text text2Normal"
-              data-testid="text"
-            >
-              Purple
-            </div>
-          </div>
-        </div>
-        <div
-          aria-selected="false"
-          class="optionReset css-6ztf41-option"
-          id="react-select-30-option-3"
-          role="option"
-          tabindex="-1"
-        >
-          <div
-            class="valueContainer"
-            data-testid="dropdown-option-content"
-          >
-            <div
-              class="typography inherit start singleLineEllipsis text text2Normal"
-              data-testid="text"
-            >
-              Red
-            </div>
-          </div>
-        </div>
-        <div
-          aria-selected="false"
-          class="optionReset css-6ztf41-option"
-          id="react-select-30-option-4"
-          role="option"
-          tabindex="-1"
-        >
-          <div
-            class="valueContainer"
-            data-testid="dropdown-option-content"
-          >
-            <div
-              class="typography inherit start singleLineEllipsis text text2Normal"
-              data-testid="text"
-            >
-              Orange
-            </div>
-          </div>
-        </div>
-        <div
-          aria-selected="false"
-          class="optionReset css-6ztf41-option"
-          id="react-select-30-option-5"
-          role="option"
-          tabindex="-1"
-        >
-          <div
-            class="valueContainer"
-            data-testid="dropdown-option-content"
-          >
-            <div
-              class="typography inherit start singleLineEllipsis text text2Normal"
-              data-testid="text"
-            >
-              Yellow
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Dropdown renders correctly > snapshot driver > should open menu on focus if set 1`] = `
-<DocumentFragment>
-  <div
-    class="dropdown dropdown-story css-bbwnb8-container"
-    id="dropdown-menu-id"
-  >
-    <div>
-      <div
-        class=" css-11nd28h-control"
-      >
-        <div
-          class=" css-j6eacz-ValueContainer"
-        >
-          <div
-            class=" css-1usuuna-placeholder"
-          />
-          <div
-            class="css-1m8eskj-Input"
-          >
-            <div
-              class=""
-              style="display: inline-block;"
-            >
-              <input
-                aria-activedescendant=""
-                aria-autocomplete="list"
-                aria-controls="dropdown-menu-list-id"
-                aria-expanded="false"
-                aria-label="Dropdown input"
-                autocapitalize="none"
-                autocomplete="off"
-                autocorrect="off"
-                id="react-select-29-input"
-                role="combobox"
-                spellcheck="false"
-                style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                tabindex="0"
-                type="text"
-                value=""
-              />
-              <div
-                style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          class=" css-hcxwnl-IndicatorsContainer"
-        >
-          <span
-            class=" css-1xjgjl1-IndicatorSeparator"
-          />
-          <div
-            aria-hidden="true"
-            class="dropdown-indicator css-slqvkp-indicatorContainer"
-          >
-            <svg
-              aria-hidden="true"
-              class="icon"
-              data-testid="icon"
-              data-vibe="Icon"
-              fill="currentColor"
-              height="20px"
-              tabindex="-1"
-              viewBox="0 0 20 20"
-              width="20px"
-            >
-              <path
-                d="M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z"
-              />
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Dropdown renders correctly > snapshot driver > should render correctly for the different sizes 1`] = `
-<DocumentFragment>
-  <div
-    class="dropdown dropdown-story css-1pu8kyc-container"
-    id="dropdown-menu-id"
-  >
-    <div>
-      <div
-        class=" css-118upmw-control"
-      >
-        <div
-          class=" css-qwj9xx-ValueContainer"
-        >
-          <div
-            class=" css-1usuuna-placeholder"
-          />
-          <div
-            class="css-1m8eskj-Input"
-          >
-            <div
-              class=""
-              style="display: inline-block;"
-            >
-              <input
-                aria-activedescendant=""
-                aria-autocomplete="list"
-                aria-controls="dropdown-menu-list-id"
-                aria-expanded="false"
-                aria-label="Dropdown input"
-                autocapitalize="none"
-                autocomplete="off"
-                autocorrect="off"
-                id="react-select-24-input"
-                role="combobox"
-                spellcheck="false"
-                style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                tabindex="0"
-                type="text"
-                value=""
-              />
-              <div
-                style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          class=" css-12cxbpe-IndicatorsContainer"
-        >
-          <span
-            class=" css-1xjgjl1-IndicatorSeparator"
-          />
-          <div
-            aria-hidden="true"
-            class="dropdown-indicator css-prutdb-indicatorContainer"
-          >
-            <svg
-              aria-hidden="true"
-              class="icon"
-              data-testid="icon"
-              data-vibe="Icon"
-              fill="currentColor"
-              height="16px"
-              tabindex="-1"
-              viewBox="0 0 20 20"
-              width="16px"
-            >
-              <path
-                d="M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z"
-              />
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Dropdown renders correctly > snapshot driver > should render correctly for the different sizes 2`] = `
-<DocumentFragment>
-  <div
-    class="dropdown dropdown-story css-bbwnb8-container"
-    id="dropdown-menu-id"
-  >
-    <div>
-      <div
-        class=" css-13ywfe7-control"
-      >
-        <div
-          class=" css-j6eacz-ValueContainer"
-        >
-          <div
-            class=" css-1usuuna-placeholder"
-          />
-          <div
-            class="css-1m8eskj-Input"
-          >
-            <div
-              class=""
-              style="display: inline-block;"
-            >
-              <input
-                aria-activedescendant=""
-                aria-autocomplete="list"
-                aria-controls="dropdown-menu-list-id"
-                aria-expanded="false"
-                aria-label="Dropdown input"
-                autocapitalize="none"
-                autocomplete="off"
-                autocorrect="off"
-                id="react-select-25-input"
-                role="combobox"
-                spellcheck="false"
-                style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                tabindex="0"
-                type="text"
-                value=""
-              />
-              <div
-                style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          class=" css-hcxwnl-IndicatorsContainer"
-        >
-          <span
-            class=" css-1xjgjl1-IndicatorSeparator"
-          />
-          <div
-            aria-hidden="true"
-            class="dropdown-indicator css-1ycu3uq-indicatorContainer"
-          >
-            <svg
-              aria-hidden="true"
-              class="icon"
-              data-testid="icon"
-              data-vibe="Icon"
-              fill="currentColor"
-              height="20px"
-              tabindex="-1"
-              viewBox="0 0 20 20"
-              width="20px"
-            >
-              <path
-                d="M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z"
-              />
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Dropdown renders correctly > snapshot driver > should render correctly for the different sizes 3`] = `
-<DocumentFragment>
-  <div
-    class="dropdown dropdown-story css-cmnsoe-container"
-    id="dropdown-menu-id"
-  >
-    <div>
-      <div
-        class=" css-1qrvste-control"
-      >
-        <div
-          class=" css-c7u1lp-ValueContainer"
-        >
-          <div
-            class=" css-1usuuna-placeholder"
-          />
-          <div
-            class="css-1m8eskj-Input"
-          >
-            <div
-              class=""
-              style="display: inline-block;"
-            >
-              <input
-                aria-activedescendant=""
-                aria-autocomplete="list"
-                aria-controls="dropdown-menu-list-id"
-                aria-expanded="false"
-                aria-label="Dropdown input"
-                autocapitalize="none"
-                autocomplete="off"
-                autocorrect="off"
-                id="react-select-26-input"
-                role="combobox"
-                spellcheck="false"
-                style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                tabindex="0"
-                type="text"
-                value=""
-              />
-              <div
-                style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          class=" css-1b5f2fp-IndicatorsContainer"
-        >
-          <span
-            class=" css-1xjgjl1-IndicatorSeparator"
-          />
-          <div
-            aria-hidden="true"
-            class="dropdown-indicator css-1uglcx3-indicatorContainer"
-          >
-            <svg
-              aria-hidden="true"
-              class="icon"
-              data-testid="icon"
-              data-vibe="Icon"
-              fill="currentColor"
-              height="20px"
-              tabindex="-1"
-              viewBox="0 0 20 20"
-              width="20px"
-            >
-              <path
-                d="M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z"
-              />
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Dropdown renders correctly > snapshot driver > should render correctly with empty props 1`] = `
-<DocumentFragment>
-  <div
-    class="dropdown dropdown-story css-bbwnb8-container"
-    id="dropdown-menu-id"
-  >
-    <div>
-      <div
-        class=" css-13ywfe7-control"
-      >
-        <div
-          class=" css-j6eacz-ValueContainer"
-        >
-          <div
-            class=" css-1usuuna-placeholder"
-          />
-          <div
-            class="css-1m8eskj-Input"
-          >
-            <div
-              class=""
-              style="display: inline-block;"
-            >
-              <input
-                aria-activedescendant=""
-                aria-autocomplete="list"
-                aria-controls="dropdown-menu-list-id"
-                aria-expanded="false"
-                aria-label="Dropdown input"
-                autocapitalize="none"
-                autocomplete="off"
-                autocorrect="off"
-                id="react-select-23-input"
-                role="combobox"
-                spellcheck="false"
-                style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                tabindex="0"
-                type="text"
-                value=""
-              />
-              <div
-                style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          class=" css-hcxwnl-IndicatorsContainer"
-        >
-          <span
-            class=" css-1xjgjl1-IndicatorSeparator"
-          />
-          <div
-            aria-hidden="true"
-            class="dropdown-indicator css-1ycu3uq-indicatorContainer"
-          >
-            <svg
-              aria-hidden="true"
-              class="icon"
-              data-testid="icon"
-              data-vibe="Icon"
-              fill="currentColor"
-              height="20px"
-              tabindex="-1"
-              viewBox="0 0 20 20"
-              width="20px"
-            >
-              <path
-                d="M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z"
-              />
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Dropdown renders correctly > snapshot driver > should use async if set 1`] = `
-<DocumentFragment>
-  <div
-    class="dropdown dropdown-story css-bbwnb8-container"
-    id="dropdown-menu-id"
-  >
-    <div>
-      <div
-        class=" css-11nd28h-control"
-      >
-        <div
-          class=" css-j6eacz-ValueContainer"
-        >
-          <div
-            class=" css-1usuuna-placeholder"
-          />
-          <div
-            class="css-1m8eskj-Input"
-          >
-            <div
-              class=""
-              style="display: inline-block;"
-            >
-              <input
-                aria-activedescendant=""
-                aria-autocomplete="list"
-                aria-controls="dropdown-menu-list-id"
-                aria-expanded="false"
-                aria-label="Dropdown input"
-                autocapitalize="none"
-                autocomplete="off"
-                autocorrect="off"
-                id="react-select-28-input"
-                role="combobox"
-                spellcheck="false"
-                style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                tabindex="0"
-                type="text"
-                value=""
-              />
-              <div
-                style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          class=" css-hcxwnl-IndicatorsContainer"
-        >
-          <div
-            aria-hidden="true"
-            class=" css-1xh8qep-loadingIndicator"
-          >
-            <span
-              class="css-1yvy2vo-LoadingDot"
-            />
-            <span
-              class="css-zoievk-LoadingDot"
-            />
-            <span
-              class="css-x748d8-LoadingDot"
-            />
-          </div>
-          <span
-            class=" css-1xjgjl1-IndicatorSeparator"
-          />
-          <div
-            aria-hidden="true"
-            class="dropdown-indicator css-slqvkp-indicatorContainer"
-          >
-            <svg
-              aria-hidden="true"
-              class="icon"
-              data-testid="icon"
-              data-vibe="Icon"
-              fill="currentColor"
-              height="20px"
-              tabindex="-1"
-              viewBox="0 0 20 20"
-              width="20px"
-            >
-              <path
-                d="M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z"
-              />
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Dropdown renders correctly > snapshot driver > should use virtualization if set 1`] = `
-<DocumentFragment>
-  <div
-    class="dropdown dropdown-story css-bbwnb8-container"
-    id="dropdown-menu-id"
-  >
-    <div>
-      <div
-        class=" css-11nd28h-control"
-      >
-        <div
-          class=" css-j6eacz-ValueContainer"
-        >
-          <div
-            class=" css-1usuuna-placeholder"
-          />
-          <div
-            class="css-1m8eskj-Input"
-          >
-            <div
-              class=""
-              style="display: inline-block;"
-            >
-              <input
-                aria-activedescendant="react-select-27-option-0"
-                aria-autocomplete="list"
-                aria-controls="dropdown-menu-list-id"
-                aria-expanded="true"
-                aria-label="Dropdown input"
-                autocapitalize="none"
-                autocomplete="off"
-                autocorrect="off"
-                id="react-select-27-input"
-                role="combobox"
-                spellcheck="false"
-                style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                tabindex="0"
-                type="text"
-                value=""
-              />
-              <div
-                style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          class=" css-hcxwnl-IndicatorsContainer"
-        >
-          <span
-            class=" css-1xjgjl1-IndicatorSeparator"
-          />
-          <div
-            aria-hidden="true"
-            class="dropdown-indicator css-1pxbrck-indicatorContainer"
-          >
-            <svg
-              aria-hidden="true"
-              class="icon"
-              data-testid="icon"
-              data-vibe="Icon"
-              fill="currentColor"
-              height="20px"
-              tabindex="-1"
-              viewBox="0 0 20 20"
-              width="20px"
-            >
-              <path
-                d="M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z"
-              />
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="dropdownMenuWrapper withoutAnimation css-1ysewv0-menu"
-    >
-      <div
-        class=""
-        style="position: relative; height: 300px; overflow: auto; will-change: transform; direction: ltr; overflow-y: auto; box-sizing: border-box;"
-      >
-        <div
-          style="height: 350008px; width: 100%;"
-        >
-          <div
-            style="position: absolute; left: 0px; top: 4px; height: 35px; width: 100%;"
-          >
-            <div>
-              <div
-                aria-selected="false"
-                class="optionReset css-1iwu591-option"
-                id="react-select-27-option-0"
-                role="option"
-                tabindex="-1"
-              >
-                <div
-                  class="valueContainer"
-                  data-testid="dropdown-option-content"
-                >
-                  <div
-                    class="typography inherit start singleLineEllipsis text text2Normal"
-                    data-testid="text"
-                  >
-                    1
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            style="position: absolute; left: 0px; top: 39px; height: 35px; width: 100%;"
-          >
-            <div>
-              <div
-                aria-selected="false"
-                class="optionReset css-6ztf41-option"
-                id="react-select-27-option-1"
-                role="option"
-                tabindex="-1"
-              >
-                <div
-                  class="valueContainer"
-                  data-testid="dropdown-option-content"
-                >
-                  <div
-                    class="typography inherit start singleLineEllipsis text text2Normal"
-                    data-testid="text"
-                  >
-                    2
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            style="position: absolute; left: 0px; top: 74px; height: 35px; width: 100%;"
-          >
-            <div>
-              <div
-                aria-selected="false"
-                class="optionReset css-6ztf41-option"
-                id="react-select-27-option-2"
-                role="option"
-                tabindex="-1"
-              >
-                <div
-                  class="valueContainer"
-                  data-testid="dropdown-option-content"
-                >
-                  <div
-                    class="typography inherit start singleLineEllipsis text text2Normal"
-                    data-testid="text"
-                  >
-                    3
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            style="position: absolute; left: 0px; top: 109px; height: 35px; width: 100%;"
-          >
-            <div>
-              <div
-                aria-selected="false"
-                class="optionReset css-6ztf41-option"
-                id="react-select-27-option-3"
-                role="option"
-                tabindex="-1"
-              >
-                <div
-                  class="valueContainer"
-                  data-testid="dropdown-option-content"
-                >
-                  <div
-                    class="typography inherit start singleLineEllipsis text text2Normal"
-                    data-testid="text"
-                  >
-                    4
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            style="position: absolute; left: 0px; top: 144px; height: 35px; width: 100%;"
-          >
-            <div>
-              <div
-                aria-selected="false"
-                class="optionReset css-6ztf41-option"
-                id="react-select-27-option-4"
-                role="option"
-                tabindex="-1"
-              >
-                <div
-                  class="valueContainer"
-                  data-testid="dropdown-option-content"
-                >
-                  <div
-                    class="typography inherit start singleLineEllipsis text text2Normal"
-                    data-testid="text"
-                  >
-                    5
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            style="position: absolute; left: 0px; top: 179px; height: 35px; width: 100%;"
-          >
-            <div>
-              <div
-                aria-selected="false"
-                class="optionReset css-6ztf41-option"
-                id="react-select-27-option-5"
-                role="option"
-                tabindex="-1"
-              >
-                <div
-                  class="valueContainer"
-                  data-testid="dropdown-option-content"
-                >
-                  <div
-                    class="typography inherit start singleLineEllipsis text text2Normal"
-                    data-testid="text"
-                  >
-                    6
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            style="position: absolute; left: 0px; top: 214px; height: 35px; width: 100%;"
-          >
-            <div>
-              <div
-                aria-selected="false"
-                class="optionReset css-6ztf41-option"
-                id="react-select-27-option-6"
-                role="option"
-                tabindex="-1"
-              >
-                <div
-                  class="valueContainer"
-                  data-testid="dropdown-option-content"
-                >
-                  <div
-                    class="typography inherit start singleLineEllipsis text text2Normal"
-                    data-testid="text"
-                  >
-                    7
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            style="position: absolute; left: 0px; top: 249px; height: 35px; width: 100%;"
-          >
-            <div>
-              <div
-                aria-selected="false"
-                class="optionReset css-6ztf41-option"
-                id="react-select-27-option-7"
-                role="option"
-                tabindex="-1"
-              >
-                <div
-                  class="valueContainer"
-                  data-testid="dropdown-option-content"
-                >
-                  <div
-                    class="typography inherit start singleLineEllipsis text text2Normal"
-                    data-testid="text"
-                  >
-                    8
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            style="position: absolute; left: 0px; top: 284px; height: 35px; width: 100%;"
-          >
-            <div>
-              <div
-                aria-selected="false"
-                class="optionReset css-6ztf41-option"
-                id="react-select-27-option-8"
-                role="option"
-                tabindex="-1"
-              >
-                <div
-                  class="valueContainer"
-                  data-testid="dropdown-option-content"
-                >
-                  <div
-                    class="typography inherit start singleLineEllipsis text text2Normal"
-                    data-testid="text"
-                  >
-                    9
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            style="position: absolute; left: 0px; top: 319px; height: 35px; width: 100%;"
-          >
-            <div>
-              <div
-                aria-selected="false"
-                class="optionReset css-6ztf41-option"
-                id="react-select-27-option-9"
-                role="option"
-                tabindex="-1"
-              >
-                <div
-                  class="valueContainer"
-                  data-testid="dropdown-option-content"
-                >
-                  <div
-                    class="typography inherit start singleLineEllipsis text text2Normal"
-                    data-testid="text"
-                  >
-                    10
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            style="position: absolute; left: 0px; top: 354px; height: 35px; width: 100%;"
-          >
-            <div>
-              <div
-                aria-selected="false"
-                class="optionReset css-6ztf41-option"
-                id="react-select-27-option-10"
-                role="option"
-                tabindex="-1"
-              >
-                <div
-                  class="valueContainer"
-                  data-testid="dropdown-option-content"
-                >
-                  <div
-                    class="typography inherit start singleLineEllipsis text text2Normal"
-                    data-testid="text"
-                  >
-                    11
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Dropdown renders correctly > when disabled 1`] = `
-<div
-  className="dropdown css-1gsgnpy-container"
-  id="dropdown-menu-id"
-  onKeyDown={[Function]}
->
-  <div>
-    <div
-      className=" css-1i7lmxf-control"
-      onMouseDown={[Function]}
-      onTouchEnd={[Function]}
-    >
-      <div
-        className=" css-1af240r-ValueContainer"
-      >
-        <div
-          className=" css-1usuuna-placeholder"
-        >
-          
-        </div>
-        <div
-          className="css-1m8eskj-Input"
-        >
-          <div
-            className=""
-            style={
-              {
-                "display": "inline-block",
-              }
-            }
-          >
-            <input
-              aria-activedescendant=""
-              aria-autocomplete="list"
-              aria-controls="dropdown-menu-list-id"
-              aria-expanded={false}
-              aria-label="Dropdown input"
-              autoCapitalize="none"
-              autoComplete="off"
-              autoCorrect="off"
-              disabled={true}
-              id="react-select-5-input"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              role="combobox"
-              spellCheck="false"
-              style={
-                {
-                  "background": 0,
-                  "border": 0,
-                  "boxSizing": "content-box",
-                  "color": "inherit",
-                  "fontSize": "inherit",
-                  "label": "input",
-                  "opacity": 1,
-                  "outline": 0,
-                  "padding": 0,
-                  "width": "1px",
-                }
-              }
-              tabIndex="0"
-              type="text"
-              value=""
-            />
-            <div
-              style={
-                {
-                  "height": 0,
-                  "left": 0,
-                  "overflow": "scroll",
-                  "position": "absolute",
-                  "top": 0,
-                  "visibility": "hidden",
-                  "whiteSpace": "pre",
-                }
-              }
-            >
-              
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className=" css-bodkip-IndicatorsContainer"
-      >
-        <span
-          className=" css-1xjgjl1-IndicatorSeparator"
-        />
-        <div
-          aria-hidden="true"
-          className="dropdown-indicator css-1ycu3uq-indicatorContainer"
-          onMouseDown={[Function]}
-          onTouchEnd={[Function]}
-        >
-          <svg
-            aria-hidden={true}
-            className="icon"
-            data-testid="icon"
-            data-vibe="Icon"
-            fill="currentColor"
-            height="20px"
-            tabIndex={-1}
-            viewBox="0 0 20 20"
-            width="20px"
-          >
-            <path
-              d="M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z"
-            />
-          </svg>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Dropdown renders correctly > when readOnly 1`] = `
-<div
-  className="dropdown css-eh7fjc-container"
-  id="dropdown-menu-id"
-  onKeyDown={[Function]}
->
-  <div>
-    <div
-      className=" css-xe3jfm-control"
-      onMouseDown={[Function]}
-      onTouchEnd={[Function]}
-    >
-      <div
-        className=" css-j6eacz-ValueContainer"
-      >
-        <div
-          className=" css-1usuuna-placeholder"
-        >
-          
-        </div>
-        <input
-          aria-autocomplete="list"
-          aria-label="Readonly   Selected: "
-          className="css-62g3xt-dummyInput"
-          disabled={false}
-          id="react-select-6-input"
-          onBlur={[Function]}
-          onChange={[Function]}
-          onFocus={[Function]}
-          readOnly={true}
-          tabIndex="0"
-          value=""
-        />
-      </div>
-      <div
-        className=" css-hcxwnl-IndicatorsContainer"
-      >
-        <span
-          className=" css-1xjgjl1-IndicatorSeparator"
-        />
-        <div
-          aria-hidden="true"
-          className="dropdown-indicator css-1omzgld-indicatorContainer"
-          onMouseDown={[Function]}
-          onTouchEnd={[Function]}
-        >
-          <svg
-            aria-hidden={true}
-            className="icon"
-            data-testid="icon"
-            data-vibe="Icon"
-            fill="currentColor"
-            height="20px"
-            tabIndex={-1}
-            viewBox="0 0 20 20"
-            width="20px"
-          >
-            <path
-              d="M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z"
-            />
-          </svg>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Dropdown renders correctly > when rtl 1`] = `
-<div
-  className="dropdown css-b0xr5u-container"
-  id="dropdown-menu-id"
-  onKeyDown={[Function]}
->
-  <div>
-    <div
-      className=" css-13ywfe7-control"
-      onMouseDown={[Function]}
-      onTouchEnd={[Function]}
-    >
-      <div
-        className=" css-1q407wa-ValueContainer"
-      >
-        <div
-          className=" css-1usuuna-placeholder"
-        >
-          
-        </div>
-        <div
-          className="css-1m8eskj-Input"
-        >
-          <div
-            className=""
-            style={
-              {
-                "display": "inline-block",
-              }
-            }
-          >
-            <input
-              aria-activedescendant=""
-              aria-autocomplete="list"
-              aria-controls="dropdown-menu-list-id"
-              aria-expanded={false}
-              aria-label="Dropdown input"
-              autoCapitalize="none"
-              autoComplete="off"
-              autoCorrect="off"
-              disabled={false}
-              id="react-select-8-input"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              role="combobox"
-              spellCheck="false"
-              style={
-                {
-                  "background": 0,
-                  "border": 0,
-                  "boxSizing": "content-box",
-                  "color": "inherit",
-                  "fontSize": "inherit",
-                  "label": "input",
-                  "opacity": 1,
-                  "outline": 0,
-                  "padding": 0,
-                  "width": "1px",
-                }
-              }
-              tabIndex="0"
-              type="text"
-              value=""
-            />
-            <div
-              style={
-                {
-                  "height": 0,
-                  "left": 0,
-                  "overflow": "scroll",
-                  "position": "absolute",
-                  "top": 0,
-                  "visibility": "hidden",
-                  "whiteSpace": "pre",
-                }
-              }
-            >
-              
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className=" css-hcxwnl-IndicatorsContainer"
-      >
-        <span
-          className=" css-1xjgjl1-IndicatorSeparator"
-        />
-        <div
-          aria-hidden="true"
-          className="dropdown-indicator css-1ycu3uq-indicatorContainer"
-          onMouseDown={[Function]}
-          onTouchEnd={[Function]}
-        >
-          <svg
-            aria-hidden={true}
-            className="icon"
-            data-testid="icon"
-            data-vibe="Icon"
-            fill="currentColor"
-            height="20px"
-            tabIndex={-1}
-            viewBox="0 0 20 20"
-            width="20px"
-          >
-            <path
-              d="M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z"
-            />
-          </svg>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Dropdown renders correctly > with autoFocus 1`] = `
-<div
-  className="dropdown css-bbwnb8-container"
-  id="dropdown-menu-id"
-  onKeyDown={[Function]}
->
-  <div>
-    <div
-      className=" css-13ywfe7-control"
-      onMouseDown={[Function]}
-      onTouchEnd={[Function]}
-    >
-      <div
-        className=" css-j6eacz-ValueContainer"
-      >
-        <div
-          className=" css-1usuuna-placeholder"
-        >
-          
-        </div>
-        <div
-          className="css-1m8eskj-Input"
-        >
-          <div
-            className=""
-            style={
-              {
-                "display": "inline-block",
-              }
-            }
-          >
-            <input
-              aria-activedescendant=""
-              aria-autocomplete="list"
-              aria-controls="dropdown-menu-list-id"
-              aria-expanded={false}
-              aria-label="Dropdown input"
-              autoCapitalize="none"
-              autoComplete="off"
-              autoCorrect="off"
-              disabled={false}
-              id="react-select-11-input"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              role="combobox"
-              spellCheck="false"
-              style={
-                {
-                  "background": 0,
-                  "border": 0,
-                  "boxSizing": "content-box",
-                  "color": "inherit",
-                  "fontSize": "inherit",
-                  "label": "input",
-                  "opacity": 1,
-                  "outline": 0,
-                  "padding": 0,
-                  "width": "1px",
-                }
-              }
-              tabIndex="0"
-              type="text"
-              value=""
-            />
-            <div
-              style={
-                {
-                  "height": 0,
-                  "left": 0,
-                  "overflow": "scroll",
-                  "position": "absolute",
-                  "top": 0,
-                  "visibility": "hidden",
-                  "whiteSpace": "pre",
-                }
-              }
-            >
-              
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className=" css-hcxwnl-IndicatorsContainer"
-      >
-        <span
-          className=" css-1xjgjl1-IndicatorSeparator"
-        />
-        <div
-          aria-hidden="true"
-          className="dropdown-indicator css-1ycu3uq-indicatorContainer"
-          onMouseDown={[Function]}
-          onTouchEnd={[Function]}
-        >
-          <svg
-            aria-hidden={true}
-            className="icon"
-            data-testid="icon"
-            data-vibe="Icon"
-            fill="currentColor"
-            height="20px"
-            tabIndex={-1}
-            viewBox="0 0 20 20"
-            width="20px"
-          >
-            <path
-              d="M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z"
-            />
-          </svg>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Dropdown renders correctly > with chip colors 1`] = `
-<div
-  className="dropdown css-3iiiai-container"
-  id="dropdown-menu-id"
-  onKeyDown={[Function]}
->
-  <div>
-    <div
-      className=" css-1jhcivv-control"
-      onMouseDown={[Function]}
-      onTouchEnd={[Function]}
-    >
-      <div
-        className=" css-djgksh-ValueContainer"
-      >
-        <div
-          className="value-container"
-          onTouchEndCapture={[Function]}
-        >
-          <div
-            className="value-container-chips without-placeholder"
-            data-testid="value-container-chips"
-          >
-            <div
-              aria-label="Primary"
-              className="chips chips multiselect-chip-multi-line noAnimation"
-              data-testid="value-container-chip"
-              data-vibe="Chips"
-              id="primary"
-              onClick={[Function]}
-              onMouseDown={[Function]}
-              onMouseEnter={[Function]}
-              onMouseLeave={[Function]}
-              style={
-                {
-                  "backgroundColor": "var(--primary-selected-color)",
-                }
-              }
-            >
-              <div
-                className="typography primary start singleLineEllipsis text text2Normal label"
-                data-testid="text"
-              >
-                Primary
-              </div>
-              <button
-                aria-busy={false}
-                aria-disabled={false}
-                aria-label="Remove"
-                className="icon close button sizeMedium kindTertiary colorOnPrimaryColor noSidePadding"
-                data-testid="value-container-chip-close"
-                data-vibe="Button"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onMouseDown={[Function]}
-                onMouseUp={[Function]}
-                style={
-                  {
-                    "alignItems": "center",
-                    "height": "16px",
-                    "justifyContent": "center",
-                    "padding": 0,
-                    "width": "16px",
-                  }
-                }
-                type="button"
-              >
-                <svg
-                  aria-hidden={true}
-                  className="icon noFocusStyle"
-                  data-testid="icon"
-                  data-vibe="Icon"
-                  fill="currentColor"
-                  height="16"
-                  viewBox="0 0 20 20"
-                  width="16"
-                >
-                  <path
-                    d="M6.331 5.27a.75.75 0 0 0-1.06 1.06L8.94 10l-3.67 3.668a.75.75 0 1 0 1.06 1.06L10 11.06l3.668 3.669a.75.75 0 0 0 1.06-1.06l-3.668-3.67 3.67-3.669a.75.75 0 0 0-1.061-1.06L10 8.939l-3.669-3.67Z"
-                  />
-                </svg>
-              </button>
-            </div>
-            <div
-              aria-label="Positive"
-              className="chips chips multiselect-chip-multi-line noAnimation"
-              data-testid="value-container-chip"
-              data-vibe="Chips"
-              id="positive"
-              onClick={[Function]}
-              onMouseDown={[Function]}
-              onMouseEnter={[Function]}
-              onMouseLeave={[Function]}
-              style={
-                {
-                  "backgroundColor": "var(--positive-color-selected)",
-                }
-              }
-            >
-              <div
-                className="typography primary start singleLineEllipsis text text2Normal label"
-                data-testid="text"
-              >
-                Positive
-              </div>
-              <button
-                aria-busy={false}
-                aria-disabled={false}
-                aria-label="Remove"
-                className="icon close button sizeMedium kindTertiary colorOnPrimaryColor noSidePadding"
-                data-testid="value-container-chip-close"
-                data-vibe="Button"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onMouseDown={[Function]}
-                onMouseUp={[Function]}
-                style={
-                  {
-                    "alignItems": "center",
-                    "height": "16px",
-                    "justifyContent": "center",
-                    "padding": 0,
-                    "width": "16px",
-                  }
-                }
-                type="button"
-              >
-                <svg
-                  aria-hidden={true}
-                  className="icon noFocusStyle"
-                  data-testid="icon"
-                  data-vibe="Icon"
-                  fill="currentColor"
-                  height="16"
-                  viewBox="0 0 20 20"
-                  width="16"
-                >
-                  <path
-                    d="M6.331 5.27a.75.75 0 0 0-1.06 1.06L8.94 10l-3.67 3.668a.75.75 0 1 0 1.06 1.06L10 11.06l3.668 3.669a.75.75 0 0 0 1.06-1.06l-3.668-3.67 3.67-3.669a.75.75 0 0 0-1.061-1.06L10 8.939l-3.669-3.67Z"
-                  />
-                </svg>
-              </button>
-            </div>
-            <div
-              className="chip-with-input-wrapper"
-            >
-              <div
-                aria-label="Negative"
-                className="chips chips multiselect-chip-multi-line noAnimation"
-                data-testid="value-container-chip"
-                data-vibe="Chips"
-                id="negative"
-                onClick={[Function]}
-                onMouseDown={[Function]}
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-                style={
-                  {
-                    "backgroundColor": "var(--negative-color-selected)",
-                  }
-                }
-              >
-                <div
-                  className="typography primary start singleLineEllipsis text text2Normal label"
-                  data-testid="text"
-                >
-                  Negative
-                </div>
-                <button
-                  aria-busy={false}
-                  aria-disabled={false}
-                  aria-label="Remove"
-                  className="icon close button sizeMedium kindTertiary colorOnPrimaryColor noSidePadding"
-                  data-testid="value-container-chip-close"
-                  data-vibe="Button"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseUp={[Function]}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "height": "16px",
-                      "justifyContent": "center",
-                      "padding": 0,
-                      "width": "16px",
-                    }
-                  }
-                  type="button"
-                >
-                  <svg
-                    aria-hidden={true}
-                    className="icon noFocusStyle"
-                    data-testid="icon"
-                    data-vibe="Icon"
-                    fill="currentColor"
-                    height="16"
-                    viewBox="0 0 20 20"
-                    width="16"
-                  >
-                    <path
-                      d="M6.331 5.27a.75.75 0 0 0-1.06 1.06L8.94 10l-3.67 3.668a.75.75 0 1 0 1.06 1.06L10 11.06l3.668 3.669a.75.75 0 0 0 1.06-1.06l-3.668-3.67 3.67-3.669a.75.75 0 0 0-1.061-1.06L10 8.939l-3.669-3.67Z"
-                    />
-                  </svg>
-                </button>
-              </div>
-              <div
-                className="css-1m8eskj-Input"
-              >
-                <div
-                  className=""
-                  style={
-                    {
-                      "display": "inline-block",
-                    }
-                  }
-                >
-                  <input
-                    aria-activedescendant=""
-                    aria-autocomplete="list"
-                    aria-controls="dropdown-menu-list-id"
-                    aria-expanded={false}
-                    aria-label="Dropdown input"
-                    autoCapitalize="none"
-                    autoComplete="off"
-                    autoCorrect="off"
-                    disabled={false}
-                    id="react-select-17-input"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    role="combobox"
-                    spellCheck="false"
-                    style={
-                      {
-                        "background": 0,
-                        "border": 0,
-                        "boxSizing": "content-box",
-                        "color": "inherit",
-                        "fontSize": "inherit",
-                        "label": "input",
-                        "opacity": 1,
-                        "outline": 0,
-                        "padding": 0,
-                        "width": "1px",
-                      }
-                    }
-                    tabIndex="0"
-                    type="text"
-                    value=""
-                  />
-                  <div
-                    style={
-                      {
-                        "height": 0,
-                        "left": 0,
-                        "overflow": "scroll",
-                        "position": "absolute",
-                        "top": 0,
-                        "visibility": "hidden",
-                        "whiteSpace": "pre",
-                      }
-                    }
-                  >
-                    
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div />
-        </div>
-      </div>
-      <div
-        className=" css-hcxwnl-IndicatorsContainer"
-      >
-        <div
-          aria-hidden="true"
-          className="clear-indicator css-bter05-ClearIndicator"
-          onMouseDown={[Function]}
-          onTouchEnd={[Function]}
-        >
-          <svg
-            aria-hidden={true}
-            className="icon"
-            data-testid="icon"
-            data-vibe="Icon"
-            fill="currentColor"
-            height="20px"
-            tabIndex={-1}
-            viewBox="0 0 20 20"
-            width="20px"
-          >
-            <path
-              d="M6.331 5.27a.75.75 0 0 0-1.06 1.06L8.94 10l-3.67 3.668a.75.75 0 1 0 1.06 1.06L10 11.06l3.668 3.669a.75.75 0 0 0 1.06-1.06l-3.668-3.67 3.67-3.669a.75.75 0 0 0-1.061-1.06L10 8.939l-3.669-3.67Z"
-            />
-          </svg>
-        </div>
-        <span
-          className=" css-1xjgjl1-IndicatorSeparator"
-        />
-        <div
-          aria-hidden="true"
-          className="dropdown-indicator css-1ycu3uq-indicatorContainer"
-          onMouseDown={[Function]}
-          onTouchEnd={[Function]}
-        >
-          <svg
-            aria-hidden={true}
-            className="icon"
-            data-testid="icon"
-            data-vibe="Icon"
-            fill="currentColor"
-            height="20px"
-            tabIndex={-1}
-            viewBox="0 0 20 20"
-            width="20px"
-          >
-            <path
-              d="M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z"
-            />
-          </svg>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Dropdown renders correctly > with className 1`] = `
-<div
-  className="dropdown test css-bbwnb8-container"
-  id="dropdown-menu-id"
-  onKeyDown={[Function]}
->
-  <div>
-    <div
-      className=" css-13ywfe7-control"
-      onMouseDown={[Function]}
-      onTouchEnd={[Function]}
-    >
-      <div
-        className=" css-j6eacz-ValueContainer"
-      >
-        <div
-          className=" css-1usuuna-placeholder"
-        >
-          
-        </div>
-        <div
-          className="css-1m8eskj-Input"
-        >
-          <div
-            className=""
-            style={
-              {
-                "display": "inline-block",
-              }
-            }
-          >
-            <input
-              aria-activedescendant=""
-              aria-autocomplete="list"
-              aria-controls="dropdown-menu-list-id"
-              aria-expanded={false}
-              aria-label="Dropdown input"
-              autoCapitalize="none"
-              autoComplete="off"
-              autoCorrect="off"
-              disabled={false}
-              id="react-select-3-input"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              role="combobox"
-              spellCheck="false"
-              style={
-                {
-                  "background": 0,
-                  "border": 0,
-                  "boxSizing": "content-box",
-                  "color": "inherit",
-                  "fontSize": "inherit",
-                  "label": "input",
-                  "opacity": 1,
-                  "outline": 0,
-                  "padding": 0,
-                  "width": "1px",
-                }
-              }
-              tabIndex="0"
-              type="text"
-              value=""
-            />
-            <div
-              style={
-                {
-                  "height": 0,
-                  "left": 0,
-                  "overflow": "scroll",
-                  "position": "absolute",
-                  "top": 0,
-                  "visibility": "hidden",
-                  "whiteSpace": "pre",
-                }
-              }
-            >
-              
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className=" css-hcxwnl-IndicatorsContainer"
-      >
-        <span
-          className=" css-1xjgjl1-IndicatorSeparator"
-        />
-        <div
-          aria-hidden="true"
-          className="dropdown-indicator css-1ycu3uq-indicatorContainer"
-          onMouseDown={[Function]}
-          onTouchEnd={[Function]}
-        >
-          <svg
-            aria-hidden={true}
-            className="icon"
-            data-testid="icon"
-            data-vibe="Icon"
-            fill="currentColor"
-            height="20px"
-            tabIndex={-1}
-            viewBox="0 0 20 20"
-            width="20px"
-          >
-            <path
-              d="M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z"
-            />
-          </svg>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Dropdown renders correctly > with defaultValue 1`] = `
-<div
-  className="dropdown css-bbwnb8-container"
-  id="dropdown-menu-id"
-  onKeyDown={[Function]}
->
-  <div>
-    <div
-      className=" css-13ywfe7-control"
-      onMouseDown={[Function]}
-      onTouchEnd={[Function]}
-    >
-      <div
-        className=" css-j6eacz-ValueContainer"
-      >
-        <div
-          className="singleValue dropdown-wrapper__single-value--reset css-1f92y5n-singleValue"
-        >
-          <div
-            className="valueContainer"
-            data-testid="dropdown-option-content"
-            onMouseDown={[Function]}
-          >
-            <div
-              className="typography inherit start singleLineEllipsis text text2Normal"
-              data-testid="text"
-            >
-              Ocean
-            </div>
-          </div>
-        </div>
-        <div
-          className="css-1m8eskj-Input"
-        >
-          <div
-            className=""
-            style={
-              {
-                "display": "inline-block",
-              }
-            }
-          >
-            <input
-              aria-activedescendant=""
-              aria-autocomplete="list"
-              aria-controls="dropdown-menu-list-id"
-              aria-expanded={false}
-              aria-label="Dropdown input"
-              autoCapitalize="none"
-              autoComplete="off"
-              autoCorrect="off"
-              disabled={false}
-              id="react-select-21-input"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              role="combobox"
-              spellCheck="false"
-              style={
-                {
-                  "background": 0,
-                  "border": 0,
-                  "boxSizing": "content-box",
-                  "color": "inherit",
-                  "fontSize": "inherit",
-                  "label": "input",
-                  "opacity": 1,
-                  "outline": 0,
-                  "padding": 0,
-                  "width": "1px",
-                }
-              }
-              tabIndex="0"
-              type="text"
-              value=""
-            />
-            <div
-              style={
-                {
-                  "height": 0,
-                  "left": 0,
-                  "overflow": "scroll",
-                  "position": "absolute",
-                  "top": 0,
-                  "visibility": "hidden",
-                  "whiteSpace": "pre",
-                }
-              }
-            >
-              
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className=" css-hcxwnl-IndicatorsContainer"
-      >
-        <div
-          aria-hidden="true"
-          className="clear-indicator css-bter05-ClearIndicator"
-          onMouseDown={[Function]}
-          onTouchEnd={[Function]}
-        >
-          <svg
-            aria-hidden={true}
-            className="icon"
-            data-testid="icon"
-            data-vibe="Icon"
-            fill="currentColor"
-            height="20px"
-            tabIndex={-1}
-            viewBox="0 0 20 20"
-            width="20px"
-          >
-            <path
-              d="M6.331 5.27a.75.75 0 0 0-1.06 1.06L8.94 10l-3.67 3.668a.75.75 0 1 0 1.06 1.06L10 11.06l3.668 3.669a.75.75 0 0 0 1.06-1.06l-3.668-3.67 3.67-3.669a.75.75 0 0 0-1.061-1.06L10 8.939l-3.669-3.67Z"
-            />
-          </svg>
-        </div>
-        <span
-          className=" css-1xjgjl1-IndicatorSeparator"
-        />
-        <div
-          aria-hidden="true"
-          className="dropdown-indicator css-1ycu3uq-indicatorContainer"
-          onMouseDown={[Function]}
-          onTouchEnd={[Function]}
-        >
-          <svg
-            aria-hidden={true}
-            className="icon"
-            data-testid="icon"
-            data-vibe="Icon"
-            fill="currentColor"
-            height="20px"
-            tabIndex={-1}
-            viewBox="0 0 20 20"
-            width="20px"
-          >
-            <path
-              d="M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z"
-            />
-          </svg>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Dropdown renders correctly > with empty props 1`] = `
-<div
-  className="dropdown css-bbwnb8-container"
-  id="dropdown-menu-id"
-  onKeyDown={[Function]}
->
-  <div>
-    <div
-      className=" css-13ywfe7-control"
-      onMouseDown={[Function]}
-      onTouchEnd={[Function]}
-    >
-      <div
-        className=" css-j6eacz-ValueContainer"
-      >
-        <div
-          className=" css-1usuuna-placeholder"
-        >
-          
-        </div>
-        <div
-          className="css-1m8eskj-Input"
-        >
-          <div
-            className=""
-            style={
-              {
-                "display": "inline-block",
-              }
-            }
-          >
-            <input
-              aria-activedescendant=""
-              aria-autocomplete="list"
-              aria-controls="dropdown-menu-list-id"
-              aria-expanded={false}
-              aria-label="Dropdown input"
-              autoCapitalize="none"
-              autoComplete="off"
-              autoCorrect="off"
-              disabled={false}
-              id="react-select-2-input"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              role="combobox"
-              spellCheck="false"
-              style={
-                {
-                  "background": 0,
-                  "border": 0,
-                  "boxSizing": "content-box",
-                  "color": "inherit",
-                  "fontSize": "inherit",
-                  "label": "input",
-                  "opacity": 1,
-                  "outline": 0,
-                  "padding": 0,
-                  "width": "1px",
-                }
-              }
-              tabIndex="0"
-              type="text"
-              value=""
-            />
-            <div
-              style={
-                {
-                  "height": 0,
-                  "left": 0,
-                  "overflow": "scroll",
-                  "position": "absolute",
-                  "top": 0,
-                  "visibility": "hidden",
-                  "whiteSpace": "pre",
-                }
-              }
-            >
-              
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className=" css-hcxwnl-IndicatorsContainer"
-      >
-        <span
-          className=" css-1xjgjl1-IndicatorSeparator"
-        />
-        <div
-          aria-hidden="true"
-          className="dropdown-indicator css-1ycu3uq-indicatorContainer"
-          onMouseDown={[Function]}
-          onTouchEnd={[Function]}
-        >
-          <svg
-            aria-hidden={true}
-            className="icon"
-            data-testid="icon"
-            data-vibe="Icon"
-            fill="currentColor"
-            height="20px"
-            tabIndex={-1}
-            viewBox="0 0 20 20"
-            width="20px"
-          >
-            <path
-              d="M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z"
-            />
-          </svg>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Dropdown renders correctly > with id 1`] = `
-<div
-  className="dropdown css-bbwnb8-container"
-  id="dropdown-menu-id"
-  onKeyDown={[Function]}
->
-  <div>
-    <div
-      className=" css-13ywfe7-control"
-      onMouseDown={[Function]}
-      onTouchEnd={[Function]}
-    >
-      <div
-        className=" css-j6eacz-ValueContainer"
-      >
-        <div
-          className=" css-1usuuna-placeholder"
-        >
-          
-        </div>
-        <div
-          className="css-1m8eskj-Input"
-        >
-          <div
-            className=""
-            style={
-              {
-                "display": "inline-block",
-              }
-            }
-          >
-            <input
-              aria-activedescendant=""
-              aria-autocomplete="list"
-              aria-controls="dropdown-menu-list-id"
-              aria-expanded={false}
-              aria-label="Dropdown input"
-              autoCapitalize="none"
-              autoComplete="off"
-              autoCorrect="off"
-              disabled={false}
-              id="react-select-10-input"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              role="combobox"
-              spellCheck="false"
-              style={
-                {
-                  "background": 0,
-                  "border": 0,
-                  "boxSizing": "content-box",
-                  "color": "inherit",
-                  "fontSize": "inherit",
-                  "label": "input",
-                  "opacity": 1,
-                  "outline": 0,
-                  "padding": 0,
-                  "width": "1px",
-                }
-              }
-              tabIndex="0"
-              type="text"
-              value=""
-            />
-            <div
-              style={
-                {
-                  "height": 0,
-                  "left": 0,
-                  "overflow": "scroll",
-                  "position": "absolute",
-                  "top": 0,
-                  "visibility": "hidden",
-                  "whiteSpace": "pre",
-                }
-              }
-            >
-              
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className=" css-hcxwnl-IndicatorsContainer"
-      >
-        <span
-          className=" css-1xjgjl1-IndicatorSeparator"
-        />
-        <div
-          aria-hidden="true"
-          className="dropdown-indicator css-1ycu3uq-indicatorContainer"
-          onMouseDown={[Function]}
-          onTouchEnd={[Function]}
-        >
-          <svg
-            aria-hidden={true}
-            className="icon"
-            data-testid="icon"
-            data-vibe="Icon"
-            fill="currentColor"
-            height="20px"
-            tabIndex={-1}
-            viewBox="0 0 20 20"
-            width="20px"
-          >
-            <path
-              d="M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z"
-            />
-          </svg>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Dropdown renders correctly > with leftAvatar 1`] = `
-<div
-  className="dropdown css-3iiiai-container"
-  id="dropdown-menu-id"
-  onKeyDown={[Function]}
->
-  <div>
-    <div
-      className=" css-1jhcivv-control"
-      onMouseDown={[Function]}
-      onTouchEnd={[Function]}
-    >
-      <div
-        className=" css-djgksh-ValueContainer"
-      >
-        <div
-          className="value-container"
-          onTouchEndCapture={[Function]}
-        >
-          <div
-            className="value-container-chips without-placeholder"
-            data-testid="value-container-chips"
-          >
-            <div
-              className="chip-with-input-wrapper"
-            >
-              <div
-                aria-label="Ocean"
-                className="chips chips multiselect-chip-multi-line noAnimation"
-                data-testid="value-container-chip"
-                data-vibe="Chips"
-                id="ocean"
-                onClick={[Function]}
-                onMouseDown={[Function]}
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-                style={
-                  {
-                    "backgroundColor": "var(--primary-selected-color)",
-                  }
-                }
-              >
-                <div
-                  className="avatar large avatar left"
-                  data-testid="avatar"
-                  data-vibe="Avatar"
-                  style={
-                    {
-                      "height": 18,
-                      "width": 18,
-                    }
-                  }
-                >
-                  <div
-                    aria-hidden={false}
-                    className="circle circleImg withoutBorder"
-                    style={{}}
-                    tabIndex={-1}
-                  >
-                    <img
-                      className="contentImg contentImgLarge"
-                      data-testid="avatar-content"
-                      src="image-url.jpg"
-                    />
-                  </div>
-                </div>
-                <div
-                  className="typography primary start singleLineEllipsis text text2Normal label"
-                  data-testid="text"
-                >
-                  Ocean
-                </div>
-                <button
-                  aria-busy={false}
-                  aria-disabled={false}
-                  aria-label="Remove"
-                  className="icon close button sizeMedium kindTertiary colorOnPrimaryColor noSidePadding"
-                  data-testid="value-container-chip-close"
-                  data-vibe="Button"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseUp={[Function]}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "height": "16px",
-                      "justifyContent": "center",
-                      "padding": 0,
-                      "width": "16px",
-                    }
-                  }
-                  type="button"
-                >
-                  <svg
-                    aria-hidden={true}
-                    className="icon noFocusStyle"
-                    data-testid="icon"
-                    data-vibe="Icon"
-                    fill="currentColor"
-                    height="16"
-                    viewBox="0 0 20 20"
-                    width="16"
-                  >
-                    <path
-                      d="M6.331 5.27a.75.75 0 0 0-1.06 1.06L8.94 10l-3.67 3.668a.75.75 0 1 0 1.06 1.06L10 11.06l3.668 3.669a.75.75 0 0 0 1.06-1.06l-3.668-3.67 3.67-3.669a.75.75 0 0 0-1.061-1.06L10 8.939l-3.669-3.67Z"
-                    />
-                  </svg>
-                </button>
-              </div>
-              <div
-                className="css-1m8eskj-Input"
-              >
-                <div
-                  className=""
-                  style={
-                    {
-                      "display": "inline-block",
-                    }
-                  }
-                >
-                  <input
-                    aria-activedescendant=""
-                    aria-autocomplete="list"
-                    aria-controls="dropdown-menu-list-id"
-                    aria-expanded={false}
-                    aria-label="Dropdown input"
-                    autoCapitalize="none"
-                    autoComplete="off"
-                    autoCorrect="off"
-                    disabled={false}
-                    id="react-select-16-input"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    role="combobox"
-                    spellCheck="false"
-                    style={
-                      {
-                        "background": 0,
-                        "border": 0,
-                        "boxSizing": "content-box",
-                        "color": "inherit",
-                        "fontSize": "inherit",
-                        "label": "input",
-                        "opacity": 1,
-                        "outline": 0,
-                        "padding": 0,
-                        "width": "1px",
-                      }
-                    }
-                    tabIndex="0"
-                    type="text"
-                    value=""
-                  />
-                  <div
-                    style={
-                      {
-                        "height": 0,
-                        "left": 0,
-                        "overflow": "scroll",
-                        "position": "absolute",
-                        "top": 0,
-                        "visibility": "hidden",
-                        "whiteSpace": "pre",
-                      }
-                    }
-                  >
-                    
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div />
-        </div>
-      </div>
-      <div
-        className=" css-hcxwnl-IndicatorsContainer"
-      >
-        <div
-          aria-hidden="true"
-          className="clear-indicator css-bter05-ClearIndicator"
-          onMouseDown={[Function]}
-          onTouchEnd={[Function]}
-        >
-          <svg
-            aria-hidden={true}
-            className="icon"
-            data-testid="icon"
-            data-vibe="Icon"
-            fill="currentColor"
-            height="20px"
-            tabIndex={-1}
-            viewBox="0 0 20 20"
-            width="20px"
-          >
-            <path
-              d="M6.331 5.27a.75.75 0 0 0-1.06 1.06L8.94 10l-3.67 3.668a.75.75 0 1 0 1.06 1.06L10 11.06l3.668 3.669a.75.75 0 0 0 1.06-1.06l-3.668-3.67 3.67-3.669a.75.75 0 0 0-1.061-1.06L10 8.939l-3.669-3.67Z"
-            />
-          </svg>
-        </div>
-        <span
-          className=" css-1xjgjl1-IndicatorSeparator"
-        />
-        <div
-          aria-hidden="true"
-          className="dropdown-indicator css-1ycu3uq-indicatorContainer"
-          onMouseDown={[Function]}
-          onTouchEnd={[Function]}
-        >
-          <svg
-            aria-hidden={true}
-            className="icon"
-            data-testid="icon"
-            data-vibe="Icon"
-            fill="currentColor"
-            height="20px"
-            tabIndex={-1}
-            viewBox="0 0 20 20"
-            width="20px"
-          >
-            <path
-              d="M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z"
-            />
-          </svg>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Dropdown renders correctly > with leftIcon 1`] = `
-<div
-  className="dropdown css-3iiiai-container"
-  id="dropdown-menu-id"
-  onKeyDown={[Function]}
->
-  <div>
-    <div
-      className=" css-1jhcivv-control"
-      onMouseDown={[Function]}
-      onTouchEnd={[Function]}
-    >
-      <div
-        className=" css-djgksh-ValueContainer"
-      >
-        <div
-          className="value-container"
-          onTouchEndCapture={[Function]}
-        >
-          <div
-            className="value-container-chips without-placeholder"
-            data-testid="value-container-chips"
-          >
-            <div
-              className="chip-with-input-wrapper"
-            >
-              <div
-                aria-label="Ocean"
-                className="chips chips multiselect-chip-multi-line noAnimation"
-                data-testid="value-container-chip"
-                data-vibe="Chips"
-                id="ocean"
-                onClick={[Function]}
-                onMouseDown={[Function]}
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-                style={
-                  {
-                    "backgroundColor": "var(--primary-selected-color)",
-                  }
-                }
-              >
-                <svg
-                  aria-hidden={true}
-                  className="icon icon left noFocusStyle"
-                  data-testid="icon"
-                  data-vibe="Icon"
-                  fill="currentColor"
-                  height="18"
-                  viewBox="0 0 20 20"
-                  width="18"
-                >
-                  <path
-                    clipRule="evenodd"
-                    d="M3 4.25C2.58579 4.25 2.25 4.58579 2.25 5V15C2.25 15.4142 2.58579 15.75 3 15.75H17C17.4142 15.75 17.75 15.4142 17.75 15V5C17.75 4.58579 17.4142 4.25 17 4.25H3ZM3.75 6.71589V14.25H16.25V6.71591L11.802 10.1371C11.2854 10.5346 10.6518 10.75 10 10.75C9.3482 10.75 8.71468 10.5346 8.19805 10.1371L3.75 6.71589ZM15.0455 5.75H4.95456L9.1126 8.94818L9.11265 8.94821C9.36706 9.14393 9.67903 9.25004 10 9.25004C10.321 9.25004 10.633 9.14393 10.8874 8.94821L10.8874 8.94818L15.0455 5.75Z"
-                    fill="currentColor"
-                    fillRule="evenodd"
-                  />
-                </svg>
-                <div
-                  className="typography primary start singleLineEllipsis text text2Normal label"
-                  data-testid="text"
-                >
-                  Ocean
-                </div>
-                <button
-                  aria-busy={false}
-                  aria-disabled={false}
-                  aria-label="Remove"
-                  className="icon close button sizeMedium kindTertiary colorOnPrimaryColor noSidePadding"
-                  data-testid="value-container-chip-close"
-                  data-vibe="Button"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseUp={[Function]}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "height": "16px",
-                      "justifyContent": "center",
-                      "padding": 0,
-                      "width": "16px",
-                    }
-                  }
-                  type="button"
-                >
-                  <svg
-                    aria-hidden={true}
-                    className="icon noFocusStyle"
-                    data-testid="icon"
-                    data-vibe="Icon"
-                    fill="currentColor"
-                    height="16"
-                    viewBox="0 0 20 20"
-                    width="16"
-                  >
-                    <path
-                      d="M6.331 5.27a.75.75 0 0 0-1.06 1.06L8.94 10l-3.67 3.668a.75.75 0 1 0 1.06 1.06L10 11.06l3.668 3.669a.75.75 0 0 0 1.06-1.06l-3.668-3.67 3.67-3.669a.75.75 0 0 0-1.061-1.06L10 8.939l-3.669-3.67Z"
-                    />
-                  </svg>
-                </button>
-              </div>
-              <div
-                className="css-1m8eskj-Input"
-              >
-                <div
-                  className=""
-                  style={
-                    {
-                      "display": "inline-block",
-                    }
-                  }
-                >
-                  <input
-                    aria-activedescendant=""
-                    aria-autocomplete="list"
-                    aria-controls="dropdown-menu-list-id"
-                    aria-expanded={false}
-                    aria-label="Dropdown input"
-                    autoCapitalize="none"
-                    autoComplete="off"
-                    autoCorrect="off"
-                    disabled={false}
-                    id="react-select-18-input"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    role="combobox"
-                    spellCheck="false"
-                    style={
-                      {
-                        "background": 0,
-                        "border": 0,
-                        "boxSizing": "content-box",
-                        "color": "inherit",
-                        "fontSize": "inherit",
-                        "label": "input",
-                        "opacity": 1,
-                        "outline": 0,
-                        "padding": 0,
-                        "width": "1px",
-                      }
-                    }
-                    tabIndex="0"
-                    type="text"
-                    value=""
-                  />
-                  <div
-                    style={
-                      {
-                        "height": 0,
-                        "left": 0,
-                        "overflow": "scroll",
-                        "position": "absolute",
-                        "top": 0,
-                        "visibility": "hidden",
-                        "whiteSpace": "pre",
-                      }
-                    }
-                  >
-                    
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div />
-        </div>
-      </div>
-      <div
-        className=" css-hcxwnl-IndicatorsContainer"
-      >
-        <div
-          aria-hidden="true"
-          className="clear-indicator css-bter05-ClearIndicator"
-          onMouseDown={[Function]}
-          onTouchEnd={[Function]}
-        >
-          <svg
-            aria-hidden={true}
-            className="icon"
-            data-testid="icon"
-            data-vibe="Icon"
-            fill="currentColor"
-            height="20px"
-            tabIndex={-1}
-            viewBox="0 0 20 20"
-            width="20px"
-          >
-            <path
-              d="M6.331 5.27a.75.75 0 0 0-1.06 1.06L8.94 10l-3.67 3.668a.75.75 0 1 0 1.06 1.06L10 11.06l3.668 3.669a.75.75 0 0 0 1.06-1.06l-3.668-3.67 3.67-3.669a.75.75 0 0 0-1.061-1.06L10 8.939l-3.669-3.67Z"
-            />
-          </svg>
-        </div>
-        <span
-          className=" css-1xjgjl1-IndicatorSeparator"
-        />
-        <div
-          aria-hidden="true"
-          className="dropdown-indicator css-1ycu3uq-indicatorContainer"
-          onMouseDown={[Function]}
-          onTouchEnd={[Function]}
-        >
-          <svg
-            aria-hidden={true}
-            className="icon"
-            data-testid="icon"
-            data-vibe="Icon"
-            fill="currentColor"
-            height="20px"
-            tabIndex={-1}
-            viewBox="0 0 20 20"
-            width="20px"
-          >
-            <path
-              d="M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z"
-            />
-          </svg>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Dropdown renders correctly > with multi 1`] = `
-<div
-  className="dropdown css-bbwnb8-container"
-  id="dropdown-menu-id"
-  onKeyDown={[Function]}
->
-  <div>
-    <div
-      className=" css-13ywfe7-control"
-      onMouseDown={[Function]}
-      onTouchEnd={[Function]}
-    >
-      <div
-        className=" css-1b6uivj-ValueContainer"
-      >
-        <div
-          className="value-container"
-          onTouchEndCapture={[Function]}
-        >
-          <div
-            className="placeholder-container"
-          >
-            <div
-              className=" css-1usuuna-placeholder"
-            >
-              
-            </div>
-          </div>
-          <div
-            className="value-container-chips"
-            data-testid="value-container-chips"
-          >
-            <div
-              className="chip-with-input-wrapper"
-            >
-              <div
-                className="css-1m8eskj-Input"
-              >
-                <div
-                  className=""
-                  style={
-                    {
-                      "display": "inline-block",
-                    }
-                  }
-                >
-                  <input
-                    aria-activedescendant=""
-                    aria-autocomplete="list"
-                    aria-controls="dropdown-menu-list-id"
-                    aria-expanded={false}
-                    aria-label="Dropdown input"
-                    autoCapitalize="none"
-                    autoComplete="off"
-                    autoCorrect="off"
-                    disabled={false}
-                    id="react-select-12-input"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    role="combobox"
-                    spellCheck="false"
-                    style={
-                      {
-                        "background": 0,
-                        "border": 0,
-                        "boxSizing": "content-box",
-                        "color": "inherit",
-                        "fontSize": "inherit",
-                        "label": "input",
-                        "opacity": 1,
-                        "outline": 0,
-                        "padding": 0,
-                        "width": "1px",
-                      }
-                    }
-                    tabIndex="0"
-                    type="text"
-                    value=""
-                  />
-                  <div
-                    style={
-                      {
-                        "height": 0,
-                        "left": 0,
-                        "overflow": "scroll",
-                        "position": "absolute",
-                        "top": 0,
-                        "visibility": "hidden",
-                        "whiteSpace": "pre",
-                      }
-                    }
-                  >
-                    
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div />
-        </div>
-      </div>
-      <div
-        className=" css-hcxwnl-IndicatorsContainer"
-      >
-        <span
-          className=" css-1xjgjl1-IndicatorSeparator"
-        />
-        <div
-          aria-hidden="true"
-          className="dropdown-indicator css-1ycu3uq-indicatorContainer"
-          onMouseDown={[Function]}
-          onTouchEnd={[Function]}
-        >
-          <svg
-            aria-hidden={true}
-            className="icon"
-            data-testid="icon"
-            data-vibe="Icon"
-            fill="currentColor"
-            height="20px"
-            tabIndex={-1}
-            viewBox="0 0 20 20"
-            width="20px"
-          >
-            <path
-              d="M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z"
-            />
-          </svg>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Dropdown renders correctly > with multi and disabled 1`] = `
-<div
-  className="dropdown css-1gsgnpy-container"
-  id="dropdown-menu-id"
-  onKeyDown={[Function]}
->
-  <div>
-    <div
-      className=" css-1i7lmxf-control"
-      onMouseDown={[Function]}
-      onTouchEnd={[Function]}
-    >
-      <div
-        className=" css-1qxzdro-ValueContainer"
-      >
-        <div
-          className="value-container"
-          onTouchEndCapture={[Function]}
-        >
-          <div
-            className="value-container-chips without-placeholder"
-            data-testid="value-container-chips"
-          >
-            <div
-              aria-label="Ocean"
-              className="chips chips multiselect-chip-single-line-medium multiselect-chip-disabled disabled noAnimation"
-              data-testid="value-container-chip"
-              data-vibe="Chips"
-              id="ocean"
-              onClick={[Function]}
-              onMouseDown={[Function]}
-              onMouseEnter={[Function]}
-              onMouseLeave={[Function]}
-              style={
-                {
-                  "backgroundColor": undefined,
-                }
-              }
-            >
-              <div
-                className="typography primary start singleLineEllipsis text text2Normal label"
-                data-testid="text"
-              >
-                Ocean
-              </div>
-            </div>
-            <div
-              className="chip-with-input-wrapper"
-            >
-              <div
-                aria-label="Blue"
-                className="chips chips multiselect-chip-single-line-medium multiselect-chip-disabled disabled noAnimation"
-                data-testid="value-container-chip"
-                data-vibe="Chips"
-                id="blue"
-                onClick={[Function]}
-                onMouseDown={[Function]}
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-                style={
-                  {
-                    "backgroundColor": undefined,
-                  }
-                }
-              >
-                <div
-                  className="typography primary start singleLineEllipsis text text2Normal label"
-                  data-testid="text"
-                >
-                  Blue
-                </div>
-              </div>
-              <div
-                className="css-1m8eskj-Input"
-              >
-                <div
-                  className=""
-                  style={
-                    {
-                      "display": "inline-block",
-                    }
-                  }
-                >
-                  <input
-                    aria-activedescendant=""
-                    aria-autocomplete="list"
-                    aria-controls="dropdown-menu-list-id"
-                    aria-expanded={false}
-                    aria-label="Dropdown input"
-                    autoCapitalize="none"
-                    autoComplete="off"
-                    autoCorrect="off"
-                    disabled={true}
-                    id="react-select-13-input"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    role="combobox"
-                    spellCheck="false"
-                    style={
-                      {
-                        "background": 0,
-                        "border": 0,
-                        "boxSizing": "content-box",
-                        "color": "inherit",
-                        "fontSize": "inherit",
-                        "label": "input",
-                        "opacity": 1,
-                        "outline": 0,
-                        "padding": 0,
-                        "width": "1px",
-                      }
-                    }
-                    tabIndex="0"
-                    type="text"
-                    value=""
-                  />
-                  <div
-                    style={
-                      {
-                        "height": 0,
-                        "left": 0,
-                        "overflow": "scroll",
-                        "position": "absolute",
-                        "top": 0,
-                        "visibility": "hidden",
-                        "whiteSpace": "pre",
-                      }
-                    }
-                  >
-                    
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div />
-        </div>
-      </div>
-      <div
-        className=" css-bodkip-IndicatorsContainer"
-      >
-        <span
-          className=" css-1xjgjl1-IndicatorSeparator"
-        />
-        <div
-          aria-hidden="true"
-          className="dropdown-indicator css-1ycu3uq-indicatorContainer"
-          onMouseDown={[Function]}
-          onTouchEnd={[Function]}
-        >
-          <svg
-            aria-hidden={true}
-            className="icon"
-            data-testid="icon"
-            data-vibe="Icon"
-            fill="currentColor"
-            height="20px"
-            tabIndex={-1}
-            viewBox="0 0 20 20"
-            width="20px"
-          >
-            <path
-              d="M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z"
-            />
-          </svg>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Dropdown renders correctly > with multi and readonly 1`] = `
-<div
-  className="dropdown css-eh7fjc-container"
-  id="dropdown-menu-id"
-  onKeyDown={[Function]}
->
-  <div>
-    <div
-      className=" css-xe3jfm-control"
-      onMouseDown={[Function]}
-      onTouchEnd={[Function]}
-    >
-      <div
-        className=" css-1b6uivj-ValueContainer"
-      >
-        <div
-          className="value-container"
-          onTouchEndCapture={[Function]}
-        >
-          <div
-            className="value-container-chips without-placeholder"
-            data-testid="value-container-chips"
-          >
-            <div
-              aria-label="Ocean"
-              className="chips chips multiselect-chip-single-line-medium noAnimation withUserSelect"
-              data-testid="value-container-chip"
-              data-vibe="Chips"
-              id="ocean"
-              onClick={[Function]}
-              onMouseDown={[Function]}
-              onMouseEnter={[Function]}
-              onMouseLeave={[Function]}
-              style={
-                {
-                  "backgroundColor": "var(--primary-selected-color)",
-                }
-              }
-            >
-              <div
-                className="typography primary start singleLineEllipsis text text2Normal label"
-                data-testid="text"
-              >
-                Ocean
-              </div>
-            </div>
-            <div
-              className="chip-with-input-wrapper"
-            >
-              <div
-                aria-label="Blue"
-                className="chips chips multiselect-chip-single-line-medium noAnimation withUserSelect"
-                data-testid="value-container-chip"
-                data-vibe="Chips"
-                id="blue"
-                onClick={[Function]}
-                onMouseDown={[Function]}
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-                style={
-                  {
-                    "backgroundColor": "var(--primary-selected-color)",
-                  }
-                }
-              >
-                <div
-                  className="typography primary start singleLineEllipsis text text2Normal label"
-                  data-testid="text"
-                >
-                  Blue
-                </div>
-              </div>
-              <input
-                aria-autocomplete="list"
-                aria-label="Readonly   Selected: Ocean, Blue"
-                className="css-62g3xt-dummyInput"
-                disabled={false}
-                id="react-select-14-input"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                readOnly={true}
-                tabIndex="0"
-                value=""
-              />
-            </div>
-          </div>
-          <div />
-        </div>
-      </div>
-      <div
-        className=" css-hcxwnl-IndicatorsContainer"
-      >
-        <span
-          className=" css-1xjgjl1-IndicatorSeparator"
-        />
-        <div
-          aria-hidden="true"
-          className="dropdown-indicator css-1omzgld-indicatorContainer"
-          onMouseDown={[Function]}
-          onTouchEnd={[Function]}
-        >
-          <svg
-            aria-hidden={true}
-            className="icon"
-            data-testid="icon"
-            data-vibe="Icon"
-            fill="currentColor"
-            height="20px"
-            tabIndex={-1}
-            viewBox="0 0 20 20"
-            width="20px"
-          >
-            <path
-              d="M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z"
-            />
-          </svg>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Dropdown renders correctly > with multiline 1`] = `
-<div
-  className="dropdown css-bbwnb8-container"
-  id="dropdown-menu-id"
-  onKeyDown={[Function]}
->
-  <div>
-    <div
-      className=" css-13ywfe7-control"
-      onMouseDown={[Function]}
-      onTouchEnd={[Function]}
-    >
-      <div
-        className=" css-j6eacz-ValueContainer"
-      >
-        <div
-          className=" css-1usuuna-placeholder"
-        >
-          
-        </div>
-        <div
-          className="css-1m8eskj-Input"
-        >
-          <div
-            className=""
-            style={
-              {
-                "display": "inline-block",
-              }
-            }
-          >
-            <input
-              aria-activedescendant=""
-              aria-autocomplete="list"
-              aria-controls="dropdown-menu-list-id"
-              aria-expanded={false}
-              aria-label="Dropdown input"
-              autoCapitalize="none"
-              autoComplete="off"
-              autoCorrect="off"
-              disabled={false}
-              id="react-select-15-input"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              role="combobox"
-              spellCheck="false"
-              style={
-                {
-                  "background": 0,
-                  "border": 0,
-                  "boxSizing": "content-box",
-                  "color": "inherit",
-                  "fontSize": "inherit",
-                  "label": "input",
-                  "opacity": 1,
-                  "outline": 0,
-                  "padding": 0,
-                  "width": "1px",
-                }
-              }
-              tabIndex="0"
-              type="text"
-              value=""
-            />
-            <div
-              style={
-                {
-                  "height": 0,
-                  "left": 0,
-                  "overflow": "scroll",
-                  "position": "absolute",
-                  "top": 0,
-                  "visibility": "hidden",
-                  "whiteSpace": "pre",
-                }
-              }
-            >
-              
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className=" css-hcxwnl-IndicatorsContainer"
-      >
-        <span
-          className=" css-1xjgjl1-IndicatorSeparator"
-        />
-        <div
-          aria-hidden="true"
-          className="dropdown-indicator css-1ycu3uq-indicatorContainer"
-          onMouseDown={[Function]}
-          onTouchEnd={[Function]}
-        >
-          <svg
-            aria-hidden={true}
-            className="icon"
-            data-testid="icon"
-            data-vibe="Icon"
-            fill="currentColor"
-            height="20px"
-            tabIndex={-1}
-            viewBox="0 0 20 20"
-            width="20px"
-          >
-            <path
-              d="M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z"
-            />
-          </svg>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Dropdown renders correctly > with options 1`] = `
-<div
-  className="dropdown css-bbwnb8-container"
-  id="dropdown-menu-id"
-  onKeyDown={[Function]}
->
-  <div>
-    <div
-      className=" css-13ywfe7-control"
-      onMouseDown={[Function]}
-      onTouchEnd={[Function]}
-    >
-      <div
-        className=" css-j6eacz-ValueContainer"
-      >
-        <div
-          className=" css-1usuuna-placeholder"
-        >
-          
-        </div>
-        <div
-          className="css-1m8eskj-Input"
-        >
-          <div
-            className=""
-            style={
-              {
-                "display": "inline-block",
-              }
-            }
-          >
-            <input
-              aria-activedescendant=""
-              aria-autocomplete="list"
-              aria-controls="dropdown-menu-list-id"
-              aria-expanded={false}
-              aria-label="Dropdown input"
-              autoCapitalize="none"
-              autoComplete="off"
-              autoCorrect="off"
-              disabled={false}
-              id="react-select-9-input"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              role="combobox"
-              spellCheck="false"
-              style={
-                {
-                  "background": 0,
-                  "border": 0,
-                  "boxSizing": "content-box",
-                  "color": "inherit",
-                  "fontSize": "inherit",
-                  "label": "input",
-                  "opacity": 1,
-                  "outline": 0,
-                  "padding": 0,
-                  "width": "1px",
-                }
-              }
-              tabIndex="0"
-              type="text"
-              value=""
-            />
-            <div
-              style={
-                {
-                  "height": 0,
-                  "left": 0,
-                  "overflow": "scroll",
-                  "position": "absolute",
-                  "top": 0,
-                  "visibility": "hidden",
-                  "whiteSpace": "pre",
-                }
-              }
-            >
-              
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className=" css-hcxwnl-IndicatorsContainer"
-      >
-        <span
-          className=" css-1xjgjl1-IndicatorSeparator"
-        />
-        <div
-          aria-hidden="true"
-          className="dropdown-indicator css-1ycu3uq-indicatorContainer"
-          onMouseDown={[Function]}
-          onTouchEnd={[Function]}
-        >
-          <svg
-            aria-hidden={true}
-            className="icon"
-            data-testid="icon"
-            data-vibe="Icon"
-            fill="currentColor"
-            height="20px"
-            tabIndex={-1}
-            viewBox="0 0 20 20"
-            width="20px"
-          >
-            <path
-              d="M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z"
-            />
-          </svg>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Dropdown renders correctly > with placeholder 1`] = `
-<div
-  className="dropdown css-bbwnb8-container"
-  id="dropdown-menu-id"
-  onKeyDown={[Function]}
->
-  <div>
-    <div
-      className=" css-13ywfe7-control"
-      onMouseDown={[Function]}
-      onTouchEnd={[Function]}
-    >
-      <div
-        className=" css-j6eacz-ValueContainer"
-      >
-        <div
-          className=" css-1usuuna-placeholder"
-        >
-          text
-        </div>
-        <div
-          className="css-1m8eskj-Input"
-        >
-          <div
-            className=""
-            style={
-              {
-                "display": "inline-block",
-              }
-            }
-          >
-            <input
-              aria-activedescendant=""
-              aria-autocomplete="list"
-              aria-controls="dropdown-menu-list-id"
-              aria-expanded={false}
-              aria-label="Dropdown input"
-              autoCapitalize="none"
-              autoComplete="off"
-              autoCorrect="off"
-              disabled={false}
-              id="react-select-4-input"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              role="combobox"
-              spellCheck="false"
-              style={
-                {
-                  "background": 0,
-                  "border": 0,
-                  "boxSizing": "content-box",
-                  "color": "inherit",
-                  "fontSize": "inherit",
-                  "label": "input",
-                  "opacity": 1,
-                  "outline": 0,
-                  "padding": 0,
-                  "width": "1px",
-                }
-              }
-              tabIndex="0"
-              type="text"
-              value=""
-            />
-            <div
-              style={
-                {
-                  "height": 0,
-                  "left": 0,
-                  "overflow": "scroll",
-                  "position": "absolute",
-                  "top": 0,
-                  "visibility": "hidden",
-                  "whiteSpace": "pre",
-                }
-              }
-            >
-              
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className=" css-hcxwnl-IndicatorsContainer"
-      >
-        <span
-          className=" css-1xjgjl1-IndicatorSeparator"
-        />
-        <div
-          aria-hidden="true"
-          className="dropdown-indicator css-1ycu3uq-indicatorContainer"
-          onMouseDown={[Function]}
-          onTouchEnd={[Function]}
-        >
-          <svg
-            aria-hidden={true}
-            className="icon"
-            data-testid="icon"
-            data-vibe="Icon"
-            fill="currentColor"
-            height="20px"
-            tabIndex={-1}
-            viewBox="0 0 20 20"
-            width="20px"
-          >
-            <path
-              d="M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z"
-            />
-          </svg>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Dropdown renders correctly > with tabIndex 1`] = `
-<div
-  className="dropdown css-bbwnb8-container"
-  id="dropdown-menu-id"
-  onKeyDown={[Function]}
->
-  <div>
-    <div
-      className=" css-13ywfe7-control"
-      onMouseDown={[Function]}
-      onTouchEnd={[Function]}
-    >
-      <div
-        className=" css-j6eacz-ValueContainer"
-      >
-        <div
-          className=" css-1usuuna-placeholder"
-        >
-          
-        </div>
-        <div
-          className="css-1m8eskj-Input"
-        >
-          <div
-            className=""
-            style={
-              {
-                "display": "inline-block",
-              }
-            }
-          >
-            <input
-              aria-activedescendant=""
-              aria-autocomplete="list"
-              aria-controls="dropdown-menu-list-id"
-              aria-expanded={false}
-              aria-label="Dropdown input"
-              autoCapitalize="none"
-              autoComplete="off"
-              autoCorrect="off"
-              disabled={false}
-              id="react-select-19-input"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              role="combobox"
-              spellCheck="false"
-              style={
-                {
-                  "background": 0,
-                  "border": 0,
-                  "boxSizing": "content-box",
-                  "color": "inherit",
-                  "fontSize": "inherit",
-                  "label": "input",
-                  "opacity": 1,
-                  "outline": 0,
-                  "padding": 0,
-                  "width": "1px",
-                }
-              }
-              tabIndex={9999}
-              type="text"
-              value=""
-            />
-            <div
-              style={
-                {
-                  "height": 0,
-                  "left": 0,
-                  "overflow": "scroll",
-                  "position": "absolute",
-                  "top": 0,
-                  "visibility": "hidden",
-                  "whiteSpace": "pre",
-                }
-              }
-            >
-              
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className=" css-hcxwnl-IndicatorsContainer"
-      >
-        <span
-          className=" css-1xjgjl1-IndicatorSeparator"
-        />
-        <div
-          aria-hidden="true"
-          className="dropdown-indicator css-1ycu3uq-indicatorContainer"
-          onMouseDown={[Function]}
-          onTouchEnd={[Function]}
-        >
-          <svg
-            aria-hidden={true}
-            className="icon"
-            data-testid="icon"
-            data-vibe="Icon"
-            fill="currentColor"
-            height="20px"
-            tabIndex={-1}
-            viewBox="0 0 20 20"
-            width="20px"
-          >
-            <path
-              d="M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z"
-            />
-          </svg>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Dropdown renders correctly > with tooltipContent 1`] = `
-<div
-  className="dropdown css-bbwnb8-container"
-  id="dropdown-menu-id"
-  onKeyDown={[Function]}
->
-  <div
-    className=""
-    onBlur={[Function]}
-    onClick={[Function]}
-    onContextMenu={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onMouseDown={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-  >
-    <div
-      className=" css-13ywfe7-control"
-      onMouseDown={[Function]}
-      onTouchEnd={[Function]}
-    >
-      <div
-        className=" css-j6eacz-ValueContainer"
-      >
-        <div
-          className=" css-1usuuna-placeholder"
-        >
-          
-        </div>
-        <div
-          className="css-1m8eskj-Input"
-        >
-          <div
-            className=""
-            style={
-              {
-                "display": "inline-block",
-              }
-            }
-          >
-            <input
-              aria-activedescendant=""
-              aria-autocomplete="list"
-              aria-controls="dropdown-menu-list-id"
-              aria-expanded={false}
-              aria-label="Dropdown input"
-              autoCapitalize="none"
-              autoComplete="off"
-              autoCorrect="off"
-              disabled={false}
-              id="react-select-22-input"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              role="combobox"
-              spellCheck="false"
-              style={
-                {
-                  "background": 0,
-                  "border": 0,
-                  "boxSizing": "content-box",
-                  "color": "inherit",
-                  "fontSize": "inherit",
-                  "label": "input",
-                  "opacity": 1,
-                  "outline": 0,
-                  "padding": 0,
-                  "width": "1px",
-                }
-              }
-              tabIndex="0"
-              type="text"
-              value=""
-            />
-            <div
-              style={
-                {
-                  "height": 0,
-                  "left": 0,
-                  "overflow": "scroll",
-                  "position": "absolute",
-                  "top": 0,
-                  "visibility": "hidden",
-                  "whiteSpace": "pre",
-                }
-              }
-            >
-              
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className=" css-hcxwnl-IndicatorsContainer"
-      >
-        <span
-          className=" css-1xjgjl1-IndicatorSeparator"
-        />
-        <div
-          aria-hidden="true"
-          className="dropdown-indicator css-1ycu3uq-indicatorContainer"
-          onMouseDown={[Function]}
-          onTouchEnd={[Function]}
-        >
-          <svg
-            aria-hidden={true}
-            className="icon"
-            data-testid="icon"
-            data-vibe="Icon"
-            fill="currentColor"
-            height="20px"
-            tabIndex={-1}
-            viewBox="0 0 20 20"
-            width="20px"
-          >
-            <path
-              d="M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z"
-            />
-          </svg>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Dropdown renders correctly > with value 1`] = `
-<div
-  className="dropdown css-bbwnb8-container"
-  id="dropdown-menu-id"
-  onKeyDown={[Function]}
->
-  <div>
-    <div
-      className=" css-13ywfe7-control"
-      onMouseDown={[Function]}
-      onTouchEnd={[Function]}
-    >
-      <div
-        className=" css-j6eacz-ValueContainer"
-      >
-        <div
-          className="singleValue dropdown-wrapper__single-value--reset css-1f92y5n-singleValue"
-        >
-          <div
-            className="valueContainer"
-            data-testid="dropdown-option-content"
-            onMouseDown={[Function]}
-          >
-            <div
-              className="typography inherit start singleLineEllipsis text text2Normal"
-              data-testid="text"
-            >
-              Ocean
-            </div>
-          </div>
-        </div>
-        <div
-          className="css-1m8eskj-Input"
-        >
-          <div
-            className=""
-            style={
-              {
-                "display": "inline-block",
-              }
-            }
-          >
-            <input
-              aria-activedescendant=""
-              aria-autocomplete="list"
-              aria-controls="dropdown-menu-list-id"
-              aria-expanded={false}
-              aria-label="Dropdown input"
-              autoCapitalize="none"
-              autoComplete="off"
-              autoCorrect="off"
-              disabled={false}
-              id="react-select-20-input"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              role="combobox"
-              spellCheck="false"
-              style={
-                {
-                  "background": 0,
-                  "border": 0,
-                  "boxSizing": "content-box",
-                  "color": "inherit",
-                  "fontSize": "inherit",
-                  "label": "input",
-                  "opacity": 1,
-                  "outline": 0,
-                  "padding": 0,
-                  "width": "1px",
-                }
-              }
-              tabIndex="0"
-              type="text"
-              value=""
-            />
-            <div
-              style={
-                {
-                  "height": 0,
-                  "left": 0,
-                  "overflow": "scroll",
-                  "position": "absolute",
-                  "top": 0,
-                  "visibility": "hidden",
-                  "whiteSpace": "pre",
-                }
-              }
-            >
-              
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className=" css-hcxwnl-IndicatorsContainer"
-      >
-        <div
-          aria-hidden="true"
-          className="clear-indicator css-bter05-ClearIndicator"
-          onMouseDown={[Function]}
-          onTouchEnd={[Function]}
-        >
-          <svg
-            aria-hidden={true}
-            className="icon"
-            data-testid="icon"
-            data-vibe="Icon"
-            fill="currentColor"
-            height="20px"
-            tabIndex={-1}
-            viewBox="0 0 20 20"
-            width="20px"
-          >
-            <path
-              d="M6.331 5.27a.75.75 0 0 0-1.06 1.06L8.94 10l-3.67 3.668a.75.75 0 1 0 1.06 1.06L10 11.06l3.668 3.669a.75.75 0 0 0 1.06-1.06l-3.668-3.67 3.67-3.669a.75.75 0 0 0-1.061-1.06L10 8.939l-3.669-3.67Z"
-            />
-          </svg>
-        </div>
-        <span
-          className=" css-1xjgjl1-IndicatorSeparator"
-        />
-        <div
-          aria-hidden="true"
-          className="dropdown-indicator css-1ycu3uq-indicatorContainer"
-          onMouseDown={[Function]}
-          onTouchEnd={[Function]}
-        >
-          <svg
-            aria-hidden={true}
-            className="icon"
-            data-testid="icon"
-            data-vibe="Icon"
-            fill="currentColor"
-            height="20px"
-            tabIndex={-1}
-            viewBox="0 0 20 20"
-            width="20px"
-          >
-            <path
-              d="M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z"
-            />
-          </svg>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Dropdown renders correctly > without clear button 1`] = `
-<div
-  className="dropdown css-bbwnb8-container"
-  id="dropdown-menu-id"
-  onKeyDown={[Function]}
->
-  <div>
-    <div
-      className=" css-13ywfe7-control"
-      onMouseDown={[Function]}
-      onTouchEnd={[Function]}
-    >
-      <div
-        className=" css-j6eacz-ValueContainer"
-      >
-        <div
-          className=" css-1usuuna-placeholder"
-        >
-          
-        </div>
-        <div
-          className="css-1m8eskj-Input"
-        >
-          <div
-            className=""
-            style={
-              {
-                "display": "inline-block",
-              }
-            }
-          >
-            <input
-              aria-activedescendant=""
-              aria-autocomplete="list"
-              aria-controls="dropdown-menu-list-id"
-              aria-expanded={false}
-              aria-label="Dropdown input"
-              autoCapitalize="none"
-              autoComplete="off"
-              autoCorrect="off"
-              disabled={false}
-              id="react-select-7-input"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              role="combobox"
-              spellCheck="false"
-              style={
-                {
-                  "background": 0,
-                  "border": 0,
-                  "boxSizing": "content-box",
-                  "color": "inherit",
-                  "fontSize": "inherit",
-                  "label": "input",
-                  "opacity": 1,
-                  "outline": 0,
-                  "padding": 0,
-                  "width": "1px",
-                }
-              }
-              tabIndex="0"
-              type="text"
-              value=""
-            />
-            <div
-              style={
-                {
-                  "height": 0,
-                  "left": 0,
-                  "overflow": "scroll",
-                  "position": "absolute",
-                  "top": 0,
-                  "visibility": "hidden",
-                  "whiteSpace": "pre",
-                }
-              }
-            >
-              
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className=" css-hcxwnl-IndicatorsContainer"
-      >
-        <span
-          className=" css-1xjgjl1-IndicatorSeparator"
-        />
-        <div
-          aria-hidden="true"
-          className="dropdown-indicator css-1ycu3uq-indicatorContainer"
-          onMouseDown={[Function]}
-          onTouchEnd={[Function]}
-        >
-          <svg
-            aria-hidden={true}
-            className="icon"
-            data-testid="icon"
-            data-vibe="Icon"
-            fill="currentColor"
-            height="20px"
-            tabIndex={-1}
-            viewBox="0 0 20 20"
-            width="20px"
-          >
-            <path
-              d="M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z"
-            />
-          </svg>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/packages/core/src/components/Dropdown/__tests__/driver.jsx b/packages/core/src/components/Dropdown/__tests__/driver.jsx
deleted file mode 100644
index c8ca889709..0000000000
--- a/packages/core/src/components/Dropdown/__tests__/driver.jsx
+++ /dev/null
@@ -1,253 +0,0 @@
-import React from "react";
-import { render, fireEvent, act, cleanup } from "@testing-library/react";
-import Dropdown from "../Dropdown";
-
-const MOCK_OPTIONS = [
-  { value: "ocean", label: "Ocean", isFixed: true },
-  { value: "blue", label: "Blue", isDisabled: true },
-  { value: "purple", label: "Purple" },
-  { value: "red", label: "Red", isFixed: true },
-  { value: "orange", label: "Orange" },
-  { value: "yellow", label: "Yellow" }
-];
-
-const CHIP_TESTID = "value-container-chip";
-
-export default class DropdownDriver {
-  constructor() {
-    this.props = { className: "dropdown-story" };
-
-    return this;
-  }
-
-  render() {
-    cleanup();
-    this.renderResult = render(<Dropdown {...this.props} />);
-    return this.renderResult;
-  }
-
-  async renderWithEffects() {
-    await act(async () => {
-      this.render();
-
-      // If there's asynchronous logic in useEffect, we can await it here
-      await new Promise(resolve => setTimeout(resolve, 0)); // Adjust timeout based on the async logic
-    });
-    return this.renderResult;
-  }
-
-  ensureRendered() {
-    if (!this.renderResult) {
-      this.render();
-    }
-  }
-
-  get snapshot() {
-    this.ensureRendered();
-
-    return this.renderResult.asFragment();
-  }
-
-  get dropdownMenu() {
-    return this.renderResult.container.querySelector("[class*='-menu']");
-  }
-
-  get noOptionsMessage() {
-    return this.renderResult.queryByText("No options");
-  }
-
-  get chips() {
-    this.ensureRendered();
-
-    return this.renderResult.queryAllByTestId(CHIP_TESTID).reduce(
-      (acc, element) => ({
-        values: [...acc.values, element.id],
-        labels: [...acc.labels, element.textContent],
-        html: [...acc.html, element]
-      }),
-      {
-        values: [],
-        labels: [],
-        html: []
-      }
-    );
-  }
-
-  get singleValueText() {
-    return this.renderResult.container.querySelector("[class*='singleValue']").innerHTML;
-  }
-
-  get input() {
-    this.ensureRendered();
-    return this.renderResult.getByLabelText("Dropdown input");
-  }
-
-  focusInput() {
-    this.ensureRendered();
-
-    const inputElement = this.renderResult.getByLabelText("Dropdown input");
-    inputElement.focus();
-  }
-
-  clickInput() {
-    this.ensureRendered();
-
-    const inputElement = this.renderResult.getByLabelText("Dropdown input");
-    inputElement.focus();
-    fireEvent.mouseDown(inputElement);
-  }
-
-  selectOption(index) {
-    this.clickInput();
-
-    act(() => {
-      this.renderResult.getByText(this.options[index].label).click();
-    });
-  }
-
-  focusSelect(ref) {
-    act(() => {
-      ref.current.select.focus();
-    });
-  }
-
-  getCloseButton(index) {
-    this.ensureRendered();
-
-    const id = this.options[index].value;
-    const chip = this.renderResult.container.querySelector(`[data-testid="${CHIP_TESTID}"]#${id}`);
-
-    if (!chip) {
-      throw new Error(`Option #${index} was not selected`);
-    }
-
-    return chip.querySelector(`[data-testid="${CHIP_TESTID}-close"]`);
-  }
-
-  removeOption(index) {
-    const closeButton = this.getCloseButton(index);
-
-    const event = document.createEvent("SVGEvents");
-    event.initEvent("click", true, true);
-
-    act(() => {
-      closeButton.dispatchEvent(event);
-    });
-  }
-
-  clearOptions() {
-    this.ensureRendered();
-
-    const clearButton = this.renderResult.container.querySelector(".clear-indicator");
-
-    const event = document.createEvent("MouseEvents");
-    event.initEvent("mousedown", true, true);
-
-    act(() => {
-      clearButton.dispatchEvent(event);
-    });
-  }
-
-  setProp(propName, value) {
-    this.props[propName] = value;
-
-    return this;
-  }
-
-  withOptions(options = MOCK_OPTIONS) {
-    this.options = options;
-
-    return this.setProp("options", options);
-  }
-
-  withRef(ref) {
-    this.ref = ref;
-
-    return this.setProp("ref", ref);
-  }
-
-  withOnFocus(onFocus) {
-    this.onFocus = onFocus;
-
-    return this.setProp("onFocus", onFocus);
-  }
-
-  withVirtualizedOptions() {
-    this.props.options = new Array(10000).fill(null).map((_, i) => ({ value: i + 1, label: (i + 1).toString() }));
-    this.props.isVirtualized = true;
-
-    return this;
-  }
-
-  withAsyncOptions() {
-    this.props.asyncOptions = inputValue => {
-      return new Promise(resolve => {
-        setTimeout(() => {
-          resolve(MOCK_OPTIONS.filter(({ label }) => label.toLowerCase().includes(inputValue.toLowerCase())));
-        }, 1000);
-      });
-    };
-
-    return this;
-  }
-
-  withDefaultOptions() {
-    return this.setProp("defaultOptions", true);
-  }
-
-  withPlaceholder(placeHolder = "placeHolder") {
-    return this.setProp("placeHolder", placeHolder);
-  }
-
-  withSize(size) {
-    return this.setProp("size", size);
-  }
-
-  withOpenMenuOnClick() {
-    return this.setProp("openMenuOnClick", true);
-  }
-
-  withOpenMenuOnFocus() {
-    return this.setProp("openMenuOnFocus", true);
-  }
-
-  withMandatoryDefaultOptions() {
-    return this.setProp("withMandatoryDefaultOptions", true);
-  }
-
-  withDefaultValue(defaultValue) {
-    return this.setProp("defaultValue", defaultValue);
-  }
-
-  withExtraStyles(extraStyles) {
-    return this.setProp("extraStyles", extraStyles);
-  }
-
-  withMulti() {
-    return this.setProp("multi", true);
-  }
-
-  withValue(value) {
-    return this.setProp("value", value);
-  }
-
-  withOnChange(onChange) {
-    return this.setProp("onChange", onChange);
-  }
-
-  withOnOptionSelect(onOptionSelect) {
-    return this.setProp("onOptionSelect", onOptionSelect);
-  }
-
-  withOnOptionRemove(onOptionRemove) {
-    return this.setProp("onOptionRemove", onOptionRemove);
-  }
-
-  withOnClear(onClear) {
-    return this.setProp("onClear", onClear);
-  }
-
-  withSearchable(value) {
-    return this.setProp("searchable", value);
-  }
-}
diff --git a/packages/core/src/components/Dropdown/components/ChildrenContent/ChildrenContent.jsx b/packages/core/src/components/Dropdown/components/ChildrenContent/ChildrenContent.jsx
deleted file mode 100644
index 8b92f0befe..0000000000
--- a/packages/core/src/components/Dropdown/components/ChildrenContent/ChildrenContent.jsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React, { useCallback } from "react";
-import Avatar from "../../../Avatar/Avatar";
-import { Icon } from "@vibe/icon";
-import { Text } from "@vibe/typography";
-import styles from "./ChildrenContent.module.scss";
-import { getTestId } from "../../../../tests/test-ids-utils";
-import { ComponentDefaultTestId } from "../../../../tests/constants";
-
-export const ChildrenContent = ({ data, children, readOnly }) => {
-  const onMouseDown = useCallback(
-    event => {
-      if (readOnly) {
-        event.stopPropagation();
-      }
-    },
-    [readOnly]
-  );
-
-  return (
-    <div
-      className={styles.valueContainer}
-      onMouseDown={onMouseDown}
-      data-testid={getTestId(ComponentDefaultTestId.DROPDOWN_OPTION_CONTENT)}
-    >
-      {data?.leftRenderer || (
-        <>
-          {data?.leftAvatar && (
-            <Avatar
-              className={styles.avatar}
-              withoutBorder
-              square={data.square}
-              src={data.leftAvatar}
-              type="img"
-              customSize={20}
-            />
-          )}
-          {data?.leftIcon && <Icon className={styles.icon} iconSize={18} icon={data.leftIcon} />}
-        </>
-      )}
-      <Text type={Text.types.TEXT2} color={Text.colors.INHERIT}>
-        {children}
-      </Text>
-      {data?.rightIcon && <Icon iconSize={18} icon={data.rightIcon} />}
-      {data?.rightAvatar && (
-        <Avatar withoutBorder square={data.square} src={data.rightAvatar} type="img" customSize={20} />
-      )}
-    </div>
-  );
-};
diff --git a/packages/core/src/components/Dropdown/components/ChildrenContent/ChildrenContent.module.scss b/packages/core/src/components/Dropdown/components/ChildrenContent/ChildrenContent.module.scss
deleted file mode 100644
index 5cd0499439..0000000000
--- a/packages/core/src/components/Dropdown/components/ChildrenContent/ChildrenContent.module.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.valueContainer {
-  display: flex;
-  gap: var(--spacing-xs);
-  align-items: center;
-  width: 100%;
-
-  .avatar,
-  .icon {
-    flex-shrink: 0;
-  }
-}
diff --git a/packages/core/src/components/Dropdown/components/ClearIndicator/ClearIndicator.jsx b/packages/core/src/components/Dropdown/components/ClearIndicator/ClearIndicator.jsx
deleted file mode 100644
index 2a0778048b..0000000000
--- a/packages/core/src/components/Dropdown/components/ClearIndicator/ClearIndicator.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-import { components } from "react-select";
-import { Icon } from "@vibe/icon";
-import { CloseSmall } from "@vibe/icons";
-import { getIndicatorSize } from "../../Dropdown.styles";
-
-const ClearIndicator = props => {
-  const { size } = props;
-  return (
-    <components.ClearIndicator {...props} className="clear-indicator">
-      <Icon iconType="svg" icon={CloseSmall} iconSize={getIndicatorSize(size)} tabindex="-1" />
-    </components.ClearIndicator>
-  );
-};
-
-export default ClearIndicator;
diff --git a/packages/core/src/components/Dropdown/components/Control/Control.jsx b/packages/core/src/components/Dropdown/components/Control/Control.jsx
deleted file mode 100644
index ad190c6be7..0000000000
--- a/packages/core/src/components/Dropdown/components/Control/Control.jsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from "react";
-import { components } from "react-select";
-import { Tooltip } from "@vibe/tooltip";
-
-const Control = props => {
-  const { selectProps } = props;
-  const control = <components.Control {...props} />;
-  const controlRef = selectProps?.selectProps?.controlRef;
-  if (controlRef)
-    return (
-      <Tooltip
-        content={selectProps?.selectProps?.tooltipContent}
-        hideTrigger={["mouseleave", "click"]}
-        showTrigger={[Tooltip.hideShowTriggers.MOUSE_ENTER]}
-      >
-        <div ref={controlRef}>{control}</div>
-      </Tooltip>
-    );
-  return control;
-};
-
-export default Control;
diff --git a/packages/core/src/components/next/Dropdown/components/DropdownBase/DropdownBase.module.scss b/packages/core/src/components/Dropdown/components/DropdownBase/DropdownBase.module.scss
similarity index 97%
rename from packages/core/src/components/next/Dropdown/components/DropdownBase/DropdownBase.module.scss
rename to packages/core/src/components/Dropdown/components/DropdownBase/DropdownBase.module.scss
index df2ac5343e..5bb7be7d7e 100644
--- a/packages/core/src/components/next/Dropdown/components/DropdownBase/DropdownBase.module.scss
+++ b/packages/core/src/components/Dropdown/components/DropdownBase/DropdownBase.module.scss
@@ -55,5 +55,5 @@
   }
 }
 .helperText {
-  margin-top: var(--spacing-xs);
+  margin-top: var(--space-4);
 }
diff --git a/packages/core/src/components/next/Dropdown/components/DropdownBase/DropdownBase.tsx b/packages/core/src/components/Dropdown/components/DropdownBase/DropdownBase.tsx
similarity index 89%
rename from packages/core/src/components/next/Dropdown/components/DropdownBase/DropdownBase.tsx
rename to packages/core/src/components/Dropdown/components/DropdownBase/DropdownBase.tsx
index cfc48b1279..36e2dcc68c 100644
--- a/packages/core/src/components/next/Dropdown/components/DropdownBase/DropdownBase.tsx
+++ b/packages/core/src/components/Dropdown/components/DropdownBase/DropdownBase.tsx
@@ -1,12 +1,12 @@
 import React from "react";
 import cx from "classnames";
-import FieldLabel from "../../../../FieldLabel/FieldLabel";
+import FieldLabel from "../../../FieldLabel/FieldLabel";
 import { Text } from "@vibe/typography";
 import styles from "./DropdownBase.module.scss";
-import { getTestId } from "../../../../../tests/test-ids-utils";
-import { ComponentDefaultTestId, ComponentVibeId } from "../../../../../tests/constants";
+import { getTestId } from "../../../../tests/test-ids-utils";
+import { ComponentDefaultTestId, ComponentVibeId } from "../../../../tests/constants";
 import { useDropdownContext } from "../../context/DropdownContext";
-import { type BaseItemData } from "../../../../BaseItem";
+import { type BaseItemData } from "../../../BaseItem";
 import { Tooltip } from "@vibe/tooltip";
 
 interface DropdownBaseProps {
@@ -21,7 +21,7 @@ const DropdownBase = ({ dropdownRef, children }: DropdownBaseProps) => {
     getLabelProps,
     className,
     id,
-    ariaLabel,
+    "aria-label": ariaLabel,
     "data-testid": dataTestIdFromContext,
     disabled,
     readOnly,
diff --git a/packages/core/src/components/next/Dropdown/components/DropdownBaseList/DropdownBaseList.module.scss b/packages/core/src/components/Dropdown/components/DropdownBaseList/DropdownBaseList.module.scss
similarity index 77%
rename from packages/core/src/components/next/Dropdown/components/DropdownBaseList/DropdownBaseList.module.scss
rename to packages/core/src/components/Dropdown/components/DropdownBaseList/DropdownBaseList.module.scss
index 35fd633378..31dc3e536a 100644
--- a/packages/core/src/components/next/Dropdown/components/DropdownBaseList/DropdownBaseList.module.scss
+++ b/packages/core/src/components/Dropdown/components/DropdownBaseList/DropdownBaseList.module.scss
@@ -1,4 +1,4 @@
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 
 .wrapper {
   overflow-y: auto;
@@ -8,7 +8,7 @@
 
   .groupTitle {
     color: var(--secondary-text-color);
-    padding: var(--spacing-small) var(--spacing-xs);
+    padding: var(--space-8) var(--space-4);
     background-color: var(--secondary-background-color);
 
     &.sticky {
diff --git a/packages/core/src/components/next/Dropdown/components/DropdownBaseList/DropdownBaseList.tsx b/packages/core/src/components/Dropdown/components/DropdownBaseList/DropdownBaseList.tsx
similarity index 97%
rename from packages/core/src/components/next/Dropdown/components/DropdownBaseList/DropdownBaseList.tsx
rename to packages/core/src/components/Dropdown/components/DropdownBaseList/DropdownBaseList.tsx
index 045a339d3c..e4e8dd5a87 100644
--- a/packages/core/src/components/next/Dropdown/components/DropdownBaseList/DropdownBaseList.tsx
+++ b/packages/core/src/components/Dropdown/components/DropdownBaseList/DropdownBaseList.tsx
@@ -1,11 +1,11 @@
 import React, { forwardRef } from "react";
-import BaseItem from "../../../../BaseItem/BaseItem";
+import BaseItem from "../../../BaseItem/BaseItem";
 import styles from "./DropdownBaseList.module.scss";
 import { type DropdownBaseListProps } from "./DropdownBaseList.types";
 import { Flex } from "@vibe/layout";
 import { Text, type TextType } from "@vibe/typography";
 import cx from "classnames";
-import { Divider } from "../../../../Divider";
+import { Divider } from "../../../Divider";
 
 const DropdownBaseList = forwardRef(
   <Item extends Record<string, unknown>>(
diff --git a/packages/core/src/components/next/Dropdown/components/DropdownBaseList/DropdownBaseList.types.ts b/packages/core/src/components/Dropdown/components/DropdownBaseList/DropdownBaseList.types.ts
similarity index 95%
rename from packages/core/src/components/next/Dropdown/components/DropdownBaseList/DropdownBaseList.types.ts
rename to packages/core/src/components/Dropdown/components/DropdownBaseList/DropdownBaseList.types.ts
index c48bc12d59..6251196d5e 100644
--- a/packages/core/src/components/next/Dropdown/components/DropdownBaseList/DropdownBaseList.types.ts
+++ b/packages/core/src/components/Dropdown/components/DropdownBaseList/DropdownBaseList.types.ts
@@ -1,7 +1,7 @@
 import { type ReactNode } from "react";
 import type React from "react";
-import { type VibeComponentProps } from "../../../../../types";
-import { type BaseItemData, type BaseItemSizes, type BaseItemDirection } from "../../../../BaseItem";
+import { type VibeComponentProps } from "../../../../types";
+import { type BaseItemData, type BaseItemSizes, type BaseItemDirection } from "../../../BaseItem";
 
 export interface DropdownBaseListProps<Item = Record<string, unknown>>
   extends React.HTMLAttributes<HTMLUListElement>,
diff --git a/packages/core/src/components/next/Dropdown/components/DropdownBoxMode/DropdownBoxMode.module.scss b/packages/core/src/components/Dropdown/components/DropdownBoxMode/DropdownBoxMode.module.scss
similarity index 100%
rename from packages/core/src/components/next/Dropdown/components/DropdownBoxMode/DropdownBoxMode.module.scss
rename to packages/core/src/components/Dropdown/components/DropdownBoxMode/DropdownBoxMode.module.scss
diff --git a/packages/core/src/components/next/Dropdown/components/DropdownBoxMode/DropdownBoxMode.tsx b/packages/core/src/components/Dropdown/components/DropdownBoxMode/DropdownBoxMode.tsx
similarity index 100%
rename from packages/core/src/components/next/Dropdown/components/DropdownBoxMode/DropdownBoxMode.tsx
rename to packages/core/src/components/Dropdown/components/DropdownBoxMode/DropdownBoxMode.tsx
diff --git a/packages/core/src/components/Dropdown/components/DropdownIndicator/DropdownIndicator.jsx b/packages/core/src/components/Dropdown/components/DropdownIndicator/DropdownIndicator.jsx
deleted file mode 100644
index 10e79b1967..0000000000
--- a/packages/core/src/components/Dropdown/components/DropdownIndicator/DropdownIndicator.jsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from "react";
-import { components } from "react-select";
-import { Icon } from "@vibe/icon";
-import { DropdownChevronDown } from "@vibe/icons";
-import { getIndicatorSize } from "../../Dropdown.styles";
-
-const DropdownIndicator = props => {
-  const { isDisabled, size } = props;
-  return (
-    <components.DropdownIndicator {...props} className="dropdown-indicator">
-      <Icon
-        iconType="svg"
-        icon={DropdownChevronDown}
-        iconSize={getIndicatorSize(size)}
-        tabindex="-1"
-        clickable={!isDisabled}
-      />
-    </components.DropdownIndicator>
-  );
-};
-export default DropdownIndicator;
diff --git a/packages/core/src/components/next/Dropdown/components/DropdownPopup/DropdownPopup.tsx b/packages/core/src/components/Dropdown/components/DropdownPopup/DropdownPopup.tsx
similarity index 87%
rename from packages/core/src/components/next/Dropdown/components/DropdownPopup/DropdownPopup.tsx
rename to packages/core/src/components/Dropdown/components/DropdownPopup/DropdownPopup.tsx
index 7cc5413263..940d850622 100644
--- a/packages/core/src/components/next/Dropdown/components/DropdownPopup/DropdownPopup.tsx
+++ b/packages/core/src/components/Dropdown/components/DropdownPopup/DropdownPopup.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { Dialog } from "@vibe/dialog";
-import { matchWidthModifier } from "../../utils/dropdown-modifiers";
+import { matchWidthMiddleware } from "../../utils/dropdown-modifiers";
 import { useDropdownContext } from "../../context/DropdownContext";
 import Menu from "../Menu/Menu";
 import SingleSelectTrigger from "../Trigger/SingleSelectTrigger";
@@ -18,7 +18,7 @@ const DropdownPopup = () => {
       observeContentResize={true}
       showTrigger={[]}
       hideTrigger={[]}
-      modifiers={matchWidthModifier}
+      middleware={[matchWidthMiddleware]}
       content={<Menu />}
       referenceWrapperElement="div"
     >
diff --git a/packages/core/src/components/next/Dropdown/components/DropdownWrapperUI.tsx b/packages/core/src/components/Dropdown/components/DropdownWrapperUI.tsx
similarity index 94%
rename from packages/core/src/components/next/Dropdown/components/DropdownWrapperUI.tsx
rename to packages/core/src/components/Dropdown/components/DropdownWrapperUI.tsx
index eb88ff8286..48411efb1d 100644
--- a/packages/core/src/components/next/Dropdown/components/DropdownWrapperUI.tsx
+++ b/packages/core/src/components/Dropdown/components/DropdownWrapperUI.tsx
@@ -3,7 +3,7 @@ import { DropdownContext } from "../context/DropdownContext";
 import { type DropdownContextProps } from "../context/DropdownContext.types";
 import DropdownPopup from "./DropdownPopup/DropdownPopup";
 import DropdownBoxMode from "./DropdownBoxMode/DropdownBoxMode";
-import { type BaseItemData } from "../../../BaseItem";
+import { type BaseItemData } from "../../BaseItem";
 import DropdownBase from "./DropdownBase/DropdownBase";
 
 interface DropdownWrapperUIProps<Item extends BaseItemData<Record<string, unknown>>> {
diff --git a/packages/core/src/components/next/Dropdown/components/Menu/Menu.module.scss b/packages/core/src/components/Dropdown/components/Menu/Menu.module.scss
similarity index 100%
rename from packages/core/src/components/next/Dropdown/components/Menu/Menu.module.scss
rename to packages/core/src/components/Dropdown/components/Menu/Menu.module.scss
diff --git a/packages/core/src/components/next/Dropdown/components/Menu/Menu.tsx b/packages/core/src/components/Dropdown/components/Menu/Menu.tsx
similarity index 92%
rename from packages/core/src/components/next/Dropdown/components/Menu/Menu.tsx
rename to packages/core/src/components/Dropdown/components/Menu/Menu.tsx
index 2e546c04a8..ea5eec402c 100644
--- a/packages/core/src/components/next/Dropdown/components/Menu/Menu.tsx
+++ b/packages/core/src/components/Dropdown/components/Menu/Menu.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import cx from "classnames";
 import { DialogContentContainer } from "@vibe/dialog";
 import { useDropdownContext } from "../../context/DropdownContext";
-import { type BaseItemData } from "../../../../BaseItem";
+import { type BaseItemData } from "../../../BaseItem";
 import MenuList from "./MenuList";
 import styles from "./Menu.module.scss";
 
diff --git a/packages/core/src/components/next/Dropdown/components/Menu/MenuList.tsx b/packages/core/src/components/Dropdown/components/Menu/MenuList.tsx
similarity index 96%
rename from packages/core/src/components/next/Dropdown/components/Menu/MenuList.tsx
rename to packages/core/src/components/Dropdown/components/Menu/MenuList.tsx
index 36e7b9ec32..e28eba1da5 100644
--- a/packages/core/src/components/next/Dropdown/components/Menu/MenuList.tsx
+++ b/packages/core/src/components/Dropdown/components/Menu/MenuList.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import BaseList from "../DropdownBaseList/DropdownBaseList";
 import { useDropdownContext } from "../../context/DropdownContext";
-import { type BaseItemData } from "../../../../BaseItem";
+import { type BaseItemData } from "../../../BaseItem";
 
 const MenuList = <Item extends BaseItemData<Record<string, unknown>>>() => {
   const {
diff --git a/packages/core/src/components/next/Dropdown/components/MultiSelectedValues/MultiSelectedValues.module.scss b/packages/core/src/components/Dropdown/components/MultiSelectedValues/MultiSelectedValues.module.scss
similarity index 100%
rename from packages/core/src/components/next/Dropdown/components/MultiSelectedValues/MultiSelectedValues.module.scss
rename to packages/core/src/components/Dropdown/components/MultiSelectedValues/MultiSelectedValues.module.scss
diff --git a/packages/core/src/components/next/Dropdown/components/MultiSelectedValues/MultiSelectedValues.tsx b/packages/core/src/components/Dropdown/components/MultiSelectedValues/MultiSelectedValues.tsx
similarity index 94%
rename from packages/core/src/components/next/Dropdown/components/MultiSelectedValues/MultiSelectedValues.tsx
rename to packages/core/src/components/Dropdown/components/MultiSelectedValues/MultiSelectedValues.tsx
index 49cd8f9d61..8ed9b62d04 100644
--- a/packages/core/src/components/next/Dropdown/components/MultiSelectedValues/MultiSelectedValues.tsx
+++ b/packages/core/src/components/Dropdown/components/MultiSelectedValues/MultiSelectedValues.tsx
@@ -1,9 +1,9 @@
 import React, { useRef, useMemo, createRef } from "react";
-import { type BaseItemData } from "../../../../BaseItem";
-import { Chips } from "../../../../Chips";
+import { type BaseItemData } from "../../../BaseItem";
+import { Chips } from "../../../Chips";
 import { Flex } from "@vibe/layout";
 import { DialogContentContainer, Dialog } from "@vibe/dialog";
-import useItemsOverflow from "../../../../../hooks/useItemsOverflow/useItemsOverflow";
+import useItemsOverflow from "../../../../hooks/useItemsOverflow/useItemsOverflow";
 import styles from "./MultiSelectedValues.module.scss";
 import cx from "classnames";
 import DropdownChip from "../Trigger/DropdownChip";
@@ -141,7 +141,7 @@ function MultiSelectedValues<Item extends BaseItemData<Record<string, unknown>>>
                 label={`+ ${hiddenCount}`}
                 readOnly
                 noMargin
-                ariaLabel={`+${hiddenCount}. ${selectedItems.length - hiddenCount} items are visible out of ${
+                aria-label={`+${hiddenCount}. ${selectedItems.length - hiddenCount} items are visible out of ${
                   selectedItems.length
                 }`}
                 data-testid="dropdown-overflow-counter"
diff --git a/packages/core/src/components/Dropdown/components/MultiValue/MultiValue.jsx b/packages/core/src/components/Dropdown/components/MultiValue/MultiValue.jsx
deleted file mode 100644
index d287694cdb..0000000000
--- a/packages/core/src/components/Dropdown/components/MultiValue/MultiValue.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from "react";
-import { components } from "react-select";
-
-const MultiValue = props => {
-  const { Renderer, data } = props;
-  if (!Renderer) return null;
-
-  return (
-    <components.MultiValue {...props}>
-      <Renderer {...data} />
-    </components.MultiValue>
-  );
-};
-
-export default MultiValue;
diff --git a/packages/core/src/components/Dropdown/components/MultiValueContainer/MultiValueContainer.jsx b/packages/core/src/components/Dropdown/components/MultiValueContainer/MultiValueContainer.jsx
deleted file mode 100644
index 623ed46a91..0000000000
--- a/packages/core/src/components/Dropdown/components/MultiValueContainer/MultiValueContainer.jsx
+++ /dev/null
@@ -1,171 +0,0 @@
-import React, { useCallback, useEffect, useState } from "react";
-import { components } from "react-select";
-import cx from "classnames";
-import { useHiddenOptionsData } from "../../hooks/useHiddenOptionsData";
-import Counter from "../../../Counter/Counter";
-import { Dialog, DialogContentContainer } from "@vibe/dialog";
-import Chips from "../../../Chips/Chips";
-import classes from "./MultiValueContainer.module.scss";
-
-const DIALOG_OFFSET_Y = 5;
-
-export default function Container({ children, selectProps, ...otherProps }) {
-  const {
-    isDisabled,
-    placeholder,
-    inputValue,
-    selectProps: customProps = {},
-    withMandatoryDefaultOptions,
-    readOnly
-  } = selectProps;
-  const { selectedOptions, onSelectedDelete, isMultiline, popupsContainerSelector, size, dialogClassName } =
-    customProps;
-  const clickHandler = children[1];
-  const [ref, setRef] = useState();
-  const [isCounterShown, setIsCounterShown] = useState(false);
-  const [isDialogOpen, setIsDialogOpen] = useState(false);
-  const showPlaceholder = selectedOptions.length === 0 && !inputValue;
-  const chipWrapperClassName = classes["chip-with-input-wrapper"];
-  const chipClassName = cx(
-    isMultiline ? classes["multiselect-chip-multi-line"] : classes[`multiselect-chip-single-line-${size}`],
-    { [classes["multiselect-chip-disabled"]]: isDisabled }
-  );
-
-  const { overflowIndex, hiddenOptionsCount } = useHiddenOptionsData({
-    isMultiline,
-    ref,
-    chipClassName,
-    chipWrapperClassName,
-    selectedOptionsCount: selectedOptions.length,
-    isCounterShown
-  });
-
-  useEffect(() => {
-    setIsCounterShown(hiddenOptionsCount > 0);
-  }, [hiddenOptionsCount]);
-
-  const handleDialogShow = useCallback(() => {
-    setIsDialogOpen(true);
-  }, []);
-
-  const handleDialogHide = useCallback(() => {
-    setIsDialogOpen(false);
-  }, []);
-
-  const onDelete = useCallback(
-    option => {
-      onSelectedDelete(option.value, { action: "remove-value", removedValue: option });
-    },
-    [onSelectedDelete]
-  );
-
-  const DropdownChipColors = ["primary", "negative", "positive"];
-  const renderOptions = useCallback(
-    (from = 0, to = selectedOptions.length) =>
-      selectedOptions.map((option, index) => {
-        const overrideChipColor = DropdownChipColors.includes(option.chipColor) ? option.chipColor : "primary";
-        return index >= from && index < to ? (
-          <Chips
-            data-testid="value-container-chip"
-            key={option.value}
-            className={cx(classes.chips, chipClassName)}
-            noAnimation
-            disabled={isDisabled}
-            id={option.value}
-            label={option.label}
-            onDelete={() => onDelete(option)}
-            disableClickableBehavior
-            onMouseDown={e => {
-              e.stopPropagation();
-            }}
-            readOnly={readOnly || (withMandatoryDefaultOptions && option.isMandatory)}
-            allowTextSelection={readOnly}
-            leftRenderer={option.leftRenderer}
-            rightRenderer={option.rightRenderer}
-            leftAvatar={option.leftAvatar}
-            leftIcon={option.leftIcon}
-            color={overrideChipColor}
-          />
-        ) : null;
-      }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [selectedOptions, chipClassName, isDisabled, readOnly, withMandatoryDefaultOptions, onDelete, size]
-  );
-
-  return (
-    <components.ValueContainer selectProps={selectProps} {...otherProps}>
-      <div
-        className={classes["value-container"]}
-        onTouchEndCapture={e => {
-          e.stopPropagation();
-        }}
-      >
-        {showPlaceholder && (
-          <div className={classes["placeholder-container"]}>
-            <components.Placeholder {...otherProps}>{placeholder}</components.Placeholder>
-          </div>
-        )}
-        <div
-          className={cx(classes["value-container-chips"], { [classes["without-placeholder"]]: !showPlaceholder })}
-          ref={newRef => setRef(newRef)}
-          data-testid="value-container-chips"
-        >
-          {isCounterShown ? (
-            <>
-              {renderOptions(0, overflowIndex - 1)}
-              <div className={chipWrapperClassName}>
-                {renderOptions(overflowIndex - 1, overflowIndex)}
-                {clickHandler}
-              </div>
-              {renderOptions(overflowIndex)}
-            </>
-          ) : (
-            <>
-              {renderOptions(0, selectedOptions.length - 1)}
-              <div className={chipWrapperClassName}>
-                {renderOptions(selectedOptions.length - 1)}
-                {clickHandler}
-              </div>
-            </>
-          )}
-        </div>
-        <div>
-          {isCounterShown && (
-            <Dialog
-              content={() => (
-                <DialogContentContainer
-                  className={classes.valueDialogContent}
-                  onMouseDown={e => {
-                    e.stopPropagation();
-                  }}
-                >
-                  {renderOptions(overflowIndex)}
-                </DialogContentContainer>
-              )}
-              containerSelector={popupsContainerSelector}
-              tooltip
-              showTrigger="click"
-              hideTrigger="clickoutside"
-              position="bottom"
-              moveBy={{ main: DIALOG_OFFSET_Y }}
-              wrapperClassName={dialogClassName}
-              onDialogDidShow={handleDialogShow}
-              onDialogDidHide={handleDialogHide}
-            >
-              <Counter
-                kind="line"
-                prefix="+"
-                count={hiddenOptionsCount}
-                counterClassName={cx(classes.dropdownCounter, { [classes.active]: isDialogOpen })}
-                onMouseDown={e => {
-                  e.stopPropagation();
-                }}
-                noAnimation
-              />
-            </Dialog>
-          )}
-        </div>
-      </div>
-    </components.ValueContainer>
-  );
-}
diff --git a/packages/core/src/components/Dropdown/components/MultiValueContainer/MultiValueContainer.module.scss b/packages/core/src/components/Dropdown/components/MultiValueContainer/MultiValueContainer.module.scss
deleted file mode 100644
index 6d4090b544..0000000000
--- a/packages/core/src/components/Dropdown/components/MultiValueContainer/MultiValueContainer.module.scss
+++ /dev/null
@@ -1,75 +0,0 @@
-/* stylelint-disable selector-class-pattern */
-
-@import "~monday-ui-style/dist/mixins";
-
-.chip-with-input-wrapper {
-  display: flex;
-  max-width: 100%;
-}
-.placeholder-container {
-  margin-left: 6px;
-}
-
-.multiselect-chip-multi-line {
-  --chips-margin: 2px;
-}
-
-.multiselect-chip-single-line-medium {
-  --chips-margin: 5px 2px;
-}
-
-.multiselect-chip-single-line-large {
-  --chips-margin: 9px 2px;
-}
-
-.multiselect-chip-single-line-small {
-  --chips-margin: 1px 2px;
-}
-
-.multiselect-chip-disabled {
-  background-color: var(--ui-background-color) !important;
-}
-
-.value-container {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-}
-
-.value-container-chips {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  flex-grow: 1;
-  height: 100%;
-  overflow: hidden;
-
-  &.without-placeholder {
-    margin-left: 6px;
-  }
-}
-
-.valueDialogContent {
-  @include scroller();
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  max-height: 300px;
-  overflow-y: auto;
-
-  .chips {
-    flex-shrink: 0;
-  }
-}
-
-.dropdownCounter {
-  &:hover {
-    background-color: var(--primary-background-hover-color);
-    box-shadow: 0 0 0 1px var(--primary-hover-color) inset;
-  }
-
-  &.active {
-    box-shadow: 0 0 0 1px var(--primary-hover-color) inset;
-  }
-}
diff --git a/packages/core/src/components/next/Dropdown/components/Trigger/DropdownChip.tsx b/packages/core/src/components/Dropdown/components/Trigger/DropdownChip.tsx
similarity index 93%
rename from packages/core/src/components/next/Dropdown/components/Trigger/DropdownChip.tsx
rename to packages/core/src/components/Dropdown/components/Trigger/DropdownChip.tsx
index 8a1e86ba01..8bcf00851e 100644
--- a/packages/core/src/components/next/Dropdown/components/Trigger/DropdownChip.tsx
+++ b/packages/core/src/components/Dropdown/components/Trigger/DropdownChip.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import { Chips, type ChipsProps } from "../../../../Chips";
-import { type BaseItemData } from "../../../../BaseItem";
+import { Chips, type ChipsProps } from "../../../Chips";
+import { type BaseItemData } from "../../../BaseItem";
 
 const getChipPropsFromItemElements = (item: BaseItemData<Record<string, unknown>>): Partial<ChipsProps> => {
   const chipProps: Partial<ChipsProps> = {};
diff --git a/packages/core/src/components/next/Dropdown/components/Trigger/DropdownInput.tsx b/packages/core/src/components/Dropdown/components/Trigger/DropdownInput.tsx
similarity index 97%
rename from packages/core/src/components/next/Dropdown/components/Trigger/DropdownInput.tsx
rename to packages/core/src/components/Dropdown/components/Trigger/DropdownInput.tsx
index 325fe50ca5..0ecb0718fa 100644
--- a/packages/core/src/components/next/Dropdown/components/Trigger/DropdownInput.tsx
+++ b/packages/core/src/components/Dropdown/components/Trigger/DropdownInput.tsx
@@ -3,7 +3,7 @@ import cx from "classnames";
 import { BaseInput } from "@vibe/base";
 import styles from "./Trigger.module.scss";
 import { useDropdownContext } from "../../context/DropdownContext";
-import { type BaseItemData } from "../../../../BaseItem";
+import { type BaseItemData } from "../../../BaseItem";
 import { Text } from "@vibe/typography";
 
 const DropdownInput = ({ inputSize, fullWidth }: { inputSize?: "small" | "medium" | "large"; fullWidth?: boolean }) => {
diff --git a/packages/core/src/components/next/Dropdown/components/Trigger/MultiSelectTrigger.tsx b/packages/core/src/components/Dropdown/components/Trigger/MultiSelectTrigger.tsx
similarity index 94%
rename from packages/core/src/components/next/Dropdown/components/Trigger/MultiSelectTrigger.tsx
rename to packages/core/src/components/Dropdown/components/Trigger/MultiSelectTrigger.tsx
index c09a09ff4e..6db13e3f6c 100644
--- a/packages/core/src/components/next/Dropdown/components/Trigger/MultiSelectTrigger.tsx
+++ b/packages/core/src/components/Dropdown/components/Trigger/MultiSelectTrigger.tsx
@@ -3,10 +3,10 @@ import { Flex } from "@vibe/layout";
 import MultiSelectedValues from "../MultiSelectedValues/MultiSelectedValues";
 import DropdownInput from "./DropdownInput";
 import { useDropdownContext } from "../../context/DropdownContext";
-import { type BaseItemData } from "../../../../BaseItem";
+import { type BaseItemData } from "../../../BaseItem";
 import TriggerActions from "./TriggerActions";
 import styles from "./Trigger.module.scss";
-import { getStyle } from "../../../../../helpers/typesciptCssModulesHelper";
+import { getStyle } from "../../../../helpers/typesciptCssModulesHelper";
 import cx from "classnames";
 import DropdownChip from "./DropdownChip";
 
@@ -23,7 +23,7 @@ const MultiSelectTrigger = () => {
     getToggleButtonProps,
     label,
     getLabelProps,
-    ariaLabel,
+    "aria-label": ariaLabel,
     minVisibleCount
   } = useDropdownContext<BaseItemData>();
 
diff --git a/packages/core/src/components/next/Dropdown/components/Trigger/SingleSelectTrigger.tsx b/packages/core/src/components/Dropdown/components/Trigger/SingleSelectTrigger.tsx
similarity index 92%
rename from packages/core/src/components/next/Dropdown/components/Trigger/SingleSelectTrigger.tsx
rename to packages/core/src/components/Dropdown/components/Trigger/SingleSelectTrigger.tsx
index 2726b4fc81..aea955d646 100644
--- a/packages/core/src/components/next/Dropdown/components/Trigger/SingleSelectTrigger.tsx
+++ b/packages/core/src/components/Dropdown/components/Trigger/SingleSelectTrigger.tsx
@@ -1,12 +1,12 @@
 import React from "react";
 import cx from "classnames";
-import { BaseItem, type BaseItemData } from "../../../../BaseItem";
+import { BaseItem, type BaseItemData } from "../../../BaseItem";
 import DropdownInput from "./DropdownInput";
 import styles from "./Trigger.module.scss";
 import { useDropdownContext } from "../../context/DropdownContext";
 import { Flex } from "@vibe/layout";
 import TriggerActions from "./TriggerActions";
-import { getStyle } from "../../../../../helpers/typesciptCssModulesHelper";
+import { getStyle } from "../../../../helpers/typesciptCssModulesHelper";
 
 const SingleSelectTrigger = () => {
   const {
@@ -22,7 +22,7 @@ const SingleSelectTrigger = () => {
     error,
     label,
     getLabelProps,
-    ariaLabel
+    "aria-label": ariaLabel
   } = useDropdownContext<BaseItemData>();
 
   return (
diff --git a/packages/core/src/components/next/Dropdown/components/Trigger/Trigger.module.scss b/packages/core/src/components/Dropdown/components/Trigger/Trigger.module.scss
similarity index 79%
rename from packages/core/src/components/next/Dropdown/components/Trigger/Trigger.module.scss
rename to packages/core/src/components/Dropdown/components/Trigger/Trigger.module.scss
index f8df5d89f1..24a30313a0 100644
--- a/packages/core/src/components/next/Dropdown/components/Trigger/Trigger.module.scss
+++ b/packages/core/src/components/Dropdown/components/Trigger/Trigger.module.scss
@@ -1,4 +1,4 @@
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 
 .triggerWrapper {
   flex-grow: 1;
@@ -11,6 +11,10 @@
 
   &.small {
     min-height: 32px;
+
+    .placeholderText {
+      padding-inline-start: var(--space-8);
+    }
   }
 
   &.medium {
@@ -34,7 +38,7 @@
     &.multiSelected {
       width: 48px;
       flex-shrink: 0;
-      padding: 0 var(--spacing-xs);
+      padding: 0 var(--space-4);
 
       &.fullWidth {
         width: 100%;
@@ -53,12 +57,11 @@
     position: relative;
     pointer-events: none;
     inset: 0;
-    padding-inline-start: var(--spacing-xs);
+    padding-inline-start: 0;
     width: 100%;
     @include smoothing-text;
 
     &.small {
-      padding-inline-start: var(--spacing-small);
       min-height: 32px;
       height: 32px;
     }
@@ -79,12 +82,13 @@
   }
 
   .placeholderText {
-    padding-inline-start: var(--spacing-medium);
+    padding-inline-start: var(--space-12);
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     cursor: pointer;
+    color: var(--placeholder-color);
     @include smoothing-text;
 
     &.disabled {
@@ -94,10 +98,10 @@
 }
 
 .multiWrapper {
-  padding: var(--spacing-xs) 0 var(--spacing-xs) var(--spacing-small);
+  padding: var(--space-4) 0 var(--space-4) var(--space-8);
   width: 100%;
 }
 
 .actionsWrapper {
-  padding: 0 var(--spacing-xs);
+  padding: 0 var(--space-4);
 }
diff --git a/packages/core/src/components/next/Dropdown/components/Trigger/TriggerActions.tsx b/packages/core/src/components/Dropdown/components/Trigger/TriggerActions.tsx
similarity index 89%
rename from packages/core/src/components/next/Dropdown/components/Trigger/TriggerActions.tsx
rename to packages/core/src/components/Dropdown/components/Trigger/TriggerActions.tsx
index a9f48a4020..b80612d9af 100644
--- a/packages/core/src/components/next/Dropdown/components/Trigger/TriggerActions.tsx
+++ b/packages/core/src/components/Dropdown/components/Trigger/TriggerActions.tsx
@@ -5,7 +5,7 @@ import { Flex } from "@vibe/layout";
 import { Loader } from "@vibe/loader";
 import styles from "./Trigger.module.scss";
 import { useDropdownContext } from "../../context/DropdownContext";
-import { type BaseItemData } from "../../../../BaseItem";
+import { type BaseItemData } from "../../../BaseItem";
 
 const sizeMap = {
   large: "medium",
@@ -64,7 +64,7 @@ const TriggerActions = () => {
             icon={CloseSmall}
             onClick={handleClear}
             size={iconButtonSize}
-            ariaLabel={clearAriaLabel}
+            aria-label={clearAriaLabel}
             hideTooltip
           />
         )}
@@ -73,9 +73,9 @@ const TriggerActions = () => {
             icon={isOpen ? DropdownChevronUp : DropdownChevronDown}
             size={iconButtonSize}
             disabled={disabled}
-            ariaControls={getMenuProps().id}
-            ariaExpanded={isOpen}
-            ariaLabeledBy={getMenuProps().id}
+            aria-controls={getMenuProps().id}
+            aria-expanded={isOpen}
+            aria-labelledby={getMenuProps().id}
             tabIndex={-1}
             onClick={() => {
               toggleMenu();
diff --git a/packages/core/src/components/Dropdown/components/menu/menu.jsx b/packages/core/src/components/Dropdown/components/menu/menu.jsx
deleted file mode 100644
index e14f63ab78..0000000000
--- a/packages/core/src/components/Dropdown/components/menu/menu.jsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import cx from "classnames";
-import React from "react";
-import { components } from "react-select";
-import styles from "./menu.module.scss";
-
-const Menu = ({ children, Renderer, selectProps, dropdownMenuWrapperClassName, id, ariaLabel, ...props }) => {
-  const rendererProps = {
-    children,
-    selectProps,
-    ...props,
-    innerProps: {
-      ...props.innerProps,
-      id,
-      role: "listbox",
-      "aria-label": ariaLabel
-    }
-  };
-
-  const withFixedPosition =
-    selectProps?.selectProps?.insideOverflowContainer || selectProps?.selectProps?.insideOverflowWithTransformContainer;
-
-  // Temporary fix, which disables animation :
-  // - when using menuPortalTarget or popupsContainerSelector there are issues that animation goes above the select preventing from tapping it (pr #1543)
-  // - when using menuPosition="fixed" (e.g. inside of Modal) not whole list is visible for scroll cause of it (pr #1738)
-  // const withoutAnimation =
-  //   !!selectProps?.menuPortalTarget || !!selectProps.popupsContainerSelector || selectProps?.menuPosition === Dropdown.menuPositions.FIXED;
-  // Always disable animation for now - messes up in too many places and isn't really noticeable
-  const withoutAnimation = true;
-
-  return (
-    <components.Menu
-      {...props}
-      innerProps={{ ...props.innerProps, onScroll: props.onScroll }}
-      className={cx(
-        styles.dropdownMenuWrapper,
-        {
-          [styles.dropdownMenuWrapperFixedPosition]: withFixedPosition,
-          [styles.withoutAnimation]: withoutAnimation
-        },
-        dropdownMenuWrapperClassName
-      )}
-    >
-      {Renderer && Renderer(rendererProps)}
-      {!Renderer && children}
-    </components.Menu>
-  );
-};
-
-export default Menu;
diff --git a/packages/core/src/components/Dropdown/components/menu/menu.module.scss b/packages/core/src/components/Dropdown/components/menu/menu.module.scss
deleted file mode 100644
index 0c72efc1fd..0000000000
--- a/packages/core/src/components/Dropdown/components/menu/menu.module.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-.dropdownMenuWrapper {
-  animation: fadeIn var(--motion-productive-medium) var(--motion-timing-enter);
-
-  :global(.dark-app-theme) &,
-  :global(.black-app-theme) &,
-  :global(.hacker-app-theme) & {
-    box-shadow: 0 0 0 1px var(--layout-border-color), var(--box-shadow-small);
-  }
-
-  &.withoutAnimation {
-    animation: none;
-  }
-}
-
-.dropdownMenuWrapperFixedPosition {
-  /* When inside a scrollable area, we want the menu to appear above the scrollable container (we set the specific position by js) */
-  position: fixed !important;
-}
-
-@keyframes fadeIn {
-  0% {
-    opacity: 0;
-    z-index: -10000;
-    transform: translateY(var(--dropdown-menu-fadinY, -75px));
-  }
-  100% {
-    opacity: 1;
-    z-index: 999;
-    transform: translateY(0px);
-  }
-}
diff --git a/packages/core/src/components/Dropdown/components/option/option.jsx b/packages/core/src/components/Dropdown/components/option/option.jsx
deleted file mode 100644
index e9fd443236..0000000000
--- a/packages/core/src/components/Dropdown/components/option/option.jsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import cx from "classnames";
-import React, { useEffect } from "react";
-import { components } from "react-select";
-import { Tooltip } from "@vibe/tooltip";
-import { ChildrenContent } from "../ChildrenContent/ChildrenContent";
-import styles from "./option.module.scss";
-
-const Option = ({ Renderer, data, children, setFocusedOptionId, optionWrapperClassName, ...props }) => {
-  const tooltipProps = data?.tooltipProps || {};
-  const rendererProps = {
-    children,
-    data,
-    ...props,
-    innerProps: {
-      ...props.innerProps,
-      role: "option",
-      "aria-selected": props.isSelected
-    }
-  };
-
-  useEffect(() => {
-    if (props.isFocused) {
-      setFocusedOptionId(props.innerProps.id);
-    }
-  }, [props.isFocused, props.innerProps.id, setFocusedOptionId]);
-
-  return (
-    <Tooltip {...tooltipProps} position="right">
-      {Renderer ? (
-        <components.Option {...rendererProps} className={cx(styles.optionReset, optionWrapperClassName)}>
-          <Renderer {...rendererProps} {...data} /> {/* Spreading data here for a backward compatability */}
-        </components.Option>
-      ) : (
-        <components.Option {...rendererProps} className={cx(styles.optionReset, optionWrapperClassName)}>
-          <ChildrenContent data={data}>{children}</ChildrenContent>
-        </components.Option>
-      )}
-    </Tooltip>
-  );
-};
-
-export default Option;
diff --git a/packages/core/src/components/Dropdown/components/option/option.module.scss b/packages/core/src/components/Dropdown/components/option/option.module.scss
deleted file mode 100644
index 0279b915a1..0000000000
--- a/packages/core/src/components/Dropdown/components/option/option.module.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.optionReset {
-  height: auto;
-}
diff --git a/packages/core/src/components/Dropdown/components/singleValue/singleValue.jsx b/packages/core/src/components/Dropdown/components/singleValue/singleValue.jsx
deleted file mode 100644
index 11c64610e4..0000000000
--- a/packages/core/src/components/Dropdown/components/singleValue/singleValue.jsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from "react";
-import cx from "classnames";
-import { components } from "react-select";
-import { ChildrenContent } from "../ChildrenContent/ChildrenContent";
-import styles from "./singleValue.module.scss";
-
-const SingleValue = ({ Renderer, data, children, readOnly, singleValueWrapperClassName, ...props }) => {
-  const rendererProps = { children, readOnly, data, ...props };
-  const value = Renderer ? (
-    <Renderer {...rendererProps} {...data} /> // Spreading data here for a backward compatability
-  ) : (
-    <ChildrenContent data={data} readOnly={readOnly}>
-      {children}
-    </ChildrenContent>
-  );
-  return (
-    <components.SingleValue
-      {...props}
-      className={cx(styles.singleValue, "dropdown-wrapper__single-value--reset", singleValueWrapperClassName)}
-    >
-      {value}
-    </components.SingleValue>
-  );
-};
-
-export default SingleValue;
diff --git a/packages/core/src/components/Dropdown/components/singleValue/singleValue.module.scss b/packages/core/src/components/Dropdown/components/singleValue/singleValue.module.scss
deleted file mode 100644
index edd7879351..0000000000
--- a/packages/core/src/components/Dropdown/components/singleValue/singleValue.module.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.singleValue {
-  padding-inline: var(--spacing-xs);
-}
\ No newline at end of file
diff --git a/packages/core/src/components/next/Dropdown/context/DropdownContext.ts b/packages/core/src/components/Dropdown/context/DropdownContext.ts
similarity index 98%
rename from packages/core/src/components/next/Dropdown/context/DropdownContext.ts
rename to packages/core/src/components/Dropdown/context/DropdownContext.ts
index b0e0fa3392..aac2e00d87 100644
--- a/packages/core/src/components/next/Dropdown/context/DropdownContext.ts
+++ b/packages/core/src/components/Dropdown/context/DropdownContext.ts
@@ -1,7 +1,7 @@
 import type React from "react";
 import { createContext, useContext } from "react";
 import { type DropdownListGroup } from "../components/DropdownBaseList/DropdownBaseList.types";
-import { type BaseItemData } from "../../../BaseItem";
+import { type BaseItemData } from "../../BaseItem";
 import { type BaseDropdownProps, type DropdownSizes } from "../Dropdown.types";
 import { type DropdownContextProps } from "./DropdownContext.types";
 
diff --git a/packages/core/src/components/next/Dropdown/context/DropdownContext.types.ts b/packages/core/src/components/Dropdown/context/DropdownContext.types.ts
similarity index 96%
rename from packages/core/src/components/next/Dropdown/context/DropdownContext.types.ts
rename to packages/core/src/components/Dropdown/context/DropdownContext.types.ts
index d1e2af0e48..17c0cb764c 100644
--- a/packages/core/src/components/next/Dropdown/context/DropdownContext.types.ts
+++ b/packages/core/src/components/Dropdown/context/DropdownContext.types.ts
@@ -1,5 +1,5 @@
 import { type DropdownListGroup } from "../components/DropdownBaseList/DropdownBaseList.types";
-import { type BaseItemData } from "../../../BaseItem";
+import { type BaseItemData } from "../../BaseItem";
 import { type BaseDropdownProps } from "../Dropdown.types";
 import { type TooltipProps } from "@vibe/tooltip";
 
@@ -13,7 +13,7 @@ type InheritedDropdownProps<Item extends BaseItemData<Record<string, unknown>>>
     | "required"
     | "className"
     | "id"
-    | "ariaLabel"
+    | "aria-label"
     | "data-testid"
     | "error"
     | "helperText"
diff --git a/packages/core/src/components/next/Dropdown/hooks/useDropdownCombobox.ts b/packages/core/src/components/Dropdown/hooks/useDropdownCombobox.ts
similarity index 98%
rename from packages/core/src/components/next/Dropdown/hooks/useDropdownCombobox.ts
rename to packages/core/src/components/Dropdown/hooks/useDropdownCombobox.ts
index 6921889089..ea54fee0ff 100644
--- a/packages/core/src/components/next/Dropdown/hooks/useDropdownCombobox.ts
+++ b/packages/core/src/components/Dropdown/hooks/useDropdownCombobox.ts
@@ -1,7 +1,7 @@
 import { useCallback, useMemo, useRef, useState } from "react";
 import { useCombobox } from "downshift";
 import useDropdownFiltering from "./useDropdownFiltering";
-import { type BaseItemData } from "../../../BaseItem";
+import { type BaseItemData } from "../../BaseItem";
 import { type DropdownGroupOption } from "../Dropdown.types";
 
 function useDropdownCombobox<T extends BaseItemData<Record<string, unknown>>>(
diff --git a/packages/core/src/components/next/Dropdown/hooks/useDropdownFiltering.ts b/packages/core/src/components/Dropdown/hooks/useDropdownFiltering.ts
similarity index 95%
rename from packages/core/src/components/next/Dropdown/hooks/useDropdownFiltering.ts
rename to packages/core/src/components/Dropdown/hooks/useDropdownFiltering.ts
index 28999c6627..24c9af4966 100644
--- a/packages/core/src/components/next/Dropdown/hooks/useDropdownFiltering.ts
+++ b/packages/core/src/components/Dropdown/hooks/useDropdownFiltering.ts
@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import { normalizeOptions } from "../utils/dropdownUtils";
-import { type BaseItemData } from "../../../BaseItem";
+import { type BaseItemData } from "../../BaseItem";
 import { type DropdownListGroup } from "../components/DropdownBaseList/DropdownBaseList.types";
 import { type DropdownGroupOption } from "../Dropdown.types";
 
diff --git a/packages/core/src/components/next/Dropdown/hooks/useDropdownMultiCombobox.ts b/packages/core/src/components/Dropdown/hooks/useDropdownMultiCombobox.ts
similarity index 98%
rename from packages/core/src/components/next/Dropdown/hooks/useDropdownMultiCombobox.ts
rename to packages/core/src/components/Dropdown/hooks/useDropdownMultiCombobox.ts
index 5ca5996507..4982989f84 100644
--- a/packages/core/src/components/next/Dropdown/hooks/useDropdownMultiCombobox.ts
+++ b/packages/core/src/components/Dropdown/hooks/useDropdownMultiCombobox.ts
@@ -2,7 +2,7 @@ import { useMemo, useCallback } from "react";
 import useDropdownFiltering from "./useDropdownFiltering";
 import { useMultipleSelection, useCombobox } from "downshift";
 import { type DropdownGroupOption } from "../Dropdown.types";
-import { type BaseItemData } from "../../../BaseItem";
+import { type BaseItemData } from "../../BaseItem";
 
 function useDropdownMultiCombobox<T extends BaseItemData<Record<string, unknown>>>(
   options: DropdownGroupOption<T>,
diff --git a/packages/core/src/components/next/Dropdown/hooks/useDropdownMultiSelect.ts b/packages/core/src/components/Dropdown/hooks/useDropdownMultiSelect.ts
similarity index 98%
rename from packages/core/src/components/next/Dropdown/hooks/useDropdownMultiSelect.ts
rename to packages/core/src/components/Dropdown/hooks/useDropdownMultiSelect.ts
index d79eabd4a6..39c5bbb09c 100644
--- a/packages/core/src/components/next/Dropdown/hooks/useDropdownMultiSelect.ts
+++ b/packages/core/src/components/Dropdown/hooks/useDropdownMultiSelect.ts
@@ -2,7 +2,7 @@ import { useMemo, useCallback } from "react";
 import { useMultipleSelection, useSelect } from "downshift";
 import useDropdownFiltering from "./useDropdownFiltering";
 import { type DropdownGroupOption } from "../Dropdown.types";
-import { type BaseItemData } from "../../../BaseItem";
+import { type BaseItemData } from "../../BaseItem";
 
 function useDropdownMultiSelect<T extends BaseItemData<Record<string, unknown>>>(
   options: DropdownGroupOption<T>,
diff --git a/packages/core/src/components/next/Dropdown/hooks/useDropdownSelect.ts b/packages/core/src/components/Dropdown/hooks/useDropdownSelect.ts
similarity index 97%
rename from packages/core/src/components/next/Dropdown/hooks/useDropdownSelect.ts
rename to packages/core/src/components/Dropdown/hooks/useDropdownSelect.ts
index 80e8ed222c..5bc1ac9533 100644
--- a/packages/core/src/components/next/Dropdown/hooks/useDropdownSelect.ts
+++ b/packages/core/src/components/Dropdown/hooks/useDropdownSelect.ts
@@ -1,7 +1,7 @@
 import { useMemo, useState } from "react";
 import { useSelect } from "downshift";
 import useDropdownFiltering from "./useDropdownFiltering";
-import { type BaseItemData } from "../../../BaseItem";
+import { type BaseItemData } from "../../BaseItem";
 import { type DropdownGroupOption } from "../Dropdown.types";
 
 function useDropdownSelect<T extends BaseItemData<Record<string, unknown>>>(
diff --git a/packages/core/src/components/Dropdown/hooks/useHiddenOptionsData.js b/packages/core/src/components/Dropdown/hooks/useHiddenOptionsData.js
deleted file mode 100644
index 16267b08f9..0000000000
--- a/packages/core/src/components/Dropdown/hooks/useHiddenOptionsData.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import { useEffect, useState } from "react";
-
-export function useHiddenOptionsData({
-  isMultiline,
-  ref,
-  selectedOptionsCount,
-  chipClassName,
-  chipWrapperClassName,
-  isCounterShown
-}) {
-  const [overflowIndex, setOverflowIndex] = useState(-1);
-  useEffect(() => {
-    let finalOverflowingIndex = -1;
-
-    if (ref?.children && !isMultiline) {
-      const { bottom: parentBottom } = ref.getBoundingClientRect();
-      let optionIndex = 0;
-      let childIndex = 0;
-
-      while (childIndex < ref.children.length && optionIndex < selectedOptionsCount) {
-        const child = ref.children[childIndex];
-        const chipClasses = chipClassName.split(" ");
-
-        const isOption =
-          child.classList.contains(chipWrapperClassName) ||
-          chipClasses.some(className => child.classList.contains(className));
-
-        if (isOption) {
-          const { bottom: childBottom } = child.getBoundingClientRect();
-          if (childBottom > parentBottom) {
-            finalOverflowingIndex = optionIndex;
-            break;
-          }
-          optionIndex++;
-        }
-        childIndex++;
-      }
-    }
-
-    setOverflowIndex(finalOverflowingIndex);
-  }, [ref, isMultiline, selectedOptionsCount, chipWrapperClassName, chipClassName, isCounterShown]);
-
-  const hiddenOptionsCount = overflowIndex > -1 ? selectedOptionsCount - overflowIndex : 0;
-  return { overflowIndex, hiddenOptionsCount };
-}
diff --git a/packages/core/src/components/Dropdown/index.ts b/packages/core/src/components/Dropdown/index.ts
index 0023fe692a..6184c2b9d0 100644
--- a/packages/core/src/components/Dropdown/index.ts
+++ b/packages/core/src/components/Dropdown/index.ts
@@ -1,5 +1,3 @@
 export { default as Dropdown } from "./Dropdown";
-export { default as DropdownMenu } from "./components/menu/menu";
-export { default as DropdownOption } from "./components/option/option";
-export { default as DropdownSingleValue } from "./components/singleValue/singleValue";
+
 export * from "./Dropdown.types";
diff --git a/packages/core/src/components/next/Dropdown/modes/DropdownComboboxController.tsx b/packages/core/src/components/Dropdown/modes/DropdownComboboxController.tsx
similarity index 98%
rename from packages/core/src/components/next/Dropdown/modes/DropdownComboboxController.tsx
rename to packages/core/src/components/Dropdown/modes/DropdownComboboxController.tsx
index ade8c33ed0..94c1af276e 100644
--- a/packages/core/src/components/next/Dropdown/modes/DropdownComboboxController.tsx
+++ b/packages/core/src/components/Dropdown/modes/DropdownComboboxController.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { type DropdownSingleControllerProps } from "../Dropdown.types";
 import useDropdownCombobox from "../hooks/useDropdownCombobox";
-import { type BaseItemData } from "../../../BaseItem";
+import { type BaseItemData } from "../../BaseItem";
 import { type DropdownContextProps } from "../context/DropdownContext.types";
 import DropdownWrapperUI from "../components/DropdownWrapperUI";
 
diff --git a/packages/core/src/components/next/Dropdown/modes/DropdownMultiComboboxController.tsx b/packages/core/src/components/Dropdown/modes/DropdownMultiComboboxController.tsx
similarity index 98%
rename from packages/core/src/components/next/Dropdown/modes/DropdownMultiComboboxController.tsx
rename to packages/core/src/components/Dropdown/modes/DropdownMultiComboboxController.tsx
index 339e38c6a7..edbb8bdcb4 100644
--- a/packages/core/src/components/next/Dropdown/modes/DropdownMultiComboboxController.tsx
+++ b/packages/core/src/components/Dropdown/modes/DropdownMultiComboboxController.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { type DropdownMultiControllerProps } from "../Dropdown.types";
 import useDropdownMultiCombobox from "../hooks/useDropdownMultiCombobox";
-import { type BaseItemData } from "../../../BaseItem";
+import { type BaseItemData } from "../../BaseItem";
 import { type DropdownContextProps } from "../context/DropdownContext.types";
 import DropdownWrapperUI from "../components/DropdownWrapperUI";
 
diff --git a/packages/core/src/components/next/Dropdown/modes/DropdownMultiSelectController.tsx b/packages/core/src/components/Dropdown/modes/DropdownMultiSelectController.tsx
similarity index 98%
rename from packages/core/src/components/next/Dropdown/modes/DropdownMultiSelectController.tsx
rename to packages/core/src/components/Dropdown/modes/DropdownMultiSelectController.tsx
index 535420b95c..d2cf40538b 100644
--- a/packages/core/src/components/next/Dropdown/modes/DropdownMultiSelectController.tsx
+++ b/packages/core/src/components/Dropdown/modes/DropdownMultiSelectController.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { type DropdownMultiControllerProps } from "../Dropdown.types";
 import useDropdownMultiSelect from "../hooks/useDropdownMultiSelect";
-import { type BaseItemData } from "../../../BaseItem";
+import { type BaseItemData } from "../../BaseItem";
 import { type DropdownContextProps } from "../context/DropdownContext.types";
 import DropdownWrapperUI from "../components/DropdownWrapperUI";
 
diff --git a/packages/core/src/components/next/Dropdown/modes/DropdownSelectController.tsx b/packages/core/src/components/Dropdown/modes/DropdownSelectController.tsx
similarity index 97%
rename from packages/core/src/components/next/Dropdown/modes/DropdownSelectController.tsx
rename to packages/core/src/components/Dropdown/modes/DropdownSelectController.tsx
index c1b6212689..047a4d3faf 100644
--- a/packages/core/src/components/next/Dropdown/modes/DropdownSelectController.tsx
+++ b/packages/core/src/components/Dropdown/modes/DropdownSelectController.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { type DropdownSingleControllerProps } from "../Dropdown.types";
 import useDropdownSelect from "../hooks/useDropdownSelect";
-import { type BaseItemData } from "../../../BaseItem";
+import { type BaseItemData } from "../../BaseItem";
 import { type DropdownContextProps } from "../context/DropdownContext.types";
 import DropdownWrapperUI from "../components/DropdownWrapperUI";
 
diff --git a/packages/core/src/components/Dropdown/utils/dropdown-modifiers.ts b/packages/core/src/components/Dropdown/utils/dropdown-modifiers.ts
new file mode 100644
index 0000000000..ec5b350639
--- /dev/null
+++ b/packages/core/src/components/Dropdown/utils/dropdown-modifiers.ts
@@ -0,0 +1,11 @@
+import { type Middleware } from "@floating-ui/react-dom";
+
+export const matchWidthMiddleware: Middleware = {
+  name: "matchWidth",
+  fn: ({ rects, elements }) => {
+    Object.assign(elements.floating.style, {
+      width: `${rects.reference.width}px`
+    });
+    return {};
+  }
+};
diff --git a/packages/core/src/components/next/Dropdown/utils/dropdownUtils.ts b/packages/core/src/components/Dropdown/utils/dropdownUtils.ts
similarity index 97%
rename from packages/core/src/components/next/Dropdown/utils/dropdownUtils.ts
rename to packages/core/src/components/Dropdown/utils/dropdownUtils.ts
index 506a289d38..d16604e2c8 100644
--- a/packages/core/src/components/next/Dropdown/utils/dropdownUtils.ts
+++ b/packages/core/src/components/Dropdown/utils/dropdownUtils.ts
@@ -1,4 +1,4 @@
-import { type BaseItemData } from "../../../BaseItem";
+import { type BaseItemData } from "../../BaseItem";
 import { type DropdownListGroup } from "../components/DropdownBaseList/DropdownBaseList.types";
 
 export function normalizeOptions<Item extends BaseItemData>(
diff --git a/packages/core/src/components/EditableHeading/EditableHeading.module.scss b/packages/core/src/components/EditableHeading/EditableHeading.module.scss
index 85db43d8ba..32151ea629 100644
--- a/packages/core/src/components/EditableHeading/EditableHeading.module.scss
+++ b/packages/core/src/components/EditableHeading/EditableHeading.module.scss
@@ -1,4 +1,4 @@
 @import "../../styles/typography";
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 
 @include create-title-classes;
diff --git a/packages/core/src/components/EditableHeading/EditableHeading.tsx b/packages/core/src/components/EditableHeading/EditableHeading.tsx
index c338adcbf9..a2c79776d6 100644
--- a/packages/core/src/components/EditableHeading/EditableHeading.tsx
+++ b/packages/core/src/components/EditableHeading/EditableHeading.tsx
@@ -1,7 +1,7 @@
 import { ComponentDefaultTestId, getTestId } from "../../tests/test-ids-utils";
 import React, { forwardRef } from "react";
-import { Heading, HeadingTypeEnum, HeadingWeightEnum, type HeadingType, type HeadingWeight } from "@vibe/typography";
-import { type VibeComponentProps, withStaticProps } from "../../types";
+import { Heading, type HeadingType, type HeadingWeight } from "@vibe/typography";
+import { type VibeComponentProps } from "../../types";
 import styles from "./EditableHeading.module.scss";
 import { getStyle } from "../../helpers/typesciptCssModulesHelper";
 import { camelCase } from "es-toolkit";
@@ -41,12 +41,4 @@ const EditableHeading = forwardRef(
   }
 );
 
-interface EditableHeadingStaticProps {
-  types: typeof HeadingTypeEnum;
-  weights: typeof HeadingWeightEnum;
-}
-
-export default withStaticProps<EditableHeadingProps, EditableHeadingStaticProps>(EditableHeading, {
-  types: HeadingTypeEnum,
-  weights: HeadingWeightEnum
-});
+export default EditableHeading;
diff --git a/packages/core/src/components/EditableText/EditableText.module.scss b/packages/core/src/components/EditableText/EditableText.module.scss
index 80596a2d83..6d74224d09 100644
--- a/packages/core/src/components/EditableText/EditableText.module.scss
+++ b/packages/core/src/components/EditableText/EditableText.module.scss
@@ -1,5 +1,5 @@
 @import "../../styles/typography";
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 
 @include create-text-classes;
 
diff --git a/packages/core/src/components/EditableText/EditableText.tsx b/packages/core/src/components/EditableText/EditableText.tsx
index cadcb3c7db..609719ecb5 100644
--- a/packages/core/src/components/EditableText/EditableText.tsx
+++ b/packages/core/src/components/EditableText/EditableText.tsx
@@ -1,13 +1,13 @@
 import { ComponentDefaultTestId, getTestId } from "../../tests/test-ids-utils";
 import React, { forwardRef } from "react";
-import { type VibeComponentProps, withStaticProps } from "../../types";
+import { type VibeComponentProps } from "../../types";
 import styles from "./EditableText.module.scss";
 import { getStyle } from "../../helpers/typesciptCssModulesHelper";
 import { camelCase } from "es-toolkit";
 import EditableTypography, {
   type EditableTypographyImplementationProps
 } from "../EditableTypography/EditableTypography";
-import { Text, TextTypeEnum, TextWeightEnum, type TextType, type TextWeight } from "@vibe/typography";
+import { Text, type TextType, type TextWeight } from "@vibe/typography";
 import cx from "classnames";
 
 export interface EditableTextProps extends VibeComponentProps, EditableTypographyImplementationProps {
@@ -54,12 +54,4 @@ const EditableText = forwardRef(
   }
 );
 
-interface EditableTextStaticProps {
-  types: typeof TextTypeEnum;
-  weights: typeof TextWeightEnum;
-}
-
-export default withStaticProps<EditableTextProps, EditableTextStaticProps>(EditableText, {
-  types: TextTypeEnum,
-  weights: TextWeightEnum
-});
+export default EditableText;
diff --git a/packages/core/src/components/EditableTypography/EditableTypography.module.scss b/packages/core/src/components/EditableTypography/EditableTypography.module.scss
index b489d67d71..e7ee04c469 100644
--- a/packages/core/src/components/EditableTypography/EditableTypography.module.scss
+++ b/packages/core/src/components/EditableTypography/EditableTypography.module.scss
@@ -1,11 +1,11 @@
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 
 .editableTypography {
   display: inline-flex;
   min-width: 0;
   max-width: 100%;
   // Shifts the component to align the text with the container
-  margin-left: -6px;
+  margin-inline-start: -6px;
   overflow: hidden;
   position: relative;
 
@@ -15,7 +15,7 @@
     display: inline-block;
     max-width: 100%;
     min-width: 64px;
-    padding: 0 var(--spacing-xs);
+    padding: 0 var(--space-4);
     outline: none;
     border: 1px solid var(--primary-color);
     border-radius: var(--border-radius-small);
@@ -36,7 +36,7 @@
 
   .typography {
     border: 1px solid transparent;
-    padding: 0 var(--spacing-xs);
+    padding: 0 var(--space-4);
     border-radius: var(--border-radius-small);
 
     &:hover:not(.disabled) {
@@ -52,7 +52,7 @@
     }
 
     &.placeholder {
-      color: var(--secondary-text-color);
+      color: var(--placeholder-color);
     }
 
     &.multiline {
diff --git a/packages/core/src/components/EditableTypography/EditableTypography.tsx b/packages/core/src/components/EditableTypography/EditableTypography.tsx
index 83dba39dd1..60a0f17b9f 100644
--- a/packages/core/src/components/EditableTypography/EditableTypography.tsx
+++ b/packages/core/src/components/EditableTypography/EditableTypography.tsx
@@ -39,7 +39,7 @@ export interface EditableTypographyImplementationProps {
   /**
    * The label of the component for accessibility.
    */
-  ariaLabel?: string;
+  "aria-label"?: string;
   /**
    * Controls whether the component is in edit mode.
    */
@@ -98,7 +98,7 @@ const EditableTypography = forwardRef(
       onClick,
       onKeyDown,
       readOnly = false,
-      ariaLabel = "",
+      "aria-label": ariaLabel = "",
       placeholder,
       clearable,
       typographyClassName,
diff --git a/packages/core/src/components/EmptyState/EmptyState.module.scss b/packages/core/src/components/EmptyState/EmptyState.module.scss
index 19b5f6e490..83c56a782a 100644
--- a/packages/core/src/components/EmptyState/EmptyState.module.scss
+++ b/packages/core/src/components/EmptyState/EmptyState.module.scss
@@ -1,11 +1,11 @@
 .emptyState {
   width: 100%;
-  padding: var(--spacing-large);
+  padding: var(--space-24);
   box-sizing: border-box;
   background: var(--primary-background-color);
 
   &.compact {
-    padding: var(--spacing-medium);
+    padding: var(--space-16);
   }
 
   .content {
diff --git a/packages/core/src/components/ExpandCollapse/ExpandCollapse.module.scss b/packages/core/src/components/ExpandCollapse/ExpandCollapse.module.scss
index 834cbd1d2b..5df0e02f0a 100644
--- a/packages/core/src/components/ExpandCollapse/ExpandCollapse.module.scss
+++ b/packages/core/src/components/ExpandCollapse/ExpandCollapse.module.scss
@@ -1,4 +1,4 @@
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 
 .expandCollapse {
   display: flex;
@@ -13,7 +13,7 @@
 
 .header {
   @include reset-button();
-  padding: var(--spacing-medium);
+  padding: var(--space-16);
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -37,7 +37,7 @@
 }
 
 .content {
-  padding: var(--spacing-medium);
+  padding: var(--space-16);
 }
 
 .section {
@@ -72,5 +72,5 @@
 
 .header.leftIcon {
   justify-content: flex-start;
-  gap: var(--spacing-small);
+  gap: var(--space-8);
 }
diff --git a/packages/core/src/components/ExpandCollapse/ExpandCollapse.tsx b/packages/core/src/components/ExpandCollapse/ExpandCollapse.tsx
index b229be5439..366d148c50 100644
--- a/packages/core/src/components/ExpandCollapse/ExpandCollapse.tsx
+++ b/packages/core/src/components/ExpandCollapse/ExpandCollapse.tsx
@@ -112,9 +112,9 @@ const ExpandCollapse: FC<ExpandCollapseProps> = forwardRef(
           [styles.animateIconOpen]: isExpanded,
           [styles.animateIconClose]: !isExpanded
         })}
-        iconType="svg"
+        type="svg"
         icon={DropdownChevronDown}
-        iconSize={iconSize}
+        size={iconSize}
       />
     );
 
diff --git a/packages/core/src/components/FieldLabel/FieldLabel.module.scss b/packages/core/src/components/FieldLabel/FieldLabel.module.scss
index 85c4e10287..3fb775099a 100644
--- a/packages/core/src/components/FieldLabel/FieldLabel.module.scss
+++ b/packages/core/src/components/FieldLabel/FieldLabel.module.scss
@@ -1,14 +1,14 @@
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 
 .labelComponentWrapper {
   @include vibe-text(text2, normal);
   display: flex;
-  padding-bottom: var(--spacing-xs);
+  padding-bottom: var(--space-4);
   align-items: center;
 }
 
 .labelComponentIcon {
-  margin: 0 var(--spacing-small) 0 var(--spacing-xs);
+  margin: 0 var(--space-8) 0 var(--space-4);
   line-height: 24px;
   color: var(--secondary-text-color);
 }
diff --git a/packages/core/src/components/FieldLabel/FieldLabel.tsx b/packages/core/src/components/FieldLabel/FieldLabel.tsx
index 727af0352a..95db42e0c1 100644
--- a/packages/core/src/components/FieldLabel/FieldLabel.tsx
+++ b/packages/core/src/components/FieldLabel/FieldLabel.tsx
@@ -56,7 +56,7 @@ const FieldLabel: FC<FieldLabelProps> = forwardRef(
 
     return (
       <section className={cx(styles.labelComponentWrapper, className)}>
-        <Icon icon={icon} className={cx(styles.labelComponentIcon, iconClassName)} id={labelFor} iconType="font" />
+        <Icon icon={icon} className={cx(styles.labelComponentIcon, iconClassName)} id={labelFor} type="font" />
         <label
           id={id}
           htmlFor={labelFor || htmlFor}
diff --git a/packages/core/src/components/FormattedNumber/FormattedNumber.tsx b/packages/core/src/components/FormattedNumber/FormattedNumber.tsx
index 342a0b1c11..10f5eefe90 100644
--- a/packages/core/src/components/FormattedNumber/FormattedNumber.tsx
+++ b/packages/core/src/components/FormattedNumber/FormattedNumber.tsx
@@ -2,7 +2,7 @@ import cx from "classnames";
 import React, { useMemo, forwardRef } from "react";
 import { formatNumber, formatNumberConsts } from "../../helpers/textManipulations";
 import { validateValue } from "./FormattedNumberHelpers";
-import { type VibeComponentProps, withStaticProps } from "../../types";
+import { type VibeComponentProps } from "../../types";
 import { ComponentDefaultTestId, getTestId } from "../../tests/test-ids-utils";
 import styles from "./FormattedNumber.module.scss";
 
@@ -97,12 +97,4 @@ const FormattedNumber = forwardRef(
   }
 );
 
-interface FormattedNumberStaticProps {
-  formatNumber: typeof formatNumber;
-  localFallBack: string;
-}
-
-export default withStaticProps<FormattedNumberProps, FormattedNumberStaticProps>(FormattedNumber, {
-  formatNumber: formatNumber,
-  localFallBack: formatNumberConsts.DEFAULT_LOCAL
-});
+export default FormattedNumber;
diff --git a/packages/core/src/components/GridKeyboardNavigationContext/__tests__/GridKeyboardNavigationContext.test.jsx b/packages/core/src/components/GridKeyboardNavigationContext/__tests__/GridKeyboardNavigationContext.test.tsx
similarity index 100%
rename from packages/core/src/components/GridKeyboardNavigationContext/__tests__/GridKeyboardNavigationContext.test.jsx
rename to packages/core/src/components/GridKeyboardNavigationContext/__tests__/GridKeyboardNavigationContext.test.tsx
diff --git a/packages/core/src/components/GridKeyboardNavigationContext/__tests__/helper.test.js b/packages/core/src/components/GridKeyboardNavigationContext/__tests__/helper.test.ts
similarity index 100%
rename from packages/core/src/components/GridKeyboardNavigationContext/__tests__/helper.test.js
rename to packages/core/src/components/GridKeyboardNavigationContext/__tests__/helper.test.ts
diff --git a/packages/core/src/components/Info/Info.tsx b/packages/core/src/components/Info/Info.tsx
index 3bb0ea7e35..a359ad2a13 100644
--- a/packages/core/src/components/Info/Info.tsx
+++ b/packages/core/src/components/Info/Info.tsx
@@ -31,7 +31,6 @@ const Info = forwardRef(
   ) => {
     const iconButtonRef = useRef<HTMLButtonElement>(null);
     const mergedRef = useMergeRef(ref, iconButtonRef);
-    const dialogRef = useRef<Dialog>(null);
     const dialogContentRef = useRef<HTMLDivElement>(null);
 
     const [isOpen, setIsOpen] = useState(false);
@@ -59,7 +58,6 @@ const Info = forwardRef(
 
     return (
       <Dialog
-        ref={dialogRef}
         id={dialogId}
         disable={disabled}
         position={position}
@@ -90,11 +88,11 @@ const Info = forwardRef(
           kind="tertiary"
           active={isOpen}
           disabled={disabled}
-          ariaLabel={ariaLabel}
-          ariaLabeledBy={ariaLabelledby}
-          ariaControls={dialogId}
-          ariaHasPopup="dialog"
-          ariaExpanded={isOpen}
+          aria-label={ariaLabel}
+          aria-labelledby={ariaLabelledby}
+          aria-controls={dialogId}
+          aria-haspopup="dialog"
+          aria-expanded={isOpen}
           data-testid={dataTestId || getTestId(ComponentDefaultTestId.INFO, id)}
           data-vibe={ComponentVibeId.INFO}
           hideTooltip={hideButtonTooltip}
diff --git a/packages/core/src/components/Info/__tests__/Info.test.tsx b/packages/core/src/components/Info/__tests__/Info.test.tsx
index 98baa2fab3..d992ab65d6 100644
--- a/packages/core/src/components/Info/__tests__/Info.test.tsx
+++ b/packages/core/src/components/Info/__tests__/Info.test.tsx
@@ -79,14 +79,14 @@ describe("Info tests", () => {
       });
     });
 
-    it("should use custom ariaLabel when provided", () => {
+    it("should use custom aria-label when provided", () => {
       const customAriaLabel = "Custom info label";
       renderComponent({ "aria-label": customAriaLabel });
 
       expect(screen.getByLabelText(customAriaLabel)).toBeInTheDocument();
     });
 
-    it("should use ariaLabelledby when provided", () => {
+    it("should use aria-labelledby when provided", () => {
       const labelId = "custom-label-id";
       renderComponent({ "aria-labelledby": labelId });
 
diff --git a/packages/core/src/components/Label/Label.module.scss b/packages/core/src/components/Label/Label.module.scss
index 3035a26dd2..a402c11b68 100644
--- a/packages/core/src/components/Label/Label.module.scss
+++ b/packages/core/src/components/Label/Label.module.scss
@@ -1,4 +1,4 @@
-@import "~monday-ui-style/dist/mixins/states";
+@import "~@vibe/style/dist/mixins/states";
 @import "../../styles/typography";
 @import "../../styles/keyframes";
 
@@ -17,24 +17,27 @@
   align-items: center;
   justify-content: center;
   border-radius: var(--border-radius-small);
-  padding: 2px var(--spacing-small);
+  padding: 2px var(--space-8);
   position: relative;
 
   &.small {
-    padding: 0 var(--spacing-xs);
+    padding: 0 var(--space-4);
     border-radius: 2px;
   }
 }
 
 .withLeg {
-  border-radius: var(--border-radius-small) var(--border-radius-small) var(--border-radius-small) 0;
+  border-start-start-radius: var(--border-radius-small);
+  border-start-end-radius: var(--border-radius-small);
+  border-end-end-radius: var(--border-radius-small);
+  border-end-start-radius: 0;
 }
 
 .legWrapper {
   position: absolute;
   height: 8px;
   top: 100%;
-  left: 0;
+  inset-inline-start: 0;
   display: inline-flex;
 }
 
@@ -89,10 +92,10 @@
 
 .kindLine {
   border: 1px solid currentColor;
-  padding: 1px var(--spacing-small);
+  padding: 1px var(--space-8);
 
   .legWrapper {
-    left: -1px;
+    inset-inline-start: -1px;
     top: calc(100% + 1px);
   }
 
diff --git a/packages/core/src/components/Label/Label.tsx b/packages/core/src/components/Label/Label.tsx
index 92de978120..75c56b60de 100644
--- a/packages/core/src/components/Label/Label.tsx
+++ b/packages/core/src/components/Label/Label.tsx
@@ -5,15 +5,15 @@ import { getStyle } from "../../helpers/typesciptCssModulesHelper";
 import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Text } from "@vibe/typography";
 import Leg from "./Leg";
-import { LabelAllowedColor as LabelColorEnum, LabelKind as LabelKindEnum, mapSizesToTextSize } from "./LabelConstants";
 import { type LabelColor, type LabelKind, type ContentColor } from "./Label.types";
 import { contentColors } from "../../utils/colors-vars-map";
-import { type VibeComponentProps, withStaticProps } from "../../types";
+import { type VibeComponentProps } from "../../types";
 import { useClickableProps } from "@vibe/clickable";
 import useMergeRef from "../../hooks/useMergeRef";
 import styles from "./Label.module.scss";
 import LabelCelebrationAnimation from "./LabelCelebrationAnimation";
 import { type LabelSizes } from "./Label.types";
+import { mapSizesToTextSize } from "./LabelConstants";
 import { ComponentVibeId } from "../../tests/constants";
 
 export interface LabelProps extends VibeComponentProps {
@@ -113,9 +113,9 @@ const Label = forwardRef<HTMLElement, LabelProps>(
       {
         onClick: onClickCallback,
         id,
-        ariaHidden: false,
-        ariaHasPopup: false,
-        ariaExpanded: false
+        "aria-hidden": false,
+        "aria-haspopup": false,
+        "aria-expanded": false
       },
       labelRef
     );
@@ -182,12 +182,4 @@ const Label = forwardRef<HTMLElement, LabelProps>(
   }
 );
 
-interface LabelStaticProps {
-  colors: typeof LabelColorEnum;
-  kinds: typeof LabelKindEnum;
-}
-
-export default withStaticProps<LabelProps, LabelStaticProps>(Label, {
-  colors: LabelColorEnum,
-  kinds: LabelKindEnum
-});
+export default Label;
diff --git a/packages/core/src/components/Label/LabelCelebrationAnimation.module.scss b/packages/core/src/components/Label/LabelCelebrationAnimation.module.scss
index a2d29d68ed..7bb79a4daf 100644
--- a/packages/core/src/components/Label/LabelCelebrationAnimation.module.scss
+++ b/packages/core/src/components/Label/LabelCelebrationAnimation.module.scss
@@ -6,7 +6,7 @@
   .svg {
     position: absolute;
     top: 0;
-    left: 0;
+    inset-inline-start: 0;
     height: 100%;
     width: 100%;
 
diff --git a/packages/core/src/components/Label/LabelConstants.ts b/packages/core/src/components/Label/LabelConstants.ts
index 380178a51d..527dc6b20f 100644
--- a/packages/core/src/components/Label/LabelConstants.ts
+++ b/packages/core/src/components/Label/LabelConstants.ts
@@ -1,31 +1,7 @@
-import { Text, type TextType } from "@vibe/typography";
+import { type TextType } from "@vibe/typography";
 import { type LabelSizes } from "./Label.types";
-import { ContentColorByName } from "../../utils/colors-vars-map";
-
-/**
- * @deprecated
- */
-export enum LabelKind {
-  FILL = "fill",
-  LINE = "line"
-}
-
-/**
- * @deprecated
- */
-export enum LabelColor {
-  PRIMARY = "primary",
-  DARK = "dark",
-  NEGATIVE = "negative",
-  POSITIVE = "positive"
-}
-
-export const LabelAllowedColor = {
-  ...LabelColor,
-  ...ContentColorByName
-};
 
 export const mapSizesToTextSize: Record<LabelSizes, TextType> = {
-  small: Text.types.TEXT3,
-  medium: Text.types.TEXT2
+  small: "text3",
+  medium: "text2"
 };
diff --git a/packages/core/src/components/LegacyModal/LegacyModal.module.scss b/packages/core/src/components/LegacyModal/LegacyModal.module.scss
deleted file mode 100644
index 5268573d05..0000000000
--- a/packages/core/src/components/LegacyModal/LegacyModal.module.scss
+++ /dev/null
@@ -1,69 +0,0 @@
-.container,
-.overlay {
-  position: fixed;
-  inset: 0;
-}
-
-.container {
-  --monday-modal-z-index: 10000;
-  z-index: var(--monday-modal-z-index);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.container[aria-hidden="true"] {
-  display: none;
-
-  .overlay {
-    background-color: transparent;
-    animation: overlay-fade-out 70ms var(--motion-timing-enter);
-  }
-}
-
-.overlay {
-  background-color: rgba(41, 47, 76, 0.7);
-  animation: overlay-fade-in 70ms var(--motion-timing-enter);
-}
-
-.dialog {
-  display: flex;
-  position: relative;
-  flex-direction: column;
-  padding-block: var(--spacing-large);
-  padding-inline: var(--spacing-xl);
-  border-radius: var(--border-radius-big);
-  box-shadow: var(--box-shadow-large);
-  background-color: var(--secondary-background-color);
-  max-height: 90vh;
-  max-width: 90vw;
-
-  &.default {
-    width: 520px;
-  }
-
-  &.full {
-    width: 100vw;
-  }
-
-  &.spacing {
-    gap: var(--spacing-medium);
-  }
-}
-
-@keyframes overlay-fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@keyframes overlay-fade-out {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
diff --git a/packages/core/src/components/LegacyModal/LegacyModal.tsx b/packages/core/src/components/LegacyModal/LegacyModal.tsx
deleted file mode 100644
index 19c8079a72..0000000000
--- a/packages/core/src/components/LegacyModal/LegacyModal.tsx
+++ /dev/null
@@ -1,217 +0,0 @@
-import React, { cloneElement, type ReactElement, useCallback, useMemo } from "react";
-import ReactDOM from "react-dom";
-import cx from "classnames";
-import { useA11yDialog } from "./a11yDialog";
-import ModalContent from "./LegacyModalContent/LegacyModalContent";
-import ModalHeader from "./LegacyModalHeader/LegacyModalHeader";
-import useBodyScrollLock from "./useBodyScrollLock";
-import useShowHideModal from "./useShowHideModal";
-import {
-  isModalContent,
-  isModalFooter,
-  isModalHeader,
-  ModalWidth as ModalWidthEnum,
-  validateTitleProp
-} from "./ModalHelper";
-import { NOOP } from "../../utils/function-utils";
-import { withStaticPropsWithoutForwardRef } from "../../types";
-import { getTestId } from "../../tests/test-ids-utils";
-import { ComponentDefaultTestId } from "../../tests/constants";
-import { useWarnDeprecated } from "../../utils/warn-deprecated";
-import styles from "./LegacyModal.module.scss";
-import { type ModalWidth } from "./LegacyModal.types";
-import { LayerProvider } from "@vibe/layer";
-import { isClient } from "../../utils/ssr-utils";
-
-export interface LegacyModalProps {
-  /**
-   * Id of the modal, used internally and for accessibility
-   */
-  id?: string;
-  "data-testid"?: string;
-  /**
-   * Show/hide the Dialog
-   */
-  show: boolean;
-  /**
-   * Heading for the modal, mandatory when ModalHeader isn't provided in children
-   */
-  title?: string;
-  /**
-   * Description for the modal title
-   */
-  description?: string;
-  /**
-   * Called when the modal is closed (by close button/click outside/esc key)
-   */
-  onClose: () => void;
-  /**
-   *  Makes the dialog behave like a modal (preventing closing on click outside of
-   *  ESC key)..
-   */
-  alertDialog?: boolean;
-  /**
-   *  Used for the fromOrigin animation
-   */
-  triggerElement?: Element;
-  /**
-   *  Set the modal's width. Can be one of the presets or any custom size
-   */
-  width?: ModalWidth | string;
-  /**
-   *  Aria label for the close button
-   */
-  closeButtonAriaLabel?: string;
-  /**
-   *  Add gaps between parts of the modal
-   */
-  contentSpacing?: boolean;
-  /**
-   *  classNames for specific parts of the dialog
-   */
-  classNames?: {
-    container?: string;
-    overlay?: string;
-    modal?: string;
-  };
-  /**
-   *  Dialog content
-   */
-  children?: ReactElement | ReactElement[];
-  /**
-   * z-index attribute of the container
-   */
-  zIndex?: number;
-  /**
-   * When `false`, the modal will remain in the DOM when closed
-   */
-  unmountOnClose?: boolean;
-}
-
-const Modal = ({
-  classNames = { container: "", overlay: "", modal: "" },
-  id,
-  show,
-  title = "",
-  description = "",
-  onClose = NOOP,
-  alertDialog = false,
-  children,
-  triggerElement,
-  width = "default",
-  closeButtonAriaLabel = "Close",
-  contentSpacing = false,
-  zIndex = 10000,
-  unmountOnClose = true,
-  "data-testid": dataTestId
-}: LegacyModalProps) => {
-  useWarnDeprecated({
-    component: "Modal (Legacy)",
-    message:
-      "This component is deprecated and will be removed in the next major version. Please use Modal from @vibe/core/next instead."
-  });
-
-  const childrenArray: ReactElement[] = useMemo(
-    () => (children ? (React.Children.toArray(children) as ReactElement[]) : []),
-    [children]
-  );
-  validateTitleProp(title, childrenArray);
-
-  const [instance, attr] = useA11yDialog({
-    id,
-    alertDialog
-  });
-
-  const closeIfNotAlertType = useCallback(() => {
-    if (!alertDialog) {
-      onClose?.();
-    }
-  }, [alertDialog, onClose]);
-
-  // lock body scroll when modal is open
-  useBodyScrollLock({ instance });
-
-  // show/hide and animate the modal
-  const { shouldShow } = useShowHideModal({
-    instance,
-    show,
-    triggerElement,
-    onClose,
-    alertDialog
-  });
-
-  const header = useMemo(() => {
-    const { id } = attr.title;
-    const header = childrenArray.find(isModalHeader);
-    if (header) {
-      return cloneElement(header, { id, closeModal: onClose });
-    }
-    return (
-      <ModalHeader
-        title={title}
-        description={description}
-        closeModal={onClose}
-        id={id}
-        closeButtonAriaLabel={closeButtonAriaLabel}
-      />
-    );
-  }, [attr.title, childrenArray, title, description, onClose, closeButtonAriaLabel]);
-
-  const content = useMemo(() => {
-    return (
-      childrenArray.find(isModalContent) || (
-        <ModalContent>{childrenArray.filter(child => !isModalHeader(child) && !isModalFooter(child))}</ModalContent>
-      )
-    );
-  }, [childrenArray]);
-
-  const footer = useMemo(() => {
-    return childrenArray.find(isModalFooter) || null;
-  }, [childrenArray]);
-
-  const customWidth = width !== "default" && width !== "full-width";
-
-  const dialog = (
-    <LayerProvider layerRef={{ current: instance?.$el }}>
-      <div
-        {...attr.container}
-        className={cx(styles.container, classNames.container)}
-        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL, id)}
-        style={{ "--monday-modal-z-index": zIndex }}
-      >
-        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
-        <div
-          onClick={closeIfNotAlertType}
-          className={cx(styles.overlay, classNames.overlay)}
-          data-testid={ComponentDefaultTestId.MODAL_OVERLAY}
-        />
-        <div
-          {...attr.dialog}
-          className={cx(styles.dialog, classNames.modal, {
-            [styles.default]: width === "default",
-            [styles.full]: width === "full-width",
-            [styles.spacing]: contentSpacing
-          })}
-          style={{ width: customWidth ? width : null }}
-        >
-          {header}
-          {content}
-          {footer}
-        </div>
-      </div>
-    </LayerProvider>
-  );
-
-  if (unmountOnClose && !shouldShow) {
-    return null;
-  }
-  return isClient() ? ReactDOM.createPortal(dialog, document.body) : null;
-};
-
-interface LegacyModalStaticProps {
-  width: typeof ModalWidthEnum;
-}
-
-export default withStaticPropsWithoutForwardRef<LegacyModalProps, LegacyModalStaticProps>(Modal, {
-  width: ModalWidthEnum
-});
diff --git a/packages/core/src/components/LegacyModal/LegacyModal.types.ts b/packages/core/src/components/LegacyModal/LegacyModal.types.ts
deleted file mode 100644
index 99c37462e2..0000000000
--- a/packages/core/src/components/LegacyModal/LegacyModal.types.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type ModalWidth = "default" | "full-width";
diff --git a/packages/core/src/components/LegacyModal/LegacyModalContent/LegacyModalContent.module.scss b/packages/core/src/components/LegacyModal/LegacyModalContent/LegacyModalContent.module.scss
deleted file mode 100644
index 264b7480d7..0000000000
--- a/packages/core/src/components/LegacyModal/LegacyModalContent/LegacyModalContent.module.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@import "~monday-ui-style/dist/mixins";
-
-.container {
-  flex-grow: 1;
-  overflow: auto;
-  @include scroller();
-}
diff --git a/packages/core/src/components/LegacyModal/LegacyModalContent/LegacyModalContent.tsx b/packages/core/src/components/LegacyModal/LegacyModalContent/LegacyModalContent.tsx
deleted file mode 100644
index 9c0d76270b..0000000000
--- a/packages/core/src/components/LegacyModal/LegacyModalContent/LegacyModalContent.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React, { type FC, type ReactElement } from "react";
-import cx from "classnames";
-import { Text } from "@vibe/typography";
-import type VibeComponentProps from "../../../types/VibeComponentProps";
-import { getTestId } from "../../../tests/test-ids-utils";
-import { ComponentDefaultTestId } from "../../../tests/constants";
-import styles from "./LegacyModalContent.module.scss";
-
-export interface LegacyModalContentProps extends VibeComponentProps {
-  children: ReactElement | ReactElement[] | string;
-}
-
-const LegacyModalContent: FC<LegacyModalContentProps> = ({ className, id, "data-testid": dataTestId, children }) => {
-  return (
-    <Text
-      type="text1"
-      id={id}
-      data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_CONTENT, id)}
-      className={cx(styles.container, className)}
-      ellipsis={false}
-    >
-      {children}
-    </Text>
-  );
-};
-
-Object.assign(LegacyModalContent, {
-  displayName: "ModalContent"
-});
-
-export default LegacyModalContent;
diff --git a/packages/core/src/components/LegacyModal/LegacyModalContent/__tests__/LegacyModalContent.snapshot.test.tsx b/packages/core/src/components/LegacyModal/LegacyModalContent/__tests__/LegacyModalContent.snapshot.test.tsx
deleted file mode 100644
index 888aba6ef1..0000000000
--- a/packages/core/src/components/LegacyModal/LegacyModalContent/__tests__/LegacyModalContent.snapshot.test.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { describe, it, expect } from "vitest";
-import React from "react";
-import renderer from "react-test-renderer";
-import ModalContent from "../LegacyModalContent";
-
-describe("ModalContent renders correctly", () => {
-  it("with empty props", () => {
-    const tree = renderer.create(<ModalContent>content</ModalContent>).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it("with children", () => {
-    const tree = renderer
-      .create(
-        <ModalContent>
-          <div>children</div>
-        </ModalContent>
-      )
-      .toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});
diff --git a/packages/core/src/components/LegacyModal/LegacyModalContent/__tests__/__snapshots__/LegacyModalContent.snapshot.test.tsx.snap b/packages/core/src/components/LegacyModal/LegacyModalContent/__tests__/__snapshots__/LegacyModalContent.snapshot.test.tsx.snap
deleted file mode 100644
index 1f882ab6ae..0000000000
--- a/packages/core/src/components/LegacyModal/LegacyModalContent/__tests__/__snapshots__/LegacyModalContent.snapshot.test.tsx.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`ModalContent renders correctly > with children 1`] = `
-<div
-  className="typography primary start text text1Normal container"
-  data-testid="modal-content"
->
-  <div>
-    children
-  </div>
-</div>
-`;
-
-exports[`ModalContent renders correctly > with empty props 1`] = `
-<div
-  className="typography primary start text text1Normal container"
-  data-testid="modal-content"
->
-  content
-</div>
-`;
diff --git a/packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooter.module.scss b/packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooter.module.scss
deleted file mode 100644
index 3bbf13ed52..0000000000
--- a/packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooter.module.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.container {
-  margin-block-start: var(--spacing-large);
-}
diff --git a/packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooter.tsx b/packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooter.tsx
deleted file mode 100644
index fc2f167eb9..0000000000
--- a/packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooter.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React, { type FC, type ReactElement } from "react";
-import cx from "classnames";
-import type VibeComponentProps from "../../../types/VibeComponentProps";
-import styles from "./LegacyModalFooter.module.scss";
-
-export interface LegacyModalFooterProps extends VibeComponentProps {
-  children: ReactElement | ReactElement[] | string;
-}
-
-const LegacyModalFooter: FC<LegacyModalFooterProps> = ({ className, children }) => {
-  return <div className={cx(styles.container, className)}>{children}</div>;
-};
-
-Object.assign(LegacyModalFooter, {
-  displayName: "ModalFooter"
-});
-
-export default LegacyModalFooter;
diff --git a/packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooterButtons/LegacyModalFooterButtons.tsx b/packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooterButtons/LegacyModalFooterButtons.tsx
deleted file mode 100644
index 00c82f54ad..0000000000
--- a/packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooterButtons/LegacyModalFooterButtons.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import React, { forwardRef } from "react";
-import { type VibeComponentProps } from "../../../../types";
-import { getTestId } from "../../../../tests/test-ids-utils";
-import { ComponentDefaultTestId } from "../../../../tests/constants";
-import { Flex } from "@vibe/layout";
-import { Button } from "@vibe/button";
-import LegacyModalFooter from "../LegacyModalFooter";
-
-export interface LegacyModalFooterButtonsProps extends VibeComponentProps {
-  primaryButtonText: string;
-  secondaryButtonText?: string;
-  disablePrimaryButton?: boolean;
-  onPrimaryButtonClick?: () => void;
-  onSecondaryButtonClick?: () => void;
-}
-
-const LegacyModalFooterButtons = forwardRef(
-  (
-    {
-      primaryButtonText,
-      secondaryButtonText,
-      disablePrimaryButton,
-      onPrimaryButtonClick,
-      onSecondaryButtonClick,
-      className,
-      id,
-      "data-testid": dataTestId
-    }: LegacyModalFooterButtonsProps,
-    // As ModalFooter does not currently forward refs
-    // eslint-disable-next-line
-    ref: React.ForwardedRef<HTMLElement>
-  ) => {
-    return (
-      <LegacyModalFooter
-        id={id}
-        className={className}
-        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_FOOTER_BUTTONS, id)}
-      >
-        <Flex justify="end" gap="small">
-          {secondaryButtonText && (
-            <Button onClick={onSecondaryButtonClick} kind="tertiary">
-              {secondaryButtonText}
-            </Button>
-          )}
-          <Button onClick={onPrimaryButtonClick} disabled={disablePrimaryButton}>
-            {primaryButtonText}
-          </Button>
-        </Flex>
-      </LegacyModalFooter>
-    );
-  }
-);
-
-Object.assign(LegacyModalFooterButtons, {
-  displayName: "ModalFooterButtons"
-});
-
-export default LegacyModalFooterButtons;
diff --git a/packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooterButtons/__tests__/LegacyModalFooterButtons.snapshot.test.tsx b/packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooterButtons/__tests__/LegacyModalFooterButtons.snapshot.test.tsx
deleted file mode 100644
index 1395a73f3c..0000000000
--- a/packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooterButtons/__tests__/LegacyModalFooterButtons.snapshot.test.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { describe, it, expect } from "vitest";
-import React from "react";
-import renderer from "react-test-renderer";
-import ModalFooterButtons from "../LegacyModalFooterButtons";
-
-describe("ModalFooterButtons", () => {
-  it("should render correctly", () => {
-    const tree = renderer
-      .create(<ModalFooterButtons primaryButtonText="Confirm" secondaryButtonText="Cancel" />)
-      .toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it("should render correctly with no tertiary", () => {
-    const tree = renderer.create(<ModalFooterButtons primaryButtonText="Confirm" />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it("should render correctly with disabled primary", () => {
-    const tree = renderer
-      .create(
-        <ModalFooterButtons primaryButtonText="Confirm" secondaryButtonText="Cancel" disablePrimaryButton={true} />
-      )
-      .toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});
diff --git a/packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooterButtons/__tests__/LegacyModalFooterButtons.test.tsx b/packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooterButtons/__tests__/LegacyModalFooterButtons.test.tsx
deleted file mode 100644
index 49bf0ea3f2..0000000000
--- a/packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooterButtons/__tests__/LegacyModalFooterButtons.test.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { vi, afterEach, describe, it, expect } from "vitest";
-import React from "react";
-import { fireEvent, render, cleanup } from "@testing-library/react";
-import ModalFooterButtons, {
-  type LegacyModalFooterButtonsProps as ModalFooterButtonsProps
-} from "../LegacyModalFooterButtons";
-
-const PRIMARY_BUTTON_TEXT = "Confirm";
-const SECONDARY_BUTTON_TEXT = "Cancel";
-
-const renderComponent = (props: ModalFooterButtonsProps) => {
-  return render(<ModalFooterButtons {...props} />);
-};
-
-describe("ModalFooterButtons", () => {
-  afterEach(() => {
-    cleanup();
-  });
-
-  describe("onClick handlers", () => {
-    it("should call onPrimaryButtonClick after click confirm", () => {
-      const onPrimaryButtonClick = vi.fn();
-      const onSecondaryButtonClick = vi.fn();
-      const modalFooterComponent = renderComponent({
-        primaryButtonText: PRIMARY_BUTTON_TEXT,
-        secondaryButtonText: SECONDARY_BUTTON_TEXT,
-        onPrimaryButtonClick,
-        onSecondaryButtonClick
-      });
-      fireEvent.click(modalFooterComponent.getByText(PRIMARY_BUTTON_TEXT));
-      expect(onPrimaryButtonClick).toBeCalledTimes(1);
-      expect(onSecondaryButtonClick).not.toBeCalled();
-    });
-
-    it("should call onSecondaryButtonClick after click cancel", () => {
-      const onPrimaryButtonClick = vi.fn();
-      const onSecondaryButtonClick = vi.fn();
-      const modalFooterComponent = renderComponent({
-        primaryButtonText: PRIMARY_BUTTON_TEXT,
-        secondaryButtonText: SECONDARY_BUTTON_TEXT,
-        onPrimaryButtonClick,
-        onSecondaryButtonClick
-      });
-      fireEvent.click(modalFooterComponent.getByText(SECONDARY_BUTTON_TEXT));
-      expect(onSecondaryButtonClick).toBeCalledTimes(1);
-      expect(onPrimaryButtonClick).not.toBeCalled();
-    });
-
-    it("should not call onPrimaryButtonClick after click confirm when primary button is disabled", () => {
-      const onPrimaryButtonClick = vi.fn();
-      const onSecondaryButtonClick = vi.fn();
-      const modalFooterComponent = renderComponent({
-        primaryButtonText: PRIMARY_BUTTON_TEXT,
-        secondaryButtonText: SECONDARY_BUTTON_TEXT,
-        disablePrimaryButton: true,
-        onPrimaryButtonClick,
-        onSecondaryButtonClick
-      });
-      fireEvent.click(modalFooterComponent.getByText(PRIMARY_BUTTON_TEXT));
-      expect(onPrimaryButtonClick).not.toBeCalled();
-      expect(onSecondaryButtonClick).not.toBeCalled();
-    });
-  });
-});
diff --git a/packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooterButtons/__tests__/__snapshots__/LegacyModalFooterButtons.snapshot.test.tsx.snap b/packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooterButtons/__tests__/__snapshots__/LegacyModalFooterButtons.snapshot.test.tsx.snap
deleted file mode 100644
index 1b6e2dbbb0..0000000000
--- a/packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooterButtons/__tests__/__snapshots__/LegacyModalFooterButtons.snapshot.test.tsx.snap
+++ /dev/null
@@ -1,125 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`ModalFooterButtons > should render correctly 1`] = `
-<div
-  className="container"
->
-  <div
-    className="container directionRow justifyEnd alignCenter"
-    style={
-      {
-        "gap": "var(--spacing-small)",
-      }
-    }
-  >
-    <button
-      aria-busy={false}
-      aria-disabled={false}
-      className="button sizeMedium kindTertiary colorPrimary"
-      data-testid="button"
-      data-vibe="Button"
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onMouseDown={[Function]}
-      onMouseUp={[Function]}
-      type="button"
-    >
-      Cancel
-    </button>
-    <button
-      aria-busy={false}
-      aria-disabled={false}
-      className="button sizeMedium kindPrimary colorPrimary"
-      data-testid="button"
-      data-vibe="Button"
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onMouseDown={[Function]}
-      onMouseUp={[Function]}
-      type="button"
-    >
-      Confirm
-    </button>
-  </div>
-</div>
-`;
-
-exports[`ModalFooterButtons > should render correctly with disabled primary 1`] = `
-<div
-  className="container"
->
-  <div
-    className="container directionRow justifyEnd alignCenter"
-    style={
-      {
-        "gap": "var(--spacing-small)",
-      }
-    }
-  >
-    <button
-      aria-busy={false}
-      aria-disabled={false}
-      className="button sizeMedium kindTertiary colorPrimary"
-      data-testid="button"
-      data-vibe="Button"
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onMouseDown={[Function]}
-      onMouseUp={[Function]}
-      type="button"
-    >
-      Cancel
-    </button>
-    <button
-      aria-busy={false}
-      aria-disabled={true}
-      className="button sizeMedium kindPrimary colorPrimary disabled"
-      data-testid="button"
-      data-vibe="Button"
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onMouseDown={[Function]}
-      onMouseUp={[Function]}
-      tabIndex={-1}
-      type="button"
-    >
-      Confirm
-    </button>
-  </div>
-</div>
-`;
-
-exports[`ModalFooterButtons > should render correctly with no tertiary 1`] = `
-<div
-  className="container"
->
-  <div
-    className="container directionRow justifyEnd alignCenter"
-    style={
-      {
-        "gap": "var(--spacing-small)",
-      }
-    }
-  >
-    <button
-      aria-busy={false}
-      aria-disabled={false}
-      className="button sizeMedium kindPrimary colorPrimary"
-      data-testid="button"
-      data-vibe="Button"
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onMouseDown={[Function]}
-      onMouseUp={[Function]}
-      type="button"
-    >
-      Confirm
-    </button>
-  </div>
-</div>
-`;
diff --git a/packages/core/src/components/LegacyModal/LegacyModalFooter/__tests__/LegacyModalFooter.snapshot.test.jsx b/packages/core/src/components/LegacyModal/LegacyModalFooter/__tests__/LegacyModalFooter.snapshot.test.jsx
deleted file mode 100644
index e97dcee3e9..0000000000
--- a/packages/core/src/components/LegacyModal/LegacyModalFooter/__tests__/LegacyModalFooter.snapshot.test.jsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { describe, it, expect } from "vitest";
-import React from "react";
-import ModalFooter from "../LegacyModalFooter";
-import { render } from "@testing-library/react";
-
-describe("ModalFooter renders correctly", () => {
-  it("with required props", () => {
-    const { container } = render(
-      <ModalFooter id="modal-title-id" title="Default title">
-        <div>footer content</div>
-      </ModalFooter>
-    );
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  it("with className", () => {
-    const { container } = render(
-      <ModalFooter id="modal-title-id" title="Default title" className="className">
-        <div>footer content</div>
-      </ModalFooter>
-    );
-    expect(container.firstChild).toMatchSnapshot();
-  });
-});
diff --git a/packages/core/src/components/LegacyModal/LegacyModalFooter/__tests__/__snapshots__/LegacyModalFooter.snapshot.test.jsx.snap b/packages/core/src/components/LegacyModal/LegacyModalFooter/__tests__/__snapshots__/LegacyModalFooter.snapshot.test.jsx.snap
deleted file mode 100644
index 43dbbdf9a2..0000000000
--- a/packages/core/src/components/LegacyModal/LegacyModalFooter/__tests__/__snapshots__/LegacyModalFooter.snapshot.test.jsx.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`ModalFooter renders correctly > with className 1`] = `
-<div
-  class="container className"
->
-  <div>
-    footer content
-  </div>
-</div>
-`;
-
-exports[`ModalFooter renders correctly > with required props 1`] = `
-<div
-  class="container"
->
-  <div>
-    footer content
-  </div>
-</div>
-`;
diff --git a/packages/core/src/components/LegacyModal/LegacyModalHeader/LegacyModalHeader.module.scss b/packages/core/src/components/LegacyModal/LegacyModalHeader/LegacyModalHeader.module.scss
deleted file mode 100644
index c257bd56d3..0000000000
--- a/packages/core/src/components/LegacyModal/LegacyModalHeader/LegacyModalHeader.module.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-@import "../../../styles/typography";
-
-.container {
-  margin-block-start: var(--spacing-medium);
-
-  .icon {
-    margin-top: var(--spacing-xs);
-    flex-shrink: 0;
-    color: var(--primary-text-color);
-  }
-
-  .description {
-    margin-block-start: var(--spacing-small);
-    color: var(--secondary-text-color);
-  }
-
-  .closeButton {
-    position: absolute;
-    right: 20px;
-    top: 20px;
-  }
-}
diff --git a/packages/core/src/components/LegacyModal/LegacyModalHeader/LegacyModalHeader.tsx b/packages/core/src/components/LegacyModal/LegacyModalHeader/LegacyModalHeader.tsx
deleted file mode 100644
index c45cb74b57..0000000000
--- a/packages/core/src/components/LegacyModal/LegacyModalHeader/LegacyModalHeader.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import React from "react";
-import cx from "classnames";
-import { IconButton } from "@vibe/icon-button";
-import { CloseSmall } from "@vibe/icons";
-import { Icon, type SubIcon } from "@vibe/icon";
-import { type ElementContent, type VibeComponentProps } from "../../../types";
-import { NOOP } from "../../../utils/function-utils";
-import { getTestId } from "../../../tests/test-ids-utils";
-import { ComponentDefaultTestId } from "../../../tests/constants";
-import { Text, Heading } from "@vibe/typography";
-import { Flex } from "@vibe/layout";
-import styles from "./LegacyModalHeader.module.scss";
-
-interface BaseLegacyModalHeaderProps extends VibeComponentProps {
-  /**
-   * Description of the modal - pure string description is a recommended standard, use JSX ability only if there is a need to add links
-   */
-  description?: ElementContent;
-  /**
-   * Icon to be rendered before the title
-   */
-  // icon?: string | React.FunctionComponent<IconSubComponentProps> | null;
-  icon?: SubIcon;
-  /**
-   * Class name for the title
-   */
-  titleClassName?: string;
-  /**
-   * closes the Modal. No need to provide it, it is being provided by the modal
-   */
-  closeModal?: () => void;
-  /**
-   * Class name for the description
-   */
-  descriptionClassName?: string;
-  /**
-   * Size of the icon
-   */
-  iconSize?: number;
-  /**
-   * class name for the icon
-   */
-  iconClassName?: string;
-  /**
-   * Aria label for the close button
-   */
-  closeButtonAriaLabel?: string;
-}
-
-interface LegacyModalHeaderWithOnlyTitle extends BaseLegacyModalHeaderProps {
-  title: ElementContent;
-  children?: never;
-}
-
-interface LegacyModalHeaderWithOnlyChildren extends BaseLegacyModalHeaderProps {
-  title?: never;
-  children: ElementContent;
-}
-
-export type LegacyModalHeaderProps = LegacyModalHeaderWithOnlyTitle | LegacyModalHeaderWithOnlyChildren;
-
-const LegacyModalHeader = ({
-  className,
-  title,
-  children,
-  titleClassName,
-  description = "",
-  descriptionClassName,
-  icon,
-  closeModal = NOOP,
-  iconSize = 24,
-  iconClassName,
-  closeButtonAriaLabel = "close",
-  id,
-  "data-testid": dataTestId
-}: LegacyModalHeaderProps) => {
-  return (
-    <div
-      className={cx(styles.container, className)}
-      data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_HEADER, id)}
-    >
-      {children ? (
-        children
-      ) : (
-        <Flex align="start" gap="small" className={titleClassName}>
-          {icon && (
-            <Icon
-              className={cx(styles.icon, iconClassName)}
-              icon={icon}
-              iconType="svg"
-              iconSize={iconSize}
-              ignoreFocusStyle
-            />
-          )}
-          <Heading id={id} maxLines={2}>
-            {title}
-          </Heading>
-        </Flex>
-      )}
-      {description && (
-        <Text type="text2" maxLines={2} className={cx(styles.description, descriptionClassName)}>
-          {description}
-        </Text>
-      )}
-
-      <div className={cx(styles.closeButton)}>
-        <IconButton
-          key="xxs"
-          onClick={closeModal}
-          ariaLabel={closeButtonAriaLabel}
-          icon={CloseSmall}
-          kind="tertiary"
-          size="small"
-        />
-      </div>
-    </div>
-  );
-};
-
-Object.assign(LegacyModalHeader, {
-  displayName: "ModalHeader"
-});
-
-export default LegacyModalHeader;
diff --git a/packages/core/src/components/LegacyModal/LegacyModalHeader/__tests__/LegacyModalHeader.snapshot.test.jsx b/packages/core/src/components/LegacyModal/LegacyModalHeader/__tests__/LegacyModalHeader.snapshot.test.jsx
deleted file mode 100644
index a5f19b3b93..0000000000
--- a/packages/core/src/components/LegacyModal/LegacyModalHeader/__tests__/LegacyModalHeader.snapshot.test.jsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { describe, it, expect } from "vitest";
-import React from "react";
-import ModalHeader from "../LegacyModalHeader";
-import { Settings } from "@vibe/icons";
-import { render } from "@testing-library/react";
-
-describe("ModalHeader renders correctly", () => {
-  it("with required props", () => {
-    const { container } = render(<ModalHeader id="modal-title-id" title="Default title" />);
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  it("with description", () => {
-    const { container } = render(<ModalHeader id="modal-title-id" title="Default title" description="description" />);
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  it("with icon", () => {
-    const { container } = render(<ModalHeader id="modal-title-id" title="Default title" icon={Settings} />);
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  it("with classNames", () => {
-    const { container } = render(
-      <ModalHeader
-        id="modal-title-id"
-        title="Default title"
-        className="className"
-        descriptionClassName="descriptionClassName"
-        iconClassName="iconClassName"
-        titleClassName="titleClassName"
-      />
-    );
-    expect(container.firstChild).toMatchSnapshot();
-  });
-});
diff --git a/packages/core/src/components/LegacyModal/LegacyModalHeader/__tests__/__snapshots__/LegacyModalHeader.snapshot.test.jsx.snap b/packages/core/src/components/LegacyModal/LegacyModalHeader/__tests__/__snapshots__/LegacyModalHeader.snapshot.test.jsx.snap
deleted file mode 100644
index d460e81f77..0000000000
--- a/packages/core/src/components/LegacyModal/LegacyModalHeader/__tests__/__snapshots__/LegacyModalHeader.snapshot.test.jsx.snap
+++ /dev/null
@@ -1,244 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`ModalHeader renders correctly > with classNames 1`] = `
-<div
-  class="container className"
-  data-testid="modal-header_modal-title-id"
->
-  <div
-    class="container directionRow justifyStart alignStart titleClassName"
-    style="gap: var(--spacing-small);"
-  >
-    <h1
-      class="typography primary start multiLineEllipsis heading h1Normal"
-      data-testid="text_modal-title-id"
-      id="modal-title-id"
-      style="--text-clamp-lines: 2;"
-    >
-      Default title
-    </h1>
-  </div>
-  
-  <div
-    class="closeButton"
-  >
-    <span
-      class="referenceWrapper"
-    >
-      <button
-        aria-busy="false"
-        aria-disabled="false"
-        aria-label="close"
-        class="button sizeMedium kindTertiary colorPrimary noSidePadding"
-        data-testid="icon-button"
-        data-vibe="Button"
-        style="justify-content: center; align-items: center; padding: 0px; width: 32px; height: 32px;"
-        type="button"
-      >
-        <svg
-          aria-hidden="true"
-          class="icon noFocusStyle"
-          data-testid="icon"
-          data-vibe="Icon"
-          fill="currentColor"
-          height="20"
-          viewBox="0 0 20 20"
-          width="20"
-        >
-          <path
-            d="M6.331 5.27a.75.75 0 0 0-1.06 1.06L8.94 10l-3.67 3.668a.75.75 0 1 0 1.06 1.06L10 11.06l3.668 3.669a.75.75 0 0 0 1.06-1.06l-3.668-3.67 3.67-3.669a.75.75 0 0 0-1.061-1.06L10 8.939l-3.669-3.67Z"
-          />
-        </svg>
-      </button>
-    </span>
-  </div>
-</div>
-`;
-
-exports[`ModalHeader renders correctly > with description 1`] = `
-<div
-  class="container"
-  data-testid="modal-header_modal-title-id"
->
-  <div
-    class="container directionRow justifyStart alignStart"
-    style="gap: var(--spacing-small);"
-  >
-    <h1
-      class="typography primary start multiLineEllipsis heading h1Normal"
-      data-testid="text_modal-title-id"
-      id="modal-title-id"
-      style="--text-clamp-lines: 2;"
-    >
-      Default title
-    </h1>
-  </div>
-  <div
-    class="typography primary start multiLineEllipsis text text2Normal description"
-    data-testid="text"
-    style="--text-clamp-lines: 2;"
-  >
-    description
-  </div>
-  <div
-    class="closeButton"
-  >
-    <span
-      class="referenceWrapper"
-    >
-      <button
-        aria-busy="false"
-        aria-disabled="false"
-        aria-label="close"
-        class="button sizeMedium kindTertiary colorPrimary noSidePadding"
-        data-testid="icon-button"
-        data-vibe="Button"
-        style="justify-content: center; align-items: center; padding: 0px; width: 32px; height: 32px;"
-        type="button"
-      >
-        <svg
-          aria-hidden="true"
-          class="icon noFocusStyle"
-          data-testid="icon"
-          data-vibe="Icon"
-          fill="currentColor"
-          height="20"
-          viewBox="0 0 20 20"
-          width="20"
-        >
-          <path
-            d="M6.331 5.27a.75.75 0 0 0-1.06 1.06L8.94 10l-3.67 3.668a.75.75 0 1 0 1.06 1.06L10 11.06l3.668 3.669a.75.75 0 0 0 1.06-1.06l-3.668-3.67 3.67-3.669a.75.75 0 0 0-1.061-1.06L10 8.939l-3.669-3.67Z"
-          />
-        </svg>
-      </button>
-    </span>
-  </div>
-</div>
-`;
-
-exports[`ModalHeader renders correctly > with icon 1`] = `
-<div
-  class="container"
-  data-testid="modal-header_modal-title-id"
->
-  <div
-    class="container directionRow justifyStart alignStart"
-    style="gap: var(--spacing-small);"
-  >
-    <svg
-      aria-hidden="true"
-      class="icon icon noFocusStyle"
-      data-testid="icon"
-      data-vibe="Icon"
-      fill="currentColor"
-      height="24"
-      viewBox="0 0 20 20"
-      width="24"
-    >
-      <path
-        clip-rule="evenodd"
-        d="M9.85532 3.75C9.77634 3.75 9.6992 3.7738 9.63396 3.8183C9.56871 3.86281 9.5184 3.92594 9.48957 3.99946L8.9889 5.27515C8.92686 5.43321 8.81303 5.56554 8.66603 5.6505L7.00888 6.60821C6.86142 6.69343 6.68935 6.72593 6.52097 6.70035L5.16775 6.4948C5.16763 6.49478 5.16787 6.49482 5.16775 6.4948C5.08965 6.48312 5.00948 6.4952 4.93837 6.52957C4.86716 6.56398 4.80799 6.6191 4.76861 6.68769L4.76695 6.69058L4.303 7.49048C4.30298 7.49051 4.30301 7.49045 4.303 7.49048C4.26333 7.55894 4.2452 7.63787 4.25109 7.71676C4.25698 7.7957 4.28657 7.87101 4.336 7.93284L5.19117 9.00409C5.29725 9.13698 5.35503 9.30196 5.35503 9.472V11.3851C5.35503 11.5549 5.29743 11.7197 5.19165 11.8524L4.3368 12.9256C4.28754 12.9873 4.25775 13.0629 4.25186 13.1417C4.24599 13.2202 4.26389 13.2988 4.30324 13.3671C4.30332 13.3672 4.30315 13.3669 4.30324 13.3671L4.76781 14.1681C4.8073 14.2365 4.86652 14.2915 4.93773 14.3257C5.00893 14.36 5.08882 14.372 5.16696 14.3602L6.52097 14.1545C6.68935 14.1289 6.86142 14.1614 7.00888 14.2466L8.66602 15.2044C8.81303 15.2893 8.92686 15.4217 8.9889 15.5797L9.48947 16.8551C9.5183 16.9287 9.56871 16.9921 9.63396 17.0366C9.6992 17.0811 9.77634 17.1049 9.85532 17.1049H10.7833C10.8623 17.1049 10.9394 17.0811 11.0047 17.0366C11.0699 16.9921 11.1202 16.9289 11.1491 16.8554L11.6497 15.5797C11.7118 15.4217 11.8256 15.2893 11.9726 15.2044L13.6297 14.2466C13.7772 14.1614 13.9493 14.1289 14.1177 14.1545L15.4717 14.3602C15.5498 14.372 15.6297 14.36 15.7009 14.3257C15.7721 14.2915 15.8313 14.2365 15.8708 14.1681L15.8717 14.1666L16.3356 13.3667C16.3753 13.2982 16.3934 13.2193 16.3875 13.1404C16.3816 13.0614 16.3521 12.9861 16.3026 12.9243L15.4475 11.8531C15.3414 11.7202 15.2836 11.5552 15.2836 11.3851V9.472C15.2836 9.3025 15.341 9.138 15.4465 9.00531L16.3021 7.9289C16.3514 7.86715 16.3809 7.79198 16.3868 7.71321C16.3926 7.63461 16.3747 7.55606 16.3354 7.48778C16.3353 7.48763 16.3355 7.48793 16.3354 7.48778L15.8708 6.68679C15.8313 6.61833 15.7721 6.56339 15.7009 6.52911C15.6297 6.49484 15.5498 6.48284 15.4717 6.49468L14.1177 6.70035C13.9493 6.72593 13.7772 6.69343 13.6297 6.60821L11.9726 5.6505C11.8256 5.56554 11.7118 5.43321 11.6497 5.27515L11.1492 3.99972C11.1203 3.92619 11.0699 3.86281 11.0047 3.8183C10.9394 3.7738 10.8623 3.75 10.7833 3.75H9.85532ZM8.78875 2.5791C9.10311 2.36469 9.47479 2.25 9.85531 2.25H10.7833C11.1638 2.25 11.5355 2.36469 11.8499 2.5791C12.1642 2.79347 12.4066 3.09755 12.5455 3.45171C12.5455 3.45179 12.5454 3.45162 12.5455 3.45171L12.9502 4.48301L14.1525 5.17785L15.2467 5.01165C15.6231 4.95461 16.0083 5.01239 16.3514 5.17751C16.6942 5.34248 16.9793 5.60687 17.1695 5.93622C17.1697 5.93655 17.1699 5.93688 17.1701 5.93721L17.6338 6.73667C17.8243 7.06618 17.911 7.44546 17.8826 7.82499C17.8542 8.20443 17.7122 8.56651 17.475 8.86401C17.4749 8.86409 17.475 8.86393 17.475 8.86401L16.7836 9.73377V11.1225L17.4743 11.9877C17.7124 12.2856 17.855 12.6485 17.8834 13.0288C17.9118 13.4091 17.8246 13.7891 17.6333 14.1191L17.1701 14.9176C17.1699 14.9179 17.1698 14.9182 17.1696 14.9185C16.9793 15.2479 16.6942 15.5124 16.3514 15.6773C16.0083 15.8425 15.6234 15.9003 15.247 15.8433L14.1525 15.677L12.9502 16.3718L12.5456 17.4029C12.5455 17.403 12.5456 17.4028 12.5456 17.4029C12.4067 17.757 12.1642 18.0614 11.8499 18.2758C11.5355 18.4902 11.1638 18.6049 10.7833 18.6049H9.85531C9.47479 18.6049 9.10311 18.4902 8.78875 18.2758C8.47446 18.0614 8.23206 17.7573 8.09316 17.4032C8.09313 17.4031 8.09319 17.4032 8.09316 17.4032L7.6884 16.3718L6.48611 15.677L5.39194 15.8432C5.01548 15.9003 4.63029 15.8425 4.2872 15.6773C3.94439 15.5124 3.65926 15.2479 3.46899 14.9185C3.46884 14.9182 3.46915 14.9187 3.46899 14.9185L3.00484 14.1182C2.81438 13.7887 2.72767 13.4094 2.75603 13.0299C2.78438 12.6505 2.9264 12.2885 3.16355 11.991L3.85503 11.1229V9.73465L3.16434 8.86945C2.92621 8.57155 2.78362 8.20867 2.75525 7.82836C2.72687 7.44804 2.81405 7.06802 3.00534 6.73809L3.46867 5.93925C3.65841 5.6095 3.94312 5.34456 4.28569 5.17901C4.62882 5.01319 5.01402 4.9548 5.39088 5.01149L5.39195 5.01165L6.48611 5.17785L7.6884 4.48301L8.09306 3.45196C8.23195 3.0977 8.47439 2.79352 8.78875 2.5791ZM8.17274 8.282C8.74205 7.71269 9.51419 7.39286 10.3193 7.39286C10.9197 7.39286 11.5066 7.5709 12.0059 7.90447C12.5051 8.23804 12.8942 8.71215 13.1239 9.26685C13.3537 9.82156 13.4138 10.4319 13.2967 11.0208C13.1796 11.6097 12.8904 12.1506 12.4659 12.5751C12.0413 12.9997 11.5004 13.2888 10.9116 13.406C10.3227 13.5231 9.7123 13.463 9.1576 13.2332C8.60289 13.0034 8.12878 12.6143 7.79521 12.1151C7.46164 11.6159 7.2836 11.029 7.2836 10.4286C7.2836 9.62345 7.60343 8.8513 8.17274 8.282ZM10.3193 8.89286C9.91202 8.89286 9.5214 9.05466 9.2334 9.34266C8.9454 9.63066 8.7836 10.0213 8.7836 10.4286C8.7836 10.7323 8.87367 11.0292 9.04241 11.2818C9.21116 11.5343 9.45101 11.7312 9.73162 11.8474C10.0122 11.9636 10.321 11.994 10.6189 11.9348C10.9168 11.8755 11.1905 11.7293 11.4052 11.5145C11.62 11.2997 11.7663 11.0261 11.8255 10.7282C11.8848 10.4303 11.8544 10.1215 11.7381 9.84088C11.6219 9.56026 11.4251 9.32042 11.1725 9.15167C10.92 8.98293 10.623 8.89286 10.3193 8.89286Z"
-        fill="currentColor"
-        fill-rule="evenodd"
-      />
-    </svg>
-    <h1
-      class="typography primary start multiLineEllipsis heading h1Normal"
-      data-testid="text_modal-title-id"
-      id="modal-title-id"
-      style="--text-clamp-lines: 2;"
-    >
-      Default title
-    </h1>
-  </div>
-  
-  <div
-    class="closeButton"
-  >
-    <span
-      class="referenceWrapper"
-    >
-      <button
-        aria-busy="false"
-        aria-disabled="false"
-        aria-label="close"
-        class="button sizeMedium kindTertiary colorPrimary noSidePadding"
-        data-testid="icon-button"
-        data-vibe="Button"
-        style="justify-content: center; align-items: center; padding: 0px; width: 32px; height: 32px;"
-        type="button"
-      >
-        <svg
-          aria-hidden="true"
-          class="icon noFocusStyle"
-          data-testid="icon"
-          data-vibe="Icon"
-          fill="currentColor"
-          height="20"
-          viewBox="0 0 20 20"
-          width="20"
-        >
-          <path
-            d="M6.331 5.27a.75.75 0 0 0-1.06 1.06L8.94 10l-3.67 3.668a.75.75 0 1 0 1.06 1.06L10 11.06l3.668 3.669a.75.75 0 0 0 1.06-1.06l-3.668-3.67 3.67-3.669a.75.75 0 0 0-1.061-1.06L10 8.939l-3.669-3.67Z"
-          />
-        </svg>
-      </button>
-    </span>
-  </div>
-</div>
-`;
-
-exports[`ModalHeader renders correctly > with required props 1`] = `
-<div
-  class="container"
-  data-testid="modal-header_modal-title-id"
->
-  <div
-    class="container directionRow justifyStart alignStart"
-    style="gap: var(--spacing-small);"
-  >
-    <h1
-      class="typography primary start multiLineEllipsis heading h1Normal"
-      data-testid="text_modal-title-id"
-      id="modal-title-id"
-      style="--text-clamp-lines: 2;"
-    >
-      Default title
-    </h1>
-  </div>
-  
-  <div
-    class="closeButton"
-  >
-    <span
-      class="referenceWrapper"
-    >
-      <button
-        aria-busy="false"
-        aria-disabled="false"
-        aria-label="close"
-        class="button sizeMedium kindTertiary colorPrimary noSidePadding"
-        data-testid="icon-button"
-        data-vibe="Button"
-        style="justify-content: center; align-items: center; padding: 0px; width: 32px; height: 32px;"
-        type="button"
-      >
-        <svg
-          aria-hidden="true"
-          class="icon noFocusStyle"
-          data-testid="icon"
-          data-vibe="Icon"
-          fill="currentColor"
-          height="20"
-          viewBox="0 0 20 20"
-          width="20"
-        >
-          <path
-            d="M6.331 5.27a.75.75 0 0 0-1.06 1.06L8.94 10l-3.67 3.668a.75.75 0 1 0 1.06 1.06L10 11.06l3.668 3.669a.75.75 0 0 0 1.06-1.06l-3.668-3.67 3.67-3.669a.75.75 0 0 0-1.061-1.06L10 8.939l-3.669-3.67Z"
-          />
-        </svg>
-      </button>
-    </span>
-  </div>
-</div>
-`;
diff --git a/packages/core/src/components/LegacyModal/ModalHelper.ts b/packages/core/src/components/LegacyModal/ModalHelper.ts
deleted file mode 100644
index e89a017f2b..0000000000
--- a/packages/core/src/components/LegacyModal/ModalHelper.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { type ReactElement } from "react";
-import ModalHeader from "./LegacyModalHeader/LegacyModalHeader";
-import ModalContent from "./LegacyModalContent/LegacyModalContent";
-import ModalFooter from "./LegacyModalFooter/LegacyModalFooter";
-import ModalFooterButtons from "./LegacyModalFooter/LegacyModalFooterButtons/LegacyModalFooterButtons";
-
-/**
- * @deprecated
- */
-export enum ModalWidth {
-  DEFAULT = "default",
-  FULL_WIDTH = "full-width"
-}
-
-// the type A11yDialog is not exported from a11y-dialog, so mocking it with any for now
-export type A11yDialogType = any;
-
-export const isModalHeader = (child: ReactElement) => child.type === ModalHeader;
-export const isModalContent = (child: ReactElement) => child.type === ModalContent;
-export const isModalFooter = (child: ReactElement) =>
-  [ModalFooter, ModalFooterButtons].some(component => child.type === component);
-export const validateTitleProp = (title: string, childrenArray: ReactElement[]) => {
-  const hasHeaderComponent = childrenArray.some(isModalHeader);
-  if (hasHeaderComponent) return;
-
-  if (!title) {
-    throw new Error(`Title prop is mandatory for Modal when HeaderModal isn't provided. Validation failed.`);
-  }
-};
diff --git a/packages/core/src/components/LegacyModal/__tests__/LegacyModal.snapshot.test.jsx b/packages/core/src/components/LegacyModal/__tests__/LegacyModal.snapshot.test.jsx
deleted file mode 100644
index e7a834e70b..0000000000
--- a/packages/core/src/components/LegacyModal/__tests__/LegacyModal.snapshot.test.jsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import { describe, it, expect } from "vitest";
-import React from "react";
-import Modal from "../LegacyModal";
-import { ModalContent, ModalFooter, ModalHeader } from "../../../components";
-import { render } from "@testing-library/react";
-
-const baseProps = {
-  id: "modal-id",
-  show: true,
-  title: "Modal Heading",
-  onClose: () => {}
-};
-
-const content = <p>content</p>;
-const footerContent = <p>footer</p>;
-
-describe("Modal renders correctly", () => {
-  it("with base props", () => {
-    const { baseElement } = render(<Modal {...baseProps}>{content}</Modal>);
-    expect(baseElement).toMatchSnapshot();
-  });
-
-  it("with Header", () => {
-    const { baseElement } = render(
-      <Modal {...baseProps}>
-        <ModalHeader title="ModalHeader Heading" />
-        {content}
-      </Modal>
-    );
-    expect(baseElement).toMatchSnapshot();
-  });
-
-  it("with Footer", () => {
-    const { baseElement } = render(
-      <Modal {...baseProps}>
-        {content}
-        <ModalFooter>{footerContent}</ModalFooter>
-      </Modal>
-    );
-    expect(baseElement).toMatchSnapshot();
-  });
-
-  it("with description", () => {
-    const { baseElement } = render(
-      <Modal {...baseProps} description="description">
-        {content}
-      </Modal>
-    );
-    expect(baseElement).toMatchSnapshot();
-  });
-
-  it("with alertDialog", () => {
-    const { baseElement } = render(
-      <Modal {...baseProps} isAlertDialog={true}>
-        {content}
-      </Modal>
-    );
-    expect(baseElement).toMatchSnapshot();
-  });
-
-  it("with closeButtonAriaLabel", () => {
-    const { baseElement } = render(
-      <Modal {...baseProps} closeButtonAriaLabel="closeButtonAriaLabel">
-        {content}
-      </Modal>
-    );
-    expect(baseElement).toMatchSnapshot();
-  });
-
-  it("with full width", () => {
-    const { baseElement } = render(
-      <Modal {...baseProps} width="full-width">
-        {content}
-      </Modal>
-    );
-    expect(baseElement).toMatchSnapshot();
-  });
-
-  it("with custom width", () => {
-    const { baseElement } = render(
-      <Modal {...baseProps} width="720px">
-        {content}
-      </Modal>
-    );
-    expect(baseElement).toMatchSnapshot();
-  });
-
-  it("with class names", () => {
-    const { baseElement } = render(
-      <Modal {...baseProps} classNames={{ container: "container", overlay: "overlay", modal: "modal" }}>
-        {content}
-      </Modal>
-    );
-    expect(baseElement).toMatchSnapshot();
-  });
-
-  it("with all parts", () => {
-    const { baseElement } = render(
-      <Modal {...baseProps}>
-        <ModalHeader title="ModalHeader Heading" />
-        <ModalContent>{content}</ModalContent>
-        <ModalFooter>{footerContent}</ModalFooter>
-      </Modal>
-    );
-    expect(baseElement).toMatchSnapshot();
-  });
-});
diff --git a/packages/core/src/components/LegacyModal/__tests__/__snapshots__/LegacyModal.snapshot.test.jsx.snap b/packages/core/src/components/LegacyModal/__tests__/__snapshots__/LegacyModal.snapshot.test.jsx.snap
deleted file mode 100644
index fb82d1b013..0000000000
--- a/packages/core/src/components/LegacyModal/__tests__/__snapshots__/LegacyModal.snapshot.test.jsx.snap
+++ /dev/null
@@ -1,902 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`Modal renders correctly > with Footer 1`] = `
-<body
-  style="overflow: hidden;"
->
-  <div />
-  <div
-    aria-labelledby="modal-id-title"
-    aria-modal="true"
-    class="container"
-    data-testid="monday-dialog-container_modal-id"
-    id="modal-id"
-    role="dialog"
-    style="--monday-modal-z-index: 10000;"
-    tabindex="-1"
-  >
-    <div
-      class="overlay"
-      data-testid="monday-modal-overlay"
-    />
-    <div
-      class="dialog default"
-      role="document"
-    >
-      <div
-        class="container"
-        data-testid="modal-header_modal-id-title"
-      >
-        <div
-          class="container directionRow justifyStart alignStart"
-          style="gap: var(--spacing-small);"
-        >
-          <h1
-            class="typography primary start multiLineEllipsis heading h1Normal"
-            data-testid="text_modal-id-title"
-            id="modal-id-title"
-            style="--text-clamp-lines: 2;"
-          >
-            Modal Heading
-          </h1>
-        </div>
-        
-        <div
-          class="closeButton"
-        >
-          <span
-            class="referenceWrapper"
-          >
-            <button
-              aria-busy="false"
-              aria-disabled="false"
-              aria-label="Close"
-              class="button sizeMedium kindTertiary colorPrimary noSidePadding"
-              data-testid="icon-button"
-              data-vibe="Button"
-              style="justify-content: center; align-items: center; padding: 0px; width: 32px; height: 32px;"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="icon noFocusStyle"
-                data-testid="icon"
-                data-vibe="Icon"
-                fill="currentColor"
-                height="20"
-                viewBox="0 0 20 20"
-                width="20"
-              >
-                <path
-                  d="M6.331 5.27a.75.75 0 0 0-1.06 1.06L8.94 10l-3.67 3.668a.75.75 0 1 0 1.06 1.06L10 11.06l3.668 3.669a.75.75 0 0 0 1.06-1.06l-3.668-3.67 3.67-3.669a.75.75 0 0 0-1.061-1.06L10 8.939l-3.669-3.67Z"
-                />
-              </svg>
-            </button>
-          </span>
-        </div>
-      </div>
-      <div
-        class="typography primary start text text1Normal container"
-        data-testid="modal-content"
-      >
-        <p>
-          content
-        </p>
-      </div>
-      <div
-        class="container"
-      >
-        <p>
-          footer
-        </p>
-      </div>
-    </div>
-  </div>
-</body>
-`;
-
-exports[`Modal renders correctly > with Header 1`] = `
-<body
-  style="overflow: hidden;"
->
-  <div />
-  <div
-    aria-labelledby="modal-id-title"
-    aria-modal="true"
-    class="container"
-    data-testid="monday-dialog-container_modal-id"
-    id="modal-id"
-    role="dialog"
-    style="--monday-modal-z-index: 10000;"
-    tabindex="-1"
-  >
-    <div
-      class="overlay"
-      data-testid="monday-modal-overlay"
-    />
-    <div
-      class="dialog default"
-      role="document"
-    >
-      <div
-        class="container"
-        data-testid="modal-header_modal-id-title"
-      >
-        <div
-          class="container directionRow justifyStart alignStart"
-          style="gap: var(--spacing-small);"
-        >
-          <h1
-            class="typography primary start multiLineEllipsis heading h1Normal"
-            data-testid="text_modal-id-title"
-            id="modal-id-title"
-            style="--text-clamp-lines: 2;"
-          >
-            ModalHeader Heading
-          </h1>
-        </div>
-        
-        <div
-          class="closeButton"
-        >
-          <span
-            class="referenceWrapper"
-          >
-            <button
-              aria-busy="false"
-              aria-disabled="false"
-              aria-label="close"
-              class="button sizeMedium kindTertiary colorPrimary noSidePadding"
-              data-testid="icon-button"
-              data-vibe="Button"
-              style="justify-content: center; align-items: center; padding: 0px; width: 32px; height: 32px;"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="icon noFocusStyle"
-                data-testid="icon"
-                data-vibe="Icon"
-                fill="currentColor"
-                height="20"
-                viewBox="0 0 20 20"
-                width="20"
-              >
-                <path
-                  d="M6.331 5.27a.75.75 0 0 0-1.06 1.06L8.94 10l-3.67 3.668a.75.75 0 1 0 1.06 1.06L10 11.06l3.668 3.669a.75.75 0 0 0 1.06-1.06l-3.668-3.67 3.67-3.669a.75.75 0 0 0-1.061-1.06L10 8.939l-3.669-3.67Z"
-                />
-              </svg>
-            </button>
-          </span>
-        </div>
-      </div>
-      <div
-        class="typography primary start text text1Normal container"
-        data-testid="modal-content"
-      >
-        <p>
-          content
-        </p>
-      </div>
-    </div>
-  </div>
-</body>
-`;
-
-exports[`Modal renders correctly > with alertDialog 1`] = `
-<body
-  style="overflow: hidden;"
->
-  <div />
-  <div
-    aria-labelledby="modal-id-title"
-    aria-modal="true"
-    class="container"
-    data-testid="monday-dialog-container_modal-id"
-    id="modal-id"
-    role="dialog"
-    style="--monday-modal-z-index: 10000;"
-    tabindex="-1"
-  >
-    <div
-      class="overlay"
-      data-testid="monday-modal-overlay"
-    />
-    <div
-      class="dialog default"
-      role="document"
-    >
-      <div
-        class="container"
-        data-testid="modal-header_modal-id-title"
-      >
-        <div
-          class="container directionRow justifyStart alignStart"
-          style="gap: var(--spacing-small);"
-        >
-          <h1
-            class="typography primary start multiLineEllipsis heading h1Normal"
-            data-testid="text_modal-id-title"
-            id="modal-id-title"
-            style="--text-clamp-lines: 2;"
-          >
-            Modal Heading
-          </h1>
-        </div>
-        
-        <div
-          class="closeButton"
-        >
-          <span
-            class="referenceWrapper"
-          >
-            <button
-              aria-busy="false"
-              aria-disabled="false"
-              aria-label="Close"
-              class="button sizeMedium kindTertiary colorPrimary noSidePadding"
-              data-testid="icon-button"
-              data-vibe="Button"
-              style="justify-content: center; align-items: center; padding: 0px; width: 32px; height: 32px;"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="icon noFocusStyle"
-                data-testid="icon"
-                data-vibe="Icon"
-                fill="currentColor"
-                height="20"
-                viewBox="0 0 20 20"
-                width="20"
-              >
-                <path
-                  d="M6.331 5.27a.75.75 0 0 0-1.06 1.06L8.94 10l-3.67 3.668a.75.75 0 1 0 1.06 1.06L10 11.06l3.668 3.669a.75.75 0 0 0 1.06-1.06l-3.668-3.67 3.67-3.669a.75.75 0 0 0-1.061-1.06L10 8.939l-3.669-3.67Z"
-                />
-              </svg>
-            </button>
-          </span>
-        </div>
-      </div>
-      <div
-        class="typography primary start text text1Normal container"
-        data-testid="modal-content"
-      >
-        <p>
-          content
-        </p>
-      </div>
-    </div>
-  </div>
-</body>
-`;
-
-exports[`Modal renders correctly > with all parts 1`] = `
-<body
-  style="overflow: hidden;"
->
-  <div />
-  <div
-    aria-labelledby="modal-id-title"
-    aria-modal="true"
-    class="container"
-    data-testid="monday-dialog-container_modal-id"
-    id="modal-id"
-    role="dialog"
-    style="--monday-modal-z-index: 10000;"
-    tabindex="-1"
-  >
-    <div
-      class="overlay"
-      data-testid="monday-modal-overlay"
-    />
-    <div
-      class="dialog default"
-      role="document"
-    >
-      <div
-        class="container"
-        data-testid="modal-header_modal-id-title"
-      >
-        <div
-          class="container directionRow justifyStart alignStart"
-          style="gap: var(--spacing-small);"
-        >
-          <h1
-            class="typography primary start multiLineEllipsis heading h1Normal"
-            data-testid="text_modal-id-title"
-            id="modal-id-title"
-            style="--text-clamp-lines: 2;"
-          >
-            ModalHeader Heading
-          </h1>
-        </div>
-        
-        <div
-          class="closeButton"
-        >
-          <span
-            class="referenceWrapper"
-          >
-            <button
-              aria-busy="false"
-              aria-disabled="false"
-              aria-label="close"
-              class="button sizeMedium kindTertiary colorPrimary noSidePadding"
-              data-testid="icon-button"
-              data-vibe="Button"
-              style="justify-content: center; align-items: center; padding: 0px; width: 32px; height: 32px;"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="icon noFocusStyle"
-                data-testid="icon"
-                data-vibe="Icon"
-                fill="currentColor"
-                height="20"
-                viewBox="0 0 20 20"
-                width="20"
-              >
-                <path
-                  d="M6.331 5.27a.75.75 0 0 0-1.06 1.06L8.94 10l-3.67 3.668a.75.75 0 1 0 1.06 1.06L10 11.06l3.668 3.669a.75.75 0 0 0 1.06-1.06l-3.668-3.67 3.67-3.669a.75.75 0 0 0-1.061-1.06L10 8.939l-3.669-3.67Z"
-                />
-              </svg>
-            </button>
-          </span>
-        </div>
-      </div>
-      <div
-        class="typography primary start text text1Normal container"
-        data-testid="modal-content"
-      >
-        <p>
-          content
-        </p>
-      </div>
-      <div
-        class="container"
-      >
-        <p>
-          footer
-        </p>
-      </div>
-    </div>
-  </div>
-</body>
-`;
-
-exports[`Modal renders correctly > with base props 1`] = `
-<body
-  style="overflow: hidden;"
->
-  <div />
-  <div
-    aria-labelledby="modal-id-title"
-    aria-modal="true"
-    class="container"
-    data-testid="monday-dialog-container_modal-id"
-    id="modal-id"
-    role="dialog"
-    style="--monday-modal-z-index: 10000;"
-    tabindex="-1"
-  >
-    <div
-      class="overlay"
-      data-testid="monday-modal-overlay"
-    />
-    <div
-      class="dialog default"
-      role="document"
-    >
-      <div
-        class="container"
-        data-testid="modal-header_modal-id-title"
-      >
-        <div
-          class="container directionRow justifyStart alignStart"
-          style="gap: var(--spacing-small);"
-        >
-          <h1
-            class="typography primary start multiLineEllipsis heading h1Normal"
-            data-testid="text_modal-id-title"
-            id="modal-id-title"
-            style="--text-clamp-lines: 2;"
-          >
-            Modal Heading
-          </h1>
-        </div>
-        
-        <div
-          class="closeButton"
-        >
-          <span
-            class="referenceWrapper"
-          >
-            <button
-              aria-busy="false"
-              aria-disabled="false"
-              aria-label="Close"
-              class="button sizeMedium kindTertiary colorPrimary noSidePadding"
-              data-testid="icon-button"
-              data-vibe="Button"
-              style="justify-content: center; align-items: center; padding: 0px; width: 32px; height: 32px;"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="icon noFocusStyle"
-                data-testid="icon"
-                data-vibe="Icon"
-                fill="currentColor"
-                height="20"
-                viewBox="0 0 20 20"
-                width="20"
-              >
-                <path
-                  d="M6.331 5.27a.75.75 0 0 0-1.06 1.06L8.94 10l-3.67 3.668a.75.75 0 1 0 1.06 1.06L10 11.06l3.668 3.669a.75.75 0 0 0 1.06-1.06l-3.668-3.67 3.67-3.669a.75.75 0 0 0-1.061-1.06L10 8.939l-3.669-3.67Z"
-                />
-              </svg>
-            </button>
-          </span>
-        </div>
-      </div>
-      <div
-        class="typography primary start text text1Normal container"
-        data-testid="modal-content"
-      >
-        <p>
-          content
-        </p>
-      </div>
-    </div>
-  </div>
-</body>
-`;
-
-exports[`Modal renders correctly > with class names 1`] = `
-<body
-  style="overflow: hidden;"
->
-  <div />
-  <div
-    aria-labelledby="modal-id-title"
-    aria-modal="true"
-    class="container container"
-    data-testid="monday-dialog-container_modal-id"
-    id="modal-id"
-    role="dialog"
-    style="--monday-modal-z-index: 10000;"
-    tabindex="-1"
-  >
-    <div
-      class="overlay overlay"
-      data-testid="monday-modal-overlay"
-    />
-    <div
-      class="dialog modal default"
-      role="document"
-    >
-      <div
-        class="container"
-        data-testid="modal-header_modal-id-title"
-      >
-        <div
-          class="container directionRow justifyStart alignStart"
-          style="gap: var(--spacing-small);"
-        >
-          <h1
-            class="typography primary start multiLineEllipsis heading h1Normal"
-            data-testid="text_modal-id-title"
-            id="modal-id-title"
-            style="--text-clamp-lines: 2;"
-          >
-            Modal Heading
-          </h1>
-        </div>
-        
-        <div
-          class="closeButton"
-        >
-          <span
-            class="referenceWrapper"
-          >
-            <button
-              aria-busy="false"
-              aria-disabled="false"
-              aria-label="Close"
-              class="button sizeMedium kindTertiary colorPrimary noSidePadding"
-              data-testid="icon-button"
-              data-vibe="Button"
-              style="justify-content: center; align-items: center; padding: 0px; width: 32px; height: 32px;"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="icon noFocusStyle"
-                data-testid="icon"
-                data-vibe="Icon"
-                fill="currentColor"
-                height="20"
-                viewBox="0 0 20 20"
-                width="20"
-              >
-                <path
-                  d="M6.331 5.27a.75.75 0 0 0-1.06 1.06L8.94 10l-3.67 3.668a.75.75 0 1 0 1.06 1.06L10 11.06l3.668 3.669a.75.75 0 0 0 1.06-1.06l-3.668-3.67 3.67-3.669a.75.75 0 0 0-1.061-1.06L10 8.939l-3.669-3.67Z"
-                />
-              </svg>
-            </button>
-          </span>
-        </div>
-      </div>
-      <div
-        class="typography primary start text text1Normal container"
-        data-testid="modal-content"
-      >
-        <p>
-          content
-        </p>
-      </div>
-    </div>
-  </div>
-</body>
-`;
-
-exports[`Modal renders correctly > with closeButtonAriaLabel 1`] = `
-<body
-  style="overflow: hidden;"
->
-  <div />
-  <div
-    aria-labelledby="modal-id-title"
-    aria-modal="true"
-    class="container"
-    data-testid="monday-dialog-container_modal-id"
-    id="modal-id"
-    role="dialog"
-    style="--monday-modal-z-index: 10000;"
-    tabindex="-1"
-  >
-    <div
-      class="overlay"
-      data-testid="monday-modal-overlay"
-    />
-    <div
-      class="dialog default"
-      role="document"
-    >
-      <div
-        class="container"
-        data-testid="modal-header_modal-id-title"
-      >
-        <div
-          class="container directionRow justifyStart alignStart"
-          style="gap: var(--spacing-small);"
-        >
-          <h1
-            class="typography primary start multiLineEllipsis heading h1Normal"
-            data-testid="text_modal-id-title"
-            id="modal-id-title"
-            style="--text-clamp-lines: 2;"
-          >
-            Modal Heading
-          </h1>
-        </div>
-        
-        <div
-          class="closeButton"
-        >
-          <span
-            class="referenceWrapper"
-          >
-            <button
-              aria-busy="false"
-              aria-disabled="false"
-              aria-label="closeButtonAriaLabel"
-              class="button sizeMedium kindTertiary colorPrimary noSidePadding"
-              data-testid="icon-button"
-              data-vibe="Button"
-              style="justify-content: center; align-items: center; padding: 0px; width: 32px; height: 32px;"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="icon noFocusStyle"
-                data-testid="icon"
-                data-vibe="Icon"
-                fill="currentColor"
-                height="20"
-                viewBox="0 0 20 20"
-                width="20"
-              >
-                <path
-                  d="M6.331 5.27a.75.75 0 0 0-1.06 1.06L8.94 10l-3.67 3.668a.75.75 0 1 0 1.06 1.06L10 11.06l3.668 3.669a.75.75 0 0 0 1.06-1.06l-3.668-3.67 3.67-3.669a.75.75 0 0 0-1.061-1.06L10 8.939l-3.669-3.67Z"
-                />
-              </svg>
-            </button>
-          </span>
-        </div>
-      </div>
-      <div
-        class="typography primary start text text1Normal container"
-        data-testid="modal-content"
-      >
-        <p>
-          content
-        </p>
-      </div>
-    </div>
-  </div>
-</body>
-`;
-
-exports[`Modal renders correctly > with custom width 1`] = `
-<body
-  style="overflow: hidden;"
->
-  <div />
-  <div
-    aria-labelledby="modal-id-title"
-    aria-modal="true"
-    class="container"
-    data-testid="monday-dialog-container_modal-id"
-    id="modal-id"
-    role="dialog"
-    style="--monday-modal-z-index: 10000;"
-    tabindex="-1"
-  >
-    <div
-      class="overlay"
-      data-testid="monday-modal-overlay"
-    />
-    <div
-      class="dialog"
-      role="document"
-      style="width: 720px;"
-    >
-      <div
-        class="container"
-        data-testid="modal-header_modal-id-title"
-      >
-        <div
-          class="container directionRow justifyStart alignStart"
-          style="gap: var(--spacing-small);"
-        >
-          <h1
-            class="typography primary start multiLineEllipsis heading h1Normal"
-            data-testid="text_modal-id-title"
-            id="modal-id-title"
-            style="--text-clamp-lines: 2;"
-          >
-            Modal Heading
-          </h1>
-        </div>
-        
-        <div
-          class="closeButton"
-        >
-          <span
-            class="referenceWrapper"
-          >
-            <button
-              aria-busy="false"
-              aria-disabled="false"
-              aria-label="Close"
-              class="button sizeMedium kindTertiary colorPrimary noSidePadding"
-              data-testid="icon-button"
-              data-vibe="Button"
-              style="justify-content: center; align-items: center; padding: 0px; width: 32px; height: 32px;"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="icon noFocusStyle"
-                data-testid="icon"
-                data-vibe="Icon"
-                fill="currentColor"
-                height="20"
-                viewBox="0 0 20 20"
-                width="20"
-              >
-                <path
-                  d="M6.331 5.27a.75.75 0 0 0-1.06 1.06L8.94 10l-3.67 3.668a.75.75 0 1 0 1.06 1.06L10 11.06l3.668 3.669a.75.75 0 0 0 1.06-1.06l-3.668-3.67 3.67-3.669a.75.75 0 0 0-1.061-1.06L10 8.939l-3.669-3.67Z"
-                />
-              </svg>
-            </button>
-          </span>
-        </div>
-      </div>
-      <div
-        class="typography primary start text text1Normal container"
-        data-testid="modal-content"
-      >
-        <p>
-          content
-        </p>
-      </div>
-    </div>
-  </div>
-</body>
-`;
-
-exports[`Modal renders correctly > with description 1`] = `
-<body
-  style="overflow: hidden;"
->
-  <div />
-  <div
-    aria-labelledby="modal-id-title"
-    aria-modal="true"
-    class="container"
-    data-testid="monday-dialog-container_modal-id"
-    id="modal-id"
-    role="dialog"
-    style="--monday-modal-z-index: 10000;"
-    tabindex="-1"
-  >
-    <div
-      class="overlay"
-      data-testid="monday-modal-overlay"
-    />
-    <div
-      class="dialog default"
-      role="document"
-    >
-      <div
-        class="container"
-        data-testid="modal-header_modal-id-title"
-      >
-        <div
-          class="container directionRow justifyStart alignStart"
-          style="gap: var(--spacing-small);"
-        >
-          <h1
-            class="typography primary start multiLineEllipsis heading h1Normal"
-            data-testid="text_modal-id-title"
-            id="modal-id-title"
-            style="--text-clamp-lines: 2;"
-          >
-            Modal Heading
-          </h1>
-        </div>
-        <div
-          class="typography primary start multiLineEllipsis text text2Normal description"
-          data-testid="text"
-          style="--text-clamp-lines: 2;"
-        >
-          description
-        </div>
-        <div
-          class="closeButton"
-        >
-          <span
-            class="referenceWrapper"
-          >
-            <button
-              aria-busy="false"
-              aria-disabled="false"
-              aria-label="Close"
-              class="button sizeMedium kindTertiary colorPrimary noSidePadding"
-              data-testid="icon-button"
-              data-vibe="Button"
-              style="justify-content: center; align-items: center; padding: 0px; width: 32px; height: 32px;"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="icon noFocusStyle"
-                data-testid="icon"
-                data-vibe="Icon"
-                fill="currentColor"
-                height="20"
-                viewBox="0 0 20 20"
-                width="20"
-              >
-                <path
-                  d="M6.331 5.27a.75.75 0 0 0-1.06 1.06L8.94 10l-3.67 3.668a.75.75 0 1 0 1.06 1.06L10 11.06l3.668 3.669a.75.75 0 0 0 1.06-1.06l-3.668-3.67 3.67-3.669a.75.75 0 0 0-1.061-1.06L10 8.939l-3.669-3.67Z"
-                />
-              </svg>
-            </button>
-          </span>
-        </div>
-      </div>
-      <div
-        class="typography primary start text text1Normal container"
-        data-testid="modal-content"
-      >
-        <p>
-          content
-        </p>
-      </div>
-    </div>
-  </div>
-</body>
-`;
-
-exports[`Modal renders correctly > with full width 1`] = `
-<body
-  style="overflow: hidden;"
->
-  <div />
-  <div
-    aria-labelledby="modal-id-title"
-    aria-modal="true"
-    class="container"
-    data-testid="monday-dialog-container_modal-id"
-    id="modal-id"
-    role="dialog"
-    style="--monday-modal-z-index: 10000;"
-    tabindex="-1"
-  >
-    <div
-      class="overlay"
-      data-testid="monday-modal-overlay"
-    />
-    <div
-      class="dialog full"
-      role="document"
-    >
-      <div
-        class="container"
-        data-testid="modal-header_modal-id-title"
-      >
-        <div
-          class="container directionRow justifyStart alignStart"
-          style="gap: var(--spacing-small);"
-        >
-          <h1
-            class="typography primary start multiLineEllipsis heading h1Normal"
-            data-testid="text_modal-id-title"
-            id="modal-id-title"
-            style="--text-clamp-lines: 2;"
-          >
-            Modal Heading
-          </h1>
-        </div>
-        
-        <div
-          class="closeButton"
-        >
-          <span
-            class="referenceWrapper"
-          >
-            <button
-              aria-busy="false"
-              aria-disabled="false"
-              aria-label="Close"
-              class="button sizeMedium kindTertiary colorPrimary noSidePadding"
-              data-testid="icon-button"
-              data-vibe="Button"
-              style="justify-content: center; align-items: center; padding: 0px; width: 32px; height: 32px;"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="icon noFocusStyle"
-                data-testid="icon"
-                data-vibe="Icon"
-                fill="currentColor"
-                height="20"
-                viewBox="0 0 20 20"
-                width="20"
-              >
-                <path
-                  d="M6.331 5.27a.75.75 0 0 0-1.06 1.06L8.94 10l-3.67 3.668a.75.75 0 1 0 1.06 1.06L10 11.06l3.668 3.669a.75.75 0 0 0 1.06-1.06l-3.668-3.67 3.67-3.669a.75.75 0 0 0-1.061-1.06L10 8.939l-3.669-3.67Z"
-                />
-              </svg>
-            </button>
-          </span>
-        </div>
-      </div>
-      <div
-        class="typography primary start text text1Normal container"
-        data-testid="modal-content"
-      >
-        <p>
-          content
-        </p>
-      </div>
-    </div>
-  </div>
-</body>
-`;
diff --git a/packages/core/src/components/LegacyModal/a11yDialog.ts b/packages/core/src/components/LegacyModal/a11yDialog.ts
deleted file mode 100644
index db1f741b13..0000000000
--- a/packages/core/src/components/LegacyModal/a11yDialog.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from "react";
-import A11yDialogLib from "a11y-dialog";
-import { type A11yDialogType } from "./ModalHelper";
-
-const useA11yDialogInstance = (): [A11yDialogType, (node: Element) => void] => {
-  const [instance, setInstance] = React.useState(null);
-  const container = React.useCallback((node: Element) => {
-    if (node !== null) setInstance(new A11yDialogLib(node));
-  }, []);
-
-  return [instance, container];
-};
-
-export const useA11yDialog = ({ id, alertDialog }: { id: string; alertDialog: boolean }) => {
-  const [instance, ref] = useA11yDialogInstance();
-  const role = alertDialog ? "alertdialog" : "dialog";
-  const titleId = id + "-title";
-
-  // Destroy the `a11y-dialog` instance when unmounting the component.
-  React.useEffect(() => {
-    return () => {
-      if (instance) instance.destroy();
-    };
-  }, [instance]);
-
-  return [
-    instance,
-    {
-      container: {
-        id,
-        ref,
-        role,
-        tabIndex: -1,
-        "aria-modal": true,
-        "aria-hidden": true,
-        "aria-labelledby": titleId
-      },
-      dialog: { role: "document" },
-      // Using a paragraph with accessibility mapping can be useful to work
-      // around SEO concerns of having multiple <h1> per page.
-      title: { id: titleId }
-    }
-  ];
-};
diff --git a/packages/core/src/components/LegacyModal/index.ts b/packages/core/src/components/LegacyModal/index.ts
deleted file mode 100644
index defbc96bd3..0000000000
--- a/packages/core/src/components/LegacyModal/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-export { default as Modal, type LegacyModalProps as ModalProps } from "./LegacyModal";
-export {
-  default as ModalHeader,
-  type LegacyModalHeaderProps as ModalHeaderProps
-} from "./LegacyModalHeader/LegacyModalHeader";
-export {
-  default as ModalContent,
-  type LegacyModalContentProps as ModalContentProps
-} from "./LegacyModalContent/LegacyModalContent";
-export {
-  default as ModalFooter,
-  type LegacyModalFooterProps as ModalFooterProps
-} from "./LegacyModalFooter/LegacyModalFooter";
-export {
-  default as ModalFooterButtons,
-  type LegacyModalFooterButtonsProps as ModalFooterButtonsProps
-} from "./LegacyModalFooter/LegacyModalFooterButtons/LegacyModalFooterButtons";
-
-export * from "./LegacyModal.types";
diff --git a/packages/core/src/components/LegacyModal/useAnimationProps.ts b/packages/core/src/components/LegacyModal/useAnimationProps.ts
deleted file mode 100644
index 267032df11..0000000000
--- a/packages/core/src/components/LegacyModal/useAnimationProps.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { useCallback } from "react";
-import { type A11yDialogType } from "./ModalHelper";
-
-export default function useAnimationProps(triggerElement: Element, instance: A11yDialogType) {
-  return useCallback(
-    (hideAnimation = false) => {
-      let animationStart, animationEnd;
-      if (triggerElement) {
-        const { top: sourceTop, right: sourceRight } = triggerElement.getBoundingClientRect();
-        const {
-          top: destinationTop,
-          left: destinationLeft,
-          width,
-          height
-        } = instance?.$el.childNodes[1].getBoundingClientRect() || {};
-
-        animationStart = {
-          transform: `translate(${sourceRight - destinationLeft - width / 2}px, ${
-            sourceTop - destinationTop - height / 2
-          }px) scale(0.6)`,
-          opacity: 0
-        };
-        animationEnd = { transform: `translate(0, 0) scale(1)`, opacity: 1 };
-      } else {
-        animationStart = {
-          transform: `scale(0.70)`,
-          opacity: 0.4
-        };
-        animationEnd = { transform: `scale(1)`, opacity: 1 };
-      }
-
-      return hideAnimation
-        ? [
-            [animationEnd, animationStart],
-            {
-              duration: 100,
-              easing: "cubic-bezier(0.4, 0, 1, 1)"
-            }
-          ]
-        : [
-            [animationStart, animationEnd],
-            {
-              duration: 100,
-              easing: "cubic-bezier(0, 0, 0.35, 1)"
-            }
-          ];
-    },
-    [instance, triggerElement]
-  );
-}
diff --git a/packages/core/src/components/LegacyModal/useBodyScrollLock.ts b/packages/core/src/components/LegacyModal/useBodyScrollLock.ts
deleted file mode 100644
index 04ff69fc30..0000000000
--- a/packages/core/src/components/LegacyModal/useBodyScrollLock.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { useEffect } from "react";
-import { clearAllBodyScrollLocks, disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
-import { type A11yDialogType } from "./ModalHelper";
-
-export default function useBodyScrollLock({ instance }: { instance: A11yDialogType }) {
-  // clear all scroll locks on unmount (just to be safe)
-  useEffect(() => {
-    return () => clearAllBodyScrollLocks();
-  }, []);
-
-  // lock body on modal show
-  useEffect(() => {
-    instance?.on("show", () => disableBodyScroll(instance.$el, { reserveScrollBarGap: true }));
-    instance?.on("hide", () => enableBodyScroll(instance.$el));
-    return () => {
-      instance?.off("show");
-      instance?.off("hide");
-    };
-  }, [instance]);
-}
diff --git a/packages/core/src/components/LegacyModal/useShowHideModal.ts b/packages/core/src/components/LegacyModal/useShowHideModal.ts
deleted file mode 100644
index b319f56b28..0000000000
--- a/packages/core/src/components/LegacyModal/useShowHideModal.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import type React from "react";
-import { useState, useCallback, useEffect } from "react";
-import useAnimationProps from "./useAnimationProps";
-import useKeyEvent from "../../hooks/useKeyEvent/index";
-import { type A11yDialogType } from "./ModalHelper";
-import { keyCodes } from "../../constants";
-
-const KEYS = [keyCodes.ESCAPE];
-
-export default function useShowHideModal({
-  instance,
-  show,
-  triggerElement,
-  onClose,
-  alertDialog
-}: {
-  instance: A11yDialogType;
-  show: boolean;
-  triggerElement: Element;
-  onClose: () => void;
-  alertDialog: boolean;
-}) {
-  const [isAnimating, setIsAnimating] = useState(false);
-  const getAnimationProps = useAnimationProps(triggerElement, instance);
-
-  const closeOnEsc = useCallback(
-    (event: React.KeyboardEvent) => {
-      if (!alertDialog && instance?.$el.contains(document.activeElement)) {
-        event.stopPropagation();
-        onClose?.();
-      }
-    },
-    [alertDialog, instance?.$el, onClose]
-  );
-
-  useKeyEvent({
-    callback: closeOnEsc,
-    capture: true,
-    keys: KEYS
-  });
-
-  useEffect(() => {
-    if (show) {
-      setIsAnimating(true);
-      instance?.show();
-      const animate = instance?.$el.childNodes[1].animate;
-      if (animate) {
-        instance?.$el.childNodes[1].animate?.(...getAnimationProps());
-      }
-    } else {
-      const animate = instance?.$el.childNodes[1].animate;
-      if (animate) {
-        const animation = instance?.$el.childNodes[1]?.animate(...getAnimationProps(true));
-        animation?.finished.then(() => {
-          setIsAnimating(false);
-          instance?.hide();
-        });
-      } else {
-        setIsAnimating(false);
-        instance?.hide();
-      }
-    }
-  }, [show, instance, getAnimationProps]);
-
-  return { shouldShow: isAnimating };
-}
diff --git a/packages/core/src/components/Link/Link.module.scss b/packages/core/src/components/Link/Link.module.scss
index ae6dfbe21e..1698855b6b 100644
--- a/packages/core/src/components/Link/Link.module.scss
+++ b/packages/core/src/components/Link/Link.module.scss
@@ -1,5 +1,5 @@
 @import "../../styles/typography";
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 
 .link {
   display: flex;
@@ -37,23 +37,10 @@
 
 .iconStart {
   line-height: 24px;
-  margin-right: var(--spacing-small);
+  margin-inline-end: var(--space-4);
 }
 
 .iconEnd {
   line-height: 24px;
-  margin-left: var(--spacing-small);
-}
-
-@supports (margin-inline-start: initial) {
-  .iconStart {
-    line-height: 24px;
-    margin-right: 0;
-    margin-inline-end: var(--spacing-xs);
-  }
-  .iconEnd {
-    line-height: 24px;
-    margin-left: 0;
-    margin-inline-start: var(--spacing-xs);
-  }
+  margin-inline-start: var(--space-4);
 }
diff --git a/packages/core/src/components/Link/Link.tsx b/packages/core/src/components/Link/Link.tsx
index c38e75ccf1..fcbdabfa75 100644
--- a/packages/core/src/components/Link/Link.tsx
+++ b/packages/core/src/components/Link/Link.tsx
@@ -3,9 +3,8 @@ import cx from "classnames";
 import React, { forwardRef, useCallback } from "react";
 import { NOOP } from "../../utils/function-utils";
 import { Icon, type SubIcon } from "@vibe/icon";
-import { IconPosition as IconPositionEnum, LinkTarget as LinkTargetEnum } from "./LinkConsts";
 import { type LinkColor, type LinkIconPosition, type LinkTarget } from "./Link.types";
-import { type VibeComponentProps, withStaticProps } from "../../types";
+import { type VibeComponentProps } from "../../types";
 import styles from "./Link.module.scss";
 import { getStyle } from "../../helpers/typesciptCssModulesHelper";
 import { camelCase } from "es-toolkit";
@@ -37,17 +36,17 @@ export interface LinkProps extends VibeComponentProps {
    */
   target?: LinkTarget;
   /**
-   * The ARIA label description for accessibility.
+   * The ARIA label for accessibility.
    */
-  ariaLabelDescription?: string;
+  "aria-label"?: string;
   /**
    * The ID of the element that describes this link.
    */
-  ariaDescribedby?: string;
+  "aria-describedby"?: string;
   /**
    * The ID of the element labeling this link.
    */
-  ariaLabeledBy?: string;
+  "aria-labelledby"?: string;
   /**
    * Icon displayed next to the link text.
    */
@@ -86,13 +85,13 @@ const Link = forwardRef(
       rel = "noreferrer",
       onClick = NOOP,
       target = "_blank",
-      ariaLabelDescription = "",
+      "aria-label": ariaLabel = "",
       color = "primary",
-      ariaDescribedby = "",
+      "aria-describedby": ariaDescribedby = "",
       icon = "",
       iconPosition = "start",
       id = "",
-      ariaLabeledBy = "",
+      "aria-labelledby": ariaLabelledBy = "",
       disableNavigation = false,
       inheritFontSize = false,
       inlineText = false,
@@ -128,9 +127,9 @@ const Link = forwardRef(
           [styles.inheritFontSize]: inheritFontSize,
           [styles.inlineText]: inlineText
         })}
-        aria-label={ariaLabelDescription}
+        aria-label={ariaLabel}
         aria-describedby={ariaDescribedby}
-        aria-labelledby={ariaLabeledBy}
+        aria-labelledby={ariaLabelledBy}
       >
         {getIcon(isStart, icon, cx(styles.iconStart))}
         <span className={cx(styles.text, textClassName)}>{text}</span>
@@ -142,17 +141,7 @@ const Link = forwardRef(
 
 function getIcon(shouldShow: boolean, icon: string | React.FunctionComponent | null, className: string) {
   if (!shouldShow) return;
-  return <Icon className={className} icon={icon} iconType="font" />;
+  return <Icon className={className} icon={icon} type="font" />;
 }
 
-interface LinkStaticProps {
-  targets: typeof LinkTargetEnum;
-  iconPositions: typeof IconPositionEnum;
-  position: typeof IconPositionEnum;
-}
-
-export default withStaticProps<LinkProps, LinkStaticProps>(Link, {
-  position: IconPositionEnum,
-  iconPositions: IconPositionEnum,
-  targets: LinkTargetEnum
-});
+export default Link;
diff --git a/packages/core/src/components/Link/__tests__/Link.snapshot.test.tsx b/packages/core/src/components/Link/__tests__/Link.snapshot.test.tsx
index 1a6e100610..a2eda653de 100644
--- a/packages/core/src/components/Link/__tests__/Link.snapshot.test.tsx
+++ b/packages/core/src/components/Link/__tests__/Link.snapshot.test.tsx
@@ -29,18 +29,18 @@ describe("Link renders correctly", () => {
     expect(tree).toMatchSnapshot();
   });
 
-  it("with ariaLabeledBy", () => {
-    const tree = renderer.create(<Link ariaLabeledBy="aria label link" />).toJSON();
+  it("with aria-labelledby", () => {
+    const tree = renderer.create(<Link aria-labelledby="aria label link" />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
-  it("with ariaDescribedby", () => {
-    const tree = renderer.create(<Link ariaDescribedby="aria described by" />).toJSON();
+  it("with aria-describedby", () => {
+    const tree = renderer.create(<Link aria-describedby="aria described by" />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
-  it("with ariaLabelDescription", () => {
-    const tree = renderer.create(<Link ariaLabelDescription="arialabel link" />).toJSON();
+  it("with aria-label", () => {
+    const tree = renderer.create(<Link aria-label="arialabel link" />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/packages/core/src/components/Link/__tests__/Link.test.tsx b/packages/core/src/components/Link/__tests__/Link.test.tsx
index f13f666183..01db413683 100644
--- a/packages/core/src/components/Link/__tests__/Link.test.tsx
+++ b/packages/core/src/components/Link/__tests__/Link.test.tsx
@@ -12,7 +12,7 @@ describe("Link", () => {
 
   beforeEach(() => {
     onClickMock = vi.fn();
-    render(<Link text={text} onClick={onClickMock} href={href} ariaLabelDescription={ariaLabel} />);
+    render(<Link text={text} onClick={onClickMock} href={href} aria-label={ariaLabel} />);
   });
 
   describe("default props", () => {
diff --git a/packages/core/src/components/Link/__tests__/__snapshots__/Link.snapshot.test.tsx.snap b/packages/core/src/components/Link/__tests__/__snapshots__/Link.snapshot.test.tsx.snap
index a71728be0b..aa6c4842f3 100644
--- a/packages/core/src/components/Link/__tests__/__snapshots__/Link.snapshot.test.tsx.snap
+++ b/packages/core/src/components/Link/__tests__/__snapshots__/Link.snapshot.test.tsx.snap
@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Link renders correctly > with ariaDescribedby 1`] = `
+exports[`Link renders correctly > with aria-describedby 1`] = `
 <a
   aria-describedby="aria described by"
   aria-label=""
@@ -22,7 +22,7 @@ exports[`Link renders correctly > with ariaDescribedby 1`] = `
 </a>
 `;
 
-exports[`Link renders correctly > with ariaLabelDescription 1`] = `
+exports[`Link renders correctly > with aria-label 1`] = `
 <a
   aria-describedby=""
   aria-label="arialabel link"
@@ -44,7 +44,7 @@ exports[`Link renders correctly > with ariaLabelDescription 1`] = `
 </a>
 `;
 
-exports[`Link renders correctly > with ariaLabeledBy 1`] = `
+exports[`Link renders correctly > with aria-labelledby 1`] = `
 <a
   aria-describedby=""
   aria-label=""
diff --git a/packages/core/src/components/List/List.tsx b/packages/core/src/components/List/List.tsx
index eaa89c3742..e522231c86 100644
--- a/packages/core/src/components/List/List.tsx
+++ b/packages/core/src/components/List/List.tsx
@@ -15,10 +15,9 @@ import useMergeRef from "../../hooks/useMergeRef";
 import useKeyEvent from "../../hooks/useKeyEvent";
 import { VirtualizedListItems } from "./VirtualizedListItems/VirtualizedListItems";
 import { keyCodes, UP_DOWN_ARROWS } from "../../constants/keyCodes";
-import { withStaticProps, type VibeComponentProps } from "../../types";
+import { type VibeComponentProps } from "../../types";
 import { type ListItemProps } from "../ListItem/ListItem";
 import { type ListTitleProps } from "../ListTitle/ListTitle";
-import { ListWrapperComponentType as ListWrapperComponentTypeEnum } from "./ListConstants";
 import { type ListElement } from "./List.types";
 import { ComponentDefaultTestId, getTestId } from "../../tests/test-ids-utils";
 import { ListContext } from "./utils/ListContext";
@@ -42,11 +41,11 @@ export interface ListProps extends VibeComponentProps {
   /**
    * The ARIA label describing the list.
    */
-  ariaLabel?: string;
+  "aria-label"?: string;
   /**
    * The ID of an element that describes the list.
    */
-  ariaDescribedBy?: string;
+  "aria-describedby"?: string;
   /**
    * The ID of an element controlled by the list.
    */
@@ -74,10 +73,10 @@ const List = forwardRef(
     {
       className,
       id,
-      component = ListWrapperComponentTypeEnum.UL,
+      component = "ul",
       children,
-      ariaLabel,
-      ariaDescribedBy,
+      "aria-label": ariaLabel,
+      "aria-describedby": ariaDescribedBy,
       "aria-controls": ariaControls,
       renderOnlyVisibleItems = false,
       style,
@@ -192,10 +191,4 @@ const List = forwardRef(
   }
 );
 
-interface ListStaticProps {
-  components: typeof ListWrapperComponentTypeEnum;
-}
-
-export default withStaticProps<ListProps, ListStaticProps>(List, {
-  components: ListWrapperComponentTypeEnum
-});
+export default List;
diff --git a/packages/core/src/components/List/ListConstants.ts b/packages/core/src/components/List/ListConstants.ts
deleted file mode 100644
index 2bece57e3c..0000000000
--- a/packages/core/src/components/List/ListConstants.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
- * @deprecated
- */
-export enum ListWrapperComponentType {
-  DIV = "div",
-  NAV = "nav",
-  UL = "ul",
-  OL = "ol"
-}
diff --git a/packages/core/src/components/List/VirtualizedListItems/VirtualizedListItems.module.scss b/packages/core/src/components/List/VirtualizedListItems/VirtualizedListItems.module.scss
index 1f8d1cdd98..76dfdd547a 100644
--- a/packages/core/src/components/List/VirtualizedListItems/VirtualizedListItems.module.scss
+++ b/packages/core/src/components/List/VirtualizedListItems/VirtualizedListItems.module.scss
@@ -1,4 +1,4 @@
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 
 .scrollableContainer {
   margin: 0;
diff --git a/packages/core/src/components/List/__tests__/List.test.jsx b/packages/core/src/components/List/__tests__/List.test.tsx
similarity index 100%
rename from packages/core/src/components/List/__tests__/List.test.jsx
rename to packages/core/src/components/List/__tests__/List.test.tsx
diff --git a/packages/core/src/components/List/__tests__/__snapshots__/List.test.tsx.snap b/packages/core/src/components/List/__tests__/__snapshots__/List.test.tsx.snap
new file mode 100644
index 0000000000..dc446b56db
--- /dev/null
+++ b/packages/core/src/components/List/__tests__/__snapshots__/List.test.tsx.snap
@@ -0,0 +1,63 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`List > renders correctly with empty props 1`] = `
+<ul
+  className="list"
+  data-testid="list"
+  data-vibe="List"
+  id="list-1"
+  role="listbox"
+  tabIndex={-1}
+>
+  Something
+</ul>
+`;
+
+exports[`List > renders correctly with list items 1`] = `
+<ul
+  className="list"
+  data-testid="list"
+  data-vibe="List"
+  id="list-2"
+  role="listbox"
+  tabIndex={-1}
+>
+  <li
+    aria-disabled={false}
+    className="typography primary start singleLineEllipsis text text2Normal listItem small"
+    data-testid="list-2-item-0"
+    id="list-2-item-0"
+    onClick={[Function]}
+    onFocus={[Function]}
+    onMouseEnter={[Function]}
+    role="option"
+    tabIndex={0}
+  >
+    1
+  </li>
+  <li
+    aria-disabled={false}
+    className="typography primary start singleLineEllipsis text text2Normal listItem small"
+    data-testid="list-2-item-1"
+    id="list-2-item-1"
+    onClick={[Function]}
+    onFocus={[Function]}
+    onMouseEnter={[Function]}
+    role="option"
+    tabIndex={-1}
+  >
+    2
+  </li>
+</ul>
+`;
+
+exports[`List > renders correctly without props 1`] = `
+<ul
+  className="list"
+  data-testid="list"
+  data-vibe="List"
+  id="list-0"
+  role="listbox"
+  tabIndex={-1}
+/>
+`;
diff --git a/packages/core/src/components/ListItem/ListItem.tsx b/packages/core/src/components/ListItem/ListItem.tsx
index 0f14052b0f..fb4f037708 100644
--- a/packages/core/src/components/ListItem/ListItem.tsx
+++ b/packages/core/src/components/ListItem/ListItem.tsx
@@ -13,11 +13,10 @@ import { getStyle } from "../../helpers/typesciptCssModulesHelper";
 import { Text } from "@vibe/typography";
 import { SIZES, SELECTION_KEYS } from "../../constants";
 import { NOOP } from "../../utils/function-utils";
-import { withStaticProps, type VibeComponentProps, type ElementContent } from "../../types";
+import { type VibeComponentProps, type ElementContent } from "../../types";
 import { useKeyEvent } from "../../hooks";
 import useMergeRef from "../../hooks/useMergeRef";
 import { ListContext } from "../List/utils/ListContext";
-import { ListItemComponentType as ListItemComponentTypeEnum } from "./ListItemConstants";
 import { type ListItemElement, type ListItemSize } from "./ListItem.types";
 import { type TooltipProps } from "@vibe/tooltip";
 import styles from "./ListItem.module.scss";
@@ -107,10 +106,12 @@ const ListItem = forwardRef(
       [disabled, onClick, id]
     );
 
+    const onKeyboardSelect = useCallback((event: React.KeyboardEvent) => componentOnClick(event), [componentOnClick]);
+
     useKeyEvent({
       keys: SELECTION_KEYS,
       ref: componentRef,
-      callback: componentOnClick
+      callback: onKeyboardSelect
     });
 
     const componentOnHover = useCallback(
@@ -153,12 +154,4 @@ Object.assign(ListItem, {
   displayName: "ListItem"
 });
 
-interface ListItemStaticProps {
-  sizes: typeof SIZES;
-  components: typeof ListItemComponentTypeEnum;
-}
-
-export default withStaticProps<ListItemProps, ListItemStaticProps>(ListItem, {
-  sizes: SIZES,
-  components: ListItemComponentTypeEnum
-});
+export default ListItem;
diff --git a/packages/core/src/components/ListItem/ListItemConstants.ts b/packages/core/src/components/ListItem/ListItemConstants.ts
deleted file mode 100644
index 616b6f5014..0000000000
--- a/packages/core/src/components/ListItem/ListItemConstants.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * @deprecated
- */
-export enum ListItemComponentType {
-  DIV = "div",
-  LI = "li",
-  A = "a"
-}
diff --git a/packages/core/src/components/ListItemAvatar/ListItemAvatar.module.scss b/packages/core/src/components/ListItemAvatar/ListItemAvatar.module.scss
index f0906e9455..d620b548aa 100644
--- a/packages/core/src/components/ListItemAvatar/ListItemAvatar.module.scss
+++ b/packages/core/src/components/ListItemAvatar/ListItemAvatar.module.scss
@@ -9,5 +9,5 @@
 .avatar {
   width: 22px;
   height: 22px;
-  margin-right: var(--spacing-small);
+  margin-inline-end: var(--space-8);
 }
diff --git a/packages/core/src/components/ListItemAvatar/ListItemAvatar.tsx b/packages/core/src/components/ListItemAvatar/ListItemAvatar.tsx
index 03258d18dc..2a542fa7b9 100644
--- a/packages/core/src/components/ListItemAvatar/ListItemAvatar.tsx
+++ b/packages/core/src/components/ListItemAvatar/ListItemAvatar.tsx
@@ -1,9 +1,8 @@
 import React, { forwardRef, useRef } from "react";
 import cx from "classnames";
 import useMergeRef from "../../hooks/useMergeRef";
-import { type VibeComponentProps, withStaticProps } from "../../types";
+import { type VibeComponentProps } from "../../types";
 import Avatar from "../Avatar/Avatar";
-import { ListItemComponentType as ListItemComponentTypeEnum } from "../ListItem/ListItemConstants";
 import { type ListItemElement } from "../ListItem";
 import styles from "./ListItemAvatar.module.scss";
 
@@ -38,10 +37,4 @@ const ListItemAvatar = forwardRef(
   }
 );
 
-interface ListItemAvatarStaticProps {
-  components: typeof ListItemComponentTypeEnum;
-}
-
-export default withStaticProps<ListItemAvatarProps, ListItemAvatarStaticProps>(ListItemAvatar, {
-  components: ListItemComponentTypeEnum
-});
+export default ListItemAvatar;
diff --git a/packages/core/src/components/ListItemIcon/ListItemIcon.module.scss b/packages/core/src/components/ListItemIcon/ListItemIcon.module.scss
index a1722c400c..78a18e57f5 100644
--- a/packages/core/src/components/ListItemIcon/ListItemIcon.module.scss
+++ b/packages/core/src/components/ListItemIcon/ListItemIcon.module.scss
@@ -7,9 +7,9 @@
 }
 
 .start {
-  margin-right: var(--spacing-small);
+  margin-inline-end: var(--space-8);
 }
 
 .end {
-  margin-left: var(--spacing-small);
+  margin-inline-start: var(--space-8);
 }
diff --git a/packages/core/src/components/ListItemIcon/ListItemIcon.tsx b/packages/core/src/components/ListItemIcon/ListItemIcon.tsx
index 1fdb0ba9e1..0f727c2371 100644
--- a/packages/core/src/components/ListItemIcon/ListItemIcon.tsx
+++ b/packages/core/src/components/ListItemIcon/ListItemIcon.tsx
@@ -2,10 +2,8 @@ import cx from "classnames";
 import React, { forwardRef, useRef } from "react";
 import useMergeRef from "../../hooks/useMergeRef";
 import { Icon, type SubIcon } from "@vibe/icon";
-import { ListItemIconMargin as ListItemIconMarginEnum } from "./ListItemIconConstants";
-import { ListItemComponentType as ListItemComponentTypeEnum } from "../ListItem/ListItemConstants";
 import { type ListItemElement } from "../ListItem";
-import { type VibeComponentProps, withStaticProps } from "../../types";
+import { type VibeComponentProps } from "../../types";
 import { getStyle } from "../../helpers/typesciptCssModulesHelper";
 import styles from "./ListItemIcon.module.scss";
 import { type ListItemIconMargin } from "./ListItemIcon.types";
@@ -42,18 +40,10 @@ const ListItemIcon = forwardRef(
         id={id}
         aria-hidden="true"
       >
-        <Icon icon={icon} ignoreFocusStyle iconSize={LIST_ITEM_ICON_SIZE} />
+        <Icon icon={icon} ignoreFocusStyle size={LIST_ITEM_ICON_SIZE} />
       </Component>
     );
   }
 );
 
-interface ListItemIconStaticProps {
-  margin: typeof ListItemIconMarginEnum;
-  components: typeof ListItemComponentTypeEnum;
-}
-
-export default withStaticProps<ListItemIconProps, ListItemIconStaticProps>(ListItemIcon, {
-  margin: ListItemIconMarginEnum,
-  components: ListItemComponentTypeEnum
-});
+export default ListItemIcon;
diff --git a/packages/core/src/components/ListItemIcon/ListItemIconConstants.ts b/packages/core/src/components/ListItemIcon/ListItemIconConstants.ts
deleted file mode 100644
index 8d844586c9..0000000000
--- a/packages/core/src/components/ListItemIcon/ListItemIconConstants.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * @deprecated
- */
-export enum ListItemIconMargin {
-  START = "start",
-  END = "end"
-}
diff --git a/packages/core/src/components/ListTitle/ListTitle.module.scss b/packages/core/src/components/ListTitle/ListTitle.module.scss
index 0117ade2fe..c0ebe70db3 100644
--- a/packages/core/src/components/ListTitle/ListTitle.module.scss
+++ b/packages/core/src/components/ListTitle/ListTitle.module.scss
@@ -2,6 +2,6 @@
 
 .listTitle {
   @include smoothing-text;
-  padding: var(--spacing-medium) var(--spacing-medium) var(--spacing-small);
+  padding: var(--space-16) var(--space-16) var(--space-8);
   border-radius: var(--border-radius-small);
 }
diff --git a/packages/core/src/components/Menu/Menu/Menu.tsx b/packages/core/src/components/Menu/Menu/Menu.tsx
index 5b2ea3e47a..0ccee8b230 100644
--- a/packages/core/src/components/Menu/Menu/Menu.tsx
+++ b/packages/core/src/components/Menu/Menu/Menu.tsx
@@ -12,13 +12,13 @@ import useMouseLeave from "./hooks/useMouseLeave";
 import { useAdjacentSelectableMenuIndex } from "./hooks/useAdjacentSelectableMenuIndex";
 import { useFocusWithin } from "../../../hooks/useFocusWithin";
 import usePrevious from "../../../hooks/usePrevious";
-import { type ElementContent, type VibeComponentProps, withStaticProps } from "../../../types";
-import { type CloseMenuOption, type MenuChild } from "./MenuConstants";
+import { type ElementContent, type VibeComponentProps } from "../../../types";
 import { getStyle } from "../../../helpers/typesciptCssModulesHelper";
 import { getTestId } from "../../../tests/test-ids-utils";
 import { ComponentDefaultTestId, ComponentVibeId } from "../../../tests/constants";
 import { useFocusOnMount } from "./hooks/useFocusOnMount";
 import { useMenuId } from "./hooks/useMenuId";
+import { type CloseMenuOption, type MenuChild } from "./MenuConstants";
 import { generateMenuItemId } from "./utils/utils";
 import styles from "./Menu.module.scss";
 
@@ -34,11 +34,11 @@ export interface MenuProps extends VibeComponentProps {
   /**
    * ARIA label for accessibility.
    */
-  ariaLabel?: string;
+  "aria-label"?: string;
   /**
    * ARIA description ID.
    */
-  ariaDescribedBy?: string;
+  "aria-describedby"?: string;
   /**
    * If true, the menu will automatically focus on mount.
    */
@@ -88,8 +88,8 @@ const Menu = forwardRef(
       className,
       size = SIZES.MEDIUM,
       tabIndex = 0,
-      ariaLabel = "Menu",
-      ariaDescribedBy,
+      "aria-label": ariaLabel = "Menu",
+      "aria-describedby": ariaDescribedBy,
       children: originalChildren,
       isVisible = true,
       onClose,
@@ -266,10 +266,4 @@ Object.assign(Menu, {
   supportFocusOnMount: true
 });
 
-interface MenuStaticProps {
-  sizes: typeof SIZES;
-}
-
-export default withStaticProps<MenuProps, MenuStaticProps>(Menu, {
-  sizes: SIZES
-});
+export default Menu;
diff --git a/packages/core/src/components/Menu/Menu/__tests__/Menu.test.tsx b/packages/core/src/components/Menu/Menu/__tests__/Menu.test.tsx
index 170e6d4bca..f0e09ba32c 100644
--- a/packages/core/src/components/Menu/Menu/__tests__/Menu.test.tsx
+++ b/packages/core/src/components/Menu/Menu/__tests__/Menu.test.tsx
@@ -54,7 +54,7 @@ const menuItem2Id = "menu-item-2";
 
 const renderComponent = ({ ...props } = {}) => {
   return render(
-    <Menu {...props} ariaLabel="menu">
+    <Menu {...props} aria-label="menu">
       <MenuTitle caption={menuTitleCaption} />
       <MenuItem title={menuItem1Name} onClick={menuItem1OnClickMock} id={menuItem1Id} />
       <Divider />
diff --git a/packages/core/src/components/Menu/Menu/__tests__/__snapshots__/Menu.test.tsx.snap b/packages/core/src/components/Menu/Menu/__tests__/__snapshots__/Menu.test.tsx.snap
index c5e002a7de..e66d2761eb 100644
--- a/packages/core/src/components/Menu/Menu/__tests__/__snapshots__/Menu.test.tsx.snap
+++ b/packages/core/src/components/Menu/Menu/__tests__/__snapshots__/Menu.test.tsx.snap
@@ -43,7 +43,7 @@ exports[`Snapshots > renders correctly with children 1`] = `
       className="container directionRow justifyStart alignCenter"
       style={
         {
-          "gap": "var(--spacing-xs)",
+          "gap": "var(--space-4)",
         }
       }
     />
@@ -66,7 +66,7 @@ exports[`Snapshots > renders correctly with children 1`] = `
       className="container directionRow justifyStart alignCenter"
       style={
         {
-          "gap": "var(--spacing-xs)",
+          "gap": "var(--space-4)",
         }
       }
     />
diff --git a/packages/core/src/components/Menu/Menu/hooks/__tests__/useAdjacentSelectableMenuIndex.test.tsx b/packages/core/src/components/Menu/Menu/hooks/__tests__/useAdjacentSelectableMenuIndex.test.tsx
index ed0af2e90a..12f1cc0ba5 100644
--- a/packages/core/src/components/Menu/Menu/hooks/__tests__/useAdjacentSelectableMenuIndex.test.tsx
+++ b/packages/core/src/components/Menu/Menu/hooks/__tests__/useAdjacentSelectableMenuIndex.test.tsx
@@ -1,3 +1,4 @@
+import type React from "react";
 import { describe, it, expect } from "vitest";
 import { renderHook } from "@testing-library/react-hooks";
 import { useAdjacentSelectableMenuIndex } from "../useAdjacentSelectableMenuIndex";
@@ -120,7 +121,7 @@ describe("useAdjacentSelectableMenuIndex", () => {
     });
   });
 
-  function renderHookForTest(children: any) {
+  function renderHookForTest(children: React.ReactElement[]) {
     return renderHook(() => useAdjacentSelectableMenuIndex({ children }));
   }
 });
diff --git a/packages/core/src/components/Menu/MenuDivider/MenuDivider.module.scss b/packages/core/src/components/Menu/MenuDivider/MenuDivider.module.scss
index 3d2f6ac312..07f64590c4 100644
--- a/packages/core/src/components/Menu/MenuDivider/MenuDivider.module.scss
+++ b/packages/core/src/components/Menu/MenuDivider/MenuDivider.module.scss
@@ -1,4 +1,4 @@
 .menuChildDivider {
   width: 100%;
-  padding: 0 var(--spacing-small);
+  padding: 0 var(--space-8);
 }
diff --git a/packages/core/src/components/Menu/MenuGridItem/__tests__/MenuGridItem.snapshot.test.jsx b/packages/core/src/components/Menu/MenuGridItem/__tests__/MenuGridItem.snapshot.test.tsx
similarity index 100%
rename from packages/core/src/components/Menu/MenuGridItem/__tests__/MenuGridItem.snapshot.test.jsx
rename to packages/core/src/components/Menu/MenuGridItem/__tests__/MenuGridItem.snapshot.test.tsx
diff --git a/packages/core/src/components/Menu/MenuGridItem/__tests__/MenuGridItem.test.jsx b/packages/core/src/components/Menu/MenuGridItem/__tests__/MenuGridItem.test.tsx
similarity index 100%
rename from packages/core/src/components/Menu/MenuGridItem/__tests__/MenuGridItem.test.jsx
rename to packages/core/src/components/Menu/MenuGridItem/__tests__/MenuGridItem.test.tsx
diff --git a/packages/core/src/components/Menu/MenuGridItem/__tests__/__snapshots__/MenuGridItem.snapshot.test.tsx.snap b/packages/core/src/components/Menu/MenuGridItem/__tests__/__snapshots__/MenuGridItem.snapshot.test.tsx.snap
new file mode 100644
index 0000000000..bcd1434123
--- /dev/null
+++ b/packages/core/src/components/Menu/MenuGridItem/__tests__/__snapshots__/MenuGridItem.snapshot.test.tsx.snap
@@ -0,0 +1,33 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`MenuGridItem renders correctly > with a child 1`] = `
+<section
+  data-testid="menu-grid-item"
+  onBlur={[Function]}
+  onFocus={[Function]}
+  role="grid"
+  tabIndex={-1}
+>
+  <div
+    disabled={false}
+  >
+    Hello!
+  </div>
+</section>
+`;
+
+exports[`MenuGridItem renders correctly > with a disabled child 1`] = `
+<section
+  data-testid="menu-grid-item"
+  onBlur={[Function]}
+  onFocus={[Function]}
+  role="grid"
+  tabIndex={-1}
+>
+  <div
+    disabled={true}
+  >
+    this should be disabled
+  </div>
+</section>
+`;
diff --git a/packages/core/src/components/Menu/MenuGridItem/__tests__/useFocusGridItemByActiveStatus.test.js b/packages/core/src/components/Menu/MenuGridItem/__tests__/useFocusGridItemByActiveStatus.test.ts
similarity index 100%
rename from packages/core/src/components/Menu/MenuGridItem/__tests__/useFocusGridItemByActiveStatus.test.js
rename to packages/core/src/components/Menu/MenuGridItem/__tests__/useFocusGridItemByActiveStatus.test.ts
diff --git a/packages/core/src/components/Menu/MenuGridItem/__tests__/useMenuGridItemNavContext.test.js b/packages/core/src/components/Menu/MenuGridItem/__tests__/useMenuGridItemNavContext.test.ts
similarity index 100%
rename from packages/core/src/components/Menu/MenuGridItem/__tests__/useMenuGridItemNavContext.test.js
rename to packages/core/src/components/Menu/MenuGridItem/__tests__/useMenuGridItemNavContext.test.ts
diff --git a/packages/core/src/components/Menu/MenuItem/MenuItem.tsx b/packages/core/src/components/Menu/MenuItem/MenuItem.tsx
index 68ec693799..f86ae20c00 100644
--- a/packages/core/src/components/Menu/MenuItem/MenuItem.tsx
+++ b/packages/core/src/components/Menu/MenuItem/MenuItem.tsx
@@ -1,14 +1,14 @@
 import React, { type AriaAttributes, type ForwardedRef, type ReactElement, forwardRef, useMemo, useRef } from "react";
 import { Tooltip, type TooltipProps } from "@vibe/tooltip";
-import { type IconType, Icon, type SubIcon } from "@vibe/icon";
+import { type IconType, type SubIcon } from "@vibe/icon";
 import { useIsOverflowing } from "@vibe/hooks";
-import { type VibeComponentProps, withStaticProps } from "../../../types";
+import { type VibeComponentProps } from "../../../types";
 import { type CloseMenuOption, type MenuChild } from "../Menu/MenuConstants";
 import Label from "../../Label/Label";
 import styles from "./MenuItem.module.scss";
 import BaseMenuItem from "./components/BaseMenuItem/BaseMenuItem";
 import MenuItemIcon from "./components/MenuItemIcon/MenuItemIcon";
-import { type TooltipPositions, TooltipPositionsEnum } from "@vibe/tooltip";
+import { type TooltipPositions } from "@vibe/tooltip";
 import { type SubmenuPosition } from "./MenuItem.types";
 import { Flex } from "@vibe/layout";
 
@@ -49,10 +49,6 @@ export interface MenuItemProps extends VibeComponentProps {
    * Class name applied to the icon wrapper.
    */
   rightIconWrapperClassName?: string;
-  /**
-   * The label of the menu item for accessibility.
-   */
-  rightIconAriaLabel?: AriaAttributes["aria-label"];
   /**
    * If true, the menu item is disabled.
    */
@@ -150,9 +146,9 @@ export interface MenuItemProps extends VibeComponentProps {
    */
   menuRef?: React.RefObject<HTMLElement>;
   /**
-   * The submenu items, if applicable.
+   * The submenu, if applicable. Must be a single `Menu` element.
    */
-  children?: MenuChild | MenuChild[];
+  children?: MenuChild;
   /**
    * If true, enables a split menu item interaction where the main area triggers an action,
    * while the icon button opens the submenu.
@@ -189,7 +185,6 @@ const MenuItem = forwardRef(
       rightIcon = "",
       rightIconType,
       rightIconBackgroundColor,
-      rightIconAriaLabel,
       iconType,
       iconBackgroundColor,
       disabled = false,
@@ -201,17 +196,12 @@ const MenuItem = forwardRef(
       tooltipPosition = "right",
       tooltipShowDelay = 300,
       tooltipProps,
-      "aria-label": ariaLabel,
       ...baseMenuProps
     }: MenuItemProps | MenuItemTitleComponentProps,
     ref: ForwardedRef<HTMLElement>
   ) => {
     const titleRef = useRef();
 
-    // if "title" is a component ariaLabel is mandatory
-    const iconLabel = ariaLabel ?? (title as string);
-    const rightIconLabel = rightIconAriaLabel ?? (title as string);
-
     const isTitleHoveredAndOverflowing = useIsOverflowing({ ref: titleRef });
     const shouldShowTooltip = isTitleHoveredAndOverflowing || disabled || tooltipContent;
 
@@ -251,7 +241,6 @@ const MenuItem = forwardRef(
             <MenuItemIcon
               icon={icon}
               type={iconType}
-              label={iconLabel}
               disabled={disabled}
               selected={selected}
               backgroundColor={iconBackgroundColor}
@@ -266,7 +255,6 @@ const MenuItem = forwardRef(
               <MenuItemIcon
                 icon={rightIcon}
                 type={rightIconType}
-                label={rightIconLabel}
                 disabled={disabled}
                 selected={selected}
                 backgroundColor={rightIconBackgroundColor}
@@ -287,12 +275,4 @@ Object.assign(MenuItem, {
   isMenuChild: true
 });
 
-interface MenuItemStaticProps {
-  iconType: typeof Icon.type;
-  tooltipPositions: typeof TooltipPositionsEnum;
-}
-
-export default withStaticProps<MenuItemProps | MenuItemTitleComponentProps, MenuItemStaticProps>(MenuItem, {
-  iconType: Icon.type,
-  tooltipPositions: TooltipPositionsEnum
-});
+export default MenuItem;
diff --git a/packages/core/src/components/Menu/MenuItem/__tests__/MenuItem.test.jsx b/packages/core/src/components/Menu/MenuItem/__tests__/MenuItem.test.tsx
similarity index 59%
rename from packages/core/src/components/Menu/MenuItem/__tests__/MenuItem.test.jsx
rename to packages/core/src/components/Menu/MenuItem/__tests__/MenuItem.test.tsx
index 1849413871..e98f33b311 100644
--- a/packages/core/src/components/Menu/MenuItem/__tests__/MenuItem.test.jsx
+++ b/packages/core/src/components/Menu/MenuItem/__tests__/MenuItem.test.tsx
@@ -26,48 +26,51 @@ describe("<MenuItem />", () => {
     expect(queryByText("Sub Item")).toBeFalsy();
   });
 
-  const submenuPositions = [
-    {
-      submenuPosition: "left",
-      expectedPosition: "left-start"
-    },
-    {
-      submenuPosition: undefined,
-      expectedPosition: "right-start"
-    }
-  ];
-  it.each(submenuPositions)(
-    "should open the submenu on correct position",
-    async ({ submenuPosition, expectedPosition }) => {
-      const title = "Main Item";
-      const submenuTitle = "Sub Item";
+  it("should open the submenu on correct position when submenuPosition is left", async () => {
+    const title = "Main Item";
+    const submenuTitle = "Sub Item";
 
-      const { queryByText, container } = render(
-        <MenuItem
-          index={0}
-          activeItemIndex={0}
-          title={title}
-          isParentMenuVisible
-          submenuPosition={submenuPosition}
-          hasOpenSubMenu
-        >
-          <Menu>
-            <MenuItem title={submenuTitle} />
-          </Menu>
-        </MenuItem>
-      );
-      const menuItemElement = queryByText(title);
-      await act(async () => {
-        fireEvent.mouseEnter(menuItemElement);
-      });
+    const { queryByText, container } = render(
+      <MenuItem index={0} activeItemIndex={0} title={title} isParentMenuVisible submenuPosition="left" hasOpenSubMenu>
+        <Menu>
+          <MenuItem title={submenuTitle} />
+        </Menu>
+      </MenuItem>
+    );
+    const menuItemElement = queryByText(title);
+    await act(async () => {
+      fireEvent.mouseEnter(menuItemElement);
+    });
 
-      await waitFor(() => {
-        const subMenuElement = container.querySelector("[data-popper-placement]");
-        expect(subMenuElement).toBeVisible();
-        expect(subMenuElement).toHaveAttribute("data-popper-placement", expectedPosition);
-      });
-    }
-  );
+    await waitFor(() => {
+      const subMenuElement = container.querySelector("[data-popper-placement]");
+      expect(subMenuElement).toBeVisible();
+      expect(subMenuElement.getAttribute("data-popper-placement")).toContain("left");
+    });
+  });
+
+  it("should open the submenu when no submenuPosition is specified", async () => {
+    const title = "Main Item";
+    const submenuTitle = "Sub Item";
+
+    const { queryByText, container } = render(
+      <MenuItem index={0} activeItemIndex={0} title={title} isParentMenuVisible hasOpenSubMenu>
+        <Menu>
+          <MenuItem title={submenuTitle} />
+        </Menu>
+      </MenuItem>
+    );
+    const menuItemElement = queryByText(title);
+    await act(async () => {
+      fireEvent.mouseEnter(menuItemElement);
+    });
+
+    await waitFor(() => {
+      const subMenuElement = container.querySelector("[data-popper-placement]");
+      expect(subMenuElement).toBeVisible();
+      expect(subMenuElement).toHaveAttribute("data-popper-placement");
+    });
+  });
 
   it("should render Label when pass a string", () => {
     const labelText = "Label Text";
diff --git a/packages/core/src/components/Menu/MenuItem/__tests__/__snapshots__/MenuItem.snapshot.test.tsx.snap b/packages/core/src/components/Menu/MenuItem/__tests__/__snapshots__/MenuItem.snapshot.test.tsx.snap
index 38617fd28f..eac60a0c29 100644
--- a/packages/core/src/components/Menu/MenuItem/__tests__/__snapshots__/MenuItem.snapshot.test.tsx.snap
+++ b/packages/core/src/components/Menu/MenuItem/__tests__/__snapshots__/MenuItem.snapshot.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`Snapshots > renders correctly when disabled 1`] = `
     className="container directionRow justifyStart alignCenter"
     style={
       {
-        "gap": "var(--spacing-xs)",
+        "gap": "var(--space-4)",
       }
     }
   />
@@ -43,7 +43,7 @@ exports[`Snapshots > renders correctly when selected 1`] = `
     className="container directionRow justifyStart alignCenter"
     style={
       {
-        "gap": "var(--spacing-xs)",
+        "gap": "var(--space-4)",
       }
     }
   />
@@ -68,7 +68,7 @@ exports[`Snapshots > renders correctly with a label 1`] = `
     className="container directionRow justifyStart alignCenter"
     style={
       {
-        "gap": "var(--spacing-xs)",
+        "gap": "var(--space-4)",
       }
     }
   >
@@ -114,7 +114,7 @@ exports[`Snapshots > renders correctly with custom class name 1`] = `
     className="container directionRow justifyStart alignCenter"
     style={
       {
-        "gap": "var(--spacing-xs)",
+        "gap": "var(--space-4)",
       }
     }
   />
@@ -139,7 +139,7 @@ exports[`Snapshots > renders correctly with empty props 1`] = `
     className="container directionRow justifyStart alignCenter"
     style={
       {
-        "gap": "var(--spacing-xs)",
+        "gap": "var(--space-4)",
       }
     }
   />
@@ -186,7 +186,7 @@ exports[`Snapshots > renders correctly with title and SVG icon 1`] = `
     className="container directionRow justifyStart alignCenter"
     style={
       {
-        "gap": "var(--spacing-xs)",
+        "gap": "var(--space-4)",
       }
     }
   />
@@ -224,7 +224,7 @@ exports[`Snapshots > renders correctly with title and font icon 1`] = `
     className="container directionRow justifyStart alignCenter"
     style={
       {
-        "gap": "var(--spacing-xs)",
+        "gap": "var(--space-4)",
       }
     }
   />
diff --git a/packages/core/src/components/Menu/MenuItem/components/BaseMenuItem/BaseMenuItem.module.scss b/packages/core/src/components/Menu/MenuItem/components/BaseMenuItem/BaseMenuItem.module.scss
index 301b79337f..64224f9e15 100644
--- a/packages/core/src/components/Menu/MenuItem/components/BaseMenuItem/BaseMenuItem.module.scss
+++ b/packages/core/src/components/Menu/MenuItem/components/BaseMenuItem/BaseMenuItem.module.scss
@@ -1,4 +1,4 @@
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 @import "../../../../../styles/typography";
 @import "../../../../../styles/states";
 
@@ -7,7 +7,7 @@
   margin: unset;
   display: flex;
   flex-direction: row;
-  padding: var(--spacing-xs) var(--spacing-small);
+  padding: var(--space-4) var(--space-8);
   cursor: pointer;
   user-select: none;
   align-items: center;
@@ -15,7 +15,7 @@
   outline: none;
 
   &.splitMenuItem {
-    padding: 0 0 0 var(--spacing-small);
+    padding: 0 0 0 var(--space-8);
   }
 
   &.disabled {
diff --git a/packages/core/src/components/Menu/MenuItem/components/BaseMenuItem/BaseMenuItem.types.ts b/packages/core/src/components/Menu/MenuItem/components/BaseMenuItem/BaseMenuItem.types.ts
index d9a35ea42c..73099a68ea 100644
--- a/packages/core/src/components/Menu/MenuItem/components/BaseMenuItem/BaseMenuItem.types.ts
+++ b/packages/core/src/components/Menu/MenuItem/components/BaseMenuItem/BaseMenuItem.types.ts
@@ -24,12 +24,10 @@ export type LossMenuItemProps = Omit<
 >;
 
 export interface BaseMenuItemProps extends LossMenuItemProps, VibeComponentProps {
-  // TODO: [breaking] MenuItem can accept only Menu element as first level, it accepts MenuChild[] as subMenu even though it is not valid.
   /**
-   * The submenu items associated with this menu item.
-   * **Note:** Only `Menu` elements are allowed as first-level children, even though `MenuChild[]` is currently accepted.
+   * The submenu associated with this menu item. Must be a single `Menu` element.
    */
-  subMenu?: MenuChild | MenuChild[];
+  subMenu?: MenuChild;
   /**
    * The content of the menu item.
    */
diff --git a/packages/core/src/components/Menu/MenuItem/components/MenuItemIcon/MenuItemIcon.module.scss b/packages/core/src/components/Menu/MenuItem/components/MenuItemIcon/MenuItemIcon.module.scss
index 1d38566985..6373113bbd 100644
--- a/packages/core/src/components/Menu/MenuItem/components/MenuItemIcon/MenuItemIcon.module.scss
+++ b/packages/core/src/components/Menu/MenuItem/components/MenuItemIcon/MenuItemIcon.module.scss
@@ -1,13 +1,13 @@
 .iconWrapper {
-  margin-right: var(--spacing-small);
+  margin-inline-end: var(--space-8);
 
   &.rightIcon {
-    margin-right: 0;
-    margin-left: var(--spacing-small);
+    margin-inline-end: 0;
+    margin-inline-start: var(--space-8);
   }
 
   &.withBackgroundColor {
-    border-radius: var(--spacing-xs);
+    border-radius: var(--space-4);
 
     &.disabled {
       opacity: 0.4;
diff --git a/packages/core/src/components/Menu/MenuItem/components/MenuItemIcon/MenuItemIcon.tsx b/packages/core/src/components/Menu/MenuItem/components/MenuItemIcon/MenuItemIcon.tsx
index e5f7909399..224194d36e 100644
--- a/packages/core/src/components/Menu/MenuItem/components/MenuItemIcon/MenuItemIcon.tsx
+++ b/packages/core/src/components/Menu/MenuItem/components/MenuItemIcon/MenuItemIcon.tsx
@@ -9,8 +9,6 @@ const MenuItemIcon = ({
   icon,
   isRightIcon = false,
   type,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  label,
   disabled,
   selected,
   backgroundColor,
@@ -30,11 +28,11 @@ const MenuItemIcon = ({
     style={{ ...(backgroundColor && { backgroundColor }) }}
   >
     <Icon
-      iconType={type || (typeof icon === "function" ? "svg" : "font")}
+      type={type || (typeof icon === "function" ? "svg" : "font")}
       icon={icon}
       className={cx(styles.icon, { [styles.selected]: !disabled && selected })}
       ignoreFocusStyle
-      iconSize={18}
+      size={18}
     />
   </Flex>
 );
diff --git a/packages/core/src/components/Menu/MenuItem/components/MenuItemIcon/MenuItemIcon.types.ts b/packages/core/src/components/Menu/MenuItem/components/MenuItemIcon/MenuItemIcon.types.ts
index 6001430549..124483a44b 100644
--- a/packages/core/src/components/Menu/MenuItem/components/MenuItemIcon/MenuItemIcon.types.ts
+++ b/packages/core/src/components/Menu/MenuItem/components/MenuItemIcon/MenuItemIcon.types.ts
@@ -9,12 +9,6 @@ export interface MenuItemIconProps {
    * The type of icon to be used.
    */
   type?: IconType;
-  // TODO: [breaking] remove in next major
-  /**
-   * Label for the icon, used for accessibility.
-   * @deprecated This property will be removed in the next major version.
-   */
-  label?: string;
   /**
    * If true, the icon appears disabled.
    */
diff --git a/packages/core/src/components/Menu/MenuItem/components/MenuItemSubMenu/MenuItemSubMenu.tsx b/packages/core/src/components/Menu/MenuItem/components/MenuItemSubMenu/MenuItemSubMenu.tsx
index 00e3232644..ef5e0a4b5a 100644
--- a/packages/core/src/components/Menu/MenuItem/components/MenuItemSubMenu/MenuItemSubMenu.tsx
+++ b/packages/core/src/components/Menu/MenuItem/components/MenuItemSubMenu/MenuItemSubMenu.tsx
@@ -1,21 +1,21 @@
 import React, { useMemo, useRef } from "react";
 import { DialogContentContainer } from "@vibe/dialog";
-import { usePopover, DialogPlacementEnum as Placement } from "@vibe/dialog";
+import { useFloating, flip, type Placement } from "@floating-ui/react-dom";
 import { type MenuChild } from "../../../Menu/MenuConstants";
 import { type MenuItemSubMenuProps } from "./MenuItemSubMenu.types";
 import { useIsomorphicLayoutEffect } from "@vibe/shared";
 
+const DEFAULT_FALLBACK_PLACEMENTS: Placement[] = ["right-end", "left-start", "left-end"];
+
 const MenuItemSubMenu = ({
   anchorRef,
   open,
   autoFocusOnMount,
   onClose,
   children,
-  submenuPosition,
-  autoAdjustOnSubMenuContentResize
+  submenuPosition
 }: MenuItemSubMenuProps) => {
   const childRef = useRef<HTMLDivElement>(null);
-  const popperElementRef = useRef<HTMLDivElement>(null);
 
   useIsomorphicLayoutEffect(() => {
     if (!autoFocusOnMount || !open || !childRef?.current) {
@@ -26,20 +26,22 @@ const MenuItemSubMenu = ({
     });
   }, [autoFocusOnMount, open]);
 
-  const submenuPlacement = useMemo(
-    () => (submenuPosition === "left" ? Placement.LEFT_START : undefined),
+  const placement = useMemo<Placement>(
+    () => (submenuPosition === "left" ? "left-start" : "right-start"),
     [submenuPosition]
   );
 
-  const { styles: popoverStyles, attributes: popoverAttributes } = usePopover(
-    anchorRef?.current,
-    popperElementRef?.current,
-    {
-      isOpen: open,
-      placement: submenuPlacement,
-      observeContentResize: autoAdjustOnSubMenuContentResize
+  const {
+    refs,
+    floatingStyles,
+    placement: actualPlacement
+  } = useFloating({
+    placement,
+    middleware: [flip({ fallbackPlacements: DEFAULT_FALLBACK_PLACEMENTS })],
+    elements: {
+      reference: anchorRef?.current
     }
-  );
+  });
 
   const subMenu: MenuChild = children && React.Children.only(children);
   if (!subMenu?.type?.isMenu) {
@@ -49,9 +51,9 @@ const MenuItemSubMenu = ({
 
   return (
     <div
-      style={{ ...popoverStyles.popper, visibility: open ? "visible" : "hidden" }}
-      {...popoverAttributes.popper}
-      ref={popperElementRef}
+      style={{ ...floatingStyles, visibility: open ? "visible" : "hidden" }}
+      ref={refs.setFloating}
+      data-popper-placement={actualPlacement}
     >
       {subMenu && open && (
         <DialogContentContainer>
diff --git a/packages/core/src/components/Menu/MenuItem/components/MenuItemSubMenu/MenuItemSubMenu.types.ts b/packages/core/src/components/Menu/MenuItem/components/MenuItemSubMenu/MenuItemSubMenu.types.ts
index e52699ab19..fdda982a59 100644
--- a/packages/core/src/components/Menu/MenuItem/components/MenuItemSubMenu/MenuItemSubMenu.types.ts
+++ b/packages/core/src/components/Menu/MenuItem/components/MenuItemSubMenu/MenuItemSubMenu.types.ts
@@ -23,11 +23,10 @@ export interface MenuItemSubMenuProps extends Pick<MenuItemProps, "autoAdjustOnS
    * The function may accept an optional object with a `propagate` property, which can be used to control whether the close event should also propagate up to parent menus.
    */
   onClose?: (option?: CloseMenuOption) => void;
-  // TODO: [breaking] MenuItem can accept only Menu element as first level child, it accepts MenuChild[] as children even though it is not valid
   /**
-   * The submenu content, which should be a `Menu` component.
+   * The submenu content. Must be a single `Menu` component.
    */
-  children: MenuChild | MenuChild[];
+  children: MenuChild;
   /**
    * The position of the submenu relative to its parent menu item.
    */
diff --git a/packages/core/src/components/Menu/MenuItem/components/MenuItemSubMenuIcon/MenuItemSubMenuIcon.module.scss b/packages/core/src/components/Menu/MenuItem/components/MenuItemSubMenuIcon/MenuItemSubMenuIcon.module.scss
index abc12b22e8..db08300359 100644
--- a/packages/core/src/components/Menu/MenuItem/components/MenuItemSubMenuIcon/MenuItemSubMenuIcon.module.scss
+++ b/packages/core/src/components/Menu/MenuItem/components/MenuItemSubMenuIcon/MenuItemSubMenuIcon.module.scss
@@ -1,5 +1,5 @@
 .subMenuIconWrapper {
-  margin-left: var(--spacing-xs);
+  margin-inline-start: var(--space-4);
 
   .divider {
     height: 19px;
diff --git a/packages/core/src/components/Menu/MenuItem/components/MenuItemSubMenuIcon/MenuItemSubMenuIcon.tsx b/packages/core/src/components/Menu/MenuItem/components/MenuItemSubMenuIcon/MenuItemSubMenuIcon.tsx
index 6a2945aabf..37eaf69fbd 100644
--- a/packages/core/src/components/Menu/MenuItem/components/MenuItemSubMenuIcon/MenuItemSubMenuIcon.tsx
+++ b/packages/core/src/components/Menu/MenuItem/components/MenuItemSubMenuIcon/MenuItemSubMenuIcon.tsx
@@ -28,10 +28,10 @@ const MenuItemSubMenuIcon = forwardRef((props: MenuItemSubMenuIconProps, ref: Re
     ) : (
       <Icon
         icon={DropdownChevronRight}
-        iconLabel={props.label}
+        label={props.label}
         className={cx(styles.subMenuIcon, { [styles.disabled]: props.disabled })}
         ignoreFocusStyle
-        iconSize={18}
+        size={18}
       />
     )}
   </Flex>
diff --git a/packages/core/src/components/Menu/MenuItem/hooks/useMenuItemKeyboardEvents.ts b/packages/core/src/components/Menu/MenuItem/hooks/useMenuItemKeyboardEvents.ts
index 10d243d7da..6d073dc0e6 100644
--- a/packages/core/src/components/Menu/MenuItem/hooks/useMenuItemKeyboardEvents.ts
+++ b/packages/core/src/components/Menu/MenuItem/hooks/useMenuItemKeyboardEvents.ts
@@ -111,9 +111,11 @@ export default function useMenuItemKeyboardEvents({
     ]
   );
 
+  const onKeyboardClick = useCallback((event: React.KeyboardEvent) => onClickCallback(event), [onClickCallback]);
+
   useKeyEvent({
     keys: KEYS,
-    callback: onClickCallback,
+    callback: onKeyboardClick,
     ref: useDocumentEventListeners ? undefined : menuRef
   });
 
diff --git a/packages/core/src/components/Menu/MenuItemButton/MenuItemButton.module.scss b/packages/core/src/components/Menu/MenuItemButton/MenuItemButton.module.scss
index 7f6d324389..1af66a4489 100644
--- a/packages/core/src/components/Menu/MenuItemButton/MenuItemButton.module.scss
+++ b/packages/core/src/components/Menu/MenuItemButton/MenuItemButton.module.scss
@@ -2,7 +2,7 @@
   margin: unset;
   display: flex;
   flex-direction: row;
-  padding: var(--spacing-xs) 0;
+  padding: var(--space-4) 0;
   align-items: center;
 }
 
diff --git a/packages/core/src/components/Menu/MenuItemButton/MenuItemButton.tsx b/packages/core/src/components/Menu/MenuItemButton/MenuItemButton.tsx
index 6575deb3b3..ac67b0c72b 100644
--- a/packages/core/src/components/Menu/MenuItemButton/MenuItemButton.tsx
+++ b/packages/core/src/components/Menu/MenuItemButton/MenuItemButton.tsx
@@ -6,11 +6,11 @@ import { Tooltip } from "@vibe/tooltip";
 import useMergeRef from "../../../hooks/useMergeRef";
 import useMenuItemMouseEvents from "../MenuItem/hooks/useMenuItemMouseEvents";
 import useMenuItemKeyboardEvents from "../MenuItem/hooks/useMenuItemKeyboardEvents";
-import { type VibeComponentProps, type ElementContent, withStaticPropsWithoutForwardRef } from "../../../types";
+import { type VibeComponentProps, type ElementContent } from "../../../types";
 import { type SubIcon } from "@vibe/icon";
 import { Text } from "@vibe/typography";
 import styles from "./MenuItemButton.module.scss";
-import { type TooltipPositions, TooltipPositionsEnum } from "@vibe/tooltip";
+import { type TooltipPositions } from "@vibe/tooltip";
 
 export interface MenuItemButtonProps extends VibeComponentProps {
   /**
@@ -178,12 +178,4 @@ Object.assign(MenuItemButton, {
   isMenuChild: true
 });
 
-interface MenuItemButtonStaticProps {
-  kinds: typeof Button.kinds;
-  tooltipPositions: typeof TooltipPositionsEnum;
-}
-
-export default withStaticPropsWithoutForwardRef<MenuItemButtonProps, MenuItemButtonStaticProps>(MenuItemButton, {
-  kinds: Button.kinds,
-  tooltipPositions: TooltipPositionsEnum
-});
+export default MenuItemButton;
diff --git a/packages/core/src/components/Menu/MenuItemButton/__tests__/MenuItemButton.test.jsx b/packages/core/src/components/Menu/MenuItemButton/__tests__/MenuItemButton.test.tsx
similarity index 100%
rename from packages/core/src/components/Menu/MenuItemButton/__tests__/MenuItemButton.test.jsx
rename to packages/core/src/components/Menu/MenuItemButton/__tests__/MenuItemButton.test.tsx
diff --git a/packages/core/src/components/Menu/MenuItemButton/__tests__/__snapshots__/MenuItemButton.test.tsx.snap b/packages/core/src/components/Menu/MenuItemButton/__tests__/__snapshots__/MenuItemButton.test.tsx.snap
new file mode 100644
index 0000000000..44c4419f6b
--- /dev/null
+++ b/packages/core/src/components/Menu/MenuItemButton/__tests__/__snapshots__/MenuItemButton.test.tsx.snap
@@ -0,0 +1,143 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Snapshots > renders correctly when disabled 1`] = `
+<li
+  aria-current={false}
+  className="typography primary start singleLineEllipsis text text2Normal itemButton"
+  data-testid="menu-item-button"
+  role="menuitem"
+>
+  <button
+    aria-busy={false}
+    aria-disabled={true}
+    className="buttonComponent button sizeSmall kindPrimary colorPrimary disabled"
+    data-testid="button"
+    data-vibe="Button"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onMouseDown={[Function]}
+    onMouseUp={[Function]}
+    tabIndex={-1}
+    type="button"
+  >
+    <div
+      className="content"
+    >
+      my item
+    </div>
+  </button>
+</li>
+`;
+
+exports[`Snapshots > renders correctly when selected 1`] = `
+<li
+  aria-current={false}
+  className="typography primary start singleLineEllipsis text text2Normal itemButton"
+  data-testid="menu-item-button"
+  role="menuitem"
+>
+  <button
+    aria-busy={false}
+    aria-disabled={false}
+    className="buttonComponent button sizeSmall kindPrimary colorPrimary"
+    data-testid="button"
+    data-vibe="Button"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onMouseDown={[Function]}
+    onMouseUp={[Function]}
+    type="button"
+  >
+    <div
+      className="content"
+    >
+      my item
+    </div>
+  </button>
+</li>
+`;
+
+exports[`Snapshots > renders correctly with custom class name 1`] = `
+<li
+  aria-current={false}
+  className="typography primary start singleLineEllipsis text text2Normal itemButton dummy-class-name"
+  data-testid="menu-item-button"
+  role="menuitem"
+>
+  <button
+    aria-busy={false}
+    aria-disabled={false}
+    className="buttonComponent button sizeSmall kindPrimary colorPrimary"
+    data-testid="button"
+    data-vibe="Button"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onMouseDown={[Function]}
+    onMouseUp={[Function]}
+    type="button"
+  >
+    <div
+      className="content"
+    />
+  </button>
+</li>
+`;
+
+exports[`Snapshots > renders correctly with empty props 1`] = `
+<li
+  aria-current={false}
+  className="typography primary start singleLineEllipsis text text2Normal itemButton"
+  data-testid="menu-item-button"
+  role="menuitem"
+>
+  <button
+    aria-busy={false}
+    aria-disabled={false}
+    className="buttonComponent button sizeSmall kindPrimary colorPrimary"
+    data-testid="button"
+    data-vibe="Button"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onMouseDown={[Function]}
+    onMouseUp={[Function]}
+    type="button"
+  >
+    <div
+      className="content"
+    />
+  </button>
+</li>
+`;
+
+exports[`Snapshots > renders correctly with title and icon 1`] = `
+<li
+  aria-current={false}
+  className="typography primary start singleLineEllipsis text text2Normal itemButton"
+  data-testid="menu-item-button"
+  role="menuitem"
+>
+  <button
+    aria-busy={false}
+    aria-disabled={false}
+    className="buttonComponent button sizeSmall kindPrimary colorPrimary"
+    data-testid="button"
+    data-vibe="Button"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onMouseDown={[Function]}
+    onMouseUp={[Function]}
+    type="button"
+  >
+    <div
+      className="content"
+    >
+      my item
+    </div>
+  </button>
+</li>
+`;
diff --git a/packages/core/src/components/Menu/MenuTitle/MenuTitle.module.scss b/packages/core/src/components/Menu/MenuTitle/MenuTitle.module.scss
index a99f6c387e..2b26d635e1 100644
--- a/packages/core/src/components/Menu/MenuTitle/MenuTitle.module.scss
+++ b/packages/core/src/components/Menu/MenuTitle/MenuTitle.module.scss
@@ -7,7 +7,7 @@
 
 .titleCaption {
   color: var(--icon-color);
-  margin: var(--spacing-small) 0;
+  margin: var(--space-8) 0;
 }
 
 .titleCaptionCenter {
@@ -18,11 +18,11 @@
 
 .titleCaptionBottom,
 .titleCaptionTop {
-  padding-left: var(--spacing-small);
+  padding-inline-start: var(--space-8);
 }
 
 .titleCaptionBottom {
-  padding-bottom: var(--spacing-small);
+  padding-bottom: var(--space-8);
 }
 
 .titleCaptionCenter::before,
@@ -33,5 +33,5 @@
   height: 1px;
   font-size: 0;
   line-height: 0;
-  margin: 0 var(--spacing-small);
+  margin: 0 var(--space-8);
 }
diff --git a/packages/core/src/components/Menu/MenuTitle/MenuTitle.tsx b/packages/core/src/components/Menu/MenuTitle/MenuTitle.tsx
index 32af1eff8d..0a7b3c03a8 100644
--- a/packages/core/src/components/Menu/MenuTitle/MenuTitle.tsx
+++ b/packages/core/src/components/Menu/MenuTitle/MenuTitle.tsx
@@ -4,9 +4,8 @@ import { camelCase } from "es-toolkit";
 import { getStyle } from "../../../helpers/typesciptCssModulesHelper";
 import { ComponentDefaultTestId, getTestId } from "../../../tests/test-ids-utils";
 import { Text } from "@vibe/typography";
-import { MenuTitleCaptionPosition as MenuTitleCaptionPositionEnum } from "./MenuTitleConstants";
 import { type MenuTitleCaptionPosition } from "./MenuTitle.type";
-import { type VibeComponentProps, withStaticPropsWithoutForwardRef } from "../../../types";
+import { type VibeComponentProps } from "../../../types";
 import styles from "./MenuTitle.module.scss";
 
 export interface MenuTitleProps extends VibeComponentProps {
@@ -56,12 +55,4 @@ Object.assign(MenuTitle, {
   isMenuChild: true
 });
 
-interface MenuTitleStaticProps {
-  positions: typeof MenuTitleCaptionPositionEnum;
-  captionPositions: typeof MenuTitleCaptionPositionEnum;
-}
-
-export default withStaticPropsWithoutForwardRef<MenuTitleProps, MenuTitleStaticProps>(MenuTitle, {
-  positions: MenuTitleCaptionPositionEnum,
-  captionPositions: MenuTitleCaptionPositionEnum
-});
+export default MenuTitle;
diff --git a/packages/core/src/components/Menu/MenuTitle/MenuTitleConstants.ts b/packages/core/src/components/Menu/MenuTitle/MenuTitleConstants.ts
deleted file mode 100644
index a9c223f795..0000000000
--- a/packages/core/src/components/Menu/MenuTitle/MenuTitleConstants.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * @deprecated
- */
-export enum MenuTitleCaptionPosition {
-  TOP = "top",
-  BOTTOM = "bottom",
-  CENTER = "center"
-}
diff --git a/packages/core/src/components/MenuButton/MenuButton.module.scss b/packages/core/src/components/MenuButton/MenuButton.module.scss
index dfc7875d5b..cbe74da4b5 100644
--- a/packages/core/src/components/MenuButton/MenuButton.module.scss
+++ b/packages/core/src/components/MenuButton/MenuButton.module.scss
@@ -1,4 +1,4 @@
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 @import "../../styles/typography";
 @import "../../styles/states";
 
@@ -85,5 +85,5 @@
 }
 
 .innerText {
-  margin: 0 var(--spacing-small);
+  margin: 0 var(--space-8);
 }
diff --git a/packages/core/src/components/MenuButton/MenuButton.tsx b/packages/core/src/components/MenuButton/MenuButton.tsx
index 7ad50141c3..b0a74a59fa 100644
--- a/packages/core/src/components/MenuButton/MenuButton.tsx
+++ b/packages/core/src/components/MenuButton/MenuButton.tsx
@@ -3,28 +3,29 @@ import cx from "classnames";
 import { camelCase } from "es-toolkit";
 import { isForwardRef } from "react-is";
 import { Dialog, type DialogEvent, DialogContentContainer } from "@vibe/dialog";
-import { DialogPositionEnum, DialogTriggerEventEnum, DialogSizeEnum } from "@vibe/dialog";
-import { type DialogOffset, type DialogPosition, type DialogSize, type DialogTriggerEvent } from "@vibe/dialog";
+import {
+  type DialogOffset,
+  type DialogPosition,
+  type DialogSize,
+  type DialogStartingEdge,
+  type DialogTriggerEvent
+} from "@vibe/dialog";
 import { Tooltip, type TooltipProps } from "@vibe/tooltip";
 import useIsomorphicLayoutEffect from "../../hooks/ssr/useIsomorphicLayoutEffect";
 import useMergeRef from "../../hooks/useMergeRef";
-import { type ElementContent, type VibeComponentProps, withStaticProps } from "../../types";
-import {
-  MenuButtonComponentPosition as MenuButtonComponentPositionEnum,
-  MenuButtonSize as MenuButtonSizeEnum
-} from "./MenuButtonConstants";
+import { type ElementContent, type VibeComponentProps } from "../../types";
 import { type MenuButtonComponentPosition, type MenuButtonSize } from "./MenuButton.types";
+import { type MenuChild } from "../Menu/Menu/MenuConstants";
 import { NOOP } from "../../utils/function-utils";
 import { Menu } from "@vibe/icons";
 import { getStyle } from "../../helpers/typesciptCssModulesHelper";
 import { ComponentDefaultTestId, getTestId } from "../../tests/test-ids-utils";
-import { type MenuChild } from "../Menu/Menu/MenuConstants";
 import styles from "./MenuButton.module.scss";
 import { type TooltipPositions } from "@vibe/tooltip";
 import { ComponentVibeId } from "../../tests/constants";
 
 const MOVE_BY = { main: 8, secondary: 0 };
-const CLOSE_KEYS: DialogTriggerEventEnum[] = [Dialog.hideShowTriggers.ESCAPE_KEY, Dialog.hideShowTriggers.TAB_KEY];
+const CLOSE_KEYS: DialogTriggerEvent[] = ["esckey", "tab"];
 
 export interface MenuButtonProps extends VibeComponentProps {
   /**
@@ -58,7 +59,7 @@ export interface MenuButtonProps extends VibeComponentProps {
   /**
    * The label of the button for accessibility.
    */
-  ariaLabel?: string;
+  "aria-label"?: string;
   /**
    * Class name applied to the menu dialog wrapper.
    */
@@ -90,7 +91,7 @@ export interface MenuButtonProps extends VibeComponentProps {
   /**
    * The starting edge alignment of the menu.
    */
-  startingEdge?: string;
+  startingEdge?: DialogStartingEdge;
   /**
    * Callback fired when the menu is shown.
    */
@@ -162,7 +163,7 @@ export interface MenuButtonProps extends VibeComponentProps {
   /**
    * The ARIA control of the menu button for accessibility.
    */
-  ariaControls?: string;
+  "aria-controls"?: string;
 }
 
 const MenuButton = forwardRef(
@@ -178,12 +179,12 @@ const MenuButton = forwardRef(
       open = false,
       onClick = NOOP,
       zIndex = null,
-      ariaLabel = "Menu",
+      "aria-label": ariaLabel = "Menu",
       closeMenuOnItemClick,
       dialogOffset = MOVE_BY,
-      dialogPosition = Dialog.positions.BOTTOM_START,
+      dialogPosition = "bottom-start",
       dialogClassName,
-      dialogPaddingSize = DialogContentContainer.sizes.SMALL,
+      dialogPaddingSize = "small",
       dialogShowTriggerIgnoreClass,
       dialogHideTriggerIgnoreClass,
       onMenuHide = NOOP,
@@ -204,7 +205,7 @@ const MenuButton = forwardRef(
       showTooltipOnlyOnTriggerElement,
       "data-testid": dataTestId,
       closeDialogOnContentClick = false,
-      ariaControls
+      "aria-controls": ariaControls
     }: MenuButtonProps,
     ref: React.ForwardedRef<HTMLElement>
   ) => {
@@ -232,7 +233,7 @@ const MenuButton = forwardRef(
     const onMenuDidClose = useCallback(
       (event: React.KeyboardEvent) => {
         // TODO: check the functionality of the isEscapeKey since the event is not an actual KeyboardEVent but an object with propagate property only
-        const isCloseKey = CLOSE_KEYS.includes(event.key as DialogTriggerEventEnum);
+        const isCloseKey = CLOSE_KEYS.includes(event.key as DialogTriggerEvent);
         if (isCloseKey || closeMenuOnItemClick) {
           // @ts-ignore
           if (event.propagate) {
@@ -245,7 +246,7 @@ const MenuButton = forwardRef(
 
     const onDialogDidHide = useCallback(
       (event: DialogEvent, hideEvent: string) => {
-        handleMenuClose(isOpen && CLOSE_KEYS.includes(hideEvent as DialogTriggerEventEnum));
+        handleMenuClose(isOpen && CLOSE_KEYS.includes(hideEvent as DialogTriggerEvent));
       },
       [handleMenuClose, isOpen]
     );
@@ -256,28 +257,31 @@ const MenuButton = forwardRef(
     }, [setIsOpen, onMenuShow]);
 
     const [clonedChildren, hideTrigger] = useMemo(() => {
-      const triggers = new Set([
-        Dialog.hideShowTriggers.CLICK_OUTSIDE,
-        Dialog.hideShowTriggers.TAB_KEY,
-        Dialog.hideShowTriggers.ESCAPE_KEY
-      ]);
+      const triggers = new Set<DialogTriggerEvent>(["clickoutside", "tab", "esckey"]);
 
       if (closeDialogOnContentClick) {
-        triggers.add(Dialog.hideShowTriggers.CONTENT_CLICK);
-        triggers.add(Dialog.hideShowTriggers.ENTER);
+        triggers.add("onContentClick");
+        triggers.add("enter");
       }
 
       if (removeTabCloseTrigger) {
-        triggers.delete(Dialog.hideShowTriggers.TAB_KEY);
+        triggers.delete("tab");
       }
       const childrenArr = React.Children.toArray(children) as MenuChild[];
       const cloned = childrenArr.map(child => {
         if (!React.isValidElement(child)) return null;
 
-        const newProps: { focusOnMount?: boolean; onClose?: (event: React.KeyboardEvent) => void } = {};
+        const newProps: {
+          focusOnMount?: boolean;
+          focusItemIndexOnMount?: number;
+          onClose?: (event: React.KeyboardEvent) => void;
+        } = {};
         if (child.type && child.type.supportFocusOnMount) {
           newProps.focusOnMount = true;
-          triggers.delete(Dialog.hideShowTriggers.ESCAPE_KEY);
+          if (child.props.focusItemIndexOnMount === undefined) {
+            newProps.focusItemIndexOnMount = 0;
+          }
+          triggers.delete("esckey");
         }
 
         if (child.type && child.type.isMenu) {
@@ -292,7 +296,7 @@ const MenuButton = forwardRef(
     const content = useMemo(() => {
       if (clonedChildren.length === 0) return null;
       return (
-        <DialogContentContainer size={dialogPaddingSize} type={DialogContentContainer.types.POPOVER} role={null}>
+        <DialogContentContainer size={dialogPaddingSize} type="popover" role={null}>
           {clonedChildren}
         </DialogContentContainer>
       );
@@ -417,18 +421,4 @@ const MenuButton = forwardRef(
   }
 );
 
-interface MenuButtonStaticProps {
-  sizes: typeof MenuButtonSizeEnum;
-  paddingSizes: typeof DialogContentContainer.sizes;
-  dialogPositions: typeof DialogPositionEnum;
-  hideTriggers: typeof Dialog.hideShowTriggers;
-  componentPositions: typeof MenuButtonComponentPositionEnum;
-}
-
-export default withStaticProps<MenuButtonProps, MenuButtonStaticProps>(MenuButton, {
-  sizes: MenuButtonSizeEnum,
-  paddingSizes: DialogSizeEnum,
-  dialogPositions: DialogPositionEnum,
-  hideTriggers: DialogTriggerEventEnum,
-  componentPositions: MenuButtonComponentPositionEnum
-});
+export default MenuButton;
diff --git a/packages/core/src/components/MenuButton/MenuButtonConstants.ts b/packages/core/src/components/MenuButton/MenuButtonConstants.ts
deleted file mode 100644
index 14de22d5da..0000000000
--- a/packages/core/src/components/MenuButton/MenuButtonConstants.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * @deprecated
- */
-export enum MenuButtonSize {
-  XXS = "xxs",
-  XS = "xs",
-  SMALL = "small",
-  MEDIUM = "medium",
-  LARGE = "large"
-}
-
-/**
- * @deprecated
- */
-export enum MenuButtonComponentPosition {
-  START = "start",
-  END = "end"
-}
diff --git a/packages/core/src/components/MenuButton/__tests__/MenuButton.test.tsx b/packages/core/src/components/MenuButton/__tests__/MenuButton.test.tsx
index 2fba59fde2..b9938cac8d 100644
--- a/packages/core/src/components/MenuButton/__tests__/MenuButton.test.tsx
+++ b/packages/core/src/components/MenuButton/__tests__/MenuButton.test.tsx
@@ -128,7 +128,7 @@ describe("MenuButton", () => {
   describe("Click", () => {
     it("should show menu", async () => {
       const { getByLabelText } = render(
-        <MenuButton ariaLabel="Menu Button">
+        <MenuButton aria-label="Menu Button">
           <div>Menu</div>
         </MenuButton>
       );
@@ -150,7 +150,7 @@ describe("MenuButton", () => {
       "should $expected menu after clicking enter when closeMenuOnItemClick is $closeMenuOnItemClick",
       async ({ closeMenuOnItemClick }) => {
         const { getByLabelText } = render(
-          <MenuButton ariaLabel="Menu Button" closeMenuOnItemClick={closeMenuOnItemClick}>
+          <MenuButton aria-label="Menu Button" closeMenuOnItemClick={closeMenuOnItemClick}>
             <Menu>
               <MenuItem title="Menu Item" />
             </Menu>
diff --git a/packages/core/src/components/MenuButton/__tests__/__snapshots__/MenuButton.test.tsx.snap b/packages/core/src/components/MenuButton/__tests__/__snapshots__/MenuButton.test.tsx.snap
index ac97801cd8..ad845a815b 100644
--- a/packages/core/src/components/MenuButton/__tests__/__snapshots__/MenuButton.test.tsx.snap
+++ b/packages/core/src/components/MenuButton/__tests__/__snapshots__/MenuButton.test.tsx.snap
@@ -83,6 +83,9 @@ exports[`MenuButton > renders correctly with Button triggerElement 1`] = `
 <button
   aria-busy={false}
   aria-disabled={false}
+  aria-expanded={false}
+  aria-haspopup="true"
+  aria-label="Menu"
   className="button sizeMedium kindPrimary colorPrimary"
   data-testid="menu-button"
   data-vibe="Button"
diff --git a/packages/core/src/components/Modal/Modal/Modal.module.scss b/packages/core/src/components/Modal/Modal/Modal.module.scss
index 46c01170ea..6483378b2f 100644
--- a/packages/core/src/components/Modal/Modal/Modal.module.scss
+++ b/packages/core/src/components/Modal/Modal/Modal.module.scss
@@ -13,11 +13,21 @@ $full-view-margin: 40px;
   background-color: var(--backdrop-color);
 }
 
+// Resting centering transform for non-fullView modals.
+// Matches the framer-motion x:"-50%", y:"-50%" that was previously applied inline.
+.centerPop {
+  transform: translate(-50%, -50%);
+}
+
+.anchorPop {
+  transform: translate(-50%, -50%);
+}
+
 .modal {
-  --top-actions-margin-inline: var(--spacing-large);
-  --top-actions-margin-block: var(--spacing-large);
-  --top-actions-width: var(--spacing-xl);
-  --modal-inline-padding: var(--spacing-xl);
+  --top-actions-margin-inline: var(--space-24);
+  --top-actions-margin-block: var(--space-24);
+  --top-actions-width: var(--space-32);
+  --modal-inline-padding: var(--space-32);
 
   position: relative;
   top: 50%;
@@ -34,7 +44,7 @@ $full-view-margin: 40px;
   outline: none;
 
   &.withHeaderAction {
-    --top-actions-width: calc(var(--spacing-xl) * 2);
+    --top-actions-width: calc(var(--space-32) * 2);
   }
 
   &.sizeSmall {
@@ -53,7 +63,7 @@ $full-view-margin: 40px;
   }
 
   &.sizeFullView {
-    --top-actions-margin-inline: var(--spacing-xl);
+    --top-actions-margin-inline: var(--space-32);
     --modal-max-height: 100%;
     --modal-width: auto;
 
@@ -61,7 +71,7 @@ $full-view-margin: 40px;
     inset: 0;
     height: calc(100% - $full-view-margin);
 
-    margin-inline: var(--spacing-large);
+    margin-inline: var(--space-24);
     margin-block-start: $full-view-margin;
 
     border-end-start-radius: unset;
@@ -102,3 +112,143 @@ $full-view-margin: 40px;
     }
   }
 }
+
+// FROM state — must match 0% keyframes exactly to prevent flash on mount.
+.containerEnter {
+  .overlay {
+    opacity: 0;
+  }
+
+  .centerPop {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.8);
+  }
+
+  .anchorPop {
+    opacity: 0;
+    transform: translate(calc(-50% + var(--modal-start-x, 0px)), calc(-50% + var(--modal-start-y, 0px))) scale(0.8);
+  }
+
+  .fullView {
+    opacity: 0.3;
+    transform: translateY(30px);
+  }
+}
+
+.containerEnterActive {
+  .overlay {
+    opacity: 1;
+    transition: opacity 100ms cubic-bezier(0, 0, 0.4, 1);
+  }
+
+  .centerPop {
+    animation: centerPopIn 150ms cubic-bezier(0, 0, 0.4, 1) forwards;
+  }
+
+  .anchorPop {
+    animation: anchorPopIn 200ms cubic-bezier(0, 0, 0.4, 1) forwards;
+  }
+
+  .fullView {
+    animation: fullViewIn 250ms cubic-bezier(0, 0, 0.4, 1) forwards;
+  }
+}
+
+.containerExitActive {
+  .overlay {
+    opacity: 0;
+    transition: opacity 100ms cubic-bezier(0.6, 0, 1, 1);
+  }
+
+  .centerPop {
+    animation: centerPopOut 100ms cubic-bezier(0.6, 0, 1, 1) forwards;
+  }
+
+  .anchorPop {
+    animation: anchorPopOut 150ms cubic-bezier(0.6, 0, 1, 1) forwards;
+  }
+
+  .fullView {
+    animation: fullViewOut 100ms cubic-bezier(0.6, 0, 1, 1) forwards;
+  }
+}
+
+@keyframes centerPopIn {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.8);
+  }
+
+  50%,
+  100% {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+@keyframes centerPopOut {
+  0%,
+  50% {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.8);
+  }
+}
+
+@keyframes anchorPopIn {
+  0%,
+  40% {
+    opacity: 0;
+    transform: translate(calc(-50% + var(--modal-start-x, 0px)), calc(-50% + var(--modal-start-y, 0px))) scale(0.8);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+@keyframes anchorPopOut {
+  0% {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+
+  60%,
+  100% {
+    opacity: 0;
+    transform: translate(calc(-50% + var(--modal-start-x, 0px)), calc(-50% + var(--modal-start-y, 0px))) scale(0.8);
+  }
+}
+
+@keyframes fullViewIn {
+  0% {
+    opacity: 0.3;
+    transform: translateY(30px);
+  }
+
+  33% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fullViewOut {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+}
diff --git a/packages/core/src/components/Modal/Modal/Modal.tsx b/packages/core/src/components/Modal/Modal/Modal.tsx
index d0ed022889..2725d15e6a 100644
--- a/packages/core/src/components/Modal/Modal/Modal.tsx
+++ b/packages/core/src/components/Modal/Modal/Modal.tsx
@@ -2,7 +2,7 @@ import React, { forwardRef, useCallback, useMemo, useRef, useState } from "react
 import cx from "classnames";
 import { RemoveScroll } from "react-remove-scroll";
 import FocusLock from "react-focus-lock";
-import { motion, AnimatePresence } from "framer-motion";
+import { CSSTransition } from "react-transition-group";
 import { getTestId } from "../../../tests/test-ids-utils";
 import { ComponentDefaultTestId, ComponentVibeId } from "../../../tests/constants";
 import styles from "./Modal.module.scss";
@@ -13,12 +13,6 @@ import { camelCase } from "es-toolkit";
 import { ModalProvider } from "../context/ModalContext";
 import { type ModalProviderValue } from "../context/ModalContext.types";
 import { keyCodes } from "../../../constants";
-import {
-  modalAnimationAnchorPopVariants,
-  modalAnimationCenterPopVariants,
-  modalAnimationFullViewVariants,
-  modalAnimationOverlayVariants
-} from "../utils/animationVariants";
 import { createPortal } from "react-dom";
 import usePortalTarget from "../hooks/usePortalTarget/usePortalTarget";
 import useFocusEscapeTargets from "../hooks/useFocusEscapeTargets/useFocusEscapeTargets";
@@ -104,12 +98,15 @@ const Modal = forwardRef(
       [alertModal, onClose, show]
     );
 
-    const modalAnimationVariants =
-      size === "full-view"
-        ? modalAnimationFullViewVariants
-        : anchorElementRef?.current
-        ? modalAnimationAnchorPopVariants
-        : modalAnimationCenterPopVariants;
+    const animationType = size === "full-view" ? "fullView" : anchorElementRef?.current ? "anchorPop" : "centerPop";
+
+    const anchorRect = anchorElementRef?.current?.getBoundingClientRect();
+    const anchorVars = anchorRect
+      ? ({
+          "--modal-start-x": `${anchorRect.left + anchorRect.width / 2}px`,
+          "--modal-start-y": `${anchorRect.top + anchorRect.height / 2}px`
+        } as React.CSSProperties)
+      : {};
 
     const zIndexStyle = zIndex ? ({ "--monday-modal-z-index": zIndex } as React.CSSProperties) : {};
 
@@ -140,64 +137,63 @@ const Modal = forwardRef(
     );
 
     return (
-      <AnimatePresence>
-        {show && (
-          <LayerProvider layerRef={containerRef}>
-            <ModalProvider value={contextValue}>
-              {createPortal(
-                <FocusLockComponent returnFocus autoFocus={autoFocus} whiteList={handleFocusLockWhiteList}>
-                  <div ref={containerRef} className={styles.container} style={zIndexStyle}>
-                    <motion.div
-                      variants={modalAnimationOverlayVariants}
-                      initial="initial"
-                      animate="enter"
-                      exit="exit"
-                      data-testid={getTestId(ComponentDefaultTestId.MODAL_NEXT_OVERLAY, id)}
-                      className={styles.overlay}
-                      onClick={onBackdropClick}
-                      aria-hidden
-                    />
-                    <RemoveScroll forwardProps ref={modalMergedRef}>
-                      <motion.div
-                        variants={modalAnimationVariants}
-                        initial="exit"
-                        animate="enter"
-                        exit="exit"
-                        custom={anchorElementRef}
-                        className={cx(
-                          styles.modal,
-                          getStyle(styles, camelCase("size-" + size)),
-                          { [styles.withHeaderAction]: !!renderHeaderAction },
-                          className
-                        )}
-                        id={id}
-                        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_NEXT, id)}
-                        data-vibe={ComponentVibeId.MODAL}
-                        role="dialog"
-                        aria-modal
-                        aria-labelledby={ariaLabelledby || titleId}
-                        aria-describedby={ariaDescribedby || descriptionId}
-                        style={style}
-                        onKeyDown={onModalKeyDown}
-                        tabIndex={-1}
-                      >
-                        {children}
-                        <ModalTopActions
-                          renderAction={renderHeaderAction}
-                          theme={closeButtonTheme}
-                          closeButtonAriaLabel={closeButtonAriaLabel}
-                          onClose={onClose}
-                        />
-                      </motion.div>
-                    </RemoveScroll>
-                  </div>
-                </FocusLockComponent>,
-                portalTargetElement
-              )}
-            </ModalProvider>
-          </LayerProvider>
-        )}
-      </AnimatePresence>
+      <CSSTransition
+        in={show}
+        nodeRef={containerRef}
+        timeout={{ enter: 250, exit: 150 }}
+        unmountOnExit
+        classNames={{
+          enter: styles.containerEnter,
+          enterActive: styles.containerEnterActive,
+          exitActive: styles.containerExitActive
+        }}
+      >
+        <LayerProvider layerRef={containerRef}>
+          <ModalProvider value={contextValue}>
+            {createPortal(
+              <FocusLockComponent returnFocus autoFocus={autoFocus} whiteList={handleFocusLockWhiteList}>
+                <div ref={containerRef} className={styles.container} style={zIndexStyle} onKeyDown={onModalKeyDown}>
+                  <div
+                    data-testid={getTestId(ComponentDefaultTestId.MODAL_OVERLAY, id)}
+                    className={styles.overlay}
+                    onClick={onBackdropClick}
+                    aria-hidden
+                  />
+                  <RemoveScroll forwardProps ref={modalMergedRef}>
+                    <div
+                      className={cx(
+                        styles.modal,
+                        styles[animationType],
+                        getStyle(styles, camelCase("size-" + size)),
+                        { [styles.withHeaderAction]: !!renderHeaderAction },
+                        className
+                      )}
+                      id={id}
+                      data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL, id)}
+                      data-vibe={ComponentVibeId.MODAL}
+                      role="dialog"
+                      aria-modal
+                      aria-labelledby={ariaLabelledby || titleId}
+                      aria-describedby={ariaDescribedby || descriptionId}
+                      style={{ ...style, ...anchorVars }}
+                      tabIndex={-1}
+                    >
+                      {children}
+                      <ModalTopActions
+                        renderAction={renderHeaderAction}
+                        theme={closeButtonTheme}
+                        closeButtonAriaLabel={closeButtonAriaLabel}
+                        onClose={onClose}
+                      />
+                    </div>
+                  </RemoveScroll>
+                </div>
+              </FocusLockComponent>,
+              portalTargetElement
+            )}
+          </ModalProvider>
+        </LayerProvider>
+      </CSSTransition>
     );
   }
 );
diff --git a/packages/core/src/components/Modal/Modal/__tests__/Modal.test.tsx b/packages/core/src/components/Modal/Modal/__tests__/Modal.test.tsx
index fc90cf26f1..7bef2d94d1 100644
--- a/packages/core/src/components/Modal/Modal/__tests__/Modal.test.tsx
+++ b/packages/core/src/components/Modal/Modal/__tests__/Modal.test.tsx
@@ -6,14 +6,20 @@ import Modal from "../Modal";
 import ModalContent from "../../ModalContent/ModalContent";
 import ModalHeader from "../../ModalHeader/ModalHeader";
 
-vi.mock("framer-motion", async () => {
-  // eslint-disable-next-line @typescript-eslint/consistent-type-imports
-  const actual = await vi.importActual<typeof import("framer-motion")>("framer-motion");
-  return {
-    ...actual,
-    AnimatePresence: ({ children }: { children: React.ReactNode }) => <>{children}</>
-  };
-});
+vi.mock("react-transition-group", () => ({
+  CSSTransition: ({
+    in: inProp,
+    children,
+    unmountOnExit
+  }: {
+    in?: boolean;
+    children: React.ReactNode;
+    unmountOnExit?: boolean;
+  }) => {
+    if (!inProp && unmountOnExit) return null;
+    return <>{children}</>;
+  }
+}));
 
 describe("Modal", () => {
   const id = "modal-id";
diff --git a/packages/core/src/components/Modal/ModalContent/ModalContent.tsx b/packages/core/src/components/Modal/ModalContent/ModalContent.tsx
index 4eb916731b..5f48043af3 100644
--- a/packages/core/src/components/Modal/ModalContent/ModalContent.tsx
+++ b/packages/core/src/components/Modal/ModalContent/ModalContent.tsx
@@ -15,7 +15,7 @@ const ModalContent = forwardRef(
         ref={ref}
         className={className}
         id={id}
-        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_NEXT_CONTENT, id)}
+        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_CONTENT, id)}
         data-autofocus-inside={autoFocus}
       >
         {children}
diff --git a/packages/core/src/components/Modal/ModalHeader/ModalHeader.module.scss b/packages/core/src/components/Modal/ModalHeader/ModalHeader.module.scss
index 2da14a609b..412da40094 100644
--- a/packages/core/src/components/Modal/ModalHeader/ModalHeader.module.scss
+++ b/packages/core/src/components/Modal/ModalHeader/ModalHeader.module.scss
@@ -8,7 +8,7 @@
 
   .descriptionIcon {
     flex-shrink: 0;
-    margin-inline-end: var(--spacing-xs);
+    margin-inline-end: var(--space-4);
     color: var(--icon-color);
   }
 }
diff --git a/packages/core/src/components/Modal/ModalHeader/ModalHeader.tsx b/packages/core/src/components/Modal/ModalHeader/ModalHeader.tsx
index 7d322ffde4..3fdcf9aacf 100644
--- a/packages/core/src/components/Modal/ModalHeader/ModalHeader.tsx
+++ b/packages/core/src/components/Modal/ModalHeader/ModalHeader.tsx
@@ -33,7 +33,7 @@ const ModalHeader = forwardRef(
         ref={ref}
         className={cx(styles.header, className)}
         id={id}
-        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_NEXT_HEADER, id)}
+        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_HEADER, id)}
       >
         {typeof title === "string" ? (
           <Heading id={titleId} align="inherit" type="h2" weight="medium" maxLines={2} className={styles.title}>
diff --git a/packages/core/src/components/Modal/ModalMedia/ModalMedia.tsx b/packages/core/src/components/Modal/ModalMedia/ModalMedia.tsx
index 2bbd4a3f3e..490e3ae234 100644
--- a/packages/core/src/components/Modal/ModalMedia/ModalMedia.tsx
+++ b/packages/core/src/components/Modal/ModalMedia/ModalMedia.tsx
@@ -13,7 +13,7 @@ const ModalMedia = forwardRef(
     return (
       <Flex
         id={id}
-        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_NEXT_MEDIA, id)}
+        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_MEDIA, id)}
         justify="center"
         align="stretch"
         ref={ref}
diff --git a/packages/core/src/components/Modal/ModalTopActions/ModalTopActions.module.scss b/packages/core/src/components/Modal/ModalTopActions/ModalTopActions.module.scss
index d465e8ab29..8066d69cc0 100644
--- a/packages/core/src/components/Modal/ModalTopActions/ModalTopActions.module.scss
+++ b/packages/core/src/components/Modal/ModalTopActions/ModalTopActions.module.scss
@@ -2,6 +2,6 @@
   display: flex;
   align-items: center;
   position: absolute;
-  right: var(--top-actions-margin-inline);
+  inset-inline-end: var(--top-actions-margin-inline);
   top: var(--top-actions-margin-block);
 }
diff --git a/packages/core/src/components/Modal/ModalTopActions/ModalTopActions.tsx b/packages/core/src/components/Modal/ModalTopActions/ModalTopActions.tsx
index 8bc1ee5af2..5b6a6d8ec1 100644
--- a/packages/core/src/components/Modal/ModalTopActions/ModalTopActions.tsx
+++ b/packages/core/src/components/Modal/ModalTopActions/ModalTopActions.tsx
@@ -21,13 +21,13 @@ const ModalTopActions = ({ renderAction, theme, closeButtonAriaLabel, onClose }:
     <div className={styles.actions} data-no-autofocus={true}>
       {typeof renderAction === "function" ? renderAction(buttonColor) : renderAction}
       <IconButton
-        data-testid={ComponentDefaultTestId.MODAL_NEXT_CLOSE_BUTTON}
+        data-testid={ComponentDefaultTestId.MODAL_CLOSE_BUTTON}
         icon={CloseMedium}
         onClick={onClose}
         size="small"
         kind="tertiary"
         color={buttonColor}
-        ariaLabel={closeButtonAriaLabel}
+        aria-label={closeButtonAriaLabel}
       />
     </div>
   );
diff --git a/packages/core/src/components/Modal/ModalTopActions/__tests__/ModalTopActions.test.tsx b/packages/core/src/components/Modal/ModalTopActions/__tests__/ModalTopActions.test.tsx
index 35f8ecdf54..876805f907 100644
--- a/packages/core/src/components/Modal/ModalTopActions/__tests__/ModalTopActions.test.tsx
+++ b/packages/core/src/components/Modal/ModalTopActions/__tests__/ModalTopActions.test.tsx
@@ -46,9 +46,7 @@ describe("ModalTopActions", () => {
   });
 
   it("renders the action button using the renderAction prop directly", () => {
-    const renderAction = (
-      <IconButton data-testid="extra-action" icon={FeedbackIcon} color={IconButton.colors.ON_PRIMARY_COLOR} />
-    );
+    const renderAction = <IconButton data-testid="extra-action" icon={FeedbackIcon} color="on-primary-color" />;
     const { getByTestId } = render(<ModalTopActions renderAction={renderAction} />);
 
     expect(within(getByTestId("extra-action")).getByTestId("icon")).toBeInTheDocument();
diff --git a/packages/core/src/components/Modal/footers/ModalFooter/ModalFooter.module.scss b/packages/core/src/components/Modal/footers/ModalFooter/ModalFooter.module.scss
index 081864ab77..6d6e19c679 100644
--- a/packages/core/src/components/Modal/footers/ModalFooter/ModalFooter.module.scss
+++ b/packages/core/src/components/Modal/footers/ModalFooter/ModalFooter.module.scss
@@ -2,11 +2,11 @@
   order: 2;
 
   &:only-child {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
 }
 
 .secondary {
   order: 1;
-  margin-left: auto;
+  margin-inline-start: auto;
 }
diff --git a/packages/core/src/components/Modal/footers/ModalFooter/ModalFooter.tsx b/packages/core/src/components/Modal/footers/ModalFooter/ModalFooter.tsx
index 436d587ea3..7d83cca77b 100644
--- a/packages/core/src/components/Modal/footers/ModalFooter/ModalFooter.tsx
+++ b/packages/core/src/components/Modal/footers/ModalFooter/ModalFooter.tsx
@@ -19,7 +19,7 @@ const ModalFooter = forwardRef(
         ref={ref}
         className={className}
         id={id}
-        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_NEXT_FOOTER, id)}
+        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_FOOTER, id)}
         primaryButton={primary}
         secondaryButton={secondary}
         renderAction={renderSideAction}
diff --git a/packages/core/src/components/Modal/footers/ModalFooterBase/ModalFooterBase.module.scss b/packages/core/src/components/Modal/footers/ModalFooterBase/ModalFooterBase.module.scss
index ee95079884..36b267a824 100644
--- a/packages/core/src/components/Modal/footers/ModalFooterBase/ModalFooterBase.module.scss
+++ b/packages/core/src/components/Modal/footers/ModalFooterBase/ModalFooterBase.module.scss
@@ -1,7 +1,7 @@
 .footer {
   position: relative;
   width: 100%;
-  padding: 20px var(--spacing-large);
+  padding: 20px var(--space-24);
   flex-shrink: 0;
   background-color: var(--primary-background-color);
 }
diff --git a/packages/core/src/components/Modal/footers/ModalFooterWizard/ModalFooterWizard.tsx b/packages/core/src/components/Modal/footers/ModalFooterWizard/ModalFooterWizard.tsx
index e8bcf14cb4..29f19a04af 100644
--- a/packages/core/src/components/Modal/footers/ModalFooterWizard/ModalFooterWizard.tsx
+++ b/packages/core/src/components/Modal/footers/ModalFooterWizard/ModalFooterWizard.tsx
@@ -38,7 +38,7 @@ const ModalFooterWizard = forwardRef(
         ref={ref}
         className={className}
         id={id}
-        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_NEXT_FOOTER, id)}
+        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_FOOTER, id)}
         primaryButton={primary}
         secondaryButton={secondary}
         renderAction={steps}
diff --git a/packages/core/src/components/Modal/layouts/ModalBasicLayout/ModalBasicLayout.module.scss b/packages/core/src/components/Modal/layouts/ModalBasicLayout/ModalBasicLayout.module.scss
index 220e9daed3..ca59827974 100644
--- a/packages/core/src/components/Modal/layouts/ModalBasicLayout/ModalBasicLayout.module.scss
+++ b/packages/core/src/components/Modal/layouts/ModalBasicLayout/ModalBasicLayout.module.scss
@@ -5,8 +5,8 @@
 
   .header {
     width: 100%;
-    margin-block: var(--spacing-xl) var(--spacing-large);
-    padding-inline-end: calc(var(--top-actions-margin-inline) + var(--top-actions-width) + var(--spacing-medium));
+    margin-block: var(--space-32) var(--space-24);
+    padding-inline-end: calc(var(--top-actions-margin-inline) + var(--top-actions-width) + var(--space-16));
     padding-inline-start: var(--modal-inline-padding);
   }
 
@@ -21,6 +21,6 @@
   }
 
   .content {
-    padding-block-end: var(--spacing-xl);
+    padding-block-end: var(--space-32);
   }
 }
diff --git a/packages/core/src/components/Modal/layouts/ModalBasicLayout/ModalBasicLayout.tsx b/packages/core/src/components/Modal/layouts/ModalBasicLayout/ModalBasicLayout.tsx
index 7f83ab3c7a..c4cb5828cc 100644
--- a/packages/core/src/components/Modal/layouts/ModalBasicLayout/ModalBasicLayout.tsx
+++ b/packages/core/src/components/Modal/layouts/ModalBasicLayout/ModalBasicLayout.tsx
@@ -26,7 +26,7 @@ const ModalBasicLayout = forwardRef(
           ref={ref}
           className={cx(styles.layout, className)}
           id={id}
-          data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_NEXT_BASIC_LAYOUT, id)}
+          data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_BASIC_LAYOUT, id)}
         >
           <div className={styles.header}>{header}</div>
           <Divider className={cx(styles.divider, { [styles.showDivider]: isContentScrolled })} withoutMargin />
diff --git a/packages/core/src/components/Modal/layouts/ModalLayoutScrollableContent.module.scss b/packages/core/src/components/Modal/layouts/ModalLayoutScrollableContent.module.scss
index b2206322d5..ef7fc3e69c 100644
--- a/packages/core/src/components/Modal/layouts/ModalLayoutScrollableContent.module.scss
+++ b/packages/core/src/components/Modal/layouts/ModalLayoutScrollableContent.module.scss
@@ -1,4 +1,4 @@
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 
 .content {
   width: 100%;
diff --git a/packages/core/src/components/Modal/layouts/ModalMediaLayout/ModalMediaLayout.module.scss b/packages/core/src/components/Modal/layouts/ModalMediaLayout/ModalMediaLayout.module.scss
index 80609ce63f..8b59eaed79 100644
--- a/packages/core/src/components/Modal/layouts/ModalMediaLayout/ModalMediaLayout.module.scss
+++ b/packages/core/src/components/Modal/layouts/ModalMediaLayout/ModalMediaLayout.module.scss
@@ -16,7 +16,7 @@
   .header {
     width: 100%;
     text-align: center;
-    margin-block: var(--spacing-xl) var(--spacing-small);
+    margin-block: var(--space-32) var(--space-8);
     padding-inline: var(--modal-inline-padding);
   }
 
@@ -26,7 +26,7 @@
     flex: 1;
     align-self: flex-start;
     padding-inline: var(--modal-inline-padding);
-    padding-block-end: var(--spacing-large);
+    padding-block-end: var(--space-24);
     text-align: center;
     overflow: hidden;
   }
diff --git a/packages/core/src/components/Modal/layouts/ModalMediaLayout/ModalMediaLayout.tsx b/packages/core/src/components/Modal/layouts/ModalMediaLayout/ModalMediaLayout.tsx
index 4f470b2bf2..b9f599f383 100644
--- a/packages/core/src/components/Modal/layouts/ModalMediaLayout/ModalMediaLayout.tsx
+++ b/packages/core/src/components/Modal/layouts/ModalMediaLayout/ModalMediaLayout.tsx
@@ -20,7 +20,7 @@ const ModalMediaLayout = forwardRef(
         align="start"
         className={cx(styles.layout, className)}
         id={id}
-        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_NEXT_MEDIA_LAYOUT, id)}
+        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_MEDIA_LAYOUT, id)}
       >
         <div className={styles.media}>{media}</div>
         <div className={styles.header}>{header}</div>
diff --git a/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/ModalSideBySideLayout.module.scss b/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/ModalSideBySideLayout.module.scss
index 90114cf2a7..5a1e0a33a9 100644
--- a/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/ModalSideBySideLayout.module.scss
+++ b/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/ModalSideBySideLayout.module.scss
@@ -8,7 +8,7 @@
 
   .header {
     width: 100%;
-    margin-block: var(--spacing-xl) var(--spacing-large);
+    margin-block: var(--space-32) var(--space-24);
     padding-inline: var(--modal-inline-padding);
     grid-column: 1 / 2;
     grid-row: 1;
@@ -17,7 +17,7 @@
   .content {
     grid-column: 1 / 2;
     grid-row: 2;
-    padding-block-end: var(--spacing-xl);
+    padding-block-end: var(--space-32);
   }
 
   .media {
diff --git a/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/ModalSideBySideLayout.tsx b/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/ModalSideBySideLayout.tsx
index 824f7991c8..6702c5b480 100644
--- a/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/ModalSideBySideLayout.tsx
+++ b/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/ModalSideBySideLayout.tsx
@@ -19,7 +19,7 @@ const ModalSideBySideLayout = forwardRef(
           ref={ref}
           className={cx(styles.layout, className)}
           id={id}
-          data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_NEXT_SIDE_BY_SIDE_LAYOUT, id)}
+          data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_SIDE_BY_SIDE_LAYOUT, id)}
         >
           <div className={styles.header}>{header}</div>
           <ModalLayoutScrollableContent className={styles.content}>{content}</ModalLayoutScrollableContent>
diff --git a/packages/core/src/components/Modal/utils/animationVariants.ts b/packages/core/src/components/Modal/utils/animationVariants.ts
deleted file mode 100644
index d0f5a3809b..0000000000
--- a/packages/core/src/components/Modal/utils/animationVariants.ts
+++ /dev/null
@@ -1,131 +0,0 @@
-import { type Variants } from "framer-motion";
-import { type RefObject } from "react";
-
-const enterEase = [0.0, 0.0, 0.4, 1.0];
-const exitEase = [0.6, 0.0, 1.0, 1.0];
-
-export const modalAnimationOverlayVariants: Variants = {
-  initial: {
-    opacity: 0
-  },
-  enter: {
-    opacity: 1,
-    transition: {
-      duration: 0.1,
-      ease: enterEase
-    }
-  },
-  exit: {
-    opacity: 0,
-    transition: {
-      duration: 0.1,
-      ease: exitEase
-    }
-  }
-};
-
-export const modalAnimationCenterPopVariants: Variants = {
-  initial: {
-    opacity: 1,
-    scale: 1,
-    x: "-50%",
-    y: "-50%"
-  },
-  enter: {
-    opacity: [0, 1, 1],
-    scale: [0.8, 1, 1],
-    x: "-50%",
-    y: "-50%",
-    transition: {
-      duration: 0.15,
-      ease: enterEase,
-      times: [0, 0.5, 1]
-    }
-  },
-  exit: {
-    opacity: [1, 1, 0],
-    scale: [1, 1, 0.8],
-    x: "-50%",
-    y: "-50%",
-    transition: {
-      duration: 0.1,
-      ease: exitEase,
-      times: [0, 0.5, 1]
-    }
-  }
-};
-
-export const modalAnimationAnchorPopVariants: Variants = {
-  initial: (anchorElementRef: RefObject<HTMLElement>) => {
-    const anchorRect = anchorElementRef.current.getBoundingClientRect();
-    const anchorCenterX = anchorRect.left + anchorRect.width / 2;
-    const anchorCenterY = anchorRect.top + anchorRect.height / 2;
-
-    const x = `calc(-50% + ${anchorCenterX}px)`;
-    const y = `calc(-50% + ${anchorCenterY}px)`;
-
-    return {
-      opacity: 0,
-      scale: 0.8,
-      top: "50%",
-      left: "50%",
-      x,
-      y
-    };
-  },
-  enter: {
-    opacity: [0, 0, 1],
-    scale: [0.8, 0.8, 1],
-    top: "50%",
-    left: "50%",
-    x: "-50%",
-    y: "-50%",
-    transition: {
-      duration: 0.2,
-      ease: enterEase,
-      times: [0, 0.4, 1]
-    }
-  },
-  exit: (anchorElementRef: RefObject<HTMLElement>) => {
-    const anchorRect = anchorElementRef.current.getBoundingClientRect();
-    const anchorCenterX = anchorRect.left + anchorRect.width / 2;
-    const anchorCenterY = anchorRect.top + anchorRect.height / 2;
-
-    const x = `calc(-50% + ${anchorCenterX}px)`;
-    const y = `calc(-50% + ${anchorCenterY}px)`;
-
-    return {
-      opacity: [1, 0, 0],
-      scale: [1, 0.8, 0.8],
-      top: 0,
-      left: 0,
-      x,
-      y,
-      transition: {
-        duration: 0.15,
-        ease: exitEase,
-        times: [0, 0.6, 1]
-      }
-    };
-  }
-};
-
-export const modalAnimationFullViewVariants: Variants = {
-  enter: {
-    opacity: [0.3, 1, 1],
-    y: [30, 0],
-    transition: {
-      duration: 0.25,
-      ease: enterEase,
-      times: [0, 0.33, 1]
-    }
-  },
-  exit: {
-    opacity: 0,
-    y: 30,
-    transition: {
-      duration: 0.1,
-      ease: exitEase
-    }
-  }
-};
diff --git a/packages/core/src/components/MultiStepIndicator/MultiStepConstants.ts b/packages/core/src/components/MultiStepIndicator/MultiStepConstants.ts
deleted file mode 100644
index 0a05516661..0000000000
--- a/packages/core/src/components/MultiStepIndicator/MultiStepConstants.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * @deprecated
- */
-export enum MultiStepType {
-  PRIMARY = "primary",
-  SUCCESS = "success",
-  DANGER = "danger",
-  DARK = "dark"
-}
-
-/**
- * @deprecated
- */
-export enum StepStatus {
-  PENDING = "pending",
-  ACTIVE = "active",
-  FULFILLED = "fulfilled"
-}
-
-/**
- * @deprecated
- */
-export enum TextPlacement {
-  HORIZONTAL = "horizontal",
-  VERTICAL = "vertical"
-}
-
-/**
- * @deprecated
- */
-export enum Size {
-  REGULAR = "regular",
-  COMPACT = "compact"
-}
diff --git a/packages/core/src/components/MultiStepIndicator/MultiStepIndicator.module.scss b/packages/core/src/components/MultiStepIndicator/MultiStepIndicator.module.scss
index f7ff081bd8..e1f9128bba 100644
--- a/packages/core/src/components/MultiStepIndicator/MultiStepIndicator.module.scss
+++ b/packages/core/src/components/MultiStepIndicator/MultiStepIndicator.module.scss
@@ -10,8 +10,8 @@
     &.compact {
       max-width: 40px;
       min-width: 16px;
-      margin-inline-start: var(--spacing-small);
-      margin-inline-end: var(--spacing-small);
+      margin-inline-start: var(--space-8);
+      margin-inline-end: var(--space-8);
     }
   }
 }
diff --git a/packages/core/src/components/MultiStepIndicator/MultiStepIndicator.tsx b/packages/core/src/components/MultiStepIndicator/MultiStepIndicator.tsx
index 19f304d3f4..11021c76da 100644
--- a/packages/core/src/components/MultiStepIndicator/MultiStepIndicator.tsx
+++ b/packages/core/src/components/MultiStepIndicator/MultiStepIndicator.tsx
@@ -5,16 +5,10 @@ import { type SubIcon } from "@vibe/icon";
 import Divider from "../../components/Divider/Divider";
 import { NOOP } from "../../utils/function-utils";
 import StepIndicator from "./components/StepIndicator/StepIndicator";
-import {
-  MultiStepType as MultiStepTypeEnum,
-  Size as SizeEnum,
-  StepStatus as StepStatusEnum,
-  TextPlacement as TextPlacementEnum
-} from "./MultiStepConstants";
 import { type MultiStepType, type MultiStepSize, type TextPlacement, type Step } from "./MultiStep.types";
 import { getTestId } from "../../tests/test-ids-utils";
 import { ComponentDefaultTestId } from "../../tests/constants";
-import { type VibeComponentProps, withStaticProps } from "../../types";
+import { type VibeComponentProps } from "../../types";
 import styles from "./MultiStepIndicator.module.scss";
 
 export interface MultiStepIndicatorProps extends VibeComponentProps {
@@ -168,16 +162,4 @@ const MultiStepIndicator = forwardRef(
   }
 );
 
-interface MultiStepIndicatorStaticProps {
-  types: typeof MultiStepTypeEnum;
-  stepStatuses: typeof StepStatusEnum;
-  textPlacements: typeof TextPlacementEnum;
-  sizes: typeof SizeEnum;
-}
-
-export default withStaticProps<MultiStepIndicatorProps, MultiStepIndicatorStaticProps>(MultiStepIndicator, {
-  types: MultiStepTypeEnum,
-  stepStatuses: StepStatusEnum,
-  textPlacements: TextPlacementEnum,
-  sizes: SizeEnum
-});
+export default MultiStepIndicator;
diff --git a/packages/core/src/components/MultiStepIndicator/__tests__/__snapshots__/MultiStepIndicator.snapshot.test.tsx.snap b/packages/core/src/components/MultiStepIndicator/__tests__/__snapshots__/MultiStepIndicator.snapshot.test.tsx.snap
index cf4af803b7..5738eeb8ef 100644
--- a/packages/core/src/components/MultiStepIndicator/__tests__/__snapshots__/MultiStepIndicator.snapshot.test.tsx.snap
+++ b/packages/core/src/components/MultiStepIndicator/__tests__/__snapshots__/MultiStepIndicator.snapshot.test.tsx.snap
@@ -6,6 +6,7 @@ exports[`MultiStepIndicator renders correctly > with className 1`] = `
   data-testid="multi-step-indicator"
 >
   <li
+    aria-label="Step 1: Title - Subtitle, status: fulfilled"
     className="clickable indicator typePrimary statusFulfilled sizeRegular clickable disableTextSelection"
     data-testid="step-indicator"
     onClick={[Function]}
@@ -80,6 +81,7 @@ exports[`MultiStepIndicator renders correctly > with className 1`] = `
     data-vibe="Divider"
   />
   <li
+    aria-label="Step 2: Active - Active Subtitle, status: active"
     className="clickable indicator typePrimary statusActive sizeRegular clickable disableTextSelection"
     data-testid="step-indicator"
     onClick={[Function]}
@@ -138,6 +140,7 @@ exports[`MultiStepIndicator renders correctly > with className 1`] = `
     data-vibe="Divider"
   />
   <li
+    aria-label="Step 3: Pending - Pending Subtitle, status: pending"
     className="clickable indicator typePrimary statusPending sizeRegular clickable disableTextSelection"
     data-testid="step-indicator"
     onClick={[Function]}
@@ -199,6 +202,7 @@ exports[`MultiStepIndicator renders correctly > with dividerComponentClassName 1
   data-testid="multi-step-indicator"
 >
   <li
+    aria-label="Step 1: Title - Subtitle, status: fulfilled"
     className="clickable indicator typePrimary statusFulfilled sizeRegular clickable disableTextSelection"
     data-testid="step-indicator"
     onClick={[Function]}
@@ -273,6 +277,7 @@ exports[`MultiStepIndicator renders correctly > with dividerComponentClassName 1
     data-vibe="Divider"
   />
   <li
+    aria-label="Step 2: Active - Active Subtitle, status: active"
     className="clickable indicator typePrimary statusActive sizeRegular clickable disableTextSelection"
     data-testid="step-indicator"
     onClick={[Function]}
@@ -331,6 +336,7 @@ exports[`MultiStepIndicator renders correctly > with dividerComponentClassName 1
     data-vibe="Divider"
   />
   <li
+    aria-label="Step 3: Pending - Pending Subtitle, status: pending"
     className="clickable indicator typePrimary statusPending sizeRegular clickable disableTextSelection"
     data-testid="step-indicator"
     onClick={[Function]}
@@ -399,6 +405,7 @@ exports[`MultiStepIndicator renders correctly > with fulfilledStepIcon 1`] = `
   data-testid="multi-step-indicator"
 >
   <li
+    aria-label="Step 1: Title - Subtitle, status: fulfilled"
     className="clickable indicator typePrimary statusFulfilled sizeRegular clickable disableTextSelection"
     data-testid="step-indicator"
     onClick={[Function]}
@@ -473,6 +480,7 @@ exports[`MultiStepIndicator renders correctly > with fulfilledStepIcon 1`] = `
     data-vibe="Divider"
   />
   <li
+    aria-label="Step 2: Active - Active Subtitle, status: active"
     className="clickable indicator typePrimary statusActive sizeRegular clickable disableTextSelection"
     data-testid="step-indicator"
     onClick={[Function]}
@@ -531,6 +539,7 @@ exports[`MultiStepIndicator renders correctly > with fulfilledStepIcon 1`] = `
     data-vibe="Divider"
   />
   <li
+    aria-label="Step 3: Pending - Pending Subtitle, status: pending"
     className="clickable indicator typePrimary statusPending sizeRegular clickable disableTextSelection"
     data-testid="step-indicator"
     onClick={[Function]}
@@ -592,6 +601,7 @@ exports[`MultiStepIndicator renders correctly > with isFulfilledStepDisplayNumbe
   data-testid="multi-step-indicator"
 >
   <li
+    aria-label="Step 1: Title - Subtitle, status: fulfilled"
     className="clickable indicator typePrimary statusFulfilled sizeRegular clickable disableTextSelection"
     data-testid="step-indicator"
     onClick={[Function]}
@@ -650,6 +660,7 @@ exports[`MultiStepIndicator renders correctly > with isFulfilledStepDisplayNumbe
     data-vibe="Divider"
   />
   <li
+    aria-label="Step 2: Active - Active Subtitle, status: active"
     className="clickable indicator typePrimary statusActive sizeRegular clickable disableTextSelection"
     data-testid="step-indicator"
     onClick={[Function]}
@@ -708,6 +719,7 @@ exports[`MultiStepIndicator renders correctly > with isFulfilledStepDisplayNumbe
     data-vibe="Divider"
   />
   <li
+    aria-label="Step 3: Pending - Pending Subtitle, status: pending"
     className="clickable indicator typePrimary statusPending sizeRegular clickable disableTextSelection"
     data-testid="step-indicator"
     onClick={[Function]}
@@ -769,6 +781,7 @@ exports[`MultiStepIndicator renders correctly > with mode compact 1`] = `
   data-testid="multi-step-indicator"
 >
   <li
+    aria-label="Step 1: Title - Subtitle, status: fulfilled"
     className="clickable indicator typePrimary statusFulfilled sizeCompact clickable disableTextSelection"
     data-testid="step-indicator"
     onClick={[Function]}
@@ -838,6 +851,7 @@ exports[`MultiStepIndicator renders correctly > with mode compact 1`] = `
     data-vibe="Divider"
   />
   <li
+    aria-label="Step 2: Active - Active Subtitle, status: active"
     className="clickable indicator typePrimary statusActive sizeCompact clickable disableTextSelection"
     data-testid="step-indicator"
     onClick={[Function]}
@@ -891,6 +905,7 @@ exports[`MultiStepIndicator renders correctly > with mode compact 1`] = `
     data-vibe="Divider"
   />
   <li
+    aria-label="Step 3: Pending - Pending Subtitle, status: pending"
     className="clickable indicator typePrimary statusPending sizeCompact clickable disableTextSelection"
     data-testid="step-indicator"
     onClick={[Function]}
@@ -947,6 +962,7 @@ exports[`MultiStepIndicator renders correctly > with mode compact textPlacement
   data-testid="multi-step-indicator"
 >
   <li
+    aria-label="Step 1: Title - Subtitle, status: fulfilled"
     className="clickable indicator typePrimary statusFulfilled sizeRegular clickable textPlacementVertical disableTextSelection"
     data-testid="step-indicator"
     onClick={[Function]}
@@ -1021,6 +1037,7 @@ exports[`MultiStepIndicator renders correctly > with mode compact textPlacement
     </div>
   </li>
   <li
+    aria-label="Step 2: Active - Active Subtitle, status: active"
     className="clickable indicator typePrimary statusActive sizeRegular clickable textPlacementVertical disableTextSelection"
     data-testid="step-indicator"
     onClick={[Function]}
@@ -1079,6 +1096,7 @@ exports[`MultiStepIndicator renders correctly > with mode compact textPlacement
     </div>
   </li>
   <li
+    aria-label="Step 3: Pending - Pending Subtitle, status: pending"
     className="clickable indicator typePrimary statusPending sizeRegular clickable textPlacementVertical disableTextSelection"
     data-testid="step-indicator"
     onClick={[Function]}
@@ -1140,6 +1158,7 @@ exports[`MultiStepIndicator renders correctly > with stepComponentClassName 1`]
   data-testid="multi-step-indicator"
 >
   <li
+    aria-label="Step 1: Title - Subtitle, status: fulfilled"
     className="clickable indicator typePrimary statusFulfilled sizeRegular test clickable disableTextSelection"
     data-testid="step-indicator"
     onClick={[Function]}
@@ -1214,6 +1233,7 @@ exports[`MultiStepIndicator renders correctly > with stepComponentClassName 1`]
     data-vibe="Divider"
   />
   <li
+    aria-label="Step 2: Active - Active Subtitle, status: active"
     className="clickable indicator typePrimary statusActive sizeRegular test clickable disableTextSelection"
     data-testid="step-indicator"
     onClick={[Function]}
@@ -1272,6 +1292,7 @@ exports[`MultiStepIndicator renders correctly > with stepComponentClassName 1`]
     data-vibe="Divider"
   />
   <li
+    aria-label="Step 3: Pending - Pending Subtitle, status: pending"
     className="clickable indicator typePrimary statusPending sizeRegular test clickable disableTextSelection"
     data-testid="step-indicator"
     onClick={[Function]}
@@ -1333,6 +1354,7 @@ exports[`MultiStepIndicator renders correctly > with steps 1`] = `
   data-testid="multi-step-indicator"
 >
   <li
+    aria-label="Step 1: Title - Subtitle, status: fulfilled"
     className="clickable indicator typePrimary statusFulfilled sizeRegular clickable disableTextSelection"
     data-testid="step-indicator"
     onClick={[Function]}
@@ -1407,6 +1429,7 @@ exports[`MultiStepIndicator renders correctly > with steps 1`] = `
     data-vibe="Divider"
   />
   <li
+    aria-label="Step 2: Active - Active Subtitle, status: active"
     className="clickable indicator typePrimary statusActive sizeRegular clickable disableTextSelection"
     data-testid="step-indicator"
     onClick={[Function]}
@@ -1465,6 +1488,7 @@ exports[`MultiStepIndicator renders correctly > with steps 1`] = `
     data-vibe="Divider"
   />
   <li
+    aria-label="Step 3: Pending - Pending Subtitle, status: pending"
     className="clickable indicator typePrimary statusPending sizeRegular clickable disableTextSelection"
     data-testid="step-indicator"
     onClick={[Function]}
@@ -1526,6 +1550,7 @@ exports[`MultiStepIndicator renders correctly > with textPlacement vertical 1`]
   data-testid="multi-step-indicator"
 >
   <li
+    aria-label="Step 1: Title - Subtitle, status: fulfilled"
     className="clickable indicator typePrimary statusFulfilled sizeRegular clickable textPlacementVertical disableTextSelection"
     data-testid="step-indicator"
     onClick={[Function]}
@@ -1600,6 +1625,7 @@ exports[`MultiStepIndicator renders correctly > with textPlacement vertical 1`]
     </div>
   </li>
   <li
+    aria-label="Step 2: Active - Active Subtitle, status: active"
     className="clickable indicator typePrimary statusActive sizeRegular clickable textPlacementVertical disableTextSelection"
     data-testid="step-indicator"
     onClick={[Function]}
@@ -1658,6 +1684,7 @@ exports[`MultiStepIndicator renders correctly > with textPlacement vertical 1`]
     </div>
   </li>
   <li
+    aria-label="Step 3: Pending - Pending Subtitle, status: pending"
     className="clickable indicator typePrimary statusPending sizeRegular clickable textPlacementVertical disableTextSelection"
     data-testid="step-indicator"
     onClick={[Function]}
diff --git a/packages/core/src/components/MultiStepIndicator/components/StepIndicator/StepIndicator.module.scss b/packages/core/src/components/MultiStepIndicator/components/StepIndicator/StepIndicator.module.scss
index a197acc3fd..96dfb8438c 100644
--- a/packages/core/src/components/MultiStepIndicator/components/StepIndicator/StepIndicator.module.scss
+++ b/packages/core/src/components/MultiStepIndicator/components/StepIndicator/StepIndicator.module.scss
@@ -1,4 +1,4 @@
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 @import "../../../../styles/typography";
 @import "../../../../styles/keyframes";
 
@@ -16,18 +16,18 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-left: 16px;
+  margin-inline-start: 16px;
 }
 
 .sizeCompactTextContainer {
-  margin-left: var(--spacing-small);
+  margin-inline-start: var(--space-8);
   justify-content: center;
   align-content: center;
 }
 
 .textContainerTitle {
   width: 100%;
-  margin-bottom: var(--spacing-xs);
+  margin-bottom: var(--space-4);
 }
 
 .textContainerTitle .visuallyHidden {
@@ -56,8 +56,8 @@
 }
 
 .textPlacementVertical .textContainer {
-  margin-left: 0;
-  margin-top: var(--spacing-medium);
+  margin-inline-start: 0;
+  margin-top: var(--space-16);
 }
 
 .textPlacementVertical .numberDividerContainer {
@@ -79,7 +79,8 @@
 
 .textPlacementVertical .numberDividerContainer .divider {
   background-color: var(--ui-border-color);
-  margin: 16px 0 16px 16px;
+  margin: 16px 0 16px;
+  margin-inline-start: 16px;
   height: 1px;
   flex: 1 1 0;
 }
diff --git a/packages/core/src/components/MultiStepIndicator/components/StepIndicator/StepIndicator.tsx b/packages/core/src/components/MultiStepIndicator/components/StepIndicator/StepIndicator.tsx
index 76698c35c5..36fef94a09 100644
--- a/packages/core/src/components/MultiStepIndicator/components/StepIndicator/StepIndicator.tsx
+++ b/packages/core/src/components/MultiStepIndicator/components/StepIndicator/StepIndicator.tsx
@@ -55,9 +55,9 @@ const StepCircleDisplay: React.FC<StepCircleDisplayProps> = ({
     <Icon
       icon={fulfilledStepIcon}
       className={classNames(styles.numberContainerTextCheckIcon)}
-      iconType={fulfilledStepIconType}
+      type={fulfilledStepIconType}
       ignoreFocusStyle
-      ariaHidden={true}
+      aria-hidden={true}
     />
   ) : (
     <>{stepNumber}</>
@@ -146,6 +146,7 @@ const StepIndicator: React.FC<StepIndicatorProps> = ({
 
   // Refs
   const componentRef = useRef(null);
+  const nodeRef = useRef<HTMLSpanElement>(null);
   const prevStatusRef = useRef(status);
 
   // Callbacks for modifying animation state
@@ -203,7 +204,7 @@ const StepIndicator: React.FC<StepIndicatorProps> = ({
 
   return (
     <Clickable
-      tabIndex="-1"
+      tabIndex={-1}
       elementType="li"
       className={cx(...getClassNamesWithSuffix(""), stepComponentClassName, {
         [styles.withAnimation]: statusChangeAnimationState,
@@ -222,21 +223,20 @@ const StepIndicator: React.FC<StepIndicatorProps> = ({
           role="button"
         >
           <SwitchTransition mode="out-in">
-            <CSSTransition<undefined>
-              // CSSTransition needs to be specified with the generic parameter to decide type for addEndListener's callback
-              // otherwise, addEndListener cb has only `done` param (ts error)
+            <CSSTransition
+              key={status}
+              nodeRef={nodeRef}
               classNames={{
                 enter: styles.swapEnter,
                 enterActive: styles.swapEnterActive,
                 exit: styles.swapExit,
                 exitActive: styles.swapExitActive
               }}
-              addEndListener={(node: HTMLElement, done: () => void) => {
-                node.addEventListener("transitionend", done, false);
+              addEndListener={done => {
+                nodeRef.current?.addEventListener("transitionend", done, false);
               }}
-              key={status}
             >
-              <span className={cx(...getClassNamesWithSuffix("__number-container__text"))}>
+              <span ref={nodeRef} className={cx(...getClassNamesWithSuffix("__number-container__text"))}>
                 <StepCircleDisplay
                   fulfilledStepIcon={fulfilledStepIcon}
                   fulfilledStepIconType={fulfilledStepIconType}
diff --git a/packages/core/src/components/NumberField/components/NumberFieldSpinButton/NumberFieldSpinButton.tsx b/packages/core/src/components/NumberField/components/NumberFieldSpinButton/NumberFieldSpinButton.tsx
index 35d0d86d10..288cb14ef1 100644
--- a/packages/core/src/components/NumberField/components/NumberFieldSpinButton/NumberFieldSpinButton.tsx
+++ b/packages/core/src/components/NumberField/components/NumberFieldSpinButton/NumberFieldSpinButton.tsx
@@ -27,9 +27,9 @@ const NumberFieldSpinButton = ({
   return (
     <Flex direction="column" align="stretch" justify="center" onMouseDown={handleMouseDown}>
       <IconButton
-        ariaLabel="Increase"
+        aria-label="Increase"
         hideTooltip
-        ariaControls={inputId}
+        aria-controls={inputId}
         tabIndex={-1}
         onClick={onIncrement}
         disabled={disabled || isAtMax}
@@ -39,9 +39,9 @@ const NumberFieldSpinButton = ({
         icon={DropdownChevronUp}
       />
       <IconButton
-        ariaLabel="Decrease"
+        aria-label="Decrease"
         hideTooltip
-        ariaControls={inputId}
+        aria-controls={inputId}
         tabIndex={-1}
         onClick={onDecrement}
         disabled={disabled || isAtMin}
diff --git a/packages/core/src/components/ProgressBars/LinearProgressBar/LinearProgressBar.types.ts b/packages/core/src/components/ProgressBars/LinearProgressBar/LinearProgressBar.types.ts
deleted file mode 100644
index d89dfdcec4..0000000000
--- a/packages/core/src/components/ProgressBars/LinearProgressBar/LinearProgressBar.types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { type SIZES } from "../../../constants";
-
-export type LinearProgressBarStyle = "primary" | "secondary" | "positive" | "negative" | "warning" | "none";
-
-export type LinearProgressBarSize = (typeof SIZES)[keyof typeof SIZES];
diff --git a/packages/core/src/components/ProgressBars/LinearProgressBar/LinearProgressBarConstants.ts b/packages/core/src/components/ProgressBars/LinearProgressBar/LinearProgressBarConstants.ts
deleted file mode 100644
index c4f2b75fcf..0000000000
--- a/packages/core/src/components/ProgressBars/LinearProgressBar/LinearProgressBarConstants.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * @deprecated
- */
-export enum ProgressBarType {
-  PRIMARY = "primary",
-  SECONDARY = "secondary"
-}
-
-/**
- * @deprecated
- */
-export enum ProgressBarStyle {
-  PRIMARY = "primary",
-  SECONDARY = "secondary",
-  POSITIVE = "positive",
-  NEGATIVE = "negative",
-  WARNING = "warning",
-  NONE = "none"
-}
diff --git a/packages/core/src/components/ProgressBars/PercentageLabel/PercentageLabel.module.scss b/packages/core/src/components/ProgressBars/PercentageLabel/PercentageLabel.module.scss
index bc2480f643..ff5e51fcab 100644
--- a/packages/core/src/components/ProgressBars/PercentageLabel/PercentageLabel.module.scss
+++ b/packages/core/src/components/ProgressBars/PercentageLabel/PercentageLabel.module.scss
@@ -1,3 +1,3 @@
 .label {
-  padding-left: var(--spacing-xs);
+  padding-inline-start: var(--space-4);
 }
diff --git a/packages/core/src/components/ProgressBars/LinearProgressBar/Bar/Bar.module.scss b/packages/core/src/components/ProgressBars/ProgressBar/Bar/Bar.module.scss
similarity index 97%
rename from packages/core/src/components/ProgressBars/LinearProgressBar/Bar/Bar.module.scss
rename to packages/core/src/components/ProgressBars/ProgressBar/Bar/Bar.module.scss
index 31d577165d..87fb8c91a3 100644
--- a/packages/core/src/components/ProgressBars/LinearProgressBar/Bar/Bar.module.scss
+++ b/packages/core/src/components/ProgressBars/ProgressBar/Bar/Bar.module.scss
@@ -1,5 +1,5 @@
 .bar {
-  left: 0;
+  inset-inline-start: 0;
   height: 100%;
   position: absolute;
   border-radius: var(--border-radius-small);
diff --git a/packages/core/src/components/ProgressBars/LinearProgressBar/Bar/Bar.tsx b/packages/core/src/components/ProgressBars/ProgressBar/Bar/Bar.tsx
similarity index 94%
rename from packages/core/src/components/ProgressBars/LinearProgressBar/Bar/Bar.tsx
rename to packages/core/src/components/ProgressBars/ProgressBar/Bar/Bar.tsx
index 822526b116..1e6c7abd75 100644
--- a/packages/core/src/components/ProgressBars/LinearProgressBar/Bar/Bar.tsx
+++ b/packages/core/src/components/ProgressBars/ProgressBar/Bar/Bar.tsx
@@ -3,9 +3,9 @@ import { camelCase } from "es-toolkit";
 import { getStyle } from "../../../../helpers/typesciptCssModulesHelper";
 import { ComponentDefaultTestId, getTestId } from "../../../../tests/test-ids-utils";
 import cx from "classnames";
-import { calculatePercentage } from "../LinearProgressBarHelpers";
+import { calculatePercentage } from "../ProgressBarHelpers";
 import { type VibeComponentProps } from "../../../../types";
-import { type LinearProgressBarStyle } from "../LinearProgressBar.types";
+import { type ProgressBarStyle } from "../ProgressBar.types";
 import styles from "./Bar.module.scss";
 
 export type BarType = "primary" | "secondary";
@@ -14,7 +14,7 @@ export interface BarProps extends VibeComponentProps {
   /**
    * Determines the visual style of the progress bar.
    */
-  barStyle?: LinearProgressBarStyle;
+  barStyle?: ProgressBarStyle;
   /**
    * The minimum value of the progress bar.
    */
diff --git a/packages/core/src/components/ProgressBars/LinearProgressBar/LinearProgressBar.module.scss b/packages/core/src/components/ProgressBars/ProgressBar/ProgressBar.module.scss
similarity index 90%
rename from packages/core/src/components/ProgressBars/LinearProgressBar/LinearProgressBar.module.scss
rename to packages/core/src/components/ProgressBars/ProgressBar/ProgressBar.module.scss
index 916035a9cf..ec3581a93a 100644
--- a/packages/core/src/components/ProgressBars/LinearProgressBar/LinearProgressBar.module.scss
+++ b/packages/core/src/components/ProgressBars/ProgressBar/ProgressBar.module.scss
@@ -1,4 +1,4 @@
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 
 .wrapper {
   display: flex;
@@ -24,7 +24,7 @@
 }
 
 .label {
-  padding-left: var(--spacing-xs);
+  padding-inline-start: var(--space-4);
 }
 
 .large {
diff --git a/packages/core/src/components/ProgressBars/LinearProgressBar/LinearProgressBar.tsx b/packages/core/src/components/ProgressBars/ProgressBar/ProgressBar.tsx
similarity index 79%
rename from packages/core/src/components/ProgressBars/LinearProgressBar/LinearProgressBar.tsx
rename to packages/core/src/components/ProgressBars/ProgressBar/ProgressBar.tsx
index 72b1bc4ae6..0da5554b7e 100644
--- a/packages/core/src/components/ProgressBars/LinearProgressBar/LinearProgressBar.tsx
+++ b/packages/core/src/components/ProgressBars/ProgressBar/ProgressBar.tsx
@@ -1,25 +1,20 @@
 import React, { forwardRef, useMemo } from "react";
 import cx from "classnames";
-import { SIZES } from "../../../constants";
 import { getStyle } from "../../../helpers/typesciptCssModulesHelper";
 import PercentageLabel from "../PercentageLabel/PercentageLabel";
-import {
-  ProgressBarStyle as ProgressBarStyleEnum,
-  ProgressBarType as ProgressBarTypeEnum
-} from "./LinearProgressBarConstants";
-import { type LinearProgressBarSize, type LinearProgressBarStyle } from "./LinearProgressBar.types";
-import { calculatePercentage, getProgressBarClassNames } from "./LinearProgressBarHelpers";
+import { type ProgressBarSize, type ProgressBarStyle } from "./ProgressBar.types";
+import { calculatePercentage, getProgressBarClassNames } from "./ProgressBarHelpers";
 import Bar from "./Bar/Bar";
-import { type VibeComponentProps, withStaticProps } from "../../../types";
+import { type VibeComponentProps } from "../../../types";
 import { ComponentDefaultTestId, ComponentVibeId } from "../../../tests/constants";
 import { getTestId } from "../../../tests/test-ids-utils";
-import styles from "./LinearProgressBar.module.scss";
+import styles from "./ProgressBar.module.scss";
 
-export interface LinearProgressBarProps extends VibeComponentProps {
+export interface ProgressBarProps extends VibeComponentProps {
   /**
    * Determines the visual style of the progress bar.
    */
-  barStyle?: LinearProgressBarStyle;
+  barStyle?: ProgressBarStyle;
   /**
    * The minimum value of the progress bar.
    */
@@ -43,7 +38,7 @@ export interface LinearProgressBarProps extends VibeComponentProps {
   /**
    * The size of the progress bar.
    */
-  size?: LinearProgressBarSize;
+  size?: ProgressBarSize;
   /**
    * If true, displays the progress percentage.
    */
@@ -69,7 +64,7 @@ export interface LinearProgressBarProps extends VibeComponentProps {
   /**
    * The ARIA label for the progress bar.
    */
-  ariaLabel?: string;
+  "aria-label"?: string;
   /**
    * If true, makes the progress bar span the full container width.
    */
@@ -80,7 +75,7 @@ export interface LinearProgressBarProps extends VibeComponentProps {
   allowExceedingMax?: boolean;
 }
 
-const LinearProgressBar = forwardRef(
+const ProgressBar = forwardRef(
   (
     {
       min = 0,
@@ -94,12 +89,12 @@ const LinearProgressBar = forwardRef(
       indicateProgress = false,
       multi = false,
       multiValues = [],
-      ariaLabel = "",
+      "aria-label": ariaLabel = "",
       id,
       fullWidth = false,
       allowExceedingMax = false,
       "data-testid": dataTestId
-    }: LinearProgressBarProps,
+    }: ProgressBarProps,
     ref: React.ForwardedRef<HTMLDivElement>
   ) => {
     const wrapperClassName = useMemo(() => {
@@ -183,8 +178,8 @@ const LinearProgressBar = forwardRef(
         className={wrapperClassName}
         ref={ref}
         id={id}
-        data-testid={dataTestId || getTestId(ComponentDefaultTestId.LINEAR_PROGRESS_BAR, id)}
-        data-vibe={ComponentVibeId.LINEAR_PROGRESS_BAR}
+        data-testid={dataTestId || getTestId(ComponentDefaultTestId.PROGRESS_BAR, id)}
+        data-vibe={ComponentVibeId.PROGRESS_BAR}
       >
         <div className={styles.container}>
           {renderBaseBars}
@@ -196,18 +191,4 @@ const LinearProgressBar = forwardRef(
   }
 );
 
-interface LinearProgressBarStaticProps {
-  styles: typeof ProgressBarStyleEnum;
-  barStyles: typeof ProgressBarStyleEnum;
-  types: typeof ProgressBarTypeEnum;
-  barTypes: typeof ProgressBarTypeEnum;
-  sizes: typeof SIZES;
-}
-
-export default withStaticProps<LinearProgressBarProps, LinearProgressBarStaticProps>(LinearProgressBar, {
-  styles: ProgressBarStyleEnum,
-  barStyles: ProgressBarStyleEnum,
-  types: ProgressBarTypeEnum,
-  barTypes: ProgressBarTypeEnum,
-  sizes: SIZES
-});
+export default ProgressBar;
diff --git a/packages/core/src/components/ProgressBars/ProgressBar/ProgressBar.types.ts b/packages/core/src/components/ProgressBars/ProgressBar/ProgressBar.types.ts
new file mode 100644
index 0000000000..ef60ef7fb5
--- /dev/null
+++ b/packages/core/src/components/ProgressBars/ProgressBar/ProgressBar.types.ts
@@ -0,0 +1,5 @@
+import { type SIZES } from "../../../constants";
+
+export type ProgressBarStyle = "primary" | "secondary" | "positive" | "negative" | "warning" | "none";
+
+export type ProgressBarSize = (typeof SIZES)[keyof typeof SIZES];
diff --git a/packages/core/src/components/ProgressBars/LinearProgressBar/LinearProgressBarHelpers.ts b/packages/core/src/components/ProgressBars/ProgressBar/ProgressBarHelpers.ts
similarity index 90%
rename from packages/core/src/components/ProgressBars/LinearProgressBar/LinearProgressBarHelpers.ts
rename to packages/core/src/components/ProgressBars/ProgressBar/ProgressBarHelpers.ts
index 3d5079bfcc..44e88e0a92 100644
--- a/packages/core/src/components/ProgressBars/LinearProgressBar/LinearProgressBarHelpers.ts
+++ b/packages/core/src/components/ProgressBars/ProgressBar/ProgressBarHelpers.ts
@@ -1,6 +1,6 @@
 import { type SIZES } from "./../../../constants/sizes";
 import cx from "classnames";
-import styles from "./LinearProgressBar.module.scss";
+import styles from "./ProgressBar.module.scss";
 
 export type Size = (typeof SIZES)[keyof typeof SIZES];
 
diff --git a/packages/core/src/components/ProgressBars/LinearProgressBar/__tests__/LinearProgressBar.snapshot.test.tsx b/packages/core/src/components/ProgressBars/ProgressBar/__tests__/ProgressBar.snapshot.test.tsx
similarity index 50%
rename from packages/core/src/components/ProgressBars/LinearProgressBar/__tests__/LinearProgressBar.snapshot.test.tsx
rename to packages/core/src/components/ProgressBars/ProgressBar/__tests__/ProgressBar.snapshot.test.tsx
index 453514f1c9..5430a497fe 100644
--- a/packages/core/src/components/ProgressBars/LinearProgressBar/__tests__/LinearProgressBar.snapshot.test.tsx
+++ b/packages/core/src/components/ProgressBars/ProgressBar/__tests__/ProgressBar.snapshot.test.tsx
@@ -1,7 +1,7 @@
 import { describe, it, expect } from "vitest";
 import React from "react";
 import renderer from "react-test-renderer";
-import LinearProgressBar from "../LinearProgressBar";
+import ProgressBar from "../ProgressBar";
 
 const multiValues = [
   { value: 25, color: "red" },
@@ -9,49 +9,49 @@ const multiValues = [
   { value: 100, color: "green" }
 ];
 
-describe("LinearProgressBar renders correctly", () => {
+describe("ProgressBar renders correctly", () => {
   it("with empty props", () => {
-    const tree = renderer.create(<LinearProgressBar />).toJSON();
+    const tree = renderer.create(<ProgressBar />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it("with value", () => {
-    const tree = renderer.create(<LinearProgressBar value={20} />).toJSON();
+    const tree = renderer.create(<ProgressBar value={20} />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it("with size", () => {
-    const tree = renderer.create(<LinearProgressBar value={20} size="large" />).toJSON();
+    const tree = renderer.create(<ProgressBar value={20} size="large" />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it("with barStyle", () => {
-    const tree = renderer.create(<LinearProgressBar value={20} barStyle="positive" />).toJSON();
+    const tree = renderer.create(<ProgressBar value={20} barStyle="positive" />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it("with min", () => {
-    const tree = renderer.create(<LinearProgressBar value={20} min={10} />).toJSON();
+    const tree = renderer.create(<ProgressBar value={20} min={10} />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it("with indicateProgress", () => {
-    const tree = renderer.create(<LinearProgressBar value={20} indicateProgress />).toJSON();
+    const tree = renderer.create(<ProgressBar value={20} indicateProgress />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it("with valueSecondary", () => {
-    const tree = renderer.create(<LinearProgressBar value={20} valueSecondary={40} />).toJSON();
+    const tree = renderer.create(<ProgressBar value={20} valueSecondary={40} />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it("with multi and multiValues", () => {
-    const tree = renderer.create(<LinearProgressBar value={20} multi multiValues={multiValues} />).toJSON();
+    const tree = renderer.create(<ProgressBar value={20} multi multiValues={multiValues} />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it("with full width progress bar", () => {
-    const tree = renderer.create(<LinearProgressBar value={20} fullWidth />).toJSON();
+    const tree = renderer.create(<ProgressBar value={20} fullWidth />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/packages/core/src/components/ProgressBars/LinearProgressBar/__tests__/LinearProgressBar.test.jsx b/packages/core/src/components/ProgressBars/ProgressBar/__tests__/ProgressBar.test.tsx
similarity index 75%
rename from packages/core/src/components/ProgressBars/LinearProgressBar/__tests__/LinearProgressBar.test.jsx
rename to packages/core/src/components/ProgressBars/ProgressBar/__tests__/ProgressBar.test.tsx
index 10b3eafcdf..92976409d7 100644
--- a/packages/core/src/components/ProgressBars/LinearProgressBar/__tests__/LinearProgressBar.test.jsx
+++ b/packages/core/src/components/ProgressBars/ProgressBar/__tests__/ProgressBar.test.tsx
@@ -1,7 +1,7 @@
 import { beforeEach, describe, it, expect } from "vitest";
 import React from "react";
 import { render, cleanup, act, screen } from "@testing-library/react";
-import LinearProgressBar from "../LinearProgressBar";
+import ProgressBar from "../ProgressBar";
 
 describe("ProgressBars Tests", () => {
   let component;
@@ -9,7 +9,7 @@ describe("ProgressBars Tests", () => {
   beforeEach(() => {
     cleanup();
     act(() => {
-      component = render(<LinearProgressBar id="test" />);
+      component = render(<ProgressBar id="test" />);
     });
   });
 
@@ -21,12 +21,12 @@ describe("ProgressBars Tests", () => {
     it("should render progress bars if values are provided", () => {
       const { rerender } = component;
       act(() => {
-        component = rerender(<LinearProgressBar value={13} id="test" />);
+        component = rerender(<ProgressBar value={13} id="test" />);
       });
       expect(screen.queryAllByRole("progressbar").length).toBe(1);
 
       act(() => {
-        component = rerender(<LinearProgressBar value={14} valueSecondary={15} id="test" />);
+        component = rerender(<ProgressBar value={14} valueSecondary={15} id="test" />);
       });
       expect(screen.queryAllByRole("progressbar").length).toBe(2);
     });
@@ -36,7 +36,7 @@ describe("ProgressBars Tests", () => {
     it("should not render progress indication if not set", () => {
       const { rerender } = component;
       act(() => {
-        component = rerender(<LinearProgressBar value={13} max={100} id="test" />);
+        component = rerender(<ProgressBar value={13} max={100} id="test" />);
       });
       expect(screen.queryAllByText("13%").length).toBe(0);
     });
@@ -44,7 +44,7 @@ describe("ProgressBars Tests", () => {
     it("should render progress indication if set", () => {
       const { rerender } = component;
       act(() => {
-        component = rerender(<LinearProgressBar value={13} max={100} id="test" indicateProgress={true} />);
+        component = rerender(<ProgressBar value={13} max={100} id="test" indicateProgress={true} />);
       });
 
       expect(screen.getByText("13%")).toBeTruthy();
@@ -55,7 +55,7 @@ describe("ProgressBars Tests", () => {
       const value = 13;
       for (let i = 0; i < 2; i++) {
         act(() => {
-          rerender(<LinearProgressBar value={value + i} max={100} id="test" indicateProgress={true} />);
+          rerender(<ProgressBar value={value + i} max={100} id="test" indicateProgress={true} />);
         });
 
         expect(screen.getByText(`${value + i}%`)).toBeTruthy();
@@ -72,13 +72,13 @@ describe("ProgressBars Tests", () => {
     let multiBarsComponent;
 
     beforeEach(() => {
-      multiBarsComponent = render(<LinearProgressBar max={100} id="test" multi />);
+      multiBarsComponent = render(<ProgressBar max={100} id="test" multi />);
     });
 
     it("should not render multiple bars if multi is not set", () => {
       const { rerender } = component;
       act(() => {
-        component = rerender(<LinearProgressBar max={100} id="test" multiValues={multiValues} />);
+        component = rerender(<ProgressBar max={100} id="test" multiValues={multiValues} />);
       });
 
       expect(screen.queryAllByRole("progressbar").length).toBe(0);
@@ -86,7 +86,7 @@ describe("ProgressBars Tests", () => {
 
     it("should render all the given bars with the correct values", () => {
       const { rerender } = multiBarsComponent;
-      rerender(<LinearProgressBar max={100} id="test" multi multiValues={multiValues} />);
+      rerender(<ProgressBar max={100} id="test" multi multiValues={multiValues} />);
 
       const progressBarElements = screen.queryAllByRole("progressbar");
       expect(progressBarElements.length).toBe(3);
@@ -97,11 +97,11 @@ describe("ProgressBars Tests", () => {
     it("should propagate value changes to bars", () => {
       const multiValuesWithChange = [{ value: 100, color: "rgb(255, 255, 255)" }, multiValues[1], multiValues[2]];
       const { rerender } = multiBarsComponent;
-      rerender(<LinearProgressBar max={100} id="test" multi multiValues={multiValues} />);
+      rerender(<ProgressBar max={100} id="test" multi multiValues={multiValues} />);
 
       let progressBarElements = screen.queryAllByRole("progressbar");
 
-      rerender(<LinearProgressBar max={100} id="test" multi multiValues={multiValuesWithChange} />);
+      rerender(<ProgressBar max={100} id="test" multi multiValues={multiValuesWithChange} />);
       progressBarElements = screen.queryAllByRole("progressbar");
       const style = window.getComputedStyle(progressBarElements[2]);
 
@@ -113,7 +113,7 @@ describe("ProgressBars Tests", () => {
     it("should cap percentage at 100% by default when value exceeds max", () => {
       const { rerender } = component;
       act(() => {
-        component = rerender(<LinearProgressBar value={120} max={100} id="test" indicateProgress={true} />);
+        component = rerender(<ProgressBar value={120} max={100} id="test" indicateProgress={true} />);
       });
 
       expect(screen.getByText("100%")).toBeTruthy();
@@ -124,7 +124,7 @@ describe("ProgressBars Tests", () => {
       const { rerender } = component;
       act(() => {
         component = rerender(
-          <LinearProgressBar value={120} max={100} id="test" indicateProgress={true} allowExceedingMax={true} />
+          <ProgressBar value={120} max={100} id="test" indicateProgress={true} allowExceedingMax={true} />
         );
       });
 
@@ -136,7 +136,7 @@ describe("ProgressBars Tests", () => {
       const { rerender } = component;
       act(() => {
         component = rerender(
-          <LinearProgressBar
+          <ProgressBar
             value={150}
             valueSecondary={180}
             max={100}
@@ -155,7 +155,7 @@ describe("ProgressBars Tests", () => {
     it("should cap visual bar width at 100% even when allowExceedingMax is true", () => {
       const { rerender } = component;
       act(() => {
-        component = rerender(<LinearProgressBar value={120} max={100} id="test" allowExceedingMax={true} />);
+        component = rerender(<ProgressBar value={120} max={100} id="test" allowExceedingMax={true} />);
       });
 
       const progressBarElement = screen.getByRole("progressbar");
diff --git a/packages/core/src/components/ProgressBars/LinearProgressBar/__tests__/__snapshots__/LinearProgressBar.snapshot.test.tsx.snap b/packages/core/src/components/ProgressBars/ProgressBar/__tests__/__snapshots__/ProgressBar.snapshot.test.tsx.snap
similarity index 77%
rename from packages/core/src/components/ProgressBars/LinearProgressBar/__tests__/__snapshots__/LinearProgressBar.snapshot.test.tsx.snap
rename to packages/core/src/components/ProgressBars/ProgressBar/__tests__/__snapshots__/ProgressBar.snapshot.test.tsx.snap
index 8c8b6bb51b..a81e0886eb 100644
--- a/packages/core/src/components/ProgressBars/LinearProgressBar/__tests__/__snapshots__/LinearProgressBar.snapshot.test.tsx.snap
+++ b/packages/core/src/components/ProgressBars/ProgressBar/__tests__/__snapshots__/ProgressBar.snapshot.test.tsx.snap
@@ -1,10 +1,10 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`LinearProgressBar renders correctly > with barStyle 1`] = `
+exports[`ProgressBar renders correctly > with barStyle 1`] = `
 <div
   className="wrapper small"
-  data-testid="linear-progress-bar"
-  data-vibe="LinearProgressBar"
+  data-testid="progress-bar"
+  data-vibe="ProgressBar"
 >
   <div
     className="container"
@@ -26,11 +26,11 @@ exports[`LinearProgressBar renders correctly > with barStyle 1`] = `
 </div>
 `;
 
-exports[`LinearProgressBar renders correctly > with empty props 1`] = `
+exports[`ProgressBar renders correctly > with empty props 1`] = `
 <div
   className="wrapper small"
-  data-testid="linear-progress-bar"
-  data-vibe="LinearProgressBar"
+  data-testid="progress-bar"
+  data-vibe="ProgressBar"
 >
   <div
     className="container"
@@ -38,11 +38,11 @@ exports[`LinearProgressBar renders correctly > with empty props 1`] = `
 </div>
 `;
 
-exports[`LinearProgressBar renders correctly > with full width progress bar 1`] = `
+exports[`ProgressBar renders correctly > with full width progress bar 1`] = `
 <div
   className="wrapper small fullWidth"
-  data-testid="linear-progress-bar"
-  data-vibe="LinearProgressBar"
+  data-testid="progress-bar"
+  data-vibe="ProgressBar"
 >
   <div
     className="container"
@@ -64,11 +64,11 @@ exports[`LinearProgressBar renders correctly > with full width progress bar 1`]
 </div>
 `;
 
-exports[`LinearProgressBar renders correctly > with indicateProgress 1`] = `
+exports[`ProgressBar renders correctly > with indicateProgress 1`] = `
 <div
   className="wrapper small"
-  data-testid="linear-progress-bar"
-  data-vibe="LinearProgressBar"
+  data-testid="progress-bar"
+  data-vibe="ProgressBar"
 >
   <div
     className="container"
@@ -96,11 +96,11 @@ exports[`LinearProgressBar renders correctly > with indicateProgress 1`] = `
 </div>
 `;
 
-exports[`LinearProgressBar renders correctly > with min 1`] = `
+exports[`ProgressBar renders correctly > with min 1`] = `
 <div
   className="wrapper small"
-  data-testid="linear-progress-bar"
-  data-vibe="LinearProgressBar"
+  data-testid="progress-bar"
+  data-vibe="ProgressBar"
 >
   <div
     className="container"
@@ -122,11 +122,11 @@ exports[`LinearProgressBar renders correctly > with min 1`] = `
 </div>
 `;
 
-exports[`LinearProgressBar renders correctly > with multi and multiValues 1`] = `
+exports[`ProgressBar renders correctly > with multi and multiValues 1`] = `
 <div
   className="wrapper small"
-  data-testid="linear-progress-bar"
-  data-vibe="LinearProgressBar"
+  data-testid="progress-bar"
+  data-vibe="ProgressBar"
 >
   <div
     className="container"
@@ -180,11 +180,11 @@ exports[`LinearProgressBar renders correctly > with multi and multiValues 1`] =
 </div>
 `;
 
-exports[`LinearProgressBar renders correctly > with size 1`] = `
+exports[`ProgressBar renders correctly > with size 1`] = `
 <div
   className="wrapper large"
-  data-testid="linear-progress-bar"
-  data-vibe="LinearProgressBar"
+  data-testid="progress-bar"
+  data-vibe="ProgressBar"
 >
   <div
     className="container"
@@ -206,11 +206,11 @@ exports[`LinearProgressBar renders correctly > with size 1`] = `
 </div>
 `;
 
-exports[`LinearProgressBar renders correctly > with value 1`] = `
+exports[`ProgressBar renders correctly > with value 1`] = `
 <div
   className="wrapper small"
-  data-testid="linear-progress-bar"
-  data-vibe="LinearProgressBar"
+  data-testid="progress-bar"
+  data-vibe="ProgressBar"
 >
   <div
     className="container"
@@ -232,11 +232,11 @@ exports[`LinearProgressBar renders correctly > with value 1`] = `
 </div>
 `;
 
-exports[`LinearProgressBar renders correctly > with valueSecondary 1`] = `
+exports[`ProgressBar renders correctly > with valueSecondary 1`] = `
 <div
   className="wrapper small"
-  data-testid="linear-progress-bar"
-  data-vibe="LinearProgressBar"
+  data-testid="progress-bar"
+  data-vibe="ProgressBar"
 >
   <div
     className="container"
diff --git a/packages/core/src/components/ProgressBars/index.ts b/packages/core/src/components/ProgressBars/index.ts
index 5d0845f379..5f29ed8a42 100644
--- a/packages/core/src/components/ProgressBars/index.ts
+++ b/packages/core/src/components/ProgressBars/index.ts
@@ -1,3 +1,3 @@
-export { default as LinearProgressBar, type LinearProgressBarProps } from "./LinearProgressBar/LinearProgressBar";
+export { default as ProgressBar, type ProgressBarProps } from "./ProgressBar/ProgressBar";
 
-export * from "./LinearProgressBar/LinearProgressBar.types";
+export * from "./ProgressBar/ProgressBar.types";
diff --git a/packages/core/src/components/RadioButton/RadioButton.tsx b/packages/core/src/components/RadioButton/RadioButton.tsx
index 23273438f7..14bff3d434 100644
--- a/packages/core/src/components/RadioButton/RadioButton.tsx
+++ b/packages/core/src/components/RadioButton/RadioButton.tsx
@@ -65,7 +65,7 @@ export interface RadioButtonProps extends VibeComponentProps {
   /**
    * The tab index applied to the children.
    */
-  childrenTabIndex?: string;
+  childrenTabIndex?: number;
   /**
    * If true, disables the label animation.
    */
@@ -73,11 +73,11 @@ export interface RadioButtonProps extends VibeComponentProps {
   /**
    * ARIA label for accessibility when no text is provided.
    */
-  ariaLabel?: string;
+  "aria-label"?: string;
   /**
    * ID of element that describe this radio button.
    */
-  ariaDescribedby?: string;
+  "aria-describedby"?: string;
 }
 
 const RadioButton = forwardRef(
@@ -97,10 +97,10 @@ const RadioButton = forwardRef(
       onSelect,
       checked,
       retainChildClick = true,
-      childrenTabIndex = "0",
+      childrenTabIndex = 0,
       noLabelAnimation = false,
-      ariaLabel,
-      ariaDescribedby,
+      "aria-label": ariaLabel,
+      "aria-describedby": ariaDescribedby,
       id,
       "data-testid": dataTestId
     }: RadioButtonProps,
diff --git a/packages/core/src/components/Search/Search.module.scss b/packages/core/src/components/Search/Search.module.scss
index e3c71bd991..89bd488519 100644
--- a/packages/core/src/components/Search/Search.module.scss
+++ b/packages/core/src/components/Search/Search.module.scss
@@ -9,7 +9,7 @@
   }
 
   .loader {
-    margin-right: var(--spacing-xs);
+    margin-inline-end: var(--space-4);
   }
 
   .icon {
diff --git a/packages/core/src/components/Search/Search.tsx b/packages/core/src/components/Search/Search.tsx
index a9a57df3ba..ca10093a98 100644
--- a/packages/core/src/components/Search/Search.tsx
+++ b/packages/core/src/components/Search/Search.tsx
@@ -37,8 +37,8 @@ const Search = forwardRef(
       onClear,
       onKeyDown,
       className,
-      ariaExpanded,
-      ariaHasPopup,
+      "aria-expanded": ariaExpanded,
+      "aria-haspopup": ariaHasPopup,
       showClearIcon = true,
       id,
       "data-testid": dataTestId
@@ -62,19 +62,14 @@ const Search = forwardRef(
     }, [disabled, clearValue, onClear]);
 
     const SearchIcon = (
-      <Icon
-        icon={searchIconName}
-        className={styles.icon}
-        iconType="font"
-        iconSize={size === "small" ? "16px" : "20px"}
-      />
+      <Icon icon={searchIconName} className={styles.icon} type="font" size={size === "small" ? "16px" : "20px"} />
     );
 
     const ClearIcon = (
       <IconButton
         className={cx(styles.icon, { [styles.empty]: !inputValue })}
         icon={clearIconName}
-        ariaLabel={clearIconLabel}
+        aria-label={clearIconLabel}
         onClick={onClearButtonClick}
         size={size === "small" ? "xs" : "small"}
         data-testid={getTestId(ComponentDefaultTestId.CLEAN_SEARCH_BUTTON, id)}
diff --git a/packages/core/src/components/Search/Search.types.ts b/packages/core/src/components/Search/Search.types.ts
index a6fae6d278..2d7abc27dc 100644
--- a/packages/core/src/components/Search/Search.types.ts
+++ b/packages/core/src/components/Search/Search.types.ts
@@ -61,11 +61,11 @@ export interface SearchProps extends VibeComponentProps {
   /**
    * If true, indicates that a popup is open.
    */
-  ariaExpanded?: React.AriaAttributes["aria-expanded"];
+  "aria-expanded"?: React.AriaAttributes["aria-expanded"];
   /**
    * Specifies the type of popup associated with the search input.
    */
-  ariaHasPopup?: React.AriaAttributes["aria-haspopup"];
+  "aria-haspopup"?: React.AriaAttributes["aria-haspopup"];
   /**
    * The debounce rate for input value changes.
    */
diff --git a/packages/core/src/components/Search/__tests__/Search.test.tsx b/packages/core/src/components/Search/__tests__/Search.test.tsx
index a14e0cfa57..19aee3a386 100644
--- a/packages/core/src/components/Search/__tests__/Search.test.tsx
+++ b/packages/core/src/components/Search/__tests__/Search.test.tsx
@@ -133,8 +133,8 @@ describe("Search", () => {
       expect(getByRole("combobox")).toBeInTheDocument();
     });
 
-    it("should set aria-controls when searchResultsContainerId is provided and ariaExpanded is true", () => {
-      const { getByRole } = renderSearch({ searchResultsContainerId: "search-results", ariaExpanded: true });
+    it("should set aria-controls when searchResultsContainerId is provided and aria-expanded is true", () => {
+      const { getByRole } = renderSearch({ searchResultsContainerId: "search-results", "aria-expanded": true });
       expect(getByRole("combobox")).toHaveAttribute("aria-controls", "search-results");
     });
 
diff --git a/packages/core/src/components/Skeleton/Skeleton.tsx b/packages/core/src/components/Skeleton/Skeleton.tsx
index 91dae24490..e42e5d1b83 100644
--- a/packages/core/src/components/Skeleton/Skeleton.tsx
+++ b/packages/core/src/components/Skeleton/Skeleton.tsx
@@ -2,16 +2,10 @@ import React from "react";
 import { camelCase } from "es-toolkit";
 import { ComponentDefaultTestId, getTestId } from "../../tests/test-ids-utils";
 import cx from "classnames";
-import {
-  SKELETON_SIZES,
-  SkeletonType as SkeletonTypeEnum,
-  SKELETON_CUSTOM_SIZE,
-  TextSkeletonSize as TextSkeletonSizeEnum
-} from "./SkeletonConstants";
-
+import { SKELETON_CUSTOM_SIZE } from "./SkeletonConstants";
 import { type SkeletonType, type SkeletonSizeType } from "./Skelton.types";
 import { getStyle } from "../../helpers/typesciptCssModulesHelper";
-import { type VibeComponentProps, withStaticPropsWithoutForwardRef } from "../../types";
+import { type VibeComponentProps } from "../../types";
 import styles from "./Skeleton.module.scss";
 
 export interface SkeletonProps extends VibeComponentProps {
@@ -52,10 +46,10 @@ const Skeleton = ({
   id,
   "data-testid": dataTestId
 }: SkeletonProps) => {
-  const skeletonType = (Object.values(SkeletonTypeEnum) as string[]).includes(type) ? type : "rectangle";
+  const skeletonType = type || "rectangle";
 
   // Skeleton has sizes only for text type, other types support only custom size
-  const skeletonSize = (Object.values(TextSkeletonSizeEnum) as string[]).includes(size) ? size : SKELETON_CUSTOM_SIZE;
+  const skeletonSize = size || SKELETON_CUSTOM_SIZE;
 
   return (
     <div
@@ -73,12 +67,4 @@ const Skeleton = ({
   );
 };
 
-interface SkeletonStaticProps {
-  types: typeof SkeletonTypeEnum;
-  sizes: typeof SKELETON_SIZES;
-}
-
-export default withStaticPropsWithoutForwardRef<SkeletonProps, SkeletonStaticProps>(Skeleton, {
-  types: SkeletonTypeEnum,
-  sizes: SKELETON_SIZES
-});
+export default Skeleton;
diff --git a/packages/core/src/components/Skeleton/SkeletonConstants.ts b/packages/core/src/components/Skeleton/SkeletonConstants.ts
index 6a51a13632..df46505cac 100644
--- a/packages/core/src/components/Skeleton/SkeletonConstants.ts
+++ b/packages/core/src/components/Skeleton/SkeletonConstants.ts
@@ -1,34 +1,2 @@
 // Fixed names
 export const SKELETON_CUSTOM_SIZE = "custom";
-
-/**
- * @deprecated
- */
-export enum SkeletonType {
-  CIRCLE = "circle",
-  RECTANGLE = "rectangle",
-  TEXT = "text"
-}
-
-/**
- * @deprecated
- */
-export enum TextSkeletonSize {
-  H1 = "h1",
-  H2 = "h2",
-  H3 = "h3",
-  H4 = "h4",
-  H5 = "h5",
-  H6 = "h6",
-  P = "p",
-  SMALL = "small"
-}
-
-export const SKELETON_SIZES = {
-  CUSTOM: SKELETON_CUSTOM_SIZE,
-  CIRCLE: {},
-  RECTANGLE: {},
-  TEXT: TextSkeletonSize
-};
-
-export type SkeletonSizeType = TextSkeletonSize | typeof SKELETON_CUSTOM_SIZE;
diff --git a/packages/core/src/components/Skeleton/__tests__/Skeleton.snapshot.test.jsx b/packages/core/src/components/Skeleton/__tests__/Skeleton.snapshot.test.tsx
similarity index 61%
rename from packages/core/src/components/Skeleton/__tests__/Skeleton.snapshot.test.jsx
rename to packages/core/src/components/Skeleton/__tests__/Skeleton.snapshot.test.tsx
index 63e229712c..92b3b4fac6 100644
--- a/packages/core/src/components/Skeleton/__tests__/Skeleton.snapshot.test.jsx
+++ b/packages/core/src/components/Skeleton/__tests__/Skeleton.snapshot.test.tsx
@@ -11,22 +11,22 @@ describe("Skeleton renders correctly", () => {
 
   describe("renders correctly when rectangle", () => {
     it("with empty props", () => {
-      const tree = renderer.create(<Skeleton type={Skeleton.types.RECTANGLE} />).toJSON();
+      const tree = renderer.create(<Skeleton type="rectangle" />).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
     it("with fixed height", () => {
-      const tree = renderer.create(<Skeleton type={Skeleton.types.RECTANGLE} height={100} />).toJSON();
+      const tree = renderer.create(<Skeleton type="rectangle" height={100} />).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
     it("with fixed width", () => {
-      const tree = renderer.create(<Skeleton type={Skeleton.types.RECTANGLE} width={100} />).toJSON();
+      const tree = renderer.create(<Skeleton type="rectangle" width={100} />).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
     it("with fixed height and width", () => {
-      const tree = renderer.create(<Skeleton type={Skeleton.types.RECTANGLE} width={100} height={100} />).toJSON();
+      const tree = renderer.create(<Skeleton type="rectangle" width={100} height={100} />).toJSON();
       expect(tree).toMatchSnapshot();
     });
   });
@@ -55,52 +55,52 @@ describe("Skeleton renders correctly", () => {
 
   describe("renders correctly when text", () => {
     it("with empty props", () => {
-      const tree = renderer.create(<Skeleton type={Skeleton.types.TEXT} />).toJSON();
+      const tree = renderer.create(<Skeleton type="text" />).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
     it("with fixed height", () => {
-      const tree = renderer.create(<Skeleton type={Skeleton.types.TEXT} height={100} />).toJSON();
+      const tree = renderer.create(<Skeleton type="text" height={100} />).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
     it("with fixed width", () => {
-      const tree = renderer.create(<Skeleton type={Skeleton.types.TEXT} width={100} />).toJSON();
+      const tree = renderer.create(<Skeleton type="text" width={100} />).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
     it("with fixed height and width", () => {
-      const tree = renderer.create(<Skeleton type={Skeleton.types.TEXT} width={100} height={100} />).toJSON();
+      const tree = renderer.create(<Skeleton type="text" width={100} height={100} />).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
     it("with H1 size", () => {
-      const tree = renderer.create(<Skeleton type={Skeleton.types.TEXT} size={Skeleton.types.H1} />).toJSON();
+      const tree = renderer.create(<Skeleton type="text" size="h1" />).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
     it("with H2 size", () => {
-      const tree = renderer.create(<Skeleton type={Skeleton.types.TEXT} size={Skeleton.types.H2} />).toJSON();
+      const tree = renderer.create(<Skeleton type="text" size="h2" />).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
     it("with H3 size", () => {
-      const tree = renderer.create(<Skeleton type={Skeleton.types.TEXT} size={Skeleton.types.H3} />).toJSON();
+      const tree = renderer.create(<Skeleton type="text" size="h3" />).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
     it("with H4 size", () => {
-      const tree = renderer.create(<Skeleton type={Skeleton.types.TEXT} size={Skeleton.types.H4} />).toJSON();
+      const tree = renderer.create(<Skeleton type="text" size="h4" />).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
     it("with H5 size", () => {
-      const tree = renderer.create(<Skeleton type={Skeleton.types.TEXT} size={Skeleton.types.H5} />).toJSON();
+      const tree = renderer.create(<Skeleton type="text" size="h5" />).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
     it("with CUSTOM size", () => {
-      const tree = renderer.create(<Skeleton type={Skeleton.types.TEXT} size={Skeleton.sizes.CUSTOM} />).toJSON();
+      const tree = renderer.create(<Skeleton type="text" size="custom" />).toJSON();
       expect(tree).toMatchSnapshot();
     });
   });
diff --git a/packages/core/src/components/Skeleton/__tests__/__snapshots__/Skeleton.snapshot.test.jsx.snap b/packages/core/src/components/Skeleton/__tests__/__snapshots__/Skeleton.snapshot.test.jsx.snap
index 89f794c657..f4376db358 100644
--- a/packages/core/src/components/Skeleton/__tests__/__snapshots__/Skeleton.snapshot.test.jsx.snap
+++ b/packages/core/src/components/Skeleton/__tests__/__snapshots__/Skeleton.snapshot.test.jsx.snap
@@ -159,7 +159,7 @@ exports[`Skeleton renders correctly > renders correctly when text > with H1 size
   data-testid="skeleton"
 >
   <div
-    className="text textCustom"
+    className="text textH1"
     style={
       {
         "height": undefined,
@@ -176,7 +176,7 @@ exports[`Skeleton renders correctly > renders correctly when text > with H2 size
   data-testid="skeleton"
 >
   <div
-    className="text textCustom"
+    className="text textH2"
     style={
       {
         "height": undefined,
@@ -193,7 +193,7 @@ exports[`Skeleton renders correctly > renders correctly when text > with H3 size
   data-testid="skeleton"
 >
   <div
-    className="text textCustom"
+    className="text textH3"
     style={
       {
         "height": undefined,
@@ -210,7 +210,7 @@ exports[`Skeleton renders correctly > renders correctly when text > with H4 size
   data-testid="skeleton"
 >
   <div
-    className="text textCustom"
+    className="text textH4"
     style={
       {
         "height": undefined,
@@ -227,7 +227,7 @@ exports[`Skeleton renders correctly > renders correctly when text > with H5 size
   data-testid="skeleton"
 >
   <div
-    className="text textCustom"
+    className="text textH5"
     style={
       {
         "height": undefined,
diff --git a/packages/core/src/components/Skeleton/__tests__/__snapshots__/Skeleton.snapshot.test.tsx.snap b/packages/core/src/components/Skeleton/__tests__/__snapshots__/Skeleton.snapshot.test.tsx.snap
new file mode 100644
index 0000000000..f4376db358
--- /dev/null
+++ b/packages/core/src/components/Skeleton/__tests__/__snapshots__/Skeleton.snapshot.test.tsx.snap
@@ -0,0 +1,324 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Skeleton renders correctly > renders correctly when circle > with empty props 1`] = `
+<div
+  className="skeleton"
+  data-testid="skeleton"
+>
+  <div
+    className="circle circleCustom"
+    style={
+      {
+        "height": undefined,
+        "width": undefined,
+      }
+    }
+  />
+</div>
+`;
+
+exports[`Skeleton renders correctly > renders correctly when circle > with fixed height 1`] = `
+<div
+  className="skeleton"
+  data-testid="skeleton"
+>
+  <div
+    className="circle circleCustom"
+    style={
+      {
+        "height": 100,
+        "width": undefined,
+      }
+    }
+  />
+</div>
+`;
+
+exports[`Skeleton renders correctly > renders correctly when circle > with fixed height and width 1`] = `
+<div
+  className="skeleton"
+  data-testid="skeleton"
+>
+  <div
+    className="circle circleCustom"
+    style={
+      {
+        "height": 100,
+        "width": 100,
+      }
+    }
+  />
+</div>
+`;
+
+exports[`Skeleton renders correctly > renders correctly when circle > with fixed width 1`] = `
+<div
+  className="skeleton"
+  data-testid="skeleton"
+>
+  <div
+    className="circle circleCustom"
+    style={
+      {
+        "height": undefined,
+        "width": 100,
+      }
+    }
+  />
+</div>
+`;
+
+exports[`Skeleton renders correctly > renders correctly when rectangle > with empty props 1`] = `
+<div
+  className="skeleton"
+  data-testid="skeleton"
+>
+  <div
+    className="rectangle rectangleCustom"
+    style={
+      {
+        "height": undefined,
+        "width": undefined,
+      }
+    }
+  />
+</div>
+`;
+
+exports[`Skeleton renders correctly > renders correctly when rectangle > with fixed height 1`] = `
+<div
+  className="skeleton"
+  data-testid="skeleton"
+>
+  <div
+    className="rectangle rectangleCustom"
+    style={
+      {
+        "height": 100,
+        "width": undefined,
+      }
+    }
+  />
+</div>
+`;
+
+exports[`Skeleton renders correctly > renders correctly when rectangle > with fixed height and width 1`] = `
+<div
+  className="skeleton"
+  data-testid="skeleton"
+>
+  <div
+    className="rectangle rectangleCustom"
+    style={
+      {
+        "height": 100,
+        "width": 100,
+      }
+    }
+  />
+</div>
+`;
+
+exports[`Skeleton renders correctly > renders correctly when rectangle > with fixed width 1`] = `
+<div
+  className="skeleton"
+  data-testid="skeleton"
+>
+  <div
+    className="rectangle rectangleCustom"
+    style={
+      {
+        "height": undefined,
+        "width": 100,
+      }
+    }
+  />
+</div>
+`;
+
+exports[`Skeleton renders correctly > renders correctly when text > with CUSTOM size 1`] = `
+<div
+  className="skeleton"
+  data-testid="skeleton"
+>
+  <div
+    className="text textCustom"
+    style={
+      {
+        "height": undefined,
+        "width": undefined,
+      }
+    }
+  />
+</div>
+`;
+
+exports[`Skeleton renders correctly > renders correctly when text > with H1 size 1`] = `
+<div
+  className="skeleton"
+  data-testid="skeleton"
+>
+  <div
+    className="text textH1"
+    style={
+      {
+        "height": undefined,
+        "width": undefined,
+      }
+    }
+  />
+</div>
+`;
+
+exports[`Skeleton renders correctly > renders correctly when text > with H2 size 1`] = `
+<div
+  className="skeleton"
+  data-testid="skeleton"
+>
+  <div
+    className="text textH2"
+    style={
+      {
+        "height": undefined,
+        "width": undefined,
+      }
+    }
+  />
+</div>
+`;
+
+exports[`Skeleton renders correctly > renders correctly when text > with H3 size 1`] = `
+<div
+  className="skeleton"
+  data-testid="skeleton"
+>
+  <div
+    className="text textH3"
+    style={
+      {
+        "height": undefined,
+        "width": undefined,
+      }
+    }
+  />
+</div>
+`;
+
+exports[`Skeleton renders correctly > renders correctly when text > with H4 size 1`] = `
+<div
+  className="skeleton"
+  data-testid="skeleton"
+>
+  <div
+    className="text textH4"
+    style={
+      {
+        "height": undefined,
+        "width": undefined,
+      }
+    }
+  />
+</div>
+`;
+
+exports[`Skeleton renders correctly > renders correctly when text > with H5 size 1`] = `
+<div
+  className="skeleton"
+  data-testid="skeleton"
+>
+  <div
+    className="text textH5"
+    style={
+      {
+        "height": undefined,
+        "width": undefined,
+      }
+    }
+  />
+</div>
+`;
+
+exports[`Skeleton renders correctly > renders correctly when text > with empty props 1`] = `
+<div
+  className="skeleton"
+  data-testid="skeleton"
+>
+  <div
+    className="text textCustom"
+    style={
+      {
+        "height": undefined,
+        "width": undefined,
+      }
+    }
+  />
+</div>
+`;
+
+exports[`Skeleton renders correctly > renders correctly when text > with fixed height 1`] = `
+<div
+  className="skeleton"
+  data-testid="skeleton"
+>
+  <div
+    className="text textCustom"
+    style={
+      {
+        "height": 100,
+        "width": undefined,
+      }
+    }
+  />
+</div>
+`;
+
+exports[`Skeleton renders correctly > renders correctly when text > with fixed height and width 1`] = `
+<div
+  className="skeleton"
+  data-testid="skeleton"
+>
+  <div
+    className="text textCustom"
+    style={
+      {
+        "height": 100,
+        "width": 100,
+      }
+    }
+  />
+</div>
+`;
+
+exports[`Skeleton renders correctly > renders correctly when text > with fixed width 1`] = `
+<div
+  className="skeleton"
+  data-testid="skeleton"
+>
+  <div
+    className="text textCustom"
+    style={
+      {
+        "height": undefined,
+        "width": 100,
+      }
+    }
+  />
+</div>
+`;
+
+exports[`Skeleton renders correctly > renders correctly with empty props 1`] = `
+<div
+  className="skeleton"
+  data-testid="skeleton"
+>
+  <div
+    className="rectangle rectangleCustom"
+    style={
+      {
+        "height": undefined,
+        "width": undefined,
+      }
+    }
+  />
+</div>
+`;
diff --git a/packages/core/src/components/SlideTransition/SlideTransition.module.scss b/packages/core/src/components/SlideTransition/SlideTransition.module.scss
index 23b4fb32fb..607e8ad316 100644
--- a/packages/core/src/components/SlideTransition/SlideTransition.module.scss
+++ b/packages/core/src/components/SlideTransition/SlideTransition.module.scss
@@ -2,3 +2,31 @@
   height: 100%;
   width: 100%;
 }
+
+.slideForward {
+  animation: slideInForward 0.25s cubic-bezier(0, 0, 0.4, 1) forwards;
+}
+
+.slideBackward {
+  animation: slideInBackward 0.25s cubic-bezier(0, 0, 0.4, 1) forwards;
+}
+
+@keyframes slideInForward {
+  from {
+    transform: translateX(3%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInBackward {
+  from {
+    transform: translateX(-3%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
diff --git a/packages/core/src/components/SlideTransition/SlideTransition.tsx b/packages/core/src/components/SlideTransition/SlideTransition.tsx
index 82e69aea8a..aaa5a4069a 100644
--- a/packages/core/src/components/SlideTransition/SlideTransition.tsx
+++ b/packages/core/src/components/SlideTransition/SlideTransition.tsx
@@ -1,25 +1,18 @@
 import React, { forwardRef } from "react";
-import { motion } from "framer-motion";
 import cx from "classnames";
-import { slideAnimationVariants, slideAnimationTransition } from "./utils/animationVariants";
 import { type SlideTransitionProps } from "./SlideTransition.types";
 import styles from "./SlideTransition.module.scss";
 
 const SlideTransition = forwardRef(
   ({ direction, style, children, className }: SlideTransitionProps, ref: React.ForwardedRef<HTMLDivElement>) => {
     return (
-      <motion.div
+      <div
         ref={ref}
-        custom={direction}
-        variants={slideAnimationVariants}
-        initial="initial"
-        animate="enter"
-        transition={slideAnimationTransition}
-        className={cx(styles.slide, className)}
+        className={cx(styles.slide, direction === "forward" ? styles.slideForward : styles.slideBackward, className)}
         style={style}
       >
         {children}
-      </motion.div>
+      </div>
     );
   }
 );
diff --git a/packages/core/src/components/SlideTransition/utils/animationVariants.ts b/packages/core/src/components/SlideTransition/utils/animationVariants.ts
deleted file mode 100644
index 67b05eadcf..0000000000
--- a/packages/core/src/components/SlideTransition/utils/animationVariants.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { type SlideDirection } from "../SlideTransition.types";
-
-export const slideAnimationVariants = {
-  initial: (direction: SlideDirection) => ({
-    x: direction === "forward" ? "3%" : "-3%"
-  }),
-  enter: {
-    x: 0
-  }
-};
-
-export const slideAnimationTransition = {
-  duration: 0.25,
-  ease: [0.0, 0.0, 0.4, 1.0]
-};
diff --git a/packages/core/src/components/Slider/SelectionIndicator.module.scss b/packages/core/src/components/Slider/SelectionIndicator.module.scss
index 254466ff7f..9e7b988b3a 100644
--- a/packages/core/src/components/Slider/SelectionIndicator.module.scss
+++ b/packages/core/src/components/Slider/SelectionIndicator.module.scss
@@ -1,4 +1,4 @@
 .selectionIndicator.selectionIndicator.selectionIndicator {
   text-align: center;
-  padding: var(--spacing-small);
+  padding: var(--space-8);
 }
diff --git a/packages/core/src/components/Slider/Slider.tsx b/packages/core/src/components/Slider/Slider.tsx
index a2f8828dd5..1f7cf9180d 100644
--- a/packages/core/src/components/Slider/Slider.tsx
+++ b/packages/core/src/components/Slider/Slider.tsx
@@ -1,5 +1,4 @@
 import React, { forwardRef, type ReactElement, useMemo, useRef } from "react";
-import { BASE_SIZES } from "../../constants";
 import useMergeRef from "../../hooks/useMergeRef";
 import { NOOP } from "../../utils/function-utils";
 import { ensureDefaultValue } from "./SliderHelpers";
@@ -7,9 +6,7 @@ import { SliderProvider } from "./SliderContext";
 import SliderBase from "./SliderBase/SliderBase";
 import SliderInfix from "./SliderInfix";
 import { type IconType } from "@vibe/icon";
-import { SliderColor as SliderColorEnum } from "./SliderConstants";
 import cx from "classnames";
-import { withStaticProps } from "../../types";
 import styles from "./Slider.module.scss";
 import { type SliderColor, type SliderLabelColor, type SliderLabelPosition, type SliderSize } from "./Slider.types";
 import { getStyle } from "../../helpers/typesciptCssModulesHelper";
@@ -19,11 +16,11 @@ export type SliderProps = {
   /**
    * Define a string that labels the current element (Slider)
    */
-  ariaLabel?: string;
+  "aria-label"?: string;
   /**
    * ElementId of Node that have the text needed for labeling the current element (Slider)
    */
-  ariaLabelledby?: string;
+  "aria-labelledby"?: string;
   /**
    * Custom `class name` to be added to the component-root-node
    */
@@ -130,8 +127,8 @@ export type SliderProps = {
 const Slider = forwardRef(
   (
     {
-      ariaLabel,
-      ariaLabelledby,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
       className,
       color,
       "data-testid": dataTestId = "monday-slider",
@@ -165,8 +162,8 @@ const Slider = forwardRef(
     );
     return (
       <SliderProvider
-        ariaLabel={ariaLabel}
-        ariaLabelledby={ariaLabelledby}
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledby}
         color={color}
         data-testid={dataTestId}
         disabled={disabled}
@@ -196,21 +193,13 @@ const Slider = forwardRef(
           id={id}
           ref={mergedRef}
         >
-          <SliderInfix kind={SliderInfix.kinds.PREFIX} />
+          <SliderInfix kind="prefix" />
           <SliderBase />
-          <SliderInfix kind={SliderInfix.kinds.POSTFIX} />
+          <SliderInfix kind="postfix" />
         </div>
       </SliderProvider>
     );
   }
 );
 
-interface SliderStaticProps {
-  sizes: typeof BASE_SIZES;
-  colors: typeof SliderColorEnum;
-}
-
-export default withStaticProps<SliderProps, SliderStaticProps>(Slider, {
-  sizes: BASE_SIZES,
-  colors: SliderColorEnum
-});
+export default Slider;
diff --git a/packages/core/src/components/Slider/SliderBase/SliderBase.module.scss b/packages/core/src/components/Slider/SliderBase/SliderBase.module.scss
index 4efb951431..fe5f4c40bf 100644
--- a/packages/core/src/components/Slider/SliderBase/SliderBase.module.scss
+++ b/packages/core/src/components/Slider/SliderBase/SliderBase.module.scss
@@ -14,7 +14,7 @@
 }
 
 .small {
-  padding: 0 var(--spacing-small);
+  padding: 0 var(--space-8);
 }
 
 .medium {
diff --git a/packages/core/src/components/Slider/SliderBase/SliderRail.tsx b/packages/core/src/components/Slider/SliderBase/SliderRail.tsx
index 10d0b889cb..e34ee0ecad 100644
--- a/packages/core/src/components/Slider/SliderBase/SliderRail.tsx
+++ b/packages/core/src/components/Slider/SliderBase/SliderRail.tsx
@@ -2,7 +2,6 @@ import React, { type ForwardedRef, forwardRef, type ReactElement } from "react";
 import { NOOP } from "../../../utils/function-utils";
 import { useSliderUi } from "../SliderContext";
 import type VibeComponentProps from "../../../types/VibeComponentProps";
-import { type VibeComponent } from "../../../types";
 import cx from "classnames";
 import { getStyle } from "../../../helpers/typesciptCssModulesHelper";
 import styles from "./SliderRail.module.scss";
@@ -23,7 +22,7 @@ export interface SliderRailProps extends VibeComponentProps {
   size: SliderSize;
 }
 
-const SliderRail: VibeComponent<SliderRailProps, unknown> = forwardRef<unknown, SliderRailProps>(
+const SliderRail = forwardRef<unknown, SliderRailProps>(
   ({ className, children, onClick = NOOP, size }: SliderRailProps, ref: ForwardedRef<HTMLDivElement>) => {
     const { shapeTestId } = useSliderUi();
     function handleClick(e: React.MouseEvent) {
diff --git a/packages/core/src/components/Slider/SliderBase/SliderThumb.module.scss b/packages/core/src/components/Slider/SliderBase/SliderThumb.module.scss
index b4d96935ae..371f78463d 100644
--- a/packages/core/src/components/Slider/SliderBase/SliderThumb.module.scss
+++ b/packages/core/src/components/Slider/SliderBase/SliderThumb.module.scss
@@ -1,4 +1,4 @@
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 
 .thumb {
   position: absolute;
diff --git a/packages/core/src/components/Slider/SliderBase/SliderThumb.tsx b/packages/core/src/components/Slider/SliderBase/SliderThumb.tsx
index bb78341538..f2aeda2035 100644
--- a/packages/core/src/components/Slider/SliderBase/SliderThumb.tsx
+++ b/packages/core/src/components/Slider/SliderBase/SliderThumb.tsx
@@ -39,8 +39,8 @@ const SliderThumb: FC<SliderThumbProps> = ({ className, index = 0, onMove = NOOP
   const valueText = ranged ? (valueOrValuesText as unknown as string[])[index] : (valueOrValuesText as string);
   const {
     active,
-    ariaLabel,
-    ariaLabelledby,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
     disabled,
     dragging,
     focused,
diff --git a/packages/core/src/components/Slider/SliderConstants.ts b/packages/core/src/components/Slider/SliderConstants.ts
index 034f1b692d..9947d38874 100644
--- a/packages/core/src/components/Slider/SliderConstants.ts
+++ b/packages/core/src/components/Slider/SliderConstants.ts
@@ -15,23 +15,6 @@ export const UPDATE_SLIDER_SIZE_DEBOUNCE = 200;
 
 export const TOOLTIP_SHOW_DELAY = 300;
 
-/**
- * @deprecated
- */
-export enum InfixKind {
-  PREFIX = "prefix",
-  POSTFIX = "postfix"
-}
-
-/**
- * @deprecated
- */
-export enum SliderColor {
-  PRIMARY = "primary",
-  NEGATIVE = "negative",
-  POSITIVE = "positive"
-}
-
 export type SliderContextSelection = {
   max: number;
   min: number;
@@ -43,8 +26,8 @@ export type SliderContextSelection = {
 
 export type SliderContextUI = {
   active: number;
-  ariaLabel: string;
-  ariaLabelledby: string;
+  "aria-label": string;
+  "aria-labelledby": string;
   color: SliderColorType;
   disabled: boolean;
   dragging: number;
diff --git a/packages/core/src/components/Slider/SliderContext.tsx b/packages/core/src/components/Slider/SliderContext.tsx
index 2df50a2660..49ef8fcf18 100644
--- a/packages/core/src/components/Slider/SliderContext.tsx
+++ b/packages/core/src/components/Slider/SliderContext.tsx
@@ -48,8 +48,8 @@ export interface SliderProviderProps extends SliderProps {
 
 export function SliderProvider({
   children,
-  ariaLabel,
-  ariaLabelledby,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
   color,
   "data-testid": dataTestId,
   defaultValue,
@@ -83,8 +83,8 @@ export function SliderProvider({
   const uiContextValue: SliderContextUI = useMemo(
     () => ({
       active,
-      ariaLabel,
-      ariaLabelledby,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
       color,
       disabled,
       dragging,
diff --git a/packages/core/src/components/Slider/SliderHelpers.ts b/packages/core/src/components/Slider/SliderHelpers.ts
index 4e5a496f04..15f5b09f80 100644
--- a/packages/core/src/components/Slider/SliderHelpers.ts
+++ b/packages/core/src/components/Slider/SliderHelpers.ts
@@ -60,6 +60,9 @@ export function ensureDefaultValue(
   if (ranged && !Array.isArray(defaultValue)) {
     return [min, max];
   }
+  if (Array.isArray(defaultValue)) {
+    return defaultValue;
+  }
   if (defaultValue < min) {
     return min;
   }
diff --git a/packages/core/src/components/Slider/SliderHooks.ts b/packages/core/src/components/Slider/SliderHooks.ts
index 84d1487d92..640e5b845b 100644
--- a/packages/core/src/components/Slider/SliderHooks.ts
+++ b/packages/core/src/components/Slider/SliderHooks.ts
@@ -49,16 +49,17 @@ export function useSliderActionsContextValue(
 
   const _validateValue = useCallback(
     (index: number, newValue: number | number[] | string): number => {
-      if (newValue === "" || Number.isNaN(Number(newValue))) {
+      const numericValue = Number(newValue);
+      if (newValue === "" || Number.isNaN(numericValue)) {
         return index === 1 ? max : min;
       }
-      if (newValue > max) {
+      if (numericValue > max) {
         return max;
       }
-      if (newValue < min) {
+      if (numericValue < min) {
         return min;
       }
-      return newValue as number;
+      return numericValue;
     },
     [min, max]
   );
diff --git a/packages/core/src/components/Slider/SliderInfix.module.scss b/packages/core/src/components/Slider/SliderInfix.module.scss
index d713ebdc7d..755562b9dd 100644
--- a/packages/core/src/components/Slider/SliderInfix.module.scss
+++ b/packages/core/src/components/Slider/SliderInfix.module.scss
@@ -9,9 +9,9 @@
 }
 
 .prefix {
-  margin-right: var(--spacing-small);
+  margin-inline-end: var(--space-8);
 }
 
 .postfix {
-  margin-left: var(--spacing-small);
+  margin-inline-start: var(--space-8);
 }
diff --git a/packages/core/src/components/Slider/SliderInfix.tsx b/packages/core/src/components/Slider/SliderInfix.tsx
index 4b28deca8e..665e728199 100644
--- a/packages/core/src/components/Slider/SliderInfix.tsx
+++ b/packages/core/src/components/Slider/SliderInfix.tsx
@@ -1,9 +1,8 @@
 import React, { type FC } from "react";
-import { InfixKind as InfixKindEnum } from "./SliderConstants";
 import { useSliderInfixComponent } from "./SliderInfixHooks";
 import cx from "classnames";
 import { getStyle } from "../../helpers/typesciptCssModulesHelper";
-import { type VibeComponentProps, withStaticPropsWithoutForwardRef } from "../../types";
+import { type VibeComponentProps } from "../../types";
 import styles from "./SliderInfix.module.scss";
 import { type InfixKind } from "./Slider.types";
 
@@ -14,7 +13,7 @@ export interface SliderInfixProps extends VibeComponentProps {
   kind?: InfixKind;
 }
 
-const SliderInfix: FC<SliderInfixProps> & { kinds?: typeof InfixKindEnum } = ({ kind = SliderInfix.kinds.PREFIX }) => {
+const SliderInfix: FC<SliderInfixProps> = ({ kind = "prefix" }) => {
   const [isShow, modificators, InfixComponent, inlineStyle] = useSliderInfixComponent(kind);
   return (
     isShow && (
@@ -32,6 +31,4 @@ const SliderInfix: FC<SliderInfixProps> & { kinds?: typeof InfixKindEnum } = ({
   );
 };
 
-export default withStaticPropsWithoutForwardRef<SliderInfixProps, { kinds: typeof InfixKindEnum }>(SliderInfix, {
-  kinds: InfixKindEnum
-});
+export default SliderInfix;
diff --git a/packages/core/src/components/Slider/SliderInfixHooks.tsx b/packages/core/src/components/Slider/SliderInfixHooks.tsx
index a0024477b8..e681792175 100644
--- a/packages/core/src/components/Slider/SliderInfixHooks.tsx
+++ b/packages/core/src/components/Slider/SliderInfixHooks.tsx
@@ -6,7 +6,7 @@ import SelectionIndicator from "./SelectionIndicator";
 
 const defaultIconProps = {
   clickable: false,
-  iconSize: 18,
+  size: 18,
   ignoreFocusStyle: true
 };
 
@@ -33,5 +33,5 @@ export function useSliderInfixComponent(kind: InfixKind): [boolean, string[], Re
   if (typeof infix === "undefined") {
     return [false, [], null, {}];
   }
-  return [true, [], <>{infix}</>, {}];
+  return [true, [], <>{infix as ReactElement}</>, {}];
 }
diff --git a/packages/core/src/components/Slider/__tests__/Slider-helpers.test.js b/packages/core/src/components/Slider/__tests__/Slider-helpers.test.ts
similarity index 100%
rename from packages/core/src/components/Slider/__tests__/Slider-helpers.test.js
rename to packages/core/src/components/Slider/__tests__/Slider-helpers.test.ts
diff --git a/packages/core/src/components/Slider/__tests__/Slider-non-ranged.test.jsx b/packages/core/src/components/Slider/__tests__/Slider-non-ranged.test.tsx
similarity index 100%
rename from packages/core/src/components/Slider/__tests__/Slider-non-ranged.test.jsx
rename to packages/core/src/components/Slider/__tests__/Slider-non-ranged.test.tsx
diff --git a/packages/core/src/components/Slider/__tests__/Slider-ranged.test.jsx b/packages/core/src/components/Slider/__tests__/Slider-ranged.test.tsx
similarity index 100%
rename from packages/core/src/components/Slider/__tests__/Slider-ranged.test.jsx
rename to packages/core/src/components/Slider/__tests__/Slider-ranged.test.tsx
diff --git a/packages/core/src/components/Slider/__tests__/Slider.snapshot.test.jsx b/packages/core/src/components/Slider/__tests__/Slider.snapshot.test.tsx
similarity index 93%
rename from packages/core/src/components/Slider/__tests__/Slider.snapshot.test.jsx
rename to packages/core/src/components/Slider/__tests__/Slider.snapshot.test.tsx
index 0b74e8eb9e..a944388a2b 100644
--- a/packages/core/src/components/Slider/__tests__/Slider.snapshot.test.jsx
+++ b/packages/core/src/components/Slider/__tests__/Slider.snapshot.test.tsx
@@ -21,13 +21,13 @@ describe("Slider renders correctly", () => {
     expect(render).toMatchSnapshot();
   });
 
-  it("02. with ariaLabel", async () => {
-    const render = await renderSliderForSnapshots({ ariaLabel: "My Slider" });
+  it("02. with aria-label", async () => {
+    const render = await renderSliderForSnapshots({ "aria-label": "My Slider" });
     expect(render).toMatchSnapshot();
   });
 
-  it("03. with ariaLabelledby", async () => {
-    const render = await renderSliderForSnapshots({ ariaLabelledby: "id-of-the-custom-label" });
+  it("03. with aria-labelledby", async () => {
+    const render = await renderSliderForSnapshots({ "aria-labelledby": "id-of-the-custom-label" });
     expect(render).toMatchSnapshot();
   });
 
diff --git a/packages/core/src/components/Slider/__tests__/__snapshots__/Slider-non-ranged.test.tsx.snap b/packages/core/src/components/Slider/__tests__/__snapshots__/Slider-non-ranged.test.tsx.snap
new file mode 100644
index 0000000000..058e933775
--- /dev/null
+++ b/packages/core/src/components/Slider/__tests__/__snapshots__/Slider-non-ranged.test.tsx.snap
@@ -0,0 +1,421 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`a. Non-ranged Slider: basic renderer 1`] = `
+<div
+  class="slider positionTop"
+  data-testid="monday-slider"
+>
+  <div
+    class="base small"
+    data-testid="monday-slider__base"
+  >
+    <div
+      class="rail small"
+      data-testid="monday-slider__rail"
+    >
+      <div
+        class="track"
+      />
+      <div
+        class="filledTrack"
+        style="left: 0%; width: 20%;"
+      />
+      <div
+        aria-disabled="false"
+        aria-label="my-slider"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="20"
+        aria-valuetext="20%"
+        class="thumb small notDisabledThumb"
+        data-testid="monday-slider__thumb-0"
+        role="slider"
+        style="left: 20%;"
+        tabindex="0"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`b. Non-ranged Slider Active/Inactive > 01. show Tooltip when hover Thumb 1`] = `
+<div
+  class="slider positionTop"
+  data-testid="monday-slider"
+>
+  <div
+    class="base small"
+    data-testid="monday-slider__base"
+  >
+    <div
+      class="rail small"
+      data-testid="monday-slider__rail"
+    >
+      <div
+        class="track"
+      />
+      <div
+        class="filledTrack"
+        style="left: 0%; width: 20%;"
+      />
+      <div
+        aria-disabled="false"
+        aria-label="my-slider"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="20"
+        aria-valuetext="20%"
+        class="thumb small notDisabledThumb"
+        data-testid="monday-slider__thumb-0"
+        role="slider"
+        style="left: 20%;"
+        tabindex="0"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`b. Non-ranged Slider Active/Inactive > 02. hide Tooltip when unhover Thumb 1`] = `
+<div
+  class="slider positionTop"
+  data-testid="monday-slider"
+>
+  <div
+    class="base small"
+    data-testid="monday-slider__base"
+  >
+    <div
+      class="rail small"
+      data-testid="monday-slider__rail"
+    >
+      <div
+        class="track"
+      />
+      <div
+        class="filledTrack"
+        style="left: 0%; width: 20%;"
+      />
+      <div
+        aria-disabled="false"
+        aria-label="my-slider"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="20"
+        aria-valuetext="20%"
+        class="thumb small notDisabledThumb"
+        data-testid="monday-slider__thumb-0"
+        role="slider"
+        style="left: 20%;"
+        tabindex="0"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`b. Non-ranged Slider Active/Inactive > 03. activate Thumb by Tab key press 1`] = `
+<div
+  class="slider positionTop"
+  data-testid="monday-slider"
+>
+  <div
+    class="base small"
+    data-testid="monday-slider__base"
+  >
+    <div
+      class="rail small"
+      data-testid="monday-slider__rail"
+    >
+      <div
+        class="track"
+      />
+      <div
+        class="filledTrack"
+        style="left: 0%; width: 20%;"
+      />
+      <div
+        aria-disabled="false"
+        aria-label="my-slider"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="20"
+        aria-valuetext="20%"
+        class="thumb small notDisabledThumb"
+        data-testid="monday-slider__thumb-0"
+        role="slider"
+        style="left: 20%;"
+        tabindex="0"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`b. Non-ranged Slider Active/Inactive > 04. de-activate Thumb by Tab key press, when Thumb focused 1`] = `
+<div
+  class="slider positionTop"
+  data-testid="monday-slider"
+>
+  <div
+    class="base small"
+    data-testid="monday-slider__base"
+  >
+    <div
+      class="rail small"
+      data-testid="monday-slider__rail"
+    >
+      <div
+        class="track"
+      />
+      <div
+        class="filledTrack"
+        style="left: 0%; width: 20%;"
+      />
+      <div
+        aria-disabled="false"
+        aria-label="my-slider"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="20"
+        aria-valuetext="20%"
+        class="thumb small notDisabledThumb"
+        data-testid="monday-slider__thumb-0"
+        role="slider"
+        style="left: 20%;"
+        tabindex="0"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`c. Non-ranged Slider Key Events > 01. decrease value by Left/Down keys press 1`] = `
+<div
+  class="slider valueShown positionTop"
+  data-testid="monday-slider"
+>
+  <div
+    class="base small"
+    data-testid="monday-slider__base"
+  >
+    <div
+      class="rail small"
+      data-testid="monday-slider__rail"
+    >
+      <div
+        class="track"
+      />
+      <div
+        class="filledTrack"
+        style="left: 0%; width: 18%;"
+      />
+      <div
+        aria-disabled="false"
+        aria-label="my-slider"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="18"
+        aria-valuetext="18%"
+        class="thumb small notDisabledThumb"
+        data-testid="monday-slider__thumb-0"
+        role="slider"
+        style="left: 18%;"
+        tabindex="0"
+      >
+        <label
+          class="label colorPrimary positionTop"
+        >
+          18%
+        </label>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`c. Non-ranged Slider Key Events > 02. increase value by Right/Up keys press 1`] = `
+<div
+  class="slider valueShown positionTop"
+  data-testid="monday-slider"
+>
+  <div
+    class="base small"
+    data-testid="monday-slider__base"
+  >
+    <div
+      class="rail small"
+      data-testid="monday-slider__rail"
+    >
+      <div
+        class="track"
+      />
+      <div
+        class="filledTrack"
+        style="left: 0%; width: 22%;"
+      />
+      <div
+        aria-disabled="false"
+        aria-label="my-slider"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="22"
+        aria-valuetext="22%"
+        class="thumb small notDisabledThumb"
+        data-testid="monday-slider__thumb-0"
+        role="slider"
+        style="left: 22%;"
+        tabindex="0"
+      >
+        <label
+          class="label colorPrimary positionTop"
+        >
+          22%
+        </label>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`c. Non-ranged Slider Key Events > 03. decrease value (step 10%) by PageDown key press 1`] = `
+<div
+  class="slider valueShown positionTop"
+  data-testid="monday-slider"
+>
+  <div
+    class="base small"
+    data-testid="monday-slider__base"
+  >
+    <div
+      class="rail small"
+      data-testid="monday-slider__rail"
+    >
+      <div
+        class="track"
+      />
+      <div
+        class="filledTrack"
+        style="left: 0%; width: 10%;"
+      />
+      <div
+        aria-disabled="false"
+        aria-label="my-slider"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="10"
+        aria-valuetext="10%"
+        class="thumb small notDisabledThumb"
+        data-testid="monday-slider__thumb-0"
+        role="slider"
+        style="left: 10%;"
+        tabindex="0"
+      >
+        <label
+          class="label colorPrimary positionTop"
+        >
+          10%
+        </label>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`c. Non-ranged Slider Key Events > 04. increase value (step 10%) by PageUp key pres 1`] = `
+<div
+  class="slider valueShown positionTop"
+  data-testid="monday-slider"
+>
+  <div
+    class="base small"
+    data-testid="monday-slider__base"
+  >
+    <div
+      class="rail small"
+      data-testid="monday-slider__rail"
+    >
+      <div
+        class="track"
+      />
+      <div
+        class="filledTrack"
+        style="left: 0%; width: 40%;"
+      />
+      <div
+        aria-disabled="false"
+        aria-label="my-slider"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="40"
+        aria-valuetext="40%"
+        class="thumb small notDisabledThumb"
+        data-testid="monday-slider__thumb-0"
+        role="slider"
+        style="left: 40%;"
+        tabindex="0"
+      >
+        <label
+          class="label colorPrimary positionTop"
+        >
+          40%
+        </label>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`c. Non-ranged Slider Key Events > 05. change value by keys press in Step and Label mode 1`] = `
+<div
+  class="slider valueShown positionTop"
+  data-testid="monday-slider"
+>
+  <div
+    class="base small"
+    data-testid="monday-slider__base"
+  >
+    <div
+      class="rail small"
+      data-testid="monday-slider__rail"
+    >
+      <div
+        class="track"
+      />
+      <div
+        class="filledTrack"
+        style="left: 0%; width: 40%;"
+      />
+      <div
+        aria-disabled="false"
+        aria-label="my-slider"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="40"
+        aria-valuetext="40%"
+        class="thumb small notDisabledThumb"
+        data-testid="monday-slider__thumb-0"
+        role="slider"
+        style="left: 40%;"
+        tabindex="0"
+      >
+        <label
+          class="label colorPrimary positionTop"
+        >
+          40%
+        </label>
+      </div>
+    </div>
+  </div>
+  <div
+    class="infix postfix"
+    style="width: 60px;"
+  >
+    <div
+      data-testid="mock-text-field-comp"
+    >
+      {"value":"40%","className":"selectionIndicator"}
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/core/src/components/Slider/__tests__/__snapshots__/Slider-ranged.test.tsx.snap b/packages/core/src/components/Slider/__tests__/__snapshots__/Slider-ranged.test.tsx.snap
new file mode 100644
index 0000000000..d7b783c93f
--- /dev/null
+++ b/packages/core/src/components/Slider/__tests__/__snapshots__/Slider-ranged.test.tsx.snap
@@ -0,0 +1,669 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`a. Ranges Slider: basic renderer 1`] = `
+<div
+  class="slider positionTop"
+  data-testid="monday-slider"
+>
+  <div
+    class="base small"
+    data-testid="monday-slider__base"
+  >
+    <div
+      class="rail small"
+      data-testid="monday-slider__rail"
+    >
+      <div
+        class="track"
+      />
+      <div
+        class="filledTrack"
+        style="left: 25%; width: 40%;"
+      />
+      <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="25"
+        aria-valuetext="25%"
+        class="thumb small notDisabledThumb"
+        data-testid="monday-slider__thumb-0"
+        role="slider"
+        style="left: 25%;"
+        tabindex="0"
+      />
+      <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="65"
+        aria-valuetext="65%"
+        class="thumb small notDisabledThumb"
+        data-testid="monday-slider__thumb-1"
+        role="slider"
+        style="left: 65%;"
+        tabindex="0"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`b. Ranges Slider Active/Inactive > 01. show Tooltip when hover Start Thumb 1`] = `
+<div
+  class="slider positionTop"
+  data-testid="monday-slider"
+>
+  <div
+    class="base small"
+    data-testid="monday-slider__base"
+  >
+    <div
+      class="rail small"
+      data-testid="monday-slider__rail"
+    >
+      <div
+        class="track"
+      />
+      <div
+        class="filledTrack"
+        style="left: 25%; width: 40%;"
+      />
+      <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="25"
+        aria-valuetext="25%"
+        class="thumb small notDisabledThumb"
+        data-testid="monday-slider__thumb-0"
+        role="slider"
+        style="left: 25%;"
+        tabindex="0"
+      />
+      <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="65"
+        aria-valuetext="65%"
+        class="thumb small notDisabledThumb"
+        data-testid="monday-slider__thumb-1"
+        role="slider"
+        style="left: 65%;"
+        tabindex="0"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`b. Ranges Slider Active/Inactive > 02. show Tooltip when hover End Thumb 1`] = `
+<div
+  class="slider positionTop"
+  data-testid="monday-slider"
+>
+  <div
+    class="base small"
+    data-testid="monday-slider__base"
+  >
+    <div
+      class="rail small"
+      data-testid="monday-slider__rail"
+    >
+      <div
+        class="track"
+      />
+      <div
+        class="filledTrack"
+        style="left: 25%; width: 40%;"
+      />
+      <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="25"
+        aria-valuetext="25%"
+        class="thumb small notDisabledThumb"
+        data-testid="monday-slider__thumb-0"
+        role="slider"
+        style="left: 25%;"
+        tabindex="0"
+      />
+      <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="65"
+        aria-valuetext="65%"
+        class="thumb small notDisabledThumb"
+        data-testid="monday-slider__thumb-1"
+        role="slider"
+        style="left: 65%;"
+        tabindex="0"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`b. Ranges Slider Active/Inactive > 03. hide Tooltip when unhover Thumb 1`] = `
+<div
+  class="slider positionTop"
+  data-testid="monday-slider"
+>
+  <div
+    class="base small"
+    data-testid="monday-slider__base"
+  >
+    <div
+      class="rail small"
+      data-testid="monday-slider__rail"
+    >
+      <div
+        class="track"
+      />
+      <div
+        class="filledTrack"
+        style="left: 25%; width: 40%;"
+      />
+      <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="25"
+        aria-valuetext="25%"
+        class="thumb small notDisabledThumb"
+        data-testid="monday-slider__thumb-0"
+        role="slider"
+        style="left: 25%;"
+        tabindex="0"
+      />
+      <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="65"
+        aria-valuetext="65%"
+        class="thumb small notDisabledThumb"
+        data-testid="monday-slider__thumb-1"
+        role="slider"
+        style="left: 65%;"
+        tabindex="0"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`b. Ranges Slider Active/Inactive > 04. activate Start Thumb by Tab key press 1`] = `
+<div
+  class="slider positionTop"
+  data-testid="monday-slider"
+>
+  <div
+    class="base small"
+    data-testid="monday-slider__base"
+  >
+    <div
+      class="rail small"
+      data-testid="monday-slider__rail"
+    >
+      <div
+        class="track"
+      />
+      <div
+        class="filledTrack"
+        style="left: 25%; width: 40%;"
+      />
+      <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="25"
+        aria-valuetext="25%"
+        class="thumb small notDisabledThumb"
+        data-testid="monday-slider__thumb-0"
+        role="slider"
+        style="left: 25%;"
+        tabindex="0"
+      />
+      <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="65"
+        aria-valuetext="65%"
+        class="thumb small notDisabledThumb"
+        data-testid="monday-slider__thumb-1"
+        role="slider"
+        style="left: 65%;"
+        tabindex="0"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`b. Ranges Slider Active/Inactive > 05. activate End Thumb by Tab key press 1`] = `
+<div
+  class="slider positionTop"
+  data-testid="monday-slider"
+>
+  <div
+    class="base small"
+    data-testid="monday-slider__base"
+  >
+    <div
+      class="rail small"
+      data-testid="monday-slider__rail"
+    >
+      <div
+        class="track"
+      />
+      <div
+        class="filledTrack"
+        style="left: 25%; width: 40%;"
+      />
+      <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="25"
+        aria-valuetext="25%"
+        class="thumb small focused notDisabledThumb"
+        data-testid="monday-slider__thumb-0"
+        role="slider"
+        style="left: 25%;"
+        tabindex="0"
+      />
+      <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="65"
+        aria-valuetext="65%"
+        class="thumb small focused notDisabledThumb"
+        data-testid="monday-slider__thumb-1"
+        role="slider"
+        style="left: 65%;"
+        tabindex="0"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`b. Ranges Slider Active/Inactive > 06. de-activate Thumb by Tab key press, when End Thumb focused 1`] = `
+<div
+  class="slider positionTop"
+  data-testid="monday-slider"
+>
+  <div
+    class="base small"
+    data-testid="monday-slider__base"
+  >
+    <div
+      class="rail small"
+      data-testid="monday-slider__rail"
+    >
+      <div
+        class="track"
+      />
+      <div
+        class="filledTrack"
+        style="left: 25%; width: 40%;"
+      />
+      <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="25"
+        aria-valuetext="25%"
+        class="thumb small notDisabledThumb"
+        data-testid="monday-slider__thumb-0"
+        role="slider"
+        style="left: 25%;"
+        tabindex="0"
+      />
+      <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="65"
+        aria-valuetext="65%"
+        class="thumb small notDisabledThumb"
+        data-testid="monday-slider__thumb-1"
+        role="slider"
+        style="left: 65%;"
+        tabindex="0"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`c. Ranges Slider Key Events > 01. decrease value by Left/Down keys press 1`] = `
+<div
+  class="slider valueShown positionTop"
+  data-testid="monday-slider"
+>
+  <div
+    class="base small"
+    data-testid="monday-slider__base"
+  >
+    <div
+      class="rail small"
+      data-testid="monday-slider__rail"
+    >
+      <div
+        class="track"
+      />
+      <div
+        class="filledTrack"
+        style="left: 23%; width: 42%;"
+      />
+      <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="23"
+        aria-valuetext="23%"
+        class="thumb small notDisabledThumb"
+        data-testid="monday-slider__thumb-0"
+        role="slider"
+        style="left: 23%;"
+        tabindex="0"
+      >
+        <label
+          class="label colorPrimary positionTop"
+        >
+          23%
+        </label>
+      </div>
+      <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="65"
+        aria-valuetext="65%"
+        class="thumb small notDisabledThumb"
+        data-testid="monday-slider__thumb-1"
+        role="slider"
+        style="left: 65%;"
+        tabindex="0"
+      >
+        <label
+          class="label colorPrimary positionTop"
+        >
+          65%
+        </label>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`c. Ranges Slider Key Events > 02. increase value by Right/Up keys press 1`] = `
+<div
+  class="slider valueShown positionTop"
+  data-testid="monday-slider"
+>
+  <div
+    class="base small"
+    data-testid="monday-slider__base"
+  >
+    <div
+      class="rail small"
+      data-testid="monday-slider__rail"
+    >
+      <div
+        class="track"
+      />
+      <div
+        class="filledTrack"
+        style="left: 25%; width: 42%;"
+      />
+      <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="25"
+        aria-valuetext="25%"
+        class="thumb small focused notDisabledThumb"
+        data-testid="monday-slider__thumb-0"
+        role="slider"
+        style="left: 25%;"
+        tabindex="0"
+      >
+        <label
+          class="label colorPrimary positionTop"
+        >
+          25%
+        </label>
+      </div>
+      <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="67"
+        aria-valuetext="67%"
+        class="thumb small focused notDisabledThumb"
+        data-testid="monday-slider__thumb-1"
+        role="slider"
+        style="left: 67%;"
+        tabindex="0"
+      >
+        <label
+          class="label colorPrimary positionTop"
+        >
+          67%
+        </label>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`c. Ranges Slider Key Events > 03. decrease value (step 10%) by PageDown key press 1`] = `
+<div
+  class="slider valueShown positionTop"
+  data-testid="monday-slider"
+>
+  <div
+    class="base small"
+    data-testid="monday-slider__base"
+  >
+    <div
+      class="rail small"
+      data-testid="monday-slider__rail"
+    >
+      <div
+        class="track"
+      />
+      <div
+        class="filledTrack"
+        style="left: 25%; width: 30%;"
+      />
+      <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="25"
+        aria-valuetext="25%"
+        class="thumb small focused notDisabledThumb"
+        data-testid="monday-slider__thumb-0"
+        role="slider"
+        style="left: 25%;"
+        tabindex="0"
+      >
+        <label
+          class="label colorPrimary positionTop"
+        >
+          25%
+        </label>
+      </div>
+      <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="55"
+        aria-valuetext="55%"
+        class="thumb small focused notDisabledThumb"
+        data-testid="monday-slider__thumb-1"
+        role="slider"
+        style="left: 55%;"
+        tabindex="0"
+      >
+        <label
+          class="label colorPrimary positionTop"
+        >
+          55%
+        </label>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`c. Ranges Slider Key Events > 04. increase value (step 10%) by PageUp key pres 1`] = `
+<div
+  class="slider valueShown positionTop"
+  data-testid="monday-slider"
+>
+  <div
+    class="base small"
+    data-testid="monday-slider__base"
+  >
+    <div
+      class="rail small"
+      data-testid="monday-slider__rail"
+    >
+      <div
+        class="track"
+      />
+      <div
+        class="filledTrack"
+        style="left: 45%; width: 20%;"
+      />
+      <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="45"
+        aria-valuetext="45%"
+        class="thumb small notDisabledThumb"
+        data-testid="monday-slider__thumb-0"
+        role="slider"
+        style="left: 45%;"
+        tabindex="0"
+      >
+        <label
+          class="label colorPrimary positionTop"
+        >
+          45%
+        </label>
+      </div>
+      <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="65"
+        aria-valuetext="65%"
+        class="thumb small notDisabledThumb"
+        data-testid="monday-slider__thumb-1"
+        role="slider"
+        style="left: 65%;"
+        tabindex="0"
+      >
+        <label
+          class="label colorPrimary positionTop"
+        >
+          65%
+        </label>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`c. Ranges Slider Key Events > 05. change value by keys press in Step and Label mode 1`] = `
+<div
+  class="slider valueShown positionTop"
+  data-testid="monday-slider"
+>
+  <div
+    class="infix prefix"
+    style="width: 60px;"
+  >
+    <div
+      data-testid="mock-text-field-comp"
+    >
+      {"value":"45%","className":"selectionIndicator"}
+    </div>
+  </div>
+  <div
+    class="base small"
+    data-testid="monday-slider__base"
+  >
+    <div
+      class="rail small"
+      data-testid="monday-slider__rail"
+    >
+      <div
+        class="track"
+      />
+      <div
+        class="filledTrack"
+        style="left: 45%; width: 20%;"
+      />
+      <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="45"
+        aria-valuetext="45%"
+        class="thumb small notDisabledThumb"
+        data-testid="monday-slider__thumb-0"
+        role="slider"
+        style="left: 45%;"
+        tabindex="0"
+      >
+        <label
+          class="label colorPrimary positionTop"
+        >
+          45%
+        </label>
+      </div>
+      <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="65"
+        aria-valuetext="65%"
+        class="thumb small notDisabledThumb"
+        data-testid="monday-slider__thumb-1"
+        role="slider"
+        style="left: 65%;"
+        tabindex="0"
+      >
+        <label
+          class="label colorPrimary positionTop"
+        >
+          65%
+        </label>
+      </div>
+    </div>
+  </div>
+  <div
+    class="infix postfix"
+    style="width: 60px;"
+  >
+    <div
+      data-testid="mock-text-field-comp"
+    >
+      {"value":"65%","className":"selectionIndicator"}
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/core/src/components/Slider/__tests__/__snapshots__/Slider.snapshot.test.jsx.snap b/packages/core/src/components/Slider/__tests__/__snapshots__/Slider.snapshot.test.jsx.snap
index 8080ca24e4..65e85eada5 100644
--- a/packages/core/src/components/Slider/__tests__/__snapshots__/Slider.snapshot.test.jsx.snap
+++ b/packages/core/src/components/Slider/__tests__/__snapshots__/Slider.snapshot.test.jsx.snap
@@ -37,7 +37,7 @@ exports[`Slider renders correctly > 01. with empty props 1`] = `
 </div>
 `;
 
-exports[`Slider renders correctly > 02. with ariaLabel 1`] = `
+exports[`Slider renders correctly > 02. with aria-label 1`] = `
 <div
   class="slider positionTop"
   data-testid="monday-slider"
@@ -75,7 +75,7 @@ exports[`Slider renders correctly > 02. with ariaLabel 1`] = `
 </div>
 `;
 
-exports[`Slider renders correctly > 03. with ariaLabelledby 1`] = `
+exports[`Slider renders correctly > 03. with aria-labelledby 1`] = `
 <div
   class="slider positionTop"
   data-testid="monday-slider"
@@ -582,7 +582,7 @@ exports[`Slider renders correctly > 15. with prefix (string) and postfix (Icon)
     <div
       data-testid="mock-icon"
     >
-      {"clickable":false,"iconSize":18,"ignoreFocusStyle":true,"icon":"Sound"}
+      {"clickable":false,"size":18,"ignoreFocusStyle":true,"icon":"Sound"}
     </div>
   </div>
 </div>
diff --git a/packages/core/src/components/Slider/__tests__/__snapshots__/Slider.snapshot.test.tsx.snap b/packages/core/src/components/Slider/__tests__/__snapshots__/Slider.snapshot.test.tsx.snap
new file mode 100644
index 0000000000..65e85eada5
--- /dev/null
+++ b/packages/core/src/components/Slider/__tests__/__snapshots__/Slider.snapshot.test.tsx.snap
@@ -0,0 +1,736 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Slider renders correctly > 01. with empty props 1`] = `
+<div
+  class="slider positionTop"
+  data-testid="monday-slider"
+>
+  <div
+    class="base small"
+    data-testid="monday-slider__base"
+  >
+    <div
+      class="rail small"
+      data-testid="monday-slider__rail"
+    >
+      <div
+        class="track"
+      />
+      <div
+        class="filledTrack"
+        style="left: 0%; width: 0%;"
+      />
+      <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="0"
+        aria-valuetext="0%"
+        class="thumb small notDisabledThumb"
+        data-testid="monday-slider__thumb-0"
+        role="slider"
+        style="left: 0%;"
+        tabindex="0"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Slider renders correctly > 02. with aria-label 1`] = `
+<div
+  class="slider positionTop"
+  data-testid="monday-slider"
+>
+  <div
+    class="base small"
+    data-testid="monday-slider__base"
+  >
+    <div
+      class="rail small"
+      data-testid="monday-slider__rail"
+    >
+      <div
+        class="track"
+      />
+      <div
+        class="filledTrack"
+        style="left: 0%; width: 0%;"
+      />
+      <div
+        aria-disabled="false"
+        aria-label="My Slider"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="0"
+        aria-valuetext="0%"
+        class="thumb small notDisabledThumb"
+        data-testid="monday-slider__thumb-0"
+        role="slider"
+        style="left: 0%;"
+        tabindex="0"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Slider renders correctly > 03. with aria-labelledby 1`] = `
+<div
+  class="slider positionTop"
+  data-testid="monday-slider"
+>
+  <div
+    class="base small"
+    data-testid="monday-slider__base"
+  >
+    <div
+      class="rail small"
+      data-testid="monday-slider__rail"
+    >
+      <div
+        class="track"
+      />
+      <div
+        class="filledTrack"
+        style="left: 0%; width: 0%;"
+      />
+      <div
+        aria-disabled="false"
+        aria-labelledby="id-of-the-custom-label"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="0"
+        aria-valuetext="0%"
+        class="thumb small notDisabledThumb"
+        data-testid="monday-slider__thumb-0"
+        role="slider"
+        style="left: 0%;"
+        tabindex="0"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Slider renders correctly > 04. with custom className 1`] = `
+<div
+  class="slider positionTop slide-me"
+  data-testid="monday-slider"
+>
+  <div
+    class="base small"
+    data-testid="monday-slider__base"
+  >
+    <div
+      class="rail small"
+      data-testid="monday-slider__rail"
+    >
+      <div
+        class="track"
+      />
+      <div
+        class="filledTrack"
+        style="left: 0%; width: 0%;"
+      />
+      <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="0"
+        aria-valuetext="0%"
+        class="thumb small notDisabledThumb"
+        data-testid="monday-slider__thumb-0"
+        role="slider"
+        style="left: 0%;"
+        tabindex="0"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Slider renders correctly > 05. with id and data-testid 1`] = `
+<div
+  class="slider positionTop"
+  data-testid="my-slider"
+  id="my-slider"
+>
+  <div
+    class="base small"
+    data-testid="my-slider__base"
+  >
+    <div
+      class="rail small"
+      data-testid="my-slider__rail"
+    >
+      <div
+        class="track"
+      />
+      <div
+        class="filledTrack"
+        style="left: 0%; width: 0%;"
+      />
+      <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="0"
+        aria-valuetext="0%"
+        class="thumb small notDisabledThumb"
+        data-testid="my-slider__thumb-0"
+        role="slider"
+        style="left: 0%;"
+        tabindex="0"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Slider renders correctly > 06. with disabled 1`] = `
+<div
+  class="slider positionTop"
+  data-testid="monday-slider"
+>
+  <div
+    class="base small disabled"
+    data-testid="monday-slider__base"
+  >
+    <div
+      class="rail small"
+      data-testid="monday-slider__rail"
+    >
+      <div
+        class="track"
+      />
+      <div
+        class="filledTrack"
+        style="left: 0%; width: 0%;"
+      />
+      <div
+        aria-disabled="true"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="0"
+        aria-valuetext="0%"
+        class="thumb small"
+        data-testid="monday-slider__thumb-0"
+        role="slider"
+        style="left: 0%;"
+        tabindex="-1"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Slider renders correctly > 07. with color 1`] = `
+<div
+  class="slider positionTop"
+  data-testid="monday-slider"
+>
+  <div
+    class="base small positive"
+    data-testid="monday-slider__base"
+  >
+    <div
+      class="rail small"
+      data-testid="monday-slider__rail"
+    >
+      <div
+        class="track positive"
+      />
+      <div
+        class="filledTrack positive"
+        style="left: 0%; width: 0%;"
+      />
+      <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="0"
+        aria-valuetext="0%"
+        class="thumb positive small notDisabledThumb"
+        data-testid="monday-slider__thumb-0"
+        role="slider"
+        style="left: 0%;"
+        tabindex="0"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Slider renders correctly > 08. with size 1`] = `
+<div
+  class="slider positionTop"
+  data-testid="monday-slider"
+>
+  <div
+    class="base large"
+    data-testid="monday-slider__base"
+  >
+    <div
+      class="rail large"
+      data-testid="monday-slider__rail"
+    >
+      <div
+        class="track"
+      />
+      <div
+        class="filledTrack"
+        style="left: 0%; width: 0%;"
+      />
+      <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="0"
+        aria-valuetext="0%"
+        class="thumb large notDisabledThumb"
+        data-testid="monday-slider__thumb-0"
+        role="slider"
+        style="left: 0%;"
+        tabindex="0"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Slider renders correctly > 09. with min, max, and step 1`] = `
+<div
+  class="slider positionTop"
+  data-testid="monday-slider"
+>
+  <div
+    class="base small"
+    data-testid="monday-slider__base"
+  >
+    <div
+      class="rail small"
+      data-testid="monday-slider__rail"
+    >
+      <div
+        class="track"
+      />
+      <div
+        class="filledTrack"
+        style="left: 0%; width: 0%;"
+      />
+      <div
+        aria-disabled="false"
+        aria-valuemax="20"
+        aria-valuemin="10"
+        aria-valuenow="10"
+        aria-valuetext="10%"
+        class="thumb small notDisabledThumb"
+        data-testid="monday-slider__thumb-0"
+        role="slider"
+        style="left: 0%;"
+        tabindex="0"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Slider renders correctly > 10. with showValue 1`] = `
+<div
+  class="slider valueShown positionTop"
+  data-testid="monday-slider"
+>
+  <div
+    class="base small"
+    data-testid="monday-slider__base"
+  >
+    <div
+      class="rail small"
+      data-testid="monday-slider__rail"
+    >
+      <div
+        class="track"
+      />
+      <div
+        class="filledTrack"
+        style="left: 0%; width: 0%;"
+      />
+      <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="0"
+        aria-valuetext="0%"
+        class="thumb small notDisabledThumb"
+        data-testid="monday-slider__thumb-0"
+        role="slider"
+        style="left: 0%;"
+        tabindex="0"
+      >
+        <label
+          class="label colorPrimary positionTop"
+        >
+          0%
+        </label>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Slider renders correctly > 11. with valueFormatter 1`] = `
+<div
+  class="slider positionTop"
+  data-testid="monday-slider"
+>
+  <div
+    class="base small"
+    data-testid="monday-slider__base"
+  >
+    <div
+      class="rail small"
+      data-testid="monday-slider__rail"
+    >
+      <div
+        class="track"
+      />
+      <div
+        class="filledTrack"
+        style="left: 0%; width: 0%;"
+      />
+      <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="0"
+        aria-valuetext="--0GB--"
+        class="thumb small notDisabledThumb"
+        data-testid="monday-slider__thumb-0"
+        role="slider"
+        style="left: 0%;"
+        tabindex="0"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Slider renders correctly > 12. with value (controlled component) 1`] = `
+<div
+  class="slider positionTop"
+  data-testid="monday-slider"
+>
+  <div
+    class="base small"
+    data-testid="monday-slider__base"
+  >
+    <div
+      class="rail small"
+      data-testid="monday-slider__rail"
+    >
+      <div
+        class="track"
+      />
+      <div
+        class="filledTrack"
+        style="left: 0%; width: 12%;"
+      />
+      <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="12"
+        aria-valuetext="12%"
+        class="thumb small notDisabledThumb"
+        data-testid="monday-slider__thumb-0"
+        role="slider"
+        style="left: 12%;"
+        tabindex="0"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Slider renders correctly > 13. with value, valueText (controlled component) 1`] = `
+<div
+  class="slider positionTop"
+  data-testid="monday-slider"
+>
+  <div
+    class="base small"
+    data-testid="monday-slider__base"
+  >
+    <div
+      class="rail small"
+      data-testid="monday-slider__rail"
+    >
+      <div
+        class="track"
+      />
+      <div
+        class="filledTrack"
+        style="left: 0%; width: 15%;"
+      />
+      <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="15"
+        aria-valuetext="15kg"
+        class="thumb small notDisabledThumb"
+        data-testid="monday-slider__thumb-0"
+        role="slider"
+        style="left: 15%;"
+        tabindex="0"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Slider renders correctly > 14. with indicateSelection 1`] = `
+<div
+  class="slider positionTop"
+  data-testid="monday-slider"
+>
+  <div
+    class="base small"
+    data-testid="monday-slider__base"
+  >
+    <div
+      class="rail small"
+      data-testid="monday-slider__rail"
+    >
+      <div
+        class="track"
+      />
+      <div
+        class="filledTrack"
+        style="left: 0%; width: 0%;"
+      />
+      <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="0"
+        aria-valuetext="0%"
+        class="thumb small notDisabledThumb"
+        data-testid="monday-slider__thumb-0"
+        role="slider"
+        style="left: 0%;"
+        tabindex="0"
+      />
+    </div>
+  </div>
+  <div
+    class="infix postfix"
+    style="width: 60px;"
+  >
+    <div
+      data-testid="mock-text-field-comp"
+    >
+      {"value":"0%","className":"selectionIndicator"}
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Slider renders correctly > 15. with prefix (string) and postfix (Icon) 1`] = `
+<div
+  class="slider positionTop"
+  data-testid="monday-slider"
+>
+  <div
+    class="infix prefix txt"
+  >
+    Vol
+  </div>
+  <div
+    class="base small"
+    data-testid="monday-slider__base"
+  >
+    <div
+      class="rail small"
+      data-testid="monday-slider__rail"
+    >
+      <div
+        class="track"
+      />
+      <div
+        class="filledTrack"
+        style="left: 0%; width: 0%;"
+      />
+      <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="0"
+        aria-valuetext="0%"
+        class="thumb small notDisabledThumb"
+        data-testid="monday-slider__thumb-0"
+        role="slider"
+        style="left: 0%;"
+        tabindex="0"
+      />
+    </div>
+  </div>
+  <div
+    class="infix postfix"
+  >
+    <div
+      data-testid="mock-icon"
+    >
+      {"clickable":false,"size":18,"ignoreFocusStyle":true,"icon":"Sound"}
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Slider renders correctly > 16. with prefix (custom) and postfix (render-props) 1`] = `
+<div
+  class="slider positionTop"
+  data-testid="monday-slider"
+>
+  <div
+    class="infix prefix"
+  >
+    <div>
+      Custom component
+    </div>
+  </div>
+  <div
+    class="base small"
+    data-testid="monday-slider__base"
+  >
+    <div
+      class="rail small"
+      data-testid="monday-slider__rail"
+    >
+      <div
+        class="track"
+      />
+      <div
+        class="filledTrack"
+        style="left: 0%; width: 0%;"
+      />
+      <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="0"
+        aria-valuetext="0%"
+        class="thumb small notDisabledThumb"
+        data-testid="monday-slider__thumb-0"
+        role="slider"
+        style="left: 0%;"
+        tabindex="0"
+      />
+    </div>
+  </div>
+  <div
+    class="infix postfix"
+  >
+    Render Props result: 0% (0)
+  </div>
+</div>
+`;
+
+exports[`Slider renders correctly > 17. with ranged (ranged slider) 1`] = `
+<div
+  class="slider positionTop"
+  data-testid="monday-slider"
+>
+  <div
+    class="base small"
+    data-testid="monday-slider__base"
+  >
+    <div
+      class="rail small"
+      data-testid="monday-slider__rail"
+    >
+      <div
+        class="track"
+      />
+      <div
+        class="filledTrack"
+        style="left: 0%; width: 100%;"
+      />
+      <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="0"
+        aria-valuetext="0%"
+        class="thumb small notDisabledThumb"
+        data-testid="monday-slider__thumb-0"
+        role="slider"
+        style="left: 0%;"
+        tabindex="0"
+      />
+      <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="100"
+        aria-valuetext="100%"
+        class="thumb small notDisabledThumb"
+        data-testid="monday-slider__thumb-1"
+        role="slider"
+        style="left: 100%;"
+        tabindex="0"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Slider renders correctly > 18. ranged slider with options 1`] = `
+<div
+  class="slider positionTop"
+  data-testid="monday-slider"
+>
+  <div
+    class="base small"
+    data-testid="monday-slider__base"
+  >
+    <div
+      class="rail small"
+      data-testid="monday-slider__rail"
+    >
+      <div
+        class="track"
+      />
+      <div
+        class="filledTrack"
+        style="left: 25%; width: 25%;"
+      />
+      <div
+        aria-disabled="false"
+        aria-valuemax="50"
+        aria-valuemin="10"
+        aria-valuenow="20"
+        aria-valuetext="20%"
+        class="thumb small notDisabledThumb"
+        data-testid="monday-slider__thumb-0"
+        role="slider"
+        style="left: 25%;"
+        tabindex="0"
+      />
+      <div
+        aria-disabled="false"
+        aria-valuemax="50"
+        aria-valuemin="10"
+        aria-valuenow="30"
+        aria-valuetext="30%"
+        class="thumb small notDisabledThumb"
+        data-testid="monday-slider__thumb-1"
+        role="slider"
+        style="left: 50%;"
+        tabindex="0"
+      />
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/core/src/components/Slider/__tests__/sliderTestUtils.jsx b/packages/core/src/components/Slider/__tests__/sliderTestUtils.tsx
similarity index 91%
rename from packages/core/src/components/Slider/__tests__/sliderTestUtils.jsx
rename to packages/core/src/components/Slider/__tests__/sliderTestUtils.tsx
index 0e74422662..9b29811050 100644
--- a/packages/core/src/components/Slider/__tests__/sliderTestUtils.jsx
+++ b/packages/core/src/components/Slider/__tests__/sliderTestUtils.tsx
@@ -5,7 +5,7 @@ import Slider from "../Slider";
 export const SLIDER_LABEL = "my-slider";
 
 export async function renderSliderInNonRangeMode(props = {}) {
-  const renderResult = render(<Slider ariaLabel={SLIDER_LABEL} defaultValue={20} {...props} />);
+  const renderResult = render(<Slider aria-label={SLIDER_LABEL} defaultValue={20} {...props} />);
   // noinspection JSCheckFunctionSignatures
   const elThumb = await screen.findByLabelText(SLIDER_LABEL);
   return { ...renderResult, elThumb };
diff --git a/packages/core/src/components/SplitButton/SplitButton.module.scss b/packages/core/src/components/SplitButton/SplitButton.module.scss
index 423832467d..257fd14062 100644
--- a/packages/core/src/components/SplitButton/SplitButton.module.scss
+++ b/packages/core/src/components/SplitButton/SplitButton.module.scss
@@ -6,11 +6,11 @@
 }
 
 .button .mainButton {
-  margin-right: 0;
+  margin-inline-end: 0;
 }
 
 .button .secondaryButton {
-  margin-left: 0;
+  margin-inline-start: 0;
 }
 
 .secondaryButtonWrapper .secondaryButtonIconWrapper {
@@ -92,12 +92,12 @@
 }
 
 .kindTertiary .secondaryButton {
-  border-left: 1px solid transparent;
-  margin-left: 1px;
+  border-inline-start: 1px solid transparent;
+  margin-inline-start: 1px;
 }
 
 .kindPrimary.disabled .secondaryButton {
-  border-left: 1px solid;
+  border-inline-start: 1px solid;
   border-color: var(--ui-border-color);
 }
 
@@ -107,7 +107,7 @@
 }
 
 .kindPrimary:not(.disabled).colorPrimary .secondaryButton {
-  border-left: 1px solid;
+  border-inline-start: 1px solid;
   border-color: var(--primary-hover-color);
 }
 
@@ -117,27 +117,27 @@
 }
 
 .kindPrimary:not(.disabled).colorBrand .secondaryButton {
-  border-left: 1px solid;
+  border-inline-start: 1px solid;
   border-color: var(--brand-hover-color);
 }
 
 .kindPrimary:not(.disabled).colorPositive .secondaryButton {
-  border-left: 1px solid;
+  border-inline-start: 1px solid;
   border-color: var(--positive-color-hover);
 }
 
 .kindPrimary:not(.disabled).colorNegative .secondaryButton {
-  border-left: 1px solid;
+  border-inline-start: 1px solid;
   border-color: var(--negative-color-hover);
 }
 
 .kindPrimary:not(.disabled).colorOnPrimaryColor .secondaryButton {
-  border-left: 1px solid;
+  border-inline-start: 1px solid;
   border-color: var(--color-ui_grey);
 }
 
 .kindSecondary .mainButton {
-  border-right: none;
+  border-inline-end: none;
 }
 
 .kindSecondary.colorPrimary.mainActive .mainButton {
diff --git a/packages/core/src/components/SplitButton/SplitButton.tsx b/packages/core/src/components/SplitButton/SplitButton.tsx
index 420dc53a23..931724ada2 100644
--- a/packages/core/src/components/SplitButton/SplitButton.tsx
+++ b/packages/core/src/components/SplitButton/SplitButton.tsx
@@ -13,10 +13,8 @@ import {
   ENTER_KEYS,
   SECONDARY_BUTTON_ARIA_LABEL,
   SECONDARY_BUTTON_WRAPPER_CLASSNAME,
-  SplitButtonSecondaryContentPosition,
   type SplitButtonSecondaryContentPositionType
 } from "./SplitButtonConstants";
-import { withStaticPropsWithoutForwardRef } from "../../types";
 // Utils import
 import { NOOP } from "../../utils/function-utils";
 import { isInsideClass } from "../../utils/dom-utils";
@@ -29,12 +27,12 @@ import { DropdownChevronDown } from "@vibe/icons";
 import {
   DialogContentContainer,
   type DialogSize,
+  type DialogStartingEdge,
   type DialogTriggerEvent,
   Dialog,
   type DialogEvent,
   type DialogPosition
 } from "@vibe/dialog";
-import { DialogAnimationTypeEnum as AnimationType, DialogTriggerEventEnum as HideShowEvent } from "@vibe/dialog";
 import styles from "./SplitButton.module.scss";
 import { ComponentVibeId } from "../../tests/constants";
 
@@ -195,22 +193,23 @@ const SplitButton = ({
   const dialogShowTrigger = useMemo(() => (disabled ? [] : DEFAULT_DIALOG_SHOW_TRIGGER), [disabled]);
 
   const dialogHideTrigger = useMemo(() => {
-    if (shouldCloseOnClickInsideDialog) return [...DEFAULT_DIALOG_HIDE_TRIGGER, HideShowEvent.CONTENT_CLICK];
+    if (shouldCloseOnClickInsideDialog)
+      return [...DEFAULT_DIALOG_HIDE_TRIGGER, "onContentClick"] as DialogTriggerEvent[];
     return DEFAULT_DIALOG_HIDE_TRIGGER;
   }, [shouldCloseOnClickInsideDialog]);
 
   const actionsContent = useCallback(() => {
     const content = typeof secondaryDialogContent === "function" ? secondaryDialogContent() : secondaryDialogContent;
     return (
-      <DialogContentContainer type={DialogContentContainer.types.POPOVER} size={dialogPaddingSize}>
+      <DialogContentContainer type="popover" size={dialogPaddingSize}>
         {content}
       </DialogContentContainer>
     );
   }, [secondaryDialogContent, dialogPaddingSize]);
 
-  const animationEdgePosition = useMemo(() => {
+  const animationEdgePosition: DialogStartingEdge | undefined = useMemo(() => {
     if (secondaryDialogPosition === "bottom") {
-      return "";
+      return undefined;
     }
     if (secondaryDialogPosition === "bottom-start") {
       return "bottom";
@@ -257,7 +256,7 @@ const SplitButton = ({
           position={secondaryDialogPosition as DialogPosition}
           containerSelector={dialogContainerSelector}
           startingEdge={animationEdgePosition}
-          animationType={AnimationType.EXPAND}
+          animationType="expand"
           moveBy={DIALOG_MOVE_BY}
           onDialogDidShow={showDialog}
           onDialogDidHide={hideDialog}
@@ -278,9 +277,9 @@ const SplitButton = ({
             onFocus={setHovered}
             onBlur={setNotHovered}
             disabled={disabled}
-            ariaLabel={SECONDARY_BUTTON_ARIA_LABEL}
-            ariaHasPopup
-            ariaExpanded={isDialogOpen}
+            aria-label={SECONDARY_BUTTON_ARIA_LABEL}
+            aria-haspopup
+            aria-expanded={isDialogOpen}
             data-testid={getTestId(ComponentDefaultTestId.SPLIT_BUTTON_SECONDARY_BUTTON, id)}
           >
             <div className={styles.secondaryButtonIconWrapper}>
@@ -293,22 +292,4 @@ const SplitButton = ({
   );
 };
 
-interface SplitButtonStaticProps {
-  secondaryPositions: typeof SplitButtonSecondaryContentPosition;
-  secondaryDialogPositions: typeof SplitButtonSecondaryContentPosition;
-  sizes: typeof Button.sizes;
-  colors: typeof Button.colors;
-  kinds: typeof Button.kinds;
-  inputTags: typeof Button.inputTags;
-  dialogPaddingSizes: typeof DialogContentContainer.sizes;
-}
-
-export default withStaticPropsWithoutForwardRef<SplitButtonProps, SplitButtonStaticProps>(SplitButton, {
-  secondaryPositions: SplitButtonSecondaryContentPosition,
-  secondaryDialogPositions: SplitButtonSecondaryContentPosition,
-  sizes: Button.sizes,
-  colors: Button.colors,
-  kinds: Button.kinds,
-  inputTags: Button.inputTags,
-  dialogPaddingSizes: DialogContentContainer.sizes
-});
+export default SplitButton;
diff --git a/packages/core/src/components/SplitButton/SplitButtonConstants.ts b/packages/core/src/components/SplitButton/SplitButtonConstants.ts
index 5dee1e41e3..30cccf6d2d 100644
--- a/packages/core/src/components/SplitButton/SplitButtonConstants.ts
+++ b/packages/core/src/components/SplitButton/SplitButtonConstants.ts
@@ -1,10 +1,10 @@
 // Constants
 import { keyCodes } from "../../constants";
-import { DialogTriggerEventEnum as HideShowEvent } from "@vibe/dialog";
+import type { DialogTriggerEvent } from "@vibe/dialog";
 
 export const DIALOG_MOVE_BY = { main: 8, secondary: 0 };
-export const DEFAULT_DIALOG_SHOW_TRIGGER = [HideShowEvent.CLICK];
-export const DEFAULT_DIALOG_HIDE_TRIGGER = [HideShowEvent.CLICK_OUTSIDE, HideShowEvent.CLICK, HideShowEvent.ESCAPE_KEY];
+export const DEFAULT_DIALOG_SHOW_TRIGGER: DialogTriggerEvent[] = ["click"];
+export const DEFAULT_DIALOG_HIDE_TRIGGER: DialogTriggerEvent[] = ["clickoutside", "click", "esckey"];
 export const SECONDARY_BUTTON_WRAPPER_CLASSNAME = "monday-style-split-button__secondary-button-wrapper";
 export const EMPTY_ARR: string[] = [];
 
diff --git a/packages/core/src/components/SplitButton/SplitButtonMenu/__tests__/__snapshots__/SplitButtonMenu.snapshot.test.tsx.snap b/packages/core/src/components/SplitButton/SplitButtonMenu/__tests__/__snapshots__/SplitButtonMenu.snapshot.test.tsx.snap
index a3b69a0b58..c2cc31d220 100644
--- a/packages/core/src/components/SplitButton/SplitButtonMenu/__tests__/__snapshots__/SplitButtonMenu.snapshot.test.tsx.snap
+++ b/packages/core/src/components/SplitButton/SplitButtonMenu/__tests__/__snapshots__/SplitButtonMenu.snapshot.test.tsx.snap
@@ -31,7 +31,7 @@ exports[`SplitButtonMenu > renders correctly 1`] = `
       className="container directionRow justifyStart alignCenter"
       style={
         {
-          "gap": "var(--spacing-xs)",
+          "gap": "var(--space-4)",
         }
       }
     />
@@ -54,7 +54,7 @@ exports[`SplitButtonMenu > renders correctly 1`] = `
       className="container directionRow justifyStart alignCenter"
       style={
         {
-          "gap": "var(--spacing-xs)",
+          "gap": "var(--space-4)",
         }
       }
     />
diff --git a/packages/core/src/components/SplitButton/__tests__/SplitButton.snapshot.test.tsx b/packages/core/src/components/SplitButton/__tests__/SplitButton.snapshot.test.tsx
index 3d4af85a42..140f1f6c06 100644
--- a/packages/core/src/components/SplitButton/__tests__/SplitButton.snapshot.test.tsx
+++ b/packages/core/src/components/SplitButton/__tests__/SplitButton.snapshot.test.tsx
@@ -55,10 +55,7 @@ describe("SplitButton renders correctly", () => {
   it("with medium dialog padding size", () => {
     const tree = renderer
       .create(
-        <SplitButton
-          secondaryDialogContent={secondaryContent}
-          dialogPaddingSize={SplitButton.dialogPaddingSizes.MEDIUM}
-        >
+        <SplitButton secondaryDialogContent={secondaryContent} dialogPaddingSize="medium">
           split button
         </SplitButton>
       )
diff --git a/packages/core/src/components/SplitButton/__tests__/SplitButton.test.jsx b/packages/core/src/components/SplitButton/__tests__/SplitButton.test.tsx
similarity index 100%
rename from packages/core/src/components/SplitButton/__tests__/SplitButton.test.jsx
rename to packages/core/src/components/SplitButton/__tests__/SplitButton.test.tsx
diff --git a/packages/core/src/components/Steps/Steps.module.scss b/packages/core/src/components/Steps/Steps.module.scss
index 834543f0cb..1e02a17aa1 100644
--- a/packages/core/src/components/Steps/Steps.module.scss
+++ b/packages/core/src/components/Steps/Steps.module.scss
@@ -1,8 +1,8 @@
 .steps {
   .contentOnTop {
-    margin-top: var(--spacing-medium);
+    margin-top: var(--space-16);
   }
   .contentOnBottom {
-    margin-bottom: var(--spacing-small);
+    margin-bottom: var(--space-8);
   }
 }
diff --git a/packages/core/src/components/Steps/Steps.tsx b/packages/core/src/components/Steps/Steps.tsx
index d70707e170..c33631f1c8 100644
--- a/packages/core/src/components/Steps/Steps.tsx
+++ b/packages/core/src/components/Steps/Steps.tsx
@@ -3,11 +3,10 @@ import cx from "classnames";
 import { NOOP } from "../../utils/function-utils";
 import useMergeRef from "../../hooks/useMergeRef";
 import { StepsHeader } from "./StepsHeader";
-import { StepsColor as StepsColorEnum, StepsType as StepsTypeEnum } from "./StepsConstants";
 import { type StepsColor, type StepsType } from "./Steps.types";
 import { type ButtonProps } from "@vibe/button";
 import { ComponentDefaultTestId, getTestId } from "../../tests/test-ids-utils";
-import { withStaticProps, type VibeComponentProps } from "../../types";
+import { type VibeComponentProps } from "../../types";
 import styles from "./Steps.module.scss";
 import { ComponentVibeId } from "../../tests/constants";
 
@@ -118,12 +117,4 @@ const Steps = forwardRef(
   }
 );
 
-interface StepsStaticProps {
-  types: typeof StepsTypeEnum;
-  colors: typeof StepsColorEnum;
-}
-
-export default withStaticProps<StepsProps, StepsStaticProps>(Steps, {
-  types: StepsTypeEnum,
-  colors: StepsColorEnum
-});
+export default Steps;
diff --git a/packages/core/src/components/Steps/StepsConstants.ts b/packages/core/src/components/Steps/StepsConstants.ts
index d0ab2d33a9..4f52fcf09a 100644
--- a/packages/core/src/components/Steps/StepsConstants.ts
+++ b/packages/core/src/components/Steps/StepsConstants.ts
@@ -1,31 +1,3 @@
 export const NEXT_TEXT = "Next";
 export const BACK_TEXT = "Back";
 export const FINISH_TEXT = "Finish";
-
-/**
- * @deprecated
- */
-export enum StepsType {
-  NUMBERS = "numbers",
-  GALLERY = "gallery"
-}
-
-/**
- * @deprecated
- */
-export enum StepsDotAriaCurrent {
-  PAGE = "page",
-  STEP = "step",
-  LOCATION = "location",
-  DATE = "date",
-  TIME = "time"
-}
-
-/**
- * @deprecated
- */
-export enum StepsColor {
-  PRIMARY = "primary",
-  ON_PRIMARY_COLOR = "on-primary-color",
-  ON_INVERTED_BACKGROUND = "on-inverted-background"
-}
diff --git a/packages/core/src/components/Steps/StepsDot.module.scss b/packages/core/src/components/Steps/StepsDot.module.scss
index 79bd7c0c3c..3a244c0dec 100644
--- a/packages/core/src/components/Steps/StepsDot.module.scss
+++ b/packages/core/src/components/Steps/StepsDot.module.scss
@@ -1,4 +1,4 @@
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 @import "../../styles/states";
 
 @mixin active-step-dot {
diff --git a/packages/core/src/components/Steps/StepsDot.tsx b/packages/core/src/components/Steps/StepsDot.tsx
index 12f68a6063..6e9c73132f 100644
--- a/packages/core/src/components/Steps/StepsDot.tsx
+++ b/packages/core/src/components/Steps/StepsDot.tsx
@@ -22,7 +22,7 @@ export interface StepsDotProps extends VibeComponentProps {
   /**
    * The ARIA label for the dot.
    */
-  ariaLabel?: string;
+  "aria-label"?: string;
   /**
    * The color theme of the dot.
    */
@@ -33,7 +33,7 @@ export const StepsDot: FC<StepsDotProps> = ({
   isActive,
   onClick = NOOP,
   ariaCurrent = "step",
-  ariaLabel,
+  "aria-label": ariaLabel,
   color,
   className
 }: StepsDotProps) => {
diff --git a/packages/core/src/components/Steps/StepsGalleryHeader.module.scss b/packages/core/src/components/Steps/StepsGalleryHeader.module.scss
index df027f0a64..4272438ae3 100644
--- a/packages/core/src/components/Steps/StepsGalleryHeader.module.scss
+++ b/packages/core/src/components/Steps/StepsGalleryHeader.module.scss
@@ -1,12 +1,12 @@
 .galleryHeader {
-  margin: 0 var(--spacing-small);
+  margin: 0 var(--space-8);
   display: flex;
   align-items: center;
 
   .galleryHeaderDot {
-    margin-right: var(--spacing-small);
+    margin-inline-end: var(--space-8);
     &:last-child {
-      margin-right: 0;
+      margin-inline-end: 0;
     }
   }
 }
diff --git a/packages/core/src/components/Steps/StepsGalleryHeader.tsx b/packages/core/src/components/Steps/StepsGalleryHeader.tsx
index d5cec28c84..c7191df930 100644
--- a/packages/core/src/components/Steps/StepsGalleryHeader.tsx
+++ b/packages/core/src/components/Steps/StepsGalleryHeader.tsx
@@ -52,7 +52,7 @@ export const StepsGalleryHeader: FC<StepsGalleryHeaderProps> = ({
           <StepsDot
             isActive={activeStepIndex === stepIndex}
             key={`monday-style-step-dot-${stepIndex + 1}`}
-            ariaLabel={overrideStepDescriptionFunc(stepIndex)}
+            aria-label={overrideStepDescriptionFunc(stepIndex)}
             onClick={onClickFunctions[stepIndex]}
             color={color}
             className={styles.galleryHeaderDot}
diff --git a/packages/core/src/components/Steps/StepsHeader.module.scss b/packages/core/src/components/Steps/StepsHeader.module.scss
index 1946b75329..ce74727d20 100644
--- a/packages/core/src/components/Steps/StepsHeader.module.scss
+++ b/packages/core/src/components/Steps/StepsHeader.module.scss
@@ -2,5 +2,5 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--spacing-small);
+  gap: var(--space-8);
 }
diff --git a/packages/core/src/components/Steps/StepsHeader.tsx b/packages/core/src/components/Steps/StepsHeader.tsx
index ca5e88c24a..48d1255cac 100644
--- a/packages/core/src/components/Steps/StepsHeader.tsx
+++ b/packages/core/src/components/Steps/StepsHeader.tsx
@@ -73,13 +73,9 @@ export const StepsHeader: FC<StepsHeaderProps> = ({
   const SubHeaderComponent: FC<StepsGalleryHeaderProps | StepsNumbersHeaderProps> =
     type === "gallery" ? StepsGalleryHeader : StepsNumbersHeader;
 
-  // TODO: [breaking] make finish button as default in next major
   const showFinishButton = useMemo(() => {
-    if (!onFinish) {
-      return;
-    }
     return activeStepIndex === stepsCount - 1;
-  }, [activeStepIndex, onFinish, stepsCount]);
+  }, [activeStepIndex, stepsCount]);
 
   return (
     <div className={cx(styles.header, className)}>
diff --git a/packages/core/src/components/Steps/StepsNumbersHeader.module.scss b/packages/core/src/components/Steps/StepsNumbersHeader.module.scss
index e47caecdfc..110921fce2 100644
--- a/packages/core/src/components/Steps/StepsNumbersHeader.module.scss
+++ b/packages/core/src/components/Steps/StepsNumbersHeader.module.scss
@@ -1,6 +1,6 @@
 @import "../../styles/typography";
 
 .numbers {
-  margin: 0 var(--spacing-small);
+  margin: 0 var(--space-8);
   @include smoothing-text;
 }
diff --git a/packages/core/src/components/Steps/__tests__/Steps.test.tsx b/packages/core/src/components/Steps/__tests__/Steps.test.tsx
index 3775a0342f..9bd215e2b2 100644
--- a/packages/core/src/components/Steps/__tests__/Steps.test.tsx
+++ b/packages/core/src/components/Steps/__tests__/Steps.test.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import { fireEvent, render } from "@testing-library/react";
 import { act } from "@testing-library/react-hooks";
 import Steps, { type StepsProps } from "../Steps";
-import { NEXT_TEXT, BACK_TEXT } from "../StepsConstants";
+import { NEXT_TEXT, BACK_TEXT, FINISH_TEXT } from "../StepsConstants";
 
 vi.useFakeTimers();
 
@@ -64,18 +64,25 @@ describe("Steps tests", () => {
     expect(onClickMock.mock.calls.length).toBe(0);
   });
 
-  it("does not call onChangeIndexCallback when click on next button when in last page", () => {
-    const onClickMock = vi.fn();
+  it("shows finish button on last step by default", () => {
     const steps = renderComponent({
-      onChangeActiveStep: onClickMock,
       activeStepIndex: stepsContent.length - 1
     });
-    const forwardButton = steps.getByText(NEXT_TEXT);
+    expect(steps.getByText(FINISH_TEXT)).toBeTruthy();
+  });
+
+  it("calls onFinish when clicking finish button on last step", () => {
+    const onFinishMock = vi.fn();
+    const steps = renderComponent({
+      activeStepIndex: stepsContent.length - 1,
+      onFinish: onFinishMock
+    });
+    const finishButton = steps.getByText(FINISH_TEXT);
 
     act(() => {
-      fireEvent.click(forwardButton);
+      fireEvent.click(finishButton);
     });
 
-    expect(onClickMock.mock.calls.length).toBe(0);
+    expect(onFinishMock).toHaveBeenCalledTimes(1);
   });
 });
diff --git a/packages/core/src/components/Steps/__tests__/__snapshots__/Steps.snapshot.test.tsx.snap b/packages/core/src/components/Steps/__tests__/__snapshots__/Steps.snapshot.test.tsx.snap
index 42bdfbba58..07637b70b4 100644
--- a/packages/core/src/components/Steps/__tests__/__snapshots__/Steps.snapshot.test.tsx.snap
+++ b/packages/core/src/components/Steps/__tests__/__snapshots__/Steps.snapshot.test.tsx.snap
@@ -45,19 +45,18 @@ exports[`Steps > with gallery type renders correctly > when hide navigations ico
     </div>
     <button
       aria-busy={false}
-      aria-disabled={true}
-      className="command button sizeMedium kindTertiary colorPrimary disabled"
-      data-testid="steps-forward-command"
+      aria-disabled={false}
+      className="button sizeMedium kindPrimary colorPrimary"
+      data-testid="button"
       data-vibe="Button"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}
-      tabIndex={-1}
       type="button"
     >
-      Next
+      Finish
     </button>
   </div>
   <div>
@@ -166,36 +165,18 @@ exports[`Steps > with gallery type renders correctly > when steps content is on
     </div>
     <button
       aria-busy={false}
-      aria-disabled={true}
-      className="command button sizeMedium kindTertiary colorPrimary disabled"
-      data-testid="steps-forward-command"
+      aria-disabled={false}
+      className="button sizeMedium kindPrimary colorPrimary"
+      data-testid="button"
       data-vibe="Button"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}
-      tabIndex={-1}
       type="button"
     >
-      Next
-      <svg
-        aria-hidden={true}
-        className="icon icon colorPrimary disabled"
-        data-testid="icon"
-        data-vibe="Icon"
-        fill="currentColor"
-        height="16"
-        viewBox="0 0 20 20"
-        width="16"
-      >
-        <path
-          clipRule="evenodd"
-          d="M13.5303 9.46967L13 10L13.5303 10.5303C13.8232 10.2374 13.8232 9.76256 13.5303 9.46967ZM11.9393 10L5.46967 16.4697C5.17678 16.7626 5.17678 17.2374 5.46967 17.5303C5.76256 17.8232 6.23744 17.8232 6.53033 17.5303L13.5303 10.5303L13 10L13.5303 9.46967L6.53033 2.46967C6.23744 2.17678 5.76256 2.17678 5.46967 2.46967C5.17678 2.76256 5.17678 3.23744 5.46967 3.53033L11.9393 10Z"
-          fill="currentColor"
-          fillRule="evenodd"
-        />
-      </svg>
+      Finish
     </button>
   </div>
 </div>
@@ -363,36 +344,18 @@ exports[`Steps > with gallery type renders correctly > when viewing last step 1`
     </div>
     <button
       aria-busy={false}
-      aria-disabled={true}
-      className="command button sizeMedium kindTertiary colorPrimary disabled"
-      data-testid="steps-forward-command"
+      aria-disabled={false}
+      className="button sizeMedium kindPrimary colorPrimary"
+      data-testid="button"
       data-vibe="Button"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}
-      tabIndex={-1}
       type="button"
     >
-      Next
-      <svg
-        aria-hidden={true}
-        className="icon icon colorPrimary disabled"
-        data-testid="icon"
-        data-vibe="Icon"
-        fill="currentColor"
-        height="16"
-        viewBox="0 0 20 20"
-        width="16"
-      >
-        <path
-          clipRule="evenodd"
-          d="M13.5303 9.46967L13 10L13.5303 10.5303C13.8232 10.2374 13.8232 9.76256 13.5303 9.46967ZM11.9393 10L5.46967 16.4697C5.17678 16.7626 5.17678 17.2374 5.46967 17.5303C5.76256 17.8232 6.23744 17.8232 6.53033 17.5303L13.5303 10.5303L13 10L13.5303 9.46967L6.53033 2.46967C6.23744 2.17678 5.76256 2.17678 5.46967 2.46967C5.17678 2.76256 5.17678 3.23744 5.46967 3.53033L11.9393 10Z"
-          fill="currentColor"
-          fillRule="evenodd"
-        />
-      </svg>
+      Finish
     </button>
   </div>
   <div>
@@ -533,19 +496,18 @@ exports[`Steps > with numeric type renders correctly > when hide navigations ico
     </div>
     <button
       aria-busy={false}
-      aria-disabled={true}
-      className="command button sizeMedium kindTertiary colorPrimary disabled"
-      data-testid="steps-forward-command"
+      aria-disabled={false}
+      className="button sizeMedium kindPrimary colorPrimary"
+      data-testid="button"
       data-vibe="Button"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}
-      tabIndex={-1}
       type="button"
     >
-      Next
+      Finish
     </button>
   </div>
   <div>
@@ -606,36 +568,18 @@ exports[`Steps > with numeric type renders correctly > when steps content is on
     </div>
     <button
       aria-busy={false}
-      aria-disabled={true}
-      className="command button sizeMedium kindTertiary colorPrimary disabled"
-      data-testid="steps-forward-command"
+      aria-disabled={false}
+      className="button sizeMedium kindPrimary colorPrimary"
+      data-testid="button"
       data-vibe="Button"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}
-      tabIndex={-1}
       type="button"
     >
-      Next
-      <svg
-        aria-hidden={true}
-        className="icon icon colorPrimary disabled"
-        data-testid="icon"
-        data-vibe="Icon"
-        fill="currentColor"
-        height="16"
-        viewBox="0 0 20 20"
-        width="16"
-      >
-        <path
-          clipRule="evenodd"
-          d="M13.5303 9.46967L13 10L13.5303 10.5303C13.8232 10.2374 13.8232 9.76256 13.5303 9.46967ZM11.9393 10L5.46967 16.4697C5.17678 16.7626 5.17678 17.2374 5.46967 17.5303C5.76256 17.8232 6.23744 17.8232 6.53033 17.5303L13.5303 10.5303L13 10L13.5303 9.46967L6.53033 2.46967C6.23744 2.17678 5.76256 2.17678 5.46967 2.46967C5.17678 2.76256 5.17678 3.23744 5.46967 3.53033L11.9393 10Z"
-          fill="currentColor"
-          fillRule="evenodd"
-        />
-      </svg>
+      Finish
     </button>
   </div>
 </div>
@@ -777,36 +721,18 @@ exports[`Steps > with numeric type renders correctly > when viewing last step 1`
     </div>
     <button
       aria-busy={false}
-      aria-disabled={true}
-      className="command button sizeMedium kindTertiary colorPrimary disabled"
-      data-testid="steps-forward-command"
+      aria-disabled={false}
+      className="button sizeMedium kindPrimary colorPrimary"
+      data-testid="button"
       data-vibe="Button"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}
-      tabIndex={-1}
       type="button"
     >
-      Next
-      <svg
-        aria-hidden={true}
-        className="icon icon colorPrimary disabled"
-        data-testid="icon"
-        data-vibe="Icon"
-        fill="currentColor"
-        height="16"
-        viewBox="0 0 20 20"
-        width="16"
-      >
-        <path
-          clipRule="evenodd"
-          d="M13.5303 9.46967L13 10L13.5303 10.5303C13.8232 10.2374 13.8232 9.76256 13.5303 9.46967ZM11.9393 10L5.46967 16.4697C5.17678 16.7626 5.17678 17.2374 5.46967 17.5303C5.76256 17.8232 6.23744 17.8232 6.53033 17.5303L13.5303 10.5303L13 10L13.5303 9.46967L6.53033 2.46967C6.23744 2.17678 5.76256 2.17678 5.46967 2.46967C5.17678 2.76256 5.17678 3.23744 5.46967 3.53033L11.9393 10Z"
-          fill="currentColor"
-          fillRule="evenodd"
-        />
-      </svg>
+      Finish
     </button>
   </div>
   <div>
diff --git a/packages/core/src/components/Switch/Switch.module.scss b/packages/core/src/components/Switch/Switch.module.scss
index 25ca42da29..2685760427 100644
--- a/packages/core/src/components/Switch/Switch.module.scss
+++ b/packages/core/src/components/Switch/Switch.module.scss
@@ -1,4 +1,4 @@
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 
 .hidden-switch { /* stylelint-disable-line selector-class-pattern */
   @include hidden-element();
diff --git a/packages/core/src/components/Switch/Switch.tsx b/packages/core/src/components/Switch/Switch.tsx
index d576927879..658c4ec7dd 100644
--- a/packages/core/src/components/Switch/Switch.tsx
+++ b/packages/core/src/components/Switch/Switch.tsx
@@ -26,11 +26,11 @@ export interface SwitchProps extends VibeComponentProps {
   /**
    * The ARIA label for accessibility.
    */
-  ariaLabel?: string;
+  "aria-label"?: string;
   /**
    * The ID of the element labeling the switch.
    */
-  ariaLabelledBy?: string;
+  "aria-labelledby"?: string;
   /**
    * If true, the switch is checked.
    */
@@ -46,7 +46,7 @@ export interface SwitchProps extends VibeComponentProps {
   /**
    * The ID of the element controlled by the switch.
    */
-  ariaControls?: string;
+  "aria-controls"?: string;
   /**
    * If true, the switch is checked by default.
    */
@@ -70,12 +70,12 @@ const Switch = forwardRef(
       value,
       role,
       disabled,
-      ariaLabel,
-      ariaLabelledBy,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
       checked,
       inputClassName,
       onChange,
-      ariaControls,
+      "aria-controls": ariaControls,
       defaultChecked,
       children: originalChildren,
       wrapperClassName,
diff --git a/packages/core/src/components/Switch/index.js b/packages/core/src/components/Switch/index.tsx
similarity index 100%
rename from packages/core/src/components/Switch/index.js
rename to packages/core/src/components/Switch/index.tsx
diff --git a/packages/core/src/components/Table/Table/Table.module.scss b/packages/core/src/components/Table/Table/Table.module.scss
index c167ef5cff..d0b23f5d19 100644
--- a/packages/core/src/components/Table/Table/Table.module.scss
+++ b/packages/core/src/components/Table/Table/Table.module.scss
@@ -1,4 +1,4 @@
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 
 .table {
   @include scroller(6px, 6px);
diff --git a/packages/core/src/components/Table/Table/Table.tsx b/packages/core/src/components/Table/Table/Table.tsx
index 8f65973cff..bdc4fe5ec2 100644
--- a/packages/core/src/components/Table/Table/Table.tsx
+++ b/packages/core/src/components/Table/Table/Table.tsx
@@ -8,13 +8,13 @@ import React, {
   useState
 } from "react";
 import cx from "classnames";
-import { type VibeComponentProps, withStaticProps } from "../../../types";
+import { type VibeComponentProps } from "../../../types";
 import { type TableHeaderProps } from "../TableHeader/TableHeader";
 import { type TableBodyProps } from "../TableBody/TableBody";
 import { getTableRowLayoutStyles } from "./tableHelpers";
 import { getTestId } from "../../../tests/test-ids-utils";
 import { ComponentDefaultTestId, ComponentVibeId } from "../../../tests/constants";
-import { RowHeights, RowSizes as RowSizesEnum } from "./TableConsts";
+import { RowHeights } from "./TableConsts";
 import { type RowSizes } from "./Table.types";
 import styles from "./Table.module.scss";
 import { TableProvider } from "../context/TableContext/TableContext";
@@ -212,8 +212,4 @@ const Table = forwardRef(
   }
 );
 
-interface TableStaticProps {
-  sizes: typeof RowSizesEnum;
-}
-
-export default withStaticProps<TableProps, TableStaticProps>(Table, { sizes: RowSizesEnum });
+export default Table;
diff --git a/packages/core/src/components/Table/Table/tableHelpers.ts b/packages/core/src/components/Table/Table/tableHelpers.ts
index a362f51697..084e718f48 100644
--- a/packages/core/src/components/Table/Table/tableHelpers.ts
+++ b/packages/core/src/components/Table/Table/tableHelpers.ts
@@ -4,8 +4,7 @@ import { type TableColumn, type TableLoadingStateType } from "./Table";
 import { Sort } from "@vibe/icons";
 import { type TableHeaderCellProps } from "../TableHeaderCell/TableHeaderCell";
 import { SortAscending, SortDescending } from "@vibe/icons";
-import { SkeletonType } from "../../Skeleton/SkeletonConstants";
-
+import { type SkeletonType } from "../../../components/Skeleton/Skelton.types";
 export function generateWidth(width: TableColumn["width"]): string {
   if (typeof width === "number") {
     return `${width}px`;
@@ -58,12 +57,12 @@ export function getAriaSort(sortState: TableHeaderCellProps["sortState"]): AriaA
 
 export function getSkeletonType(loadingStateType: TableLoadingStateType): SkeletonType {
   if (loadingStateType === "circle") {
-    return SkeletonType.CIRCLE;
+    return "circle";
   }
   if (loadingStateType === "rectangle") {
-    return SkeletonType.RECTANGLE;
+    return "rectangle";
   }
-  return SkeletonType.TEXT;
+  return "text";
 }
 
 export function getLoadingTypeForCell(
diff --git a/packages/core/src/components/Table/TableCell/TableCell.module.scss b/packages/core/src/components/Table/TableCell/TableCell.module.scss
index 39710a5bfd..2077169e25 100644
--- a/packages/core/src/components/Table/TableCell/TableCell.module.scss
+++ b/packages/core/src/components/Table/TableCell/TableCell.module.scss
@@ -7,7 +7,7 @@
   &.sticky {
     z-index: 1;
     position: sticky;
-    left: 0;
+    inset-inline-start: 0;
     box-shadow: var(--sticky-cell-box-shadow);
   }
 }
diff --git a/packages/core/src/components/Table/TableCellSkeleton/TableCellSkeleton.module.scss b/packages/core/src/components/Table/TableCellSkeleton/TableCellSkeleton.module.scss
index 0cd05caad4..e174e7b6b3 100644
--- a/packages/core/src/components/Table/TableCellSkeleton/TableCellSkeleton.module.scss
+++ b/packages/core/src/components/Table/TableCellSkeleton/TableCellSkeleton.module.scss
@@ -2,11 +2,11 @@
   height: 100%;
 
   &.longText {
-    padding-inline-end: var(--spacing-large);
+    padding-inline-end: var(--space-24);
   }
 
   &.mediumText {
-    padding-inline-end: var(--spacing-xxxl);
+    padding-inline-end: var(--space-64);
   }
 
   .tableCellSkeleton {
@@ -14,14 +14,8 @@
 
     &.circle,
     &.rectangle {
-      @supports (aspect-ratio: 1 / 1) {
-        width: auto;
-        aspect-ratio: 1 / 1;
-      }
-
-      @supports not (aspect-ratio: 1 / 1) {
-        width: 21px;
-      }
+      width: auto;
+      aspect-ratio: 1 / 1;
     }
   }
 }
diff --git a/packages/core/src/components/Table/TableContainer/TableContainer.module.scss b/packages/core/src/components/Table/TableContainer/TableContainer.module.scss
index f60c324346..da439e5963 100644
--- a/packages/core/src/components/Table/TableContainer/TableContainer.module.scss
+++ b/packages/core/src/components/Table/TableContainer/TableContainer.module.scss
@@ -7,7 +7,7 @@
     --cell-width: 40px;
     position: absolute;
     overflow: hidden;
-    left: calc(1px - var(--cell-width));
+    inset-inline-start: calc(1px - var(--cell-width));
     width: var(--cell-width);
     height: 100%;
   }
diff --git a/packages/core/src/components/Table/TableHeaderCell/TableHeaderCell.module.scss b/packages/core/src/components/Table/TableHeaderCell/TableHeaderCell.module.scss
index beaa76bab0..03581acd61 100644
--- a/packages/core/src/components/Table/TableHeaderCell/TableHeaderCell.module.scss
+++ b/packages/core/src/components/Table/TableHeaderCell/TableHeaderCell.module.scss
@@ -1,9 +1,9 @@
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 
 .tableHeaderCell {
   height: var(--table-row-size);
-  padding: var(--spacing-small);
-  padding-inline-start: var(--spacing-medium);
+  padding: var(--space-8);
+  padding-inline-start: var(--space-16);
   color: var(--secondary-text-color);
   box-sizing: border-box;
   text-align: initial;
@@ -16,7 +16,7 @@
   &.sticky {
     z-index: 1;
     position: sticky;
-    left: 0;
+    inset-inline-start: 0;
     box-shadow: var(--sticky-cell-box-shadow);
 
     &:hover {
@@ -33,7 +33,7 @@
     min-width: 0;
 
     .icon {
-      min-width: var(--spacing-medium);
+      min-width: var(--space-16);
     }
 
     .infoTooltip {
@@ -42,7 +42,7 @@
   }
 
   .tableHeaderCellSort {
-    padding-inline-start: var(--spacing-small);
+    padding-inline-start: var(--space-8);
 
     .sort {
       color: var(--icon-color);
diff --git a/packages/core/src/components/Table/TableHeaderCell/TableHeaderCell.tsx b/packages/core/src/components/Table/TableHeaderCell/TableHeaderCell.tsx
index bcd3e3f680..27c14ab25a 100644
--- a/packages/core/src/components/Table/TableHeaderCell/TableHeaderCell.tsx
+++ b/packages/core/src/components/Table/TableHeaderCell/TableHeaderCell.tsx
@@ -94,7 +94,7 @@ const TableHeaderCell = forwardRef(
           )}
           {infoContent && (
             <Tooltip content={infoContent} referenceWrapperClassName={styles.infoTooltip}>
-              <Icon icon={Info} iconLabel={infoContent} />
+              <Icon icon={Info} label={infoContent} />
             </Tooltip>
           )}
         </Flex>
@@ -104,7 +104,7 @@ const TableHeaderCell = forwardRef(
               icon={getSortIcon(sortState)}
               kind="tertiary"
               size="xs"
-              ariaLabel={sortButtonAriaLabel}
+              aria-label={sortButtonAriaLabel}
               aria-hidden={!shouldShowSortIcon}
               className={cx(styles.sort, getStyle(styles, sortState), {
                 [styles.show]: shouldShowSortIcon
diff --git a/packages/core/src/components/Table/TableRowMenu/TableRowMenu.module.scss b/packages/core/src/components/Table/TableRowMenu/TableRowMenu.module.scss
index fc7ae50ee8..f60633c77d 100644
--- a/packages/core/src/components/Table/TableRowMenu/TableRowMenu.module.scss
+++ b/packages/core/src/components/Table/TableRowMenu/TableRowMenu.module.scss
@@ -3,14 +3,14 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding-inline: var(--spacing-small);
+  padding-inline: var(--space-8);
 
   &.small {
-    padding-block: var(--spacing-xs);
+    padding-block: var(--space-4);
   }
 
   &.medium {
-    padding-block: var(--spacing-small);
+    padding-block: var(--space-8);
   }
 
   &.large {
diff --git a/packages/core/src/components/Table/TableVirtualizedBody/TableVirtualizedBody.module.scss b/packages/core/src/components/Table/TableVirtualizedBody/TableVirtualizedBody.module.scss
index 0f723939c3..3f3dcdb40f 100644
--- a/packages/core/src/components/Table/TableVirtualizedBody/TableVirtualizedBody.module.scss
+++ b/packages/core/src/components/Table/TableVirtualizedBody/TableVirtualizedBody.module.scss
@@ -1,4 +1,4 @@
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 
 .tableBody {
   // Take into consideration header's height since VirtualizedBody sets a static height
diff --git a/packages/core/src/components/Tabs/Tab/Tab.module.scss b/packages/core/src/components/Tabs/Tab/Tab.module.scss
index e575c1029f..250aeee5e2 100644
--- a/packages/core/src/components/Tabs/Tab/Tab.module.scss
+++ b/packages/core/src/components/Tabs/Tab/Tab.module.scss
@@ -1,12 +1,11 @@
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 @import "../../../styles/states";
 @import "../../../styles/typography";
 
 .tabWrapper {
   position: relative;
   display: inline-block;
-  padding-left: 1px;
-  padding-right: 1px;
+  padding-inline: 1px;
   border-top: 1px solid transparent;
   border-bottom: 2px solid;
   border-bottom-color: var(--ui-background-color);
@@ -23,8 +22,7 @@
 .tabWrapper:after {
   display: block;
   position: absolute;
-  left: 0;
-  right: 0;
+  inset-inline: 0;
   content: "";
   border-bottom: solid 2px;
   border-bottom-color: var(--primary-color);
@@ -53,12 +51,12 @@
 
 .tabWrapper .tabInner .tabIcon {
   color: var(--icon-color);
-  margin-right: var(--spacing-small);
+  margin-inline-end: var(--space-8);
 }
 
 .tabWrapper .tabInner .tabIcon.right {
-  margin-right: 0;
-  margin-left: var(--spacing-small);
+  margin-inline-end: 0;
+  margin-inline-start: var(--space-8);
 }
 
 .tabWrapper.tabFocusVisibleInset {
diff --git a/packages/core/src/components/Tabs/Tab/Tab.tsx b/packages/core/src/components/Tabs/Tab/Tab.tsx
index 148c44c0e9..ddc44fa380 100644
--- a/packages/core/src/components/Tabs/Tab/Tab.tsx
+++ b/packages/core/src/components/Tabs/Tab/Tab.tsx
@@ -67,7 +67,7 @@ export interface TabProps extends VibeComponentProps {
   /**
    * The id of the associated TabPanel for aria-controls attribute.
    */
-  ariaControls?: string;
+  "aria-controls"?: string;
 }
 
 const Tab: FC<TabProps> = forwardRef(
@@ -89,7 +89,7 @@ const Tab: FC<TabProps> = forwardRef(
       children,
       "data-testid": dataTestId,
       tabIndex,
-      ariaControls
+      "aria-controls": ariaControls
     }: TabProps,
     ref
   ) => {
@@ -101,11 +101,11 @@ const Tab: FC<TabProps> = forwardRef(
 
       const iconElement = (
         <Icon
-          ariaHidden={true}
-          iconType={iconType}
+          aria-hidden={true}
+          type={iconType}
           icon={icon}
           className={cx(styles.tabIcon, getStyle(styles, iconSide))}
-          iconSize={18}
+          size={18}
           ignoreFocusStyle
         />
       );
diff --git a/packages/core/src/components/Tabs/Tab/__tests__/Tab.test.tsx b/packages/core/src/components/Tabs/Tab/__tests__/Tab.test.tsx
index 71a8d7c0b3..06748f16fb 100644
--- a/packages/core/src/components/Tabs/Tab/__tests__/Tab.test.tsx
+++ b/packages/core/src/components/Tabs/Tab/__tests__/Tab.test.tsx
@@ -51,16 +51,16 @@ describe("Tab tests", () => {
   });
 
   describe("aria-controls", () => {
-    it("should add aria-controls attribute when id and ariaControls are provided", () => {
+    it("should add aria-controls attribute when id and aria-controls are provided", () => {
       const tabId = "test-tab";
       const panelId = "test-panel";
 
-      renderComponent({ id: tabId, ariaControls: panelId });
+      renderComponent({ id: tabId, "aria-controls": panelId });
       const tabElement = screen.getByRole("tab");
       expect(tabElement).toHaveAttribute("aria-controls", panelId);
     });
 
-    it("should not add aria-controls attribute when ariaControls is missing", () => {
+    it("should not add aria-controls attribute when aria-controls is missing", () => {
       const tabId = "test-tab";
 
       renderComponent({ id: tabId });
@@ -68,7 +68,7 @@ describe("Tab tests", () => {
       expect(tabElement).not.toHaveAttribute("aria-controls");
     });
 
-    it("should not add aria-controls attribute when both id and ariaControls are missing", () => {
+    it("should not add aria-controls attribute when both id and aria-controls are missing", () => {
       renderComponent();
       const tabElement = screen.getByRole("tab");
       expect(tabElement).not.toHaveAttribute("aria-controls");
diff --git a/packages/core/src/components/Tabs/TabList/TabList.tsx b/packages/core/src/components/Tabs/TabList/TabList.tsx
index 737ad9f1a0..a91fe66c03 100644
--- a/packages/core/src/components/Tabs/TabList/TabList.tsx
+++ b/packages/core/src/components/Tabs/TabList/TabList.tsx
@@ -156,11 +156,11 @@ const TabList: FC<TabListProps> = forwardRef(
           className: cx(styles.tabListTabWrapper, child.props.className),
           tabInnerClassName: cx(styles.tabListTabInner, child.props.tabInnerClassName),
           tabIndex: shouldBeFocusable ? 0 : -1,
-          ariaControls: tabPanelIds[index],
+          "aria-controls": tabPanelIds[index],
           ref: (element: HTMLElement | null) => {
             tabRefs.current[index] = element;
           }
-        } as Partial<TabProps> & { ref: React.Ref<HTMLElement>; tabInnerLabelId?: string; ariaControls?: string });
+        } as Partial<TabProps> & { ref: React.Ref<HTMLElement>; tabInnerLabelId?: string });
       });
       return childrenToRender;
     }, [children, activeTabState, focusIndex, onSelectionAction, stretchedUnderline, tabPanelIds, id]);
diff --git a/packages/core/src/components/Tabs/TabList/__tests__/TabList.snapshot.test.jsx b/packages/core/src/components/Tabs/TabList/__tests__/TabList.snapshot.test.tsx
similarity index 100%
rename from packages/core/src/components/Tabs/TabList/__tests__/TabList.snapshot.test.jsx
rename to packages/core/src/components/Tabs/TabList/__tests__/TabList.snapshot.test.tsx
diff --git a/packages/core/src/components/Tabs/TabList/__tests__/__snapshots__/TabList.snapshot.test.tsx.snap b/packages/core/src/components/Tabs/TabList/__tests__/__snapshots__/TabList.snapshot.test.tsx.snap
new file mode 100644
index 0000000000..250fba2184
--- /dev/null
+++ b/packages/core/src/components/Tabs/TabList/__tests__/__snapshots__/TabList.snapshot.test.tsx.snap
@@ -0,0 +1,280 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`TabList renders correctly > with activeTabId 1`] = `
+<div
+  className="tabsWrapper compact"
+  data-testid="tab-list"
+>
+  <ul
+    className="tabsList"
+    role="tablist"
+  >
+    <li
+      aria-disabled={false}
+      aria-selected={false}
+      className="tabWrapper tabListTabWrapper"
+      data-testid="tab"
+      data-vibe="Tab"
+      onClick={[Function]}
+      onKeyDown={[Function]}
+      role="tab"
+      tabIndex={-1}
+    >
+      <div
+        className="tabInner tabListTabInner"
+      >
+        First
+      </div>
+    </li>
+    <li
+      aria-disabled={false}
+      aria-selected={true}
+      className="tabWrapper tabListTabWrapper active"
+      data-testid="tab"
+      data-vibe="Tab"
+      onClick={[Function]}
+      onKeyDown={[Function]}
+      role="tab"
+      tabIndex={0}
+    >
+      <div
+        className="tabInner tabListTabInner"
+      >
+        Second
+      </div>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`TabList renders correctly > with children 1`] = `
+<div
+  className="tabsWrapper compact"
+  data-testid="tab-list"
+>
+  <ul
+    className="tabsList"
+    role="tablist"
+  >
+    <li
+      aria-disabled={false}
+      aria-selected={true}
+      className="tabWrapper tabListTabWrapper active"
+      data-testid="tab"
+      data-vibe="Tab"
+      onClick={[Function]}
+      onKeyDown={[Function]}
+      role="tab"
+      tabIndex={0}
+    >
+      <div
+        className="tabInner tabListTabInner"
+      >
+        First
+      </div>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`TabList renders correctly > with className 1`] = `
+<div
+  className="tabsWrapper test compact"
+  data-testid="tab-list"
+>
+  <ul
+    className="tabsList"
+    role="tablist"
+  >
+    <li
+      aria-disabled={false}
+      aria-selected={true}
+      className="tabWrapper tabListTabWrapper active"
+      data-testid="tab"
+      data-vibe="Tab"
+      onClick={[Function]}
+      onKeyDown={[Function]}
+      role="tab"
+      tabIndex={0}
+    >
+      <div
+        className="tabInner tabListTabInner"
+      >
+        First
+      </div>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`TabList renders correctly > with id 1`] = `
+<div
+  className="tabsWrapper compact"
+  data-testid="tab-list_test"
+  id="test"
+>
+  <ul
+    className="tabsList"
+    role="tablist"
+  >
+    <li
+      aria-disabled={false}
+      aria-selected={true}
+      className="tabWrapper tabListTabWrapper active"
+      data-testid="tab"
+      data-vibe="Tab"
+      onClick={[Function]}
+      onKeyDown={[Function]}
+      role="tab"
+      tabIndex={0}
+    >
+      <div
+        className="tabInner tabListTabInner"
+      >
+        First
+      </div>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`TabList renders correctly > with size 1`] = `
+<div
+  className="tabsWrapper compact"
+  data-testid="tab-list"
+>
+  <ul
+    className="tabsList lg"
+    role="tablist"
+  >
+    <li
+      aria-disabled={false}
+      aria-selected={true}
+      className="tabWrapper tabListTabWrapper active"
+      data-testid="tab"
+      data-vibe="Tab"
+      onClick={[Function]}
+      onKeyDown={[Function]}
+      role="tab"
+      tabIndex={0}
+    >
+      <div
+        className="tabInner tabListTabInner"
+      >
+        First
+      </div>
+    </li>
+    <li
+      aria-disabled={false}
+      aria-selected={false}
+      className="tabWrapper tabListTabWrapper"
+      data-testid="tab"
+      data-vibe="Tab"
+      onClick={[Function]}
+      onKeyDown={[Function]}
+      role="tab"
+      tabIndex={-1}
+    >
+      <div
+        className="tabInner tabListTabInner"
+      >
+        Second
+      </div>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`TabList renders correctly > with stretchedUnderline 1`] = `
+<div
+  className="tabsWrapper compact stretchedUnderline"
+  data-testid="tab-list"
+>
+  <ul
+    className="tabsList"
+    role="tablist"
+  >
+    <li
+      aria-disabled={false}
+      aria-selected={true}
+      className="tabWrapper tabListTabWrapper active stretchedUnderline"
+      data-testid="tab"
+      data-vibe="Tab"
+      onClick={[Function]}
+      onKeyDown={[Function]}
+      role="tab"
+      tabIndex={0}
+    >
+      <div
+        className="tabInner tabListTabInner"
+      >
+        First
+      </div>
+    </li>
+    <li
+      aria-disabled={false}
+      aria-selected={false}
+      className="tabWrapper tabListTabWrapper stretchedUnderline"
+      data-testid="tab"
+      data-vibe="Tab"
+      onClick={[Function]}
+      onKeyDown={[Function]}
+      role="tab"
+      tabIndex={-1}
+    >
+      <div
+        className="tabInner tabListTabInner"
+      >
+        Second
+      </div>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`TabList renders correctly > with tabType 1`] = `
+<div
+  className="tabsWrapper stretched"
+  data-testid="tab-list"
+>
+  <ul
+    className="tabsList"
+    role="tablist"
+  >
+    <li
+      aria-disabled={false}
+      aria-selected={true}
+      className="tabWrapper tabListTabWrapper active"
+      data-testid="tab"
+      data-vibe="Tab"
+      onClick={[Function]}
+      onKeyDown={[Function]}
+      role="tab"
+      tabIndex={0}
+    >
+      <div
+        className="tabInner tabListTabInner"
+      >
+        First
+      </div>
+    </li>
+    <li
+      aria-disabled={false}
+      aria-selected={false}
+      className="tabWrapper tabListTabWrapper"
+      data-testid="tab"
+      data-vibe="Tab"
+      onClick={[Function]}
+      onKeyDown={[Function]}
+      role="tab"
+      tabIndex={-1}
+    >
+      <div
+        className="tabInner tabListTabInner"
+      >
+        Second
+      </div>
+    </li>
+  </ul>
+</div>
+`;
diff --git a/packages/core/src/components/Tabs/TabPanels/TabPanels.tsx b/packages/core/src/components/Tabs/TabPanels/TabPanels.tsx
index 76d5b58eba..bc1850c0bd 100644
--- a/packages/core/src/components/Tabs/TabPanels/TabPanels.tsx
+++ b/packages/core/src/components/Tabs/TabPanels/TabPanels.tsx
@@ -2,12 +2,11 @@ import cx from "classnames";
 import { camelCase } from "es-toolkit";
 import React, { forwardRef, type ReactElement, useMemo, useRef } from "react";
 import useMergeRef from "../../../hooks/useMergeRef";
-import { TabPanelsAnimationDirection as TabPanelsAnimationDirectionEnum } from "./TabPanelsConstants";
 import { type TabPanelsAnimationDirection } from "./TabPanels.types";
 import { type TabPanelProps } from "../TabPanel/TabPanel";
 import { ComponentDefaultTestId, getTestId } from "../../../tests/test-ids-utils";
 import { getStyle } from "../../../helpers/typesciptCssModulesHelper";
-import { type VibeComponentProps, withStaticProps } from "../../../types";
+import { type VibeComponentProps } from "../../../types";
 import styles from "./TabPanels.module.scss";
 
 export interface TabPanelsProps extends VibeComponentProps {
@@ -68,10 +67,4 @@ Object.assign(TabPanels, {
   isTabPanels: true
 });
 
-interface TabPanelsStaticProps {
-  animationDirections: typeof TabPanelsAnimationDirectionEnum;
-}
-
-export default withStaticProps<TabPanelsProps, TabPanelsStaticProps>(TabPanels, {
-  animationDirections: TabPanelsAnimationDirectionEnum
-});
+export default TabPanels;
diff --git a/packages/core/src/components/Tabs/TabPanels/TabPanelsConstants.ts b/packages/core/src/components/Tabs/TabPanels/TabPanelsConstants.ts
deleted file mode 100644
index 924601d0b5..0000000000
--- a/packages/core/src/components/Tabs/TabPanels/TabPanelsConstants.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * @deprecated
- */
-
-export enum TabPanelsAnimationDirection {
-  RTL = "rtl",
-  LTR = "ltr"
-}
diff --git a/packages/core/src/components/Tabs/TabPanels/__tests__/TabPanels.snapshot.test.jsx b/packages/core/src/components/Tabs/TabPanels/__tests__/TabPanels.snapshot.test.tsx
similarity index 100%
rename from packages/core/src/components/Tabs/TabPanels/__tests__/TabPanels.snapshot.test.jsx
rename to packages/core/src/components/Tabs/TabPanels/__tests__/TabPanels.snapshot.test.tsx
diff --git a/packages/core/src/components/Tabs/TabPanels/__tests__/__snapshots__/TabPanels.snapshot.test.tsx.snap b/packages/core/src/components/Tabs/TabPanels/__tests__/__snapshots__/TabPanels.snapshot.test.tsx.snap
new file mode 100644
index 0000000000..f49c66ee65
--- /dev/null
+++ b/packages/core/src/components/Tabs/TabPanels/__tests__/__snapshots__/TabPanels.snapshot.test.tsx.snap
@@ -0,0 +1,61 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`TabPanels renders correctly > with animation from left to right 1`] = `
+<div
+  className="tabPanelsWrapper"
+  data-testid="tab-panels"
+>
+  <div
+    className="tabPanelWrapper tabPanel active animationDirectionLtr"
+    data-testid="tab-panel"
+    role="tabpanel"
+  >
+    First
+  </div>
+</div>
+`;
+
+exports[`TabPanels renders correctly > with animation from right to left 1`] = `
+<div
+  className="tabPanelsWrapper"
+  data-testid="tab-panels"
+>
+  <div
+    className="tabPanelWrapper tabPanel active animationDirectionRtl"
+    data-testid="tab-panel"
+    role="tabpanel"
+  >
+    First
+  </div>
+</div>
+`;
+
+exports[`TabPanels renders correctly > with empty props 1`] = `
+<div
+  className="tabPanelsWrapper"
+  data-testid="tab-panels"
+>
+  <div
+    className="tabPanelWrapper tabPanel active animationDirectionRtl first"
+    data-testid="tab-panel"
+    role="tabpanel"
+  >
+    First
+  </div>
+</div>
+`;
+
+exports[`TabPanels renders correctly > with the given active tab panel 1`] = `
+<div
+  className="tabPanelsWrapper"
+  data-testid="tab-panels"
+>
+  <div
+    className="tabPanelWrapper tabPanel active animationDirectionRtl"
+    data-testid="tab-panel"
+    role="tabpanel"
+  >
+    Second
+  </div>
+</div>
+`;
diff --git a/packages/core/src/components/Tabs/TabsContext/__tests__/TabsContext.snapshot.test.jsx b/packages/core/src/components/Tabs/TabsContext/__tests__/TabsContext.snapshot.test.tsx
similarity index 100%
rename from packages/core/src/components/Tabs/TabsContext/__tests__/TabsContext.snapshot.test.jsx
rename to packages/core/src/components/Tabs/TabsContext/__tests__/TabsContext.snapshot.test.tsx
diff --git a/packages/core/src/components/Tabs/TabsContext/__tests__/__snapshots__/TabsContext.snapshot.test.tsx.snap b/packages/core/src/components/Tabs/TabsContext/__tests__/__snapshots__/TabsContext.snapshot.test.tsx.snap
new file mode 100644
index 0000000000..df9e3aa882
--- /dev/null
+++ b/packages/core/src/components/Tabs/TabsContext/__tests__/__snapshots__/TabsContext.snapshot.test.tsx.snap
@@ -0,0 +1,204 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`TabsContext renders correctly > with activeTabId 1`] = `
+<div
+  data-testid="tabs-context"
+>
+  <div
+    className="tabsWrapper compact"
+    data-testid="tab-list"
+  >
+    <ul
+      className="tabsList"
+      role="tablist"
+    >
+      <li
+        aria-disabled={false}
+        aria-selected={false}
+        className="tabWrapper tabListTabWrapper"
+        data-testid="tab"
+        data-vibe="Tab"
+        onClick={[Function]}
+        onKeyDown={[Function]}
+        role="tab"
+        tabIndex={-1}
+      >
+        <div
+          className="tabInner tabListTabInner"
+        >
+          First
+        </div>
+      </li>
+      <li
+        aria-disabled={false}
+        aria-selected={true}
+        className="tabWrapper tabListTabWrapper active"
+        data-testid="tab"
+        data-vibe="Tab"
+        onClick={[Function]}
+        onKeyDown={[Function]}
+        role="tab"
+        tabIndex={0}
+      >
+        <div
+          className="tabInner tabListTabInner"
+        >
+          Second
+        </div>
+      </li>
+    </ul>
+  </div>
+  <div
+    className="tabPanelsWrapper"
+    data-testid="tab-panels"
+  >
+    <div
+      className="tabPanelWrapper tabPanel active animationDirectionRtl"
+      data-testid="tab-panel"
+      role="tabpanel"
+    >
+      Second slide
+    </div>
+  </div>
+</div>
+`;
+
+exports[`TabsContext renders correctly > with className 1`] = `
+<div
+  className="test"
+  data-testid="tabs-context"
+>
+  <div
+    className="tabsWrapper compact"
+    data-testid="tab-list"
+  >
+    <ul
+      className="tabsList"
+      role="tablist"
+    >
+      <li
+        aria-disabled={false}
+        aria-selected={true}
+        className="tabWrapper tabListTabWrapper active"
+        data-testid="tab"
+        data-vibe="Tab"
+        onClick={[Function]}
+        onKeyDown={[Function]}
+        role="tab"
+        tabIndex={0}
+      >
+        <div
+          className="tabInner tabListTabInner"
+        >
+          First
+        </div>
+      </li>
+    </ul>
+  </div>
+  <div
+    className="tabPanelsWrapper"
+    data-testid="tab-panels"
+  >
+    <div
+      className="tabPanelWrapper tabPanel active animationDirectionRtl"
+      data-testid="tab-panel"
+      role="tabpanel"
+    >
+      First slide
+    </div>
+  </div>
+</div>
+`;
+
+exports[`TabsContext renders correctly > with empty props 1`] = `
+<div
+  data-testid="tabs-context"
+>
+  <div
+    className="tabsWrapper compact"
+    data-testid="tab-list"
+  >
+    <ul
+      className="tabsList"
+      role="tablist"
+    >
+      <li
+        aria-disabled={false}
+        aria-selected={true}
+        className="tabWrapper tabListTabWrapper active"
+        data-testid="tab"
+        data-vibe="Tab"
+        onClick={[Function]}
+        onKeyDown={[Function]}
+        role="tab"
+        tabIndex={0}
+      >
+        <div
+          className="tabInner tabListTabInner"
+        >
+          First
+        </div>
+      </li>
+    </ul>
+  </div>
+  <div
+    className="tabPanelsWrapper"
+    data-testid="tab-panels"
+  >
+    <div
+      className="tabPanelWrapper tabPanel active animationDirectionRtl"
+      data-testid="tab-panel"
+      role="tabpanel"
+    >
+      First slide
+    </div>
+  </div>
+</div>
+`;
+
+exports[`TabsContext renders correctly > with id 1`] = `
+<div
+  data-testid="tabs-context_test"
+  id="test"
+>
+  <div
+    className="tabsWrapper compact"
+    data-testid="tab-list"
+  >
+    <ul
+      className="tabsList"
+      role="tablist"
+    >
+      <li
+        aria-disabled={false}
+        aria-selected={true}
+        className="tabWrapper tabListTabWrapper active"
+        data-testid="tab"
+        data-vibe="Tab"
+        onClick={[Function]}
+        onKeyDown={[Function]}
+        role="tab"
+        tabIndex={0}
+      >
+        <div
+          className="tabInner tabListTabInner"
+        >
+          First
+        </div>
+      </li>
+    </ul>
+  </div>
+  <div
+    className="tabPanelsWrapper"
+    data-testid="tab-panels"
+  >
+    <div
+      className="tabPanelWrapper tabPanel active animationDirectionRtl"
+      data-testid="tab-panel"
+      role="tabpanel"
+    >
+      First slide
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/core/src/components/TextArea/TextArea.module.scss b/packages/core/src/components/TextArea/TextArea.module.scss
index 272e3e1532..21275be360 100644
--- a/packages/core/src/components/TextArea/TextArea.module.scss
+++ b/packages/core/src/components/TextArea/TextArea.module.scss
@@ -1,17 +1,17 @@
 @import "../../styles/typography";
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 
 .textAreaWrapper {
   display: flex;
   flex-direction: column;
   width: 100%;
-  gap: var(--spacing-xs);
+  gap: var(--space-4);
   @include smoothing-text;
   @include vibe-text(text2, normal);
 
   .label {
     display: inline-flex;
-    gap: var(--spacing-xs);
+    gap: var(--space-4);
     color: var(--primary-text-color);
 
     &.required::after {
@@ -28,7 +28,7 @@
     }
 
     .limitText {
-      margin-left: auto;
+      margin-inline-start: auto;
     }
   }
 
@@ -36,11 +36,16 @@
     resize: vertical;
     border: 1px solid var(--ui-border-color);
     border-radius: var(--border-radius-small);
-    padding: var(--spacing-small) var(--spacing-medium);
+    padding: var(--space-8);
     outline: none;
     background-color: var(--secondary-background-color);
     color: var(--primary-text-color);
 
+    &::placeholder {
+      color: var(--placeholder-color);
+      font-weight: 400;
+    }
+
     &:hover {
       border-color: var(--primary-text-color);
     }
@@ -56,6 +61,7 @@
     }
 
     &.large {
+      padding: var(--space-12);
       @include vibe-text(text1, normal);
     }
 
@@ -92,6 +98,10 @@
       background-color: var(--disabled-background-color);
       border-color: transparent;
       resize: none;
+
+      &::placeholder {
+        color: var(--disabled-text-color);
+      }
     }
 
     .helpText {
diff --git a/packages/core/src/components/TextField/TextField.module.scss b/packages/core/src/components/TextField/TextField.module.scss
index b6c1584bde..a309ac7a62 100644
--- a/packages/core/src/components/TextField/TextField.module.scss
+++ b/packages/core/src/components/TextField/TextField.module.scss
@@ -1,4 +1,4 @@
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 @import "../../styles/typography";
 
 .textField {
@@ -23,7 +23,7 @@
 }
 
 .textField .subTextContainer .counter {
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 
 .textField.disabled .icon {
@@ -64,7 +64,7 @@
   border-color: var(--ui-border-color);
   border-radius: var(--border-radius-small);
   transition: border-color var(--motion-productive-medium) ease-in;
-  padding: var(--spacing-small) var(--spacing-medium);
+  padding: var(--space-8) var(--space-4) var(--space-8) var(--space-12);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -87,12 +87,12 @@
 }
 
 .textField .inputWrapper .input::placeholder {
-  color: var(--secondary-text-color);
+  color: var(--placeholder-color);
   font-weight: 400;
 }
 
 .textField .inputWrapper .input.inputHasIcon {
-  padding: var(--spacing-small) var(--spacing-large) var(--spacing-small) var(--spacing-medium);
+  padding: var(--space-8) var(--space-24) var(--space-8) var(--space-8);
 }
 
 .textField .inputWrapper .input.round {
@@ -104,17 +104,16 @@
 }
 
 .textField .inputWrapper .input.onlyUnderline {
-  border-left: none;
-  border-right: none;
+  border-inline: none;
   border-top: none;
-  padding: var(--spacing-small) var(--spacing-large) var(--spacing-small) var(--spacing-xs);
+  padding: var(--space-8) var(--space-24) var(--space-8) var(--space-4);
   border-radius: 0 !important;
 }
 
 .textField .inputWrapper .tooltipContainer {
   position: absolute;
   top: 50%;
-  right: 0;
+  inset-inline-end: 0;
   width: 32px;
   height: 20px;
   transform: translateY(-50%);
@@ -131,7 +130,7 @@
 .textField .inputWrapper .iconContainer {
   position: absolute;
   top: 50%;
-  right: 4px;
+  inset-inline-end: 4px;
   width: 24px;
   height: 24px;
   transform: translateY(-50%);
@@ -241,12 +240,13 @@
 }
 
 .textField .inputWrapper.wrapperSizeSmall .input {
+  padding-inline-start: var(--space-8);
   @include vibe-text(text2, normal);
   @include smoothing-text;
 }
 
 .textField .inputWrapper.inputWrapperSizeSmall .input.inputHasIcon.onlyUnderline {
-  padding-left: var(--spacing-xs);
+  padding-inline-start: var(--space-4);
 }
 
 .textField .inputWrapper.wrapperSizeMedium {
@@ -259,11 +259,11 @@
 }
 
 .textField .inputWrapper.wrapperSizeMedium .input.inputHasIcon {
-  padding: var(--spacing-small) var(--spacing-xl) var(--spacing-small) var(--spacing-medium);
+  padding: var(--space-8) var(--space-32) var(--space-8) var(--space-12);
 }
 
 .textField .inputWrapper.wrapperSizeMedium .input.inputHasIcon.onlyUnderline {
-  padding-left: 4px;
+  padding-inline-start: 4px;
 }
 
 .textField .inputWrapper.wrapperSizeMedium .iconContainer {
@@ -287,11 +287,11 @@
 }
 
 .textField .inputWrapper.wrapperSizeLarge .input.inputHasIcon {
-  padding: var(--spacing-small) var(--spacing-xl) var(--spacing-small) var(--spacing-medium);
+  padding: var(--space-8) var(--space-32) var(--space-8) var(--space-12);
 }
 
 .textField .inputWrapper.wrapperSizeLarge .input.inputHasIcon.onlyUnderline {
-  padding-left: var(--spacing-xs);
+  padding-inline-start: var(--space-4);
 }
 
 .textField .inputWrapper.wrapperSizeLarge .iconContainer {
@@ -306,7 +306,7 @@
 .textField .inputWrapper .loaderContainer {
   position: absolute;
   top: 50%;
-  right: 4px;
+  inset-inline-end: 4px;
   width: 24px;
   height: 24px;
   transform: translateY(-50%);
@@ -316,7 +316,7 @@
 }
 
 .textField .inputWrapper .loaderContainer.loaderContainerHasIcon {
-  right: 32px;
+  inset-inline-end: 32px;
 }
 
 .textField .inputWrapper .loaderContainer .loader {
diff --git a/packages/core/src/components/TextField/TextField.tsx b/packages/core/src/components/TextField/TextField.tsx
index bce8a54c9b..0167b63502 100644
--- a/packages/core/src/components/TextField/TextField.tsx
+++ b/packages/core/src/components/TextField/TextField.tsx
@@ -1,40 +1,22 @@
 import cx from "classnames";
-import React, {
-  ChangeEvent,
-  type ChangeEventHandler,
-  forwardRef,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState
-} from "react";
+import React, { type ChangeEventHandler, forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import useDebounceEvent from "../../hooks/useDebounceEvent";
 import { Icon } from "@vibe/icon";
 import { Loader } from "@vibe/loader";
 import { Text } from "@vibe/typography";
 import FieldLabel from "../FieldLabel/FieldLabel";
-import {
-  FEEDBACK_CLASSES,
-  SIZE_MAPPER,
-  TextFieldAriaLabel,
-  TextFieldFeedbackState as TextFieldFeedbackStateEnum,
-  TextFieldTextType as TextFieldTextTypeEnum
-} from "./TextFieldConstants";
+import { FEEDBACK_CLASSES, SIZE_MAPPER, TextFieldAriaLabel } from "./TextFieldConstants";
 import { type TextFieldType, type TextFieldSize } from "./TextField.types";
-import { BASE_SIZES } from "../../constants/sizes";
 import useMergeRef from "../../hooks/useMergeRef";
 import { Clickable } from "@vibe/clickable";
 import { getTestId } from "../../tests/test-ids-utils";
 import { NOOP } from "../../utils/function-utils";
 import { ComponentDefaultTestId, ComponentVibeId } from "../../tests/constants";
-import { type VibeComponentProps, withStaticProps } from "../../types";
+import { type VibeComponentProps } from "../../types";
 import styles from "./TextField.module.scss";
 import { Tooltip } from "@vibe/tooltip";
 import { HiddenText } from "../HiddenText";
 
-const EMPTY_OBJECT = { primary: "", secondary: "" };
-
 export interface TextFieldProps extends VibeComponentProps {
   /**
    * The placeholder text displayed when the input is empty.
@@ -94,7 +76,7 @@ export interface TextFieldProps extends VibeComponentProps {
   /**
    * The primary icon displayed inside the text field.
    */
-  iconName?: string | React.FunctionComponent | null;
+  icon?: string | React.FunctionComponent | null;
   /**
    * The secondary icon displayed inside the text field.
    */
@@ -144,12 +126,13 @@ export interface TextFieldProps extends VibeComponentProps {
    */
   activeDescendant?: string;
   /**
-   * Icon labels for accessibility.
+   * Accessible label for the primary icon.
+   */
+  iconLabel?: string;
+  /**
+   * Accessible label for the secondary icon.
    */
-  iconsNames?: {
-    primary: string;
-    secondary: string;
-  };
+  secondaryIconLabel?: string;
   /**
    * The type of the text field.
    */
@@ -233,7 +216,7 @@ const TextField = forwardRef(
       disabled = false,
       readonly = false,
       setRef = NOOP,
-      iconName,
+      icon: iconName,
       secondaryIconName,
       id = "input",
       title = "",
@@ -247,7 +230,8 @@ const TextField = forwardRef(
       inputAriaLabel,
       searchResultsContainerId = "",
       activeDescendant = "",
-      iconsNames = EMPTY_OBJECT,
+      iconLabel,
+      secondaryIconLabel,
       type = "text",
       maxLength = null,
       allowExceedingMaxLength = false,
@@ -357,7 +341,7 @@ const TextField = forwardRef(
     const isSecondary = secondaryIconName === currentStateIconName;
     const isPrimary = iconName === currentStateIconName;
     const shouldFocusOnPrimaryIcon =
-      (onIconClick !== NOOP || iconsNames.primary || iconTooltipContent) && inputValue && iconName.length && isPrimary;
+      (onIconClick !== NOOP || iconLabel || iconTooltipContent) && inputValue && iconName.length && isPrimary;
     const shouldFocusOnSecondaryIcon = (secondaryIconName || secondaryTooltipContent) && isSecondary && !!inputValue;
     const allowExceedingMaxLengthTextId = allowExceedingMaxLength ? `${id}-allow-exceeding-max-length-text` : undefined;
 
@@ -372,8 +356,8 @@ const TextField = forwardRef(
 
     const isIconContainerClickable = onIconClick !== NOOP || clearOnIconClick;
 
-    const primaryIconLabel = iconsNames.primary || iconTooltipContent;
-    const secondaryIconLabel = iconsNames.secondary || secondaryTooltipContent;
+    const primaryIconAriaLabel = iconLabel || iconTooltipContent;
+    const secondaryIconAriaLabel = secondaryIconLabel || secondaryTooltipContent;
 
     return (
       <div
@@ -445,14 +429,14 @@ const TextField = forwardRef(
                     [styles.iconContainerClickable]: isIconContainerClickable
                   })}
                   onClick={onIconClickCallback}
-                  tabIndex={shouldFocusOnPrimaryIcon ? "0" : "-1"}
-                  ariaLabel={primaryIconLabel}
+                  tabIndex={shouldFocusOnPrimaryIcon ? 0 : -1}
+                  aria-label={primaryIconAriaLabel}
                 >
                   <Icon
                     icon={iconName}
                     className={cx(styles.icon)}
-                    iconType="font"
-                    iconSize={size === "small" ? "16px" : "18px"}
+                    type="font"
+                    size={size === "small" ? "16px" : "18px"}
                   />
                 </Clickable>
               </Tooltip>
@@ -470,15 +454,15 @@ const TextField = forwardRef(
                     [styles.iconContainerClickable]: isIconContainerClickable
                   })}
                   onClick={onIconClickCallback}
-                  tabIndex={shouldFocusOnSecondaryIcon ? "0" : "-1"}
+                  tabIndex={shouldFocusOnSecondaryIcon ? 0 : -1}
                   data-testid={secondaryDataTestId || getTestId(ComponentDefaultTestId.TEXT_FIELD_SECONDARY_BUTTON, id)}
-                  ariaLabel={secondaryIconLabel}
+                  aria-label={secondaryIconAriaLabel}
                 >
                   <Icon
                     icon={secondaryIconName}
                     className={cx(styles.icon)}
-                    iconType="font"
-                    iconSize={size === "small" ? "16px" : "18px"}
+                    type="font"
+                    size={size === "small" ? "16px" : "18px"}
                   />
                 </Clickable>
               </Tooltip>
@@ -506,14 +490,4 @@ const TextField = forwardRef(
   }
 );
 
-interface TextFieldStaticProps {
-  sizes: typeof BASE_SIZES;
-  types: typeof TextFieldTextTypeEnum;
-  feedbacks: typeof TextFieldFeedbackStateEnum;
-}
-
-export default withStaticProps<TextFieldProps, TextFieldStaticProps, unknown>(TextField, {
-  sizes: BASE_SIZES,
-  feedbacks: TextFieldFeedbackStateEnum,
-  types: TextFieldTextTypeEnum
-});
+export default TextField;
diff --git a/packages/core/src/components/TextField/TextFieldConstants.ts b/packages/core/src/components/TextField/TextFieldConstants.ts
index 5c3e147eed..76f5e600a2 100644
--- a/packages/core/src/components/TextField/TextFieldConstants.ts
+++ b/packages/core/src/components/TextField/TextFieldConstants.ts
@@ -14,32 +14,9 @@ const OLD_TEXT_FIELD_SIZES = {
 
 export type TextFieldSize = (typeof BASE_SIZES)[keyof typeof BASE_SIZES] | keyof typeof OLD_TEXT_FIELD_SIZES;
 
-/**
- * @deprecated
- */
-export enum TextFieldTextType {
-  TEXT = "text",
-  PASSWORD = "password",
-  SEARCH = "search",
-  DATE = "date",
-  DATE_TIME = "datetime-local",
-  NUMBER = "number",
-  TEL = "tel",
-  URL = "url",
-  EMAIL = "email"
-}
-
-/**
- * @deprecated
- */
-export enum TextFieldFeedbackState {
-  ERROR = "error",
-  SUCCESS = "success"
-}
-
 export const FEEDBACK_CLASSES = {
-  [TextFieldFeedbackState.ERROR]: styles.inputErrorValidation,
-  [TextFieldFeedbackState.SUCCESS]: styles.inputSuccessValidation
+  error: styles.inputErrorValidation,
+  success: styles.inputSuccessValidation
 };
 
 export const SIZE_MAPPER = {
diff --git a/packages/core/src/components/TextField/__tests__/TextField-tests.test.jsx b/packages/core/src/components/TextField/__tests__/TextField-tests.test.tsx
similarity index 100%
rename from packages/core/src/components/TextField/__tests__/TextField-tests.test.jsx
rename to packages/core/src/components/TextField/__tests__/TextField-tests.test.tsx
diff --git a/packages/core/src/components/TextField/__tests__/TextField.snapshot.test.tsx b/packages/core/src/components/TextField/__tests__/TextField.snapshot.test.tsx
index 7afd726235..7cc77de37f 100644
--- a/packages/core/src/components/TextField/__tests__/TextField.snapshot.test.tsx
+++ b/packages/core/src/components/TextField/__tests__/TextField.snapshot.test.tsx
@@ -60,7 +60,7 @@ describe("TextField renders correctly", () => {
   });
 
   it("with icon", () => {
-    const tree = renderer.create(<TextField iconName="fa-star" />).toJSON();
+    const tree = renderer.create(<TextField icon="fa-star" />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
@@ -89,10 +89,8 @@ describe("TextField renders correctly", () => {
     expect(tree).toMatchSnapshot();
   });
 
-  it("with iconsNames", () => {
-    const tree = renderer
-      .create(<TextField iconsNames={{ primary: "primary-label", secondary: "secondary-label" }} />)
-      .toJSON();
+  it("with iconLabel and secondaryIconLabel", () => {
+    const tree = renderer.create(<TextField iconLabel="primary-label" secondaryIconLabel="secondary-label" />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
diff --git a/packages/core/src/components/TextField/__tests__/TextField.test.jsx b/packages/core/src/components/TextField/__tests__/TextField.test.tsx
similarity index 98%
rename from packages/core/src/components/TextField/__tests__/TextField.test.jsx
rename to packages/core/src/components/TextField/__tests__/TextField.test.tsx
index 8fcadceead..73e5273d7f 100644
--- a/packages/core/src/components/TextField/__tests__/TextField.test.jsx
+++ b/packages/core/src/components/TextField/__tests__/TextField.test.tsx
@@ -124,7 +124,6 @@ describe("TextField Tests", () => {
   });
 
   it("should display an icon", () => {
-    const iconNames = { primary: "Primary Icon" };
     const { rerender, queryByLabelText } = inputComponent;
     act(() => {
       rerender(
@@ -132,13 +131,13 @@ describe("TextField Tests", () => {
           placeholder={defaultPlaceHolder}
           onChange={onChangeStub}
           id="test"
-          iconName="test"
-          iconsNames={iconNames}
+          icon="test"
+          iconLabel="Primary Icon"
         />
       );
     });
 
-    const icon = queryByLabelText(iconNames.primary);
+    const icon = queryByLabelText("Primary Icon");
     expect(icon).toBeTruthy();
   });
 
diff --git a/packages/core/src/components/TextField/__tests__/__snapshots__/TextField.snapshot.test.tsx.snap b/packages/core/src/components/TextField/__tests__/__snapshots__/TextField.snapshot.test.tsx.snap
index 32acadff28..88c57c5085 100644
--- a/packages/core/src/components/TextField/__tests__/__snapshots__/TextField.snapshot.test.tsx.snap
+++ b/packages/core/src/components/TextField/__tests__/__snapshots__/TextField.snapshot.test.tsx.snap
@@ -459,7 +459,7 @@ exports[`TextField renders correctly > with icon 1`] = `
 </div>
 `;
 
-exports[`TextField renders correctly > with iconsNames 1`] = `
+exports[`TextField renders correctly > with iconLabel and secondaryIconLabel 1`] = `
 <div
   aria-busy={false}
   className="textField"
diff --git a/packages/core/src/components/TextWithHighlight/TextWithHighlight.tsx b/packages/core/src/components/TextWithHighlight/TextWithHighlight.tsx
index bc84786534..3a3cd63dd7 100644
--- a/packages/core/src/components/TextWithHighlight/TextWithHighlight.tsx
+++ b/packages/core/src/components/TextWithHighlight/TextWithHighlight.tsx
@@ -7,7 +7,6 @@ import useIsomorphicLayoutEffect from "../../hooks/ssr/useIsomorphicLayoutEffect
 import useMergeRef from "../../hooks/useMergeRef";
 import type VibeComponentProps from "../../types/VibeComponentProps";
 import styles from "./TextWithHighlight.module.scss";
-import { type TooltipPositions } from "@vibe/tooltip";
 
 const getTextPart = (
   text: string,
@@ -68,11 +67,6 @@ export interface TextWithHighlightProps extends VibeComponentProps {
    * Class name applied to the wrapping element of highlighted text.
    */
   wrappingElementClassName?: string;
-  /**
-   * The position of the tooltip when displayed.
-   * @deprecated Use `tooltipProps.position` instead.
-   */
-  tooltipPosition?: TooltipPositions;
   /**
    * Additional props to customize the tooltip component.
    */
@@ -92,7 +86,6 @@ const TextWithHighlight: React.FC<TextWithHighlightProps> = forwardRef(
       ignoreCase = true,
       allowTermSplit = true,
       nonEllipsisTooltip,
-      tooltipPosition,
       wrappingTextTag = "em",
       wrappingElementClassName,
       tooltipProps = {},
@@ -153,7 +146,7 @@ const TextWithHighlight: React.FC<TextWithHighlightProps> = forwardRef(
     if (isOverflowing || nonEllipsisTooltip) {
       const tooltipContent = isOverflowing ? text : nonEllipsisTooltip;
       return (
-        <Tooltip content={tooltipContent} position={tooltipPosition} {...tooltipProps}>
+        <Tooltip content={tooltipContent} {...tooltipProps}>
           {Element}
         </Tooltip>
       );
diff --git a/packages/core/src/components/ThemeProvider/ThemeProvider.tsx b/packages/core/src/components/ThemeProvider/ThemeProvider.tsx
index 3e254409de..ac9091449d 100644
--- a/packages/core/src/components/ThemeProvider/ThemeProvider.tsx
+++ b/packages/core/src/components/ThemeProvider/ThemeProvider.tsx
@@ -1,6 +1,6 @@
 import cx from "classnames";
 import React, { type ReactElement, useEffect, useMemo, useState } from "react";
-import { SystemTheme as SystemThemeEnum, type Theme, ThemeColor as ThemeColorEnum } from "./ThemeProviderConstants";
+import { type Theme } from "./ThemeProviderConstants";
 import { type SystemTheme } from "./ThemeProvider.types";
 import {
   addSystemThemeClassNameToBody,
@@ -11,8 +11,6 @@ import {
   shouldGenerateTheme
 } from "./ThemeProviderUtils";
 import useIsomorphicLayoutEffect from "../../hooks/ssr/useIsomorphicLayoutEffect";
-import { withStaticPropsWithoutForwardRef } from "../../types";
-
 export interface ThemeProviderProps {
   /**
    * The theme configuration to apply. It consists of a `name` (a unique CSS class name added to the children)
@@ -107,12 +105,4 @@ const ThemeProvider = ({
   return <div className={cx(themeConfig?.name, themeClassSpecifier, className)}>{children}</div>;
 };
 
-interface ThemeProviderStaticProps {
-  systemThemes: typeof SystemThemeEnum;
-  colors: typeof ThemeColorEnum;
-}
-
-export default withStaticPropsWithoutForwardRef<ThemeProviderProps, ThemeProviderStaticProps>(ThemeProvider, {
-  systemThemes: SystemThemeEnum,
-  colors: ThemeColorEnum
-});
+export default ThemeProvider;
diff --git a/packages/core/src/components/ThemeProvider/ThemeProviderConstants.ts b/packages/core/src/components/ThemeProvider/ThemeProviderConstants.ts
index 695a26802d..700939edd8 100644
--- a/packages/core/src/components/ThemeProvider/ThemeProviderConstants.ts
+++ b/packages/core/src/components/ThemeProvider/ThemeProviderConstants.ts
@@ -1,34 +1,4 @@
-/**
- * System themes: dark, light, black
- */
-/**
- * @deprecated
- */
-export enum SystemTheme {
-  LIGHT = "light",
-  DARK = "dark",
-  BLACK = "black"
-}
-
-/**
- * Colors which are eligible for theming
- */
-/**
- * @deprecated
- */
-export enum ThemeColor {
-  primaryColor = "primary-color",
-  primaryHoverColor = "primary-hover-color",
-  primarySelectedColor = "primary-selected-color",
-  primarySelectedHoverColor = "primary-selected-hover-color",
-  primarySelectedOnSecondaryColor = "primary-selected-on-secondary-color",
-  textColorOnPrimary = "text-color-on-primary",
-  brandColor = "brand-color",
-  brandHoverColor = "brand-hover-color",
-  brandSelectedColor = "brand-selected-color",
-  brandSelectedHoverColor = "brand-selected-hover-color",
-  textColorOnBrand = "text-color-on-brand"
-}
+import { type SystemTheme, type ThemeColor } from "./ThemeProvider.types";
 
 export type Theme = {
   /**
@@ -53,9 +23,9 @@ type ThemeCustomClassValue = {
 };
 
 export const SystemThemeClassMap: SystemThemeClassMapType = {
-  [SystemTheme.LIGHT]: "light-app-theme",
-  [SystemTheme.DARK]: "dark-app-theme",
-  [SystemTheme.BLACK]: "black-app-theme"
+  light: "light-app-theme",
+  dark: "dark-app-theme",
+  black: "black-app-theme"
 };
 
 type SystemThemeClassMapType = {
diff --git a/packages/core/src/components/ThemeProvider/__tests__/ThemeProvider.test.jsx b/packages/core/src/components/ThemeProvider/__tests__/ThemeProvider.test.tsx
similarity index 100%
rename from packages/core/src/components/ThemeProvider/__tests__/ThemeProvider.test.jsx
rename to packages/core/src/components/ThemeProvider/__tests__/ThemeProvider.test.tsx
diff --git a/packages/core/src/components/Tipseen/Tipseen.module.scss b/packages/core/src/components/Tipseen/Tipseen.module.scss
index d3a7318e42..9ddd802347 100644
--- a/packages/core/src/components/Tipseen/Tipseen.module.scss
+++ b/packages/core/src/components/Tipseen/Tipseen.module.scss
@@ -14,9 +14,9 @@
   &.floating {
     position: fixed;
     bottom: 0;
-    right: 0;
-    margin-bottom: var(--spacing-medium);
-    margin-right: var(--spacing-medium);
+    inset-inline-end: 0;
+    margin-bottom: var(--space-16);
+    margin-inline-end: var(--space-16);
   }
 
   .tipseen {
@@ -26,7 +26,7 @@
     }
 
     &Title {
-      padding: var(--spacing-medium) var(--spacing-xl) 0 var(--spacing-medium);
+      padding: var(--space-16) var(--space-32) 0 var(--space-16);
     }
 
     &Content {
@@ -36,8 +36,8 @@
 
     &CloseButton {
       position: absolute;
-      top: var(--spacing-small);
-      right: var(--spacing-small);
+      top: var(--space-8);
+      inset-inline-end: var(--space-8);
       z-index: 2;
 
       &.dark {
diff --git a/packages/core/src/components/Tipseen/Tipseen.tsx b/packages/core/src/components/Tipseen/Tipseen.tsx
index 99eb2c6321..840809e0b6 100644
--- a/packages/core/src/components/Tipseen/Tipseen.tsx
+++ b/packages/core/src/components/Tipseen/Tipseen.tsx
@@ -1,30 +1,21 @@
 import { forwardRef, Fragment, type ReactElement, useEffect, useMemo, useRef, useState } from "react";
 import cx from "classnames";
-import { type DialogAnimationType, type DialogTriggerEvent } from "@vibe/dialog";
-import {
-  DialogAnimationTypeEnum as AnimationTypeEnum,
-  DialogTriggerEventEnum as HideShowEventEnum
-} from "@vibe/dialog";
+import { type DialogAnimationType, type DialogMiddleware, type DialogTriggerEvent } from "@vibe/dialog";
 import useMergeRef from "../../hooks/useMergeRef";
 import { Tooltip } from "@vibe/tooltip";
 import { IconButton } from "@vibe/icon-button";
 import { CloseSmall } from "@vibe/icons";
 import TipseenTitle from "./TipseenTitle";
-import {
-  TIPSEEN_CLOSE_BUTTON_ARIA_LABEL,
-  TipseenCloseButtonTheme as TipseenCloseButtonThemeEnum,
-  TipseenColor as TipseenColorEnum
-} from "./TipseenConstants";
+import { TIPSEEN_CLOSE_BUTTON_ARIA_LABEL } from "./TipseenConstants";
 import { type TipseenCloseButtonTheme, type TipseenColor } from "./Tipseen.types";
-import { type ElementContent, type VibeComponentProps, withStaticProps } from "../../types";
+import { type ElementContent, type VibeComponentProps } from "../../types";
 import { type MoveBy } from "../../types/MoveBy";
-import { type Modifier } from "react-popper";
 import { ComponentDefaultTestId } from "../../tests/constants";
 import { getTestId } from "../../tests/test-ids-utils";
 import { Text } from "@vibe/typography";
 import styles from "./Tipseen.module.scss";
 import React from "react";
-import { type TooltipPositions, TooltipPositionsEnum } from "@vibe/tooltip";
+import { type TooltipPositions } from "@vibe/tooltip";
 
 export interface TipseenProps extends VibeComponentProps {
   /**
@@ -83,6 +74,11 @@ export interface TipseenProps extends VibeComponentProps {
    * If true, hides the Tipseen when the reference element is hidden.
    */
   hideWhenReferenceHidden?: boolean;
+  /**
+   * Custom Floating UI middleware for positioning logic.
+   * @see https://floating-ui.com/docs/middleware
+   */
+  middleware?: DialogMiddleware[];
   /**
    * Class name applied to the reference wrapper element.
    */
@@ -95,11 +91,6 @@ export interface TipseenProps extends VibeComponentProps {
    * Class name applied to the Tipseen arrow.
    */
   tooltipArrowClassName?: string;
-  /**
-   * Custom Popper.js modifiers.
-   * https://popper.js.org/docs/v2/modifiers/
-   */
-  modifiers?: Array<Modifier<unknown>>;
   /**
    * The aria-label for the close button.
    */
@@ -151,10 +142,10 @@ const Tipseen = forwardRef(
       width,
       moveBy,
       hideWhenReferenceHidden = false,
+      middleware,
       referenceWrapperClassName,
       tip = true,
       tooltipArrowClassName,
-      modifiers = [],
       floating = false,
       color: colorProp,
       "data-testid": dataTestId
@@ -214,7 +205,7 @@ const Tipseen = forwardRef(
               kind="tertiary"
               // @ts-ignore
               color={closeButtonColor}
-              ariaLabel={overrideCloseAriaLabel}
+              aria-label={overrideCloseAriaLabel}
               icon={CloseSmall}
             />
           )}
@@ -250,9 +241,9 @@ const Tipseen = forwardRef(
           disableDialogSlide={false}
           moveBy={moveBy}
           hideWhenReferenceHidden={hideWhenReferenceHidden}
+          middleware={middleware}
           referenceWrapperClassName={referenceWrapperClassName}
           tip={tip && !floating}
-          modifiers={modifiers}
           open={defaultDelayOpen ? delayedOpen : undefined}
           forceRenderWithoutChildren={floating}
         >
@@ -263,18 +254,4 @@ const Tipseen = forwardRef(
   }
 );
 
-interface TipseenStaticProps {
-  closeButtonThemes: typeof TipseenCloseButtonThemeEnum;
-  animationTypes: typeof AnimationTypeEnum;
-  hideShowTriggers: typeof HideShowEventEnum;
-  colors: typeof TipseenColorEnum;
-  positions: typeof TooltipPositionsEnum;
-}
-
-export default withStaticProps<TipseenProps, TipseenStaticProps>(Tipseen, {
-  closeButtonThemes: TipseenCloseButtonThemeEnum,
-  animationTypes: AnimationTypeEnum,
-  hideShowTriggers: HideShowEventEnum,
-  colors: TipseenColorEnum,
-  positions: TooltipPositionsEnum
-});
+export default Tipseen;
diff --git a/packages/core/src/components/Tipseen/TipseenBasicContent.module.scss b/packages/core/src/components/Tipseen/TipseenBasicContent.module.scss
index 2627cd6fb5..0590c11c88 100644
--- a/packages/core/src/components/Tipseen/TipseenBasicContent.module.scss
+++ b/packages/core/src/components/Tipseen/TipseenBasicContent.module.scss
@@ -1,5 +1,5 @@
 @mixin tipseen-content-padding {
-  padding: var(--spacing-medium) 20px var(--spacing-large) 20px;
+  padding: var(--space-16) 20px var(--space-24) 20px;
 
   // this is because the designer wanted the padding top
   // to be 12px in case the tipseen have both content and image
diff --git a/packages/core/src/components/Tipseen/TipseenConstants.ts b/packages/core/src/components/Tipseen/TipseenConstants.ts
index 8504718578..d40996f519 100644
--- a/packages/core/src/components/Tipseen/TipseenConstants.ts
+++ b/packages/core/src/components/Tipseen/TipseenConstants.ts
@@ -2,21 +2,3 @@ export const SUBMIT_BUTTON_TEXT = "Submit";
 export const DISMISS_BUTTON_TEXT = "Dismiss";
 export const TIPSEEN_CLOSE_BUTTON_TEST_ID = "close-tipseen";
 export const TIPSEEN_CLOSE_BUTTON_ARIA_LABEL = "Close";
-
-/**
- * @deprecated
- */
-export enum TipseenCloseButtonTheme {
-  LIGHT = "light",
-  DARK = "dark",
-  FIXED_LIGHT = "fixed-light",
-  FIXED_DARK = "fixed-dark"
-}
-
-/**
- * @deprecated
- */
-export enum TipseenColor {
-  PRIMARY = "primary",
-  INVERTED = "inverted"
-}
diff --git a/packages/core/src/components/Tipseen/TipseenContent.module.scss b/packages/core/src/components/Tipseen/TipseenContent.module.scss
index 14b1ad642c..08ccdac0e3 100644
--- a/packages/core/src/components/Tipseen/TipseenContent.module.scss
+++ b/packages/core/src/components/Tipseen/TipseenContent.module.scss
@@ -5,5 +5,5 @@
 }
 
 .dismiss {
-  margin-right: var(--spacing-small)
+  margin-inline-end: var(--space-8)
 }
\ No newline at end of file
diff --git a/packages/core/src/components/Tipseen/TipseenContent.tsx b/packages/core/src/components/Tipseen/TipseenContent.tsx
index 85bb73fbc6..577251abeb 100644
--- a/packages/core/src/components/Tipseen/TipseenContent.tsx
+++ b/packages/core/src/components/Tipseen/TipseenContent.tsx
@@ -1,6 +1,6 @@
 import React, { type FC, useContext, useMemo } from "react";
 import cx from "classnames";
-import { DISMISS_BUTTON_TEXT, SUBMIT_BUTTON_TEXT, TipseenColor } from "./TipseenConstants";
+import { DISMISS_BUTTON_TEXT, SUBMIT_BUTTON_TEXT } from "./TipseenConstants";
 import TipseenBasicContent from "./TipseenBasicContent";
 import { type VibeComponentProps } from "../../types";
 import { type ElementContent } from "../../types/ElementContent";
@@ -69,7 +69,7 @@ const TipseenContent: FC<TipseenContentProps> = ({
 }) => {
   const color = useContext(TipseenContext);
   const buttonColor = useMemo(() => {
-    return color === TipseenColor.INVERTED ? "on-inverted-background" : "on-primary-color";
+    return color === "inverted" ? "on-inverted-background" : "on-primary-color";
   }, [color]);
 
   const showButtons = !hideDismiss || !hideSubmit;
diff --git a/packages/core/src/components/Tipseen/TipseenImage.module.scss b/packages/core/src/components/Tipseen/TipseenImage.module.scss
deleted file mode 100644
index 8215b37c24..0000000000
--- a/packages/core/src/components/Tipseen/TipseenImage.module.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.tipseenImage {
-  object-fit: cover;
-  width: 100%;
-}
diff --git a/packages/core/src/components/Tipseen/TipseenImage.tsx b/packages/core/src/components/Tipseen/TipseenImage.tsx
deleted file mode 100644
index b7bbcecd9e..0000000000
--- a/packages/core/src/components/Tipseen/TipseenImage.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import cx from "classnames";
-import React from "react";
-import styles from "./TipseenImage.module.scss";
-import TipseenMedia from "./TipseenMedia/TipseenMedia";
-
-export interface TipseenImageProps {
-  /**
-   * The source URL of the image.
-   */
-  src?: string | undefined;
-  /**
-   * The alternative text for the image, used for accessibility.
-   */
-  alt?: string;
-  /**
-   * Class name applied to the image element.
-   */
-  className?: string;
-  /**
-   * Class name applied to the TipseenMedia container.
-   */
-  tipseenMediaClassName?: string;
-}
-
-const TipseenImage: React.FC<TipseenImageProps> = ({ src, alt, className, tipseenMediaClassName }) => {
-  return (
-    // TODO future breaking change where we remove the TipseenMedia component and we remove TipseenImage?
-    <TipseenMedia className={tipseenMediaClassName}>
-      <img src={src} alt={alt} className={cx(styles.tipseenImage, className)} />
-    </TipseenMedia>
-  );
-};
-
-export default TipseenImage;
diff --git a/packages/core/src/components/Tipseen/TipseenTitle.module.scss b/packages/core/src/components/Tipseen/TipseenTitle.module.scss
index 268d1434f3..b225a0fa26 100644
--- a/packages/core/src/components/Tipseen/TipseenTitle.module.scss
+++ b/packages/core/src/components/Tipseen/TipseenTitle.module.scss
@@ -1,4 +1,4 @@
 .title {
-  padding-right: var(--spacing-medium);
-  padding-bottom: var(--spacing-xs);
+  padding-inline-end: var(--space-16);
+  padding-bottom: var(--space-4);
 }
diff --git a/packages/core/src/components/Tipseen/TipseenWizard.tsx b/packages/core/src/components/Tipseen/TipseenWizard.tsx
index e18108ea1e..6f6f1fc4f1 100644
--- a/packages/core/src/components/Tipseen/TipseenWizard.tsx
+++ b/packages/core/src/components/Tipseen/TipseenWizard.tsx
@@ -4,7 +4,6 @@ import Steps, { type StepsProps } from "../Steps/Steps";
 import TipseenBasicContent from "./TipseenBasicContent";
 import styles from "./TipseenWizard.module.scss";
 import { TipseenContext } from "./Tipseen";
-import { TipseenColor } from "./TipseenConstants";
 import { type ButtonSize, type ButtonType } from "@vibe/button";
 
 const FINISH_TEXT = "Got it";
@@ -28,7 +27,7 @@ const TipseenWizard: FC<TipseenWizardProps> = ({ id, title, onFinish, titleClass
   const overrideStepsProps = stepsProps as StepsProps;
   const color = useContext(TipseenContext);
   const buttonColor = useMemo(() => {
-    return color === TipseenColor.INVERTED ? "on-inverted-background" : "on-primary-color";
+    return color === "inverted" ? "on-inverted-background" : "on-primary-color";
   }, [color]);
 
   const nextButtonProps = useMemo(
diff --git a/packages/core/src/components/Tipseen/index.ts b/packages/core/src/components/Tipseen/index.ts
index 10c96388ca..1f456e99d5 100644
--- a/packages/core/src/components/Tipseen/index.ts
+++ b/packages/core/src/components/Tipseen/index.ts
@@ -1,7 +1,6 @@
 export { default as Tipseen, type TipseenProps } from "./Tipseen";
 export { default as TipseenContent, type TipseenContentProps } from "./TipseenContent";
 export { default as TipseenWizard, type TipseenWizardProps } from "./TipseenWizard";
-export { default as TipseenImage, type TipseenImageProps } from "./TipseenImage";
 export { default as TipseenMedia, type TipseenMediaProps } from "./TipseenMedia/TipseenMedia";
 
 export * from "./Tipseen.types";
diff --git a/packages/core/src/components/Toast/Toast.module.scss b/packages/core/src/components/Toast/Toast.module.scss
index 362e042c78..b2f051443b 100644
--- a/packages/core/src/components/Toast/Toast.module.scss
+++ b/packages/core/src/components/Toast/Toast.module.scss
@@ -4,13 +4,12 @@
   box-shadow: var(--box-shadow-medium);
   -webkit-font-smoothing: var(--font-smoothing-webkit);
   -moz-osx-font-smoothing: var(--font-smoothing-moz);
-  margin: var(--spacing-medium);
+  margin: var(--space-16);
   position: fixed;
   left: 50%;
   top: 0;
-  margin-right: auto;
-  margin-left: auto;
-  padding: var(--spacing-small);
+  margin-inline: auto;
+  padding: var(--space-8);
   align-items: center;
   display: flex;
   min-width: 200px;
@@ -65,7 +64,7 @@
 
 .icon {
   display: flex;
-  margin-left: var(--spacing-small);
+  margin-inline-start: var(--space-8);
 }
 
 .actionButton.withTransition {
@@ -76,7 +75,7 @@
 }
 
 .content {
-  margin: 0 var(--spacing-small);
+  margin: 0 var(--space-8);
   flex: 1;
 }
 
@@ -102,7 +101,7 @@
 }
 
 .closeButton {
-  margin-left: var(--spacing-small);
+  margin-inline-start: var(--space-8);
 }
 
 @keyframes slideIn {
diff --git a/packages/core/src/components/Toast/Toast.tsx b/packages/core/src/components/Toast/Toast.tsx
index 804a0b882e..56006d4f12 100644
--- a/packages/core/src/components/Toast/Toast.tsx
+++ b/packages/core/src/components/Toast/Toast.tsx
@@ -10,12 +10,11 @@ import { Flex } from "@vibe/layout";
 import { CloseSmall } from "@vibe/icons";
 import ToastLink from "./ToastLink/ToastLink";
 import ToastButton from "./ToastButton/ToastButton";
-import { ToastActionType as ToastActionTypeEnum, ToastType as ToastTypeEnum } from "./ToastConstants";
 import { type ToastType, type ToastAction } from "./Toast.types";
 import { getIcon } from "./ToastHelpers";
 import { NOOP } from "../../utils/function-utils";
 import { getStyle } from "../../helpers/typesciptCssModulesHelper";
-import { type VibeComponentProps, withStaticPropsWithoutForwardRef } from "../../types";
+import { type VibeComponentProps } from "../../types";
 import styles from "./Toast.module.scss";
 import { IconButton } from "@vibe/icon-button";
 import usePrevious from "../../hooks/usePrevious";
@@ -216,7 +215,7 @@ const Toast = ({
             size="small"
             kind="tertiary"
             color="fixed-light"
-            ariaLabel={closeButtonAriaLabel}
+            aria-label={closeButtonAriaLabel}
             data-testid={getTestId(ComponentDefaultTestId.TOAST_CLOSE_BUTTON)}
             icon={CloseSmall}
             hideTooltip
@@ -227,12 +226,4 @@ const Toast = ({
   );
 };
 
-interface ToastStaticProps {
-  types: typeof ToastTypeEnum;
-  actionTypes: typeof ToastActionTypeEnum;
-}
-
-export default withStaticPropsWithoutForwardRef<ToastProps, ToastStaticProps>(Toast, {
-  types: ToastTypeEnum,
-  actionTypes: ToastActionTypeEnum
-});
+export default Toast;
diff --git a/packages/core/src/components/Toast/ToastConstants.ts b/packages/core/src/components/Toast/ToastConstants.ts
index fa9723a004..f33a90fd4e 100644
--- a/packages/core/src/components/Toast/ToastConstants.ts
+++ b/packages/core/src/components/Toast/ToastConstants.ts
@@ -1,38 +1,9 @@
 import { Info, Check, Alert, Warning } from "@vibe/icons";
 
-/**
- * @deprecated
- */
-export enum ToastType {
-  NORMAL = "normal",
-  POSITIVE = "positive",
-  NEGATIVE = "negative",
-  WARNING = "warning",
-  DARK = "dark"
-}
-
-/**
- * @deprecated
- */
-export enum ToastActionType {
-  LINK = "link",
-  BUTTON = "button"
-}
-
 export const defaultIconMap = {
-  [ToastType.NORMAL]: Info,
-  [ToastType.POSITIVE]: Check,
-  [ToastType.NEGATIVE]: Alert,
-  [ToastType.WARNING]: Warning,
-  [ToastType.DARK]: Info
-};
-
-/**
- * @deprecated
- */
-export type ToastAction = {
-  type: ToastActionType;
-  content?: string;
-  text?: string;
-  href?: string;
+  normal: Info,
+  positive: Check,
+  negative: Alert,
+  warning: Warning,
+  dark: Info
 };
diff --git a/packages/core/src/components/Toast/ToastHelpers.tsx b/packages/core/src/components/Toast/ToastHelpers.tsx
index d486f252b7..c7cd4e6e18 100644
--- a/packages/core/src/components/Toast/ToastHelpers.tsx
+++ b/packages/core/src/components/Toast/ToastHelpers.tsx
@@ -9,6 +9,6 @@ export const getIcon = (type: ToastType, icon: string | React.FC<IconSubComponen
     return icon;
   }
   return icon || defaultIconMap[type] ? (
-    <Icon iconType={icon ? "font" : "svg"} icon={icon || defaultIconMap[type]} iconSize={20} ignoreFocusStyle />
+    <Icon type={icon ? "font" : "svg"} icon={icon || defaultIconMap[type]} size={20} ignoreFocusStyle />
   ) : null;
 };
diff --git a/packages/core/src/components/Toast/__tests__/Toast.snapshot.test.tsx b/packages/core/src/components/Toast/__tests__/Toast.snapshot.test.tsx
index 700cfde9d0..cbd0bec480 100644
--- a/packages/core/src/components/Toast/__tests__/Toast.snapshot.test.tsx
+++ b/packages/core/src/components/Toast/__tests__/Toast.snapshot.test.tsx
@@ -55,10 +55,7 @@ describe("Toast renders correctly", () => {
   it("with link", () => {
     const tree = renderer
       .create(
-        <Toast
-          open
-          actions={[{ type: Toast.actionTypes.LINK, text: "Lorem ipsum", href: "https://monday.com", key: 1 }]}
-        >
+        <Toast open actions={[{ type: "link", text: "Lorem ipsum", href: "https://monday.com", key: 1 }]}>
           Something Happened
         </Toast>
       )
diff --git a/packages/core/src/components/Toast/__tests__/__snapshots__/Toast.snapshot.test.tsx.snap b/packages/core/src/components/Toast/__tests__/__snapshots__/Toast.snapshot.test.tsx.snap
index 867878d863..5bbf6beb9c 100644
--- a/packages/core/src/components/Toast/__tests__/__snapshots__/Toast.snapshot.test.tsx.snap
+++ b/packages/core/src/components/Toast/__tests__/__snapshots__/Toast.snapshot.test.tsx.snap
@@ -32,7 +32,7 @@ exports[`Toast renders correctly > (renders nothing) with empty props 1`] = `
     className="container directionRow justifyStart alignCenter content"
     style={
       {
-        "gap": "var(--spacing-large)",
+        "gap": "var(--space-24)",
       }
     }
   >
@@ -41,7 +41,7 @@ exports[`Toast renders correctly > (renders nothing) with empty props 1`] = `
       data-testid="toast-content"
       style={
         {
-          "gap": "var(--spacing-medium)",
+          "gap": "var(--space-16)",
         }
       }
     >
@@ -121,7 +121,7 @@ exports[`Toast renders correctly > and don't renders close button if closeable=f
     className="container directionRow justifyStart alignCenter content"
     style={
       {
-        "gap": "var(--spacing-large)",
+        "gap": "var(--space-24)",
       }
     }
   >
@@ -130,7 +130,7 @@ exports[`Toast renders correctly > and don't renders close button if closeable=f
       data-testid="toast-content"
       style={
         {
-          "gap": "var(--spacing-medium)",
+          "gap": "var(--space-16)",
         }
       }
     >
@@ -174,7 +174,7 @@ exports[`Toast renders correctly > renders nothing when open is false 1`] = `
     className="container directionRow justifyStart alignCenter content"
     style={
       {
-        "gap": "var(--spacing-large)",
+        "gap": "var(--space-24)",
       }
     }
   >
@@ -183,7 +183,7 @@ exports[`Toast renders correctly > renders nothing when open is false 1`] = `
       data-testid="toast-content"
       style={
         {
-          "gap": "var(--spacing-medium)",
+          "gap": "var(--space-16)",
         }
       }
     >
@@ -244,7 +244,7 @@ exports[`Toast renders correctly > when icon is hidden 1`] = `
     className="container directionRow justifyStart alignCenter content"
     style={
       {
-        "gap": "var(--spacing-large)",
+        "gap": "var(--space-24)",
       }
     }
   >
@@ -253,7 +253,7 @@ exports[`Toast renders correctly > when icon is hidden 1`] = `
       data-testid="toast-content"
       style={
         {
-          "gap": "var(--spacing-medium)",
+          "gap": "var(--space-16)",
         }
       }
     >
@@ -335,7 +335,7 @@ exports[`Toast renders correctly > when open is true 1`] = `
     className="container directionRow justifyStart alignCenter content"
     style={
       {
-        "gap": "var(--spacing-large)",
+        "gap": "var(--space-24)",
       }
     }
   >
@@ -344,7 +344,7 @@ exports[`Toast renders correctly > when open is true 1`] = `
       data-testid="toast-content"
       style={
         {
-          "gap": "var(--spacing-medium)",
+          "gap": "var(--space-16)",
         }
       }
     >
@@ -426,7 +426,7 @@ exports[`Toast renders correctly > with button 1`] = `
     className="container directionRow justifyStart alignCenter content"
     style={
       {
-        "gap": "var(--spacing-large)",
+        "gap": "var(--space-24)",
       }
     }
   >
@@ -435,7 +435,7 @@ exports[`Toast renders correctly > with button 1`] = `
       data-testid="toast-content"
       style={
         {
-          "gap": "var(--spacing-medium)",
+          "gap": "var(--space-16)",
         }
       }
     >
@@ -532,7 +532,7 @@ exports[`Toast renders correctly > with button and link 1`] = `
     className="container directionRow justifyStart alignCenter content"
     style={
       {
-        "gap": "var(--spacing-large)",
+        "gap": "var(--space-24)",
       }
     }
   >
@@ -541,7 +541,7 @@ exports[`Toast renders correctly > with button and link 1`] = `
       data-testid="toast-content"
       style={
         {
-          "gap": "var(--spacing-medium)",
+          "gap": "var(--space-16)",
         }
       }
     >
@@ -657,7 +657,7 @@ exports[`Toast renders correctly > with link 1`] = `
     className="container directionRow justifyStart alignCenter content"
     style={
       {
-        "gap": "var(--spacing-large)",
+        "gap": "var(--space-24)",
       }
     }
   >
@@ -666,7 +666,7 @@ exports[`Toast renders correctly > with link 1`] = `
       data-testid="toast-content"
       style={
         {
-          "gap": "var(--spacing-medium)",
+          "gap": "var(--space-16)",
         }
       }
     >
@@ -767,7 +767,7 @@ exports[`Toast renders correctly > with loading 1`] = `
     className="container directionRow justifyStart alignCenter content"
     style={
       {
-        "gap": "var(--spacing-large)",
+        "gap": "var(--space-24)",
       }
     }
   >
@@ -776,7 +776,7 @@ exports[`Toast renders correctly > with loading 1`] = `
       data-testid="toast-content"
       style={
         {
-          "gap": "var(--spacing-medium)",
+          "gap": "var(--space-16)",
         }
       }
     >
@@ -885,7 +885,7 @@ exports[`Toast renders correctly > with negative type 1`] = `
     className="container directionRow justifyStart alignCenter content"
     style={
       {
-        "gap": "var(--spacing-large)",
+        "gap": "var(--space-24)",
       }
     }
   >
@@ -894,7 +894,7 @@ exports[`Toast renders correctly > with negative type 1`] = `
       data-testid="toast-content"
       style={
         {
-          "gap": "var(--spacing-medium)",
+          "gap": "var(--space-16)",
         }
       }
     >
diff --git a/packages/core/src/components/Toggle/MockToggle.module.scss b/packages/core/src/components/Toggle/MockToggle.module.scss
index 77fabfa525..771b0500e7 100644
--- a/packages/core/src/components/Toggle/MockToggle.module.scss
+++ b/packages/core/src/components/Toggle/MockToggle.module.scss
@@ -1,9 +1,9 @@
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 
 .toggle {
   @include reset-button();
   transition: background-color var(--motion-productive-medium) var(--motion-timing-transition);
-  margin: 0 var(--spacing-small);
+  margin: 0 var(--space-8);
   position: relative;
   height: var(--toggle-height);
   width: var(--toggle-width);
@@ -18,20 +18,20 @@
     height: var(--circle-size);
     border-radius: 50%;
     top: calc(50% - 18px / 2);
-    transition: left var(--motion-productive-medium) var(--motion-timing-transition);
+    transition: inset-inline-start var(--motion-productive-medium) var(--motion-timing-transition);
   }
 
   &.selected {
     background-color: var(--primary-color);
     &::after {
-      left: 20px;
+      inset-inline-start: 20px;
     }
   }
 
   &.notSelected {
     background-color: var(--ui-border-color);
     &::after {
-      left: 3px;
+      inset-inline-start: 3px;
     }
   }
 
@@ -54,11 +54,11 @@
     &::after {
       --circle-size: 12px;
       top: calc(50% - 6px);
-      left: 14px;
+      inset-inline-start: 14px;
     }
     &.notSelected {
       &::after {
-        left: 2px;
+        inset-inline-start: 2px;
       }
     }
   }
diff --git a/packages/core/src/components/Toggle/MockToggle.tsx b/packages/core/src/components/Toggle/MockToggle.tsx
index 4755aa9efb..255911d8e7 100644
--- a/packages/core/src/components/Toggle/MockToggle.tsx
+++ b/packages/core/src/components/Toggle/MockToggle.tsx
@@ -3,8 +3,6 @@ import cx from "classnames";
 import React, { type FC } from "react";
 import type VibeComponentProps from "../../types/VibeComponentProps";
 import styles from "./MockToggle.module.scss";
-import { getTestId } from "../../tests/test-ids-utils";
-import { ComponentDefaultTestId } from "../../tests/constants";
 import { type ToggleSize } from "./Toggle.types";
 import { getStyle } from "../../helpers/typesciptCssModulesHelper";
 
@@ -17,10 +15,6 @@ export interface MockToggleProps extends VibeComponentProps {
    * If true, the toggle is in the "on" state.
    */
   checked?: boolean;
-  /**
-   * If true, removes the horizontal spacing around the toggle.
-   */
-  noSpacing?: boolean;
   /**
    * The text displayed when the toggle is in the "off" state.
    */
@@ -46,7 +40,6 @@ export interface MockToggleProps extends VibeComponentProps {
 export const MockToggle: FC<MockToggleProps> = ({
   areLabelsHidden,
   checked,
-  noSpacing,
   offOverrideText,
   onOverrideText,
   className,
@@ -61,10 +54,9 @@ export const MockToggle: FC<MockToggleProps> = ({
         [cx(styles.selected, selectedClassName)]: checked,
         [styles.notSelected]: !checked,
         [styles.disabled]: disabled,
-        [styles.noSpacing]: noSpacing
+        [styles.noSpacing]: areLabelsHidden
       })}
       aria-hidden="true"
-      data-testid={getTestId(ComponentDefaultTestId.TOGGLE)}
     />
     {areLabelsHidden ? null : <ToggleText disabled={disabled}>{onOverrideText}</ToggleText>}
   </>
diff --git a/packages/core/src/components/Toggle/Toggle.tsx b/packages/core/src/components/Toggle/Toggle.tsx
index eafceca098..28c35903cb 100644
--- a/packages/core/src/components/Toggle/Toggle.tsx
+++ b/packages/core/src/components/Toggle/Toggle.tsx
@@ -42,10 +42,6 @@ export interface ToggleProps extends VibeComponentProps {
    * If true, hides the on/off labels.
    */
   areLabelsHidden?: boolean;
-  /**
-   * If true, removes the horizontal spacing around the toggle.
-   */
-  noSpacing?: boolean;
   /**
    * The text displayed when the toggle is in the "on" position.
    */
@@ -57,11 +53,11 @@ export interface ToggleProps extends VibeComponentProps {
   /**
    * The ARIA label for accessibility.
    */
-  ariaLabel?: string;
+  "aria-label"?: string;
   /**
    * The ID of the element controlled by the toggle.
    */
-  ariaControls?: string;
+  "aria-controls"?: string;
   /**
    * The size of the toggle.
    */
@@ -80,10 +76,9 @@ const Toggle = forwardRef(
       value,
       name,
       disabled,
-      ariaLabel,
-      ariaControls,
+      "aria-label": ariaLabel,
+      "aria-controls": ariaControls,
       areLabelsHidden = false,
-      noSpacing,
       onOverrideText = "On",
       offOverrideText = "Off",
       size = "medium",
@@ -104,8 +99,8 @@ const Toggle = forwardRef(
         value={value}
         name={name}
         disabled={disabled}
-        ariaLabel={ariaLabel}
-        ariaControls={ariaControls}
+        aria-label={ariaLabel}
+        aria-controls={ariaControls}
         inputClassName={inputClassName}
         ref={ref}
         data-testid={dataTestId || getTestId(ComponentDefaultTestId.TOGGLE)}
@@ -113,7 +108,6 @@ const Toggle = forwardRef(
       >
         <MockToggle
           areLabelsHidden={areLabelsHidden}
-          noSpacing={noSpacing}
           offOverrideText={offOverrideText}
           onOverrideText={onOverrideText}
           disabled={disabled}
diff --git a/packages/core/src/components/Toggle/__tests__/Toggle.snapshot.test.tsx b/packages/core/src/components/Toggle/__tests__/Toggle.snapshot.test.tsx
index 9959042097..956bc70ce1 100644
--- a/packages/core/src/components/Toggle/__tests__/Toggle.snapshot.test.tsx
+++ b/packages/core/src/components/Toggle/__tests__/Toggle.snapshot.test.tsx
@@ -50,7 +50,7 @@ describe("Toggle renders correctly", () => {
   });
 
   it("renders correctly with aria controls", () => {
-    const tree = renderer.create(<Toggle ariaControls="aria controls" />).toJSON();
+    const tree = renderer.create(<Toggle aria-controls="aria controls" />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/packages/core/src/components/Toggle/__tests__/Toggle.test.jsx b/packages/core/src/components/Toggle/__tests__/Toggle.test.tsx
similarity index 89%
rename from packages/core/src/components/Toggle/__tests__/Toggle.test.jsx
rename to packages/core/src/components/Toggle/__tests__/Toggle.test.tsx
index cc3ff9bc42..ad0fac33dc 100644
--- a/packages/core/src/components/Toggle/__tests__/Toggle.test.jsx
+++ b/packages/core/src/components/Toggle/__tests__/Toggle.test.tsx
@@ -16,7 +16,7 @@ describe("Toggle tests", () => {
     it("should change state to off when is default selected and clicked", () => {
       const { getByRole } = render(
         <form name={formName}>
-          <Toggle isDefaultSelected ariaLabel="My Toggle" />
+          <Toggle isDefaultSelected aria-label="My Toggle" />
         </form>
       );
 
@@ -28,7 +28,7 @@ describe("Toggle tests", () => {
     it("should change state to on when is default not selected and clicked", () => {
       const { getByRole } = render(
         <form name={formName}>
-          <Toggle isDefaultSelected={false} ariaLabel="My Toggle" />
+          <Toggle isDefaultSelected={false} aria-label="My Toggle" />
         </form>
       );
       const toggle = getByRole(toggleRole);
@@ -39,7 +39,7 @@ describe("Toggle tests", () => {
     it("should not change state when disabled, default selected and clicked", () => {
       const { getByRole } = render(
         <form name={formName}>
-          <Toggle disabled isDefaultSelected ariaLabel="My Toggle" />
+          <Toggle disabled isDefaultSelected aria-label="My Toggle" />
         </form>
       );
 
@@ -78,7 +78,7 @@ describe("Toggle tests", () => {
   describe("a11y", () => {
     it("should add the aria label", () => {
       const ariaLabel = "Lable Name";
-      const { getByLabelText } = render(<Toggle ariaLabel={ariaLabel} />);
+      const { getByLabelText } = render(<Toggle aria-label={ariaLabel} />);
       const toggleComponent = getByLabelText(ariaLabel);
       expect(toggleComponent).toBeTruthy();
     });
@@ -92,7 +92,7 @@ describe("Toggle tests", () => {
     it("should not change state to off when is selected, clicked and prop does not changed", () => {
       const { getByRole } = render(
         <form name={formName}>
-          <Toggle isSelected ariaLabel="My Toggle" />
+          <Toggle isSelected aria-label="My Toggle" />
         </form>
       );
 
@@ -104,7 +104,7 @@ describe("Toggle tests", () => {
     it("should not change state to on when is not selected, clicked and prop does not changed", () => {
       const { getByRole } = render(
         <form name={formName}>
-          <Toggle isSelected={false} ariaLabel="My Toggle" />
+          <Toggle isSelected={false} aria-label="My Toggle" />
         </form>
       );
 
diff --git a/packages/core/src/components/Toggle/__tests__/__snapshots__/Toggle.snapshot.test.tsx.snap b/packages/core/src/components/Toggle/__tests__/__snapshots__/Toggle.snapshot.test.tsx.snap
index 3d956359f7..d0ec9a015d 100644
--- a/packages/core/src/components/Toggle/__tests__/__snapshots__/Toggle.snapshot.test.tsx.snap
+++ b/packages/core/src/components/Toggle/__tests__/__snapshots__/Toggle.snapshot.test.tsx.snap
@@ -24,7 +24,6 @@ exports[`Toggle renders correctly > renders correctly when disabled 1`] = `
   <div
     aria-hidden="true"
     className="toggle medium selected disabled"
-    data-testid="toggle"
   />
   <span
     className="typography primary start singleLineEllipsis text text2Normal text disabled"
@@ -51,8 +50,7 @@ exports[`Toggle renders correctly > renders correctly when labels are hidden 1`]
   />
   <div
     aria-hidden="true"
-    className="toggle medium selected"
-    data-testid="toggle"
+    className="toggle medium selected noSpacing"
   />
 </label>
 `;
@@ -80,7 +78,6 @@ exports[`Toggle renders correctly > renders correctly when selection defined by
   <div
     aria-hidden="true"
     className="toggle medium dummy-class-name notSelected"
-    data-testid="toggle"
   />
   <span
     className="typography primary start singleLineEllipsis text text2Normal text"
@@ -114,7 +111,6 @@ exports[`Toggle renders correctly > renders correctly when selection defined by
   <div
     aria-hidden="true"
     className="toggle medium dummy-class-name selected"
-    data-testid="toggle"
   />
   <span
     className="typography primary start singleLineEllipsis text text2Normal text"
@@ -148,7 +144,6 @@ exports[`Toggle renders correctly > renders correctly when selection defined by
   <div
     aria-hidden="true"
     className="toggle medium dummy-class-name notSelected"
-    data-testid="toggle"
   />
   <span
     className="typography primary start singleLineEllipsis text text2Normal text"
@@ -182,7 +177,6 @@ exports[`Toggle renders correctly > renders correctly when selection defined by
   <div
     aria-hidden="true"
     className="toggle medium dummy-class-name selected"
-    data-testid="toggle"
   />
   <span
     className="typography primary start singleLineEllipsis text text2Normal text"
@@ -217,7 +211,6 @@ exports[`Toggle renders correctly > renders correctly with aria controls 1`] = `
   <div
     aria-hidden="true"
     className="toggle medium selected"
-    data-testid="toggle"
   />
   <span
     className="typography primary start singleLineEllipsis text text2Normal text"
@@ -251,7 +244,6 @@ exports[`Toggle renders correctly > renders correctly with empty props 1`] = `
   <div
     aria-hidden="true"
     className="toggle medium selected"
-    data-testid="toggle"
   />
   <span
     className="typography primary start singleLineEllipsis text text2Normal text"
@@ -285,7 +277,6 @@ exports[`Toggle renders correctly > renders correctly with not default offOverri
   <div
     aria-hidden="true"
     className="toggle medium selected"
-    data-testid="toggle"
   />
   <span
     className="typography primary start singleLineEllipsis text text2Normal text"
@@ -319,7 +310,6 @@ exports[`Toggle renders correctly > renders correctly with not default onOverrid
   <div
     aria-hidden="true"
     className="toggle medium selected"
-    data-testid="toggle"
   />
   <span
     className="typography primary start singleLineEllipsis text text2Normal text"
diff --git a/packages/core/src/components/TransitionView/TransitionView.tsx b/packages/core/src/components/TransitionView/TransitionView.tsx
index 1df4b5dec2..9e541a9454 100644
--- a/packages/core/src/components/TransitionView/TransitionView.tsx
+++ b/packages/core/src/components/TransitionView/TransitionView.tsx
@@ -1,6 +1,5 @@
 import React, { forwardRef } from "react";
 import cx from "classnames";
-import { AnimatePresence } from "framer-motion";
 import { type TransitionViewProps } from "./TransitionView.types";
 import { getTestId } from "../../tests/test-ids-utils";
 import { ComponentDefaultTestId } from "../../tests/constants";
@@ -19,11 +18,9 @@ const TransitionView = forwardRef(
         data-testid={dataTestId || getTestId(ComponentDefaultTestId.TRANSITION_VIEW, id)}
         ref={ref}
       >
-        <AnimatePresence initial={false} custom={direction} exitBeforeEnter>
-          <SlideTransition key={activeStep} direction={direction}>
-            {children[activeStep]}
-          </SlideTransition>
-        </AnimatePresence>
+        <SlideTransition key={activeStep} direction={direction}>
+          {children[activeStep]}
+        </SlideTransition>
       </div>
     );
   }
diff --git a/packages/core/src/components/TransitionView/__tests__/TransitionView.test.tsx b/packages/core/src/components/TransitionView/__tests__/TransitionView.test.tsx
index 196150f60a..14cc2e3596 100644
--- a/packages/core/src/components/TransitionView/__tests__/TransitionView.test.tsx
+++ b/packages/core/src/components/TransitionView/__tests__/TransitionView.test.tsx
@@ -1,17 +1,8 @@
-import { vi, describe, it, expect } from "vitest";
+import { describe, it, expect } from "vitest";
 import React from "react";
 import { render, screen } from "@testing-library/react";
 import TransitionView from "../TransitionView";
 
-vi.mock("framer-motion", async () => {
-  // eslint-disable-next-line @typescript-eslint/consistent-type-imports
-  const actual = await vi.importActual<typeof import("framer-motion")>("framer-motion");
-  return {
-    ...actual,
-    AnimatePresence: ({ children }: { children: React.ReactNode }) => <>{children}</>
-  };
-});
-
 describe("TransitionView", () => {
   const mockChildren = [<div key="1">Step 1</div>, <div key="2">Step 2</div>, <div key="3">Step 3</div>];
 
diff --git a/packages/core/src/components/VirtualizedGrid/VirtualizedGrid.tsx b/packages/core/src/components/VirtualizedGrid/VirtualizedGrid.tsx
index a0258efe85..9b6df71cd3 100644
--- a/packages/core/src/components/VirtualizedGrid/VirtualizedGrid.tsx
+++ b/packages/core/src/components/VirtualizedGrid/VirtualizedGrid.tsx
@@ -1,4 +1,13 @@
-import React, { type CSSProperties, forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, {
+  type CSSProperties,
+  type ReactElement,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
 import cx from "classnames";
 import {
   type GridChildComponentProps,
@@ -16,7 +25,7 @@ import {
 import usePrevious from "../../hooks/usePrevious";
 import useThrottledCallback from "../../hooks/useThrottledCallback";
 import useMergeRef from "../../hooks/useMergeRef";
-import { type VibeComponent, type VibeComponentProps } from "../../types";
+import { type VibeComponentProps } from "../../types";
 import { NOOP } from "../../utils/function-utils";
 import { ComponentDefaultTestId, getTestId } from "../../tests/test-ids-utils";
 import styles from "./VirtualizedGrid.module.scss";
@@ -30,7 +39,7 @@ export interface VirtualizedGridProps extends VibeComponentProps {
   /**
    * Function that renders each item in the grid.
    */
-  itemRenderer: (item: ItemType, index: number, style: CSSProperties) => ItemType | GridChildComponentProps<ItemType>;
+  itemRenderer: (item: ItemType, index: number, style: CSSProperties) => ReactElement;
   /**
    * Function that returns the row height.
    */
@@ -97,7 +106,7 @@ const VirtualizedGrid = forwardRef(
       className,
       id,
       items = [],
-      itemRenderer = (item: ItemType, _index: number, _style: CSSProperties) => item,
+      itemRenderer,
       getRowHeight = () => 50,
       getColumnWidth = () => 100,
       getItemId = (item: ItemType, _index: number) => item.id,
@@ -285,7 +294,7 @@ const VirtualizedGrid = forwardRef(
                 onItemsRendered={onItemsRenderedCB}
                 className={scrollableClassName}
               >
-                {cellRenderer as unknown as VibeComponent<GridChildComponentProps>}
+                {cellRenderer as unknown as React.ComponentType<GridChildComponentProps>}
               </Grid>
             );
           }}
diff --git a/packages/core/src/components/VirtualizedGrid/__tests__/VirtualizedGrid.test.jsx b/packages/core/src/components/VirtualizedGrid/__tests__/VirtualizedGrid.test.tsx
similarity index 100%
rename from packages/core/src/components/VirtualizedGrid/__tests__/VirtualizedGrid.test.jsx
rename to packages/core/src/components/VirtualizedGrid/__tests__/VirtualizedGrid.test.tsx
diff --git a/packages/core/src/components/VirtualizedGrid/__tests__/__snapshots__/VirtualizedGrid.test.tsx.snap b/packages/core/src/components/VirtualizedGrid/__tests__/__snapshots__/VirtualizedGrid.test.tsx.snap
new file mode 100644
index 0000000000..1270839de4
--- /dev/null
+++ b/packages/core/src/components/VirtualizedGrid/__tests__/__snapshots__/VirtualizedGrid.test.tsx.snap
@@ -0,0 +1,52 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`renders correctly with class name 1`] = `
+<div
+  className="virtualizedGridWrapper class-name"
+  data-testid="virtualized-grid"
+>
+  <div
+    style={
+      {
+        "height": 0,
+        "overflow": "visible",
+        "width": 0,
+      }
+    }
+  />
+</div>
+`;
+
+exports[`renders correctly with empty props 1`] = `
+<div
+  className="virtualizedGridWrapper"
+  data-testid="virtualized-grid"
+>
+  <div
+    style={
+      {
+        "height": 0,
+        "overflow": "visible",
+        "width": 0,
+      }
+    }
+  />
+</div>
+`;
+
+exports[`renders correctly with scrollable class name 1`] = `
+<div
+  className="virtualizedGridWrapper"
+  data-testid="virtualized-grid"
+>
+  <div
+    style={
+      {
+        "height": 0,
+        "overflow": "visible",
+        "width": 0,
+      }
+    }
+  />
+</div>
+`;
diff --git a/packages/core/src/components/VirtualizedList/VirtualizedList.tsx b/packages/core/src/components/VirtualizedList/VirtualizedList.tsx
index 67a8c1f43e..e6c7948fe1 100644
--- a/packages/core/src/components/VirtualizedList/VirtualizedList.tsx
+++ b/packages/core/src/components/VirtualizedList/VirtualizedList.tsx
@@ -32,7 +32,7 @@ import {
 } from "../../services/virtualized-service";
 import { getTestId } from "../../tests/test-ids-utils";
 import { ComponentDefaultTestId } from "../../tests/constants";
-import { type VibeComponent, type VibeComponentProps } from "../../types";
+import { type VibeComponentProps } from "../../types";
 import styles from "./VirtualizedList.module.scss";
 import {
   type VirtualizedListItem,
@@ -57,10 +57,6 @@ export interface VirtualizedListProps extends VibeComponentProps {
    * Function to render each item in the list.
    */
   itemRenderer: (item: VirtualizedListItem, index: number, style: CSSProperties) => ReactElement | JSX.Element;
-  /**
-   * @deprecated - use `getItemSize`.
-   */
-  getItemHeight?: (item: VirtualizedListItem, index: number) => number;
   /**
    * Function to get the size (height/width) of each item, based on layout.
    */
@@ -107,10 +103,6 @@ export interface VirtualizedListProps extends VibeComponentProps {
    * Callback fired when the list size changes.
    */
   onSizeUpdate?: (width: number, height: number) => void;
-  /**
-   * @deprecated - use `onLayoutDirectionScrollbarVisibilityChange`.
-   */
-  onVerticalScrollbarVisiblityChange?: (value: boolean) => void;
   /**
    * Callback fired when the vertical or horizontal scrollbar visibility changes.
    */
@@ -122,7 +114,7 @@ export interface VirtualizedListProps extends VibeComponentProps {
   /**
    * The ARIA label for the list.
    */
-  ariaLabel?: string;
+  "aria-label"?: string;
   /**
    * Custom inline styles applied to the list.
    */
@@ -152,8 +144,7 @@ const VirtualizedList = forwardRef(
       id,
       items = [],
       itemRenderer = (item: VirtualizedListItem, _index: number, _style: CSSProperties) => item as ReactElement,
-      getItemHeight = (item: VirtualizedListItem, _index: number) => item.height,
-      getItemSize = null, // must be null for backward compatibility
+      getItemSize = (item: VirtualizedListItem, _index: number) => item.height,
       layout = "vertical",
       onScroll,
       overscanCount = 0,
@@ -164,12 +155,11 @@ const VirtualizedList = forwardRef(
       onItemsRendered,
       onItemsRenderedThrottleMs = 200,
       onSizeUpdate = NOOP,
-      onVerticalScrollbarVisiblityChange = null,
       onLayoutDirectionScrollbarVisibilityChange = null,
       virtualListRef,
       scrollableClassName,
       role,
-      ariaLabel,
+      "aria-label": ariaLabel,
       style,
       "data-testid": dataTestId
     }: VirtualizedListProps,
@@ -212,14 +202,13 @@ const VirtualizedList = forwardRef(
     // Callbacks
     const sizeGetter = useCallback(
       (item: VirtualizedListItem, index: number) => {
-        const getSize = getItemSize || getItemHeight;
-        const height = getSize(item, index);
+        const height = getItemSize(item, index);
         if (height === undefined) {
           console.error("Couldn't get height for item: ", item);
         }
         return height;
       },
-      [getItemHeight, getItemSize]
+      [getItemSize]
     );
 
     const idGetter = useCallback(
@@ -377,22 +366,14 @@ const VirtualizedList = forwardRef(
 
     useEffect(() => {
       // update vertical scrollbar visibility
-      const callback = onLayoutDirectionScrollbarVisibilityChange || onVerticalScrollbarVisiblityChange;
-      if (callback) {
+      if (onLayoutDirectionScrollbarVisibilityChange) {
         const isVisible = isLayoutDirectionScrollbarVisible(items, normalizedItems, idGetter, listSizeByLayout);
         if (isVerticalScrollbarVisibleRef.current !== isVisible) {
           isVerticalScrollbarVisibleRef.current = isVisible;
-          callback(isVisible);
+          onLayoutDirectionScrollbarVisibilityChange(isVisible);
         }
       }
-    }, [
-      onLayoutDirectionScrollbarVisibilityChange,
-      onVerticalScrollbarVisiblityChange,
-      items,
-      normalizedItems,
-      listSizeByLayout,
-      idGetter
-    ]);
+    }, [onLayoutDirectionScrollbarVisibilityChange, items, normalizedItems, listSizeByLayout, idGetter]);
 
     return (
       <div
@@ -420,7 +401,7 @@ const VirtualizedList = forwardRef(
                 onItemsRendered={onItemsRenderedCB}
                 className={scrollableClassName}
               >
-                {rowRenderer as VibeComponent<ListChildComponentProps>}
+                {rowRenderer as React.ComponentType<ListChildComponentProps>}
               </List>
             );
           }}
diff --git a/packages/core/src/components/VirtualizedList/__tests__/VirtualizedList.snapshot.test.jsx b/packages/core/src/components/VirtualizedList/__tests__/VirtualizedList.snapshot.test.tsx
similarity index 100%
rename from packages/core/src/components/VirtualizedList/__tests__/VirtualizedList.snapshot.test.jsx
rename to packages/core/src/components/VirtualizedList/__tests__/VirtualizedList.snapshot.test.tsx
diff --git a/packages/core/src/components/VirtualizedList/__tests__/__snapshots__/VirtualizedList.snapshot.test.tsx.snap b/packages/core/src/components/VirtualizedList/__tests__/__snapshots__/VirtualizedList.snapshot.test.tsx.snap
new file mode 100644
index 0000000000..d7bae39c89
--- /dev/null
+++ b/packages/core/src/components/VirtualizedList/__tests__/__snapshots__/VirtualizedList.snapshot.test.tsx.snap
@@ -0,0 +1,18 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`renders correctly with empty props 1`] = `
+<div
+  className="virtualizedListWrapper"
+  data-testid="virtualized-list"
+>
+  <div
+    style={
+      {
+        "height": 0,
+        "overflow": "visible",
+        "width": 0,
+      }
+    }
+  />
+</div>
+`;
diff --git a/packages/core/src/components/index.ts b/packages/core/src/components/index.ts
index a6e84679fb..0383ddbabc 100644
--- a/packages/core/src/components/index.ts
+++ b/packages/core/src/components/index.ts
@@ -55,7 +55,7 @@ export * from "@vibe/loader";
 export * from "./Menu";
 export * from "./MenuButton";
 export * from "./NumberField";
-export * from "./LegacyModal";
+export * from "./Modal";
 export * from "./MultiStepIndicator";
 export * from "./ProgressBars";
 export * from "./RadioButton";
diff --git a/packages/core/src/components/next/AttentionBox/AttentionBox.module.scss b/packages/core/src/components/next/AttentionBox/AttentionBox.module.scss
deleted file mode 100644
index 48de2c4698..0000000000
--- a/packages/core/src/components/next/AttentionBox/AttentionBox.module.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-@keyframes attentionBoxAnimation {
-  0% {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-  50% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.attention {
-  width: 100%;
-  border-radius: var(--border-radius-medium);
-  padding: var(--space-12) var(--space-16);
-  position: relative;
-  overflow: hidden;
-
-  &.animate {
-    animation: attentionBoxAnimation 200ms var(--motion-timing-transition);
-  }
-
-  &.primary {
-    background-color: var(--primary-selected-color);
-  }
-
-  &.positive {
-    background-color: var(--positive-color-selected);
-  }
-
-  &.negative {
-    background-color: var(--negative-color-selected);
-  }
-
-  &.warning {
-    background-color: var(--warning-color-selected);
-  }
-
-  &.neutral {
-    background-color: var(--allgrey-background-color);
-  }
-}
diff --git a/packages/core/src/components/next/AttentionBox/AttentionBox.tsx b/packages/core/src/components/next/AttentionBox/AttentionBox.tsx
deleted file mode 100644
index e84e749062..0000000000
--- a/packages/core/src/components/next/AttentionBox/AttentionBox.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import React, { forwardRef } from "react";
-import cx from "classnames";
-import type { AttentionBoxProps, AttentionBoxRole } from "./AttentionBox.types";
-import AttentionBoxDefault from "./layouts/AttentionBoxDefault/AttentionBoxDefault";
-import AttentionBoxCompact from "./layouts/AttentionBoxCompact/AttentionBoxCompact";
-import { resolveAttentionBoxIcon } from "./utils/iconUtils";
-import { ComponentDefaultTestId } from "../../../tests/constants";
-import { getTestId } from "../../../tests/test-ids-utils";
-import styles from "./AttentionBox.module.scss";
-
-const AttentionBox = forwardRef(
-  (
-    {
-      compact = false,
-      title,
-      animate = true,
-      icon,
-      iconType = "svg",
-      type = "primary",
-      children,
-      text,
-      action,
-      link,
-      id,
-      onClose,
-      closeButtonAriaLabel,
-      className,
-      "data-testid": dataTestId
-    }: AttentionBoxProps,
-    ref: React.ForwardedRef<HTMLDivElement>
-  ) => {
-    const role: AttentionBoxRole = type === "negative" ? "alert" : "status";
-    const displayIcon = resolveAttentionBoxIcon(icon, type);
-    const content = children || text;
-
-    const baseClasses = cx(
-      styles.attention,
-      styles[type],
-      {
-        [styles.animate]: animate
-      },
-      className
-    );
-
-    const layoutSharedProps = {
-      onClose,
-      closeButtonAriaLabel,
-      action,
-      link,
-      icon: displayIcon,
-      iconType,
-      content
-    };
-
-    return (
-      <div
-        ref={ref}
-        className={baseClasses}
-        role={role}
-        id={id}
-        data-testid={dataTestId || getTestId(ComponentDefaultTestId.ATTENTION_BOX, id)}
-      >
-        {compact ? (
-          <AttentionBoxCompact {...layoutSharedProps} />
-        ) : (
-          <AttentionBoxDefault title={title} {...layoutSharedProps} />
-        )}
-      </div>
-    );
-  }
-);
-
-export default AttentionBox;
diff --git a/packages/core/src/components/next/AttentionBox/AttentionBox.types.ts b/packages/core/src/components/next/AttentionBox/AttentionBox.types.ts
deleted file mode 100644
index 9df6686405..0000000000
--- a/packages/core/src/components/next/AttentionBox/AttentionBox.types.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import type { ReactNode, MouseEvent } from "react";
-import type { VibeComponentProps } from "../../../types";
-import type { SubIcon, IconType } from "@vibe/icon";
-import type { AttentionBoxButtonProps } from "./components/AttentionBoxButton/AttentionBoxButton";
-import type { AttentionBoxLinkProps } from "./components/AttentionBoxLink/AttentionBoxLink";
-
-export type AttentionBoxType = "primary" | "positive" | "negative" | "warning" | "neutral";
-
-// Mutually exclusive content props
-export type AttentionBoxContentProps =
-  | {
-      /**
-       * The main text content
-       */
-      text: string;
-      children?: never;
-    }
-  | {
-      /**
-       * Custom children to override the default text content
-       */
-      children: ReactNode;
-      text?: never;
-    };
-
-// Shared props for both compact and default layouts
-export interface AttentionBoxLayoutSharedProps
-  extends Pick<AttentionBoxProps, "icon" | "iconType" | "onClose" | "closeButtonAriaLabel" | "action" | "link"> {
-  content: ReactNode;
-}
-
-// Mutually exclusive title props
-export type AttentionBoxCompactTitleProps =
-  | {
-      compact?: false;
-      /**
-       * The title of the attention box
-       */
-      title?: string;
-    }
-  | {
-      /**
-       * When true, the attention box will be displayed in compact mode of one-liner
-       */
-      compact: true;
-      title?: never;
-    };
-
-export type AttentionBoxRole = "alert" | "status";
-
-export type AttentionBoxProps = VibeComponentProps &
-  AttentionBoxContentProps &
-  AttentionBoxCompactTitleProps & {
-    /**
-     * The variant type of the attention box
-     */
-    type?: AttentionBoxType;
-    /**
-     * The type of the icon
-     */
-    iconType?: IconType;
-    /**
-     * The icon to display. Pass `false` to hide the icon entirely, or omit to use the default icon for the type.
-     */
-    icon?: SubIcon | false;
-    /**
-     * Callback when the close button is clicked
-     */
-    onClose?: (event: MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * Custom aria label for the close button
-     */
-    closeButtonAriaLabel?: string;
-    /**
-     * Whether to animate the entrance
-     */
-    animate?: boolean;
-    /**
-     * Action button configuration
-     */
-    action?: AttentionBoxButtonProps;
-    /**
-     * Link configuration
-     */
-    link?: Omit<AttentionBoxLinkProps, "inlineText">;
-  };
diff --git a/packages/core/src/components/next/AttentionBox/__tests__/AttentionBox.test.tsx b/packages/core/src/components/next/AttentionBox/__tests__/AttentionBox.test.tsx
deleted file mode 100644
index b7b451bcc7..0000000000
--- a/packages/core/src/components/next/AttentionBox/__tests__/AttentionBox.test.tsx
+++ /dev/null
@@ -1,196 +0,0 @@
-import React from "react";
-import { render, screen, fireEvent } from "@testing-library/react";
-import { vi, describe, it, expect, beforeEach } from "vitest";
-import { Robot } from "@vibe/icons";
-import AttentionBox from "../AttentionBox";
-import userEvent from "@testing-library/user-event";
-import type { AttentionBoxType } from "../AttentionBox.types";
-
-describe("AttentionBox", () => {
-  beforeEach(() => {
-    vi.clearAllTimers();
-    vi.useFakeTimers();
-  });
-
-  afterEach(() => {
-    vi.runOnlyPendingTimers();
-    vi.useRealTimers();
-  });
-
-  describe("Core Functionality", () => {
-    it("renders in default mode with title and text", () => {
-      render(<AttentionBox title="Test Title" text="Test text" />);
-
-      expect(screen.getByText("Test Title")).toBeInTheDocument();
-      expect(screen.getByText("Test text")).toBeInTheDocument();
-    });
-
-    it("renders all variant types with correct class styling", () => {
-      const variants: AttentionBoxType[] = ["primary", "positive", "negative", "warning", "neutral"];
-
-      variants.forEach(variant => {
-        const { unmount } = render(<AttentionBox type={variant} text="Test" />);
-        const container = screen.getByRole(variant === "negative" ? "alert" : "status");
-        expect(container).toHaveClass(`${variant}`);
-        unmount();
-      });
-    });
-
-    it("renders negative variant with alert role", () => {
-      render(<AttentionBox type="negative" text="Error message" />);
-      expect(screen.getByRole("alert")).toBeInTheDocument();
-    });
-
-    it("renders non-negative variants with status role", () => {
-      render(<AttentionBox type="primary" text="Info message" />);
-      expect(screen.getByRole("status")).toBeInTheDocument();
-    });
-  });
-
-  describe("Icon Control", () => {
-    it("renders default icon when no icon is provided", () => {
-      render(<AttentionBox type="primary" text="Test" />);
-      expect(screen.getByTestId("icon")).toBeInTheDocument();
-    });
-
-    it("renders custom icon when provided", () => {
-      render(<AttentionBox text="Test" icon={Robot} />);
-      expect(screen.getByTestId("icon")).toBeInTheDocument();
-    });
-
-    it("hides icon when icon is false", () => {
-      render(<AttentionBox text="Test" icon={false} />);
-      expect(screen.queryByTestId("icon")).not.toBeInTheDocument();
-    });
-  });
-
-  describe("Dismiss Control", () => {
-    it("renders close button when onClose is provided", () => {
-      const onClose = vi.fn();
-      render(<AttentionBox text="Test" onClose={onClose} />);
-
-      const closeButton = screen.getByRole("button", { name: /close/i });
-      expect(closeButton).toBeInTheDocument();
-    });
-
-    it("does not render close button when onClose is not provided", () => {
-      render(<AttentionBox text="Test" />);
-      expect(screen.queryByRole("button", { name: /close/i })).not.toBeInTheDocument();
-    });
-
-    it("calls onClose when close button is clicked", () => {
-      const onClose = vi.fn();
-      render(<AttentionBox text="Test" onClose={onClose} />);
-
-      const closeButton = screen.getByRole("button", { name: /close/i });
-      fireEvent.click(closeButton);
-
-      expect(onClose).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe("Action Button", () => {
-    it("renders action button when provided", () => {
-      const onClick = vi.fn();
-      render(<AttentionBox text="Test" action={{ text: "Action", onClick }} />);
-
-      const actionButton = screen.getByRole("button", { name: "Action" });
-      expect(actionButton).toBeInTheDocument();
-    });
-
-    it("calls action onClick when button is clicked", () => {
-      const onClick = vi.fn();
-      render(<AttentionBox text="Test" action={{ text: "Action", onClick }} />);
-
-      const actionButton = screen.getByRole("button", { name: "Action" });
-      fireEvent.click(actionButton);
-
-      expect(onClick).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe("Link", () => {
-    it("renders link when provided", () => {
-      render(<AttentionBox text="Test" link={{ href: "/test", text: "Test Link" }} />);
-
-      const link = screen.getByRole("link", { name: "Test Link" });
-      expect(link).toBeInTheDocument();
-      expect(link).toHaveAttribute("href", "/test");
-    });
-
-    it("renders link as block level element", () => {
-      render(<AttentionBox text="Test text" link={{ href: "/test", text: "Test Link" }} />);
-
-      const link = screen.getByRole("link", { name: "Test Link" });
-      expect(link).toBeInTheDocument();
-      expect(link).not.toHaveClass("inlineText");
-    });
-
-    it("renders link in action section when action also exists", () => {
-      const onClick = vi.fn();
-      render(
-        <AttentionBox
-          text="Test text"
-          link={{ href: "/test", text: "Test Link" }}
-          action={{ text: "Action", onClick }}
-        />
-      );
-
-      const link = screen.getByRole("link", { name: "Test Link" });
-      const actionButton = screen.getByRole("button", { name: "Action" });
-      expect(link).toBeInTheDocument();
-      expect(actionButton).toBeInTheDocument();
-    });
-  });
-
-  describe("Animation", () => {
-    it("applies animation classes when animate is true", () => {
-      render(<AttentionBox text="Test" animate />);
-
-      vi.advanceTimersByTime(200);
-
-      const container = screen.getByRole("status");
-      expect(container).toHaveClass("animate");
-    });
-  });
-
-  describe("Children Override", () => {
-    it("renders children instead of text when provided", () => {
-      render(
-        <AttentionBox text="Original text">
-          <span>Custom children</span>
-        </AttentionBox>
-      );
-
-      expect(screen.getByText("Custom children")).toBeInTheDocument();
-      expect(screen.queryByText("Original text")).not.toBeInTheDocument();
-    });
-  });
-
-  describe("Accessibility", () => {
-    it("has correct tab order", () => {
-      const onClose = vi.fn();
-      const actionClick = vi.fn();
-
-      render(
-        <AttentionBox
-          text="Test"
-          onClose={onClose}
-          link={{ href: "/test", text: "Link" }}
-          action={{ text: "Action", onClick: actionClick }}
-        />
-      );
-
-      const closeButton = screen.getByRole("button", { name: /close/i });
-      const link = screen.getByRole("link");
-      const actionButton = screen.getByRole("button", { name: "Action" });
-
-      userEvent.tab();
-      expect(closeButton).toHaveFocus();
-      userEvent.tab();
-      expect(link).toHaveFocus();
-      userEvent.tab();
-      expect(actionButton).toHaveFocus();
-    });
-  });
-});
diff --git a/packages/core/src/components/next/AttentionBox/index.ts b/packages/core/src/components/next/AttentionBox/index.ts
deleted file mode 100644
index 8e3617834c..0000000000
--- a/packages/core/src/components/next/AttentionBox/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as AttentionBox } from "./AttentionBox";
-export type { AttentionBoxProps, AttentionBoxType } from "./AttentionBox.types";
diff --git a/packages/core/src/components/next/DatePicker/DatePicker.module.scss b/packages/core/src/components/next/DatePicker/DatePicker.module.scss
deleted file mode 100644
index 764ff5ecbb..0000000000
--- a/packages/core/src/components/next/DatePicker/DatePicker.module.scss
+++ /dev/null
@@ -1,273 +0,0 @@
-@import "~monday-ui-style/dist/mixins";
-
-.datePicker {
-  --day-picker-header-height: 34px;
-  --day-picker-content-height: 234px;
-  --day-picker-day-width: 30px;
-  --day-picker-day-height: 30px;
-  --day-picker-days-horizontal-gap: 4px;
-  --day-picker-days-vertical-gap: 2px;
-  --day-picker-day-change-range: var(--primary-surface-color);
-
-  .datePickerMonths {
-    display: flex;
-    flex-direction: row;
-    gap: var(--spacing-medium);
-    align-items: flex-start;
-  }
-
-  &.withWeekNumber {
-    --day-picker-days-horizontal-gap: 2px;
-    width: 284px;
-    margin: 0;
-
-    .datePickerHead {
-      td:first-child {
-        width: var(--day-picker-day-width);
-        border-top-left-radius: var(--border-radius-medium);
-        border-top-right-radius: var(--border-radius-medium);
-        background-color: var(--primary-background-hover-color);
-
-        &::after {
-          color: var(--secondary-text-color);
-          @include vibe-text(text2, normal);
-          display: flex;
-          justify-content: center;
-          content: "No.";
-        }
-      }
-    }
-
-    .datePickerBody {
-      td:first-child {
-        background-color: var(--primary-background-hover-color);
-      }
-
-      tr:last-child td:first-child {
-        border-bottom-left-radius: var(--border-radius-medium);
-        border-bottom-right-radius: var(--border-radius-medium);
-      }
-    }
-  }
-
-  .datePickerTable {
-    margin-top: var(--spacing-small);
-    border-collapse: collapse;
-    height: var(--day-picker-content-height);
-  }
-
-  .datePickerHead {
-    th {
-      color: var(--secondary-text-color);
-      @include vibe-text(text2, normal);
-      padding-block: var(--space-2);
-      text-align: center;
-      height: var(--day-picker-day-height);
-    }
-  }
-  .datePickerBody {
-    td {
-      color: var(--secondary-text-color);
-      @include vibe-text(text2, normal);
-      text-align: center;
-      padding: 0;
-    }
-
-    .datePickerDay {
-      color: var(--primary-text-color);
-      @include vibe-text(text2, normal);
-      width: var(--day-picker-day-width);
-      height: var(--day-picker-day-height);
-      background: none;
-      border: none;
-      cursor: pointer;
-      border-radius: var(--border-radius-small);
-      margin: var(--day-picker-days-vertical-gap) var(--day-picker-days-horizontal-gap);
-      padding: 0;
-
-      .datePickerDayContent {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 100%;
-        height: 100%;
-        border-radius: var(--border-radius-small);
-      }
-
-      &:focus-visible {
-        outline: none;
-        .datePickerDayContent {
-          outline: 2px solid var(--primary-color);
-        }
-      }
-
-      &.datePickerDayDisabled {
-        color: var(--disabled-text-color);
-        cursor: not-allowed;
-      }
-
-      &:not(.datePickerDayDisabled):not(.datePickerAddToRangeStart):not(.datePickerAddToRangeEnd):not(
-          .datePickerAddToRangeMiddle
-        ):not(.datePickerDayRangeStart):not(.datePickerDayRangeEnd)
-        .datePickerDayContent:hover {
-        background: var(--primary-background-hover-color);
-      }
-
-      &.datePickerDayOutside {
-        color: var(--disabled-text-color);
-      }
-
-      &.datePickerDaySelected:not(.datePickerDayRangeMiddle):not(.datePickerRemoveFromRange) {
-        background: var(--primary-color);
-        color: var(--text-color-on-primary);
-      }
-
-      &.datePickerDayRangeStart:not(.datePickerDayRangeEnd):not(.datePickerRemoveFromRange),
-      &.datePickerDayRangeEnd:not(.datePickerDayRangeStart):not(.datePickerRemoveFromRange) {
-        background: var(--primary-color);
-        width: calc(var(--day-picker-day-width) + var(--day-picker-days-horizontal-gap));
-      }
-
-      &.datePickerDayRangeStart.datePickerRemoveFromRange,
-      &.datePickerDayRangeEnd.datePickerRemoveFromRange {
-        background: var(--primary-color);
-        color: var(--text-color-on-primary);
-      }
-
-      &.datePickerDayRangeStart.datePickerRemoveFromRange:not(.datePickerDayRangeEnd),
-      &.datePickerDayRangeEnd.datePickerRemoveFromRange:not(.datePickerDayRangeStart) {
-        width: calc(var(--day-picker-day-width) + var(--day-picker-days-horizontal-gap));
-      }
-
-      &.datePickerAddToRangeStart,
-      &.datePickerDayRangeStart:not(.datePickerDayRangeEnd) {
-        margin-right: 0;
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-
-      &.datePickerAddToRangeEnd,
-      &.datePickerDayRangeEnd:not(.datePickerDayRangeStart) {
-        margin-left: 0;
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-      }
-
-      &.datePickerAddToRangeStart,
-      &.datePickerAddToRangeEnd,
-      &.datePickerAddToRangeMiddle {
-        margin: var(--day-picker-days-vertical-gap) 0;
-      }
-
-      &.datePickerAddToRangeStart:not(.datePickerDayRangeStart):not(.datePickerDayRangeEnd),
-      &.datePickerAddToRangeEnd:not(.datePickerDayRangeStart):not(.datePickerDayRangeEnd),
-      &.datePickerAddToRangeMiddle,
-      &.datePickerDayRangeMiddle:not(.datePickerAddToRangeStart):not(.datePickerAddToRangeEnd) {
-        background-color: var(--primary-selected-color);
-        border: var(--day-picker-days-horizontal-gap) var(--border-style) var(--primary-selected-color);
-        border-top: none;
-        border-bottom: none;
-        width: calc(var(--day-picker-day-width) + 2 * var(--day-picker-days-horizontal-gap));
-      }
-
-      &.datePickerAddToRangeMiddle,
-      &.datePickerDayRangeMiddle:not(.datePickerAddToRangeStart):not(.datePickerAddToRangeEnd) {
-        background: var(--primary-selected-color);
-        margin: var(--day-picker-days-vertical-gap) 0;
-        border-radius: 0;
-      }
-
-      &.datePickerRemoveFromRange:not(.datePickerDayRangeStart):not(.datePickerDayRangeEnd),
-      &.datePickerAddToRangeStart:not(.datePickerDayRangeMiddle):not(.datePickerDayRangeEnd),
-      &.datePickerAddToRangeEnd:not(.datePickerDayRangeMiddle):not(.datePickerDayRangeStart),
-      &.datePickerAddToRangeMiddle {
-        background: var(--day-picker-day-change-range);
-        border-color: var(--day-picker-day-change-range);
-      }
-    }
-
-    tr {
-      td:first-child .datePickerDay {
-        &.datePickerDayRangeMiddle,
-        &.datePickerAddToRangeStart:not(.datePickerDayRangeStart):not(.datePickerDayRangeEnd),
-        &.datePickerAddToRangeMiddle,
-        &.datePickerAddToRangeEnd:not(.datePickerDayRangeStart):not(.datePickerDayRangeEnd) {
-          border: none;
-          width: calc(var(--day-picker-day-width) + var(--day-picker-days-horizontal-gap));
-          margin-left: var(--day-picker-days-horizontal-gap);
-          border-right: var(--day-picker-days-horizontal-gap) solid var(--primary-selected-color);
-          border-top-left-radius: var(--border-radius-small);
-          border-bottom-left-radius: var(--border-radius-small);
-        }
-
-        &.datePickerRemoveFromRange {
-          border-color: var(--day-picker-day-change-range);
-        }
-
-        &.datePickerAddToRangeEnd,
-        &.datePickerDayRangeEnd:not(.datePickerDayRangeStart) {
-          margin-right: 0;
-        }
-      }
-
-      td:last-child .datePickerDay {
-        &.datePickerDayRangeMiddle,
-        &.datePickerAddToRangeStart:not(.datePickerDayRangeStart):not(.datePickerDayRangeEnd),
-        &.datePickerAddToRangeMiddle,
-        &.datePickerAddToRangeEnd:not(.datePickerDayRangeStart):not(.datePickerDayRangeEnd) {
-          border: none;
-          width: calc(var(--day-picker-day-width) + var(--day-picker-days-horizontal-gap));
-          margin-right: var(--day-picker-days-horizontal-gap);
-          border-left: var(--day-picker-days-horizontal-gap) solid var(--primary-selected-color);
-          border-top-right-radius: var(--border-radius-small);
-          border-bottom-right-radius: var(--border-radius-small);
-        }
-
-        &.datePickerRemoveFromRange {
-          border-color: var(--day-picker-day-change-range);
-        }
-
-        &.datePickerAddToRangeStart,
-        &.datePickerDayRangeStart:not(.datePickerDayRangeEnd) {
-          margin-left: 0;
-        }
-      }
-
-      td:first-child .datePickerDay,
-      td:last-child .datePickerDay {
-        &.datePickerAddToRangeStart:not(.datePickerDayRangeMiddle),
-        &.datePickerAddToRangeMiddle,
-        &.datePickerAddToRangeEnd:not(.datePickerDayRangeMiddle) {
-          border-color: var(--day-picker-day-change-range);
-        }
-
-        &.datePickerDaySelected.datePickerDayRangeEnd.datePickerAddToRangeStart {
-          border-left-width: 0;
-        }
-        &.datePickerDaySelected.datePickerDayRangeStart.datePickerAddToRangeEnd {
-          border-right-width: 0;
-        }
-      }
-    }
-
-    .datePickerDaySelected.datePickerDayRangeEnd.datePickerAddToRangeStart {
-      border-radius: var(--border-radius-small) !important;
-      border-color: var(--primary-color) !important;
-      background-color: var(--primary-color) !important;
-
-      &:not(.datePickerHalfRangeSelected) {
-        margin-left: calc(var(--day-picker-days-horizontal-gap) * -1);
-      }
-    }
-
-    .datePickerDaySelected.datePickerDayRangeStart.datePickerAddToRangeEnd {
-      border-radius: var(--border-radius-small) !important;
-      border-color: var(--primary-color) !important;
-      background-color: var(--primary-color) !important;
-
-      &:not(.datePickerHalfRangeSelected) {
-        margin-right: calc(var(--day-picker-days-horizontal-gap) * -1);
-      }
-    }
-  }
-}
diff --git a/packages/core/src/components/next/DatePicker/DatePicker.tsx b/packages/core/src/components/next/DatePicker/DatePicker.tsx
deleted file mode 100644
index d53d50d693..0000000000
--- a/packages/core/src/components/next/DatePicker/DatePicker.tsx
+++ /dev/null
@@ -1,188 +0,0 @@
-import React, { type FC, createContext, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import cx from "classnames";
-import { type DateRange, DayPicker as ReactDatePicker, InternalModifier as DayModifier } from "react-day-picker";
-import styles from "./DatePicker.module.scss";
-import DatePickerHeader, { type DatePickerHeaderProps } from "./DatePickerHeader";
-import { type DatePickerProps, type DatePickerRange } from "./DatePicker.types";
-import {
-  AddToRangeEnd,
-  AddToRangeMiddle,
-  AddToRangeStart,
-  HalfRangeSelected,
-  HoveredDayExists,
-  RemoveFromRange,
-  addToRange,
-  addToRangeModifiers
-} from "./utils";
-import { RangeDayContent } from "./RangeDayContent";
-import { SingleDayContent } from "./SingleDayContent";
-import { DayContentHoverContext, DayContentHoverProvider } from "./DateContentHoverContext";
-
-export const DEFAULT_TIME = { hours: 9, minutes: 0 };
-
-const MODIFIERS_CLASS_NAMES = {
-  [DayModifier.Outside]: styles.datePickerDayOutside,
-  [DayModifier.Selected]: styles.datePickerDaySelected,
-  [DayModifier.Today]: styles.datePickerDayToday,
-  [DayModifier.Disabled]: styles.datePickerDayDisabled,
-  [DayModifier.RangeStart]: styles.datePickerDayRangeStart,
-  [DayModifier.RangeEnd]: styles.datePickerDayRangeEnd,
-  [DayModifier.RangeMiddle]: styles.datePickerDayRangeMiddle,
-  [AddToRangeMiddle]: styles.datePickerAddToRangeMiddle,
-  [AddToRangeStart]: styles.datePickerAddToRangeStart,
-  [AddToRangeEnd]: styles.datePickerAddToRangeEnd,
-  [RemoveFromRange]: styles.datePickerRemoveFromRange,
-  [HoveredDayExists]: styles.datePickerHoveredDayExists,
-  [HalfRangeSelected]: styles.datePickerHalfRangeSelected
-};
-
-const DatePickerHeaderContext = createContext<DatePickerHeaderProps>({} as DatePickerHeaderProps);
-
-const Caption = () => (
-  <DatePickerHeaderContext.Consumer>{props => <DatePickerHeader {...props} />}</DatePickerHeaderContext.Consumer>
-);
-
-const DatePicker: FC<DatePickerProps> = ({
-  className,
-  dayClassName,
-  selectedDayClassName,
-  id,
-  "data-testid": dataTestId,
-  mode = "single",
-  date,
-  endDate,
-  onDateChange,
-  firstDayOfWeek = 0,
-  showWeekNumber,
-  isDateDisabled,
-  locale,
-  nextButtonAriaLabel = "Next",
-  prevButtonAriaLabel = "Previous",
-  monthSelectionAriaLabel = "Month",
-  yearSelectionAriaLabel = "Year",
-  dropdownsClassName,
-  intent = "to",
-  dialogContainerSelector
-}) => {
-  const selected = useMemo(() => (mode === "single" ? date : { from: date, to: endDate }), [date, endDate, mode]);
-  const [displayMonth, setDisplayMonth] = useState(date || new Date());
-
-  const prevDateRef = useRef<Date | undefined>();
-  const prevEndDateRef = useRef<Date | undefined>();
-  const lastChangeByInnerSelection = useRef(false);
-  useEffect(() => {
-    const dateChanged = +prevDateRef.current !== +date;
-    const endDateChanged = +prevEndDateRef.current !== +endDate;
-    const shouldSetDisplayMonth = !lastChangeByInnerSelection.current;
-
-    if (dateChanged) {
-      shouldSetDisplayMonth && date && setDisplayMonth(date);
-    } else if (endDateChanged) {
-      shouldSetDisplayMonth && endDate && setDisplayMonth(endDate);
-    }
-
-    prevDateRef.current = date;
-    prevEndDateRef.current = endDate;
-    lastChangeByInnerSelection.current = false;
-  }, [date, endDate]);
-
-  const onPickerDateChange = useCallback(
-    (newValue: Date | DateRange, selectedDay: Date) => {
-      lastChangeByInnerSelection.current = true;
-
-      if (mode === "range") {
-        const newRange = addToRange(selectedDay, selected as DateRange, intent);
-        (onDateChange as (range: DatePickerRange) => void)({ date: newRange?.from, endDate: newRange?.to });
-      } else {
-        const newDate = newValue as Date;
-        const { hours, minutes } = date ? { hours: date.getHours(), minutes: date.getMinutes() } : DEFAULT_TIME;
-        newDate.setHours(hours, minutes);
-        (onDateChange as (date: Date | undefined) => void)(newDate);
-      }
-    },
-    [date, intent, mode, onDateChange, selected]
-  );
-
-  const DatePickerHeaderContextValue = useMemo<DatePickerHeaderProps>(
-    () => ({
-      setDisplayMonth,
-      locale,
-      nextButtonAriaLabel,
-      prevButtonAriaLabel,
-      monthSelectionAriaLabel,
-      yearSelectionAriaLabel,
-      dropdownsClassName,
-      dialogContainerSelector
-    }),
-    [
-      locale,
-      monthSelectionAriaLabel,
-      nextButtonAriaLabel,
-      setDisplayMonth,
-      prevButtonAriaLabel,
-      yearSelectionAriaLabel,
-      dropdownsClassName,
-      dialogContainerSelector
-    ]
-  );
-
-  const modifiersClassNames = useMemo(
-    () => ({
-      ...MODIFIERS_CLASS_NAMES,
-      [DayModifier.Selected]: cx(MODIFIERS_CLASS_NAMES[DayModifier.Selected], selectedDayClassName)
-    }),
-    [selectedDayClassName]
-  );
-
-  const classNames = useMemo(
-    () => ({
-      months: styles.datePickerMonths,
-      head: styles.datePickerHead,
-      table: styles.datePickerTable,
-      tbody: styles.datePickerBody,
-      day: cx(styles.datePickerDay, dayClassName)
-    }),
-    [dayClassName]
-  );
-
-  return (
-    <div
-      id={id}
-      className={cx(styles.datePicker, { [styles.withWeekNumber]: showWeekNumber }, className)}
-      data-testid={dataTestId}
-      data-vibe="DatePicker"
-    >
-      <DayContentHoverProvider>
-        <DatePickerHeaderContext.Provider value={DatePickerHeaderContextValue}>
-          <DayContentHoverContext.Consumer>
-            {({ hover }) => {
-              const modifiers = addToRangeModifiers(hover, selected as DateRange, intent);
-              return (
-                <ReactDatePicker
-                  fixedWeeks
-                  showOutsideDays
-                  showWeekNumber={showWeekNumber}
-                  mode={mode as "single"} // cast to avoid type errors from ReactDatePicker
-                  required
-                  weekStartsOn={firstDayOfWeek}
-                  disabled={isDateDisabled}
-                  selected={selected as Date} // cast to avoid type errors from ReactDatePicker
-                  onSelect={onPickerDateChange}
-                  month={displayMonth}
-                  onMonthChange={setDisplayMonth}
-                  components={{ Caption, DayContent: mode === "single" ? SingleDayContent : RangeDayContent }}
-                  classNames={classNames}
-                  modifiers={modifiers}
-                  modifiersClassNames={modifiersClassNames}
-                  locale={locale}
-                />
-              );
-            }}
-          </DayContentHoverContext.Consumer>
-        </DatePickerHeaderContext.Provider>
-      </DayContentHoverProvider>
-    </div>
-  );
-};
-
-export default DatePicker;
diff --git a/packages/core/src/components/next/DatePicker/__tests__/DatePicker.test.jsx b/packages/core/src/components/next/DatePicker/__tests__/DatePicker.test.jsx
deleted file mode 100644
index 9213058d1e..0000000000
--- a/packages/core/src/components/next/DatePicker/__tests__/DatePicker.test.jsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import { vi, afterEach, describe, it, expect } from "vitest";
-import React from "react";
-import { render, cleanup, screen, fireEvent, waitFor } from "@testing-library/react";
-import { ja } from "date-fns/locale";
-import DatePicker from "../DatePicker";
-
-const renderDatePicker = props => {
-  return render(<DatePicker {...props} />);
-};
-
-describe("DatePicker tests", () => {
-  afterEach(() => {
-    cleanup();
-  });
-
-  describe("snapshot tests", () => {
-    it("renders correctly", () => {
-      const { container } = renderDatePicker({ date: new Date(1992, 2, 17) });
-      expect(container).toMatchSnapshot();
-    });
-  });
-
-  it("should render correctly with date - 3/17/92", () => {
-    renderDatePicker({ date: new Date(1992, 2, 17) });
-
-    const selectedDay = screen.getByRole("gridcell", { name: "17" });
-    expect(selectedDay).toHaveAttribute("aria-selected", "true");
-
-    // Check that Mar is displayed in the month selector (abbreviated form)
-    expect(screen.getByText("Mar")).toBeInTheDocument();
-
-    // Check that 1992 is displayed in the year selector
-    expect(screen.getByText("1992")).toBeInTheDocument();
-  });
-
-  it("should show date", () => {
-    const date = new Date(1992, 2, 17);
-    renderDatePicker({ date });
-
-    // Check that day 17 is selected
-    const selectedDay = screen.getByRole("gridcell", { name: "17" });
-    expect(selectedDay).toHaveAttribute("aria-selected", "true");
-
-    // Check that Mar and 1992 are displayed
-    expect(screen.getByText("Mar")).toBeInTheDocument();
-    expect(screen.getByText("1992")).toBeInTheDocument();
-  });
-
-  it("should change day of date", () => {
-    const date = new Date(1992, 2, 17);
-    const onDateChange = vi.fn();
-    renderDatePicker({ date, onDateChange });
-
-    // Click on day 20
-    const day20 = screen.getByRole("gridcell", { name: "20" });
-    fireEvent.click(day20);
-
-    // Verify callback was called with the new date
-    expect(onDateChange).toHaveBeenCalledWith(new Date(1992, 2, 20));
-  });
-
-  it("should open months picker and change displayed month", async () => {
-    const date = new Date(1992, 2, 17);
-    renderDatePicker({ date });
-
-    // Click on the month combobox to open dropdown
-    const monthCombobox = screen.getByRole("combobox", { name: "Month" });
-    fireEvent.click(monthCombobox);
-
-    // Wait for dropdown to open and click on April
-    await waitFor(() => {
-      expect(screen.getByRole("option", { name: "Apr" })).toBeInTheDocument();
-    });
-
-    const aprilOption = screen.getByRole("option", { name: "Apr" });
-    fireEvent.click(aprilOption);
-
-    // Verify the month changed to Apr (abbreviated) and year stayed the same
-    await waitFor(() => {
-      expect(screen.getByText("Apr")).toBeInTheDocument();
-      expect(screen.getByText("1992")).toBeInTheDocument();
-    });
-  });
-
-  it("should open years picker and change displayed year", async () => {
-    const date = new Date(1992, 2, 17);
-    renderDatePicker({ date });
-
-    // Click on the year combobox to open dropdown
-    const yearCombobox = screen.getByRole("combobox", { name: "Year" });
-    fireEvent.click(yearCombobox);
-
-    // Wait for dropdown to open and click on 1993
-    await waitFor(() => {
-      expect(screen.getByRole("option", { name: "1993" })).toBeInTheDocument();
-    });
-
-    const year1993Option = screen.getByRole("option", { name: "1993" });
-    fireEvent.click(year1993Option);
-
-    // Verify the year changed to 1993 and month stayed the same (Mar)
-    await waitFor(() => {
-      expect(screen.getByText("1993")).toBeInTheDocument();
-      expect(screen.getByText("Mar")).toBeInTheDocument();
-    });
-  });
-
-  it("should support disabled days", () => {
-    const date = new Date(1992, 2, 17);
-    renderDatePicker({ date, isDateDisabled: d => d.getDate() === 18 });
-
-    // Verify day 18 is disabled
-    const day18 = screen.getByRole("gridcell", { name: "18" });
-    expect(day18).toHaveAttribute("disabled");
-    expect(day18).toHaveClass("datePickerDayDisabled");
-
-    // Try to click on day 18 (should not work)
-    fireEvent.click(day18);
-
-    // Verify day 17 is still selected
-    const selectedDay = screen.getByRole("gridcell", { name: "17" });
-    expect(selectedDay).toHaveAttribute("aria-selected", "true");
-  });
-
-  it("should support locale", () => {
-    const date = new Date(1992, 2, 17);
-    renderDatePicker({ date, locale: ja });
-
-    // Check that the month is displayed in Japanese
-    expect(screen.getByText("3月")).toBeInTheDocument();
-  });
-});
diff --git a/packages/core/src/components/next/DatePicker/index.ts b/packages/core/src/components/next/DatePicker/index.ts
deleted file mode 100644
index bb4cd3f113..0000000000
--- a/packages/core/src/components/next/DatePicker/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as DatePicker } from "./DatePicker";
-
-export * from "./DatePicker.types";
diff --git a/packages/core/src/components/next/Dialog/Dialog.module.scss b/packages/core/src/components/next/Dialog/Dialog.module.scss
deleted file mode 100644
index c02bd2e57b..0000000000
--- a/packages/core/src/components/next/Dialog/Dialog.module.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-$arrow-size: 12px;
-
-.arrow {
-  width: $arrow-size;
-  height: $arrow-size;
-  position: absolute;
-  border-radius: 2px;
-  background-color: var(--secondary-background-color);
-
-  :global(.dark-app-theme) &,
-  :global(.black-app-theme) &,
-  :global(.hacker-app-theme) & {
-    &[data-placement*="right"] {
-      box-shadow: -1px 1px 0px 0px var(--layout-border-color);
-    }
-    &[data-placement*="left"] {
-      box-shadow: 1px -1px 0px 0px var(--layout-border-color);
-    }
-    &[data-placement*="bottom"] {
-      box-shadow: -1px -1px 0px 0px var(--layout-border-color);
-    }
-    &[data-placement*="top"] {
-      box-shadow: 1px 1px 0px 0px var(--layout-border-color);
-    }
-  }
-}
-
-.arrow[data-placement*="bottom"] {
-  top: 1px;
-}
-
-.arrow[data-placement*="top"] {
-  bottom: 1px;
-}
-
-.arrow[data-placement*="left"] {
-  right: 1px;
-}
-
-.arrow[data-placement*="right"] {
-  left: 1px;
-}
diff --git a/packages/core/src/components/next/Dialog/Dialog.tsx b/packages/core/src/components/next/Dialog/Dialog.tsx
deleted file mode 100644
index ab9a62d2a9..0000000000
--- a/packages/core/src/components/next/Dialog/Dialog.tsx
+++ /dev/null
@@ -1,541 +0,0 @@
-import cx from "classnames";
-import React, { useState, useEffect, useRef, useContext, useCallback, useMemo } from "react";
-import { createPortal } from "react-dom";
-import {
-  useFloating,
-  offset,
-  flip,
-  shift,
-  hide,
-  arrow as arrowMiddleware,
-  autoUpdate,
-  type Placement,
-  type Middleware
-} from "@floating-ui/react-dom";
-import { isFunction } from "es-toolkit";
-import {
-  chainFunctions,
-  chainRefFunctions,
-  convertToArray,
-  NOOP,
-  isInsideClass,
-  ComponentDefaultTestId,
-  getTestId,
-  isClient
-} from "@vibe/shared";
-import DialogContent from "./components/DialogContent/DialogContent";
-import { Refable } from "./components/Refable/Refable";
-import styles from "./Dialog.module.scss";
-import { type DialogTriggerEvent, type DialogEvent, type DialogProps } from "./Dialog.types";
-import { LayerContext, LayerProvider } from "@vibe/layer";
-
-function Dialog({
-  // Core props
-  id,
-  "data-testid": dataTestId,
-  children,
-  content,
-  position = "top",
-  moveBy = { main: 0, secondary: 0 },
-  middleware: middlewareProp = [],
-  startingEdge,
-  showDelay = 100,
-  hideDelay = 100,
-  instantShowAndHide = false,
-  getDynamicShowDelay,
-  showTrigger = "mouseenter",
-  hideTrigger = "mouseleave",
-  showOnDialogEnter = false,
-  showTriggerIgnoreClass,
-  hideTriggerIgnoreClass,
-  addKeyboardHideShowTriggersByDefault = false,
-  shouldShowOnMount = false,
-  disable = false,
-  open = false,
-  isOpen: isOpenProp,
-  useDerivedStateFromProps = false,
-  animationType = "expand",
-  preventAnimationOnMount = false,
-  tooltip = false,
-  tooltipClassName,
-  containerSelector,
-  disableContainerScroll,
-  zIndex,
-  wrapperClassName,
-  referenceWrapperClassName,
-  referenceWrapperElement,
-  onBlur: onBlurProp,
-  onKeyDown: onKeyDownProp,
-  onClick: onClickProp,
-  onFocus: onFocusProp,
-  onMouseDown: onMouseDownProp,
-  onMouseEnter: onMouseEnterProp,
-  onMouseLeave: onMouseLeaveProp,
-  onContextMenu: onContextMenuProp,
-  onDialogDidShow = NOOP,
-  onDialogDidHide = NOOP,
-  onClickOutside: onClickOutsideProp = NOOP,
-  onContentClick: onContentClickProp = NOOP,
-  hideWhenReferenceHidden = false,
-  shouldCallbackOnMount = false,
-  observeContentResize = false,
-  enableNestedDialogLayer = false
-}: DialogProps) {
-  const [isOpenState, setIsOpenState] = useState(shouldShowOnMount);
-  const [preventAnimation, setPreventAnimation] = useState(false);
-  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);
-
-  const showTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const hideTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const arrowRef = useRef<HTMLDivElement>(null);
-
-  const { layerRef } = useContext(LayerContext);
-
-  // Derived state
-  const isOpenInternal = useDerivedStateFromProps ? isOpenProp : isOpenState;
-  const isShown = isOpenInternal || open;
-
-  // Build middleware array for Floating UI
-  const floatingMiddleware = useMemo<Middleware[]>(() => {
-    const middlewareList: Middleware[] = [];
-
-    // Get user-provided middleware (filter out invalid ones)
-    const validMiddleware = middlewareProp.filter(
-      (m): m is Middleware => m != null && typeof m === "object" && typeof m.fn === "function"
-    );
-
-    // Check if user provided their own middleware to override defaults
-    const hasCustomOffset = validMiddleware.some(m => m.name === "offset");
-    const hasCustomFlip = validMiddleware.some(m => m.name === "flip");
-    const hasCustomShift = validMiddleware.some(m => m.name === "shift");
-
-    // Offset middleware - skip if user provided their own
-    if (!hasCustomOffset && (moveBy.main !== 0 || moveBy.secondary !== 0)) {
-      middlewareList.push(offset({ mainAxis: moveBy.main || 0, crossAxis: moveBy.secondary || 0 }));
-    }
-
-    // Core positioning middleware - skip if user provided their own
-    if (!hasCustomFlip) {
-      middlewareList.push(flip());
-    }
-    if (!hasCustomShift) {
-      middlewareList.push(shift());
-    }
-
-    // Add user-provided middleware
-    middlewareList.push(...validMiddleware);
-
-    // Arrow middleware - pass ref directly, Floating UI handles null refs
-    if (tooltip) {
-      middlewareList.push(arrowMiddleware({ element: arrowRef }));
-    }
-
-    // Hide middleware for detecting when reference is hidden
-    if (hideWhenReferenceHidden) {
-      middlewareList.push(hide());
-    }
-
-    return middlewareList;
-  }, [moveBy.main, moveBy.secondary, tooltip, hideWhenReferenceHidden, middlewareProp]);
-
-  // Configure autoUpdate for position tracking
-  const whileElementsMounted = useCallback(
-    (reference: HTMLElement, floating: HTMLElement, update: () => void) => {
-      return autoUpdate(reference, floating, update, {
-        elementResize: observeContentResize,
-        layoutShift: false
-      });
-    },
-    [observeContentResize]
-  );
-
-  // Use Floating UI hook
-  const { refs, floatingStyles, placement, middlewareData } = useFloating({
-    placement: position as Placement,
-    middleware: floatingMiddleware,
-    whileElementsMounted,
-    elements: {
-      reference: referenceElement
-    }
-  });
-
-  // Check if reference is hidden (from hide middleware)
-  const isReferenceHidden = middlewareData.hide?.referenceHidden ?? false;
-
-  const isShowTrigger = useCallback(
-    (eventName: DialogTriggerEvent) => {
-      const showTriggersArray = convertToArray(showTrigger);
-      if (addKeyboardHideShowTriggersByDefault && eventName === "focus" && showTriggersArray.includes("mouseenter")) {
-        return true;
-      }
-      return showTriggersArray.includes(eventName);
-    },
-    [showTrigger, addKeyboardHideShowTriggersByDefault]
-  );
-
-  const isHideTrigger = useCallback(
-    (eventName: DialogTriggerEvent) => {
-      const hideTriggersArray = convertToArray(hideTrigger);
-      if (addKeyboardHideShowTriggersByDefault && eventName === "blur" && hideTriggersArray.includes("mouseleave")) {
-        return true;
-      }
-      return hideTriggersArray.includes(eventName);
-    },
-    [hideTrigger, addKeyboardHideShowTriggersByDefault]
-  );
-
-  const showDialog = useCallback(
-    (event: DialogEvent, eventName: DialogTriggerEvent | string, options: { preventAnimation?: boolean } = {}) => {
-      let finalShowDelay = showDelay;
-      let preventAnimationValue = options.preventAnimation;
-      if (getDynamicShowDelay) {
-        const dynamicDelayObj = getDynamicShowDelay();
-        finalShowDelay = dynamicDelayObj.showDelay || 0;
-        preventAnimationValue = preventAnimationValue ?? dynamicDelayObj.preventAnimation;
-      }
-
-      if (instantShowAndHide) {
-        onDialogDidShow(event, eventName);
-        setIsOpenState(true);
-        setPreventAnimation(!!preventAnimationValue);
-        showTimeoutRef.current = null;
-      } else {
-        showTimeoutRef.current = setTimeout(() => {
-          onDialogDidShow(event, eventName);
-          showTimeoutRef.current = null;
-          setIsOpenState(true);
-          setPreventAnimation(!!preventAnimationValue);
-        }, finalShowDelay);
-      }
-    },
-    [showDelay, getDynamicShowDelay, instantShowAndHide, onDialogDidShow]
-  );
-
-  const hideDialog = useCallback(
-    (event: DialogEvent, eventName: DialogTriggerEvent | string) => {
-      if (instantShowAndHide) {
-        onDialogDidHide(event, eventName);
-        setIsOpenState(false);
-        hideTimeoutRef.current = null;
-      } else {
-        hideTimeoutRef.current = setTimeout(() => {
-          onDialogDidHide(event, eventName);
-          setIsOpenState(false);
-          hideTimeoutRef.current = null;
-        }, hideDelay);
-      }
-    },
-    [hideDelay, instantShowAndHide, onDialogDidHide]
-  );
-
-  const showDialogIfNeeded = useCallback(
-    (event: DialogEvent, eventName: DialogTriggerEvent | string, options = {}) => {
-      if (disable) {
-        return;
-      }
-
-      if (hideTimeoutRef.current) {
-        clearTimeout(hideTimeoutRef.current);
-        hideTimeoutRef.current = null;
-      }
-
-      if (!showTimeoutRef.current) {
-        showDialog(event, eventName, options);
-      }
-    },
-    [disable, showDialog]
-  );
-
-  const hideDialogIfNeeded = useCallback(
-    (event: DialogEvent, eventName: DialogTriggerEvent | string) => {
-      if (showTimeoutRef.current) {
-        clearTimeout(showTimeoutRef.current);
-        showTimeoutRef.current = null;
-      }
-
-      if (!hideTimeoutRef.current) {
-        hideDialog(event, eventName);
-      }
-    },
-    [hideDialog]
-  );
-
-  // Event handling
-  const handleEvent = useCallback(
-    (eventName: DialogTriggerEvent, target: EventTarget | null, event: DialogEvent) => {
-      if (!target) return; // Guard against null targets (e.g., when focus leaves the document)
-      if (isShowTrigger(eventName) && !isShown && !isInsideClass(target as HTMLElement, showTriggerIgnoreClass)) {
-        return showDialogIfNeeded(event, eventName);
-      }
-
-      if (isHideTrigger(eventName) && !isInsideClass(target as HTMLElement, hideTriggerIgnoreClass)) {
-        return hideDialogIfNeeded(event, eventName);
-      }
-    },
-    [
-      isShowTrigger,
-      isHideTrigger,
-      isShown,
-      showTriggerIgnoreClass,
-      hideTriggerIgnoreClass,
-      showDialogIfNeeded,
-      hideDialogIfNeeded
-    ]
-  );
-
-  const getContainer = useCallback(() => {
-    if (containerSelector) {
-      const containerElement = document.querySelector(containerSelector);
-      if (containerElement instanceof Element) {
-        return containerElement;
-      }
-    }
-    return layerRef?.current || document.body;
-  }, [containerSelector, layerRef]);
-
-  // Memoized event handlers to prevent unnecessary re-renders
-  const onMouseEnter = useCallback((e: React.MouseEvent) => handleEvent("mouseenter", e.target, e), [handleEvent]);
-  const onMouseLeave = useCallback((e: React.MouseEvent) => handleEvent("mouseleave", e.target, e), [handleEvent]);
-  const onClick = useCallback(
-    (e: React.MouseEvent) => {
-      if (e.button) return;
-      handleEvent("click", e.target, e);
-    },
-    [handleEvent]
-  );
-  const onKeyDown = useCallback(
-    (event: React.KeyboardEvent) => {
-      // Handle element-level keyboard events for triggers
-      if (event.key === "Enter") handleEvent("enter", event.target, event);
-      if (event.key === "Tab") handleEvent("tab", event.target, event);
-    },
-    [handleEvent]
-  );
-
-  const onMouseDown = useCallback(
-    (e: React.MouseEvent) => {
-      if (e.button) return;
-      handleEvent("mousedown", e.target, e);
-    },
-    [handleEvent]
-  );
-  const onFocus = useCallback((e: React.FocusEvent) => handleEvent("focus", e.target, e), [handleEvent]);
-  const onBlur = useCallback(
-    (e: React.FocusEvent) => {
-      const target = e.relatedTarget || e.target;
-      handleEvent("blur", target, e);
-    },
-    [handleEvent]
-  );
-  const onEsc = useCallback((e: React.KeyboardEvent) => handleEvent("esckey", e.target, e), [handleEvent]);
-  const onContextMenu = useCallback(
-    (e: React.MouseEvent) => {
-      if ((isShowTrigger("contextmenu") && !isShown) || (isHideTrigger("contextmenu") && isShown)) {
-        e.preventDefault();
-      }
-      handleEvent("contextmenu", e.target, e);
-    },
-    [isShown, isShowTrigger, isHideTrigger, handleEvent]
-  );
-
-  const onClickOutside = useCallback(
-    (event: React.MouseEvent) => {
-      handleEvent("clickoutside", event.target, event);
-      onClickOutsideProp(event);
-    },
-    [handleEvent, onClickOutsideProp]
-  );
-
-  const onDialogEnter = useCallback(
-    (event: React.MouseEvent) => {
-      if (showOnDialogEnter) showDialogIfNeeded(event, "DialogEnter");
-    },
-    [showOnDialogEnter, showDialogIfNeeded]
-  );
-
-  const onDialogLeave = useCallback(
-    (event: React.MouseEvent) => {
-      if (showOnDialogEnter) hideDialogIfNeeded(event, "DialogLeave");
-    },
-    [showOnDialogEnter, hideDialogIfNeeded]
-  );
-
-  const onContentClick = useCallback(
-    (e: React.MouseEvent) => {
-      handleEvent("onContentClick", e.target, e);
-      onContentClickProp(e);
-    },
-    [handleEvent, onContentClickProp]
-  );
-
-  // Memoized chained event handlers to prevent Refable children re-renders
-  const chainedOnBlur = useMemo(() => chainFunctions([onBlurProp, onBlur], true), [onBlurProp, onBlur]);
-  const chainedOnKeyDown = useMemo(() => chainFunctions([onKeyDownProp, onKeyDown], true), [onKeyDownProp, onKeyDown]);
-  const chainedOnClick = useMemo(() => chainFunctions([onClickProp, onClick], true), [onClickProp, onClick]);
-  const chainedOnFocus = useMemo(() => chainFunctions([onFocusProp, onFocus], true), [onFocusProp, onFocus]);
-  const chainedOnMouseDown = useMemo(
-    () => chainFunctions([onMouseDownProp, onMouseDown], true),
-    [onMouseDownProp, onMouseDown]
-  );
-  const chainedOnMouseEnter = useMemo(
-    () => chainFunctions([onMouseEnterProp, onMouseEnter], true),
-    [onMouseEnterProp, onMouseEnter]
-  );
-  const chainedOnMouseLeave = useMemo(
-    () => chainFunctions([onMouseLeaveProp, onMouseLeave], true),
-    [onMouseLeaveProp, onMouseLeave]
-  );
-  const chainedOnContextMenu = useMemo(
-    () => chainFunctions([onContextMenuProp, onContextMenu], true),
-    [onContextMenuProp, onContextMenu]
-  );
-
-  // Document-level keyboard handler using stable ref pattern
-  // Must handle Escape, Tab, and Enter at document level to match old behavior
-  const closeDialogOnEscapeRef = useRef<(event: KeyboardEvent) => void>();
-  closeDialogOnEscapeRef.current = (event: KeyboardEvent) => {
-    if (!isShown) return;
-
-    switch (event.key) {
-      case "Escape":
-        hideDialogIfNeeded(event, "esckey");
-        break;
-      case "Tab":
-        handleEvent("tab", event.target, event);
-        break;
-      case "Enter":
-        handleEvent("enter", event.target, event);
-        break;
-    }
-  };
-
-  // Effects
-
-  // Callback on mount
-  useEffect(() => {
-    if (shouldCallbackOnMount && shouldShowOnMount) {
-      onDialogDidShow();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  // Cleanup timeouts on unmount
-  useEffect(() => {
-    return () => {
-      if (showTimeoutRef.current) clearTimeout(showTimeoutRef.current);
-      if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current);
-    };
-  }, []);
-
-  // Document keyboard listener (stable reference via ref)
-  useEffect(() => {
-    if (!isClient()) return;
-
-    const handler = (event: KeyboardEvent) => closeDialogOnEscapeRef.current?.(event);
-    document.addEventListener("keyup", handler);
-    return () => document.removeEventListener("keyup", handler);
-  }, []);
-
-  // Handle reference hidden state
-  useEffect(() => {
-    if (hideWhenReferenceHidden && isReferenceHidden && isShown) {
-      const event = new CustomEvent("onReferenceHidden");
-      hideDialog(event, "onReferenceHidden");
-    }
-  }, [hideWhenReferenceHidden, isReferenceHidden, isShown, hideDialog]);
-
-  // Computed values
-  const overrideDataTestId = dataTestId || getTestId(ComponentDefaultTestId.DIALOG, id);
-
-  const arrowStyles = useMemo<React.CSSProperties>(() => {
-    if (!middlewareData.arrow) return {};
-    const { x, y } = middlewareData.arrow;
-    return {
-      left: x != null ? `${x}px` : "",
-      top: y != null ? `${y}px` : "",
-      transform: "rotate(45deg)"
-    };
-  }, [middlewareData.arrow]);
-
-  const finalFloatingStyles = useMemo<React.CSSProperties>(
-    () => ({ ...floatingStyles, ...(zIndex !== undefined && { zIndex }) }),
-    [floatingStyles, zIndex]
-  );
-
-  const animationTypeCalculated = preventAnimationOnMount || preventAnimation ? undefined : animationType;
-  const contentRendered = isFunction(content) ? content() : content;
-
-  // Early return if no content - wrap in fragment for type safety
-  if (!contentRendered) {
-    return <>{children}</>;
-  }
-
-  const mergedFloatingRef = chainRefFunctions([refs.setFloating, containerRef]);
-
-  const dialogContent = (
-    <DialogContent
-      data-testid={overrideDataTestId}
-      isReferenceHidden={hideWhenReferenceHidden && isReferenceHidden}
-      onMouseEnter={onDialogEnter}
-      onMouseLeave={onDialogLeave}
-      onClickOutside={onClickOutside}
-      onContextMenu={onContextMenu}
-      onEsc={onEsc}
-      animationType={animationTypeCalculated}
-      position={placement}
-      wrapperClassName={wrapperClassName}
-      startingEdge={startingEdge}
-      isOpen={isShown}
-      showDelay={showDelay}
-      styleObject={finalFloatingStyles}
-      ref={mergedFloatingRef}
-      onClick={onContentClick}
-      hasTooltip={!!tooltip}
-      containerSelector={containerSelector}
-      disableContainerScroll={disableContainerScroll}
-    >
-      {contentRendered}
-      {tooltip && (
-        <div
-          style={arrowStyles}
-          ref={arrowRef}
-          className={cx(styles.arrow, tooltipClassName)}
-          data-placement={placement}
-        />
-      )}
-    </DialogContent>
-  );
-
-  return (
-    <>
-      <Refable
-        className={cx(referenceWrapperClassName)}
-        wrapperElement={referenceWrapperElement}
-        ref={setReferenceElement}
-        onBlur={chainedOnBlur}
-        onKeyDown={chainedOnKeyDown}
-        onClick={chainedOnClick}
-        onFocus={chainedOnFocus}
-        onMouseDown={chainedOnMouseDown}
-        onMouseEnter={chainedOnMouseEnter}
-        onMouseLeave={chainedOnMouseLeave}
-        onContextMenu={chainedOnContextMenu}
-      >
-        {children}
-      </Refable>
-      {isClient() &&
-        isShown &&
-        createPortal(
-          enableNestedDialogLayer ? (
-            <LayerProvider layerRef={containerRef}>{dialogContent}</LayerProvider>
-          ) : (
-            dialogContent
-          ),
-          getContainer()
-        )}
-    </>
-  );
-}
-
-export default Dialog;
diff --git a/packages/core/src/components/next/Dialog/Dialog.types.ts b/packages/core/src/components/next/Dialog/Dialog.types.ts
deleted file mode 100644
index 130107d505..0000000000
--- a/packages/core/src/components/next/Dialog/Dialog.types.ts
+++ /dev/null
@@ -1,247 +0,0 @@
-import type React from "react";
-import type { ReactElement } from "react";
-import type { VibeComponentProps } from "@vibe/shared";
-import type { Middleware, Placement } from "@floating-ui/react-dom";
-
-export type DialogType = "modal" | "popover";
-
-export type DialogSize = "none" | "small" | "medium" | "large";
-
-export type DialogPosition =
-  | "left"
-  | "left-start"
-  | "left-end"
-  | "right"
-  | "right-start"
-  | "right-end"
-  | "top"
-  | "top-start"
-  | "top-end"
-  | "bottom"
-  | "bottom-start"
-  | "bottom-end";
-
-export type DialogTriggerEvent =
-  | "click"
-  | "clickoutside"
-  | "esckey"
-  | "tab"
-  | "mouseenter"
-  | "mouseleave"
-  | "enter"
-  | "mousedown"
-  | "focus"
-  | "blur"
-  | "onContentClick"
-  | "contextmenu";
-
-export type DialogAnimationType = "opacity-and-slide" | "expand";
-
-export type DialogStartingEdge = "top" | "bottom";
-
-export type DialogOffset = {
-  main?: number;
-  secondary?: number;
-};
-
-export type DialogEvent = React.MouseEvent | React.KeyboardEvent | KeyboardEvent | React.FocusEvent | CustomEvent;
-
-export type DialogMiddleware = Middleware;
-
-export type DialogPlacement = Placement;
-
-export interface DialogProps extends VibeComponentProps {
-  /**
-   * Event handler for blur events on the reference element.
-   */
-  onBlur?: (e: React.FocusEvent) => void;
-  /**
-   * Event handler for keydown events on the reference element.
-   */
-  onKeyDown?: (e: React.KeyboardEvent) => void;
-  /**
-   * Event handler for click events on the reference element.
-   */
-  onClick?: (e: React.MouseEvent) => void;
-  /**
-   * Event handler for focus events on the reference element.
-   */
-  onFocus?: (e: React.FocusEvent) => void;
-  /**
-   * Event handler for mousedown events on the reference element.
-   */
-  onMouseDown?: (e: React.MouseEvent) => void;
-  /**
-   * Event handler for mouseenter events on the reference element.
-   */
-  onMouseEnter?: (e: React.MouseEvent) => void;
-  /**
-   * Event handler for mouseleave events on the reference element.
-   */
-  onMouseLeave?: (e: React.MouseEvent) => void;
-  /**
-   * Event handler for contextmenu events on the reference element.
-   */
-  onContextMenu?: (e: React.MouseEvent) => void;
-  /**
-   * Class name applied to the reference wrapper element.
-   */
-  referenceWrapperClassName?: string;
-  /**
-   * The wrapper element type to use for React components. Defaults to "span".
-   */
-  referenceWrapperElement?: "span" | "div";
-  /**
-   * The placement of the dialog relative to the reference element.
-   */
-  position?: DialogPosition;
-  /**
-   * Custom Floating UI middleware for positioning logic.
-   * If you provide `offset`, `flip`, or `shift` middleware, the defaults will be skipped.
-   * Other middleware (like `size`, `inline`, `autoPlacement`) are added to the chain.
-   * @see https://floating-ui.com/docs/middleware
-   */
-  middleware?: DialogMiddleware[];
-  /**
-   * The starting edge of the dialog animation.
-   */
-  startingEdge?: DialogStartingEdge;
-  /**
-   * Offset values for positioning adjustments.
-   * `main` - distance from reference element
-   * `secondary` - cross-axis offset (skidding)
-   */
-  moveBy?: { main?: number; secondary?: number };
-  /**
-   * Delay in milliseconds before showing the dialog.
-   */
-  showDelay?: number;
-  /**
-   * Delay in milliseconds before hiding the dialog.
-   */
-  hideDelay?: number;
-  /**
-   * Events that trigger showing the dialog.
-   */
-  showTrigger?: DialogTriggerEvent | DialogTriggerEvent[];
-  /**
-   * Events that trigger hiding the dialog.
-   */
-  hideTrigger?: DialogTriggerEvent | DialogTriggerEvent[];
-  /**
-   * If true, keeps the dialog open when mouse enters it.
-   */
-  showOnDialogEnter?: boolean;
-  /**
-   * If true, shows the dialog when the component mounts.
-   */
-  shouldShowOnMount?: boolean;
-  /**
-   * If true, disables opening the dialog.
-   */
-  disable?: boolean;
-  /**
-   * Controls the open state of the dialog (controlled mode).
-   */
-  open?: boolean;
-  /**
-   * Controlled open state for derived state pattern.
-   */
-  isOpen?: boolean;
-  /**
-   * CSS class names that, when present on target, prevent showing the dialog.
-   */
-  showTriggerIgnoreClass?: string | string[];
-  /**
-   * CSS class names that, when present on target, prevent hiding the dialog.
-   */
-  hideTriggerIgnoreClass?: string | string[];
-  /**
-   * The animation type used for the dialog.
-   */
-  animationType?: DialogAnimationType;
-  /**
-   * Class name applied to the dialog content wrapper.
-   */
-  wrapperClassName?: string;
-  /**
-   * If true, prevents animation when mounting.
-   */
-  preventAnimationOnMount?: boolean;
-  /**
-   * CSS selector of the container where the dialog is portaled.
-   */
-  containerSelector?: string;
-  /**
-   * If true, renders with tooltip arrow styling.
-   */
-  tooltip?: boolean;
-  /**
-   * Class name applied to the tooltip arrow element.
-   */
-  tooltipClassName?: string;
-  /**
-   * Callback fired when the dialog is shown.
-   */
-  onDialogDidShow?: (event?: DialogEvent, eventName?: DialogTriggerEvent | string) => void;
-  /**
-   * Callback fired when the dialog is hidden.
-   */
-  onDialogDidHide?: (event: DialogEvent, eventName: DialogTriggerEvent | string) => void;
-  /**
-   * Callback fired when clicking outside the dialog.
-   */
-  onClickOutside?: (event: React.MouseEvent) => void;
-  /**
-   * Callback fired when clicking inside the dialog content.
-   */
-  onContentClick?: (event: React.MouseEvent) => void;
-  /**
-   * The z-index applied to the dialog.
-   */
-  zIndex?: number;
-  /**
-   * If true, uses derived state from props pattern.
-   */
-  useDerivedStateFromProps?: boolean;
-  /**
-   * If true, hides the dialog when the reference element scrolls out of view.
-   */
-  hideWhenReferenceHidden?: boolean;
-  /**
-   * If true, fires onDialogDidShow callback on mount.
-   */
-  shouldCallbackOnMount?: boolean;
-  /**
-   * If true, shows and hides the dialog without delay.
-   */
-  instantShowAndHide?: boolean;
-  /**
-   * Callback to dynamically adjust show delay and animation behavior.
-   */
-  getDynamicShowDelay?: () => { showDelay: number; preventAnimation: boolean };
-  /**
-   * The content displayed inside the dialog. Can be a render function.
-   */
-  content?: (() => JSX.Element) | JSX.Element;
-  /**
-   * The reference element(s) that the dialog is positioned relative to.
-   */
-  children?: ReactElement | ReactElement[] | string;
-  /**
-   * If true, keyboard focus/blur events behave like mouse enter/leave.
-   */
-  addKeyboardHideShowTriggersByDefault?: boolean;
-  /**
-   * If true or a selector string, disables scrolling in the container when open.
-   */
-  disableContainerScroll?: boolean | string;
-  /**
-   * If true, automatically updates position when content resizes.
-   */
-  observeContentResize?: boolean;
-  /**
-   * If true, provides LayerProvider context for nested dialogs.
-   */
-  enableNestedDialogLayer?: boolean;
-}
diff --git a/packages/core/src/components/next/Dialog/__tests__/Dialog.test.tsx b/packages/core/src/components/next/Dialog/__tests__/Dialog.test.tsx
deleted file mode 100644
index 37e682c104..0000000000
--- a/packages/core/src/components/next/Dialog/__tests__/Dialog.test.tsx
+++ /dev/null
@@ -1,472 +0,0 @@
-import { vi, describe, it, expect, beforeEach, afterEach } from "vitest";
-import React from "react";
-import userEvent from "@testing-library/user-event";
-import { render, screen, waitFor, within } from "@testing-library/react";
-import Dialog, { type DialogProps } from "../Dialog";
-
-function renderVisibleDialogOnMount(dialogProps: DialogProps) {
-  return renderDialogOnMount({ ...dialogProps, shouldShowOnMount: true });
-}
-
-function renderDialogOnMount(dialogProps: DialogProps) {
-  return render(<Dialog {...dialogProps} />);
-}
-
-describe("Dialog tests", () => {
-  beforeEach(() => {
-    vi.useFakeTimers();
-  });
-
-  afterEach(() => {
-    vi.restoreAllMocks();
-    vi.useRealTimers();
-  });
-
-  describe("Callbacks", () => {
-    it("should call onClickOutside callback when click outside", async () => {
-      const onClickOutsideMock = vi.fn();
-      renderVisibleDialogOnMount({ onClickOutside: onClickOutsideMock, content: <div>Dialog</div> });
-      userEvent.click(document.body);
-      expect(onClickOutsideMock).toBeCalled();
-    });
-
-    it("should not call onClickOutside callback when clicking inside the dialog", async () => {
-      const onClickOutsideMock = vi.fn();
-      renderVisibleDialogOnMount({ onClickOutside: onClickOutsideMock, content: <div>Dialog</div> });
-      const dialog = await screen.findByText("Dialog");
-      userEvent.click(dialog);
-      expect(onClickOutsideMock).not.toBeCalled();
-    });
-
-    it("should call onDialogDidShow callback when dialog is shown", async () => {
-      const onDialogDidShowMock = vi.fn();
-      renderVisibleDialogOnMount({
-        onDialogDidShow: onDialogDidShowMock,
-        content: <div>Dialog</div>,
-        shouldCallbackOnMount: true
-      });
-      vi.runAllTimers();
-      expect(onDialogDidShowMock).toBeCalled();
-    });
-
-    it("should call onDialogDidHide callback when dialog is hidden", async () => {
-      const onDialogDidHideMock = vi.fn();
-      const { container } = render(
-        <Dialog
-          shouldShowOnMount
-          onDialogDidHide={onDialogDidHideMock}
-          content={<div>Dialog</div>}
-          showTrigger={["click"]}
-          hideTrigger={["click"]}
-        >
-          <button type="button">Toggle</button>
-        </Dialog>
-      );
-      vi.runAllTimers();
-
-      const button = within(container).getByText("Toggle");
-      await userEvent.click(button);
-      vi.runAllTimers();
-      await waitFor(() => expect(onDialogDidHideMock).toBeCalled());
-    });
-
-    it("should call onContentClick callback when clicking inside dialog", async () => {
-      const onContentClickMock = vi.fn();
-      renderVisibleDialogOnMount({ onContentClick: onContentClickMock, content: <div>Dialog Content</div> });
-      const dialog = await screen.findByText("Dialog Content");
-      await userEvent.click(dialog);
-      expect(onContentClickMock).toBeCalled();
-    });
-  });
-
-  describe("Show/Hide Triggers", () => {
-    it("should show dialog on click when showTrigger is click", async () => {
-      const { container } = render(
-        <Dialog showTrigger={["click"]} content={<div>Dialog Content</div>}>
-          <button type="button">Click Me</button>
-        </Dialog>
-      );
-
-      expect(screen.queryByText("Dialog Content")).not.toBeInTheDocument();
-
-      const button = within(container).getByText("Click Me");
-      await userEvent.click(button);
-      vi.runAllTimers();
-
-      await waitFor(() => expect(screen.getByText("Dialog Content")).toBeInTheDocument());
-    });
-
-    it("should show dialog on mouseenter when showTrigger is mouseenter", async () => {
-      const { container } = render(
-        <Dialog showTrigger={["mouseenter"]} hideTrigger={["mouseleave"]} content={<div>Hover Content</div>}>
-          <div>Hover Me</div>
-        </Dialog>
-      );
-
-      expect(screen.queryByText("Hover Content")).not.toBeInTheDocument();
-
-      const trigger = within(container).getByText("Hover Me");
-      await userEvent.hover(trigger);
-      vi.runAllTimers();
-
-      await waitFor(() => expect(screen.getByText("Hover Content")).toBeInTheDocument());
-    });
-
-    it("should show dialog on focus when showTrigger is focus", async () => {
-      const { container } = render(
-        <Dialog showTrigger={["focus"]} hideTrigger={["blur"]} content={<div>Focus Content</div>}>
-          <input placeholder="Focus Me" />
-        </Dialog>
-      );
-
-      expect(screen.queryByText("Focus Content")).not.toBeInTheDocument();
-
-      const input = within(container).getByPlaceholderText("Focus Me");
-      input.focus();
-      vi.runAllTimers();
-
-      await waitFor(() => expect(screen.getByText("Focus Content")).toBeInTheDocument());
-    });
-
-    it("should hide dialog on mouseleave when hideTrigger is mouseleave", async () => {
-      const { container } = render(
-        <Dialog
-          shouldShowOnMount
-          showTrigger={["mouseenter"]}
-          hideTrigger={["mouseleave"]}
-          content={<div>Hover Content</div>}
-        >
-          <div>Hover Me</div>
-        </Dialog>
-      );
-      vi.runAllTimers();
-
-      await waitFor(() => expect(screen.getByText("Hover Content")).toBeInTheDocument());
-
-      const trigger = within(container).getByText("Hover Me");
-      await userEvent.unhover(trigger);
-      vi.runAllTimers();
-
-      await waitFor(() => expect(screen.queryByText("Hover Content")).not.toBeInTheDocument());
-    });
-
-    it("should hide dialog on blur when hideTrigger is blur", async () => {
-      const onDialogDidHideMock = vi.fn();
-      const { container } = render(
-        <Dialog
-          shouldShowOnMount
-          showTrigger={["focus"]}
-          hideTrigger={["blur"]}
-          onDialogDidHide={onDialogDidHideMock}
-          instantShowAndHide={true}
-          content={<div>Focus Content</div>}
-        >
-          <input placeholder="Focus Me" />
-        </Dialog>
-      );
-
-      await waitFor(() => expect(screen.getByText("Focus Content")).toBeInTheDocument());
-
-      const input = within(container).getByPlaceholderText("Focus Me");
-      input.focus();
-
-      // Trigger blur by focusing something else
-      await userEvent.tab();
-
-      await waitFor(() => expect(onDialogDidHideMock).toBeCalled());
-    });
-  });
-
-  describe("Keyboard Interactions", () => {
-    it("should hide dialog on Escape key when hideTrigger includes esckey", async () => {
-      render(
-        <Dialog shouldShowOnMount showTrigger={["click"]} hideTrigger={["esckey"]} content={<div>Press Escape</div>}>
-          <button type="button">Toggle</button>
-        </Dialog>
-      );
-      vi.runAllTimers();
-
-      await waitFor(() => expect(screen.getByText("Press Escape")).toBeInTheDocument());
-
-      await userEvent.keyboard("{Escape}");
-      vi.runAllTimers();
-
-      await waitFor(() => expect(screen.queryByText("Press Escape")).not.toBeInTheDocument());
-    });
-
-    it("should trigger enter event on Enter key", async () => {
-      const onDialogDidHideMock = vi.fn();
-      const { container } = render(
-        <Dialog
-          shouldShowOnMount
-          showTrigger={["click"]}
-          hideTrigger={["enter"]}
-          onDialogDidHide={onDialogDidHideMock}
-          content={<div>Press Enter</div>}
-        >
-          <button type="button">Toggle</button>
-        </Dialog>
-      );
-      vi.runAllTimers();
-
-      await waitFor(() => expect(screen.getByText("Press Enter")).toBeInTheDocument());
-
-      const button = within(container).getByText("Toggle");
-      button.focus();
-      await userEvent.keyboard("{Enter}");
-      vi.runAllTimers();
-
-      await waitFor(() => expect(onDialogDidHideMock).toBeCalled());
-    });
-  });
-
-  describe("Delay Behavior", () => {
-    it("should respect showDelay when showing dialog", async () => {
-      const onDialogDidShowMock = vi.fn();
-      const { container } = render(
-        <Dialog
-          showDelay={500}
-          showTrigger={["click"]}
-          onDialogDidShow={onDialogDidShowMock}
-          content={<div>Delayed</div>}
-        >
-          <button type="button">Click</button>
-        </Dialog>
-      );
-
-      const button = within(container).getByText("Click");
-      await userEvent.click(button);
-
-      // Should not show immediately
-      expect(onDialogDidShowMock).not.toBeCalled();
-
-      // Advance timers by 500ms
-      vi.advanceTimersByTime(500);
-
-      await waitFor(() => expect(onDialogDidShowMock).toBeCalled());
-    });
-
-    it("should respect hideDelay when hiding dialog", async () => {
-      const onDialogDidHideMock = vi.fn();
-      const { container } = render(
-        <Dialog
-          shouldShowOnMount
-          hideDelay={300}
-          showTrigger={["click"]}
-          hideTrigger={["click"]}
-          onDialogDidHide={onDialogDidHideMock}
-          content={<div>Delayed Hide</div>}
-        >
-          <button type="button">Click</button>
-        </Dialog>
-      );
-      vi.runAllTimers();
-
-      const button = within(container).getByText("Click");
-      await userEvent.click(button);
-
-      // Should not hide immediately
-      expect(onDialogDidHideMock).not.toBeCalled();
-
-      // Advance timers by 300ms
-      vi.advanceTimersByTime(300);
-
-      await waitFor(() => expect(onDialogDidHideMock).toBeCalled());
-    });
-
-    it("should cancel show timeout when hiding is triggered", async () => {
-      const onDialogDidShowMock = vi.fn();
-      const { container } = render(
-        <Dialog
-          showDelay={500}
-          showTrigger={["mouseenter"]}
-          hideTrigger={["mouseleave"]}
-          onDialogDidShow={onDialogDidShowMock}
-          content={<div>Hover</div>}
-        >
-          <div>Hover Me</div>
-        </Dialog>
-      );
-
-      const trigger = within(container).getByText("Hover Me");
-
-      // Start hovering
-      await userEvent.hover(trigger);
-      vi.advanceTimersByTime(200);
-
-      // Stop hovering before showDelay completes
-      await userEvent.unhover(trigger);
-      vi.runAllTimers();
-
-      // Should not have shown
-      expect(onDialogDidShowMock).not.toBeCalled();
-    });
-  });
-
-  describe("Controlled Mode", () => {
-    it("should show dialog when open prop is true", async () => {
-      render(
-        <Dialog open={true} content={<div>Controlled Open</div>}>
-          <button type="button">Reference</button>
-        </Dialog>
-      );
-
-      await waitFor(() => expect(screen.getByText("Controlled Open")).toBeInTheDocument());
-    });
-
-    it("should hide dialog when open prop is false", async () => {
-      const { rerender } = render(
-        <Dialog open={true} content={<div>Controlled</div>}>
-          <button type="button">Reference</button>
-        </Dialog>
-      );
-
-      await waitFor(() => expect(screen.getByText("Controlled")).toBeInTheDocument());
-
-      rerender(
-        <Dialog open={false} content={<div>Controlled</div>}>
-          <button type="button">Reference</button>
-        </Dialog>
-      );
-
-      expect(screen.queryByText("Controlled")).not.toBeInTheDocument();
-    });
-  });
-
-  describe("Positioning", () => {
-    it("should render dialog with top position", async () => {
-      renderVisibleDialogOnMount({
-        position: "top",
-        content: <div data-testid="dialog-content">Top Dialog</div>
-      });
-
-      const dialogContent = await screen.findByTestId("dialog-content");
-      expect(dialogContent).toBeInTheDocument();
-    });
-
-    it("should render dialog with bottom position", async () => {
-      renderVisibleDialogOnMount({ position: "bottom", content: <div>Bottom Dialog</div> });
-
-      await waitFor(() => expect(screen.getByText("Bottom Dialog")).toBeInTheDocument());
-    });
-
-    it("should render dialog with left position", async () => {
-      renderVisibleDialogOnMount({ position: "left", content: <div>Left Dialog</div> });
-
-      await waitFor(() => expect(screen.getByText("Left Dialog")).toBeInTheDocument());
-    });
-
-    it("should render dialog with right position", async () => {
-      renderVisibleDialogOnMount({ position: "right", content: <div>Right Dialog</div> });
-
-      await waitFor(() => expect(screen.getByText("Right Dialog")).toBeInTheDocument());
-    });
-  });
-
-  describe("Disable Prop", () => {
-    it("should not show dialog when disable is true", async () => {
-      const { container } = render(
-        <Dialog disable={true} showTrigger={["click"]} content={<div>Disabled Dialog</div>}>
-          <button type="button">Click</button>
-        </Dialog>
-      );
-
-      const button = within(container).getByText("Click");
-      await userEvent.click(button);
-      vi.runAllTimers();
-
-      expect(screen.queryByText("Disabled Dialog")).not.toBeInTheDocument();
-    });
-  });
-
-  describe("Animation", () => {
-    it("should apply expand animation by default", async () => {
-      renderVisibleDialogOnMount({ content: <div>Animated</div> });
-      vi.runAllTimers();
-
-      await waitFor(() => expect(screen.getByText("Animated")).toBeInTheDocument());
-    });
-
-    it("should apply opacity-and-slide animation when specified", async () => {
-      renderVisibleDialogOnMount({ animationType: "opacity-and-slide", content: <div>Slide Animated</div> });
-      vi.runAllTimers();
-
-      await waitFor(() => expect(screen.getByText("Slide Animated")).toBeInTheDocument());
-    });
-
-    it("should prevent animation on mount when preventAnimationOnMount is true", async () => {
-      renderVisibleDialogOnMount({ preventAnimationOnMount: true, content: <div>No Animation</div> });
-      vi.runAllTimers();
-
-      await waitFor(() => expect(screen.getByText("No Animation")).toBeInTheDocument());
-    });
-  });
-
-  describe("Event Handler Chaining", () => {
-    it("should chain onClick handlers", async () => {
-      const dialogOnClickMock = vi.fn();
-      const childOnClickMock = vi.fn();
-
-      const { container } = render(
-        <Dialog showTrigger={["click"]} onClick={dialogOnClickMock} content={<div>Content</div>}>
-          <button type="button" onClick={childOnClickMock}>
-            Click Both
-          </button>
-        </Dialog>
-      );
-
-      const button = within(container).getByText("Click Both");
-      await userEvent.click(button);
-
-      expect(dialogOnClickMock).toBeCalled();
-      expect(childOnClickMock).toBeCalled();
-    });
-
-    it("should chain onMouseEnter handlers", async () => {
-      const dialogOnMouseEnterMock = vi.fn();
-      const childOnMouseEnterMock = vi.fn();
-
-      const { container } = render(
-        <Dialog showTrigger={["mouseenter"]} onMouseEnter={dialogOnMouseEnterMock} content={<div>Content</div>}>
-          <div onMouseEnter={childOnMouseEnterMock}>Hover</div>
-        </Dialog>
-      );
-
-      const trigger = within(container).getByText("Hover");
-      await userEvent.hover(trigger);
-
-      expect(dialogOnMouseEnterMock).toBeCalled();
-      expect(childOnMouseEnterMock).toBeCalled();
-    });
-  });
-
-  describe("Instant Show and Hide", () => {
-    it("should show and hide instantly when instantShowAndHide is true", async () => {
-      const onDialogDidShowMock = vi.fn();
-      const onDialogDidHideMock = vi.fn();
-
-      const { container } = render(
-        <Dialog
-          instantShowAndHide
-          showTrigger={["click"]}
-          hideTrigger={["click"]}
-          onDialogDidShow={onDialogDidShowMock}
-          onDialogDidHide={onDialogDidHideMock}
-          content={<div>Instant</div>}
-        >
-          <button type="button">Toggle</button>
-        </Dialog>
-      );
-
-      const button = within(container).getByText("Toggle");
-
-      // Show
-      await userEvent.click(button);
-      expect(onDialogDidShowMock).toBeCalled();
-
-      // Hide
-      await userEvent.click(button);
-      expect(onDialogDidHideMock).toBeCalled();
-    });
-  });
-});
diff --git a/packages/core/src/components/next/Dialog/components/Refable/__tests__/Refable.test.tsx b/packages/core/src/components/next/Dialog/components/Refable/__tests__/Refable.test.tsx
deleted file mode 100644
index 7ec9e53fe1..0000000000
--- a/packages/core/src/components/next/Dialog/components/Refable/__tests__/Refable.test.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import { vi, afterEach, describe, it, expect } from "vitest";
-import React from "react";
-import { cleanup } from "@testing-library/react-hooks";
-import { fireEvent, render } from "@testing-library/react";
-import { Refable } from "../Refable";
-
-describe("Refable", () => {
-  afterEach(() => {
-    cleanup();
-  });
-
-  it("should render nothing if an invalid child is passed", () => {
-    const { container } = render(<Refable>{`invalid`}</Refable>);
-
-    expect(container.innerHTML).toBe("");
-  });
-
-  it("should be able to render an intractable single JSX element", () => {
-    const onClickCallback = vi.fn();
-
-    const { getAllByTestId } = render(
-      <Refable data-testid="ref-component" onClick={onClickCallback}>
-        <span>test</span>
-      </Refable>
-    );
-
-    const components = getAllByTestId("ref-component");
-    expect(components.length).toBe(1);
-    const [component] = components;
-    expect(component.innerHTML).toBe("test");
-    expect(component.getAttribute("data-testid")).toBe("ref-component");
-    fireEvent.click(component);
-    expect(onClickCallback.mock.calls.length).toBe(1);
-  });
-
-  it("should be able to render multiple intractable JSX elements", () => {
-    const onClickCallback = vi.fn();
-
-    const { getAllByTestId } = render(
-      <Refable data-testid="ref-component" onClick={onClickCallback}>
-        <span>test</span>
-        <span>test</span>
-      </Refable>
-    );
-
-    const components = getAllByTestId("ref-component");
-    expect(components.length).toBe(2);
-    components.forEach(component => {
-      expect(component.innerHTML).toBe("test");
-      expect(component.getAttribute("data-testid")).toBe("ref-component");
-      fireEvent.click(component);
-    });
-    expect(onClickCallback.mock.calls.length).toBe(2);
-  });
-
-  it("should be able to render an intractable function component", () => {
-    const onClickCallback = vi.fn();
-    const InlineComponent = () => {
-      return <div>test</div>;
-    };
-
-    const { getByTestId } = render(
-      <Refable data-testid="ref-component" onClick={onClickCallback}>
-        <InlineComponent />
-      </Refable>
-    );
-
-    const component = getByTestId("ref-component");
-    expect(component.innerHTML).toBe("<div>test</div>");
-    fireEvent.click(component);
-    expect(onClickCallback.mock.calls.length).toBe(1);
-  });
-
-  it("should wrap a function component with a span", () => {
-    const onClickCallback = vi.fn();
-    const InlineComponent = () => {
-      return <div>test</div>;
-    };
-
-    const { container } = render(
-      <Refable data-testid="ref-component" onClick={onClickCallback}>
-        <InlineComponent />
-      </Refable>
-    );
-
-    expect(container.innerHTML).toBe('<span data-testid="ref-component"><div>test</div></span>');
-  });
-});
diff --git a/packages/core/src/components/next/Dialog/index.ts b/packages/core/src/components/next/Dialog/index.ts
deleted file mode 100644
index 2624bedf39..0000000000
--- a/packages/core/src/components/next/Dialog/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as Dialog } from "./Dialog";
-export * from "./Dialog.types";
diff --git a/packages/core/src/components/next/Dropdown/Dropdown.tsx b/packages/core/src/components/next/Dropdown/Dropdown.tsx
deleted file mode 100644
index 6431bcd907..0000000000
--- a/packages/core/src/components/next/Dropdown/Dropdown.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React, { useRef, forwardRef } from "react";
-import {
-  type BaseDropdownProps,
-  type DropdownMultiControllerProps,
-  type DropdownSingleControllerProps
-} from "./Dropdown.types";
-import useMergeRef from "../../../hooks/useMergeRef";
-import { type BaseItemData } from "../../BaseItem";
-import DropdownComboboxController from "./modes/DropdownComboboxController";
-import DropdownMultiComboboxController from "./modes/DropdownMultiComboboxController";
-import DropdownSelectController from "./modes/DropdownSelectController";
-import DropdownMultiSelectController from "./modes/DropdownMultiSelectController";
-
-const Dropdown = forwardRef(
-  <Item extends BaseItemData<Record<string, unknown>>>(
-    dropdownProps: BaseDropdownProps<Item>,
-    ref: React.ForwardedRef<HTMLDivElement>
-  ) => {
-    const isSearchable = Boolean(dropdownProps.searchable);
-
-    const dropdownInternalRef = useRef<HTMLDivElement>(null);
-    const dropdownMergedRef = useMergeRef(ref, dropdownInternalRef);
-
-    if (isMultiType(dropdownProps)) {
-      return isSearchable ? (
-        <DropdownMultiComboboxController {...dropdownProps} dropdownRef={dropdownMergedRef} />
-      ) : (
-        <DropdownMultiSelectController {...dropdownProps} dropdownRef={dropdownMergedRef} />
-      );
-    }
-
-    if (isSingleType(dropdownProps)) {
-      return isSearchable ? (
-        <DropdownComboboxController {...dropdownProps} dropdownRef={dropdownMergedRef} />
-      ) : (
-        <DropdownSelectController {...dropdownProps} dropdownRef={dropdownMergedRef} />
-      );
-    }
-
-    return null;
-  }
-);
-
-export default Dropdown as <Item extends BaseItemData<Record<string, unknown>>>(
-  props: BaseDropdownProps<Item> & { ref?: React.ForwardedRef<HTMLDivElement> }
-) => React.ReactElement;
-
-function isMultiType(dropdownProps: BaseDropdownProps<any>): dropdownProps is DropdownMultiControllerProps<any> {
-  return dropdownProps.multi;
-}
-
-function isSingleType(dropdownProps: BaseDropdownProps<any>): dropdownProps is DropdownSingleControllerProps<any> {
-  return !dropdownProps.multi;
-}
diff --git a/packages/core/src/components/next/Dropdown/Dropdown.types.ts b/packages/core/src/components/next/Dropdown/Dropdown.types.ts
deleted file mode 100644
index 50d2e7a355..0000000000
--- a/packages/core/src/components/next/Dropdown/Dropdown.types.ts
+++ /dev/null
@@ -1,292 +0,0 @@
-import type React from "react";
-import { type DropdownListGroup } from "./components/DropdownBaseList/DropdownBaseList.types";
-import { type VibeComponentProps } from "../../../types";
-import { type BaseItemData } from "../../BaseItem";
-import { type TooltipProps } from "@vibe/tooltip";
-
-export type DropdownOption<Item = Record<string, unknown>> = BaseItemData<Item>;
-export type DropdownGroupOption<Item = Record<string, unknown>> = DropdownListGroup<Item>[] | BaseItemData<Item>[];
-
-interface MultiSelectSpecifics<Item extends BaseItemData<Record<string, unknown>>> {
-  /**
-   * If true, the dropdown allows multiple selections.
-   */
-  multi: true;
-  /*
-   * If true, the dropdown allows multiple lines of selected items.
-   */
-  multiline?: boolean;
-  /**
-   * Callback fired when an option is removed in multi-select mode. Only available when multi is true.
-   */
-  onOptionRemove?: (option: Item) => void;
-  /**
-   * The function to call to render the selected value on single select mode.
-   */
-  valueRenderer?: never;
-  /**
-   * The default selected values for multi-select.
-   */
-  defaultValue?: Item[];
-  /**
-   * The controlled selected values for multi-select.
-   */
-  value?: Item[];
-  /**
-   * Callback fired when the selected values change in multi-select mode.
-   */
-  onChange?: (options: Item[]) => void;
-  /**
-   * Minimum number of selected chips to always show before overflowing to the counter.
-   */
-  minVisibleCount?: number;
-}
-
-interface SingleSelectSpecifics<Item extends BaseItemData<Record<string, unknown>>> {
-  /**
-   * If true, the dropdown allows multiple selections. Defaults to false.
-   */
-  multi?: false;
-  /**
-   * If true, the dropdown allows multiple lines of selected items. (Not available for single select)
-   */
-  multiline?: never;
-  /**
-   * Callback fired when an option is removed in multi-select mode. (Not available for single select)
-   */
-  onOptionRemove?: never;
-  /**
-   * The function to call to render the selected value on single select mode.
-   */
-  valueRenderer?: (option: Item) => React.ReactNode;
-  /**
-   * The default selected value for single-select.
-   */
-  defaultValue?: Item;
-  /**
-   * The controlled selected value for single-select.
-   */
-  value?: Item;
-  /**
-   * Callback fired when the selected value changes in single-select mode.
-   */
-  onChange?: (option: Item) => void;
-  /**
-   * Minimum number of selected chips to always show before overflowing to the counter. (Not available for single select)
-   */
-  minVisibleCount?: never;
-}
-
-type BoxModeConstraint =
-  | {
-      /**
-       * If true, the dropdown is searchable.
-       */
-      searchable?: false;
-      /**
-       * If true, the dropdown menu is displayed inline without a popup/dialog.
-       */
-      boxMode?: false;
-    }
-  | {
-      /**
-       * If true, the dropdown is searchable.
-       */
-      searchable: true;
-      /**
-       * If true, the dropdown menu is displayed inline without a popup/dialog.
-       */
-      boxMode?: boolean;
-    };
-
-export type BaseDropdownProps<Item extends BaseItemData<Record<string, unknown>>> = VibeComponentProps &
-  BoxModeConstraint & {
-    /**
-     * The list of options available in the list.
-     */
-    options: DropdownGroupOption<Item>;
-    /**
-     * Props to be passed to the Tooltip component that wraps the dropdown.
-     */
-    tooltipProps?: Partial<TooltipProps>;
-    /**
-     * If true, displays dividers between grouped options.
-     */
-    withGroupDivider?: boolean;
-    /**
-     * If true, makes the group title sticky.
-     */
-    stickyGroupTitle?: boolean;
-    /**
-     * The size of the dropdown.
-     */
-    size?: DropdownSizes;
-    /**
-     * The direction of the dropdown.
-     */
-    dir?: DropdownDirection;
-    /**
-     * If true, the dropdown has no visible border by default, but shows border on hover, focus, and active states.
-     */
-    borderless?: boolean;
-    /**
-     * The function to call to render an option.
-     */
-    optionRenderer?: (option: Item) => React.ReactNode;
-    /**
-     * The function to call to render the menu.
-     */
-    menuRenderer?: (props: {
-      children: React.ReactNode;
-      filteredOptions: DropdownListGroup<Item>[];
-      selectedItems: Item[];
-      getItemProps: (options: any) => Record<string, unknown>;
-    }) => React.ReactNode;
-    /**
-     * The message to display when there are no options.
-     */
-    noOptionsMessage?: string | React.ReactNode;
-    /**
-     * The placeholder to display when the dropdown is empty.
-     */
-    placeholder?: string;
-    /**
-     * If true, the dropdown is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * If true, the dropdown is read only.
-     */
-    readOnly?: boolean;
-    /**
-     * If true, the dropdown is in an error state.
-     */
-    error?: boolean;
-    /**
-     * The helper text to display below the dropdown.
-     */
-    helperText?: string;
-    /**
-     * If true, the dropdown is required.
-     */
-    required?: boolean;
-    /**
-     * The label to display above the dropdown.
-     */
-    label?: string;
-    /**
-     * The ARIA label for the dropdown.
-     */
-    ariaLabel?: string;
-    /**
-     * The ARIA label for the dropdown input.
-     */
-    inputAriaLabel?: string;
-    /**
-     * The ARIA label for the menu container.
-     */
-    menuAriaLabel?: string;
-    /**
-     * The ARIA label for the clear button.
-     */
-    clearAriaLabel?: string;
-    /**
-     * The current value of the input field.
-     */
-    inputValue?: string;
-    /**
-     * The maximum height of the dropdown menu.
-     */
-    maxMenuHeight?: number;
-    /**
-     * If true, controls the menu open state.
-     */
-    isMenuOpen?: boolean;
-    /**
-     * If true, closes the menu when an option is selected.
-     */
-    closeMenuOnSelect?: boolean;
-    /**
-     * If true, the dropdown menu will be auto focused.
-     */
-    autoFocus?: boolean;
-    /**
-     * If true, the dropdown will have a clear button.
-     */
-    clearable?: boolean;
-    /**
-     * Callback fired when the dropdown loses focus.
-     */
-    onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;
-    /**
-     * Callback fired when the clear button is clicked.
-     */
-    onClear?: () => void;
-    /**
-     * Callback fired when the dropdown gains focus.
-     */
-    onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;
-    /**
-     * Callback fired when the dropdown input value changes.
-     */
-    onInputChange?: (input: string | null) => void;
-    /**
-     * Callback fired when a key is pressed inside the dropdown.
-     */
-    onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
-    /**
-     * Callback fired when the dropdown menu opens.
-     */
-    onMenuOpen?: () => void;
-    /**
-     * Callback fired when the dropdown menu closes.
-     */
-    onMenuClose?: () => void;
-    /**
-     * Callback fired when an option is selected.
-     */
-    onOptionSelect?: (option: Item) => void;
-    /**
-     * Callback fired when scrolling inside the dropdown.
-     */
-    onScroll?: (event: React.UIEvent<HTMLUListElement>) => void;
-    /**
-     * A function to customize the filtering of options.
-     * It receives an option and the current input value, and should return true if the option should be included, false otherwise.
-     */
-    filterOption?: (option: Item, inputValue: string) => boolean;
-    /**
-     * If false, selected options will be hidden from the list. Defaults to true.
-     */
-    showSelectedOptions?: boolean;
-    /**
-     * The class name to be applied to the menu wrapper.
-     */
-    menuWrapperClassName?: string;
-    /**
-     * If true, displays a loading indicator in the dropdown controls.
-     */
-    loading?: boolean;
-  } & (MultiSelectSpecifics<Item> | SingleSelectSpecifics<Item>);
-
-export type DropdownSizes = "small" | "medium" | "large";
-
-export type DropdownDirection = "ltr" | "rtl" | "auto";
-
-export type DropdownMultiControllerProps<Item extends BaseItemData<Record<string, unknown>>> = Omit<
-  BaseDropdownProps<Item>,
-  keyof MultiSelectSpecifics<Item> | keyof BoxModeConstraint
-> &
-  BoxModeConstraint &
-  MultiSelectSpecifics<Item> & {
-    dropdownRef: React.Ref<HTMLDivElement>;
-  };
-
-export type DropdownSingleControllerProps<Item extends BaseItemData<Record<string, unknown>>> = Omit<
-  BaseDropdownProps<Item>,
-  keyof SingleSelectSpecifics<Item> | keyof BoxModeConstraint
-> &
-  BoxModeConstraint &
-  SingleSelectSpecifics<Item> & {
-    dropdownRef: React.Ref<HTMLDivElement>;
-  };
diff --git a/packages/core/src/components/next/Dropdown/index.ts b/packages/core/src/components/next/Dropdown/index.ts
deleted file mode 100644
index 6184c2b9d0..0000000000
--- a/packages/core/src/components/next/Dropdown/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as Dropdown } from "./Dropdown";
-
-export * from "./Dropdown.types";
diff --git a/packages/core/src/components/next/Dropdown/utils/dropdown-modifiers.ts b/packages/core/src/components/next/Dropdown/utils/dropdown-modifiers.ts
deleted file mode 100644
index f9b1e924c9..0000000000
--- a/packages/core/src/components/next/Dropdown/utils/dropdown-modifiers.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { type Modifier } from "react-popper";
-
-export const matchWidthModifier: Modifier<any>[] = [
-  {
-    name: "matchWidth",
-    enabled: true,
-    phase: "beforeWrite",
-    requires: ["computeStyles"],
-    fn: ({ state }) => {
-      if (state.rects && state.rects.reference) {
-        state.styles.popper.width = `${state.rects.reference.width}px`;
-      }
-    }
-  }
-];
diff --git a/packages/core/src/components/next/List/List.tsx b/packages/core/src/components/next/List/List.tsx
index b160f5af8b..fe0be31fb1 100644
--- a/packages/core/src/components/next/List/List.tsx
+++ b/packages/core/src/components/next/List/List.tsx
@@ -13,8 +13,8 @@ const List = forwardRef(
       id,
       as = "ul",
       children,
-      ariaLabel,
-      ariaDescribedBy,
+      "aria-label": ariaLabel,
+      "aria-describedby": ariaDescribedBy,
       role = "listbox",
       size = "small",
       maxHeight,
@@ -31,8 +31,8 @@ const List = forwardRef(
         id={id}
         className={cx(styles.list, className)}
         as={as}
-        ariaLabel={ariaLabel}
-        ariaDescribedBy={ariaDescribedBy}
+        aria-label={ariaLabel}
+        aria-describedby={ariaDescribedBy}
         role={role}
         size={size}
         maxHeight={maxHeight}
diff --git a/packages/core/src/components/next/List/List.types.ts b/packages/core/src/components/next/List/List.types.ts
index 8c96066f86..b6d29e2667 100644
--- a/packages/core/src/components/next/List/List.types.ts
+++ b/packages/core/src/components/next/List/List.types.ts
@@ -15,13 +15,13 @@ export interface ListProps extends VibeComponentProps {
    */
   children?: ReactElement | ReactElement[];
   /**
-   * The ARIA label describing the list. Required for accessibility when ariaDescribedBy is not provided.
+   * The ARIA label describing the list. Required for accessibility when aria-describedby is not provided.
    */
-  ariaLabel?: string;
+  "aria-label"?: string;
   /**
    * The ID of an element that describes the list.
    */
-  ariaDescribedBy?: string;
+  "aria-describedby"?: string;
   /**
    * The ARIA role of the list. Defaults to "listbox".
    */
diff --git a/packages/core/src/components/next/List/ListTitle/ListTitle.module.scss b/packages/core/src/components/next/List/ListTitle/ListTitle.module.scss
index 9de7295acb..f5f4868649 100644
--- a/packages/core/src/components/next/List/ListTitle/ListTitle.module.scss
+++ b/packages/core/src/components/next/List/ListTitle/ListTitle.module.scss
@@ -1,4 +1,4 @@
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 
 .listTitle {
   @include smoothing-text;
@@ -7,15 +7,15 @@
 
 // Inline padding matches BaseItem for alignment
 .small {
-  padding: var(--spacing-medium) var(--spacing-small) var(--spacing-small);
+  padding: var(--space-16) var(--space-8) var(--space-8);
 }
 
 .medium {
-  padding: var(--spacing-medium) 12px var(--spacing-small);
+  padding: var(--space-16) 12px var(--space-8);
 }
 
 .large {
-  padding: var(--spacing-medium) 12px var(--spacing-small);
+  padding: var(--space-16) 12px var(--space-8);
 }
 
 .sticky {
diff --git a/packages/core/src/components/next/List/__tests__/List.test.tsx b/packages/core/src/components/next/List/__tests__/List.test.tsx
index c11ebecf9d..40f9e7aaec 100644
--- a/packages/core/src/components/next/List/__tests__/List.test.tsx
+++ b/packages/core/src/components/next/List/__tests__/List.test.tsx
@@ -7,7 +7,7 @@ import { type ListProps } from "../List.types";
 
 function renderList(props?: Partial<ListProps>) {
   return render(
-    <List ariaLabel="Test List" {...props}>
+    <List aria-label="Test List" {...props}>
       <ListItem label="Item 1" value="1" />
       <ListItem label="Item 2" value="2" />
       <ListItem label="Item 3" value="3" />
@@ -36,7 +36,7 @@ describe("List (next)", () => {
 
     it("should render with custom element type", () => {
       render(
-        <List as="ol" ariaLabel="Ordered List">
+        <List as="ol" aria-label="Ordered List">
           <ListItem label="Item 1" value="1" />
         </List>
       );
@@ -52,7 +52,7 @@ describe("List (next)", () => {
 
   describe("accessibility", () => {
     it("should have correct aria-label", () => {
-      renderList({ ariaLabel: "Custom Label" });
+      renderList({ "aria-label": "Custom Label" });
       expect(screen.getByLabelText("Custom Label")).toBeInTheDocument();
     });
 
@@ -65,7 +65,7 @@ describe("List (next)", () => {
       render(
         <>
           <span id="description">List description</span>
-          <List ariaLabel="Test" ariaDescribedBy="description">
+          <List aria-label="Test" aria-describedby="description">
             <ListItem label="Item 1" value="1" />
           </List>
         </>
@@ -81,7 +81,7 @@ describe("List (next)", () => {
 
     it("should support custom role", () => {
       render(
-        <List ariaLabel="Menu" role="menu">
+        <List aria-label="Menu" role="menu">
           <ListItem label="Action 1" value="1" />
           <ListItem label="Action 2" value="2" />
         </List>
@@ -94,7 +94,7 @@ describe("List (next)", () => {
 
     it("should support list role", () => {
       render(
-        <List ariaLabel="Navigation" role="list">
+        <List aria-label="Navigation" role="list">
           <ListItem label="Link 1" value="1" />
           <ListItem label="Link 2" value="2" />
         </List>
@@ -208,7 +208,7 @@ describe("List (next)", () => {
   describe("sizes", () => {
     it("should render with small size", () => {
       render(
-        <List ariaLabel="Small list" size="small">
+        <List aria-label="Small list" size="small">
           <ListItem label="Item 1" value="1" />
         </List>
       );
@@ -217,7 +217,7 @@ describe("List (next)", () => {
 
     it("should render with medium size (default)", () => {
       render(
-        <List ariaLabel="Medium list" size="medium">
+        <List aria-label="Medium list" size="medium">
           <ListItem label="Item 1" value="1" />
         </List>
       );
@@ -226,7 +226,7 @@ describe("List (next)", () => {
 
     it("should render with large size", () => {
       render(
-        <List ariaLabel="Large list" size="large">
+        <List aria-label="Large list" size="large">
           <ListItem label="Item 1" value="1" />
         </List>
       );
@@ -237,7 +237,7 @@ describe("List (next)", () => {
   describe("with selected items", () => {
     it("should support selected items", () => {
       render(
-        <List ariaLabel="Test List">
+        <List aria-label="Test List">
           <ListItem label="Item 1" value="1" />
           <ListItem label="Item 2" value="2" selected />
           <ListItem label="Item 3" value="3" />
@@ -252,7 +252,7 @@ describe("List (next)", () => {
   describe("with disabled items", () => {
     it("should support disabled items", () => {
       render(
-        <List ariaLabel="Test List">
+        <List aria-label="Test List">
           <ListItem label="Item 1" value="1" />
           <ListItem label="Disabled Item" value="disabled" disabled />
           <ListItem label="Item 2" value="2" />
@@ -284,7 +284,7 @@ describe("List with wrapped items", () => {
 
   it("should render items wrapped in a custom component", () => {
     render(
-      <List ariaLabel="Test List">
+      <List aria-label="Test List">
         <ListItem label="Item 1" value="1" />
         <CustomWrapper>
           <ListItem label="Wrapped Item" value="wrapped" />
@@ -300,7 +300,7 @@ describe("List with wrapped items", () => {
 
   it("should include wrapped items in keyboard navigation", async () => {
     render(
-      <List ariaLabel="Test List">
+      <List aria-label="Test List">
         <ListItem label="Item 1" value="1" />
         <CustomWrapper>
           <ListItem label="Wrapped Item" value="wrapped" />
@@ -327,7 +327,7 @@ describe("List with wrapped items", () => {
   it("should support click on wrapped item", async () => {
     const onClick = vi.fn();
     render(
-      <List ariaLabel="Test List">
+      <List aria-label="Test List">
         <ListItem label="Item 1" value="1" />
         <CustomWrapper>
           <ListItem label="Wrapped Item" value="wrapped" onClick={onClick} />
@@ -341,7 +341,7 @@ describe("List with wrapped items", () => {
 
   it("should support selected state on wrapped item", () => {
     render(
-      <List ariaLabel="Test List">
+      <List aria-label="Test List">
         <ListItem label="Item 1" value="1" />
         <CustomWrapper>
           <ListItem label="Wrapped Item" value="wrapped" selected />
@@ -361,7 +361,7 @@ describe("List with wrapped items", () => {
     ];
 
     render(
-      <List ariaLabel="Test List">
+      <List aria-label="Test List">
         {items.map(item => (
           <ListItem key={item.value} label={item.label} value={item.value} />
         ))}
@@ -391,7 +391,7 @@ describe("ListItem", () => {
   describe("rendering", () => {
     it("should render with label", () => {
       render(
-        <List ariaLabel="Test">
+        <List aria-label="Test">
           <ListItem label="Test Label" />
         </List>
       );
@@ -403,7 +403,7 @@ describe("ListItem", () => {
     it("should call onClick when clicked", async () => {
       const onClick = vi.fn();
       render(
-        <List ariaLabel="Test">
+        <List aria-label="Test">
           <ListItem label="Clickable" onClick={onClick} />
         </List>
       );
@@ -415,7 +415,7 @@ describe("ListItem", () => {
     it("should not call onClick when disabled", async () => {
       const onClick = vi.fn();
       render(
-        <List ariaLabel="Test">
+        <List aria-label="Test">
           <ListItem label="Disabled" onClick={onClick} disabled />
         </List>
       );
@@ -427,7 +427,7 @@ describe("ListItem", () => {
     it("should call onHover when mouse enters", async () => {
       const onHover = vi.fn();
       render(
-        <List ariaLabel="Test">
+        <List aria-label="Test">
           <ListItem label="Hoverable" onHover={onHover} />
         </List>
       );
@@ -439,7 +439,7 @@ describe("ListItem", () => {
     it("should call onHover when focused via tab", async () => {
       const onHover = vi.fn();
       render(
-        <List ariaLabel="Test">
+        <List aria-label="Test">
           <ListItem label="Focusable" onHover={onHover} />
         </List>
       );
@@ -452,7 +452,7 @@ describe("ListItem", () => {
     it("should not call onHover when disabled", async () => {
       const onHover = vi.fn();
       render(
-        <List ariaLabel="Test">
+        <List aria-label="Test">
           <ListItem label="Disabled" onHover={onHover} disabled />
         </List>
       );
diff --git a/packages/core/src/components/next/index.ts b/packages/core/src/components/next/index.ts
index cbd38e225e..870e1dcb49 100644
--- a/packages/core/src/components/next/index.ts
+++ b/packages/core/src/components/next/index.ts
@@ -1,6 +1 @@
-export * from "./AttentionBox";
-export * from "./Dropdown";
-export * from "./DatePicker";
 export * from "./List";
-export * from "../../components/Modal";
-export * from "./Dialog";
diff --git a/packages/core/src/constants/keyCodes.js b/packages/core/src/constants/keyCodes.ts
similarity index 100%
rename from packages/core/src/constants/keyCodes.js
rename to packages/core/src/constants/keyCodes.ts
diff --git a/packages/core/src/helpers/textManipulations.ts b/packages/core/src/helpers/textManipulations.ts
index 9375204ec8..8e52f0c8e5 100644
--- a/packages/core/src/helpers/textManipulations.ts
+++ b/packages/core/src/helpers/textManipulations.ts
@@ -7,7 +7,7 @@ const DEFAULT_LOCAL = "en-US";
 function validateLocalSupported(local: string) {
   let isLocalSupported;
   try {
-    const options = { localeMatcher: "lookup" };
+    const options = { localeMatcher: "lookup" as const };
     isLocalSupported = !!Intl.NumberFormat.supportedLocalesOf(convertToArray(local), options).length;
   } catch (err) {
     isLocalSupported = false;
diff --git a/packages/core/src/hooks/__tests__/useMergeRefs.test.tsx b/packages/core/src/hooks/__tests__/useMergeRefs.test.tsx
deleted file mode 100644
index cf9f1f0bef..0000000000
--- a/packages/core/src/hooks/__tests__/useMergeRefs.test.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-import { vi, beforeEach, afterEach, describe, it, expect, type Mock } from "vitest";
-import React, { forwardRef, useRef, useEffect, type RefObject, createRef } from "react";
-import { fireEvent, render, cleanup, act, screen, waitFor } from "@testing-library/react";
-import useMergeRefs from "../useMergeRefs";
-
-describe("useMergeRefs", () => {
-  let Component: React.ElementType;
-  let internalRef: RefObject<any>;
-
-  describe("set ref", () => {
-    beforeEach(() => {
-      Component = forwardRef((props, ref) => {
-        internalRef = useRef(null);
-        const mergedRef = useMergeRefs({ refs: [ref, internalRef] });
-        return (
-          <div {...props} ref={mergedRef}>
-            Lorem ipsum dolor sit amet
-          </div>
-        );
-      });
-    });
-
-    afterEach(() => {
-      cleanup();
-    });
-
-    it("should be able to set internal ref", () => {
-      render(<Component />);
-      waitFor(() => {
-        expect(internalRef.current.innerText).toEqual("Lorem ipsum dolor sit amet");
-      });
-    });
-
-    it("should be able to set object prop ref", () => {
-      const propRef = createRef<HTMLElement>();
-      expect(internalRef.current).toBeNull();
-      render(<Component ref={propRef} />);
-      waitFor(() => {
-        expect(internalRef.current.innerText).toEqual("Lorem ipsum dolor sit amet");
-        expect(propRef.current.innerText).toEqual("Lorem ipsum dolor sit amet");
-      });
-    });
-
-    it("should be able to set function prop ref", () => {
-      const state: {
-        _ref: HTMLElement;
-      } = {
-        _ref: undefined
-      };
-      const propRef = (ref: HTMLElement) => {
-        state._ref = ref;
-      };
-
-      render(<Component ref={propRef} />);
-      waitFor(() => {
-        expect(internalRef.current.innerText).toEqual("Lorem ipsum dolor sit amet");
-        expect(state._ref.innerText).toEqual("Lorem ipsum dolor sit amet");
-      });
-    });
-  });
-
-  describe("call event listeners based on refs", () => {
-    let innerRefCallbackStub: Mock;
-    let outerRefCallbackStub: Mock;
-
-    beforeEach(() => {
-      innerRefCallbackStub = vi.fn();
-      outerRefCallbackStub = vi.fn();
-
-      Component = forwardRef((props, ref) => {
-        internalRef = useRef();
-
-        const mergedRef = useMergeRefs({ refs: [ref, internalRef] });
-
-        useEffect(() => {
-          internalRef.current.addEventListener("click", innerRefCallbackStub);
-          return () => {
-            internalRef.current.removeEventListener("click", innerRefCallbackStub);
-          };
-        }, []);
-
-        return (
-          <div {...props} ref={mergedRef}>
-            Lorem ipsum dolor sit amet
-          </div>
-        );
-      });
-    });
-
-    afterEach(() => {
-      cleanup();
-    });
-
-    it("should not call any listeners if element didn't had click event", () => {
-      render(<Component />);
-      waitFor(() => {
-        expect(innerRefCallbackStub.mock.calls.length).toBe(0);
-      });
-    });
-
-    it("should call click listener based on internal ref if element has been clicked", () => {
-      render(<Component />);
-      const element = screen.getByText("Lorem ipsum dolor sit amet");
-      act(() => {
-        fireEvent.click(element);
-      });
-      waitFor(() => {
-        expect(innerRefCallbackStub.mock.calls.length).toBe(1);
-      });
-    });
-
-    it("should call both listeners if ref prop was passed and element has been clicked", () => {
-      const propRef = createRef<HTMLElement>();
-      render(<Component ref={propRef} />);
-      propRef.current.addEventListener("click", outerRefCallbackStub);
-      const element = screen.getByText("Lorem ipsum dolor sit amet");
-      act(() => {
-        fireEvent.click(element);
-      });
-      propRef.current.removeEventListener("click", outerRefCallbackStub);
-      waitFor(() => {
-        expect(innerRefCallbackStub.mock.calls.length).toBe(1);
-        expect(outerRefCallbackStub.mock.calls.length).toBe(0);
-      });
-    });
-
-    it("should not call any listener if ref prop was passed and element has not been clicked", () => {
-      const propRef = createRef<HTMLElement>();
-      render(<Component ref={propRef} />);
-      propRef.current.addEventListener("click", outerRefCallbackStub);
-      propRef.current.removeEventListener("click", outerRefCallbackStub);
-      waitFor(() => {
-        expect(innerRefCallbackStub.mock.calls.length).toBe(0);
-        expect(outerRefCallbackStub.mock.calls.length).toBe(0);
-      });
-    });
-  });
-});
diff --git a/packages/core/src/hooks/index.ts b/packages/core/src/hooks/index.ts
index c73fb98f44..33b672febd 100644
--- a/packages/core/src/hooks/index.ts
+++ b/packages/core/src/hooks/index.ts
@@ -6,14 +6,12 @@ export { default as useAfterFirstRender } from "./useAfterFirstRender";
 export { default as useTimeout } from "./useTimeout";
 export { default as usePrevious } from "./usePrevious";
 export { default as useSetFocus } from "./useSetFocus";
-export { default as useMergeRefs } from "./useMergeRefs";
 export { default as useIsMouseOver } from "./useIsMouseOver";
 export { default as useHover } from "./useHover/useHover";
 export { default as useGridKeyboardNavigation } from "./useGridKeyboardNavigation/useGridKeyboardNavigation";
 export { default as useActiveDescendantListFocus } from "./useActiveDescendantListFocus";
 export { default as useMediaQuery } from "./useMediaQuery";
 export { default as useVibeMediaQuery } from "./useVibeMediaQuery";
-export { default as useListenFocusTriggers } from "./useListenFocusTriggers";
 export { default as useSwitch } from "./useSwitch";
 export { default as useElementsOverflowingIndex } from "./useElementsOverflowingIndex";
 export { default as useWizard } from "./useWizard/useWizard";
diff --git a/packages/core/src/hooks/useActiveDescendantListFocus/__tests__/useActiveDescendantListFocus.test.js b/packages/core/src/hooks/useActiveDescendantListFocus/__tests__/useActiveDescendantListFocus.test.ts
similarity index 98%
rename from packages/core/src/hooks/useActiveDescendantListFocus/__tests__/useActiveDescendantListFocus.test.js
rename to packages/core/src/hooks/useActiveDescendantListFocus/__tests__/useActiveDescendantListFocus.test.ts
index 1145a1ba52..31a8a6140a 100644
--- a/packages/core/src/hooks/useActiveDescendantListFocus/__tests__/useActiveDescendantListFocus.test.js
+++ b/packages/core/src/hooks/useActiveDescendantListFocus/__tests__/useActiveDescendantListFocus.test.ts
@@ -169,7 +169,7 @@ function runListUnitTest({ isHorizontal, defaultVisualFocusFirstIndex }) {
       userEvent.keyboard(oppositeMoveForwardKey);
     });
 
-    let before = result.current.visualFocusItemIndex;
+    const before = result.current.visualFocusItemIndex;
     act(() => {
       // move visual focus to first item
       userEvent.keyboard(oppositeMoveForwardKey);
@@ -200,14 +200,14 @@ const combineFeatures = features => {
   const combinations = [];
   // all closed
   const allClosedComb = {};
-  for (let feature of features) {
+  for (const feature of features) {
     allClosedComb[feature] = false;
   }
   combinations.push(allClosedComb);
 
   // all open
   const allOpenComb = {};
-  for (let feature of features) {
+  for (const feature of features) {
     allOpenComb[feature] = true;
   }
   combinations.push(allOpenComb);
diff --git a/packages/core/src/hooks/useActiveDescendantListFocus/index.ts b/packages/core/src/hooks/useActiveDescendantListFocus/index.ts
index ae8daa0cfb..e86e55bc1a 100644
--- a/packages/core/src/hooks/useActiveDescendantListFocus/index.ts
+++ b/packages/core/src/hooks/useActiveDescendantListFocus/index.ts
@@ -109,12 +109,6 @@ function useActiveDescendantListFocus({
 
   useCleanVisualFocusOnBlur({ focusedElementRef, visualFocusItemIndex, setVisualFocusItemIndex });
 
-  // this callback function is not needed anymore (the developer does not need to replace  the element's on click with this callback).
-  // TODO: [breaking] remove backward compatibility support
-  const backwardCompatibilityCreateOnClickCallback = useCallback(
-    (itemIndex: number) => (event: React.KeyboardEvent | React.MouseEvent) => onItemClick(event, itemIndex),
-    [onItemClick]
-  );
   return {
     visualFocusItemIndex: triggeredByKeyboard.current ? visualFocusItemIndex : undefined,
     visualFocusItemId: triggeredByKeyboard.current ? visualFocusItemId : undefined,
@@ -122,10 +116,6 @@ function useActiveDescendantListFocus({
       "aria-activedescendant": triggeredByKeyboard.current ? visualFocusItemId : undefined,
       role: focusedElementRole
     },
-    // this callback function is not needed anymore (the developer does not need to replace  the element's on click with this callback).
-    // TODO: [breaking] remove backward compatibility support
-    onItemClickCallback: onItemClick,
-    createOnItemClickCallback: backwardCompatibilityCreateOnClickCallback,
     setVisualFocusItemId
   };
 }
diff --git a/packages/core/src/hooks/useGridKeyboardNavigation/__tests__/gridKeyboardNavigationHelper.test.js b/packages/core/src/hooks/useGridKeyboardNavigation/__tests__/gridKeyboardNavigationHelper.test.ts
similarity index 100%
rename from packages/core/src/hooks/useGridKeyboardNavigation/__tests__/gridKeyboardNavigationHelper.test.js
rename to packages/core/src/hooks/useGridKeyboardNavigation/__tests__/gridKeyboardNavigationHelper.test.ts
diff --git a/packages/core/src/hooks/useGridKeyboardNavigation/__tests__/useGridKeyboardNavigation.test.js b/packages/core/src/hooks/useGridKeyboardNavigation/__tests__/useGridKeyboardNavigation.test.ts
similarity index 100%
rename from packages/core/src/hooks/useGridKeyboardNavigation/__tests__/useGridKeyboardNavigation.test.js
rename to packages/core/src/hooks/useGridKeyboardNavigation/__tests__/useGridKeyboardNavigation.test.ts
diff --git a/packages/core/src/hooks/useKeyEvent/index.ts b/packages/core/src/hooks/useKeyEvent/index.ts
index 2eb4bb1212..532148dd1a 100644
--- a/packages/core/src/hooks/useKeyEvent/index.ts
+++ b/packages/core/src/hooks/useKeyEvent/index.ts
@@ -1,6 +1,6 @@
+import type React from "react";
 import { type RefObject, useCallback, useRef } from "react";
 import useEventListener from "../useEventListener";
-import { type GenericEventCallback } from "../../types/events";
 import { isClient } from "../../utils/ssr-utils";
 
 const CTRL_OR_META = "ctrlOrMetaKey";
@@ -33,11 +33,10 @@ export interface UseKeyEventArgs {
    * The list of keys that should trigger the event.
    */
   keys: KeyboardEvent["key"][];
-  // TODO: [breaking] change to keyboard event
   /**
    * Callback fired when a specified key is pressed.
    */
-  callback: GenericEventCallback;
+  callback: (event: KeyboardEvent | React.KeyboardEvent) => void;
   /**
    * Modifier key that must be pressed along with the specified key.
    */
diff --git a/packages/core/src/hooks/useMergeRefs.ts b/packages/core/src/hooks/useMergeRefs.ts
deleted file mode 100644
index ed54aaeac1..0000000000
--- a/packages/core/src/hooks/useMergeRefs.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { type LegacyRef, type MutableRefObject, useMemo } from "react";
-
-/*
- * const Component = React.forwardRef((props, ref) => {
- *   const internalRef = React.useRef();
- *   const mergedRef = useMergeRefs({ refs: [ref, internalRef] });
- *   return <div {...props} ref={mergedRef} />;
- * });
- */
-
-// TODO: [breaking] deprecate / replace with useMergeRef in next major version - https://monday.monday.com/boards/3532714909/pulses/5657904659
-/**
- * Returns a single ref callback that merges multiple ref callbacks
- * @deprecated - for internal usage - use `useMergeRef` hook instead
- * @param refs
- */
-export default function useMergeRefs<T = any>({ refs = [] }: { refs: Array<MutableRefObject<T> | LegacyRef<T>> }) {
-  return useMemo(() => {
-    if (refs.every(ref => ref === null)) return null;
-
-    return (node: HTMLElement) => {
-      refs.forEach(ref => {
-        if (ref) assignRef(ref, node);
-      });
-    };
-  }, [refs]);
-}
-
-function assignRef(ref: MutableRefObject<any> | LegacyRef<any>, value: HTMLElement) {
-  if (ref === null) return;
-
-  if (typeof ref === "function") {
-    ref(value);
-    return;
-  }
-
-  try {
-    (ref as MutableRefObject<any>).current = value;
-  } catch (error) {
-    console.error(error);
-    throw new Error(`Cannot assign value '${value}' to ref '${ref}'`);
-  }
-}
diff --git a/packages/core/src/hooks/useSetFocus/__tests__/useSetFocus.test.js b/packages/core/src/hooks/useSetFocus/__tests__/useSetFocus.test.ts
similarity index 100%
rename from packages/core/src/hooks/useSetFocus/__tests__/useSetFocus.test.js
rename to packages/core/src/hooks/useSetFocus/__tests__/useSetFocus.test.ts
diff --git a/packages/core/src/services/themes.js b/packages/core/src/services/themes.ts
similarity index 72%
rename from packages/core/src/services/themes.js
rename to packages/core/src/services/themes.ts
index 089bab1174..6110152ace 100644
--- a/packages/core/src/services/themes.js
+++ b/packages/core/src/services/themes.ts
@@ -8,16 +8,17 @@ function isThemesSupported() {
   }
 }
 
-export function getCSSVar(varName, fallback) {
+export function getCSSVar(varName: string, fallback?: string) {
   const fb = fallback ? `, ${fallback}` : "";
   if (isThemesSupported()) {
     return `var(--${varName}${fb})`;
   }
 }
 
-export const getComputedVarColor = (elem, cssVar) => getComputedStyle(elem).getPropertyValue(`--${cssVar}`);
+export const getComputedVarColor = (elem: Element, cssVar: string) =>
+  getComputedStyle(elem).getPropertyValue(`--${cssVar}`);
 
-export function hexToRgb(hex) {
+export function hexToRgb(hex: string) {
   if (hex.startsWith("#")) {
     hex = hex.substring(1);
   }
diff --git a/packages/core/src/services/virtualized-service.js b/packages/core/src/services/virtualized-service.ts
similarity index 63%
rename from packages/core/src/services/virtualized-service.js
rename to packages/core/src/services/virtualized-service.ts
index 40d79382e6..689ce3f7fc 100644
--- a/packages/core/src/services/virtualized-service.js
+++ b/packages/core/src/services/virtualized-service.ts
@@ -1,7 +1,21 @@
 const LAST_ITEM_ID = "~~~lastItem~~~";
-const EMPTY_OBJECT = {};
-export const getNormalizedItems = (items, idGetter, sizeGetter) => {
-  const normalizedItems = {};
+const EMPTY_OBJECT: Record<string, never> = {};
+
+type NormalizedItem<T> = {
+  item: T;
+  index: number;
+  height: number;
+  size: number;
+  offsetTop: number;
+  offset: number;
+};
+
+type NormalizedItems<T> = Record<string, NormalizedItem<T>>;
+type IdGetter<T> = (item: T, index: number) => string;
+type SizeGetter<T> = (item: T, index: number) => number;
+
+export const getNormalizedItems = <T>(items: T[], idGetter: IdGetter<T>, sizeGetter: SizeGetter<T>) => {
+  const normalizedItems: NormalizedItems<T> = {};
   let offset = 0;
 
   const lastIndex = items.length - 1;
@@ -19,26 +33,32 @@ export const getNormalizedItems = (items, idGetter, sizeGetter) => {
   return normalizedItems;
 };
 
-export const isItemInView = (item, scrollTop, offsetHeight) => {
+export const isItemInView = (item: { offsetTop: number }, scrollTop: number, offsetHeight: number) => {
   const isItemUnderTheViewableArea = item.offsetTop > scrollTop + offsetHeight;
   const isItemAboveTheViewableArea = item.offsetTop < scrollTop;
 
   return !isItemUnderTheViewableArea && !isItemAboveTheViewableArea;
 };
 
-export const getMaxOffset = (offsetSize, normalizedItems) => {
+export const getMaxOffset = <T>(offsetSize: number, normalizedItems: NormalizedItems<T>) => {
   const lastItem = normalizedItems[LAST_ITEM_ID];
   if (!lastItem) return 0;
   const { size, offset } = lastItem;
   return offset + size - offsetSize; // max offset
 };
 
-export const easeInOutQuint = time => {
+export const easeInOutQuint = (time: number) => {
   let t = time;
   return t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t;
 };
 
-function findItemAtOffset(items, normalizedItems, idGetter, fromIndex, offset) {
+function findItemAtOffset<T>(
+  items: T[],
+  normalizedItems: NormalizedItems<T>,
+  idGetter: IdGetter<T>,
+  fromIndex: number,
+  offset: number
+) {
   for (let i = fromIndex; i < items.length; i++) {
     const itemId = idGetter(items[i], i);
     const normalizedItem = normalizedItems[itemId];
@@ -52,10 +72,15 @@ function findItemAtOffset(items, normalizedItems, idGetter, fromIndex, offset) {
 
 // for vertical layout - this returns true when vertical scrollbar visible
 // for horizontal layout - this returns true when horizontal scrollbar visible
-export const isLayoutDirectionScrollbarVisible = (items, normalizedItems, idGetter, componentSize) => {
+export const isLayoutDirectionScrollbarVisible = <T>(
+  items: T[],
+  normalizedItems: NormalizedItems<T>,
+  idGetter: IdGetter<T>,
+  componentSize: number
+) => {
   if (!componentSize) return false;
   const lastExistingItem = items[items.length - 1] || EMPTY_OBJECT;
-  const lastExistingItemId = idGetter(lastExistingItem, items.length - 1);
+  const lastExistingItemId = idGetter(lastExistingItem as T, items.length - 1);
   const normalizedItem = normalizedItems[lastExistingItemId];
   if (!normalizedItem) return false;
   const { offset: lastExistingItemIdOffset, size: lastExistingItemSize } = normalizedItems[lastExistingItemId];
@@ -64,29 +89,29 @@ export const isLayoutDirectionScrollbarVisible = (items, normalizedItems, idGett
   return isVisible;
 };
 
-function isEmptyObject(obj) {
+function isEmptyObject(obj: unknown) {
   return obj === EMPTY_OBJECT;
 }
 
-export const getOnItemsRenderedData = (
-  items,
-  normalizedItems,
-  idGetter,
-  visibleStartIndex,
-  visibleStopIndex,
-  listSize,
-  currentOffsetTop
+export const getOnItemsRenderedData = <T>(
+  items: T[],
+  normalizedItems: NormalizedItems<T>,
+  idGetter: IdGetter<T>,
+  visibleStartIndex: number,
+  visibleStopIndex: number,
+  listSize: number,
+  currentOffsetTop: number
 ) => {
   const firstVisibleItem = items[visibleStartIndex] || EMPTY_OBJECT;
   const secondVisibleItem = items[visibleStartIndex + 1] || EMPTY_OBJECT;
   const lastVisibleItem = items[visibleStopIndex] || EMPTY_OBJECT;
-  const firstItemId = isEmptyObject(firstVisibleItem) ? undefined : idGetter(firstVisibleItem, visibleStartIndex);
+  const firstItemId = isEmptyObject(firstVisibleItem) ? undefined : idGetter(firstVisibleItem as T, visibleStartIndex);
   const secondItemId = isEmptyObject(secondVisibleItem)
     ? undefined
-    : idGetter(secondVisibleItem, visibleStartIndex + 1);
-  const lastItemId = isEmptyObject(lastVisibleItem) ? undefined : idGetter(lastVisibleItem, visibleStopIndex);
+    : idGetter(secondVisibleItem as T, visibleStartIndex + 1);
+  const lastItemId = isEmptyObject(lastVisibleItem) ? undefined : idGetter(lastVisibleItem as T, visibleStopIndex);
   const centerOffset = currentOffsetTop + listSize / 2;
-  const { offsetTop: firstItemOffsetTop, height: firstItemHeight } = normalizedItems[firstItemId] || EMPTY_OBJECT;
+  const { offsetTop: firstItemOffsetTop, height: firstItemHeight } = normalizedItems[firstItemId!] || EMPTY_OBJECT;
   const firstItemOffsetEnd = firstItemOffsetTop + firstItemHeight;
   const centerItemId = findItemAtOffset(items, normalizedItems, idGetter, visibleStartIndex, centerOffset);
 
diff --git a/packages/core/src/style-imports.ts b/packages/core/src/style-imports.ts
index 8fd58b0242..2fb86dbc86 100644
--- a/packages/core/src/style-imports.ts
+++ b/packages/core/src/style-imports.ts
@@ -1 +1 @@
-import "monday-ui-style/dist/index.min.css";
+import "@vibe/style/dist/index.min.css";
diff --git a/packages/core/src/styles/typography.scss b/packages/core/src/styles/typography.scss
index 6f73372ef9..959e8234e3 100644
--- a/packages/core/src/styles/typography.scss
+++ b/packages/core/src/styles/typography.scss
@@ -1,6 +1,6 @@
 @use "sass:string";
-@import "~monday-ui-style/dist/mixins";
-@import "~monday-ui-style/dist/functions";
+@import "~@vibe/style/dist/mixins";
+@import "~@vibe/style/dist/functions";
 
 @mixin create-text-classes() {
   @include create-typography-classes($textClasses, text);
diff --git a/packages/core/src/styles/utilities/_utilities-settings.scss b/packages/core/src/styles/utilities/_utilities-settings.scss
index ca450c129c..68ae4c6f13 100644
--- a/packages/core/src/styles/utilities/_utilities-settings.scss
+++ b/packages/core/src/styles/utilities/_utilities-settings.scss
@@ -44,7 +44,7 @@ $utilities-modules: (
                 values: map.merge($utility-spacing-vars, (auto: auto)),
         ),
         "marginX": (
-                property: margin-right margin-left,
+                property: margin-inline,
                 class: mx,
                 values: map.merge($utility-spacing-vars, (auto: auto))
         ),
@@ -79,7 +79,7 @@ $utilities-modules: (
                 values: $utility-spacing-vars,
         ),
         "paddingX": (
-                property: padding-right padding-left,
+                property: padding-inline,
                 class: px,
                 values: $utility-spacing-vars,
         ),
diff --git a/packages/core/src/tests/constants.ts b/packages/core/src/tests/constants.ts
index f42a265f63..43cf7840d5 100644
--- a/packages/core/src/tests/constants.ts
+++ b/packages/core/src/tests/constants.ts
@@ -55,7 +55,7 @@ export enum ComponentDefaultTestId {
   BREADCRUMBS_BAR = "breadcrumbs-bar",
   BREADCRUMB_MENU = "breadcrumb-menu",
   BREADCRUMB_MENU_ITEM = "breadcrumb-menu-item",
-  LINEAR_PROGRESS_BAR = "linear-progress-bar",
+  PROGRESS_BAR = "progress-bar",
   BAR = "bar",
   BAR_PRIMARY = "bar-primary",
   BAR_SECONDARY = "bar-secondary",
@@ -105,21 +105,16 @@ export enum ComponentDefaultTestId {
   ICON = "icon",
   RESPONSIVE_LIST = "responsive-list",
   LIST = "list",
-  MODAL = "monday-dialog-container",
-  MODAL_OVERLAY = "monday-modal-overlay",
-  MODAL_CONTENT = "modal-content",
+  MODAL = "modal",
+  MODAL_OVERLAY = "modal-overlay",
   MODAL_HEADER = "modal-header",
-  MODAL_FOOTER_BUTTONS = "modal-footer-buttons",
-  MODAL_NEXT = "modal",
-  MODAL_NEXT_OVERLAY = "modal-overlay",
-  MODAL_NEXT_HEADER = "modal-header",
-  MODAL_NEXT_CLOSE_BUTTON = "modal-close-button",
-  MODAL_NEXT_CONTENT = "modal-content",
-  MODAL_NEXT_FOOTER = "modal-footer",
-  MODAL_NEXT_MEDIA = "modal-media",
-  MODAL_NEXT_BASIC_LAYOUT = "modal-basic-layout",
-  MODAL_NEXT_SIDE_BY_SIDE_LAYOUT = "modal-side-by-side-layout",
-  MODAL_NEXT_MEDIA_LAYOUT = "modal-media-layout",
+  MODAL_CLOSE_BUTTON = "modal-close-button",
+  MODAL_CONTENT = "modal-content",
+  MODAL_FOOTER = "modal-footer",
+  MODAL_MEDIA = "modal-media",
+  MODAL_BASIC_LAYOUT = "modal-basic-layout",
+  MODAL_SIDE_BY_SIDE_LAYOUT = "modal-side-by-side-layout",
+  MODAL_MEDIA_LAYOUT = "modal-media-layout",
   FORMATTED_NUMBER = "formatted-number",
   HIDDEN_TEXT = "hidden-text",
   DIALOG_CONTENT_CONTAINER = "dialog-content-container",
@@ -179,7 +174,7 @@ export enum ComponentVibeId {
   ICON_BUTTON = "IconButton",
   INFO = "Info",
   LABEL = "Label",
-  LINEAR_PROGRESS_BAR = "LinearProgressBar",
+  PROGRESS_BAR = "ProgressBar",
   LINK = "Link",
   LIST = "List",
   LOADER = "Loader",
diff --git a/packages/core/src/types/VibeComponent.ts b/packages/core/src/types/VibeComponent.ts
deleted file mode 100644
index efaca58d33..0000000000
--- a/packages/core/src/types/VibeComponent.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import type React from "react";
-
-type VibeComponent<T, P = HTMLElement> = React.ForwardRefExoticComponent<T & React.RefAttributes<P>>;
-
-export default VibeComponent;
diff --git a/packages/core/src/types/index.ts b/packages/core/src/types/index.ts
index e0f1582ab0..fd9a0f18f5 100644
--- a/packages/core/src/types/index.ts
+++ b/packages/core/src/types/index.ts
@@ -1,7 +1,5 @@
 export * from "./events";
-export type { default as VibeComponent } from "./VibeComponent";
 export type { default as VibeComponentProps } from "./VibeComponentProps";
-export * from "./withStaticProps";
 export * from "./ArrayLastElement";
 export * from "./SplitString";
 export * from "./ElementContent";
diff --git a/packages/core/src/types/withStaticProps.ts b/packages/core/src/types/withStaticProps.ts
deleted file mode 100644
index 318c86489a..0000000000
--- a/packages/core/src/types/withStaticProps.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { type FC, type ForwardRefExoticComponent, type RefAttributes } from "react";
-type Required<T> = {
-  [P in keyof T]-?: T[P];
-};
-
-export const withStaticProps = <Props, StaticProps, Ref = HTMLElement>(
-  component: ForwardRefExoticComponent<Props & RefAttributes<Ref>>,
-  staticProps: Required<StaticProps>
-) => Object.assign(component, staticProps);
-
-export const withStaticPropsWithoutForwardRef = <Props, StaticProps>(
-  component: FC<Props>,
-  staticProps: Required<StaticProps>
-) => Object.assign(component, staticProps);
diff --git a/packages/core/tsconfig.json b/packages/core/tsconfig.json
index b6b85197be..328079983b 100644
--- a/packages/core/tsconfig.json
+++ b/packages/core/tsconfig.json
@@ -4,7 +4,6 @@
     "module": "ESNext",
     "declaration": true,
     "sourceMap": true,
-    "allowJs": true,
     "rootDir": "src",
     "allowSyntheticDefaultImports": true,
     "plugins": [{ "name": "typescript-plugin-css-modules" }]
diff --git a/packages/core/vitest.config.ts b/packages/core/vitest.config.ts
index 69095f357f..b575ff87eb 100644
--- a/packages/core/vitest.config.ts
+++ b/packages/core/vitest.config.ts
@@ -34,7 +34,7 @@ export default defineConfig({
   },
   resolve: {
     alias: {
-      "~monday-ui-style": path.resolve(process.cwd(), "../../node_modules/monday-ui-style"),
+      "~@vibe/style": path.resolve(process.cwd(), "../../node_modules/@vibe/style"),
       "~": path.resolve(process.cwd(), "../../node_modules"),
       ...components
     }
diff --git a/packages/docs/.storybook/main.ts b/packages/docs/.storybook/main.ts
index f22ca66ce8..d03a7768cb 100644
--- a/packages/docs/.storybook/main.ts
+++ b/packages/docs/.storybook/main.ts
@@ -77,12 +77,12 @@ export default {
     return mergeConfig(config, {
       resolve: {
         alias: {
-          "monday-ui-style/dist/index.min.css": path.resolve(__dirname, "../../style/src/index.scss"),
-          "monday-ui-style/dist": path.resolve(__dirname, "../../style/src"),
+          "@vibe/style/dist/index.min.css": path.resolve(__dirname, "../../style/src/index.scss"),
+          "@vibe/style/dist": path.resolve(__dirname, "../../style/src"),
           // mixins workaround for vite:
-          "~monday-ui-style/dist/mixins": path.resolve(__dirname, "../../style/src/mixins"),
-          "~monday-ui-style/dist/functions": path.resolve(__dirname, "../../style/src/functions"),
-          "~monday-ui-style": path.resolve(__dirname, "../../style"),
+          "~@vibe/style/dist/mixins": path.resolve(__dirname, "../../style/src/mixins"),
+          "~@vibe/style/dist/functions": path.resolve(__dirname, "../../style/src/functions"),
+          "~@vibe/style": path.resolve(__dirname, "../../style"),
           "~vibe-storybook-components": path.resolve(__dirname, "../../storybook-blocks/src"),
           "@vibe/shared": path.resolve(__dirname, "../../shared/src"),
           "@vibe/core/interactionsTests": path.resolve(__dirname, "../../core/src/tests/interactions-utils.ts"),
diff --git a/packages/docs/.storybook/preview.tsx b/packages/docs/.storybook/preview.tsx
index e8da0013c0..ebeb646022 100644
--- a/packages/docs/.storybook/preview.tsx
+++ b/packages/docs/.storybook/preview.tsx
@@ -28,7 +28,7 @@ import CanvasWrapper from "../src/layout/canvas-wrapper/CanvasWrapper";
 import withGlobalStyle from "../src/decorators/withGlobalStyle/withGlobalStyle";
 import { PropsTable } from "../src/layout/props-table/props-table";
 import { RelatedComponentsDecorator } from "../src/layout/related-components/related-components-decorator";
-import "monday-ui-style/dist/index.min.css";
+import "@vibe/style/dist/index.min.css";
 import "vibe-storybook-components/dist/index.css";
 import { generateAutocompletion } from "storybook-addon-playground";
 import {
@@ -113,7 +113,7 @@ const preview: Preview = {
           "Welcome",
           "Getting Started",
           "Catalog",
-          "MCP [New]",
+          "MCP",
           "Playground",
           "Changelog",
           "Migration Guide",
diff --git a/packages/docs/.storybook/static/logo.svg b/packages/docs/.storybook/static/logo.svg
index 6038367495..53b3ca5a74 100644
--- a/packages/docs/.storybook/static/logo.svg
+++ b/packages/docs/.storybook/static/logo.svg
@@ -1,7 +1,8 @@
-<svg width="84" height="33" viewBox="0 0 84 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="104" height="33" viewBox="0 0 104 33" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M34.5147 11.041H27.3493V32.0413H34.5147V11.041Z" fill="#323338"/>
 <path d="M30.9095 8.15679C28.5661 8.15679 26.5832 6.30912 26.5832 4.05586C26.5832 1.75754 28.5661 0 30.9095 0C33.2979 0 35.1907 1.75754 35.1907 4.05586C35.1907 6.30912 33.2979 8.15679 30.9095 8.15679Z" fill="#323338"/>
 <path d="M16.0883 32.0413H9.46368L0 0.991433H7.84133L12.7985 19.9188L17.6655 0.991433H25.597L16.0883 32.0413Z" fill="#323338"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M44.7539 0.991433H37.5885V32.0413H44.3483V29.0219C45.5651 31.5005 48.269 32.4469 50.5673 32.4469C55.7498 32.4469 60.7971 28.3009 60.7971 21.4961C60.7971 14.6912 55.7498 10.5002 50.5673 10.5002C48.0437 10.5002 46.1059 11.4916 44.7539 12.9788V0.991433ZM53.4965 21.5411C53.4965 23.9296 51.5137 25.9125 49.1252 25.9125C46.7368 25.9125 44.7539 23.9296 44.7539 21.5411C44.7539 19.1527 46.7368 17.1698 49.1252 17.1698C51.5137 17.1698 53.4965 19.1527 53.4965 21.5411Z" fill="#323338"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M73.0942 10.5002C79.0879 10.5002 84 14.6011 84 21.2257C84 21.7662 83.91 22.9369 83.8649 23.5231L68.813 23.524C69.0834 25.5069 71.3367 26.7236 73.635 26.7236C74.8067 26.7236 76.4291 26.4082 77.6458 24.9661C78.1727 25.3821 79.4848 26.3101 80.6891 27.1619C81.4416 27.6942 82.1524 28.197 82.603 28.5262C80.3948 31.4555 76.4291 32.4469 73.0942 32.4469C67.0555 32.4469 61.9181 28.0305 61.9181 21.4059C61.9181 14.7814 67.0555 10.5002 73.0942 10.5002ZM73.0041 16.4037C71.9225 16.4037 69.3538 16.8093 68.813 19.5132H77.1952C76.5192 16.8093 74.0857 16.4037 73.0041 16.4037Z" fill="#323338"/>
+<text x="88" y="32" font-family="-apple-system, BlinkMacSystemFont, sans-serif" font-size="12" font-weight="700" fill="#323338">v4</text>
 </svg>
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 97584e19ee..103b8ad41a 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vibe/docs",
-  "version": "3.8.0",
+  "version": "4.0.0-rc.0",
   "private": true,
   "description": "Vibe documentation",
   "repository": {
@@ -23,12 +23,13 @@
   },
   "dependencies": {
     "@vibe/core": "3.85.1",
-    "@vibe/icons": "1.16.0",
-    "@vibe/shared": "3.0.8",
+    "@vibe/icons": "^4.0.0-rc.0",
+    "@vibe/shared": "^4.0.0-rc.0",
+    "@vibe/style": "^4.0.0-rc.0",
     "classnames": "^2.3.2",
     "es-toolkit": "^1.39.10",
-    "monday-ui-style": "0.26.2",
-    "vibe-storybook-components": "1.0.7"
+    "framer-motion": "^6.5.1",
+    "vibe-storybook-components": "^4.0.0-rc.0"
   },
   "devDependencies": {
     "@babel/core": "^7.23.2",
@@ -79,7 +80,6 @@
     "@types/body-scroll-lock": "^3.1.0",
     "@types/jest-axe": "^3.5.9",
     "@types/react": "^18.0.25",
-    "@types/react-dates": "^21.8.3",
     "@types/react-is": "^16.7.5",
     "@types/react-resizable": "^3.0.7",
     "@types/react-select": "^3.1.2",
@@ -155,7 +155,7 @@
     "ts-morph": "^25.0.1",
     "ts-node": "^10.9.2",
     "tsx": "^4.20.3",
-    "typescript": "^4.7.3",
+    "typescript": "^5.9.3",
     "typescript-plugin-css-modules": "^4.2.1",
     "vite": "^5.3.1",
     "vitest": "^1.6.0"
diff --git a/packages/docs/src/decorators/withGlobalStyle/withGlobalStyle.module.scss b/packages/docs/src/decorators/withGlobalStyle/withGlobalStyle.module.scss
index 9608754c1f..71dddeca9c 100644
--- a/packages/docs/src/decorators/withGlobalStyle/withGlobalStyle.module.scss
+++ b/packages/docs/src/decorators/withGlobalStyle/withGlobalStyle.module.scss
@@ -1,3 +1,3 @@
 .storyWrapper {
-  padding: var(--spacing-xl) var(--spacing-large);
+  padding: var(--space-32) var(--space-24);
 }
diff --git a/packages/docs/src/layout/related-components/component-description-map.tsx b/packages/docs/src/layout/related-components/component-description-map.tsx
index 364a2a26bb..a7be890ca7 100644
--- a/packages/docs/src/layout/related-components/component-description-map.tsx
+++ b/packages/docs/src/layout/related-components/component-description-map.tsx
@@ -33,7 +33,7 @@ import { IconsDescription } from "./descriptions/icons-description";
 import { SpinnerDescription } from "./descriptions/spinner-description";
 import { SkeletonDescription } from "./descriptions/skeleton-description";
 import { TypographyDescription } from "./descriptions/typography-description/typography-description";
-import { LinearProgressBarDescription } from "./descriptions/linear-progress-bar-description";
+import { ProgressBarDescription } from "./descriptions/linear-progress-bar-description";
 import { EditableHeadingDescription } from "./descriptions/editable-heading-description";
 import { EditableTextDescription } from "./descriptions/editable-text-description";
 import { ShadowDescription } from "./descriptions/shadow-description/shadow-description";
@@ -102,7 +102,7 @@ const COMPONENTS_DESCRIPTIONS_ENTRIES = [
   ["Slider", <SliderDescription />],
   ["IconButton", <IconButtonDescription />],
   ["MenuButton", <MenuButtonDescription />],
-  ["LinearProgressBar", <LinearProgressBarDescription />],
+  ["ProgressBar", <ProgressBarDescription />],
   ["EditableHeading", <EditableHeadingDescription />],
   ["EditableText", <EditableTextDescription />],
   ["Heading", <HeadingDescription />],
diff --git a/packages/docs/src/layout/related-components/descriptions/attention-box-description.jsx b/packages/docs/src/layout/related-components/descriptions/attention-box-description.jsx
index 725577ef18..93247259cf 100644
--- a/packages/docs/src/layout/related-components/descriptions/attention-box-description.jsx
+++ b/packages/docs/src/layout/related-components/descriptions/attention-box-description.jsx
@@ -1,6 +1,6 @@
 import React, { useMemo } from "react";
 import { RelatedComponent } from "vibe-storybook-components";
-import { AttentionBox } from "@vibe/core/next";
+import { AttentionBox } from "@vibe/core";
 
 export const AttentionBoxDescription = () => {
   const component = useMemo(() => {
@@ -17,7 +17,7 @@ export const AttentionBoxDescription = () => {
     <RelatedComponent
       component={component}
       title="AttentionBox"
-      href="/?path=/docs/components-attentionbox-new--docs"
+      href="/?path=/docs/components-attentionbox--docs"
       description="Displays content classification."
     />
   );
diff --git a/packages/docs/src/layout/related-components/descriptions/avatar-description.tsx b/packages/docs/src/layout/related-components/descriptions/avatar-description.tsx
index f924c8c047..0b671224ee 100644
--- a/packages/docs/src/layout/related-components/descriptions/avatar-description.tsx
+++ b/packages/docs/src/layout/related-components/descriptions/avatar-description.tsx
@@ -4,7 +4,7 @@ import person1 from "./assets/person1.png";
 import { Avatar } from "@vibe/core";
 
 export const AvatarDescription = () => {
-  const component = useMemo(() => <Avatar src={person1} type="img" ariaLabel="Julia Martinez" />, []);
+  const component = useMemo(() => <Avatar src={person1} type="img" aria-label="Julia Martinez" />, []);
   return (
     <RelatedComponent
       component={component}
diff --git a/packages/docs/src/layout/related-components/descriptions/avatar-group-description.tsx b/packages/docs/src/layout/related-components/descriptions/avatar-group-description.tsx
index 5cb183231f..755cb87889 100644
--- a/packages/docs/src/layout/related-components/descriptions/avatar-group-description.tsx
+++ b/packages/docs/src/layout/related-components/descriptions/avatar-group-description.tsx
@@ -10,14 +10,14 @@ export const AvatarGroupDescription = () => {
   const component = useMemo(
     () => (
       <AvatarGroup size="large" max={3}>
-        <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
-        <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
-        <Avatar type="img" src={person3} ariaLabel="Marco DiAngelo" />
-        <Avatar type="img" src={person4} ariaLabel="Liam Caldwell" />
-        <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
-        <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
-        <Avatar type="img" src={person3} ariaLabel="Marco DiAngelo" />
-        <Avatar type="img" src={person4} ariaLabel="Liam Caldwell" />
+        <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+        <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+        <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+        <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
+        <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+        <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+        <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+        <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
       </AvatarGroup>
     ),
     []
diff --git a/packages/docs/src/layout/related-components/descriptions/color-picker-description.tsx b/packages/docs/src/layout/related-components/descriptions/color-picker-description.tsx
index 59be59b2ac..df5d4740ad 100644
--- a/packages/docs/src/layout/related-components/descriptions/color-picker-description.tsx
+++ b/packages/docs/src/layout/related-components/descriptions/color-picker-description.tsx
@@ -24,7 +24,7 @@ export const ColorPickerDescription = () => {
   const component = useMemo(() => {
     return (
       <div>
-        <ColorPicker colorSize={ColorPicker.colorSizes.SMALL} colorsList={COLORS_LIST} forceUseRawColorList />
+        <ColorPicker colorSize="small" colorsList={COLORS_LIST} forceUseRawColorList />
       </div>
     );
   }, []);
diff --git a/packages/docs/src/layout/related-components/descriptions/dialog-description/dialog-description.module.scss b/packages/docs/src/layout/related-components/descriptions/dialog-description/dialog-description.module.scss
index dcd2606081..ec2b6075c1 100644
--- a/packages/docs/src/layout/related-components/descriptions/dialog-description/dialog-description.module.scss
+++ b/packages/docs/src/layout/related-components/descriptions/dialog-description/dialog-description.module.scss
@@ -1,4 +1,4 @@
 .container {
   width: 100%;
-  padding-left: var(--spacing-large);
+  padding-left: var(--space-24);
 }
diff --git a/packages/docs/src/layout/related-components/descriptions/dialog-description/dialog-description.tsx b/packages/docs/src/layout/related-components/descriptions/dialog-description/dialog-description.tsx
index c4686e214a..73c9c59bdc 100644
--- a/packages/docs/src/layout/related-components/descriptions/dialog-description/dialog-description.tsx
+++ b/packages/docs/src/layout/related-components/descriptions/dialog-description/dialog-description.tsx
@@ -1,25 +1,16 @@
 import React, { useMemo } from "react";
 import { RelatedComponent } from "vibe-storybook-components";
 import { Dialog, DialogContentContainer, IconButton, Flex, Skeleton } from "@vibe/core";
+import { shift } from "@floating-ui/react-dom";
 import { Info } from "@vibe/icons";
 import styles from "./dialog-description.module.scss";
 
 export const DialogDescription = () => {
   const component = useMemo(() => {
-    const modifiers =
-      // for prevent dialog to move while scrolling
-      [
-        {
-          name: "preventOverflow",
-          options: {
-            mainAxis: false
-          }
-        }
-      ];
     return (
       <div className={styles.container}>
         <Dialog
-          modifiers={modifiers}
+          middleware={[shift({ mainAxis: false })]}
           shouldShowOnMount
           showTrigger={["click"]}
           hideTrigger={["click"]}
diff --git a/packages/docs/src/layout/related-components/descriptions/divider.tsx b/packages/docs/src/layout/related-components/descriptions/divider.tsx
index 2a97894777..9a5835f933 100644
--- a/packages/docs/src/layout/related-components/descriptions/divider.tsx
+++ b/packages/docs/src/layout/related-components/descriptions/divider.tsx
@@ -8,11 +8,11 @@ export const DividerDescription = () => {
     return (
       <div style={{ width: "220px" }}>
         <Menu>
-          <MenuItem title="My Item" icon={Settings} iconType="svg" iconBackgroundColor="var(--sb-negative-color)" />
+          <MenuItem title="My Item" icon={Settings} type="svg" iconBackgroundColor="var(--sb-negative-color)" />
         </Menu>
         <Divider />
         <Menu>
-          <MenuItem title="My Item" icon={Bolt} iconType="svg" iconBackgroundColor="var(--sb-color-purple)" />
+          <MenuItem title="My Item" icon={Bolt} type="svg" iconBackgroundColor="var(--sb-color-purple)" />
         </Menu>
       </div>
     );
diff --git a/packages/docs/src/layout/related-components/descriptions/dropdown-description.tsx b/packages/docs/src/layout/related-components/descriptions/dropdown-description.tsx
index 23a37ebe13..33a760a4ad 100644
--- a/packages/docs/src/layout/related-components/descriptions/dropdown-description.tsx
+++ b/packages/docs/src/layout/related-components/descriptions/dropdown-description.tsx
@@ -7,14 +7,14 @@ export const DropdownDescription = () => {
     const style = {
       width: "60%"
     };
-    const option = [
-      { id: "1", label: "Option 1" },
-      { id: "2", label: "Option 2" },
-      { id: "3", label: "Option 3" }
+    const options = [
+      { value: "1", label: "Option 1" },
+      { value: "2", label: "Option 2" },
+      { value: "3", label: "Option 3" }
     ];
     return (
       <div style={style}>
-        <Dropdown placeholder="Placeholder text here" size={Dropdown.sizes.MEDIUM} options={option} />
+        <Dropdown placeholder="Placeholder text here" size="medium" options={options} />
       </div>
     );
   }, []);
diff --git a/packages/docs/src/layout/related-components/descriptions/editable-text-description.tsx b/packages/docs/src/layout/related-components/descriptions/editable-text-description.tsx
index 7bcb1e4024..6d9dee747a 100644
--- a/packages/docs/src/layout/related-components/descriptions/editable-text-description.tsx
+++ b/packages/docs/src/layout/related-components/descriptions/editable-text-description.tsx
@@ -7,7 +7,7 @@ export const EditableTextDescription = () => {
   const component = useMemo(() => {
     return (
       <Flex justify="center" style={{ width: "100%" }}>
-        <EditableText value="Hello world" type={EditableText.types.TEXT1} />
+        <EditableText value="Hello world" type="text1" />
       </Flex>
     );
   }, []);
diff --git a/packages/docs/src/layout/related-components/descriptions/expand-collapse-description/expand-collapse-description.tsx b/packages/docs/src/layout/related-components/descriptions/expand-collapse-description/expand-collapse-description.tsx
index 1b156e997b..38eade72d4 100644
--- a/packages/docs/src/layout/related-components/descriptions/expand-collapse-description/expand-collapse-description.tsx
+++ b/packages/docs/src/layout/related-components/descriptions/expand-collapse-description/expand-collapse-description.tsx
@@ -9,7 +9,7 @@ export const ExpandCollapseDescription = () => {
     return (
       <ExpandCollapse title="ExpandCollapse" className={styles.expandCollapseDescription}>
         <Text maxLines={2}>Insert any component that you want, here is a robot for you</Text>
-        <Icon iconType="svg" icon={Robot} iconSize={40} />
+        <Icon type="svg" icon={Robot} size={40} />
       </ExpandCollapse>
     );
   }, []);
diff --git a/packages/docs/src/layout/related-components/descriptions/icon-description.tsx b/packages/docs/src/layout/related-components/descriptions/icon-description.tsx
index ca8e15e694..29bc2d2995 100644
--- a/packages/docs/src/layout/related-components/descriptions/icon-description.tsx
+++ b/packages/docs/src/layout/related-components/descriptions/icon-description.tsx
@@ -5,7 +5,7 @@ import { Icon } from "@vibe/core";
 
 export const IconDescription = () => {
   const component = useMemo(() => {
-    return <Icon icon={Bolt} iconSize={36} />;
+    return <Icon icon={Bolt} size={36} />;
   }, []);
 
   return (
diff --git a/packages/docs/src/layout/related-components/descriptions/icons-description.tsx b/packages/docs/src/layout/related-components/descriptions/icons-description.tsx
index 180a9190d8..187a70ee95 100644
--- a/packages/docs/src/layout/related-components/descriptions/icons-description.tsx
+++ b/packages/docs/src/layout/related-components/descriptions/icons-description.tsx
@@ -11,9 +11,9 @@ export const IconsDescription = () => {
     };
     return (
       <div style={style}>
-        <Icon icon={Update} iconSize={36} />
-        <Icon icon={Lines} iconSize={36} />
-        <Icon icon={Locked} iconSize={36} />
+        <Icon icon={Update} size={36} />
+        <Icon icon={Lines} size={36} />
+        <Icon icon={Locked} size={36} />
       </div>
     );
   }, []);
diff --git a/packages/docs/src/layout/related-components/descriptions/linear-progress-bar-description.tsx b/packages/docs/src/layout/related-components/descriptions/linear-progress-bar-description.tsx
index a9a52d5b17..76b2b64163 100644
--- a/packages/docs/src/layout/related-components/descriptions/linear-progress-bar-description.tsx
+++ b/packages/docs/src/layout/related-components/descriptions/linear-progress-bar-description.tsx
@@ -1,22 +1,22 @@
 import React, { useMemo } from "react";
 import { RelatedComponent } from "vibe-storybook-components";
-import { LinearProgressBar } from "@vibe/core";
+import { ProgressBar } from "@vibe/core";
 
-export const LinearProgressBarDescription = () => {
+export const ProgressBarDescription = () => {
   const component = useMemo(() => {
     const style = {
       width: "80%"
     };
     return (
       <div style={style}>
-        <LinearProgressBar value={50} />
+        <ProgressBar value={50} />
       </div>
     );
   }, []);
   return (
     <RelatedComponent
       component={component}
-      title="LinearProgressBar"
+      title="ProgressBar"
       href="/?path=/docs/components-linearprogressbar--docs"
       description="Progress bars show continuous progress through a process, such as a percentage value."
     />
diff --git a/packages/docs/src/layout/related-components/descriptions/menu-button-description.tsx b/packages/docs/src/layout/related-components/descriptions/menu-button-description.tsx
index aba35b4500..609deddcae 100644
--- a/packages/docs/src/layout/related-components/descriptions/menu-button-description.tsx
+++ b/packages/docs/src/layout/related-components/descriptions/menu-button-description.tsx
@@ -7,10 +7,10 @@ export const MenuButtonDescription = () => {
   const component = useMemo(
     () => (
       <MenuButton>
-        <Menu id="menu" size={Menu.sizes.MEDIUM}>
-          <MenuItem icon={Sun} iconType="svg" title="The sun" />
-          <MenuItem icon={Moon} iconType="svg" title="The moon" />
-          <MenuItem icon={Favorite} iconType="svg" title="And the stars" />
+        <Menu id="menu" size="medium">
+          <MenuItem icon={Sun} type="svg" title="The sun" />
+          <MenuItem icon={Moon} type="svg" title="The moon" />
+          <MenuItem icon={Favorite} type="svg" title="And the stars" />
         </Menu>
       </MenuButton>
     ),
diff --git a/packages/docs/src/layout/related-components/descriptions/menu-description.tsx b/packages/docs/src/layout/related-components/descriptions/menu-description.tsx
index 52cd067dea..996a30f3e3 100644
--- a/packages/docs/src/layout/related-components/descriptions/menu-description.tsx
+++ b/packages/docs/src/layout/related-components/descriptions/menu-description.tsx
@@ -8,7 +8,7 @@ export const MenuDescription = () => {
     return (
       <div>
         <DialogContentContainer>
-          <Menu size={Menu.sizes.SMALL}>
+          <Menu size="small">
             <MenuItem title="Send" icon={Email} />
             <MenuItem title="Delete" icon={Delete} />
             <MenuItem title="More info" icon={Info} />
diff --git a/packages/docs/src/layout/related-components/descriptions/skeleton-description.tsx b/packages/docs/src/layout/related-components/descriptions/skeleton-description.tsx
index 0e3e32fafc..6900f10793 100644
--- a/packages/docs/src/layout/related-components/descriptions/skeleton-description.tsx
+++ b/packages/docs/src/layout/related-components/descriptions/skeleton-description.tsx
@@ -3,7 +3,7 @@ import { RelatedComponent } from "vibe-storybook-components";
 import { Skeleton } from "@vibe/core";
 
 export const SkeletonDescription = () => {
-  const component = useMemo(() => <Skeleton type={Skeleton.types.CIRCLE} />, []);
+  const component = useMemo(() => <Skeleton type="circle" />, []);
   return (
     <RelatedComponent
       component={component}
diff --git a/packages/docs/src/layout/related-components/descriptions/tipseen-description.tsx b/packages/docs/src/layout/related-components/descriptions/tipseen-description.tsx
index 27a2ba210f..1126f4b3b2 100644
--- a/packages/docs/src/layout/related-components/descriptions/tipseen-description.tsx
+++ b/packages/docs/src/layout/related-components/descriptions/tipseen-description.tsx
@@ -1,6 +1,7 @@
 import React, { useMemo, useState, useCallback } from "react";
 import { RelatedComponent } from "vibe-storybook-components";
 import { Tipseen, TipseenWizard } from "@vibe/core";
+import { shift, flip } from "@floating-ui/react-dom";
 
 export const TipseenDescription = () => {
   const [activeStepIndex, setActiveStepIndex] = useState(2);
@@ -23,24 +24,10 @@ export const TipseenDescription = () => {
       <div key="tipseen-key-4">Popover message will appear here loremipsum dolor samet…</div>,
       <div key="tipseen-key-5">Popover message will appear here loremipsum dolor samet…</div>
     ];
-    const modifiers = [
-      {
-        name: "preventOverflow",
-        options: {
-          mainAxis: false
-        }
-      },
-      {
-        name: "flip",
-        options: {
-          fallbackPlacements: [] as string[]
-        }
-      }
-    ];
     return (
       <div style={style}>
         <Tipseen
-          modifiers={modifiers}
+          middleware={[shift({ mainAxis: false }), flip({ fallbackPlacements: [] })]}
           width={280}
           position="right"
           content={
diff --git a/packages/docs/src/layout/related-components/descriptions/virtualized-list-description/virtualized-list-description.jsx b/packages/docs/src/layout/related-components/descriptions/virtualized-list-description/virtualized-list-description.jsx
index 16bbe33d13..bc8a2f0f64 100644
--- a/packages/docs/src/layout/related-components/descriptions/virtualized-list-description/virtualized-list-description.jsx
+++ b/packages/docs/src/layout/related-components/descriptions/virtualized-list-description/virtualized-list-description.jsx
@@ -12,7 +12,7 @@ export const VirtualizedListDescription = () => {
         <div key={index} style={style}>
           <Text
             className={styles.virtualizedListItem}
-            color={Text.colors.FIXED_DARK}
+            color="fixedDark"
             style={{
               backgroundColor,
               height: item.height
diff --git a/packages/docs/src/pages/components/AlertBanner/AlertBanner.stories.helpers.tsx b/packages/docs/src/pages/components/AlertBanner/AlertBanner.stories.helpers.tsx
index ff1c6d4e71..16ce5793e9 100644
--- a/packages/docs/src/pages/components/AlertBanner/AlertBanner.stories.helpers.tsx
+++ b/packages/docs/src/pages/components/AlertBanner/AlertBanner.stories.helpers.tsx
@@ -4,7 +4,7 @@ import { StorybookLink, Tip } from "vibe-storybook-components";
 export const TipWhenToUse = () => (
   <Tip title="When to use?">
     Alert banners should be reserved only for high-signal, system-level alert messages. For in-app notifications use a{" "}
-    <StorybookLink page="Components/Toast" size={StorybookLink.sizes.SMALL}>
+    <StorybookLink page="Components/Toast" size="small">
       Toast.
     </StorybookLink>
   </Tip>
diff --git a/packages/docs/src/pages/components/AlertBanner/AlertBanner.stories.tsx b/packages/docs/src/pages/components/AlertBanner/AlertBanner.stories.tsx
index 19c355625f..562eb40c2a 100644
--- a/packages/docs/src/pages/components/AlertBanner/AlertBanner.stories.tsx
+++ b/packages/docs/src/pages/components/AlertBanner/AlertBanner.stories.tsx
@@ -49,7 +49,7 @@ export const Overview = {
   render: alertBannerTemplate.bind({}),
   args: {
     id: "overview-alert-banner",
-    ariaLabel: "Overview alert banner"
+    "aria-label": "Overview alert banner"
   },
   name: "Overview"
 };
@@ -59,23 +59,23 @@ type Story = StoryObj<typeof AlertBanner>;
 export const Types: Story = {
   render: () => (
     <Flex direction="column" gap={16}>
-      <AlertBanner id="type-primary" ariaLabel="Primary alert banner">
+      <AlertBanner id="type-primary" aria-label="Primary alert banner">
         <AlertBannerText text="Alert banner message" />
         <AlertBannerLink text="this is a CTA" href="https://monday.com" />
       </AlertBanner>
-      <AlertBanner id="type-positive" ariaLabel="Success alert banner" backgroundColor="positive">
+      <AlertBanner id="type-positive" aria-label="Success alert banner" backgroundColor="positive">
         <AlertBannerText text="Alert banner message" />
         <AlertBannerLink text="this is a CTA" href="https://monday.com" />
       </AlertBanner>
-      <AlertBanner id="type-negative" ariaLabel="Error alert banner" backgroundColor="negative">
+      <AlertBanner id="type-negative" aria-label="Error alert banner" backgroundColor="negative">
         <AlertBannerText text="Alert banner message" />
         <AlertBannerLink text="this is a CTA" href="https://monday.com" />
       </AlertBanner>
-      <AlertBanner id="type-warning" ariaLabel="Warning alert banner" backgroundColor="warning">
+      <AlertBanner id="type-warning" aria-label="Warning alert banner" backgroundColor="warning">
         <AlertBannerText text="Alert banner message" />
         <AlertBannerLink text="this is a CTA" href="https://monday.com" />
       </AlertBanner>
-      <AlertBanner id="type-dark" ariaLabel="Dark alert banner" backgroundColor="dark">
+      <AlertBanner id="type-dark" aria-label="Dark alert banner" backgroundColor="dark">
         <AlertBannerText text="Alert banner message" />
         <AlertBannerLink text="this is a CTA" href="https://monday.com" />
       </AlertBanner>
@@ -86,7 +86,7 @@ export const Types: Story = {
 
 export const AlertBannerWithButton: Story = {
   render: () => (
-    <AlertBanner id="with-button" ariaLabel="Alert banner with action button">
+    <AlertBanner id="with-button" aria-label="Alert banner with action button">
       <AlertBannerText text="Lorem ipsum dolor sit amet" />
       <AlertBannerButton>Lorem Ipsum</AlertBannerButton>
     </AlertBanner>
@@ -96,7 +96,7 @@ export const AlertBannerWithButton: Story = {
 
 export const AlertBannerWithLink: Story = {
   render: () => (
-    <AlertBanner id="with-link" ariaLabel="Alert banner with link">
+    <AlertBanner id="with-link" aria-label="Alert banner with link">
       <AlertBannerText text="Alert banner message" />
       <AlertBannerLink text="this is a CTA" href="https://monday.com" />
     </AlertBanner>
@@ -106,7 +106,7 @@ export const AlertBannerWithLink: Story = {
 
 export const AlertBannerAsAnAnnouncement: Story = {
   render: () => (
-    <AlertBanner id="announcement" ariaLabel="Event announcement" backgroundColor="dark">
+    <AlertBanner id="announcement" aria-label="Event announcement" backgroundColor="dark">
       <AlertBannerText text="Join us at Elevate 2022" />
       <AlertBannerLink text="RSVP now" href="https://monday.com" />
     </AlertBanner>
@@ -118,7 +118,7 @@ export const AlertBannerAsAnOpportunityToUpgrade: Story = {
   render: () => (
     <AlertBanner
       id="upgrade-opportunity"
-      ariaLabel="Trial upgrade opportunity"
+      aria-label="Trial upgrade opportunity"
       onClose={() => {}}
       closeButtonAriaLabel="Close upgrade banner"
     >
@@ -131,7 +131,7 @@ export const AlertBannerAsAnOpportunityToUpgrade: Story = {
 
 export const OverflowText: Story = {
   render: () => (
-    <AlertBanner id="overflow-text" ariaLabel="Long text alert banner">
+    <AlertBanner id="overflow-text" aria-label="Long text alert banner">
       <AlertBannerText text="This is a really long alert..." />
       <AlertBannerLink text="Call to action" href="https://monday.com" />
     </AlertBanner>
diff --git a/packages/docs/src/pages/components/AttentionBox/AttentionBox.mdx b/packages/docs/src/pages/components/AttentionBox/AttentionBox.mdx
index bc385b80c4..8d3e070c66 100644
--- a/packages/docs/src/pages/components/AttentionBox/AttentionBox.mdx
+++ b/packages/docs/src/pages/components/AttentionBox/AttentionBox.mdx
@@ -1,8 +1,7 @@
 import { Meta } from "@storybook/blocks";
 import { ComponentRules, UsageGuidelines } from "vibe-storybook-components";
 import * as AttentionBoxStories from "./AttentionBox.stories";
-import { AttentionBox } from "@vibe/core/next";
-import { Box, Heading, Text, Link } from "@vibe/core";
+import { AttentionBox, Box, Heading, Text, Link } from "@vibe/core";
 
 <Meta of={AttentionBoxStories} />
 
@@ -17,7 +16,7 @@ Attention box lets users know important information within content areas, as clo
 ## Import path
 
 ```tsx
-import { AttentionBox } from "@vibe/core/next";
+import { AttentionBox } from "@vibe/core";
 ```
 
 ## Props
diff --git a/packages/docs/src/pages/components/AttentionBox/AttentionBox.stories.tsx b/packages/docs/src/pages/components/AttentionBox/AttentionBox.stories.tsx
index d6e8e9bdba..b7efcce53d 100644
--- a/packages/docs/src/pages/components/AttentionBox/AttentionBox.stories.tsx
+++ b/packages/docs/src/pages/components/AttentionBox/AttentionBox.stories.tsx
@@ -1,8 +1,8 @@
 import React, { useState, useCallback, useEffect } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { Info, Invite } from "@vibe/icons";
-import { AttentionBox } from "@vibe/core/next";
 import {
+  AttentionBox,
   Button,
   Flex,
   Heading,
@@ -27,7 +27,7 @@ const metaSettings = createStoryMetaSettingsDecorator({
 });
 
 export default {
-  title: "Components/AttentionBox [New]",
+  title: "Components/AttentionBox",
   component: AttentionBox,
   argTypes: metaSettings.argTypes,
   decorators: metaSettings.decorators
@@ -250,7 +250,7 @@ export const AttentionBoxInsideADialogCombobox: Story = {
                 </Flex>
               </Flex>
               <Flex gap="small">
-                <Icon iconSize="32" icon={Invite} />
+                <Icon size="32" icon={Invite} />
                 <Text>Invite new board member by email</Text>
               </Flex>
               <AttentionBox text="Hold ⌘ to select more than one person or team" onClose={() => {}} />
diff --git a/packages/docs/src/pages/components/AttentionBox/legacy/AttentionBox.mdx b/packages/docs/src/pages/components/AttentionBox/legacy/AttentionBox.mdx
deleted file mode 100644
index 483f0403b8..0000000000
--- a/packages/docs/src/pages/components/AttentionBox/legacy/AttentionBox.mdx
+++ /dev/null
@@ -1,156 +0,0 @@
-import { Meta } from "@storybook/blocks";
-import { Link } from "vibe-storybook-components";
-import { Info } from "@vibe/icons";
-import { Flex, Heading, Text, AttentionBox, AttentionBoxLink } from "@vibe/core";
-import { TipCheckYourself } from "./AttentionBox.stories.helpers";
-import * as AttentionBoxStories from "./AttentionBox.stories";
-
-<Meta of={AttentionBoxStories} />
-
-# Attention Box
-
-Attention box lets users know important information within content areas, as close as possible to the content it’s about. An optional smooth entrance animation can be used to enhance visibility.
-
-<Canvas of={AttentionBoxStories.Overview} />
-
-### Import
-
-```js
-import { AttentionBox, AttentionBoxLink } from "@vibe/core";
-```
-
-## Props
-
-<PropsTable />
-
-## Usage
-
-<UsageGuidelines
-  guidelines={[
-    "Use attention box if there is crucial information for user to finish or be acknowledged about a task.",
-    "Attention box do not dismiss automatically. They persist on the page until the user dismisses them or takes action that resolves the notification.",
-    "The width of attention box is based on content and layout. They can expand to the fill the container or content area they relate to."
-  ]}
-/>
-
-<TipCheckYourself />
-
-## Accessibility
-
-<UsageGuidelines
-  guidelines={[
-    <>
-      Always provide clear, descriptive <code>title</code> and <code>text</code> content. The title should be concise
-      and the text should provide actionable information that helps users understand what they need to do.
-    </>,
-    <>
-      For dismissible AttentionBoxes, use the <code>closeButtonAriaLabel</code> prop to provide a descriptive accessible
-      name for the close button.
-    </>
-  ]}
-/>
-
-## Variants
-
-### States
-
-There are five types of attention boxes: Primary, success, danger, warning and dark (natural).
-
-<Canvas of={AttentionBoxStories.States} />
-
-### Attention box with link
-
-<Canvas of={AttentionBoxStories.AttentionBoxWithLink} />
-
-### Dismissable
-
-<Canvas of={AttentionBoxStories.Dismissable} />
-
-## Do’s and Don’ts
-
-<ComponentRules
-  rules={[
-    {
-      positive: {
-        component: (
-          <div style={{ width: "340px" }}>
-            <AttentionBox
-              title="Attention box title"
-              text="Studies show that 100% of people who celebrate birthdays, will eventually die."
-            />
-          </div>
-        ),
-        description: "Provide a short and brief title, and explanation related to the title."
-      },
-      negative: {
-        component: <AttentionBox title="Attention box title" />,
-        description: "Don’t use only a title to explain something."
-      }
-    },
-    {
-      positive: {
-        component: (
-          <div>
-            <Heading type="h2" weight="bold">
-              Inbox
-            </Heading>
-            <Text style={{ margin: "0 0 10px" }}>Catch up on updates from all your boards.</Text>
-            <AttentionBox compact icon={Info}>
-              <Flex style={{ width: "400px" }} justify="space-between">
-                Get your monday.com notifications <AttentionBoxLink href="" text="Learn more" />
-              </Flex>
-            </AttentionBox>
-          </div>
-        ),
-        description:
-          "Use when you are speaking directly to a piece of content and the notification can be positioned close to the content."
-      },
-      negative: {
-        component: (
-          <div>
-            <Heading type="h2" weight="bold">
-              Inbox
-            </Heading>
-            <Text style={{ margin: "0 0 10px" }}>Catch up on updates from all your boards.</Text>
-            <AttentionBox compact icon={Info}>
-              <Flex style={{ width: "400px" }} justify="space-between">
-                7 days left on your free trial <AttentionBoxLink href="" text="Learn more" />
-              </Flex>
-            </AttentionBox>
-          </div>
-        ),
-        description: (
-          <>
-            Don’t use when a message applies at a system level, does not apply to a specific piece of content, or needs
-            to alert all users. On those cases, use{" "}
-            <StorybookLink page="Components/AlertBanner">Alert banner.</StorybookLink>
-          </>
-        )
-      }
-    }
-  ]}
-/>
-
-## Use cases and examples
-
-### Natural Attention box
-
-Provides additional information about an action or section.
-
-<Canvas of={AttentionBoxStories.NaturalAttentionBox} />
-
-### Attention box inside a dialog/combobox
-
-Provides contextual and related information.
-
-<Canvas of={AttentionBoxStories.AttentionBoxInsideADialogCombobox} />
-
-### Animation
-
-The Attention box component consist of enter animation prop to increase user attention. Is highly recommended to use a 200ms delay before the attention box entry motion once the page is fully loaded.
-
-<Canvas of={AttentionBoxStories.AttentionBoxAnimation} />
-
-## Related components
-
-<RelatedComponents componentsNames={["AlertBanner", "Toast", "Tooltip"]} />
diff --git a/packages/docs/src/pages/components/AttentionBox/legacy/AttentionBox.stories.helpers.tsx b/packages/docs/src/pages/components/AttentionBox/legacy/AttentionBox.stories.helpers.tsx
deleted file mode 100644
index bd301ece5c..0000000000
--- a/packages/docs/src/pages/components/AttentionBox/legacy/AttentionBox.stories.helpers.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from "react";
-import { Tip, StorybookLink } from "vibe-storybook-components";
-
-export const TipCheckYourself = () => (
-  <Tip title="Check yourself">
-    If the information about a component isn’t critical for the user, use a{" "}
-    <StorybookLink page="Components/Tooltip" size={StorybookLink.sizes.SMALL}>
-      Tooltip
-    </StorybookLink>{" "}
-    instead.
-  </Tip>
-);
diff --git a/packages/docs/src/pages/components/AttentionBox/legacy/AttentionBox.stories.tsx b/packages/docs/src/pages/components/AttentionBox/legacy/AttentionBox.stories.tsx
deleted file mode 100644
index 2fcff31f90..0000000000
--- a/packages/docs/src/pages/components/AttentionBox/legacy/AttentionBox.stories.tsx
+++ /dev/null
@@ -1,285 +0,0 @@
-import React, { useState, useCallback } from "react";
-import {
-  AttentionBox,
-  Flex,
-  Button,
-  Text,
-  Icon,
-  Heading,
-  DialogContentContainer,
-  Search,
-  Avatar,
-  AttentionBoxLink
-} from "@vibe/core";
-import { createStoryMetaSettingsDecorator } from "../../../../utils/createStoryMetaSettingsDecorator";
-import { createComponentTemplate, StoryDescription } from "vibe-storybook-components";
-import { Info, Invite, ThumbsUp, Favorite } from "@vibe/icons";
-import person from "./assets/person.png";
-
-const metaSettings = createStoryMetaSettingsDecorator({
-  component: AttentionBox,
-  iconPropNamesArray: ["icon"],
-  actionPropsArray: ["onClose"]
-});
-
-const attentionBoxTemplate = createComponentTemplate(AttentionBox);
-
-export default {
-  title: "Components/AttentionBox [Deprecated]",
-  component: AttentionBox,
-  subcomponents: {
-    AttentionBoxLink
-  },
-  argTypes: metaSettings.argTypes,
-  decorators: metaSettings.decorators,
-  parameters: {
-    docs: {
-      liveEdit: {
-        scope: { Info }
-      }
-    }
-  }
-};
-
-export const Overview = {
-  render: () => (
-    <div style={{ width: "340px" }}>
-      {attentionBoxTemplate({
-        id: "overview-attention-box",
-        "aria-label": "Informational message about birthdays",
-        onClose: () => {},
-        title: "Attention box title",
-        text: "Studies show that 100% of people who celebrate birthdays, will eventually die."
-      })}
-    </div>
-  ),
-  name: "Overview",
-  parameters: {
-    docs: {
-      liveEdit: {
-        isEnabled: false
-      }
-    }
-  }
-};
-
-export const States = {
-  render: () => (
-    <Flex direction="column" gap="small" align="start">
-      <StoryDescription description="Primary">
-        <div style={{ width: "340px" }}>
-          <AttentionBox
-            id="states-primary"
-            aria-label="SSO login warning"
-            title="Enabling SSO Login"
-            text="Will cause all your team lose access to the account until using the correct SSO source."
-            icon={Info}
-          />
-        </div>
-      </StoryDescription>
-      <StoryDescription description="Success">
-        <div style={{ width: "340px" }}>
-          <AttentionBox
-            id="states-success"
-            aria-label="Success message"
-            title="You're doing great"
-            text="Lorem Ipsum is simply dummy text of the printing and typesetting industry."
-            type="success"
-            icon={ThumbsUp}
-          />
-        </div>
-      </StoryDescription>
-      <StoryDescription description="Danger">
-        <div style={{ width: "340px" }}>
-          <AttentionBox
-            id="states-danger"
-            aria-label="Storage space warning"
-            title="Account low on free space"
-            text="Your account is out of free space, free some space to prevent data loss."
-            type="danger"
-          />
-        </div>
-      </StoryDescription>
-      <StoryDescription description="Warning">
-        <div style={{ width: "340px" }}>
-          <AttentionBox
-            id="states-warning"
-            aria-label="Storage space warning"
-            title="Account low on free space"
-            text="Your account is out of free space, free some space to prevent data loss."
-            type="warning"
-            icon={Info}
-          />
-        </div>
-      </StoryDescription>
-      <StoryDescription description="Dark">
-        <div style={{ width: "340px" }}>
-          <AttentionBox
-            id="states-dark"
-            aria-label="Helpful tip about tagging items"
-            title="What a great idea!"
-            text="You can also make this list sortable by tagging the items with tags column"
-            type="dark"
-            icon={Favorite}
-          />
-        </div>
-      </StoryDescription>
-    </Flex>
-  ),
-  parameters: {
-    docs: {
-      liveEdit: {
-        scope: { StoryDescription, ThumbsUp, Favorite }
-      }
-    }
-  }
-};
-
-export const AttentionBoxWithLink = {
-  render: () => (
-    <AttentionBox id="with-link-attention-box" aria-label="Notification settings reminder" compact>
-      <Flex justify="space-between" gap="xs" style={{ minWidth: "320px" }}>
-        Get your monday.com notifications
-        <AttentionBoxLink id="learn-more-link" href="" text="Learn more" />
-      </Flex>
-    </AttentionBox>
-  )
-};
-
-export const Dismissable = {
-  render: () => {
-    const mockOnClose = useCallback((): void => {}, []);
-
-    return (
-      <Flex gap="large" align="start">
-        <div style={{ width: "274px" }}>
-          <AttentionBox
-            id="dismissable-regular"
-            aria-label="Dismissable information message"
-            title="Regular attention box"
-            text="Dismissable attention box with two lines of content."
-            onClose={mockOnClose}
-            icon={Info}
-          />
-        </div>
-        <div style={{ width: "274px" }}>
-          <AttentionBox
-            id="dismissable-compact"
-            aria-label="Dismissable compact message"
-            text="Attention box in compact mode"
-            onClose={mockOnClose}
-            compact
-          />
-        </div>
-      </Flex>
-    );
-  }
-};
-
-export const NaturalAttentionBox = {
-  render: () => (
-    <Flex direction="column" align="start">
-      <Heading id="cross-account-heading" type="h3" weight="bold">
-        Cross-Account Copier
-      </Heading>
-      <Text style={{ margin: "4px 0 10px" }}>Copy boards and dashboards to another account</Text>
-      <AttentionBox
-        id="natural-attention-box"
-        aria-label="Instructions for copying content"
-        compact
-        withIconWithoutHeader
-        icon={Info}
-        text="First, move the content you want to copy into folder. Only main boards and dashboards can be copied."
-        type="dark"
-      />
-    </Flex>
-  )
-};
-
-export const AttentionBoxInsideADialogCombobox = {
-  render: () => {
-    const mockOnClose = useCallback((): void => {}, []);
-
-    return (
-      <DialogContentContainer style={{ width: "380px", padding: "var(--spacing-medium)" }}>
-        <Flex direction="column" gap="medium" align="initial">
-          <Search
-            id="dialog-search"
-            inputAriaLabel="Search people by name, role, team, or email"
-            placeholder="Search by name, role, team, or email"
-          />
-          <Text style={{ paddingInlineStart: "5px", marginTop: "4px" }}>Suggested people</Text>
-          <Flex direction="column" gap="medium" align="start">
-            <Flex gap="small">
-              <Avatar id="may-avatar" size="medium" src={person} type="img" ariaLabel="May Kishon" />
-              <Flex gap="xs">
-                <Text>May Kishon </Text>
-                <Text color="secondary">(UX/UI Product Designer)</Text>
-              </Flex>
-            </Flex>
-            <Flex gap="small">
-              <Icon id="invite-icon" iconSize="32" icon={Invite} style={{ padding: "0 6px" }} />
-              <Text>Invite new board member by email</Text>
-            </Flex>
-            <AttentionBox
-              id="dialog-attention-box"
-              aria-label="Multiple selection tip"
-              text="Hold ⌘ to select more than one person or team"
-              compact
-              onClose={mockOnClose}
-            />
-          </Flex>
-        </Flex>
-      </DialogContentContainer>
-    );
-  },
-  parameters: {
-    docs: {
-      liveEdit: {
-        scope: { person, Invite }
-      }
-    }
-  },
-  name: "Attention box inside a dialog/combobox"
-};
-
-export const AttentionBoxAnimation = {
-  render: () => {
-    const [isOpen, setOpen] = useState(false);
-    const onClick = useCallback(() => {
-      setOpen(true);
-    }, []);
-    return (
-      <>
-        <Flex
-          gap={Flex.gaps.MEDIUM}
-          style={{
-            height: "44px"
-          }}
-        >
-          <Button
-            id="animation-trigger"
-            ariaLabel="Show attention box with entry animation"
-            onClick={onClick}
-            kind={Button.kinds.SECONDARY}
-          >
-            Entry animation
-          </Button>
-          {isOpen && (
-            <AttentionBox
-              id="animated-attention-box"
-              aria-label="Animated instructions for copying content"
-              compact
-              withIconWithoutHeader
-              entryAnimation
-              icon={Info}
-              text="First, move the content you want to copy into folder. Only main boards and dashboards can be copied."
-              onClose={() => setOpen(false)}
-            />
-          )}
-        </Flex>
-      </>
-    );
-  },
-  name: "Attention box inside a dialog/combobox"
-};
diff --git a/packages/docs/src/pages/components/AttentionBox/legacy/assets/person.png b/packages/docs/src/pages/components/AttentionBox/legacy/assets/person.png
deleted file mode 100644
index 6b5ce8c766..0000000000
Binary files a/packages/docs/src/pages/components/AttentionBox/legacy/assets/person.png and /dev/null differ
diff --git a/packages/docs/src/pages/components/Avatar/Avatar.stories.helpers.tsx b/packages/docs/src/pages/components/Avatar/Avatar.stories.helpers.tsx
index 56a2c7a0f5..bb86f257ef 100644
--- a/packages/docs/src/pages/components/Avatar/Avatar.stories.helpers.tsx
+++ b/packages/docs/src/pages/components/Avatar/Avatar.stories.helpers.tsx
@@ -4,7 +4,7 @@ import { StorybookLink, Tip } from "vibe-storybook-components";
 export const TipMultipleAvatarsTogether = () => (
   <Tip title="Mutiple avatars togethers?">
     If you want to stack multiple avatars together, check out{" "}
-    <StorybookLink page="Components/AvatarGroup" size={StorybookLink.sizes.SMALL}>
+    <StorybookLink page="Components/AvatarGroup" size="small">
       AvatarGroup
     </StorybookLink>{" "}
     component
diff --git a/packages/docs/src/pages/components/Avatar/Avatar.stories.tsx b/packages/docs/src/pages/components/Avatar/Avatar.stories.tsx
index 05cf4b5b2e..fe59cd2338 100644
--- a/packages/docs/src/pages/components/Avatar/Avatar.stories.tsx
+++ b/packages/docs/src/pages/components/Avatar/Avatar.stories.tsx
@@ -25,7 +25,7 @@ const AvatarBadgePropsType = {
   detail: `{
     src?: string;
     icon?: SubIcon;
-    tabIndex?: string | number;
+    tabIndex?: number;
     className?: string;
     size?: "xs" | "small" | "medium" | "large";
   }`
@@ -78,7 +78,7 @@ export const Overview = {
     size: "large",
     src: person1,
     type: "img",
-    ariaLabel: "Julia Martinez"
+    "aria-label": "Julia Martinez"
   },
   parameters: {
     docs: {
@@ -92,10 +92,10 @@ export const Overview = {
 export const Size = {
   render: () => (
     <Flex gap="medium">
-      <Avatar id="size-xs" size="xs" src={person1} type="img" ariaLabel="Julia Martinez" />
-      <Avatar id="size-small" size="small" src={person1} type="img" ariaLabel="Julia Martinez" />
-      <Avatar id="size-medium" size="medium" src={person1} type="img" ariaLabel="Julia Martinez" />
-      <Avatar id="size-large" size="large" src={person1} type="img" ariaLabel="Julia Martinez" />
+      <Avatar id="size-xs" size="xs" src={person1} type="img" aria-label="Julia Martinez" />
+      <Avatar id="size-small" size="small" src={person1} type="img" aria-label="Julia Martinez" />
+      <Avatar id="size-medium" size="medium" src={person1} type="img" aria-label="Julia Martinez" />
+      <Avatar id="size-large" size="large" src={person1} type="img" aria-label="Julia Martinez" />
     </Flex>
   )
 };
@@ -103,10 +103,10 @@ export const Size = {
 export const Disable = {
   render: () => (
     <Flex gap="medium">
-      <Avatar id="disabled-xs" size="xs" src={person1} type="img" ariaLabel="Julia Martinez" disabled />
-      <Avatar id="disabled-small" size="small" src={person1} type="img" ariaLabel="Julia Martinez" disabled />
-      <Avatar id="disabled-medium" size="medium" src={person1} type="img" ariaLabel="Julia Martinez" disabled />
-      <Avatar id="disabled-large" size="large" src={person1} type="img" ariaLabel="Julia Martinez" disabled />
+      <Avatar id="disabled-xs" size="xs" src={person1} type="img" aria-label="Julia Martinez" disabled />
+      <Avatar id="disabled-small" size="small" src={person1} type="img" aria-label="Julia Martinez" disabled />
+      <Avatar id="disabled-medium" size="medium" src={person1} type="img" aria-label="Julia Martinez" disabled />
+      <Avatar id="disabled-large" size="large" src={person1} type="img" aria-label="Julia Martinez" disabled />
     </Flex>
   )
 };
@@ -114,10 +114,10 @@ export const Disable = {
 export const AvatarWithText = {
   render: () => (
     <Flex gap="medium">
-      <Avatar id="text-xs" size="xs" type="text" text="RM" backgroundColor="lipstick" ariaLabel="Ron Meir" />
-      <Avatar id="text-small" size="small" type="text" text="RM" backgroundColor="lipstick" ariaLabel="Ron Meir" />
-      <Avatar id="text-medium" size="medium" type="text" text="RM" backgroundColor="lipstick" ariaLabel="Ron Meir" />
-      <Avatar id="text-large" size="large" type="text" text="RM" backgroundColor="done-green" ariaLabel="Ron Meir" />
+      <Avatar id="text-xs" size="xs" type="text" text="RM" backgroundColor="lipstick" aria-label="Ron Meir" />
+      <Avatar id="text-small" size="small" type="text" text="RM" backgroundColor="lipstick" aria-label="Ron Meir" />
+      <Avatar id="text-medium" size="medium" type="text" text="RM" backgroundColor="lipstick" aria-label="Ron Meir" />
+      <Avatar id="text-large" size="large" type="text" text="RM" backgroundColor="done-green" aria-label="Ron Meir" />
     </Flex>
   )
 };
@@ -125,7 +125,7 @@ export const AvatarWithText = {
 export const SquareAvatar = {
   render: () => (
     <Flex gap="medium">
-      <Avatar id="square-xs" size="xs" type="text" text="R" backgroundColor="bright-blue" square ariaLabel="Ron" />
+      <Avatar id="square-xs" size="xs" type="text" text="R" backgroundColor="bright-blue" square aria-label="Ron" />
       <Avatar
         id="square-small"
         size="small"
@@ -133,7 +133,7 @@ export const SquareAvatar = {
         text="R"
         backgroundColor="bright-blue"
         square
-        ariaLabel="Ron"
+        aria-label="Ron"
       />
       <Avatar
         id="square-medium"
@@ -142,7 +142,7 @@ export const SquareAvatar = {
         icon={WhatsNew}
         backgroundColor="aquamarine"
         square
-        ariaLabel="Present"
+        aria-label="Present"
       />
       <Avatar
         id="square-large"
@@ -151,7 +151,7 @@ export const SquareAvatar = {
         text="RM"
         backgroundColor="working_orange"
         square
-        ariaLabel="Ron Meir"
+        aria-label="Ron Meir"
       />
     </Flex>
   )
@@ -166,7 +166,7 @@ export const AvatarWithRightBadge = {
         type="img"
         src={person1}
         bottomRightBadgeProps={{ src: guest }}
-        ariaLabel="Julia Martinez with guest badge"
+        aria-label="Julia Martinez with guest badge"
       />
       <Avatar
         id="right-badge-owner"
@@ -174,7 +174,7 @@ export const AvatarWithRightBadge = {
         type="img"
         src={person1}
         bottomRightBadgeProps={{ src: owner }}
-        ariaLabel="Julia Martinez with owner badge"
+        aria-label="Julia Martinez with owner badge"
       />
     </Flex>
   ),
@@ -196,7 +196,7 @@ export const AvatarWithLeftBadge = {
         type="img"
         src={person1}
         bottomLeftBadgeProps={{ src: home }}
-        ariaLabel="Julia Martinez with home badge"
+        aria-label="Julia Martinez with home badge"
       />
       <Avatar
         id="left-badge-minus"
@@ -204,7 +204,7 @@ export const AvatarWithLeftBadge = {
         type="img"
         src={person1}
         bottomLeftBadgeProps={{ src: minus }}
-        ariaLabel="Julia Martinez with minus badge"
+        aria-label="Julia Martinez with minus badge"
       />
     </Flex>
   ),
@@ -221,7 +221,7 @@ export const AvatarWithTooltip = {
   render: () => (
     <Flex direction="row" gap="large" align="start">
       <StoryDescription description="Aria label tooltip" vertical align={StoryDescription.align.START}>
-        <Avatar id="tooltip-aria" size="large" type="img" src={person1} ariaLabel={"Julia Martinez"} />
+        <Avatar id="tooltip-aria" size="large" type="img" src={person1} aria-label={"Julia Martinez"} />
       </StoryDescription>
       <StoryDescription description="Text tooltip" vertical align={StoryDescription.align.START}>
         <Avatar
@@ -232,7 +232,7 @@ export const AvatarWithTooltip = {
           tooltipProps={{
             content: "Julia Martinez"
           }}
-          ariaLabel={"Julia Martinez"}
+          aria-label={"Julia Martinez"}
         />
       </StoryDescription>
       <StoryDescription description="JSX tooltip" vertical align={StoryDescription.align.START}>
@@ -245,7 +245,7 @@ export const AvatarWithTooltip = {
             content: <b>Julia Martinez</b>,
             position: "bottom"
           }}
-          ariaLabel={"Julia Martinez"}
+          aria-label={"Julia Martinez"}
         />
       </StoryDescription>
     </Flex>
@@ -275,7 +275,7 @@ export const ClickableAvatar = {
             size="large"
             type="img"
             src={person1}
-            ariaLabel="Julia Martinez (clickable)"
+            aria-label="Julia Martinez (clickable)"
             onClick={incrementCount}
           />
           <Counter id="avatar-click-counter" count={count} />
@@ -288,9 +288,9 @@ export const ClickableAvatar = {
 export const MultipleAvatars = {
   render: () => (
     <AvatarGroup id="multiple-avatars-group" max={2} size="large">
-      <Avatar id="multiple-avatar-1" type="img" src={person1} ariaLabel="Julia Martinez" />
-      <Avatar id="multiple-avatar-2" type="img" src={person2} ariaLabel="Marco DiAngelo" />
-      <Avatar id="multiple-avatar-3" type="img" src={person3} ariaLabel="Liam Caldwell" />
+      <Avatar id="multiple-avatar-1" type="img" src={person1} aria-label="Julia Martinez" />
+      <Avatar id="multiple-avatar-2" type="img" src={person2} aria-label="Marco DiAngelo" />
+      <Avatar id="multiple-avatar-3" type="img" src={person3} aria-label="Liam Caldwell" />
     </AvatarGroup>
   ),
   parameters: {
diff --git a/packages/docs/src/pages/components/AvatarGroup/AvatarGroup.stories.tsx b/packages/docs/src/pages/components/AvatarGroup/AvatarGroup.stories.tsx
index 972854815b..b17848c118 100644
--- a/packages/docs/src/pages/components/AvatarGroup/AvatarGroup.stories.tsx
+++ b/packages/docs/src/pages/components/AvatarGroup/AvatarGroup.stories.tsx
@@ -66,19 +66,19 @@ interface AvatarGroupTemplateProps extends AvatarGroupProps {
 const avatarGroupTemplate = ({ persons, ...args }: AvatarGroupTemplateProps) => {
   return (
     <AvatarGroup size="large" max={3} {...args}>
-      <Avatar type="img" src={persons.person2} ariaLabel="Sophia Johnson" />
-      <Avatar type="img" src={persons.person3} ariaLabel="Marco DiAngelo" />
-      <Avatar type="img" src={persons.person4} ariaLabel="Liam Caldwell" />
-      <Avatar type="img" src={persons.person1} ariaLabel="Julia Martinez" />
-      <Avatar type="img" src={persons.person2} ariaLabel="Sophia Johnson" />
-      <Avatar type="img" src={persons.person3} ariaLabel="Marco DiAngelo" />
-      <Avatar type="img" src={persons.person4} ariaLabel="Liam Caldwell" />
-      <Avatar type="img" src={persons.person1} ariaLabel="Julia Martinez" />
-      <Avatar type="img" src={persons.person2} ariaLabel="Sophia Johnson" />
-      <Avatar type="img" src={persons.person3} ariaLabel="Marco DiAngelo" />
-      <Avatar type="img" src={persons.person4} ariaLabel="Liam Caldwell" />
-      <Avatar type="img" src={persons.person1} ariaLabel="Julia Martinez" />
-      <Avatar type="text" text="MR" ariaLabel="Mark Roytstein" />
+      <Avatar type="img" src={persons.person2} aria-label="Sophia Johnson" />
+      <Avatar type="img" src={persons.person3} aria-label="Marco DiAngelo" />
+      <Avatar type="img" src={persons.person4} aria-label="Liam Caldwell" />
+      <Avatar type="img" src={persons.person1} aria-label="Julia Martinez" />
+      <Avatar type="img" src={persons.person2} aria-label="Sophia Johnson" />
+      <Avatar type="img" src={persons.person3} aria-label="Marco DiAngelo" />
+      <Avatar type="img" src={persons.person4} aria-label="Liam Caldwell" />
+      <Avatar type="img" src={persons.person1} aria-label="Julia Martinez" />
+      <Avatar type="img" src={persons.person2} aria-label="Sophia Johnson" />
+      <Avatar type="img" src={persons.person3} aria-label="Marco DiAngelo" />
+      <Avatar type="img" src={persons.person4} aria-label="Liam Caldwell" />
+      <Avatar type="img" src={persons.person1} aria-label="Julia Martinez" />
+      <Avatar type="text" text="MR" aria-label="Mark Roytstein" />
     </AvatarGroup>
   );
 };
@@ -110,74 +110,74 @@ export const Size: Story = {
     <Flex direction="column" gap="large" align="start">
       <StoryDescription description="Large" vertical align={StoryDescription.align.START}>
         <AvatarGroup size="large" type="img" max={4}>
-          <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
-          <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
-          <Avatar type="img" src={person3} ariaLabel="Marco DiAngelo" />
-          <Avatar type="img" src={person4} ariaLabel="Liam Caldwell" />
-          <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
-          <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
-          <Avatar type="img" src={person3} ariaLabel="Marco DiAngelo" />
-          <Avatar type="img" src={person4} ariaLabel="Liam Caldwell" />
-          <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
-          <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
-          <Avatar type="img" src={person3} ariaLabel="Marco DiAngelo" />
-          <Avatar type="img" src={person4} ariaLabel="Liam Caldwell" />
-          <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
-          <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+          <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+          <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+          <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+          <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+          <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+          <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
         </AvatarGroup>
       </StoryDescription>
       <StoryDescription description="Medium" vertical align={StoryDescription.align.START}>
         <AvatarGroup size="medium" type="img" max={4}>
-          <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
-          <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
-          <Avatar type="img" src={person3} ariaLabel="Marco DiAngelo" />
-          <Avatar type="img" src={person4} ariaLabel="Liam Caldwell" />
-          <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
-          <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
-          <Avatar type="img" src={person3} ariaLabel="Marco DiAngelo" />
-          <Avatar type="img" src={person4} ariaLabel="Liam Caldwell" />
-          <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
-          <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
-          <Avatar type="img" src={person3} ariaLabel="Marco DiAngelo" />
-          <Avatar type="img" src={person4} ariaLabel="Liam Caldwell" />
-          <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
-          <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+          <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+          <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+          <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+          <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+          <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+          <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
         </AvatarGroup>
       </StoryDescription>
       <StoryDescription description="Small" vertical align={StoryDescription.align.START}>
         <AvatarGroup size="small" type="img" max={4}>
-          <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
-          <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
-          <Avatar type="img" src={person3} ariaLabel="Marco DiAngelo" />
-          <Avatar type="img" src={person4} ariaLabel="Liam Caldwell" />
-          <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
-          <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
-          <Avatar type="img" src={person3} ariaLabel="Marco DiAngelo" />
-          <Avatar type="img" src={person4} ariaLabel="Liam Caldwell" />
-          <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
-          <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
-          <Avatar type="img" src={person3} ariaLabel="Marco DiAngelo" />
-          <Avatar type="img" src={person4} ariaLabel="Liam Caldwell" />
-          <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
-          <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+          <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+          <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+          <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+          <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+          <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+          <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
         </AvatarGroup>
       </StoryDescription>
       <StoryDescription description="XS" vertical align={StoryDescription.align.START}>
         <AvatarGroup size="xs" type="img" max={4}>
-          <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
-          <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
-          <Avatar type="img" src={person3} ariaLabel="Marco DiAngelo" />
-          <Avatar type="img" src={person4} ariaLabel="Liam Caldwell" />
-          <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
-          <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
-          <Avatar type="img" src={person3} ariaLabel="Marco DiAngelo" />
-          <Avatar type="img" src={person4} ariaLabel="Liam Caldwell" />
-          <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
-          <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
-          <Avatar type="img" src={person3} ariaLabel="Marco DiAngelo" />
-          <Avatar type="img" src={person4} ariaLabel="Liam Caldwell" />
-          <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
-          <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+          <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+          <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+          <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+          <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+          <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+          <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
         </AvatarGroup>
       </StoryDescription>
     </Flex>
@@ -196,20 +196,20 @@ export const ColorVariants: Story = {
             color: "light"
           }}
         >
-          <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
-          <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
-          <Avatar type="img" src={person3} ariaLabel="Marco DiAngelo" />
-          <Avatar type="img" src={person4} ariaLabel="Liam Caldwell" />
-          <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
-          <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
-          <Avatar type="img" src={person3} ariaLabel="Marco DiAngelo" />
-          <Avatar type="img" src={person4} ariaLabel="Liam Caldwell" />
-          <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
-          <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
-          <Avatar type="img" src={person3} ariaLabel="Marco DiAngelo" />
-          <Avatar type="img" src={person4} ariaLabel="Liam Caldwell" />
-          <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
-          <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+          <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+          <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+          <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+          <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+          <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+          <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
         </AvatarGroup>
       </StoryDescription>
       <StoryDescription description="Dark" vertical align={StoryDescription.align.START}>
@@ -221,20 +221,20 @@ export const ColorVariants: Story = {
             color: "dark"
           }}
         >
-          <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
-          <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
-          <Avatar type="img" src={person3} ariaLabel="Marco DiAngelo" />
-          <Avatar type="img" src={person4} ariaLabel="Liam Caldwell" />
-          <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
-          <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
-          <Avatar type="img" src={person3} ariaLabel="Marco DiAngelo" />
-          <Avatar type="img" src={person4} ariaLabel="Liam Caldwell" />
-          <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
-          <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
-          <Avatar type="img" src={person3} ariaLabel="Marco DiAngelo" />
-          <Avatar type="img" src={person4} ariaLabel="Liam Caldwell" />
-          <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
-          <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+          <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+          <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+          <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+          <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+          <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+          <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
         </AvatarGroup>
       </StoryDescription>
     </Flex>
@@ -256,20 +256,20 @@ export const MaxAvatarsToDisplay: Story = {
           valueText={`${max}`}
         />
         <AvatarGroup size="large" max={max}>
-          <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
-          <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
-          <Avatar type="img" src={person3} ariaLabel="Marco DiAngelo" />
-          <Avatar type="img" src={person4} ariaLabel="Liam Caldwell" />
-          <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
-          <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
-          <Avatar type="img" src={person3} ariaLabel="Marco DiAngelo" />
-          <Avatar type="img" src={person4} ariaLabel="Liam Caldwell" />
-          <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
-          <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
-          <Avatar type="img" src={person3} ariaLabel="Marco DiAngelo" />
-          <Avatar type="img" src={person4} ariaLabel="Liam Caldwell" />
-          <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
-          <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+          <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+          <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+          <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+          <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+          <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+          <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
         </AvatarGroup>
       </Flex>
     );
@@ -281,24 +281,24 @@ export const HoverVsClickable: Story = {
     const getDummyAvatarsProps = useCallback((numItems: number) => {
       const avatarsProps = [
         {
-          type: Avatar.types.IMG,
+          type: "img",
           src: person1,
-          ariaLabel: "Julia Martinez"
+          "aria-label": "Julia Martinez"
         },
         {
-          type: Avatar.types.IMG,
+          type: "img",
           src: person2,
-          ariaLabel: "Sophia Johnson"
+          "aria-label": "Sophia Johnson"
         },
         {
-          type: Avatar.types.IMG,
+          type: "img",
           src: person3,
-          ariaLabel: "Marco DiAngelo"
+          "aria-label": "Marco DiAngelo"
         },
         {
-          type: Avatar.types.IMG,
+          type: "img",
           src: person4,
-          ariaLabel: "Liam Caldwell"
+          "aria-label": "Liam Caldwell"
         }
       ];
 
@@ -344,20 +344,20 @@ export const Disabled: Story = {
   render: () => {
     return (
       <AvatarGroup size="large" max={4} disabled>
-        <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
-        <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
-        <Avatar type="img" src={person3} ariaLabel="Marco DiAngelo" />
-        <Avatar type="img" src={person4} ariaLabel="Liam Caldwell" />
-        <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
-        <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
-        <Avatar type="img" src={person3} ariaLabel="Marco DiAngelo" />
-        <Avatar type="img" src={person4} ariaLabel="Liam Caldwell" />
-        <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
-        <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
-        <Avatar type="img" src={person3} ariaLabel="Marco DiAngelo" />
-        <Avatar type="img" src={person4} ariaLabel="Liam Caldwell" />
-        <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
-        <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
+        <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+        <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+        <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+        <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
+        <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+        <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+        <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+        <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
+        <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+        <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+        <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+        <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
+        <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+        <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
       </AvatarGroup>
     );
   }
@@ -368,20 +368,20 @@ export const LastSeenUsers: Story = {
     <Flex direction="row" gap="medium">
       <div>Last seen</div>
       <AvatarGroup size="medium" max={4} counterProps={{ color: "dark" }} type="img">
-        <Avatar src={person1} ariaLabel="Julia Martinez" />
-        <Avatar src={person2} ariaLabel="Sophia Johnson" />
-        <Avatar src={person3} ariaLabel="Marco DiAngelo" />
-        <Avatar src={person4} ariaLabel="Liam Caldwell" />
-        <Avatar src={person1} ariaLabel="Julia Martinez" />
-        <Avatar src={person2} ariaLabel="Sophia Johnson" />
-        <Avatar src={person3} ariaLabel="Marco DiAngelo" />
-        <Avatar src={person4} ariaLabel="Liam Caldwell" />
-        <Avatar src={person1} ariaLabel="Julia Martinez" />
-        <Avatar src={person2} ariaLabel="Sophia Johnson" />
-        <Avatar src={person3} ariaLabel="Marco DiAngelo" />
-        <Avatar src={person4} ariaLabel="Liam Caldwell" />
-        <Avatar src={person1} ariaLabel="Julia Martinez" />
-        <Avatar src={person2} ariaLabel="Sophia Johnson" />
+        <Avatar src={person1} aria-label="Julia Martinez" />
+        <Avatar src={person2} aria-label="Sophia Johnson" />
+        <Avatar src={person3} aria-label="Marco DiAngelo" />
+        <Avatar src={person4} aria-label="Liam Caldwell" />
+        <Avatar src={person1} aria-label="Julia Martinez" />
+        <Avatar src={person2} aria-label="Sophia Johnson" />
+        <Avatar src={person3} aria-label="Marco DiAngelo" />
+        <Avatar src={person4} aria-label="Liam Caldwell" />
+        <Avatar src={person1} aria-label="Julia Martinez" />
+        <Avatar src={person2} aria-label="Sophia Johnson" />
+        <Avatar src={person3} aria-label="Marco DiAngelo" />
+        <Avatar src={person4} aria-label="Liam Caldwell" />
+        <Avatar src={person1} aria-label="Julia Martinez" />
+        <Avatar src={person2} aria-label="Sophia Johnson" />
       </AvatarGroup>
     </Flex>
   )
@@ -400,10 +400,10 @@ export const CustomCounter: Story = {
         maxDigits: 5
       }}
     >
-      <Avatar src={person1} ariaLabel="Julia Martinez" />
-      <Avatar src={person2} ariaLabel="Sophia Johnson" />
-      <Avatar src={person3} ariaLabel="Marco DiAngelo" />
-      <Avatar src={person4} ariaLabel="Liam Caldwell" />
+      <Avatar src={person1} aria-label="Julia Martinez" />
+      <Avatar src={person2} aria-label="Sophia Johnson" />
+      <Avatar src={person3} aria-label="Marco DiAngelo" />
+      <Avatar src={person4} aria-label="Liam Caldwell" />
     </AvatarGroup>
   )
 };
@@ -441,14 +441,14 @@ export const CounterCustomTooltipContent: Story = {
         content: "... and plenty more employees"
       }}
     >
-      <Avatar src={person1} ariaLabel="Julia Martinez" />
-      <Avatar src={person2} ariaLabel="Sophia Johnson" />
-      <Avatar src={person3} ariaLabel="Marco DiAngelo" />
-      <Avatar src={person4} ariaLabel="Liam Caldwell" />
-      <Avatar src={person1} ariaLabel="Julia Martinez" />
-      <Avatar src={person2} ariaLabel="Sophia Johnson" />
-      <Avatar src={person3} ariaLabel="Marco DiAngelo" />
-      <Avatar src={person4} ariaLabel="Liam Caldwell" />
+      <Avatar src={person1} aria-label="Julia Martinez" />
+      <Avatar src={person2} aria-label="Sophia Johnson" />
+      <Avatar src={person3} aria-label="Marco DiAngelo" />
+      <Avatar src={person4} aria-label="Liam Caldwell" />
+      <Avatar src={person1} aria-label="Julia Martinez" />
+      <Avatar src={person2} aria-label="Sophia Johnson" />
+      <Avatar src={person3} aria-label="Marco DiAngelo" />
+      <Avatar src={person4} aria-label="Liam Caldwell" />
     </AvatarGroup>
   )
 };
@@ -456,10 +456,10 @@ export const CounterCustomTooltipContent: Story = {
 export const VirtualizedList: Story = {
   render: () => {
     const avatars = [
-      <Avatar src={person1} ariaLabel="Julia Martinez" />,
-      <Avatar src={person2} ariaLabel="Sophia Johnson" />,
-      <Avatar src={person3} ariaLabel="Marco DiAngelo" />,
-      <Avatar src={person4} ariaLabel="Liam Caldwell" />
+      <Avatar src={person1} aria-label="Julia Martinez" />,
+      <Avatar src={person2} aria-label="Sophia Johnson" />,
+      <Avatar src={person3} aria-label="Marco DiAngelo" />,
+      <Avatar src={person4} aria-label="Liam Caldwell" />
     ];
 
     const getDummyAvatars = (multiplier: number) => {
@@ -514,7 +514,7 @@ export const DisplayingTeams: Story = {
         <TableRow>
           <TableCell>
             <Flex direction="row" gap="small">
-              <Avatar type="img" src={person1} size="medium" ariaLabel="Julia Martinez" />
+              <Avatar type="img" src={person1} size="medium" aria-label="Julia Martinez" />
               Julia Martinez
             </Flex>
           </TableCell>
@@ -528,9 +528,9 @@ export const DisplayingTeams: Story = {
                 ariaLabelItemsName: "teams"
               }}
             >
-              <Avatar type="text" text="T1" backgroundColor="peach" ariaLabel="Team 1" />
-              <Avatar type="text" text="T2" backgroundColor="bubble" ariaLabel="Team 2" />
-              <Avatar type="text" text="T3" backgroundColor="berry" ariaLabel="Team 3" />
+              <Avatar type="text" text="T1" backgroundColor="peach" aria-label="Team 1" />
+              <Avatar type="text" text="T2" backgroundColor="bubble" aria-label="Team 2" />
+              <Avatar type="text" text="T3" backgroundColor="berry" aria-label="Team 3" />
             </AvatarGroup>
           </TableCell>
         </TableRow>
diff --git a/packages/docs/src/pages/components/Badge/Badge.stories.tsx b/packages/docs/src/pages/components/Badge/Badge.stories.tsx
index 79c89c92b6..4306fd195c 100644
--- a/packages/docs/src/pages/components/Badge/Badge.stories.tsx
+++ b/packages/docs/src/pages/components/Badge/Badge.stories.tsx
@@ -26,7 +26,7 @@ export const Overview = {
   args: {
     id: "overview-badge",
     children: (
-      <Button id="overview-badge-button" ariaLabel="What's new button with badge" leftIcon={WhatsNew}>
+      <Button id="overview-badge-button" aria-label="What's new button with badge" leftIcon={WhatsNew}>
         {"What's new"}
       </Button>
     )
@@ -46,15 +46,15 @@ export const States = {
       <Flex direction="column" gap="medium" align="start">
         Indicator
         <Badge id="indicator-badge">
-          <Button id="indicator-button" ariaLabel="What's new button with indicator" leftIcon={WhatsNew}>
+          <Button id="indicator-button" aria-label="What's new button with indicator" leftIcon={WhatsNew}>
             {"What's new"}
           </Button>
         </Badge>
       </Flex>
       <Flex direction="column" gap="medium" align="start">
         Counter
-        <Badge id="counter-badge" type="counter" count={100} maxDigits={2} ariaLabel="100 notifications">
-          <Button id="counter-button" ariaLabel="What's new button with counter" leftIcon={WhatsNew}>
+        <Badge id="counter-badge" type="counter" count={100} maxDigits={2} aria-label="100 notifications">
+          <Button id="counter-button" aria-label="What's new button with counter" leftIcon={WhatsNew}>
             {"What's new"}
           </Button>
         </Badge>
@@ -74,7 +74,7 @@ export const States = {
 export const ButtonStory = {
   render: () => (
     <Badge id="button-badge" alignment="rectangular">
-      <Button id="button-story-button" ariaLabel="Button with external page icon and badge" leftIcon={ExternalPage}>
+      <Button id="button-story-button" aria-label="Button with external page icon and badge" leftIcon={ExternalPage}>
         Button
       </Button>
     </Badge>
diff --git a/packages/docs/src/pages/components/BaseList/BaseList.stories.tsx b/packages/docs/src/pages/components/BaseList/BaseList.stories.tsx
index e0340cb1a1..bfcaafc2f6 100644
--- a/packages/docs/src/pages/components/BaseList/BaseList.stories.tsx
+++ b/packages/docs/src/pages/components/BaseList/BaseList.stories.tsx
@@ -14,7 +14,7 @@ export default {
 
 export const Overview: Story = {
   render: args => (
-    <BaseList {...args} ariaLabel="Example list" style={{ width: 300 }}>
+    <BaseList {...args} aria-label="Example list" style={{ width: 300 }}>
       <BaseItem
         item={{
           value: "1",
@@ -42,7 +42,7 @@ export const Overview: Story = {
 
 export const WithSelectedItem: Story = {
   render: () => (
-    <BaseList ariaLabel="List with selection" style={{ width: 300 }} size="small">
+    <BaseList aria-label="List with selection" style={{ width: 300 }} size="small">
       <BaseItem item={{ value: "1", label: "Unselected item" }} />
       <BaseItem item={{ value: "2", label: "Selected item" }} selected />
       <BaseItem item={{ value: "3", label: "Another unselected item" }} />
@@ -52,7 +52,7 @@ export const WithSelectedItem: Story = {
 
 export const WithDisabledItems: Story = {
   render: () => (
-    <BaseList ariaLabel="List with disabled items" style={{ width: 300 }}>
+    <BaseList aria-label="List with disabled items" style={{ width: 300 }}>
       <BaseItem item={{ value: "1", label: "Enabled item" }} />
       <BaseItem item={{ value: "2", label: "Disabled item", disabled: true }} />
       <BaseItem item={{ value: "3", label: "Another enabled item" }} />
@@ -62,7 +62,7 @@ export const WithDisabledItems: Story = {
 
 export const ScrollableList: Story = {
   render: () => (
-    <BaseList ariaLabel="Scrollable list" maxHeight={200} style={{ width: 300 }}>
+    <BaseList aria-label="Scrollable list" maxHeight={200} style={{ width: 300 }}>
       {Array.from({ length: 10 }, (_, i) => (
         <BaseItem key={i} item={{ value: String(i), label: `Item ${i + 1}` }} />
       ))}
@@ -77,7 +77,7 @@ export const WithFocusCallback: Story = {
     return (
       <div>
         <p style={{ marginBottom: 16 }}>Currently focused index: {focusedIndex}</p>
-        <BaseList ariaLabel="List with focus callback" onFocusChange={setFocusedIndex} style={{ width: 300 }}>
+        <BaseList aria-label="List with focus callback" onFocusChange={setFocusedIndex} style={{ width: 300 }}>
           <BaseItem
             item={{
               value: "1",
@@ -110,21 +110,21 @@ export const Sizes: Story = {
     <div style={{ display: "flex", gap: 24 }}>
       <div>
         <p style={{ marginBottom: 8 }}>Small</p>
-        <BaseList ariaLabel="Small list" size="small" style={{ width: 200 }}>
+        <BaseList aria-label="Small list" size="small" style={{ width: 200 }}>
           <BaseItem item={{ value: "1", label: "Small item 1" }} />
           <BaseItem item={{ value: "2", label: "Small item 2" }} />
         </BaseList>
       </div>
       <div>
         <p style={{ marginBottom: 8 }}>Medium</p>
-        <BaseList ariaLabel="Medium list" size="medium" style={{ width: 200 }}>
+        <BaseList aria-label="Medium list" size="medium" style={{ width: 200 }}>
           <BaseItem item={{ value: "1", label: "Medium item 1" }} />
           <BaseItem item={{ value: "2", label: "Medium item 2" }} />
         </BaseList>
       </div>
       <div>
         <p style={{ marginBottom: 8 }}>Large</p>
-        <BaseList ariaLabel="Large list" size="large" style={{ width: 200 }}>
+        <BaseList aria-label="Large list" size="large" style={{ width: 200 }}>
           <BaseItem item={{ value: "1", label: "Large item 1" }} />
           <BaseItem item={{ value: "2", label: "Large item 2" }} />
         </BaseList>
@@ -135,7 +135,7 @@ export const Sizes: Story = {
 
 export const AsMenu: Story = {
   render: () => (
-    <BaseList ariaLabel="Menu example" role="menu" style={{ width: 250 }}>
+    <BaseList aria-label="Menu example" role="menu" style={{ width: 250 }}>
       <BaseItem
         item={{
           value: "profile",
@@ -170,7 +170,7 @@ export const KeyboardNavigationWithLooping: Story = {
       <p style={{ marginBottom: 16 }}>
         Try using arrow keys to navigate. The focus will wrap from the last item to the first (and vice versa).
       </p>
-      <BaseList ariaLabel="List with keyboard navigation" style={{ width: 300 }}>
+      <BaseList aria-label="List with keyboard navigation" style={{ width: 300 }}>
         <BaseItem item={{ value: "1", label: "First item - Press ↑ to wrap to last" }} />
         <BaseItem item={{ value: "2", label: "Second item" }} />
         <BaseItem item={{ value: "3", label: "Third item" }} />
@@ -186,7 +186,7 @@ export const HomeEndNavigation: Story = {
       <p style={{ marginBottom: 16 }}>
         Press <strong>Home</strong> to jump to the first item, or <strong>End</strong> to jump to the last item.
       </p>
-      <BaseList ariaLabel="List with Home/End navigation" style={{ width: 300 }}>
+      <BaseList aria-label="List with Home/End navigation" style={{ width: 300 }}>
         {Array.from({ length: 8 }, (_, i) => (
           <BaseItem key={i} item={{ value: String(i), label: `Item ${i + 1}` }} />
         ))}
@@ -201,7 +201,7 @@ export const PageUpDownNavigation: Story = {
       <p style={{ marginBottom: 16 }}>
         Press <strong>Page Up</strong> or <strong>Page Down</strong> to move by 10 items at a time.
       </p>
-      <BaseList ariaLabel="List with PageUp/PageDown navigation" maxHeight={300} style={{ width: 300 }}>
+      <BaseList aria-label="List with PageUp/PageDown navigation" maxHeight={300} style={{ width: 300 }}>
         {Array.from({ length: 25 }, (_, i) => (
           <BaseItem key={i} item={{ value: String(i), label: `Item ${i + 1}` }} />
         ))}
@@ -214,7 +214,7 @@ export const DefaultFocusIndex: Story = {
   render: () => (
     <div>
       <p style={{ marginBottom: 16 }}>This list starts with the third item focused (defaultFocusIndex=2).</p>
-      <BaseList ariaLabel="List with default focus" defaultFocusIndex={2} style={{ width: 300 }}>
+      <BaseList aria-label="List with default focus" defaultFocusIndex={2} style={{ width: 300 }}>
         <BaseItem item={{ value: "1", label: "First item" }} />
         <BaseItem item={{ value: "2", label: "Second item" }} />
         <BaseItem item={{ value: "3", label: "Third item (initially focused)" }} />
@@ -232,7 +232,7 @@ export const WithAriaControls: Story = {
         <p style={{ marginBottom: 16 }}>
           This list controls the details panel below (using <code>aria-controls</code>).
         </p>
-        <BaseList ariaLabel="Navigation list" aria-controls={detailsId} style={{ width: 300 }}>
+        <BaseList aria-label="Navigation list" aria-controls={detailsId} style={{ width: 300 }}>
           <BaseItem
             item={{
               value: "1",
diff --git a/packages/docs/src/pages/components/BreadcrumbsBar/BreadcrumbsBar.stories.helpers.tsx b/packages/docs/src/pages/components/BreadcrumbsBar/BreadcrumbsBar.stories.helpers.tsx
index 9aaaff98b8..f61d8ee5bb 100644
--- a/packages/docs/src/pages/components/BreadcrumbsBar/BreadcrumbsBar.stories.helpers.tsx
+++ b/packages/docs/src/pages/components/BreadcrumbsBar/BreadcrumbsBar.stories.helpers.tsx
@@ -4,7 +4,7 @@ import { StorybookLink, Tip } from "vibe-storybook-components";
 export const TipCheckYourself = () => (
   <Tip title="Check yourself">
     If you are taking users through a multistep process, use the{" "}
-    <StorybookLink page="Components/MultiStepIndicator" size={StorybookLink.sizes.SMALL}>
+    <StorybookLink page="Components/MultiStepIndicator" size="small">
       MultiStepIndicator
     </StorybookLink>{" "}
     component instead.
diff --git a/packages/docs/src/pages/components/Button/Button.stories.helpers.tsx b/packages/docs/src/pages/components/Button/Button.stories.helpers.tsx
index 5810382328..9cf61ce472 100644
--- a/packages/docs/src/pages/components/Button/Button.stories.helpers.tsx
+++ b/packages/docs/src/pages/components/Button/Button.stories.helpers.tsx
@@ -4,7 +4,7 @@ import { StorybookLink, Tip } from "vibe-storybook-components";
 export const TipIconButton = () => (
   <Tip>
     If you need to use icon as button with no text, check out{" "}
-    <StorybookLink page="Components/IconButton" size={StorybookLink.sizes.SMALL}>
+    <StorybookLink page="Components/IconButton" size="small">
       IconButton
     </StorybookLink>{" "}
     component
diff --git a/packages/docs/src/pages/components/Button/Button.stories.tsx b/packages/docs/src/pages/components/Button/Button.stories.tsx
index fa79c602a3..a7d46d757f 100644
--- a/packages/docs/src/pages/components/Button/Button.stories.tsx
+++ b/packages/docs/src/pages/components/Button/Button.stories.tsx
@@ -27,7 +27,7 @@ export const Overview: Story = {
   render: buttonTemplate.bind({}),
   args: {
     id: "overview-button",
-    ariaLabel: "Button",
+    "aria-label": "Button",
     children: "Button"
   },
   parameters: {
@@ -42,13 +42,13 @@ export const Overview: Story = {
 export const ButtonKinds: Story = {
   render: () => (
     <>
-      <Button id="button-kinds-primary" ariaLabel="Primary button">
+      <Button id="button-kinds-primary" aria-label="Primary button">
         Primary
       </Button>
-      <Button id="button-kinds-secondary" ariaLabel="Secondary button" kind="secondary">
+      <Button id="button-kinds-secondary" aria-label="Secondary button" kind="secondary">
         Secondary
       </Button>
-      <Button id="button-kinds-tertiary" ariaLabel="Tertiary button" kind="tertiary">
+      <Button id="button-kinds-tertiary" aria-label="Tertiary button" kind="tertiary">
         Tertiary
       </Button>
     </>
@@ -59,13 +59,13 @@ export const ButtonKinds: Story = {
 export const Sizes: Story = {
   render: () => (
     <>
-      <Button id="sizes-large" ariaLabel="Large button" size="large">
+      <Button id="sizes-large" aria-label="Large button" size="large">
         Large
       </Button>
-      <Button id="sizes-medium" ariaLabel="Medium button" size="medium">
+      <Button id="sizes-medium" aria-label="Medium button" size="medium">
         Medium
       </Button>
-      <Button id="sizes-small" ariaLabel="Small button" size="small">
+      <Button id="sizes-small" aria-label="Small button" size="small">
         Small
       </Button>
     </>
@@ -75,13 +75,13 @@ export const Sizes: Story = {
 export const Disabled: Story = {
   render: () => (
     <>
-      <Button id="disabled-primary" ariaLabel="Primary button disabled" disabled>
+      <Button id="disabled-primary" aria-label="Primary button disabled" disabled>
         Primary
       </Button>
-      <Button id="disabled-secondary" ariaLabel="Secondary button disabled" kind="secondary" disabled>
+      <Button id="disabled-secondary" aria-label="Secondary button disabled" kind="secondary" disabled>
         Secondary
       </Button>
-      <Button id="disabled-tertiary" ariaLabel="Tertiary button disabled" kind="tertiary" disabled>
+      <Button id="disabled-tertiary" aria-label="Tertiary button disabled" kind="tertiary" disabled>
         Tertiary
       </Button>
     </>
@@ -91,10 +91,10 @@ export const Disabled: Story = {
 export const States: Story = {
   render: () => (
     <>
-      <Button id="state-regular" ariaLabel="Regular button">
+      <Button id="state-regular" aria-label="Regular button">
         Regular
       </Button>
-      <Button id="state-active" ariaLabel="Active button" active>
+      <Button id="state-active" aria-label="Active button" active>
         Active
       </Button>
     </>
@@ -104,10 +104,10 @@ export const States: Story = {
 export const PositiveAndNegative: Story = {
   render: () => (
     <>
-      <Button id="color-positive" ariaLabel="Positive button" color="positive">
+      <Button id="color-positive" aria-label="Positive button" color="positive">
         Positive
       </Button>
-      <Button id="color-negative" ariaLabel="Negative button" color="negative">
+      <Button id="color-negative" aria-label="Negative button" color="negative">
         Negative
       </Button>
     </>
@@ -118,10 +118,10 @@ export const PositiveAndNegative: Story = {
 export const Icons: Story = {
   render: () => (
     <>
-      <Button id="icons-right" rightIcon={Calendar} ariaLabel="Open calendar on the right icon button">
+      <Button id="icons-right" rightIcon={Calendar} aria-label="Open calendar on the right icon button">
         Right icon
       </Button>
-      <Button id="icons-left" leftIcon={Calendar} ariaLabel="Open calendar on the left icon button">
+      <Button id="icons-left" leftIcon={Calendar} aria-label="Open calendar on the left icon button">
         Left icon
       </Button>
     </>
@@ -142,7 +142,7 @@ export const LoadingState: Story = {
       setLoading(true);
     }, [setLoading]);
     return (
-      <Button id="loading-state-button" ariaLabel="Start loading" loading={loading} onClick={onClick}>
+      <Button id="loading-state-button" aria-label="Start loading" loading={loading} onClick={onClick}>
         Click here for loading
       </Button>
     );
@@ -159,7 +159,7 @@ export const SuccessState: Story = {
     return (
       <Button
         id="success-state-button"
-        ariaLabel="Trigger success"
+        aria-label="Trigger success"
         success={success}
         onClick={onClick}
         successIcon={Check}
@@ -185,19 +185,19 @@ export const OnColorStates: Story = {
       <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
         <Text type="text1">Regular</Text>
         <div style={{ backgroundColor: "var(--sb-primary-color)", padding: "16px" }}>
-          <Button id="on-color-primary" ariaLabel="Primary on color" color="on-primary-color" marginRight>
+          <Button id="on-color-primary" aria-label="Primary on color" color="on-primary-color" marginRight>
             Primary on color
           </Button>
           <Button
             id="on-color-secondary"
-            ariaLabel="Secondary on color"
+            aria-label="Secondary on color"
             color="on-primary-color"
             kind="secondary"
             marginRight
           >
             Secondary on color
           </Button>
-          <Button id="on-color-tertiary" ariaLabel="Tertiary on color" color="on-primary-color" kind="tertiary">
+          <Button id="on-color-tertiary" aria-label="Tertiary on color" color="on-primary-color" kind="tertiary">
             Tertiary on color
           </Button>
         </div>
@@ -208,7 +208,7 @@ export const OnColorStates: Story = {
         <div style={{ backgroundColor: "var(--sb-primary-color)", padding: "16px" }}>
           <Button
             id="on-color-primary-disabled"
-            ariaLabel="Primary on color disabled"
+            aria-label="Primary on color disabled"
             color="on-primary-color"
             disabled
             marginRight
@@ -217,7 +217,7 @@ export const OnColorStates: Story = {
           </Button>
           <Button
             id="on-color-secondary-disabled"
-            ariaLabel="Secondary on color disabled"
+            aria-label="Secondary on color disabled"
             color="on-primary-color"
             disabled
             marginRight
@@ -227,7 +227,7 @@ export const OnColorStates: Story = {
           </Button>
           <Button
             id="on-color-tertiary-disabled"
-            ariaLabel="Tertiary on color disabled"
+            aria-label="Tertiary on color disabled"
             color="on-primary-color"
             disabled
             kind="tertiary"
@@ -244,10 +244,10 @@ export const OnColorStates: Story = {
 export const AdjacentButtons: Story = {
   render: () => (
     <div>
-      <Button id="decrease-zoom-button" kind="secondary" size="small" ariaLabel="Decrease zoom level" rightFlat>
+      <Button id="decrease-zoom-button" kind="secondary" size="small" aria-label="Decrease zoom level" rightFlat>
         <Remove />
       </Button>
-      <Button id="increase-zoom-button" kind="secondary" size="small" ariaLabel="Increase zoom level" leftFlat>
+      <Button id="increase-zoom-button" kind="secondary" size="small" aria-label="Increase zoom level" leftFlat>
         <Add />
       </Button>
     </div>
diff --git a/packages/docs/src/pages/components/ButtonGroup/ButtonGroup.mdx b/packages/docs/src/pages/components/ButtonGroup/ButtonGroup.mdx
index 7471a573dc..59fd1eaaa1 100644
--- a/packages/docs/src/pages/components/ButtonGroup/ButtonGroup.mdx
+++ b/packages/docs/src/pages/components/ButtonGroup/ButtonGroup.mdx
@@ -131,7 +131,7 @@ import { ButtonGroup } from "@vibe/core";
           <Flex direction="column" gap={16}>
             <ButtonGroup
               groupAriaLabel="button group aria label"
-              size={ButtonGroup.sizes.MEDIUM}
+              size="medium"
               value={1}
               options={[
                 { value: 1, leftIcon: Desktop },
@@ -140,7 +140,7 @@ import { ButtonGroup } from "@vibe/core";
             />
             <ButtonGroup
               groupAriaLabel="button group aria label"
-              size={ButtonGroup.sizes.MEDIUM}
+              size="medium"
               value={1}
               options={[
                 { value: 1, text: "Desktop" },
@@ -149,7 +149,7 @@ import { ButtonGroup } from "@vibe/core";
             />
             <ButtonGroup
               groupAriaLabel="button group aria label"
-              size={ButtonGroup.sizes.MEDIUM}
+              size="medium"
               value={1}
               options={[
                 { value: 1, text: "Desktop", leftIcon: Desktop },
@@ -164,7 +164,7 @@ import { ButtonGroup } from "@vibe/core";
         component: (
           <ButtonGroup
             groupAriaLabel="button group aria label"
-            size={ButtonGroup.sizes.MEDIUM}
+            size="medium"
             value={1}
             options={[
               { value: 1, text: "Desktop" },
diff --git a/packages/docs/src/pages/components/ButtonGroup/ButtonGroup.stories.helpers.tsx b/packages/docs/src/pages/components/ButtonGroup/ButtonGroup.stories.helpers.tsx
index 52bc2d1c3a..4fa06b7622 100644
--- a/packages/docs/src/pages/components/ButtonGroup/ButtonGroup.stories.helpers.tsx
+++ b/packages/docs/src/pages/components/ButtonGroup/ButtonGroup.stories.helpers.tsx
@@ -5,7 +5,7 @@ export const TipCheckYourself = () => (
   <Tip title="Check yourself">
     Button group will always have one button selected. If you need to display adjacent buttons without selected mode,
     use the{" "}
-    <StorybookLink page="Docs/Buttons/Button" size={StorybookLink.sizes.SMALL}>
+    <StorybookLink page="Docs/Buttons/Button" size="small">
       Button
     </StorybookLink>
     {` component with "Flat" props.`}
diff --git a/packages/docs/src/pages/components/ButtonGroup/ButtonGroup.stories.tsx b/packages/docs/src/pages/components/ButtonGroup/ButtonGroup.stories.tsx
index 42773ac6d3..35c89a89b3 100644
--- a/packages/docs/src/pages/components/ButtonGroup/ButtonGroup.stories.tsx
+++ b/packages/docs/src/pages/components/ButtonGroup/ButtonGroup.stories.tsx
@@ -90,7 +90,7 @@ export const Tertiary: Story = {
       id="tertiary-button-group"
       groupAriaLabel="Tertiary button group"
       value={1}
-      kind={ButtonGroup.kinds.TERTIARY}
+      kind="tertiary"
       options={[
         {
           value: 1,
@@ -175,11 +175,11 @@ export const Size: Story = {
   render: () => (
     <Flex gap={60}>
       <Flex direction="column" gap={16} align="start">
-        <Text type={Text.types.TEXT1}>Medium</Text>
+        <Text type="text1">Medium</Text>
         <ButtonGroup
           id="size-medium-button-group"
           groupAriaLabel="Medium size button group"
-          size={ButtonGroup.sizes.MEDIUM}
+          size="medium"
           value={1}
           options={[
             { value: 1, text: "Alpha" },
@@ -190,11 +190,11 @@ export const Size: Story = {
         />
       </Flex>
       <Flex direction="column" gap={16} align="start">
-        <Text type={Text.types.TEXT1}>Small</Text>
+        <Text type="text1">Small</Text>
         <ButtonGroup
           id="size-small-button-group"
           groupAriaLabel="Small size button group"
-          size={ButtonGroup.sizes.SMALL}
+          size="small"
           value={1}
           options={[
             { value: 1, text: "Alpha" },
@@ -211,11 +211,11 @@ export const Size: Story = {
 export const ButtonGroupInSettings: Story = {
   render: () => (
     <Flex direction="column" gap={16} align="start">
-      <Text type={Text.types.TEXT1}>Function</Text>
+      <Text type="text1">Function</Text>
       <ButtonGroup
         id="settings-button-group"
         groupAriaLabel="Function selection button group"
-        size={ButtonGroup.sizes.SMALL}
+        size="small"
         value={1}
         options={[
           {
diff --git a/packages/docs/src/pages/components/Checkbox/Checkbox.stories.helpers.tsx b/packages/docs/src/pages/components/Checkbox/Checkbox.stories.helpers.tsx
index cf4f804e22..909434fec0 100644
--- a/packages/docs/src/pages/components/Checkbox/Checkbox.stories.helpers.tsx
+++ b/packages/docs/src/pages/components/Checkbox/Checkbox.stories.helpers.tsx
@@ -4,7 +4,7 @@ import { StorybookLink, Tip } from "vibe-storybook-components";
 export const TipAmIUsingTheRightComponent = () => (
   <Tip title="Am I using the right component?">
     For settings that are immediately applied, consider using a{" "}
-    <StorybookLink page="Components/Toggle" size={StorybookLink.sizes.SMALL}>
+    <StorybookLink page="Components/Toggle" size="small">
       toggle switch
     </StorybookLink>{" "}
     instead.
diff --git a/packages/docs/src/pages/components/Checkbox/Checkbox.stories.tsx b/packages/docs/src/pages/components/Checkbox/Checkbox.stories.tsx
index 8662342f1b..80faf6f0f6 100644
--- a/packages/docs/src/pages/components/Checkbox/Checkbox.stories.tsx
+++ b/packages/docs/src/pages/components/Checkbox/Checkbox.stories.tsx
@@ -26,7 +26,7 @@ export const Overview: Story = {
     label: "Option",
     defaultChecked: true,
     id: "checkbox-1",
-    ariaLabel: "Checkbox option"
+    "aria-label": "Checkbox option"
   },
   parameters: {
     docs: {
@@ -40,17 +40,17 @@ export const Overview: Story = {
 export const States: Story = {
   render: () => (
     <>
-      <Checkbox label="Regular" id="checkbox-2" ariaLabel="Regular checkbox" />
-      <Checkbox label="Selected" checked id="checkbox-3" ariaLabel="Selected checkbox" />
-      <Checkbox label="Indeterminate" indeterminate id="checkbox-4" ariaLabel="Indeterminate checkbox" />
-      <Checkbox label="Disabled" disabled id="checkbox-5" ariaLabel="Disabled checkbox" />
-      <Checkbox label="Disabled checked" disabled checked id="checkbox-6" ariaLabel="Disabled checked checkbox" />
+      <Checkbox label="Regular" id="checkbox-2" aria-label="Regular checkbox" />
+      <Checkbox label="Selected" checked id="checkbox-3" aria-label="Selected checkbox" />
+      <Checkbox label="Indeterminate" indeterminate id="checkbox-4" aria-label="Indeterminate checkbox" />
+      <Checkbox label="Disabled" disabled id="checkbox-5" aria-label="Disabled checkbox" />
+      <Checkbox label="Disabled checked" disabled checked id="checkbox-6" aria-label="Disabled checked checkbox" />
       <Checkbox
         label="Disabled indeterminate"
         disabled
         indeterminate
         id="checkbox-7"
-        ariaLabel="Disabled indeterminate checkbox"
+        aria-label="Disabled indeterminate checkbox"
       />
     </>
   )
@@ -60,7 +60,7 @@ export const SingleCheckbox: Story = {
   render: () => (
     <Checkbox
       id="single-checkbox"
-      ariaLabel="Agree to terms and privacy policy"
+      aria-label="Agree to terms and privacy policy"
       checked
       label={
         <>
diff --git a/packages/docs/src/pages/components/Chips/Chips.stories.helpers.tsx b/packages/docs/src/pages/components/Chips/Chips.stories.helpers.tsx
index 6279d22fff..c9eefbcda0 100644
--- a/packages/docs/src/pages/components/Chips/Chips.stories.helpers.tsx
+++ b/packages/docs/src/pages/components/Chips/Chips.stories.helpers.tsx
@@ -4,7 +4,7 @@ import { StorybookLink, Tip } from "vibe-storybook-components";
 export const TipLabel = () => (
   <Tip>
     Chips will always show up in context of a field. If you just need to add information, use{" "}
-    <StorybookLink page="Components/Label" size={StorybookLink.sizes.SMALL}>
+    <StorybookLink page="Components/Label" size="small">
       Label.
     </StorybookLink>
   </Tip>
diff --git a/packages/docs/src/pages/components/Chips/Chips.stories.tsx b/packages/docs/src/pages/components/Chips/Chips.stories.tsx
index 2076f71f1e..68d2ac08cd 100644
--- a/packages/docs/src/pages/components/Chips/Chips.stories.tsx
+++ b/packages/docs/src/pages/components/Chips/Chips.stories.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { chunk as _chunk } from "es-toolkit";
-import { Chips, Text, Avatar, DialogContentContainer, Flex, Search } from "@vibe/core";
+import { Chips, Text, Avatar, DialogContentContainer, Flex, Search, ColorUtils } from "@vibe/core";
 import { createStoryMetaSettingsDecorator } from "../../../utils/createStoryMetaSettingsDecorator";
 import { createComponentTemplate } from "vibe-storybook-components";
 import { Email } from "@vibe/icons";
@@ -28,7 +28,7 @@ export const Overview = {
 
   args: {
     id: "overview-chip",
-    ariaLabel: "Overview chip",
+    "aria-label": "Overview chip",
     label: "This is a chip",
     onMouseDown: () => {},
     onClick: () => {}
@@ -43,17 +43,17 @@ export const Overview = {
 };
 
 export const ChipsWithReadOnlyState = {
-  render: () => <Chips id="readonly-chip" ariaLabel="Read only chip" label="Read only chip" readOnly />,
+  render: () => <Chips id="readonly-chip" aria-label="Read only chip" label="Read only chip" readOnly />,
   name: "Chips with read only state"
 };
 
 export const ChipsWithIcons = {
   render: () => (
     <Flex gap="medium">
-      <Chips id="chip-left-icon" ariaLabel="Chip with left email icon" label="Chip with left icon" leftIcon={Email} />
+      <Chips id="chip-left-icon" aria-label="Chip with left email icon" label="Chip with left icon" leftIcon={Email} />
       <Chips
         id="chip-right-icon"
-        ariaLabel="Chip with right email icon"
+        aria-label="Chip with right email icon"
         label="Chip with right icon"
         rightIcon={Email}
       />
@@ -74,13 +74,13 @@ export const ChipsWithAvatars = {
     <Flex gap="medium">
       <Chips
         id="chip-left-avatar"
-        ariaLabel="Chip with left avatar"
+        aria-label="Chip with left avatar"
         label="Chip with left avatar"
         leftAvatar={person1}
       />
       <Chips
         id="chip-right-avatar"
-        ariaLabel="Chip with right avatar"
+        aria-label="Chip with right avatar"
         label="Chip with right avatar"
         rightAvatar={person1}
       />
@@ -99,12 +99,12 @@ export const ChipsWithAvatars = {
 export const Themes = {
   render: () => (
     <>
-      <Chips id="theme-long" ariaLabel="Long chip" label="This is a long chip" />
-      <Chips id="theme-positive" ariaLabel="Positive chip" label="Chip positive" color="positive" />
-      <Chips id="theme-negative" ariaLabel="Negative chip" label="Chip negative" color="negative" />
-      <Chips id="theme-warning" ariaLabel="Warning chip" label="Chip warning" color="warning" />
-      <Chips id="theme-neutral" ariaLabel="Neutral chip" label="Chip neutral" color="neutral" />
-      <Chips id="theme-disabled" ariaLabel="Disabled chip" label="Disabled" disabled />
+      <Chips id="theme-long" aria-label="Long chip" label="This is a long chip" />
+      <Chips id="theme-positive" aria-label="Positive chip" label="Chip positive" color="positive" />
+      <Chips id="theme-negative" aria-label="Negative chip" label="Chip negative" color="negative" />
+      <Chips id="theme-warning" aria-label="Warning chip" label="Chip warning" color="warning" />
+      <Chips id="theme-neutral" aria-label="Neutral chip" label="Chip neutral" color="neutral" />
+      <Chips id="theme-disabled" aria-label="Disabled chip" label="Disabled" disabled />
     </>
   ),
   name: "Themes"
@@ -116,14 +116,14 @@ export const Clickable = {
       <Flex direction="row" gap="medium" align="start">
         <Chips
           id="clickable-default"
-          ariaLabel="Clickable default chip"
+          aria-label="Clickable default chip"
           label="Clickable default chip"
           readOnly
           onClick={() => {}}
         />
         <Chips
           id="clickable-removable"
-          ariaLabel="Clickable removable chip"
+          aria-label="Clickable removable chip"
           label="Clickable removable chip"
           onClick={() => {}}
         />
@@ -135,12 +135,13 @@ export const Clickable = {
 
 export const ChipsPalette = {
   render: () => {
-    const excludedColors = [Chips.colors.DARK_INDIGO, Chips.colors.BLACKISH];
-    const allowedColorsChunks = _chunk(
-      // @ts-ignore
-      Object.keys(Chips.colors).filter(k => !excludedColors.includes(Chips.colors[k])),
-      7
-    );
+    const excludedColors = ["dark_indigo", "blackish"];
+    const stateColors = ["positive", "negative", "primary", "warning", "neutral"];
+    const allColors = [
+      ...ColorUtils.contentColors.filter((c: string) => !excludedColors.includes(c)),
+      ...stateColors
+    ];
+    const allowedColorsChunks = _chunk(allColors, 7);
     return (
       <Flex
         style={{
@@ -153,8 +154,7 @@ export const ChipsPalette = {
           return (
             <Flex direction="column" key={colorChunk} justify="space-between" align="stretch">
               {colorChunk.map((colorName: any) => (
-                // @ts-ignore
-                <Chips label={colorName} key={colorName} color={Chips.colors[colorName]} readOnly allowTextSelection />
+                <Chips label={colorName} key={colorName} color={colorName} readOnly allowTextSelection />
               ))}
             </Flex>
           );
@@ -165,7 +165,7 @@ export const ChipsPalette = {
   parameters: {
     docs: {
       liveEdit: {
-        scope: { _chunk }
+        scope: { _chunk, ColorUtils }
       }
     }
   },
@@ -243,7 +243,7 @@ export const ColorfulChipsForDifferentContent = {
   render: () => (
     <Flex>
       <DialogContentContainer>
-        <Flex direction="column" align="start" gap="medium" style={{ padding: "var(--spacing-small)" }}>
+        <Flex direction="column" align="start" gap="medium" style={{ padding: "var(--space-8)" }}>
           <div>
             <Chips label="January" color="positive" />
           </div>
@@ -268,13 +268,13 @@ export const ChipsInAPersonPickerComboBox = {
   render: () => (
     <Flex>
       <DialogContentContainer>
-        <Flex direction="column" align="start" gap="medium" style={{ padding: "var(--spacing-small)" }}>
+        <Flex direction="column" align="start" gap="medium" style={{ padding: "var(--space-8)" }}>
           <Search placeholder="Search names, positions, or a team" />
           <Flex align="center" justify="center">
             <Chips label="Julia Martinez" leftAvatar={person1} />
             <Chips label="Juan Rodriguez" leftAvatar={person3} />
           </Flex>
-          <Text style={{ paddingInlineStart: "var(--spacing-xs)", marginTop: "var(--spacing-xs)" }}>
+          <Text style={{ paddingInlineStart: "var(--space-4)", marginTop: "var(--space-4)" }}>
             Suggested people
           </Text>
           <Flex direction="column" align="start" gap="medium">
diff --git a/packages/docs/src/pages/components/Clickable/Clickable.stories.helpers.tsx b/packages/docs/src/pages/components/Clickable/Clickable.stories.helpers.tsx
index 6382e74a85..2ddd67acde 100644
--- a/packages/docs/src/pages/components/Clickable/Clickable.stories.helpers.tsx
+++ b/packages/docs/src/pages/components/Clickable/Clickable.stories.helpers.tsx
@@ -5,7 +5,7 @@ export const TipHookSolution = () => (
   <Tip title="Check out our hook solution for this use case">
     {`If you'd like to set clickable functionality on a specific element inside your React component instead of using a
     wrapper, please, take a look on our `}
-    <StorybookLink size={StorybookLink.sizes.SMALL} page="Hooks/useClickableProps">
+    <StorybookLink size="small" page="Hooks/useClickableProps">
       useClickableProps
     </StorybookLink>{" "}
     hook.
diff --git a/packages/docs/src/pages/components/Clickable/Clickable.stories.tsx b/packages/docs/src/pages/components/Clickable/Clickable.stories.tsx
index a3bfcc407c..29f23c9eea 100644
--- a/packages/docs/src/pages/components/Clickable/Clickable.stories.tsx
+++ b/packages/docs/src/pages/components/Clickable/Clickable.stories.tsx
@@ -32,12 +32,12 @@ export const Overview = {
 export const States = {
   render: () => (
     <Flex gap="medium">
-      <Clickable onClick={() => alert("clicked")} ariaLabel="clickable button">
+      <Clickable onClick={() => alert("clicked")} aria-label="clickable button">
         <Box border padding="small" rounded="small">
           Regular clickable element
         </Box>
       </Clickable>
-      <Clickable onClick={() => alert("clicked")} disabled ariaLabel="disabled clickable button">
+      <Clickable onClick={() => alert("clicked")} disabled aria-label="disabled clickable button">
         <Box border backgroundColor="greyBackgroundColor" padding="small" rounded="small">
           Disabled clickable element
         </Box>
diff --git a/packages/docs/src/pages/components/Combobox/Combobox.stories.helpers.tsx b/packages/docs/src/pages/components/Combobox/Combobox.stories.helpers.tsx
index 04f4ec3181..306008b8ea 100644
--- a/packages/docs/src/pages/components/Combobox/Combobox.stories.helpers.tsx
+++ b/packages/docs/src/pages/components/Combobox/Combobox.stories.helpers.tsx
@@ -4,11 +4,11 @@ import { StorybookLink, Tip } from "vibe-storybook-components";
 export const TipOtherComponents = () => (
   <Tip>
     When there are fewer than five items, consider using{" "}
-    <StorybookLink page="Components/RadioButton" size={StorybookLink.sizes.SMALL}>
+    <StorybookLink page="Components/RadioButton" size="small">
       Radio buttons
     </StorybookLink>{" "}
     (if only one item can be selected) or{" "}
-    <StorybookLink page="Components/Checkbox" size={StorybookLink.sizes.SMALL}>
+    <StorybookLink page="Components/Checkbox" size="small">
       Checkboxes
     </StorybookLink>{" "}
     (if multiple items can be selected).
diff --git a/packages/docs/src/pages/components/Combobox/combobox-migration-guide.mdx b/packages/docs/src/pages/components/Combobox/combobox-migration-guide.mdx
index 3d28024949..b650890d26 100644
--- a/packages/docs/src/pages/components/Combobox/combobox-migration-guide.mdx
+++ b/packages/docs/src/pages/components/Combobox/combobox-migration-guide.mdx
@@ -63,7 +63,7 @@ The Combobox component is deprecated in favor of the new Dropdown's box mode. Th
 
 <DiffCodeBlock
   code={`- import { Combobox } from "@vibe/core";
-+ import { Dropdown } from "@vibe/core/next";
++ import { Dropdown } from "@vibe/core";
 
 - <Combobox
 - placeholder="Search options"
@@ -91,7 +91,7 @@ The Combobox component is deprecated in favor of the new Dropdown's box mode. Th
 
 <DiffCodeBlock
   code={`- import { Combobox } from "@vibe/core";
-+ import { Dropdown } from "@vibe/core/next";`}
++ import { Dropdown } from "@vibe/core";`}
 />
 
 ### 2. Enable Box Mode and Search
diff --git a/packages/docs/src/pages/components/Counter/Counter.stories.helpers.tsx b/packages/docs/src/pages/components/Counter/Counter.stories.helpers.tsx
index 65f538424e..bb43547048 100644
--- a/packages/docs/src/pages/components/Counter/Counter.stories.helpers.tsx
+++ b/packages/docs/src/pages/components/Counter/Counter.stories.helpers.tsx
@@ -4,7 +4,7 @@ import { StorybookLink, Tip, UsageGuidelines } from "vibe-storybook-components";
 export const TipCheckYourself = () => (
   <Tip title="Check yourself">
     Need to indicate information that is not numeric? Use the{" "}
-    <StorybookLink page="Components/Label" size={StorybookLink.sizes.SMALL}>
+    <StorybookLink page="Components/Label" size="small">
       Label
     </StorybookLink>{" "}
     component instead.
diff --git a/packages/docs/src/pages/components/Counter/Counter.stories.tsx b/packages/docs/src/pages/components/Counter/Counter.stories.tsx
index 286a0e5e4e..55b004ad59 100644
--- a/packages/docs/src/pages/components/Counter/Counter.stories.tsx
+++ b/packages/docs/src/pages/components/Counter/Counter.stories.tsx
@@ -14,7 +14,7 @@ export default {
 };
 
 export const Overview = {
-  render: (args: CounterProps) => <Counter id="overview-counter" ariaLabel="Count of 5 items" count={5} {...args} />,
+  render: (args: CounterProps) => <Counter id="overview-counter" aria-label="Count of 5 items" count={5} {...args} />,
   name: "Overview",
   parameters: {
     docs: {
@@ -29,15 +29,15 @@ export const Sizes = {
   render: () => (
     <Flex gap={160}>
       <Flex direction="column" gap="large" style={{ width: "100px" }} align="start">
-        <Counter id="sizes-xs" ariaLabel="Extra small counter showing 5" count={5} size="xs" />
+        <Counter id="sizes-xs" aria-label="Extra small counter showing 5" count={5} size="xs" />
         <Text>XS</Text>
       </Flex>
       <Flex direction="column" gap="large" style={{ width: "100px" }} align="start">
-        <Counter id="sizes-small" ariaLabel="Small counter showing 5" count={5} size="small" />
+        <Counter id="sizes-small" aria-label="Small counter showing 5" count={5} size="small" />
         <Text>Small</Text>
       </Flex>
       <Flex direction="column" gap="large" style={{ width: "100px" }} align="start">
-        <Counter id="sizes-large" ariaLabel="Large counter showing 5" count={5} />
+        <Counter id="sizes-large" aria-label="Large counter showing 5" count={5} />
         <Text>Large</Text>
       </Flex>
     </Flex>
@@ -48,19 +48,19 @@ export const Colors = {
   render: () => (
     <Flex gap={160}>
       <Flex direction="column" gap="large" style={{ width: "100px" }} align="start">
-        <Counter id="colors-primary" ariaLabel="Primary counter showing 5" count={5} />
+        <Counter id="colors-primary" aria-label="Primary counter showing 5" count={5} />
         <Text>Primary</Text>
       </Flex>
       <Flex direction="column" gap="large" style={{ width: "100px" }} align="start">
-        <Counter id="colors-negative" ariaLabel="Negative counter showing 5 notifications" count={5} color="negative" />
+        <Counter id="colors-negative" aria-label="Negative counter showing 5 notifications" count={5} color="negative" />
         <Text>Negative or notification</Text>
       </Flex>
       <Flex direction="column" gap="large" style={{ width: "100px" }} align="start">
-        <Counter id="colors-dark" ariaLabel="Dark counter showing 5" count={5} color="dark" />
+        <Counter id="colors-dark" aria-label="Dark counter showing 5" count={5} color="dark" />
         <Text>Dark</Text>
       </Flex>
       <Flex direction="column" gap="large" style={{ width: "100px" }} align="start">
-        <Counter id="colors-light" ariaLabel="Light counter showing 5" count={5} color="light" />
+        <Counter id="colors-light" aria-label="Light counter showing 5" count={5} color="light" />
         <Text>Light</Text>
       </Flex>
     </Flex>
@@ -71,13 +71,13 @@ export const Outline = {
   render: () => (
     <Flex gap={160}>
       <Flex direction="column" gap="large" style={{ width: "100px" }} align="start">
-        <Counter id="outline-primary" ariaLabel="Primary outline counter showing 5" count={5} kind="line" />
+        <Counter id="outline-primary" aria-label="Primary outline counter showing 5" count={5} kind="line" />
         <Text>Primary</Text>
       </Flex>
       <Flex direction="column" gap="large" style={{ width: "100px" }} align="start">
         <Counter
           id="outline-negative"
-          ariaLabel="Negative outline counter showing 5 notifications"
+          aria-label="Negative outline counter showing 5 notifications"
           count={5}
           color="negative"
           kind="line"
@@ -85,11 +85,11 @@ export const Outline = {
         <Text>Negative or notification</Text>
       </Flex>
       <Flex direction="column" gap="large" style={{ width: "100px" }} align="start">
-        <Counter id="outline-dark" ariaLabel="Dark outline counter showing 5" count={5} color="dark" kind="line" />
+        <Counter id="outline-dark" aria-label="Dark outline counter showing 5" count={5} color="dark" kind="line" />
         <Text>Dark</Text>
       </Flex>
       <Flex direction="column" gap="large" style={{ width: "100px" }} align="start">
-        <Counter id="outline-light" ariaLabel="Light outline counter showing 5" count={5} color="light" kind="line" />
+        <Counter id="outline-light" aria-label="Light outline counter showing 5" count={5} color="light" kind="line" />
         <Text>Light</Text>
       </Flex>
     </Flex>
@@ -102,7 +102,7 @@ export const Limits = {
       <Flex direction="column" gap="large" style={{ width: "100px" }} align="start">
         <Counter
           id="limits-one-digit"
-          ariaLabel="Counter showing 9+ items (10 with 1 digit limit)"
+          aria-label="Counter showing 9+ items (10 with 1 digit limit)"
           count={10}
           maxDigits={1}
         />
@@ -111,14 +111,14 @@ export const Limits = {
       <Flex direction="column" gap="large" style={{ width: "100px" }} align="start">
         <Counter
           id="limits-two-digit"
-          ariaLabel="Counter showing 99+ items (100 with 2 digit limit)"
+          aria-label="Counter showing 99+ items (100 with 2 digit limit)"
           count={100}
           maxDigits={2}
         />
         <Text>Two digits limit</Text>
       </Flex>
       <Flex direction="column" gap="large" style={{ width: "100px" }} align="start">
-        <Counter id="limits-three-digit" ariaLabel="Counter showing 1000 items" count={1000} />
+        <Counter id="limits-three-digit" aria-label="Counter showing 1000 items" count={1000} />
         <Text>Three digits limit</Text>
       </Flex>
     </Flex>
@@ -134,12 +134,12 @@ export const NotificationCounter = {
           type="icon"
           icon={Notifications}
           backgroundColor="royal"
-          ariaLabel="Notifications"
+          aria-label="Notifications"
         />
         <div style={{ position: "absolute", top: "-5px", right: "-5px" }}>
           <Counter
             id="notification-counter"
-            ariaLabel="5 unread notifications"
+            aria-label="5 unread notifications"
             count={5}
             maxDigits={1}
             color="negative"
@@ -166,9 +166,9 @@ export const CounterOnInboxFilters = {
         <Text>Q Plans.</Text>
       </Flex>
       <Flex direction="column" gap="large" align="start">
-        <Counter id="inbox-counter-1" ariaLabel="195 items in UX Writing & microcopy" count={195} color="dark" />
-        <Counter id="inbox-counter-2" ariaLabel="141 items in Mobile Data Iteration Plan" count={141} color="dark" />
-        <Counter id="inbox-counter-3" ariaLabel="99 items in Q Plans" count={99} color="dark" />
+        <Counter id="inbox-counter-1" aria-label="195 items in UX Writing & microcopy" count={195} color="dark" />
+        <Counter id="inbox-counter-2" aria-label="141 items in Mobile Data Iteration Plan" count={141} color="dark" />
+        <Counter id="inbox-counter-3" aria-label="99 items in Q Plans" count={99} color="dark" />
       </Flex>
     </Flex>
   )
@@ -177,19 +177,19 @@ export const CounterOnInboxFilters = {
 export const CountTheNumberOfUpdates = {
   render: () => (
     <Flex gap={12} direction="column" align="start">
-      <Icon icon={AddUpdate} iconSize="36" />
+      <Icon icon={AddUpdate} size="36" />
       <Divider />
       <div style={{ position: "relative" }}>
-        <Icon icon={Update} iconSize="36" />
+        <Icon icon={Update} size="36" />
         <div style={{ position: "absolute", bottom: 0, right: -3 }}>
-          <Counter count={5} size="small" id="count-the-number-of-updates-1" ariaLabel="5 updates" />
+          <Counter count={5} size="small" id="count-the-number-of-updates-1" aria-label="5 updates" />
         </div>
       </div>
       <Divider />
       <div style={{ position: "relative" }}>
-        <Icon icon={Update} iconSize="36" />
+        <Icon icon={Update} size="36" />
         <div style={{ position: "absolute", bottom: 0, right: -3 }}>
-          <Counter count={5} color="dark" size="small" id="count-the-number-of-updates-2" ariaLabel="5 updates" />
+          <Counter count={5} color="dark" size="small" id="count-the-number-of-updates-2" aria-label="5 updates" />
         </div>
       </div>
     </Flex>
diff --git a/packages/docs/src/pages/components/DatePicker/DatePicker.mdx b/packages/docs/src/pages/components/DatePicker/DatePicker.mdx
index fdfb8eacff..5250b69830 100644
--- a/packages/docs/src/pages/components/DatePicker/DatePicker.mdx
+++ b/packages/docs/src/pages/components/DatePicker/DatePicker.mdx
@@ -12,7 +12,7 @@ A simple and reusable Datepicker component
 ### Import
 
 ```js
-import { DatePicker } from "@vibe/core/next";
+import { DatePicker } from "@vibe/core";
 ```
 
 ## Props
diff --git a/packages/docs/src/pages/components/DatePicker/DatePicker.stories.tsx b/packages/docs/src/pages/components/DatePicker/DatePicker.stories.tsx
index 176ec37ee8..e2e5ad9112 100644
--- a/packages/docs/src/pages/components/DatePicker/DatePicker.stories.tsx
+++ b/packages/docs/src/pages/components/DatePicker/DatePicker.stories.tsx
@@ -2,8 +2,7 @@ import React, { useState } from "react";
 import { createStoryMetaSettingsDecorator } from "../../../utils/createStoryMetaSettingsDecorator";
 import { type DatePickerProps } from "../DatePicker.types";
 import { ja } from "date-fns/locale";
-import { DialogContentContainer } from "@vibe/core";
-import { DatePicker } from "@vibe/core/next";
+import { DialogContentContainer, DatePicker } from "@vibe/core";
 
 const metaSettings = createStoryMetaSettingsDecorator({
   component: DatePicker,
@@ -11,7 +10,7 @@ const metaSettings = createStoryMetaSettingsDecorator({
 });
 
 export default {
-  title: "Components/DatePicker [New]",
+  title: "Components/DatePicker",
   component: DatePicker,
   argTypes: metaSettings.argTypes,
   decorators: metaSettings.decorators
diff --git a/packages/docs/src/pages/components/DatePicker/legacy/DatePicker.mdx b/packages/docs/src/pages/components/DatePicker/legacy/DatePicker.mdx
deleted file mode 100644
index 6d82132191..0000000000
--- a/packages/docs/src/pages/components/DatePicker/legacy/DatePicker.mdx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { Meta } from "@storybook/blocks";
-import * as DatepickerStories from "./DatePicker.stories";
-
-<Meta of={DatepickerStories} />
-
-# DatePicker
-
-<br />
-
-<DeprecatedWarning alternativeName="DatePicker" alternativeLink="/?path=/docs/components-datepicker-new--docs" />
-
-A simple and reusable Datepicker component
-
-<Canvas of={DatepickerStories.Overview} />
-
-### Import
-
-```js
-import { DatePicker } from "@vibe/core";
-```
-
-## Props
-
-<PropsTable />
-
-## Variants
-
-### Single day
-
-Allows users to select a single date
-
-<Canvas of={DatepickerStories.SingleDay} />
-
-### Date range
-
-Allows users to select a date range
-
-<Canvas of={DatepickerStories.DateRange} />
-
-## Related components
-
-<RelatedComponents componentsNames={["TextField", "Dropdown", "DialogContentContainer"]} />
diff --git a/packages/docs/src/pages/components/DatePicker/legacy/DatePicker.stories.tsx b/packages/docs/src/pages/components/DatePicker/legacy/DatePicker.stories.tsx
deleted file mode 100644
index 797c525e84..0000000000
--- a/packages/docs/src/pages/components/DatePicker/legacy/DatePicker.stories.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import React, { useState } from "react";
-import moment, { type Moment } from "moment";
-import { DatePicker, type DatePickerProps, DialogContentContainer, type RangeDate } from "@vibe/core";
-import { createStoryMetaSettingsDecorator } from "../../../../utils/createStoryMetaSettingsDecorator";
-
-// for Chromatic check to always have the same date UI
-const MOCK_INITIAL_DATE: RangeDate = { startDate: moment("2023-05-01"), endDate: moment("2023-05-03") };
-
-const metaSettings = createStoryMetaSettingsDecorator({
-  component: DatePicker,
-  actionPropsArray: ["onPickDate"]
-});
-
-export default {
-  title: "Components/DatePicker [Deprecated]",
-  component: DatePicker,
-  argTypes: metaSettings.argTypes,
-  decorators: metaSettings.decorators,
-  parameters: {
-    docs: {
-      liveEdit: {
-        scope: { MOCK_INITIAL_DATE }
-      }
-    }
-  }
-};
-
-const DatePickerTemplate = (args: DatePickerProps) => {
-  const [date, setDate] = useState(MOCK_INITIAL_DATE.startDate);
-  return (
-    <DialogContentContainer>
-      <DatePicker
-        id="overview-date-picker"
-        data-testid="date-picker"
-        date={date}
-        onPickDate={(d: Moment) => setDate(d)}
-        {...args}
-      />
-    </DialogContentContainer>
-  );
-};
-
-export const Overview = {
-  render: DatePickerTemplate.bind({}),
-  name: "Overview",
-  parameters: {
-    docs: {
-      liveEdit: {
-        isEnabled: false
-      }
-    }
-  }
-};
-
-export const SingleDay = {
-  render: () => {
-    const [date, setDate] = useState(MOCK_INITIAL_DATE.startDate);
-
-    return (
-      <DialogContentContainer>
-        <DatePicker
-          id="single-day-picker"
-          data-testid="date-picker"
-          date={date}
-          onPickDate={(d: Moment) => setDate(d)}
-        />
-      </DialogContentContainer>
-    );
-  },
-
-  name: "Single Day"
-};
-
-export const DateRange = {
-  render: () => {
-    const [date, setDate] = useState(MOCK_INITIAL_DATE);
-
-    return (
-      <DialogContentContainer>
-        <DatePicker
-          id="date-range-picker"
-          date={date.startDate}
-          endDate={date.endDate}
-          range
-          data-testid="date-picker"
-          onPickDate={(d: RangeDate) => setDate(d)}
-        />
-      </DialogContentContainer>
-    );
-  },
-
-  name: "Date Range"
-};
-
-export const WithCustomPhrases = {
-  render: () => {
-    const [date, setDate] = useState(MOCK_INITIAL_DATE.startDate);
-
-    return (
-      <DialogContentContainer>
-        <DatePicker
-          id="custom-phrases-picker"
-          data-testid="date-picker"
-          date={date}
-          onPickDate={(d: Moment) => setDate(d)}
-          phrases={{
-            chooseAvailableDate: ({ date }) => `This is the date you are about to choose: ${date}`
-          }}
-        />
-      </DialogContentContainer>
-    );
-  },
-
-  name: "With Custom Phrases"
-};
diff --git a/packages/docs/src/pages/components/Dialog/Dialog.mdx b/packages/docs/src/pages/components/Dialog/Dialog.mdx
index 840ce6aaaa..877edf6683 100644
--- a/packages/docs/src/pages/components/Dialog/Dialog.mdx
+++ b/packages/docs/src/pages/components/Dialog/Dialog.mdx
@@ -1,7 +1,7 @@
 import { Meta } from "@storybook/blocks";
-import { AttentionBox, AttentionBoxLink } from "@vibe/core";
+import { AttentionBox } from "@vibe/core";
 import {
-  TipDevTipPopperJs,
+  TipDevTipFloatingUi,
   TipDevTipTechnicalPattern,
   TipDialogContentContainer,
   TipModal
@@ -29,7 +29,7 @@ import { Dialog } from "@vibe/core";
 
 <PropsTable />
 
-<TipDevTipPopperJs />
+<TipDevTipFloatingUi />
 
 ## Usage
 
@@ -45,13 +45,11 @@ import { Dialog } from "@vibe/core";
   ]}
 />
 
-<AttentionBox title="Trying to implement your own customize menu?">
-  <>
-    Please be sure that what you try implement cannot be achieved by using already implemented simpler components - such
-    as our <AttentionBoxLink href="/?path=/docs/components-menu-menu--docs" text="Menu component" />, because creating
-    an over-complicated UI can hurt user experience.
-  </>
-</AttentionBox>
+<AttentionBox
+  title="Trying to implement your own customize menu?"
+  text="Please be sure that what you try implement cannot be achieved by using already implemented simpler components - such as our Menu component, because creating an over-complicated UI can hurt user experience."
+  link={{ href: "/?path=/docs/components-menu-menu--docs", text: "Menu component" }}
+/>
 <br />
 <TipModal />
 
diff --git a/packages/docs/src/pages/components/Dialog/Dialog.stories.helpers.tsx b/packages/docs/src/pages/components/Dialog/Dialog.stories.helpers.tsx
index 665f96cfc9..ac0800363b 100644
--- a/packages/docs/src/pages/components/Dialog/Dialog.stories.helpers.tsx
+++ b/packages/docs/src/pages/components/Dialog/Dialog.stories.helpers.tsx
@@ -4,19 +4,19 @@ import { Link, StorybookLink, Tip } from "vibe-storybook-components";
 export const TipDialogContentContainer = () => (
   <Tip>
     For setting the dialog UI appearance, use{" "}
-    <StorybookLink size={StorybookLink.sizes.SMALL} page="Popover" story="DialogContentContainer">
+    <StorybookLink size="small" page="Popover" story="DialogContentContainer">
       DialogContentContainer
     </StorybookLink>{" "}
     component.
   </Tip>
 );
 
-export const TipDevTipPopperJs = () => (
+export const TipDevTipFloatingUi = () => (
   <Tip title="Dev tip">
-    You can use the
-    <Link size={Link.sizes.SMALL} href="https://popper.js.org/docs/v2/modifiers/">
-      Popper.js modifiers
-    </Link>
+    You can use{" "}
+    <Link size="small" href="https://floating-ui.com/docs/middleware">
+      Floating UI middleware
+    </Link>{" "}
     for extended Dialog customization.
   </Tip>
 );
@@ -24,7 +24,7 @@ export const TipDevTipPopperJs = () => (
 export const TipModal = () => (
   <Tip title="Wishing to position your popover in the center of the page?">
     Exactly for this purpose, we created the{" "}
-    <StorybookLink page="Components/Modal" size={StorybookLink.sizes.SMALL}>
+    <StorybookLink page="Components/Modal" size="small">
       Modal
     </StorybookLink>{" "}
     component! Check it out.
@@ -34,12 +34,12 @@ export const TipModal = () => (
 export const TipDevTipTechnicalPattern = () => (
   <Tip title="Dev tip">
     If you wish to implement a{" "}
-    <StorybookLink page="Components/Dropdown" size={StorybookLink.sizes.SMALL}>
+    <StorybookLink page="Components/Dropdown" size="small">
       Dropdown
     </StorybookLink>{" "}
     inside a Dialog container and need help displaying the Dropdowns popovers correctly, read more about our Dropdown in
     popovers technical pattern{" "}
-    <StorybookLink page="Technical Patterns/Dropdowns inside pop-overs" size={StorybookLink.sizes.SMALL}>
+    <StorybookLink page="Technical Patterns/Dropdowns inside pop-overs" size="small">
       here
     </StorybookLink>
     .
diff --git a/packages/docs/src/pages/components/Dialog/Dialog.stories.tsx b/packages/docs/src/pages/components/Dialog/Dialog.stories.tsx
index d0939e585a..3d3a381712 100644
--- a/packages/docs/src/pages/components/Dialog/Dialog.stories.tsx
+++ b/packages/docs/src/pages/components/Dialog/Dialog.stories.tsx
@@ -1,8 +1,7 @@
 import React from "react";
 import { shift } from "@floating-ui/react-dom";
 import { createStoryMetaSettingsDecorator } from "../../../utils/createStoryMetaSettingsDecorator";
-import { Button, Flex, DialogContentContainer, IconButton, Skeleton, useSwitch } from "@vibe/core";
-import { Dialog, type DialogTriggerEvent, type DialogProps } from "@vibe/core/next";
+import { Button, Flex, DialogContentContainer, IconButton, Skeleton, useSwitch, Dialog, type DialogTriggerEvent, type DialogProps } from "@vibe/core";
 import { Info } from "@vibe/icons";
 
 // Floating UI middleware to prevent dialog from shifting along the main axis while scrolling
@@ -98,7 +97,7 @@ export const Overview = {
         >
           <IconButton
             id="overview-dialog-trigger"
-            ariaLabel="Open information dialog"
+            aria-label="Open information dialog"
             icon={Info}
             active
             kind="secondary"
@@ -167,7 +166,7 @@ export const Positions = {
           >
             <Button
               id="positions-top-button"
-              ariaLabel="Toggle top dialog"
+              aria-label="Toggle top dialog"
               kind="secondary"
               onClick={onChangeTop}
               active={checkedTop}
@@ -204,7 +203,7 @@ export const Positions = {
           >
             <Button
               id="positions-bottom-button"
-              ariaLabel="Toggle bottom dialog"
+              aria-label="Toggle bottom dialog"
               kind="secondary"
               onClick={onChangeBottom}
               active={checkedBottom}
@@ -241,7 +240,7 @@ export const Positions = {
           >
             <Button
               id="positions-right-button"
-              ariaLabel="Toggle right dialog"
+              aria-label="Toggle right dialog"
               kind="secondary"
               onClick={onChangeRight}
               active={checkedRight}
@@ -278,7 +277,7 @@ export const Positions = {
           >
             <Button
               id="positions-left-button"
-              ariaLabel="Toggle left dialog"
+              aria-label="Toggle left dialog"
               kind="secondary"
               onClick={onChangeLeft}
               active={checkedLeft}
diff --git a/packages/docs/src/pages/components/Dropdown/Dropdown.mdx b/packages/docs/src/pages/components/Dropdown/Dropdown.mdx
index d22b136c2c..43828a7a47 100644
--- a/packages/docs/src/pages/components/Dropdown/Dropdown.mdx
+++ b/packages/docs/src/pages/components/Dropdown/Dropdown.mdx
@@ -5,35 +5,27 @@ import { Overview as BoxModePreview } from "./DropdownBoxMode.stories";
 import do1 from "./assets/do1.png";
 import dont1 from "./assets/dont1.png";
 
-<Meta title="Components/Dropdown [New]" />
+<Meta title="Components/Dropdown" />
 
 # Dropdown
 
 Select component present a list of options from which a user can select one or several.
 
-<Tip title="Migration Guide Available" emoji="🚀">
-  Migrating from the old Dropdown? Check out our comprehensive{" "}
-  <Link href="/?path=/docs/components-dropdown-new-migration-guide--docs">Dropdown Migration Guide</Link> for
-  step-by-step instructions, breaking changes, and new features.
-</Tip>
-
 ### Import
 
-All the Dropdown-related components can be imported from `@vibe/core/next`.
-
 ```js
-import { Dropdown } from "@vibe/core/next";
+import { Dropdown } from "@vibe/core";
 ```
 
 ### Basic dropdown
 
-The <StorybookLink page="Components/Dropdown [New]/Basic dropdown">Basic dropdown</StorybookLink> present a popup list of options from which a user can select one or several.
+The <StorybookLink page="Components/Dropdown/Basic dropdown">Basic dropdown</StorybookLink> present a popup list of options from which a user can select one or several.
 
 <Canvas of={BasicDropdownPreview} sourceState="none" />
 
 ### Dropdown box mode
 
-The <StorybookLink page="Components/Dropdown [New]/Dropdown box mode">Dropdown box mode</StorybookLink> is an always open Dropdown, with the same properties as the basic Dropdown.
+The <StorybookLink page="Components/Dropdown/Dropdown box mode">Dropdown box mode</StorybookLink> is an always open Dropdown, with the same properties as the basic Dropdown.
 
 <Canvas of={BoxModePreview} sourceState="none" />
 
diff --git a/packages/docs/src/pages/components/Dropdown/DropdownBasicDropdown.mdx b/packages/docs/src/pages/components/Dropdown/DropdownBasicDropdown.mdx
index 1ce5741a57..663e94d89c 100644
--- a/packages/docs/src/pages/components/Dropdown/DropdownBasicDropdown.mdx
+++ b/packages/docs/src/pages/components/Dropdown/DropdownBasicDropdown.mdx
@@ -17,12 +17,8 @@ The basic dropdown is intended for quick value selection when space is limited a
 
 ### Import
 
-All the Dropdown components can be imported from `@vibe/core/next`.
-
-Notice not to import components directly from the `@vibe/core` package, as they are deprecated.
-
 ```js
-import { Dropdown } from "@vibe/core/next";
+import { Dropdown } from "@vibe/core";
 ```
 
 ## Props
diff --git a/packages/docs/src/pages/components/Dropdown/DropdownBasicDropdown.stories.tsx b/packages/docs/src/pages/components/Dropdown/DropdownBasicDropdown.stories.tsx
index 33e0cbae78..653da99fb3 100644
--- a/packages/docs/src/pages/components/Dropdown/DropdownBasicDropdown.stories.tsx
+++ b/packages/docs/src/pages/components/Dropdown/DropdownBasicDropdown.stories.tsx
@@ -5,8 +5,7 @@ import person1 from "../Avatar/assets/person1.png";
 import person3 from "../Avatar/assets/person3.png";
 import person2 from "../Avatar/assets/person2.png";
 import { Attach, Email } from "@vibe/icons";
-import { Dropdown, type BaseDropdownProps, type DropdownOption } from "@vibe/core/next";
-import { Flex, Text } from "@vibe/core";
+import { Dropdown, type BaseDropdownProps, type DropdownOption, Flex, Text } from "@vibe/core";
 import { FixedSizeList as List } from "react-window";
 
 type Story = StoryObj<typeof Dropdown>;
@@ -29,7 +28,7 @@ const metaSettings = createStoryMetaSettingsDecorator({
 });
 
 const meta: Meta<typeof Dropdown> = {
-  title: "Components/Dropdown [New]/Basic dropdown",
+  title: "Components/Dropdown/Basic dropdown",
   component: Dropdown,
   argTypes: metaSettings.argTypes,
   decorators: metaSettings.decorators
@@ -58,7 +57,7 @@ export const Overview: Story = {
   render: dropdownTemplate.bind({}),
   args: {
     id: "overview-dropdown",
-    ariaLabel: "Overview dropdown",
+    "aria-label": "Overview dropdown",
     placeholder: "Placeholder text here",
     clearAriaLabel: "Clear"
   },
@@ -86,7 +85,7 @@ export const Sizes: Story = {
         <div style={{ width: "300px" }}>
           <Dropdown
             id="sizes-large"
-            ariaLabel="Large dropdown"
+            aria-label="Large dropdown"
             options={options}
             placeholder="Placeholder text here"
             label="Label"
@@ -97,7 +96,7 @@ export const Sizes: Story = {
         <div style={{ width: "300px" }}>
           <Dropdown
             id="sizes-medium"
-            ariaLabel="Medium dropdown"
+            aria-label="Medium dropdown"
             options={options}
             placeholder="Placeholder text here"
             label="Label"
@@ -108,7 +107,7 @@ export const Sizes: Story = {
         <div style={{ width: "300px" }}>
           <Dropdown
             id="sizes-small"
-            ariaLabel="Small dropdown"
+            aria-label="Small dropdown"
             options={options}
             placeholder="Placeholder text here"
             label="Label"
@@ -128,7 +127,7 @@ export const States: Story = {
         <div style={{ width: "300px" }}>
           <Dropdown
             id="states-default"
-            ariaLabel="Default dropdown"
+            aria-label="Default dropdown"
             options={[]}
             placeholder="Default"
             clearAriaLabel="Clear"
@@ -137,7 +136,7 @@ export const States: Story = {
         <div style={{ width: "300px" }}>
           <Dropdown
             id="states-disabled"
-            ariaLabel="Disabled dropdown"
+            aria-label="Disabled dropdown"
             options={[]}
             placeholder="Disabled"
             disabled
@@ -149,7 +148,7 @@ export const States: Story = {
         <div style={{ width: "300px" }}>
           <Dropdown
             id="states-error"
-            ariaLabel="Error dropdown"
+            aria-label="Error dropdown"
             options={[]}
             placeholder="Error"
             error
@@ -159,7 +158,7 @@ export const States: Story = {
         <div style={{ width: "300px" }}>
           <Dropdown
             id="states-readonly"
-            ariaLabel="Readonly dropdown"
+            aria-label="Readonly dropdown"
             options={[]}
             placeholder="Readonly"
             readOnly
diff --git a/packages/docs/src/pages/components/Dropdown/DropdownBoxMode.mdx b/packages/docs/src/pages/components/Dropdown/DropdownBoxMode.mdx
index bda8338416..5b95b1f542 100644
--- a/packages/docs/src/pages/components/Dropdown/DropdownBoxMode.mdx
+++ b/packages/docs/src/pages/components/Dropdown/DropdownBoxMode.mdx
@@ -19,12 +19,8 @@ The dropdown box mode is intended for cases where users need to view and compare
 
 ### Import
 
-All the Dropdown components can be imported from `@vibe/core/next`.
-
-Notice not to import components directly from the `@vibe/core` package, as they are deprecated.
-
 ```js
-import { Dropdown } from "@vibe/core/next";
+import { Dropdown } from "@vibe/core";
 ```
 
 ## Props
diff --git a/packages/docs/src/pages/components/Dropdown/DropdownBoxMode.stories.tsx b/packages/docs/src/pages/components/Dropdown/DropdownBoxMode.stories.tsx
index 2772c68876..018477eee8 100644
--- a/packages/docs/src/pages/components/Dropdown/DropdownBoxMode.stories.tsx
+++ b/packages/docs/src/pages/components/Dropdown/DropdownBoxMode.stories.tsx
@@ -6,8 +6,7 @@ import person2 from "../Avatar/assets/person2.png";
 import person3 from "../Avatar/assets/person3.png";
 import person4 from "../Avatar/assets/person4.png";
 import { Email, Send, Mobile } from "@vibe/icons";
-import { Dropdown } from "@vibe/core/next";
-import { Flex, Text, DialogContentContainer, Button } from "@vibe/core";
+import { Dropdown, Flex, Text, DialogContentContainer, Button } from "@vibe/core";
 
 type Story = StoryObj<typeof Dropdown>;
 
@@ -29,7 +28,7 @@ const metaSettings = createStoryMetaSettingsDecorator({
 });
 
 const meta: Meta<typeof Dropdown> = {
-  title: "Components/Dropdown [New]/Dropdown box mode",
+  title: "Components/Dropdown/Dropdown box mode",
   component: Dropdown,
   argTypes: metaSettings.argTypes,
   decorators: metaSettings.decorators
@@ -53,7 +52,7 @@ const dropdownTemplate = props => {
     <div style={{ width: "300px" }}>
       <Dropdown
         id="box-mode-overview"
-        ariaLabel="Box mode overview"
+        aria-label="Box mode overview"
         options={options}
         label="Label"
         placeholder="Placeholder text here"
@@ -70,7 +69,7 @@ export const Overview: Story = {
   render: dropdownTemplate.bind({}),
   args: {
     id: "overview-dropdown",
-    ariaLabel: "Overview dropdown",
+    "aria-label": "Overview dropdown",
     placeholder: "Placeholder text here",
     clearAriaLabel: "Clear"
   },
@@ -101,7 +100,7 @@ export const DefaultState: Story = {
       <div style={{ width: "300px" }}>
         <Dropdown
           id="box-mode-default-state"
-          ariaLabel="Box mode default state"
+          aria-label="Box mode default state"
           options={options}
           label="Label"
           placeholder="Placeholder text"
@@ -134,7 +133,7 @@ export const InsideADialog: Story = {
         <DialogContentContainer>
           <Dropdown
             id="box-mode-dialog"
-            ariaLabel="Box mode inside dialog"
+            aria-label="Box mode inside dialog"
             options={options}
             placeholder="Placeholder text"
             searchable
@@ -172,7 +171,7 @@ export const MultiSelect: Story = {
           <div style={{ width: "300px" }}>
             <Dropdown
               id="box-mode-multi-single-line"
-              ariaLabel="Box mode multi select single line"
+              aria-label="Box mode multi select single line"
               options={options}
               placeholder="Placeholder text"
               searchable
@@ -190,7 +189,7 @@ export const MultiSelect: Story = {
           <div style={{ width: "300px" }}>
             <Dropdown
               id="box-mode-multi-multiline"
-              ariaLabel="Box mode multi select multiple lines"
+              aria-label="Box mode multi select multiple lines"
               options={options}
               placeholder="Placeholder text"
               searchable
@@ -246,7 +245,7 @@ export const WithIcons: Story = {
       <div style={{ width: "300px" }}>
         <Dropdown
           id="box-mode-with-icons"
-          ariaLabel="Box mode with icons"
+          aria-label="Box mode with icons"
           options={optionsWithIcons}
           label="Notify via"
           placeholder="You can choose multiple options"
@@ -310,7 +309,7 @@ export const PeoplePicker: Story = {
         <div style={{ width: "350px" }}>
           <Dropdown
             id="box-mode-people-picker"
-            ariaLabel="Box mode people picker"
+            aria-label="Box mode people picker"
             options={peopleOptions}
             label="Person"
             placeholder="Search for people"
diff --git a/packages/docs/src/pages/components/Dropdown/dropdown-migration-guide.mdx b/packages/docs/src/pages/components/Dropdown/dropdown-migration-guide.mdx
index 4a61a95ff6..22af792b97 100644
--- a/packages/docs/src/pages/components/Dropdown/dropdown-migration-guide.mdx
+++ b/packages/docs/src/pages/components/Dropdown/dropdown-migration-guide.mdx
@@ -4,7 +4,7 @@ import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { dark } from "react-syntax-highlighter/dist/esm/styles/prism";
 import { DiffCodeBlock } from "../../migration-guide/DiffCodeBlock";
 
-<Meta title="Components/Dropdown [New]/Migration Guide" />
+<Meta title="Components/Dropdown/Migration Guide" />
 
 # Dropdown Migration Guide
 
@@ -65,8 +65,13 @@ The Dropdown component has been completely rewritten from scratch to provide bet
 ### 1. Update Import Path
 
 <DiffCodeBlock
-  code={`- import { Dropdown } from "@vibe/core";
-+ import { Dropdown } from "@vibe/core/next";`}
+  code={`// In v4, the new Dropdown is the default export from @vibe/core
+import { Dropdown } from "@vibe/core";
+
+// The old react-select based Dropdown has been removed.
+// If you were using the alpha import path:
+// - import { Dropdown } from "@vibe/core/next";
+// + import { Dropdown } from "@vibe/core";`}
 />
 
 ### 2. Update Option Data Structure
@@ -336,14 +341,11 @@ interface Task {
 
 ## FAQ ❓
 
-**Q: When should I migrate to the new Dropdown?**
-A: The new Dropdown is currently in Alpha. We recommend migrating for new projects or when you need the enhanced accessibility and performance features.
-
-**Q: Will the old Dropdown be deprecated?**
-A: Yes, the old Dropdown will be deprecated in the next major version (Vibe 4). We'll provide ample notice and migration support.
+**Q: What happened to the old Dropdown?**
+A: The old react-select based Dropdown has been removed in Vibe 4. The new Dropdown (previously available via `@vibe/core/next`) is now the default export from `@vibe/core`.
 
-**Q: Can I use both implementations in the same project?**
-A: Yes, you can import the new Dropdown from `@vibe/core/next` and the old one from `@vibe/core` during the migration period.
+**Q: I was importing Dropdown from `@vibe/core/next`. What should I change?**
+A: Update your import to use `@vibe/core` instead of `@vibe/core/next`.
 
 **Q: Are there any features missing from the new Dropdown?**
 A: The new Dropdown covers all major use cases. If you're using `asyncOptions`, implement data fetching externally and pass the results to the `options` prop.
diff --git a/packages/docs/src/pages/components/Dropdown/legacy/Dropdown.interactions.ts b/packages/docs/src/pages/components/Dropdown/legacy/Dropdown.interactions.ts
deleted file mode 100644
index 5b5f3d859d..0000000000
--- a/packages/docs/src/pages/components/Dropdown/legacy/Dropdown.interactions.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import { userEvent, waitFor } from "@storybook/test";
-import {
-  getByRole,
-  getByText,
-  clickElement,
-  typeText,
-  getFirstByClassName,
-  interactionSuite
-} from "@vibe/core/interactionsTests";
-import { expect } from "@storybook/jest";
-
-const selectAndClearTest = async canvas => {
-  const dropdownElement = await getByRole(canvas, "combobox");
-  // Open the dropdown
-  await clickElement(dropdownElement);
-  // Filter it
-  await typeText(dropdownElement, "Option");
-  // Select the option
-  const optionToSelect = getByText(canvas, "Option 1");
-  await clickElement(optionToSelect);
-  // click the clear button
-  const clearButton = getFirstByClassName("clear-indicator");
-  await clickElement(clearButton);
-  // Validate we see the placeholder again
-  getByText(canvas, "Placeholder text here");
-};
-
-const hideDropdownWhenPressingEscape = async canvas => {
-  const dropdownElement = await getByRole(canvas, "combobox");
-  // Open the dropdown
-  await clickElement(dropdownElement);
-  // Validate open dropdown
-  await getByText(canvas, "Option 1");
-  // Close the dropdown
-  await typeText(dropdownElement, "{escape}");
-
-  const optionElement = await canvas.queryByText("Option 1");
-  expect(optionElement).toBeNull(); //expect not to exist
-};
-
-export const overviewPlaySuite = interactionSuite({
-  beforeEach: async canvas => {
-    const dropdownElement = await getByRole(canvas, "combobox");
-    await userEvent.clear(dropdownElement);
-    expect(dropdownElement.value).toEqual("");
-    await typeText(dropdownElement, "{escape}");
-
-    const optionElement = await canvas.queryByText("Option 1");
-    expect(optionElement).toBeNull(); //expect not to exist
-  },
-  tests: [selectAndClearTest, hideDropdownWhenPressingEscape]
-});
-
-const openMultiValueDialog = async canvas => {
-  const optionElement = await canvas.queryByText("+2");
-  await clickElement(optionElement);
-
-  await waitFor(async () => {
-    const popover = await getByRole(document.body, "dialog");
-    expect(popover).toBeInTheDocument();
-  });
-};
-
-export const multiInteractionTests = interactionSuite({
-  tests: [openMultiValueDialog]
-});
diff --git a/packages/docs/src/pages/components/Dropdown/legacy/Dropdown.mdx b/packages/docs/src/pages/components/Dropdown/legacy/Dropdown.mdx
deleted file mode 100644
index dbc4988bfa..0000000000
--- a/packages/docs/src/pages/components/Dropdown/legacy/Dropdown.mdx
+++ /dev/null
@@ -1,224 +0,0 @@
-import { Meta } from "@storybook/blocks";
-import { Dropdown } from "@vibe/core";
-import * as DropdownStories from "./Dropdown.stories";
-import { TipDevTipPopover } from "./Dropdown.stories.helpers";
-
-<Meta of={DropdownStories} />
-
-# Dropdown - Deprecated
-
-<br />
-
-<DeprecatedWarning alternativeName="Dropdown" alternativeLink="/?path=/docs/components-dropdown-new--docs" />
-
-Dropdown present a list of options from which a user can select one or several.
-
-<Canvas of={DropdownStories.Overview} />
-
-### Import
-
-```js
-import { Dropdown } from "@vibe/core";
-```
-
-## Props
-
-<PropsTable />
-
-## Usage
-
-<UsageGuidelines
-  guidelines={[
-    "Dropdown menus are typically used when you have 5-8 items to choose from. They're used for navigation or command menus, where an action is initiated based on the selection.",
-    "Use a consistent size of form components on the same page. For example, if you are using a medium size dropdown also use the same size text inputs, buttons, and so on.",
-    "Avoid having multiple lines of text in a dropdown. If the text is too long for one line, add an ellipsis (…).",
-    "When the menu is open, each option in the menu should be the same height as the field.",
-    "When organizing dropdown menu items, sort the list in a logical order by putting the most selected option at the top."
-  ]}
-/>
-
-## Accessibility
-
-<UsageGuidelines
-  guidelines={[
-    <>
-      Using an <code>id</code> is highly recommended for all instances to ensure proper label association.
-    </>,
-    <>
-      Use <code>ariaLabel</code> prop when you need to provide a custom accessible name for the dropdown.
-    </>,
-    <>
-      Use <code>inputAriaLabel</code> prop when you need to provide a specific accessible name for the input field.
-    </>,
-    <>
-      Use <code>menuAriaLabel</code> prop when you need to provide a custom accessible name for the dropdown menu.
-    </>,
-    <>
-      Use <code>menuId</code> prop to provide a specific ID for the menu container for screen reader navigation.
-    </>,
-    <>
-      Use <code>tabIndex</code> prop for custom keyboard navigation order when needed.
-    </>
-  ]}
-/>
-
-## Variants
-
-### Sizes
-
-There are three sizes available: Small, Medium, and Large
-
-<Canvas of={DropdownStories.Sizes} />
-
-### Disabled
-
-<Canvas of={DropdownStories.Disabled} />
-
-### Readonly
-
-<Canvas of={DropdownStories.Readonly} />
-
-### RTL
-
-<Canvas of={DropdownStories.Rtl} />
-
-### Multi line states
-
-The Dropdown component supports multiple options selection in two different state - single line and multiple lines.
-
-<Canvas of={DropdownStories.MultiChoiceWithDifferentStates} />
-
-### Async Options
-
-The Dropdown component supports async loading of options.
-
-<Canvas of={DropdownStories.AsyncDropdown} />
-
-### Dropdown with avatar
-
-<Canvas of={DropdownStories.DropdownWithAvatar} />
-
-### Dropdown with icon
-
-<Canvas of={DropdownStories.DropdownWithIcon} />
-
-### Dropdown with chip colors
-
-<Canvas of={DropdownStories.DropdownWithChipColors} />
-
-### Dropdown with tooltips on items
-
-<Canvas of={DropdownStories.DropdownWithTooltipsOnItems} />
-
-## Do’s and Don’ts
-
-<ComponentRules
-  rules={[
-    {
-      positive: {
-        component: (
-          <Dropdown
-            placeholder="Placeholder text here"
-            options={[
-              { value: 1, label: "Option 1" },
-              { value: 2, label: "Option 2" },
-              { value: 3, label: "Option 3" }
-            ]}
-            className="dropdown-stories-styles_rules-spacing"
-          />
-        ),
-        description:
-          "Use the dropdown as a closed component. Users should normally be allowed only to click on the items; search is not recommended, though possible."
-      },
-      negative: {
-        component: (
-          <Dropdown
-            menuIsOpen
-            placeholder="Placeholder text here"
-            options={[
-              { value: 1, label: "Option 1" },
-              { value: 2, label: "Option 2" },
-              { value: 3, label: "Option 3" }
-            ]}
-            className="dropdown-stories-styles_rules-spacing"
-          />
-        ),
-        description: (
-          <>
-            Don't keep the dropdown component in open mode as permanent state. If this is a design requirement consider
-            use <StorybookLink page="Components/Combobox">Combo box</StorybookLink> instead.
-          </>
-        )
-      }
-    }
-  ]}
-/>
-
-## Use cases and examples
-
-### Multiple dropdown with renderers as options
-
-Inside the advanced filters, a user can select multiple people from the dropdown menu, and they will be shown as Chips.
-
-<Canvas of={DropdownStories.DropdownWithChips} />
-
-### Searchable Dropdown
-
-In case of multiple options, you can use the `onInputChange` prop to allow filtering options.
-
-<Canvas of={DropdownStories.SearchableDropdown} />
-
-### Dropdown with labels
-
-A dropdown menu can include labels.
-
-<Canvas of={DropdownStories.DropdownWithLabels} />
-
-### Dropdown with virtualized items
-
-A dropdown with many items, can be virtualized using `isVirtualized`.
-
-<Canvas of={DropdownStories.VirtualizedDropdown} />
-
-### Dropdown inside a form
-
-A classic dropdown presents options a user needs to choose from.
-
-<Canvas of={DropdownStories.DropdownInsideAForm} />
-
-### Dropdown with groups
-
-Dropdown menu can be organized into groups. It can be either by group title or divider.
-
-<Canvas of={DropdownStories.DropdownWithGroups} />
-
-### Dropdown inside popover
-
-Use <code>menuPosition="fixed"</code> prop attribute for displaying dropdown inside popover (like our Modal
-component) or container with overflow hidden content.
-
-<TipDevTipPopover />
-
-<Canvas of={DropdownStories.DropdownInsidePopover} />
-
-### Dropdown with loading
-
-If importing the dropdown options may take time, you can reflect this to the user using Dropdown isLoading flag with optional custom message.
-
-<Canvas of={DropdownStories.DropdownWithLoading} />
-
-### Dropdown with ref
-
-If you need to programmatically control Dropdown state, use `ref` prop. Pay attention that type of returned ref will be `StateManager` from <Link withoutSpacing href="https://react-select.com/home">`react-select`</Link> library.
-
-<Canvas of={DropdownStories.DropdownWithRef} />
-
-### Dropdown value selection
-
-Control the value selection mechanism with the <code>tabSelectsValue</code> (default: true) prop.
-
-<Canvas of={DropdownStories.DropdownValueSelection} />
-
-## Related components
-
-<RelatedComponents componentsNames={["Combobox", "SplitButton", "Menu"]} />
diff --git a/packages/docs/src/pages/components/Dropdown/legacy/Dropdown.stories.helpers.tsx b/packages/docs/src/pages/components/Dropdown/legacy/Dropdown.stories.helpers.tsx
deleted file mode 100644
index 83fef5d0b5..0000000000
--- a/packages/docs/src/pages/components/Dropdown/legacy/Dropdown.stories.helpers.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from "react";
-import { StorybookLink, Tip } from "vibe-storybook-components";
-
-export const TipDevTipPopover = () => (
-  <Tip title="Dev tip">
-    For more details about dropdowns APIs for displaying correctly inside{" "}
-    <StorybookLink page="Components/Dialog/Dialog" size={StorybookLink.sizes.SMALL}>
-      Dialogs,
-    </StorybookLink>{" "}
-    <StorybookLink page="Components/Modal" size={StorybookLink.sizes.SMALL}>
-      Modals
-    </StorybookLink>{" "}
-    and other popovers click{" "}
-    <StorybookLink
-      page="Technical patterns/Dropdowns inside pop overs"
-      story="Modal with damaged dropdown"
-      size={StorybookLink.sizes.SMALL}
-    >
-      here
-    </StorybookLink>
-    .
-  </Tip>
-);
-
-export const fakeFetchUsers = () => {
-  return new Promise(resolve => {
-    setTimeout(() => {
-      const users = [
-        { id: "1", name: "Yossi Saadi" },
-        { id: "2", name: "Shahar Zilberman" },
-        { id: "3", name: "Tal Koren" },
-        { id: "4", name: "Meirav Ron" },
-        { id: "5", name: "Yael Bein" }
-      ];
-
-      resolve({ json: () => Promise.resolve(users) });
-    }, 1000);
-  });
-};
-
-export const generateItems = (itemsCount = 100) => {
-  const items = [];
-  for (let i = 0; i < itemsCount; i++) {
-    items.push({ value: i, label: `Item ${i}` });
-  }
-  return items;
-};
diff --git a/packages/docs/src/pages/components/Dropdown/legacy/Dropdown.stories.jsx b/packages/docs/src/pages/components/Dropdown/legacy/Dropdown.stories.jsx
deleted file mode 100644
index 9fe3e6378b..0000000000
--- a/packages/docs/src/pages/components/Dropdown/legacy/Dropdown.stories.jsx
+++ /dev/null
@@ -1,1033 +0,0 @@
-import React, { useCallback, useMemo, useRef, useState } from "react";
-import { StoryDescription } from "vibe-storybook-components";
-import { createStoryMetaSettingsDecorator } from "../../../../utils/createStoryMetaSettingsDecorator";
-import { multiInteractionTests, overviewPlaySuite } from "./Dropdown.interactions";
-import person1 from "../../Avatar/assets/person1.png";
-import person3 from "../../Avatar/assets/person3.png";
-import person2 from "../../Avatar/assets/person2.png";
-import { OptionRenderer } from "./OptionRenderer";
-import { Attach, Email } from "@vibe/icons";
-import { Box, Button, DialogContentContainer, Dropdown, Flex, Label, Modal, ModalContent } from "@vibe/core";
-import ModalExampleContent from "../legacy/dropdown-in-modals/ModalExampleContent";
-import "./Dropdown.stories.scss";
-import { fakeFetchUsers, generateItems } from "./Dropdown.stories.helpers";
-
-const metaSettings = createStoryMetaSettingsDecorator({
-  component: Dropdown,
-  actionPropsArray: [
-    "onMenuOpen",
-    "onMenuClose",
-    "onFocus",
-    "onBlur",
-    "onChange",
-    "openMenuOnFocus",
-    "onOptionRemove",
-    "onOptionSelect",
-    "onClear",
-    "onInputChange",
-    "onKeyDown"
-  ]
-});
-
-export default {
-  title: "Components/Dropdown [Deprecated]",
-  component: Dropdown,
-  argTypes: metaSettings.argTypes,
-  decorators: metaSettings.decorators
-};
-
-const dropdownTemplate = props => {
-  const options = useMemo(
-    () => [
-      { value: 1, label: "Option 1" },
-      { value: 2, label: "Option 2" },
-      { value: 3, label: "Option 3" }
-    ],
-    []
-  );
-  return (
-    <div style={{ height: "150px" }}>
-      <Dropdown options={options} {...props} />
-    </div>
-  );
-};
-
-export const Overview = {
-  render: dropdownTemplate.bind({}),
-  args: {
-    placeholder: "Placeholder text here",
-    className: "dropdown-stories-styles_spacing"
-  },
-  parameters: {
-    docs: {
-      liveEdit: {
-        isEnabled: false
-      }
-    }
-  },
-  name: "Overview",
-  play: overviewPlaySuite
-};
-
-export const Sizes = {
-  render: () => (
-    <>
-      <Dropdown placeholder="Small" size="small" className="dropdown-stories-styles_spacing" />
-      <Dropdown placeholder="Medium" size="medium" className="dropdown-stories-styles_spacing" />
-      <Dropdown placeholder="Large" size="large" className="dropdown-stories-styles_spacing" />
-    </>
-  )
-};
-
-export const Disabled = {
-  render: () => {
-    const options = useMemo(
-      () => [
-        {
-          value: "1",
-          label: "Option 1"
-        },
-        {
-          value: "2",
-          label: "Option 2"
-        },
-        {
-          value: "3",
-          label: "Option 3"
-        }
-      ],
-      []
-    );
-
-    return (
-      <Flex direction="row">
-        <Dropdown defaultValue={[options[0]]} options={options} disabled className="dropdown-stories-styles_spacing" />
-        <Dropdown
-          multi
-          defaultValue={[options[0], options[1]]}
-          options={options}
-          disabled
-          className="dropdown-stories-styles_spacing"
-        />
-      </Flex>
-    );
-  }
-};
-
-export const Readonly = {
-  render: () => {
-    const options = useMemo(
-      () => [
-        {
-          value: "1",
-          label: "Option 1"
-        },
-        {
-          value: "2",
-          label: "Option 2"
-        },
-        {
-          value: "3",
-          label: "Option 3"
-        }
-      ],
-      []
-    );
-
-    return (
-      <Flex direction="row">
-        <Dropdown defaultValue={[options[0]]} options={options} readOnly className="dropdown-stories-styles_spacing" />
-        <Dropdown
-          multi
-          defaultValue={[options[0], options[1]]}
-          options={options}
-          readOnly
-          className="dropdown-stories-styles_spacing"
-        />
-      </Flex>
-    );
-  }
-};
-
-export const Rtl = {
-  render: () => (
-    <>
-      <Dropdown placeholder="Left to right (default)" className="dropdown-stories-styles_spacing" />
-      <Dropdown placeholder="מימין לשמאל" className="dropdown-stories-styles_spacing" rtl />
-    </>
-  ),
-  name: "RTL"
-};
-
-export const MultiChoiceWithDifferentStates = {
-  render: () => {
-    const options = useMemo(
-      () => [
-        {
-          value: "Rotem",
-          label: "Rotem Dekel"
-        },
-        {
-          value: "Hadas",
-          label: "Hadas Farhi"
-        },
-        {
-          value: "Netta",
-          label: "Netta Muller"
-        },
-        {
-          value: "Dor",
-          label: "Dor Yehuda"
-        }
-      ],
-      []
-    );
-
-    return (
-      <Flex wrap gap="medium">
-        <StoryDescription description="Single line" vertical>
-          <div
-            style={{
-              width: "400px"
-            }}
-          >
-            <Dropdown
-              placeholder="Single line multi state"
-              defaultValue={[options[0]]}
-              options={options}
-              multi
-              className="dropdown-stories-styles_with-chips"
-            />
-          </div>
-        </StoryDescription>
-        <StoryDescription description="Multiple lines" vertical>
-          <div
-            style={{
-              width: "400px"
-            }}
-          >
-            <Dropdown
-              placeholder="Multiple line multi state"
-              defaultValue={[options[0]]}
-              options={options}
-              multi
-              multiline
-              className="dropdown-stories-styles_with-chips"
-            />
-          </div>
-        </StoryDescription>
-        <StoryDescription
-          description="Mandatory default values"
-          vertical
-          headerStyle={{
-            width: 190
-          }}
-        >
-          <div
-            style={{
-              width: "400px"
-            }}
-          >
-            <Dropdown
-              defaultValue={[options[0]]}
-              options={options}
-              multi
-              multiline
-              className="dropdown-stories-styles_with-chips"
-              withMandatoryDefaultOptions
-            />
-          </div>
-        </StoryDescription>
-        <StoryDescription
-          description="Hidden options list"
-          vertical
-          headerStyle={{
-            width: 190
-          }}
-        >
-          <div
-            style={{
-              width: "400px"
-            }}
-          >
-            <Dropdown
-              defaultValue={[...options]}
-              options={options}
-              multi
-              className="dropdown-stories-styles_with-chips"
-            />
-          </div>
-        </StoryDescription>
-      </Flex>
-    );
-  },
-  play: multiInteractionTests,
-  parameters: {
-    docs: {
-      liveEdit: {
-        scope: { StoryDescription }
-      }
-    }
-  },
-  name: "Multi-choice with different states"
-};
-
-export const AsyncDropdown = {
-  render: () => {
-    const fetchUserOptions = async searchTerm => {
-      try {
-        const response = await fakeFetchUsers();
-        const users = await response.json();
-
-        return users
-          .filter(user => user.name.toLowerCase().includes(searchTerm.toLowerCase()))
-          .map(user => ({
-            label: user.name,
-            value: user.id
-          }));
-      } catch (error) {
-        console.error("Error fetching user data:", error);
-      }
-      return [];
-    };
-
-    return (
-      <div
-        style={{
-          width: "400px"
-        }}
-      >
-        <Dropdown asyncOptions={fetchUserOptions} placeholder="Async options" cacheOptions defaultOptions />
-      </div>
-    );
-  },
-  parameters: {
-    docs: {
-      liveEdit: {
-        scope: { fakeFetchUsers }
-      }
-    }
-  }
-};
-
-export const DropdownWithAvatar = {
-  render: () => {
-    const optionsAvatar = useMemo(
-      () => [
-        {
-          value: "Rotem",
-          label: "Rotem Dekel",
-          leftAvatar: person1
-        },
-        {
-          value: "Hadas",
-          label: "Hadas Farhi",
-          leftAvatar: person2
-        },
-        {
-          value: "Netta",
-          label: "Netta Muller",
-          leftAvatar: person3
-        }
-      ],
-      []
-    );
-
-    return (
-      <Flex gap="small">
-        <StoryDescription vertical description="Single value">
-          <div>
-            <Dropdown
-              defaultValue={[optionsAvatar[0]]}
-              options={optionsAvatar}
-              className="dropdown-stories-styles_with-chips"
-            />
-          </div>
-        </StoryDescription>
-        <StoryDescription vertical description="Multiple values">
-          <div>
-            <Dropdown
-              defaultValue={[optionsAvatar[0]]}
-              options={optionsAvatar}
-              multi
-              multiline
-              className="dropdown-stories-styles_with-chips"
-            />
-          </div>
-        </StoryDescription>
-      </Flex>
-    );
-  },
-  parameters: {
-    docs: {
-      liveEdit: {
-        scope: { person1, person2, person3, StoryDescription }
-      }
-    }
-  },
-  name: "Dropdown with avatar"
-};
-
-export const DropdownWithIcon = {
-  render: () => {
-    const optionsIcons = useMemo(
-      () => [
-        {
-          value: "email",
-          label: "Email",
-          leftIcon: Email
-        },
-        {
-          value: "attach",
-          label: "Attach",
-          leftIcon: Attach
-        }
-      ],
-      []
-    );
-
-    return (
-      <Flex gap="small">
-        <StoryDescription vertical description="Single value">
-          <div>
-            <Dropdown
-              defaultValue={[optionsIcons[0]]}
-              options={optionsIcons}
-              className="dropdown-stories-styles_with-chips"
-            />
-          </div>
-        </StoryDescription>
-        <StoryDescription vertical description="Multiple values">
-          <div>
-            <Dropdown
-              defaultValue={[optionsIcons[0]]}
-              options={optionsIcons}
-              multi
-              multiline
-              className="dropdown-stories-styles_with-chips"
-            />
-          </div>
-        </StoryDescription>
-      </Flex>
-    );
-  },
-  parameters: {
-    docs: {
-      liveEdit: {
-        scope: { Email, Attach, StoryDescription }
-      }
-    }
-  },
-  name: "Dropdown with icon"
-};
-
-export const DropdownWithChipColors = {
-  render: () => {
-    const optionsWithChipColors = useMemo(
-      () => [
-        {
-          value: "Rotem",
-          label: "Rotem Dekel",
-          chipColor: "negative"
-        },
-        {
-          value: "Hadas",
-          label: "Hadas Farhi",
-          chipColor: "positive"
-        },
-        {
-          value: "Netta",
-          label: "Netta Muller",
-          chipColor: "primary"
-        }
-      ],
-      []
-    );
-
-    return (
-      <StoryDescription vertical>
-        <div>
-          <Dropdown
-            defaultValue={[optionsWithChipColors[0]]}
-            options={optionsWithChipColors}
-            multi
-            multiline
-            className="dropdown-stories-styles_with-chips"
-          />
-        </div>
-      </StoryDescription>
-    );
-  },
-  parameters: {
-    docs: {
-      liveEdit: {
-        scope: { StoryDescription }
-      }
-    }
-  },
-  name: "Dropdown with chip colors"
-};
-
-export const DropdownWithTooltipsOnItems = {
-  render: () => {
-    const optionsWithTooltips = useMemo(
-      () => [
-        {
-          value: "Option 1",
-          label: "Option 1",
-
-          tooltipProps: {
-            content: "Description for option 1"
-          }
-        },
-        {
-          value: "Option 2",
-          label: "Option 2",
-
-          tooltipProps: {
-            content: "Description for option 2"
-          }
-        }
-      ],
-      []
-    );
-
-    return (
-      <StoryDescription vertical>
-        <div>
-          <Dropdown
-            placeholder={"Placeholder text here"}
-            options={optionsWithTooltips}
-            className="dropdown-stories-styles_with-chips"
-          />
-        </div>
-      </StoryDescription>
-    );
-  },
-  parameters: {
-    docs: {
-      liveEdit: {
-        scope: { StoryDescription }
-      }
-    }
-  },
-  name: "Dropdown with tooltips on items"
-};
-
-export const DropdownWithChips = {
-  render: () => {
-    const options = useMemo(
-      () => [
-        {
-          value: "Dor Yehuda",
-          label: "Hadas Farhi",
-          src: person1,
-          type: "img",
-          size: "small",
-          name: "Dor Yehuda",
-          position: "(Full Stack Developer)"
-        },
-        {
-          value: "No",
-          label: "Rotem Dekel",
-          src: person3,
-          type: "img",
-          size: "small",
-          name: "Rotem Dekel",
-          position: "(Product Designer)"
-        },
-        {
-          value: "Yes",
-          label: "Netta Muller",
-          src: person2,
-          type: "img",
-          size: "small",
-          name: "Netta Muller",
-          position: "(Brand Designer)"
-        }
-      ],
-      []
-    );
-
-    return (
-      <Dropdown
-        defaultValue={[options[0]]}
-        options={options}
-        multi
-        placeholder="Dropdown with chips"
-        optionRenderer={OptionRenderer}
-        className="dropdown-stories-styles_with-chips"
-      />
-    );
-  },
-  parameters: {
-    docs: {
-      liveEdit: {
-        scope: { person1, person2, person3, OptionRenderer }
-      }
-    }
-  },
-  name: "Dropdown with chips"
-};
-
-export const SearchableDropdown = {
-  render: () => {
-    const [searchValue, setSearchValue] = useState("");
-
-    const allOptions = useMemo(
-      () => [
-        {
-          value: "Red",
-          label: "Red"
-        },
-        {
-          value: "Orange",
-          label: "Orange"
-        },
-        {
-          value: "Yellow",
-          label: "Yellow"
-        },
-        {
-          value: "Green",
-          label: "Green"
-        },
-        {
-          value: "Blue",
-          label: "Blue"
-        },
-        {
-          value: "Indigo",
-          label: "Indigo"
-        },
-        {
-          value: "Violet",
-          label: "Violet"
-        }
-      ],
-      []
-    );
-
-    const options = useMemo(() => {
-      if (!searchValue) return allOptions;
-
-      return allOptions.filter(option => option.label.toLowerCase().includes(searchValue.toLowerCase()));
-    }, [allOptions, searchValue]);
-
-    const onInputChange = value => setSearchValue(value);
-
-    return (
-      <Dropdown
-        options={options}
-        multi
-        placeholder="Select colors"
-        className="dropdown-stories-styles_with-chips"
-        onInputChange={onInputChange}
-      />
-    );
-  },
-  name: "Searchable dropdown"
-};
-
-export const DropdownWithLabels = {
-  render: () => {
-    const labelRenderer = useCallback(({ label, color }) => {
-      return <Label text={label} color={color} />;
-    }, []);
-
-    const options = useMemo(
-      () => [
-        {
-          value: "success",
-          label: "Success",
-          color: Label.colors.POSITIVE
-        },
-        {
-          value: "failed",
-          label: "Failed",
-          color: Label.colors.NEGATIVE
-        },
-        {
-          value: "in progress",
-          label: "In progress"
-        }
-      ],
-      []
-    );
-
-    return (
-      <Dropdown
-        placeholder="Placeholder text here"
-        options={options}
-        defaultValue={[options[0]]}
-        className="dropdown-stories-styles_big-spacing"
-        optionRenderer={labelRenderer}
-        valueRenderer={labelRenderer}
-      />
-    );
-  },
-  name: "Dropdown with labels"
-};
-
-export const VirtualizedDropdown = {
-  render: () => {
-    const options = useMemo(() => generateItems(300), []);
-
-    return <Dropdown options={options} isVirtualized className="dropdown-stories-styles_with-chips" />;
-  },
-  name: "Virtualized dropdown"
-};
-
-export const DropdownInsideAForm = {
-  render: () => {
-    const options = useMemo(
-      () => [
-        {
-          value: "Sometimes",
-          label: "Sometimes"
-        },
-        {
-          value: "No",
-          label: "No"
-        },
-        {
-          value: "Yes",
-          label: "Yes"
-        }
-      ],
-      []
-    );
-
-    return (
-      <div>
-        <h5 className="dropdown-stories-styles_title">Are you usually a Dark mode person?</h5>
-        <Dropdown
-          defaultValue={[options[0]]}
-          placeholder="Placeholder text here"
-          options={options}
-          className="dropdown-stories-styles_big-spacing"
-        />
-      </div>
-    );
-  },
-  name: "Dropdown inside a form"
-};
-
-export const DropdownWithGroups = {
-  render: () => {
-    const options = useMemo(
-      () => [
-        {
-          label: "Group 1",
-          options: [
-            {
-              value: "1",
-              label: "Option 1"
-            },
-            {
-              value: "2",
-              label: "Option 2"
-            }
-          ]
-        },
-        {
-          label: "Group 2",
-
-          options: [
-            {
-              value: "3",
-              label: "Option 3"
-            },
-            {
-              value: "4",
-              label: "Option 4"
-            }
-          ]
-        }
-      ],
-      []
-    );
-
-    const optionsWithoutGroupLabel = useMemo(
-      () => [
-        {
-          options: [
-            {
-              value: "1",
-              label: "Option 1"
-            },
-            {
-              value: "2",
-              label: "Option 2"
-            }
-          ]
-        },
-        {
-          options: [
-            {
-              value: "3",
-              label: "Option 3"
-            },
-            {
-              value: "4",
-              label: "Option 4"
-            }
-          ]
-        }
-      ],
-      []
-    );
-
-    return (
-      <Flex gap={Flex.gaps.LARGE}>
-        <div>
-          <Dropdown
-            placeholder="Groups with group title"
-            options={options}
-            className="dropdown-stories-styles_big-spacing"
-          />
-        </div>
-        <div>
-          <Dropdown
-            placeholder="Groups with group divider"
-            options={optionsWithoutGroupLabel}
-            withGroupDivider
-            className="dropdown-stories-styles_big-spacing"
-          />
-        </div>
-      </Flex>
-    );
-  },
-  name: "Dropdown with groups"
-};
-
-export const DropdownInsidePopover = {
-  render: () => {
-    const options = useMemo(
-      () => [
-        {
-          value: "1",
-          label: "Option 1"
-        },
-        {
-          value: "2",
-          label: "Option 2"
-        },
-        {
-          value: "3",
-          label: "Option 3"
-        },
-        {
-          value: "4",
-          label: "Option 4"
-        },
-        {
-          value: "5",
-          label: "Option 5"
-        },
-        {
-          value: "6",
-          label: "Option 6"
-        },
-        {
-          value: "7",
-          label: "Option 7"
-        },
-        {
-          value: "8",
-          label: "Option 8"
-        },
-        {
-          value: "9",
-          label: "Option 9"
-        },
-        {
-          value: "10",
-          label: "Option 10"
-        },
-        {
-          value: "11",
-          label: "Option 11"
-        },
-        {
-          value: "12",
-          label: "Option 12"
-        },
-        {
-          value: "13",
-          label: "Option 13"
-        },
-        {
-          value: "14",
-          label: "Option 14"
-        },
-        {
-          value: "15",
-          label: "Option 15"
-        }
-      ],
-      []
-    );
-
-    const [show, setShow] = useState(false);
-
-    const closeModal = useCallback(() => {
-      setShow(false);
-    }, [setShow]);
-
-    const dialogStyle = {
-      width: "350px",
-      height: "200px",
-      overflow: "auto"
-    };
-
-    return (
-      <Flex gap="large">
-        <DialogContentContainer style={dialogStyle}>
-          <ModalExampleContent />
-          <Box marginTop="medium" marginBottom="xxl">
-            <Dropdown placeholder="Dropdown inside DialogContentContainer" options={options} menuPosition="fixed" />
-          </Box>
-        </DialogContentContainer>
-        <div>
-          <Button onClick={() => setShow(true)}>Open Modal</Button>
-          <Modal title="Modal with dropdown" show={show} onClose={closeModal}>
-            <ModalContent>
-              <Dropdown placeholder="Dropdown" options={options} menuPosition="fixed" />
-            </ModalContent>
-          </Modal>
-        </div>
-      </Flex>
-    );
-  },
-  parameters: {
-    docs: {
-      liveEdit: {
-        scope: { ModalExampleContent }
-      }
-    }
-  },
-  name: "Dropdown inside popover"
-};
-
-export const DropdownWithLoading = {
-  render: () => {
-    const [isLoading, setIsLoading] = useState(false);
-
-    const options = useMemo(
-      () => [
-        {
-          value: "1",
-          label: "Option 1"
-        },
-        {
-          value: "2",
-          label: "Option 2"
-        },
-        {
-          value: "3",
-          label: "Option 3"
-        }
-      ],
-      []
-    );
-
-    const loadingOnInputChange = useCallback(() => {
-      setIsLoading(true);
-
-      setTimeout(() => {
-        setIsLoading(false);
-      }, 1000);
-    }, []);
-
-    return (
-      <Dropdown
-        placeholder={"Type to start loading"}
-        options={options}
-        isLoading={isLoading}
-        loadingMessage={() => "Loading options..."}
-        className="dropdown-stories-styles_big-spacing"
-        onInputChange={loadingOnInputChange}
-      />
-    );
-  },
-  name: "Dropdown with loading"
-};
-
-export const DropdownWithRef = {
-  render: () => {
-    const ref = useRef();
-
-    const options = useMemo(
-      () => [
-        {
-          value: "1",
-          label: "Option 1"
-        },
-        {
-          value: "2",
-          label: "Option 2"
-        },
-        {
-          value: "3",
-          label: "Option 3"
-        }
-      ],
-      []
-    );
-
-    const focusDropdownInput = useCallback(() => {
-      ref.current.select.focus();
-    }, []);
-
-    return (
-      <Flex direction="row">
-        <Dropdown
-          placeholder="Dropdown with ref"
-          options={options}
-          ref={ref}
-          className="dropdown-stories-styles_spacing"
-        />
-        <Button onClick={focusDropdownInput} className="dropdown-stories-styles_button">
-          Focus dropdown input
-        </Button>
-      </Flex>
-    );
-  },
-  name: "Dropdown with ref"
-};
-
-export const DropdownValueSelection = {
-  render: () => {
-    const options = useMemo(
-      () => [
-        {
-          value: "1",
-          label: "Option 1"
-        },
-        {
-          value: "2",
-          label: "Option 2"
-        },
-        {
-          value: "3",
-          label: "Option 3"
-        }
-      ],
-      []
-    );
-
-    return (
-      <Flex gap="large">
-        <Dropdown placeholder="Tab selects value" options={options} className="dropdown-stories-styles_big-spacing" />
-        <Dropdown
-          placeholder="Tab does not select value"
-          options={options}
-          tabSelectsValue={false}
-          className="dropdown-stories-styles_big-spacing"
-        />
-      </Flex>
-    );
-  },
-  name: "Dropdown value selection"
-};
diff --git a/packages/docs/src/pages/components/Dropdown/legacy/Dropdown.stories.scss b/packages/docs/src/pages/components/Dropdown/legacy/Dropdown.stories.scss
deleted file mode 100644
index 1609ef241c..0000000000
--- a/packages/docs/src/pages/components/Dropdown/legacy/Dropdown.stories.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-.dropdown-stories-styles {
-  &_spacing {
-    min-width: 250px;
-    margin: 10px 20px 40px;
-  }
-
-  &_rules-spacing {
-    margin-bottom: 100px;
-    min-width: 250px;
-  }
-
-  &_big-spacing {
-    min-width: 250px;
-    margin: 0 0 130px;
-  }
-
-  &_with-chips {
-    min-width: 300px;
-    margin: 0 0 130px;
-  }
-
-  &_name {
-    padding: 0 8px;
-    font-size: 14px;
-
-    span {
-      color: var(--sb-icon-color);
-      margin-left: 4px;
-    }
-  }
-
-  &_inline-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &_button {
-    margin: 10px 20px 40px;
-  }
-}
diff --git a/packages/docs/src/pages/components/Dropdown/legacy/OptionRenderer.jsx b/packages/docs/src/pages/components/Dropdown/legacy/OptionRenderer.jsx
deleted file mode 100644
index 3c02570e0c..0000000000
--- a/packages/docs/src/pages/components/Dropdown/legacy/OptionRenderer.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from "react";
-import { Avatar } from "@vibe/core";
-import "./Dropdown.stories.scss";
-
-export const OptionRenderer = ({ src, type, size, name, position }) => {
-  return (
-    <div className="dropdown-stories-styles_inline-container">
-      <Avatar size={size} src={src} type={type} key={name} />
-      <span className="dropdown-stories-styles_name">
-        {name}
-        <span>{position}</span>
-      </span>
-    </div>
-  );
-};
diff --git a/packages/docs/src/pages/components/Dropdown/legacy/dropdown-in-modals/ModalExampleContent.tsx b/packages/docs/src/pages/components/Dropdown/legacy/dropdown-in-modals/ModalExampleContent.tsx
deleted file mode 100644
index 7de3d612ae..0000000000
--- a/packages/docs/src/pages/components/Dropdown/legacy/dropdown-in-modals/ModalExampleContent.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React, { type FC } from "react";
-import { Flex, Skeleton } from "@vibe/core";
-
-const ModalExampleContent: FC = () => {
-  const children = Array.from({ length: 2 }, (_value, index: number) => (
-    <Flex key={index} gap="small" style={{ width: "100%" }}>
-      <Skeleton type={Skeleton.types.CIRCLE} width={30} height={30} />
-      <Skeleton type={Skeleton.types.TEXT} fullWidth />
-    </Flex>
-  ));
-  return (
-    <Flex direction="column" align="start" gap="small">
-      <Skeleton type={Skeleton.types.TEXT} size={Skeleton.sizes.TEXT.H1} fullWidth />
-      {children}
-    </Flex>
-  );
-};
-
-export default ModalExampleContent;
diff --git a/packages/docs/src/pages/components/Dropdown/legacy/dropdown-in-modals/dropdown-in-modals.mdx b/packages/docs/src/pages/components/Dropdown/legacy/dropdown-in-modals/dropdown-in-modals.mdx
deleted file mode 100644
index db4d9b920f..0000000000
--- a/packages/docs/src/pages/components/Dropdown/legacy/dropdown-in-modals/dropdown-in-modals.mdx
+++ /dev/null
@@ -1,109 +0,0 @@
-import { Canvas, Meta } from "@storybook/blocks";
-import { Link, Tip } from "vibe-storybook-components";
-import * as DropdownInModalsStories from "./dropdown-in-modals.stories";
-import { TipKnowIssue } from "./dropdown-in-modals.stories.helpers";
-
-<Meta of={DropdownInModalsStories} />
-
-# Display dropdowns inside pop-overs
-
-<p>
-  <Tip title="New Dropdown Available" emoji="🚀">
-    Consider using the new <Link href="/?path=/docs/components-dropdown-alpha--docs">Dropdown component</Link> which
-    handles pop-overs automatically without requiring these workarounds. It's built with better accessibility and
-    performance.
-  </Tip>
-</p>
-
-## Problem description
-
-Our dropdowns are implemented using the <Link href="https://react-select.com/home" withoutSpacing>React Select</Link> library.
-One of the styling issues with React Select dropdowns is that the menu is not fully displayed when its container has <code>overflow: hidden</code>, <code>overflow: auto</code>, or <code>overflow: scroll</code>.
-As a result, when dropdown menus are placed inside a scrolling container or within a Vibe's dialog or modal, the dropdown menu appears damaged, as you can see in the following examples.
-
-<Canvas of={DropdownInModalsStories.ModalWithDamagedDropdown} />
-
-To address this problem, we need to adjust the styling of the dropdown menu to ensure it appears correctly even within these specific container.
-We implemented few methods for solving this issue.
-
-## Solution 1: menuPosition = 'fixed'
-
-To handle straightforward scenarios of displaying dropdowns inside a container with relevant overflow styles, you can set <code>menuPosition</code> prop to <code>Dropdown.menuPositions.FIXED</code>.
-This prop overrides the dropdown menu's default settings and ensures proper display within the container.
-**This solution will work for most cases single select dropdown inside Vibe's Modal or DialogContentContainer, it will not work properly for Vibe's Dialog.**
-
-<Canvas of={DropdownInModalsStories.MenuPosition} />
-
-## Solution 2: insideOverflowContainer
-
-To handle straightforward scenarios of displaying dropdowns inside a container with relevant overflow styles, you can utilize our dropdown's <code>insideOverflowContainer</code> prop.
-This prop overrides the dropdown menu's default settings and ensures proper display within the container.
-**This solution will work for single select dropdown inside Vibe's Modal or DialogContentContainer cases, it will not work for Vibe's Dialog.**
-
-<TipKnowIssue />
-
-Please note that this solution is intended for the most basic use cases and may not function optimally if your
-overflow container has one parent or more with conflicting overflow definitions.
-
-<Canvas of={DropdownInModalsStories.InsideOverflowContainer} />
-
-## Solution 3: insideOverflowWithTransformContainer
-
-The <code>insideOverflowContainer</code> prop will not function as expected for dropdowns displayed inside Vibe's dialog components.
-The reason is that Vibe dialogs use CSS transform to position the dialog next to the attached element.
-For this specific case, use the 'insideOverflowWithTransformContainer' prop to ensure proper display and functionality.
-
-<TipKnowIssue />
-
-<Canvas of={DropdownInModalsStories.InsideOverflowWithTransformContainer} />
-
-## Solution 4: popupsContainerSelector
-
-For the most complex use cases, you can utilize our dropdown's <code>popupsContainerSelector</code> prop.
-This prop allows you to render all the dropdown's popovers in a different node in the DOM, as specified by the provided selector.
-This prop will solve all the issues described before and also allow you to control under which DOM element other dropdown containers will render.
-To implement this solution and ensure proper display of all dropdown popovers, you need to define a few styles for the container selector, as shown in the following code example:
-
-```css
-.container {
-  top: 0; // Set the container and the beginning of the web page
-  right: 0; // Set the container and the beginning of the web page
-  position: "fixed"; // The container should not move when scrolling the web page
-  width: "100%"; // The container should cover the whole viewport
-  height: "100%"; // The container should cover the whole viewport
-  pointerevents: "none"; // The container should not block any event
-  zindex: 99999; // The container z index should be heigher from the z-index of the modal/dialog which contains the dropdown itself
-}
-.container * {
-  pointer-events: auto; // all container children should handle events as usual
-}
-```
-
-This solution can be useful for multiselection dropdown with single line state, which contains multiple popovers (one for the dropdown menu and one for the selections which hidden under the counter).
-If you have defined the dropdown's popovers container styles as required, you can use it as demonstrated in the following example:
-
-```jsx
-<div>
-  <div
-    id="popovers-container"
-    style={{
-      position: "fixed",
-      width: "100%",
-      pointerEvents: "none",
-      zIndex: 99999,
-      height: "100%",
-      top: 0,
-      right: 0
-    }}
-    className={styles.pointerEventsAutoToAllChildren}
-  />
-  <Button onClick={() => setShow(true)}>Open Modal</Button>
-  <Modal id="modal-with-multiple-choice" title="Modal with dropdown" show={show} onClose={closeModal}>
-    <ModalContent>
-      <Dropdown multi options={options} popupsContainerSelector="#popovers-container" />
-    </ModalContent>
-  </Modal>
-</div>
-```
-
-<RelatedComponents componentsNames={["Dialog", "Dropdown", "DialogContentContainer"]} />
diff --git a/packages/docs/src/pages/components/Dropdown/legacy/dropdown-in-modals/dropdown-in-modals.stories.helpers.tsx b/packages/docs/src/pages/components/Dropdown/legacy/dropdown-in-modals/dropdown-in-modals.stories.helpers.tsx
deleted file mode 100644
index 1227af851a..0000000000
--- a/packages/docs/src/pages/components/Dropdown/legacy/dropdown-in-modals/dropdown-in-modals.stories.helpers.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from "react";
-import { Tip } from "vibe-storybook-components";
-
-export const TipKnowIssue = () => (
-  <Tip type={Tip.types.WARNING} emoji={"⚠️"} title="Known issue">
-    {`This solution have a serious issue - it doesn't properly support options-scrolling on popovers when lacking of screen space. 
-    We recommend checking using other options instead of this one.`}
-  </Tip>
-);
diff --git a/packages/docs/src/pages/components/Dropdown/legacy/dropdown-in-modals/dropdown-in-modals.stories.tsx b/packages/docs/src/pages/components/Dropdown/legacy/dropdown-in-modals/dropdown-in-modals.stories.tsx
deleted file mode 100644
index 1dd99b8372..0000000000
--- a/packages/docs/src/pages/components/Dropdown/legacy/dropdown-in-modals/dropdown-in-modals.stories.tsx
+++ /dev/null
@@ -1,256 +0,0 @@
-import React, { useCallback, useState, useMemo } from "react";
-import {
-  Dropdown,
-  type DropdownOption,
-  Modal,
-  ModalContent,
-  Box,
-  Flex,
-  Dialog,
-  DialogContentContainer,
-  Button
-} from "@vibe/core";
-import ModalExampleContent from "./ModalExampleContent";
-
-export default {
-  title: "Technical Patterns/Dropdowns inside pop-overs"
-};
-
-export const ModalWithDamagedDropdown: React.FC = () => {
-  const [show, setShow] = useState<boolean>(false);
-
-  const closeModal = useCallback(() => {
-    setShow(false);
-  }, [setShow]);
-
-  const options: DropdownOption[] = [
-    { value: "1", label: "Option 1" },
-    { value: "2", label: "Option 2" },
-    { value: "3", label: "Option 3" },
-    { value: "4", label: "Option 4" },
-    { value: "5", label: "Option 5" },
-    { value: "6", label: "Option 6" },
-    { value: "7", label: "Option 7" },
-    { value: "8", label: "Option 8" },
-    { value: "9", label: "Option 9" },
-    { value: "10", label: "Option 10" },
-    { value: "11", label: "Option 11" },
-    { value: "12", label: "Option 12" },
-    { value: "13", label: "Option 13" },
-    { value: "14", label: "Option 14" },
-    { value: "15", label: "Option 15" }
-  ];
-
-  return (
-    <div>
-      <Button onClick={() => setShow(true)}>Open Modal</Button>
-      <Modal title="Modal with dropdown" show={show} onClose={closeModal}>
-        <ModalContent>
-          <Dropdown options={options} />
-        </ModalContent>
-      </Modal>
-    </div>
-  );
-};
-
-export const MenuPosition: React.FC = () => {
-  const [show, setShow] = useState<boolean>(false);
-
-  const closeModal = useCallback(() => {
-    setShow(false);
-  }, [setShow]);
-
-  const options: DropdownOption[] = useMemo(
-    () => [
-      { value: "1", label: "Option 1" },
-      { value: "2", label: "Option 2" },
-      { value: "3", label: "Option 3" },
-      { value: "4", label: "Option 4" },
-      { value: "5", label: "Option 5" },
-      { value: "6", label: "Option 6" },
-      { value: "7", label: "Option 7" },
-      { value: "8", label: "Option 8" },
-      { value: "9", label: "Option 9" },
-      { value: "10", label: "Option 10" },
-      { value: "11", label: "Option 11" },
-      { value: "12", label: "Option 12" },
-      { value: "13", label: "Option 13" },
-      { value: "14", label: "Option 14" },
-      { value: "15", label: "Option 15" }
-    ],
-    []
-  );
-
-  const dialogStyle: React.CSSProperties = {
-    width: "350px",
-    height: "200px",
-    overflow: "auto"
-  };
-
-  const modifiers = [
-    {
-      name: "preventOverflow",
-      options: { mainAxis: false }
-    }
-  ];
-
-  return (
-    <Flex gap="large">
-      <DialogContentContainer style={dialogStyle}>
-        <ModalExampleContent />
-        <Box marginTop="medium" marginBottom="xxl">
-          <Dropdown
-            placeholder="Dropdown inside DialogContentContainer"
-            options={options}
-            menuPosition={Dropdown.menuPositions.FIXED}
-          />
-        </Box>
-      </DialogContentContainer>
-      <div>
-        <Button onClick={() => setShow(true)}>Open Modal</Button>
-        <Modal title="Modal with dropdown" show={show} onClose={closeModal}>
-          <ModalContent>
-            <Dropdown placeholder="Dropdown" options={options} menuPosition={Dropdown.menuPositions.FIXED} />
-          </ModalContent>
-        </Modal>
-      </div>
-      <Dialog
-        modifiers={modifiers}
-        showTrigger={["click"]}
-        hideTrigger={["click"]}
-        content={
-          <DialogContentContainer style={dialogStyle}>
-            <ModalExampleContent />
-            <Box marginTop="medium" marginBottom="xxl">
-              <Dropdown placeholder="Dropdown" options={options} menuPosition={Dropdown.menuPositions.FIXED} />
-            </Box>
-          </DialogContentContainer>
-        }
-      >
-        <Button kind="primary" color="negative">
-          Popup Dialog
-        </Button>
-      </Dialog>
-    </Flex>
-  );
-};
-
-export const InsideOverflowContainer: React.FC = () => {
-  const [show, setShow] = useState<boolean>(false);
-
-  const closeModal = useCallback(() => {
-    setShow(false);
-  }, [setShow]);
-
-  const options: DropdownOption[] = useMemo(
-    () => [
-      { value: "1", label: "Option 1" },
-      { value: "2", label: "Option 2" },
-      { value: "3", label: "Option 3" },
-      { value: "4", label: "Option 4" },
-      { value: "5", label: "Option 5" },
-      { value: "6", label: "Option 6" },
-      { value: "7", label: "Option 7" },
-      { value: "8", label: "Option 8" },
-      { value: "9", label: "Option 9" },
-      { value: "10", label: "Option 10" },
-      { value: "11", label: "Option 11" },
-      { value: "12", label: "Option 12" },
-      { value: "13", label: "Option 13" },
-      { value: "14", label: "Option 14" },
-      { value: "15", label: "Option 15" }
-    ],
-    []
-  );
-
-  const modifiers = [
-    {
-      name: "preventOverflow",
-      options: { mainAxis: false }
-    }
-  ];
-
-  const dialogStyle: React.CSSProperties = {
-    width: "350px",
-    height: "200px",
-    overflow: "auto"
-  };
-
-  return (
-    <Flex gap="large">
-      <DialogContentContainer style={dialogStyle}>
-        <ModalExampleContent />
-        <Box marginTop="medium" marginBottom="xxl">
-          <Dropdown placeholder="Dropdown inside DialogContentContainer" options={options} insideOverflowContainer />
-        </Box>
-      </DialogContentContainer>
-      <div>
-        <Button onClick={() => setShow(true)}>Open Modal</Button>
-        <Modal title="Modal with dropdown" show={show} onClose={closeModal}>
-          <ModalContent>
-            <Dropdown options={options} insideOverflowContainer />
-          </ModalContent>
-        </Modal>
-      </div>
-      <Dialog
-        modifiers={modifiers}
-        showTrigger={["click"]}
-        hideTrigger={["click"]}
-        content={
-          <DialogContentContainer style={dialogStyle}>
-            <ModalExampleContent />
-            <Box marginTop="medium" marginBottom="xxl">
-              <Dropdown placeholder="Dropdown" options={options} insideOverflowContainer />
-            </Box>
-          </DialogContentContainer>
-        }
-      >
-        <Button color="negative">Popup Dialog</Button>
-      </Dialog>
-    </Flex>
-  );
-};
-
-export const InsideOverflowWithTransformContainer: React.FC = () => {
-  const options: DropdownOption[] = useMemo(
-    () => [
-      { value: "1", label: "Option 1" },
-      { value: "2", label: "Option 2" },
-      { value: "3", label: "Option 3" },
-      { value: "4", label: "Option 4" },
-      { value: "5", label: "Option 5" },
-      { value: "6", label: "Option 6" },
-      { value: "7", label: "Option 7" },
-      { value: "8", label: "Option 8" },
-      { value: "9", label: "Option 9" },
-      { value: "10", label: "Option 10" },
-      { value: "11", label: "Option 11" },
-      { value: "12", label: "Option 12" },
-      { value: "13", label: "Option 13" },
-      { value: "14", label: "Option 14" },
-      { value: "15", label: "Option 15" }
-    ],
-    []
-  );
-
-  const dialogStyle: React.CSSProperties = {
-    width: "300px",
-    height: "200px",
-    overflow: "auto"
-  };
-
-  const secondDialogContent = (
-    <DialogContentContainer style={dialogStyle}>
-      <ModalExampleContent />
-      <Box marginTop="medium" marginBottom="xxl">
-        <Dropdown placeholder="Dropdown" options={options} insideOverflowWithTransformContainer />
-      </Box>
-    </DialogContentContainer>
-  );
-
-  return (
-    <Dialog content={secondDialogContent} hideTrigger="clickoutside" showTrigger="click">
-      <Button>Popup Dialog</Button>
-    </Dialog>
-  );
-};
diff --git a/packages/docs/src/pages/components/EditableHeading/EditableHeading.stories.helpers.tsx b/packages/docs/src/pages/components/EditableHeading/EditableHeading.stories.helpers.tsx
index e35c5c5469..827804aa43 100644
--- a/packages/docs/src/pages/components/EditableHeading/EditableHeading.stories.helpers.tsx
+++ b/packages/docs/src/pages/components/EditableHeading/EditableHeading.stories.helpers.tsx
@@ -4,7 +4,7 @@ import { StorybookLink, Tip } from "vibe-storybook-components";
 export const TipEditableText = () => (
   <Tip title="Am I using the right component?">
     This component is used for editing text size 18px and up. For editing smaller text sizes, consider using{" "}
-    <StorybookLink page="Components/EditableText" size={StorybookLink.sizes.SMALL}>
+    <StorybookLink page="Components/EditableText" size="small">
       EditableText
     </StorybookLink>
   </Tip>
diff --git a/packages/docs/src/pages/components/EditableHeading/EditableHeading.stories.tsx b/packages/docs/src/pages/components/EditableHeading/EditableHeading.stories.tsx
index c64de7b00c..c81def9d0b 100644
--- a/packages/docs/src/pages/components/EditableHeading/EditableHeading.stories.tsx
+++ b/packages/docs/src/pages/components/EditableHeading/EditableHeading.stories.tsx
@@ -37,22 +37,22 @@ export const Types = {
   render: () => (
     <Flex direction="column" gap="large" align="start">
       <Flex gap="large">
-        <EditableHeading id="h1-light" ariaLabel="H1 light heading" type="h1" weight="light" value="H1 Light" />
-        <EditableHeading id="h1-normal" ariaLabel="H1 normal heading" type="h1" weight="normal" value="H1 Normal" />
-        <EditableHeading id="h1-medium" ariaLabel="H1 medium heading" type="h1" weight="medium" value="H1 Medium" />
-        <EditableHeading id="h1-bold" ariaLabel="H1 bold heading" type="h1" weight="bold" value="H1 Bold" />
+        <EditableHeading id="h1-light" aria-label="H1 light heading" type="h1" weight="light" value="H1 Light" />
+        <EditableHeading id="h1-normal" aria-label="H1 normal heading" type="h1" weight="normal" value="H1 Normal" />
+        <EditableHeading id="h1-medium" aria-label="H1 medium heading" type="h1" weight="medium" value="H1 Medium" />
+        <EditableHeading id="h1-bold" aria-label="H1 bold heading" type="h1" weight="bold" value="H1 Bold" />
       </Flex>
       <Flex gap="large">
-        <EditableHeading id="h2-light" ariaLabel="H2 light heading" type="h2" weight="light" value="H2 Light" />
-        <EditableHeading id="h2-normal" ariaLabel="H2 normal heading" type="h2" weight="normal" value="H2 Normal" />
-        <EditableHeading id="h2-medium" ariaLabel="H2 medium heading" type="h2" weight="medium" value="H2 Medium" />
-        <EditableHeading id="h2-bold" ariaLabel="H2 bold heading" type="h2" weight="bold" value="H2 Bold" />
+        <EditableHeading id="h2-light" aria-label="H2 light heading" type="h2" weight="light" value="H2 Light" />
+        <EditableHeading id="h2-normal" aria-label="H2 normal heading" type="h2" weight="normal" value="H2 Normal" />
+        <EditableHeading id="h2-medium" aria-label="H2 medium heading" type="h2" weight="medium" value="H2 Medium" />
+        <EditableHeading id="h2-bold" aria-label="H2 bold heading" type="h2" weight="bold" value="H2 Bold" />
       </Flex>
       <Flex gap="large">
-        <EditableHeading id="h3-light" ariaLabel="H3 light heading" type="h3" weight="light" value="H3 Light" />
-        <EditableHeading id="h3-normal" ariaLabel="H3 normal heading" type="h3" weight="normal" value="H3 Normal" />
-        <EditableHeading id="h3-medium" ariaLabel="H3 medium heading" type="h3" weight="medium" value="H3 Medium" />
-        <EditableHeading id="h3-bold" ariaLabel="H3 bold heading" type="h3" weight="bold" value="H3 Bold" />
+        <EditableHeading id="h3-light" aria-label="H3 light heading" type="h3" weight="light" value="H3 Light" />
+        <EditableHeading id="h3-normal" aria-label="H3 normal heading" type="h3" weight="normal" value="H3 Normal" />
+        <EditableHeading id="h3-medium" aria-label="H3 medium heading" type="h3" weight="medium" value="H3 Medium" />
+        <EditableHeading id="h3-bold" aria-label="H3 bold heading" type="h3" weight="bold" value="H3 Bold" />
       </Flex>
     </Flex>
   )
@@ -62,7 +62,7 @@ export const WithPlaceholder = {
   render: () => (
     <EditableHeading
       id="with-placeholder"
-      ariaLabel="Editable heading with placeholder"
+      aria-label="Editable heading with placeholder"
       value="Clear heading to see placeholder"
       placeholder="Enter your heading here..."
     />
diff --git a/packages/docs/src/pages/components/EditableText/EditableText.stories.helpers.tsx b/packages/docs/src/pages/components/EditableText/EditableText.stories.helpers.tsx
index c2ae60aa15..41e91b6e6b 100644
--- a/packages/docs/src/pages/components/EditableText/EditableText.stories.helpers.tsx
+++ b/packages/docs/src/pages/components/EditableText/EditableText.stories.helpers.tsx
@@ -5,7 +5,7 @@ export const TipTextField = () => (
   <Tip title="Am I using the right component?">
     This component is used for editing existing text. To allow users to fill empty text fields, for example in a form,
     consider using{" "}
-    <StorybookLink page="Components/TextField" size={StorybookLink.sizes.SMALL}>
+    <StorybookLink page="Components/TextField" size="small">
       TextField
     </StorybookLink>
   </Tip>
diff --git a/packages/docs/src/pages/components/EditableText/EditableText.stories.tsx b/packages/docs/src/pages/components/EditableText/EditableText.stories.tsx
index 7a9b98dcd4..5fa626a14f 100644
--- a/packages/docs/src/pages/components/EditableText/EditableText.stories.tsx
+++ b/packages/docs/src/pages/components/EditableText/EditableText.stories.tsx
@@ -21,7 +21,7 @@ const EditableTextTemplate = createComponentTemplate(EditableText);
 export const Overview = {
   render: EditableTextTemplate.bind({}),
   args: {
-    ariaLabel: "Editable text",
+    "aria-label": "Editable text",
     value: "This text is an editable text"
   },
   play: overviewPlaySuite,
@@ -38,18 +38,18 @@ export const Types = {
   render: () => (
     <Flex direction="column" gap="large" align="start">
       <Flex gap="large">
-        <EditableText ariaLabel="Text1 normal editable text" type="text1" weight="normal" value="Text1 Normal" />
-        <EditableText ariaLabel="Text1 medium editable text" type="text1" weight="medium" value="Text1 Medium" />
-        <EditableText ariaLabel="Text1 bold editable text" type="text1" weight="bold" value="Text1 Bold" />
+        <EditableText aria-label="Text1 normal editable text" type="text1" weight="normal" value="Text1 Normal" />
+        <EditableText aria-label="Text1 medium editable text" type="text1" weight="medium" value="Text1 Medium" />
+        <EditableText aria-label="Text1 bold editable text" type="text1" weight="bold" value="Text1 Bold" />
       </Flex>
       <Flex gap="large">
-        <EditableText ariaLabel="Text2 normal editable text" type="text2" weight="normal" value="Text2 Normal" />
-        <EditableText ariaLabel="Text2 medium editable text" type="text2" weight="medium" value="Text2 Medium" />
-        <EditableText ariaLabel="Text2 bold editable text" type="text2" weight="bold" value="Text2 Bold" />
+        <EditableText aria-label="Text2 normal editable text" type="text2" weight="normal" value="Text2 Normal" />
+        <EditableText aria-label="Text2 medium editable text" type="text2" weight="medium" value="Text2 Medium" />
+        <EditableText aria-label="Text2 bold editable text" type="text2" weight="bold" value="Text2 Bold" />
       </Flex>
       <Flex gap="large">
-        <EditableText ariaLabel="Text3 normal editable text" type="text3" weight="normal" value="Text3 Normal" />
-        <EditableText ariaLabel="Text3 medium editable text" type="text3" weight="medium" value="Text3 Medium" />
+        <EditableText aria-label="Text3 normal editable text" type="text3" weight="normal" value="Text3 Normal" />
+        <EditableText aria-label="Text3 medium editable text" type="text3" weight="medium" value="Text3 Medium" />
       </Flex>
     </Flex>
   )
@@ -58,7 +58,7 @@ export const Types = {
 export const Multiline = {
   render: () => (
     <EditableText
-      ariaLabel="Multiline editable text"
+      aria-label="Multiline editable text"
       type="text1"
       weight="normal"
       multiline
@@ -71,7 +71,7 @@ here's the second line`}
 export const WithPlaceholder = {
   render: () => (
     <EditableText
-      ariaLabel="Editable text with placeholder"
+      aria-label="Editable text with placeholder"
       value="Clear text to see placeholder"
       placeholder="Enter your text here..."
     />
diff --git a/packages/docs/src/pages/components/ExpandCollapse/ExpandCollapse.stories.helpers.tsx b/packages/docs/src/pages/components/ExpandCollapse/ExpandCollapse.stories.helpers.tsx
index 5616410c7c..d7a538762a 100644
--- a/packages/docs/src/pages/components/ExpandCollapse/ExpandCollapse.stories.helpers.tsx
+++ b/packages/docs/src/pages/components/ExpandCollapse/ExpandCollapse.stories.helpers.tsx
@@ -4,7 +4,7 @@ import { StorybookLink, Tip } from "vibe-storybook-components";
 export const TipCombineMultiple = () => (
   <Tip title="Want to combine multiple ExpandCollapse?">
     Use our{" "}
-    <StorybookLink size={StorybookLink.sizes.SMALL} page="Components/Accordion">
+    <StorybookLink size="small" page="Components/Accordion">
       Accordion
     </StorybookLink>{" "}
     component
diff --git a/packages/docs/src/pages/components/ExpandCollapse/ExpandCollapse.stories.tsx b/packages/docs/src/pages/components/ExpandCollapse/ExpandCollapse.stories.tsx
index 3879ac3dd3..c90c5792fd 100644
--- a/packages/docs/src/pages/components/ExpandCollapse/ExpandCollapse.stories.tsx
+++ b/packages/docs/src/pages/components/ExpandCollapse/ExpandCollapse.stories.tsx
@@ -31,7 +31,7 @@ export const Overview = {
           <Text type="text2" maxLines={2}>
             Insert here any component that you want, here is a robot for you
           </Text>
-          <Icon iconType="svg" icon={Robot} iconSize={40} />
+          <Icon type="svg" icon={Robot} size={40} />
         </ExpandCollapse>
       </div>
     );
diff --git a/packages/docs/src/pages/components/GridKeyboardNavigationContext/useGridKeyboardNavigationContext.stories.helpers.tsx b/packages/docs/src/pages/components/GridKeyboardNavigationContext/useGridKeyboardNavigationContext.stories.helpers.tsx
index 51e162128e..66bdb75285 100644
--- a/packages/docs/src/pages/components/GridKeyboardNavigationContext/useGridKeyboardNavigationContext.stories.helpers.tsx
+++ b/packages/docs/src/pages/components/GridKeyboardNavigationContext/useGridKeyboardNavigationContext.stories.helpers.tsx
@@ -7,8 +7,7 @@ import {
   Flex,
   useGridKeyboardNavigation,
   GridKeyboardNavigationContext,
-  useGridKeyboardNavigationContext,
-  type VibeComponent
+  useGridKeyboardNavigationContext
 } from "@vibe/core";
 import "./useGridKeyboardNavigationContext.stories.scss";
 const ELEMENT_WIDTH_PX = 72;
@@ -24,7 +23,7 @@ interface DummyNavigableGridProps {
   disabledIndexes?: number[];
   withoutBorder?: boolean;
 }
-export const DummyNavigableGrid: VibeComponent<DummyNavigableGridProps> = forwardRef(
+export const DummyNavigableGrid: React.ForwardRefExoticComponent<DummyNavigableGridProps & React.RefAttributes<HTMLElement>> = forwardRef(
   (
     { itemsCount, numberOfItemsInLine, itemPrefix = "", disabled = false, disabledIndexes = [], withoutBorder = false },
     ref: RefObject<HTMLDivElement>
diff --git a/packages/docs/src/pages/components/Heading/Heading.stories.helpers.tsx b/packages/docs/src/pages/components/Heading/Heading.stories.helpers.tsx
index 0cb14ec0cc..459d0f7b38 100644
--- a/packages/docs/src/pages/components/Heading/Heading.stories.helpers.tsx
+++ b/packages/docs/src/pages/components/Heading/Heading.stories.helpers.tsx
@@ -4,7 +4,7 @@ import { StorybookLink, Tip } from "vibe-storybook-components";
 export const TipEditableHeading = () => (
   <Tip title="Heading components are not editable">
     Check out our{" "}
-    <StorybookLink page="Components/EditableHeading" size={StorybookLink.sizes.SMALL}>
+    <StorybookLink page="Components/EditableHeading" size="small">
       EditableHeading
     </StorybookLink>{" "}
     component if you would like to allow users to edit the title text.
diff --git a/packages/docs/src/pages/components/Heading/Heading.stories.tsx b/packages/docs/src/pages/components/Heading/Heading.stories.tsx
index 8a19360d35..06d090031d 100644
--- a/packages/docs/src/pages/components/Heading/Heading.stories.tsx
+++ b/packages/docs/src/pages/components/Heading/Heading.stories.tsx
@@ -149,7 +149,7 @@ export const BuiltInPageHeaderNotEditable = {
         My work
       </Heading>
       <Divider />
-      <Flex align="center" gap="small" aria-labelledby="my-work-id" style={{ marginTop: "var(--spacing-medium" }}>
+      <Flex align="center" gap="small" aria-labelledby="my-work-id" style={{ marginTop: "var(--space-16)" }}>
         <Box style={{ width: "146px" }}>
           <Search placeholder="Search" />
         </Box>
diff --git a/packages/docs/src/pages/components/Icon/Icon.stories.tsx b/packages/docs/src/pages/components/Icon/Icon.stories.tsx
index ba8184c940..f8b39ebddf 100644
--- a/packages/docs/src/pages/components/Icon/Icon.stories.tsx
+++ b/packages/docs/src/pages/components/Icon/Icon.stories.tsx
@@ -37,7 +37,7 @@ export const Overview = {
 };
 
 export const VibeIcon = {
-  render: () => <Icon id="vibe-icon" iconType="svg" icon={Bolt} iconLabel="my bolt svg icon" iconSize={16} />,
+  render: () => <Icon id="vibe-icon" type="svg" icon={Bolt} label="my bolt svg icon" size={16} />,
   parameters: {
     docs: {
       liveEdit: {
@@ -48,16 +48,17 @@ export const VibeIcon = {
 };
 
 export const FontIcon = {
-  render: () => <Icon id="font-icon" iconType="font" iconLabel="my font awesome start icon" icon="fa fa-star" />
+  render: () => <Icon id="font-icon" type="font" label="my font awesome start icon" icon="fa fa-star" />
 };
 
 export const CustomSvg = {
   render: () => (
     <Icon
       id="custom-svg-icon"
-      iconType="src"
+      type="src"
       icon="https://cdn.monday.com/images/apps/custom-icons/Form.svg"
-      iconLabel="my src awesome icon"
+      label="my src awesome icon"
+      size={20}
       useCurrentColor
     />
   )
@@ -70,7 +71,7 @@ export const Color = {
         color: "var(--sb-color-sofia_pink)"
       }}
     >
-      <Icon id="colored-icon" iconType="svg" icon={Bolt} iconLabel="my bolt svg icon" iconSize={16} />
+      <Icon id="colored-icon" type="svg" icon={Bolt} label="my bolt svg icon" size={16} />
     </div>
   ),
   parameters: {
@@ -111,7 +112,7 @@ export const IconsListStory = {
               return (
                 <>
                   <Flex style={{ color: "var(--sb-icon-color)" }} gap="small">
-                    <Icon icon={Component} iconSize={26} />
+                    <Icon icon={Component} size={26} />
                     <span>{icon.name}</span>
                   </Flex>
                 </>
diff --git a/packages/docs/src/pages/components/IconButton/IconButton.stories.helpers.tsx b/packages/docs/src/pages/components/IconButton/IconButton.stories.helpers.tsx
index f70bd0bc80..98e0c3e60c 100644
--- a/packages/docs/src/pages/components/IconButton/IconButton.stories.helpers.tsx
+++ b/packages/docs/src/pages/components/IconButton/IconButton.stories.helpers.tsx
@@ -4,7 +4,7 @@ import { StorybookLink, Tip } from "vibe-storybook-components";
 export const TipCheckYourself = () => (
   <Tip title="Check yourself">
     To display icons that do not have actions associated with them, use the{" "}
-    <StorybookLink page="Components/Icon" size={StorybookLink.sizes.SMALL}>
+    <StorybookLink page="Components/Icon" size="small">
       Icon component
     </StorybookLink>
     .
@@ -14,7 +14,7 @@ export const TipCheckYourself = () => (
 export const TipInfo = () => (
   <Tip>
     If you need to use an icon as a button that opens info dialog with additional information, check out{" "}
-    <StorybookLink page="Components/Info" size={StorybookLink.sizes.SMALL}>
+    <StorybookLink page="Components/Info" size="small">
       Info
     </StorybookLink>{" "}
     component.
@@ -24,7 +24,7 @@ export const TipInfo = () => (
 export const TipMenuButton = () => (
   <Tip>
     If you need to use an icon as a button that opens menu next to it, check out{" "}
-    <StorybookLink page="Components/MenuButton" size={StorybookLink.sizes.SMALL}>
+    <StorybookLink page="Components/MenuButton" size="small">
       Menu button
     </StorybookLink>{" "}
     component.
diff --git a/packages/docs/src/pages/components/IconButton/IconButton.stories.tsx b/packages/docs/src/pages/components/IconButton/IconButton.stories.tsx
index 1c81e97743..279c554b7c 100644
--- a/packages/docs/src/pages/components/IconButton/IconButton.stories.tsx
+++ b/packages/docs/src/pages/components/IconButton/IconButton.stories.tsx
@@ -27,7 +27,7 @@ export const Overview: Story = {
   render: iconButtonTemplate.bind({}),
   args: {
     id: "overview-icon-button",
-    ariaLabel: "Add",
+    "aria-label": "Add",
     icon: Add
   },
   parameters: {
@@ -49,9 +49,9 @@ export const Kinds: Story = {
         width: "100%"
       }}
     >
-      <IconButton id="kinds-primary" icon={Bolt} kind="primary" ariaLabel="My primary IconButton" />
-      <IconButton id="kinds-secondary" icon={Bolt} kind="secondary" ariaLabel="My secondary IconButton" />
-      <IconButton id="kinds-tertiary" icon={Bolt} kind="tertiary" ariaLabel="My tertiary IconButton" />
+      <IconButton id="kinds-primary" icon={Bolt} kind="primary" aria-label="My primary IconButton" />
+      <IconButton id="kinds-secondary" icon={Bolt} kind="secondary" aria-label="My secondary IconButton" />
+      <IconButton id="kinds-tertiary" icon={Bolt} kind="tertiary" aria-label="My tertiary IconButton" />
     </div>
   ),
   parameters: {
@@ -73,15 +73,15 @@ export const Sizes: Story = {
         width: "100%"
       }}
     >
-      <IconButton key="xxs" id="sizes-xxs" icon={Robot} kind="secondary" size="xxs" ariaLabel="My xxs IconButton" />
-      <IconButton key="xs" id="sizes-xs" icon={Robot} kind="secondary" size="xs" ariaLabel="My xs IconButton" />
+      <IconButton key="xxs" id="sizes-xxs" icon={Robot} kind="secondary" size="xxs" aria-label="My xxs IconButton" />
+      <IconButton key="xs" id="sizes-xs" icon={Robot} kind="secondary" size="xs" aria-label="My xs IconButton" />
       <IconButton
         key="small"
         id="sizes-small"
         icon={Robot}
         kind="secondary"
         size="small"
-        ariaLabel="My small IconButton"
+        aria-label="My small IconButton"
       />
       <IconButton
         key="medium"
@@ -89,7 +89,7 @@ export const Sizes: Story = {
         icon={Robot}
         kind="secondary"
         size="medium"
-        ariaLabel="My medium IconButton"
+        aria-label="My medium IconButton"
       />
       <IconButton
         key="large"
@@ -97,7 +97,7 @@ export const Sizes: Story = {
         icon={Robot}
         kind="secondary"
         size="large"
-        ariaLabel="My large IconButton"
+        aria-label="My large IconButton"
       />
     </div>
   ),
@@ -120,9 +120,9 @@ export const Active: Story = {
         width: "100%"
       }}
     >
-      <IconButton id="active-primary" icon={Doc} kind="primary" ariaLabel="My small active IconButton" active />
-      <IconButton id="active-secondary" icon={Doc} kind="secondary" ariaLabel="My active medium IconButton" active />
-      <IconButton id="active-tertiary" icon={Doc} kind="tertiary" ariaLabel="My active large IconButton" active />
+      <IconButton id="active-primary" icon={Doc} kind="primary" aria-label="My small active IconButton" active />
+      <IconButton id="active-secondary" icon={Doc} kind="secondary" aria-label="My active medium IconButton" active />
+      <IconButton id="active-tertiary" icon={Doc} kind="tertiary" aria-label="My active large IconButton" active />
     </div>
   ),
   parameters: {
@@ -148,7 +148,7 @@ export const Disabled: Story = {
         id="disabled-primary"
         icon={Doc}
         kind="primary"
-        ariaLabel="My small disabled IconButton"
+        aria-label="My small disabled IconButton"
         disabled
         disabledReason="This function is not available"
       />
@@ -156,7 +156,7 @@ export const Disabled: Story = {
         id="disabled-secondary"
         icon={Doc}
         kind="secondary"
-        ariaLabel="My disabled medium IconButton"
+        aria-label="My disabled medium IconButton"
         disabled
         disabledReason="This function is not available"
       />
@@ -164,7 +164,7 @@ export const Disabled: Story = {
         id="disabled-tertiary"
         icon={Doc}
         kind="tertiary"
-        ariaLabel="My disabled large IconButton"
+        aria-label="My disabled large IconButton"
         disabled
         disabledReason="This function is not available"
       />
@@ -195,7 +195,7 @@ export const IconButtonAsToolbarButton: Story = {
           <IconButton
             id="toolbar-filter-button"
             icon={Filter}
-            ariaLabel="Filter the widget by everything"
+            aria-label="Filter the widget by everything"
             size="small"
           />
         </Flex>
@@ -227,14 +227,14 @@ export const IconButtonAsCloseButton: Story = {
       >
         <Flex justify="start" gap="large" style={{ height: "94px" }}>
           <Flex direction="column" justify="center" style={{ color: "var(--sb-icon-color)" }}>
-            <Icon icon={Item} iconSize={40} />
+            <Icon icon={Item} size={40} />
             <Text type="text1" id="monday-recycle-bin-title">
               Item
             </Text>
           </Flex>
           <Divider direction="vertical" />
           <Avatar size="large" src={person1} type="img" />
-          <Flex direction="column" align="start" ariaLabelledby="monday-recycle-bin-title" style={{ flexGrow: 1 }}>
+          <Flex direction="column" align="start" aria-labelledby="monday-recycle-bin-title" style={{ flexGrow: 1 }}>
             <Flex gap="xs">
               <Link withoutSpacing href="">
                 Hadas Farhi
@@ -254,12 +254,12 @@ export const IconButtonAsCloseButton: Story = {
               <Text>(Available for restore in the next 1M)</Text>
             </Flex>
           </Flex>
-          <Button id="restore-button" ariaLabel="Restore deleted item">
+          <Button id="restore-button" aria-label="Restore deleted item">
             Restore
           </Button>
         </Flex>
       </Box>
-      <IconButton id="close-recycle-button" icon={CloseSmall} size="small" ariaLabel="Remove from Recycle bin" />
+      <IconButton id="close-recycle-button" icon={CloseSmall} size="small" aria-label="Remove from Recycle bin" />
     </Flex>
   ),
   parameters: {
diff --git a/packages/docs/src/pages/components/Info/Info.stories.tsx b/packages/docs/src/pages/components/Info/Info.stories.tsx
index 11ce17cd73..c4208791b7 100644
--- a/packages/docs/src/pages/components/Info/Info.stories.tsx
+++ b/packages/docs/src/pages/components/Info/Info.stories.tsx
@@ -12,7 +12,7 @@ const metaSettings = createStoryMetaSettingsDecorator({
 });
 
 export default {
-  title: "Components/Info [New]",
+  title: "Components/Info",
   component: Info,
   argTypes: {
     ...metaSettings.argTypes
diff --git a/packages/docs/src/pages/components/Label/Label.stories.helpers.tsx b/packages/docs/src/pages/components/Label/Label.stories.helpers.tsx
index 25f37d7dc2..3ec6208f59 100644
--- a/packages/docs/src/pages/components/Label/Label.stories.helpers.tsx
+++ b/packages/docs/src/pages/components/Label/Label.stories.helpers.tsx
@@ -4,7 +4,7 @@ import { StorybookLink, Tip } from "vibe-storybook-components";
 export const TipCheckYourself = () => (
   <Tip title="Check yourself">
     Need to count or indicate numbers? Use the{" "}
-    <StorybookLink page="Components/Counter" size={StorybookLink.sizes.SMALL}>
+    <StorybookLink page="Components/Counter" size="small">
       Counter
     </StorybookLink>{" "}
     component instead.
diff --git a/packages/docs/src/pages/components/Label/Label.stories.tsx b/packages/docs/src/pages/components/Label/Label.stories.tsx
index 15531ce7b4..2af8c435b9 100644
--- a/packages/docs/src/pages/components/Label/Label.stories.tsx
+++ b/packages/docs/src/pages/components/Label/Label.stories.tsx
@@ -151,7 +151,7 @@ export const Celebration = {
         <Label id="celebration-label" text="New" kind="line" celebrationAnimation={animate} />
         <Button
           id="celebration-button"
-          ariaLabel="Trigger celebration animation"
+          aria-label="Trigger celebration animation"
           size="small"
           kind="tertiary"
           onClick={() => setAnimate(true)}
diff --git a/packages/docs/src/pages/components/Link/Link.stories.helpers.tsx b/packages/docs/src/pages/components/Link/Link.stories.helpers.tsx
index 67d23a7716..9fa743a570 100644
--- a/packages/docs/src/pages/components/Link/Link.stories.helpers.tsx
+++ b/packages/docs/src/pages/components/Link/Link.stories.helpers.tsx
@@ -4,7 +4,7 @@ import { StorybookLink, Tip } from "vibe-storybook-components";
 export const TipButton = () => (
   <Tip>
     If you need an action that does not have context with text{" "}
-    <StorybookLink page="Components/Combobox" size={StorybookLink.sizes.SMALL}>
+    <StorybookLink page="Components/Combobox" size="small">
       Button
     </StorybookLink>
     .
diff --git a/packages/docs/src/pages/components/List/List.stories.helpers.tsx b/packages/docs/src/pages/components/List/List.stories.helpers.tsx
index 722d7cabee..c7608ac455 100644
--- a/packages/docs/src/pages/components/List/List.stories.helpers.tsx
+++ b/packages/docs/src/pages/components/List/List.stories.helpers.tsx
@@ -4,7 +4,7 @@ import { StorybookLink, Tip } from "vibe-storybook-components";
 export const TipCheckYourself = () => (
   <Tip title="Check yourself">
     For implementing a menu inside a dialog, please use our{" "}
-    <StorybookLink page="Components/Menu" size={StorybookLink.sizes.SMALL}>
+    <StorybookLink page="Components/Menu" size="small">
       Menu
     </StorybookLink>{" "}
     component
diff --git a/packages/docs/src/pages/components/List/List.stories.tsx b/packages/docs/src/pages/components/List/List.stories.tsx
index 8494b68b3f..d8e378f596 100644
--- a/packages/docs/src/pages/components/List/List.stories.tsx
+++ b/packages/docs/src/pages/components/List/List.stories.tsx
@@ -43,7 +43,7 @@ export const Overview: Story = {
   render: listTemplate,
   name: "Overview",
   args: {
-    ariaLabel: "Power ups list"
+    "aria-label": "Power ups list"
   },
   parameters: {
     docs: {
@@ -56,7 +56,7 @@ export const Overview: Story = {
 
 export const ListWithIcons: Story = {
   render: () => (
-    <List ariaLabel="List with icons">
+    <List aria-label="List with icons">
       <ListItem label="List item 1" value="list-1" startElement={{ type: "icon", value: Board }} />
       <ListItem label="List item 2" value="list-2" startElement={{ type: "icon", value: Team }} />
       <ListItem label="List item 3" value="list-3" startElement={{ type: "icon", value: ThumbsUp }} />
@@ -74,7 +74,7 @@ export const ListWithIcons: Story = {
 
 export const ListWithAvatars: Story = {
   render: () => (
-    <List ariaLabel="List with avatars">
+    <List aria-label="List with avatars">
       <ListItem label="List item 1" value="list-1" startElement={{ type: "avatar", value: person1 }} />
       <ListItem label="List item 2" value="list-2" startElement={{ type: "avatar", value: person2 }} />
       <ListItem label="List item 3" value="list-3" startElement={{ type: "avatar", value: person3 }} />
@@ -92,7 +92,7 @@ export const ListWithAvatars: Story = {
 
 export const ListWithTitle: Story = {
   render: () => (
-    <List ariaLabel="List with title">
+    <List aria-label="List with title">
       <ListTitle>Category A</ListTitle>
       <ListItem label="List item 1" value="list-1" startElement={{ type: "icon", value: Board }} />
       <ListItem label="List item 2" value="list-2" startElement={{ type: "icon", value: Team }} />
@@ -114,7 +114,7 @@ export const ListWithTitle: Story = {
 export const StickyTitle: Story = {
   render: () => (
     <DialogContentContainer style={{ width: "250px" }}>
-      <List ariaLabel="List with sticky titles" maxHeight={200}>
+      <List aria-label="List with sticky titles" maxHeight={200}>
         <ListTitle sticky>Category A</ListTitle>
         <ListItem label="List item 1" value="1" startElement={{ type: "icon", value: Board }} />
         <ListItem label="List item 2" value="2" startElement={{ type: "icon", value: Board }} />
@@ -146,7 +146,7 @@ export const StickyTitle: Story = {
 export const ScrollableList: Story = {
   render: () => (
     <DialogContentContainer style={{ width: "200px" }}>
-      <List ariaLabel="Scrollable list" maxHeight={162}>
+      <List aria-label="Scrollable list" maxHeight={162}>
         <ListItem label="List item 1" value="1" />
         <ListItem label="List item 2" value="2" />
         <ListItem label="List item 3" value="3" />
@@ -173,7 +173,7 @@ export const Sizes: Story = {
           Small
         </Text>
         <div style={{ width: 200 }}>
-          <List ariaLabel="Small list" size="small">
+          <List aria-label="Small list" size="small">
             <ListItem label="Small item 1" value="1" />
             <ListItem label="Small item 2" value="2" />
             <ListItem label="Small item 3" value="3" />
@@ -185,7 +185,7 @@ export const Sizes: Story = {
           Medium
         </Text>
         <div style={{ width: 200 }}>
-          <List ariaLabel="Medium list" size="medium">
+          <List aria-label="Medium list" size="medium">
             <ListItem label="Medium item 1" value="1" />
             <ListItem label="Medium item 2" value="2" />
             <ListItem label="Medium item 3" value="3" />
@@ -197,7 +197,7 @@ export const Sizes: Story = {
           Large
         </Text>
         <div style={{ width: 200 }}>
-          <List ariaLabel="Large list" size="large">
+          <List aria-label="Large list" size="large">
             <ListItem label="Large item 1" value="1" />
             <ListItem label="Large item 2" value="2" />
             <ListItem label="Large item 3" value="3" />
@@ -212,7 +212,7 @@ export const Sizes: Story = {
 export const States: Story = {
   render: () => (
     <Flex gap="large" align="start">
-      <List ariaLabel="States example">
+      <List aria-label="States example">
         <ListItem label="Default state" value="default" />
         <ListItem label="Disabled state" value="disabled" disabled />
         <ListItem label="Selected state" value="selected" selected />
@@ -225,7 +225,7 @@ export const States: Story = {
 export const InDialogContainer: Story = {
   render: () => (
     <DialogContentContainer style={{ width: 250 }}>
-      <List ariaLabel="List in dialog" maxHeight={200}>
+      <List aria-label="List in dialog" maxHeight={200}>
         <ListItem label="View Profile" value="profile" startElement={{ type: "icon", value: Person }} />
         <ListItem label="Settings" value="settings" startElement={{ type: "icon", value: Settings }} />
         <ListItem label="Favorites" value="favorites" startElement={{ type: "icon", value: Favorite }} />
@@ -252,7 +252,7 @@ export const WithClickHandler: Story = {
       <div>
         <p style={{ marginBottom: 16 }}>Last clicked: {lastClicked ?? "None"}</p>
         <div style={{ width: 300 }}>
-          <List ariaLabel="Clickable list">
+          <List aria-label="Clickable list">
             <ListItem label="Click me" value="1" onClick={() => setLastClicked("Item 1")} />
             <ListItem label="Or click me" value="2" onClick={() => setLastClicked("Item 2")} />
             <ListItem label="Disabled (can't click)" value="3" disabled onClick={() => setLastClicked("Item 3")} />
@@ -267,7 +267,7 @@ export const WithClickHandler: Story = {
 export const WithEndElements: Story = {
   render: () => (
     <div style={{ width: 300 }}>
-      <List ariaLabel="List with end elements">
+      <List aria-label="List with end elements">
         <ListItem
           label="Settings"
           value="1"
diff --git a/packages/docs/src/pages/components/List/ListItem.stories.tsx b/packages/docs/src/pages/components/List/ListItem.stories.tsx
index 54fa1c1985..41592a40ea 100644
--- a/packages/docs/src/pages/components/List/ListItem.stories.tsx
+++ b/packages/docs/src/pages/components/List/ListItem.stories.tsx
@@ -22,7 +22,7 @@ type Story = StoryObj<typeof ListItem>;
 
 export const Overview: Story = {
   render: (args: ListItemProps) => (
-    <List ariaLabel="List item overview">
+    <List aria-label="List item overview">
       <ListItem {...args} />
     </List>
   ),
@@ -42,7 +42,7 @@ export const Overview: Story = {
 
 export const States: Story = {
   render: () => (
-    <List ariaLabel="States example">
+    <List aria-label="States example">
       <ListItem label="Default state" value="default" />
       <ListItem label="Disabled state" value="disabled" disabled />
       <ListItem label="Selected state" value="selected" selected />
@@ -53,7 +53,7 @@ export const States: Story = {
 
 export const WithIcon: Story = {
   render: () => (
-    <List ariaLabel="List with icon">
+    <List aria-label="List with icon">
       <ListItem
         label="Productivity"
         value="productivity"
@@ -73,7 +73,7 @@ export const WithIcon: Story = {
 
 export const WithAvatar: Story = {
   render: () => (
-    <List ariaLabel="List with avatar">
+    <List aria-label="List with avatar">
       <ListItem
         label="Sophia Johnson"
         value="sophia"
@@ -94,7 +94,7 @@ export const WithAvatar: Story = {
 export const WithEndElement: Story = {
   render: () => (
     <div style={{ width: 250 }}>
-      <List ariaLabel="List with end elements">
+      <List aria-label="List with end elements">
         <ListItem
           label="Settings"
           value="settings"
@@ -130,7 +130,7 @@ export const WithClickHandler: Story = {
     return (
       <div>
         <p style={{ marginBottom: 16 }}>Click count: {clickCount}</p>
-        <List ariaLabel="Clickable list">
+        <List aria-label="Clickable list">
           <ListItem label="Click me!" value="clickable" onClick={handleClick} />
         </List>
       </div>
@@ -141,7 +141,7 @@ export const WithClickHandler: Story = {
 
 export const ReadOnly: Story = {
   render: () => (
-    <List ariaLabel="Read-only list">
+    <List aria-label="Read-only list">
       <ListItem label="Editable item" value="editable" />
       <ListItem label="Read-only item" value="readonly" readOnly />
     </List>
diff --git a/packages/docs/src/pages/components/List/legacy/List.stories.helpers.tsx b/packages/docs/src/pages/components/List/legacy/List.stories.helpers.tsx
index 722d7cabee..c7608ac455 100644
--- a/packages/docs/src/pages/components/List/legacy/List.stories.helpers.tsx
+++ b/packages/docs/src/pages/components/List/legacy/List.stories.helpers.tsx
@@ -4,7 +4,7 @@ import { StorybookLink, Tip } from "vibe-storybook-components";
 export const TipCheckYourself = () => (
   <Tip title="Check yourself">
     For implementing a menu inside a dialog, please use our{" "}
-    <StorybookLink page="Components/Menu" size={StorybookLink.sizes.SMALL}>
+    <StorybookLink page="Components/Menu" size="small">
       Menu
     </StorybookLink>{" "}
     component
diff --git a/packages/docs/src/pages/components/Loader/Loader.mdx b/packages/docs/src/pages/components/Loader/Loader.mdx
index b077fdc609..362e71a983 100644
--- a/packages/docs/src/pages/components/Loader/Loader.mdx
+++ b/packages/docs/src/pages/components/Loader/Loader.mdx
@@ -97,4 +97,4 @@ Indicate the loading status in button if content or an action is loading.
 
 ## Related components
 
-<RelatedComponents componentsNames={["Skeleton", "LinearProgressBar", "Button"]} />
+<RelatedComponents componentsNames={["Skeleton", "ProgressBar", "Button"]} />
diff --git a/packages/docs/src/pages/components/Loader/Loader.stories.helpers.tsx b/packages/docs/src/pages/components/Loader/Loader.stories.helpers.tsx
index b0f1bbeb72..911325cb0d 100644
--- a/packages/docs/src/pages/components/Loader/Loader.stories.helpers.tsx
+++ b/packages/docs/src/pages/components/Loader/Loader.stories.helpers.tsx
@@ -4,7 +4,7 @@ import { StorybookLink, Tip } from "vibe-storybook-components";
 export const TipSkeleton = () => (
   <Tip>
     While loading content consider using{" "}
-    <StorybookLink page="Components/Skeleton" size={StorybookLink.sizes.SMALL}>
+    <StorybookLink page="Components/Skeleton" size="small">
       Skeleton loading
     </StorybookLink>
   </Tip>
diff --git a/packages/docs/src/pages/components/Menu/Menu.stories.helpers.tsx b/packages/docs/src/pages/components/Menu/Menu.stories.helpers.tsx
index 1bafa8ac74..bb0ba40e90 100644
--- a/packages/docs/src/pages/components/Menu/Menu.stories.helpers.tsx
+++ b/packages/docs/src/pages/components/Menu/Menu.stories.helpers.tsx
@@ -6,7 +6,7 @@ import React from "react";
 export const TipCombobox = () => (
   <Tip>
     Need to place a search field to filter results? Use the{" "}
-    <StorybookLink size={StorybookLink.sizes.SMALL} page="Components/Combobox">
+    <StorybookLink size="small" page="Components/Combobox">
       Combobox
     </StorybookLink>{" "}
     component instead
diff --git a/packages/docs/src/pages/components/Menu/Menu.stories.tsx b/packages/docs/src/pages/components/Menu/Menu.stories.tsx
index 6c5ee94e95..a4cebb6f58 100644
--- a/packages/docs/src/pages/components/Menu/Menu.stories.tsx
+++ b/packages/docs/src/pages/components/Menu/Menu.stories.tsx
@@ -35,7 +35,7 @@ export const Sizes = {
   render: () => [
     <Flex gap="medium">
       <DialogContentContainer key="small">
-        <Menu size={Menu.sizes.SMALL}>
+        <Menu size="small">
           <MenuTitle caption="Small menu" />
           <MenuDivider />
           <MenuItem title="Menu item 1" />
@@ -44,7 +44,7 @@ export const Sizes = {
         </Menu>
       </DialogContentContainer>
       <DialogContentContainer key="md">
-        <Menu size={Menu.sizes.MEDIUM}>
+        <Menu size="medium">
           <MenuTitle caption="Medium menu" />
           <MenuDivider />
           <MenuItem title="Menu item 1" />
@@ -53,7 +53,7 @@ export const Sizes = {
         </Menu>
       </DialogContentContainer>
       <DialogContentContainer key="lg">
-        <Menu size={Menu.sizes.LARGE}>
+        <Menu size="large">
           <MenuTitle caption="Large menu" />
           <MenuDivider />
           <MenuItem title="Menu item 1" />
@@ -66,7 +66,7 @@ export const Sizes = {
   name: "Sizes",
 
   args: {
-    size: Menu.sizes.SMALL
+    size: "small"
   }
 };
 
diff --git a/packages/docs/src/pages/components/Menu/MenuItem.stories.tsx b/packages/docs/src/pages/components/Menu/MenuItem.stories.tsx
index 2608736e4a..42e7e5fb67 100644
--- a/packages/docs/src/pages/components/Menu/MenuItem.stories.tsx
+++ b/packages/docs/src/pages/components/Menu/MenuItem.stories.tsx
@@ -55,14 +55,14 @@ export const Icons: Story = {
         <Text>Left icon</Text>
         <Menu>
           <MenuItem title="SVG icon" icon={Activity} />
-          <MenuItem title="Font icon" icon="fa fa-star" iconType="font" />
+          <MenuItem title="Font icon" icon="fa fa-star" type="font" />
         </Menu>
       </Flex>
       <Flex direction="column" gap="medium">
         <Text>Right icon</Text>
         <Menu>
           <MenuItem title="SVG right icon" rightIcon={Activity} />
-          <MenuItem title="Font right icon" rightIcon="fa fa-star" rightIconType="font" />
+          <MenuItem title="Font right icon" rightIcon="fa fa-star" rightType="font" />
         </Menu>
       </Flex>
     </Flex>
@@ -139,7 +139,7 @@ export const TooltipStory: Story = {
         tooltipContent="Menu item with icon and tooltip"
         tooltipPosition="left"
         icon={Activity}
-        iconType="svg"
+        type="svg"
       />
     </Menu>
   ),
diff --git a/packages/docs/src/pages/components/MenuButton/MenuButton.stories.tsx b/packages/docs/src/pages/components/MenuButton/MenuButton.stories.tsx
index 2673ac6444..a20158dc7a 100644
--- a/packages/docs/src/pages/components/MenuButton/MenuButton.stories.tsx
+++ b/packages/docs/src/pages/components/MenuButton/MenuButton.stories.tsx
@@ -23,11 +23,11 @@ export default {
 
 export const Overview: Story = {
   render: (args: MenuButtonProps) => (
-    <MenuButton id="overview-menu-button" ariaLabel="Overview menu button" {...args}>
-      <Menu id="overview-menu" size="medium" focusItemIndexOnMount={0}>
-        <MenuItem id="overview-menu-sun" icon={Sun} onClick={NOOP} iconType="svg" title="The sun" />
-        <MenuItem id="overview-menu-moon" icon={Moon} onClick={NOOP} iconType="svg" title="The moon" />
-        <MenuItem id="overview-menu-stars" icon={Favorite} onClick={NOOP} iconType="svg" title="And the stars" />
+    <MenuButton id="overview-menu-button" aria-label="Overview menu button" {...args}>
+      <Menu id="overview-menu" size="medium">
+        <MenuItem id="overview-menu-sun" icon={Sun} onClick={NOOP} type="svg" title="The sun" />
+        <MenuItem id="overview-menu-moon" icon={Moon} onClick={NOOP} type="svg" title="The moon" />
+        <MenuItem id="overview-menu-stars" icon={Favorite} onClick={NOOP} type="svg" title="And the stars" />
       </Menu>
     </MenuButton>
   ),
@@ -43,39 +43,39 @@ export const Overview: Story = {
 export const Sizes: Story = {
   render: () => (
     <>
-      <MenuButton id="sizes-xxs" ariaLabel="Extra extra small menu button" size="xxs">
-        <Menu id="sizes-xxs-menu" size="medium" focusItemIndexOnMount={0}>
-          <MenuItem id="sizes-xxs-sun" icon={Sun} onClick={NOOP} iconType="svg" title="The sun" />
-          <MenuItem id="sizes-xxs-moon" icon={Moon} onClick={NOOP} iconType="svg" title="The moon" />
-          <MenuItem id="sizes-xxs-stars" icon={Favorite} onClick={NOOP} iconType="svg" title="And the stars" />
+      <MenuButton id="sizes-xxs" aria-label="Extra extra small menu button" size="xxs">
+        <Menu id="sizes-xxs-menu" size="medium">
+          <MenuItem id="sizes-xxs-sun" icon={Sun} onClick={NOOP} type="svg" title="The sun" />
+          <MenuItem id="sizes-xxs-moon" icon={Moon} onClick={NOOP} type="svg" title="The moon" />
+          <MenuItem id="sizes-xxs-stars" icon={Favorite} onClick={NOOP} type="svg" title="And the stars" />
         </Menu>
       </MenuButton>
-      <MenuButton id="sizes-xs" ariaLabel="Extra small menu button" size="xs">
-        <Menu id="sizes-xs-menu" size="medium" focusItemIndexOnMount={0}>
-          <MenuItem id="sizes-xs-sun" icon={Sun} onClick={NOOP} iconType="svg" title="The sun" />
-          <MenuItem id="sizes-xs-moon" icon={Moon} onClick={NOOP} iconType="svg" title="The moon" />
-          <MenuItem id="sizes-xs-stars" icon={Favorite} onClick={NOOP} iconType="svg" title="And the stars" />
+      <MenuButton id="sizes-xs" aria-label="Extra small menu button" size="xs">
+        <Menu id="sizes-xs-menu" size="medium">
+          <MenuItem id="sizes-xs-sun" icon={Sun} onClick={NOOP} type="svg" title="The sun" />
+          <MenuItem id="sizes-xs-moon" icon={Moon} onClick={NOOP} type="svg" title="The moon" />
+          <MenuItem id="sizes-xs-stars" icon={Favorite} onClick={NOOP} type="svg" title="And the stars" />
         </Menu>
       </MenuButton>
-      <MenuButton id="sizes-small" ariaLabel="Small menu button" size="small">
-        <Menu id="sizes-small-menu" size="medium" focusItemIndexOnMount={0}>
-          <MenuItem id="sizes-small-sun" icon={Sun} onClick={NOOP} iconType="svg" title="The sun" />
-          <MenuItem id="sizes-small-moon" icon={Moon} onClick={NOOP} iconType="svg" title="The moon" />
-          <MenuItem id="sizes-small-stars" icon={Favorite} onClick={NOOP} iconType="svg" title="And the stars" />
+      <MenuButton id="sizes-small" aria-label="Small menu button" size="small">
+        <Menu id="sizes-small-menu" size="medium">
+          <MenuItem id="sizes-small-sun" icon={Sun} onClick={NOOP} type="svg" title="The sun" />
+          <MenuItem id="sizes-small-moon" icon={Moon} onClick={NOOP} type="svg" title="The moon" />
+          <MenuItem id="sizes-small-stars" icon={Favorite} onClick={NOOP} type="svg" title="And the stars" />
         </Menu>
       </MenuButton>
-      <MenuButton id="sizes-medium" ariaLabel="Medium menu button" size="medium">
-        <Menu id="sizes-medium-menu" size="medium" focusItemIndexOnMount={0}>
-          <MenuItem id="sizes-medium-sun" icon={Sun} onClick={NOOP} iconType="svg" title="The sun" />
-          <MenuItem id="sizes-medium-moon" icon={Moon} onClick={NOOP} iconType="svg" title="The moon" />
-          <MenuItem id="sizes-medium-stars" icon={Favorite} onClick={NOOP} iconType="svg" title="And the stars" />
+      <MenuButton id="sizes-medium" aria-label="Medium menu button" size="medium">
+        <Menu id="sizes-medium-menu" size="medium">
+          <MenuItem id="sizes-medium-sun" icon={Sun} onClick={NOOP} type="svg" title="The sun" />
+          <MenuItem id="sizes-medium-moon" icon={Moon} onClick={NOOP} type="svg" title="The moon" />
+          <MenuItem id="sizes-medium-stars" icon={Favorite} onClick={NOOP} type="svg" title="And the stars" />
         </Menu>
       </MenuButton>
-      <MenuButton id="sizes-large" ariaLabel="Large menu button" size="large">
-        <Menu id="sizes-large-menu" size="medium" focusItemIndexOnMount={0}>
-          <MenuItem id="sizes-large-sun" icon={Sun} onClick={NOOP} iconType="svg" title="The sun" />
-          <MenuItem id="sizes-large-moon" icon={Moon} onClick={NOOP} iconType="svg" title="The moon" />
-          <MenuItem id="sizes-large-stars" icon={Favorite} onClick={NOOP} iconType="svg" title="And the stars" />
+      <MenuButton id="sizes-large" aria-label="Large menu button" size="large">
+        <Menu id="sizes-large-menu" size="medium">
+          <MenuItem id="sizes-large-sun" icon={Sun} onClick={NOOP} type="svg" title="The sun" />
+          <MenuItem id="sizes-large-moon" icon={Moon} onClick={NOOP} type="svg" title="The moon" />
+          <MenuItem id="sizes-large-stars" icon={Favorite} onClick={NOOP} type="svg" title="And the stars" />
         </Menu>
       </MenuButton>
     </>
@@ -91,11 +91,11 @@ export const Sizes: Story = {
 
 export const DifferentIcon: Story = {
   render: () => (
-    <MenuButton id="different-icon" ariaLabel="Menu button with different icon" component={MoveArrowDown}>
-      <Menu id="different-icon-menu" size="medium" focusItemIndexOnMount={0}>
-        <MenuItem id="different-icon-sun" icon={Sun} onClick={NOOP} iconType="svg" title="The sun" />
-        <MenuItem id="different-icon-moon" icon={Moon} onClick={NOOP} iconType="svg" title="The moon" />
-        <MenuItem id="different-icon-stars" icon={Favorite} onClick={NOOP} iconType="svg" title="And the stars" />
+    <MenuButton id="different-icon" aria-label="Menu button with different icon" component={MoveArrowDown}>
+      <Menu id="different-icon-menu" size="medium">
+        <MenuItem id="different-icon-sun" icon={Sun} onClick={NOOP} type="svg" title="The sun" />
+        <MenuItem id="different-icon-moon" icon={Moon} onClick={NOOP} type="svg" title="The moon" />
+        <MenuItem id="different-icon-stars" icon={Favorite} onClick={NOOP} type="svg" title="And the stars" />
       </Menu>
     </MenuButton>
   ),
@@ -116,10 +116,10 @@ export const WithText: Story = {
       }}
     >
       <MenuButton text="Open">
-        <Menu id="menu" size="medium" focusItemIndexOnMount={0}>
-          <MenuItem icon={Sun} onClick={NOOP} iconType="svg" title="The sun" />
-          <MenuItem icon={Moon} onClick={NOOP} iconType="svg" title="The moon" />
-          <MenuItem icon={Favorite} onClick={NOOP} iconType="svg" title="And the stars" />
+        <Menu id="menu" size="medium">
+          <MenuItem icon={Sun} onClick={NOOP} type="svg" title="The sun" />
+          <MenuItem icon={Moon} onClick={NOOP} type="svg" title="The moon" />
+          <MenuItem icon={Favorite} onClick={NOOP} type="svg" title="And the stars" />
         </Menu>
       </MenuButton>
     </div>
@@ -141,10 +141,10 @@ export const WithTextAndIconAtTheEnd: Story = {
       }}
     >
       <MenuButton text="Open" component={DropdownChevronDown} componentPosition="end">
-        <Menu id="menu" size="medium" focusItemIndexOnMount={0}>
-          <MenuItem icon={Sun} onClick={NOOP} iconType="svg" title="The sun" />
-          <MenuItem icon={Moon} onClick={NOOP} iconType="svg" title="The moon" />
-          <MenuItem icon={Favorite} onClick={NOOP} iconType="svg" title="And the stars" />
+        <Menu id="menu" size="medium">
+          <MenuItem icon={Sun} onClick={NOOP} type="svg" title="The sun" />
+          <MenuItem icon={Moon} onClick={NOOP} type="svg" title="The moon" />
+          <MenuItem icon={Favorite} onClick={NOOP} type="svg" title="And the stars" />
         </Menu>
       </MenuButton>
     </div>
@@ -162,10 +162,10 @@ export const WithTextAndIconAtTheEnd: Story = {
 export const Disabled: Story = {
   render: () => (
     <MenuButton disabled tooltipContent="This action is not available now">
-      <Menu id="menu" size="medium" focusItemIndexOnMount={0}>
-        <MenuItem icon={Sun} onClick={NOOP} iconType="svg" title="The sun" />
-        <MenuItem icon={Moon} onClick={NOOP} iconType="svg" title="The moon" />
-        <MenuItem icon={Favorite} onClick={NOOP} iconType="svg" title="And the stars" />
+      <Menu id="menu" size="medium">
+        <MenuItem icon={Sun} onClick={NOOP} type="svg" title="The sun" />
+        <MenuItem icon={Moon} onClick={NOOP} type="svg" title="The moon" />
+        <MenuItem icon={Favorite} onClick={NOOP} type="svg" title="And the stars" />
       </Menu>
     </MenuButton>
   ),
@@ -190,10 +190,10 @@ export const CustomTriggerElement: Story = {
           </Button>
         )}
       >
-        <Menu id="menu" size="medium" focusItemIndexOnMount={0}>
-          <MenuItem icon={Sun} onClick={NOOP} iconType="svg" title="The sun" />
-          <MenuItem icon={Moon} onClick={NOOP} iconType="svg" title="The moon" />
-          <MenuItem icon={Favorite} onClick={NOOP} iconType="svg" title="And the stars" />
+        <Menu id="menu" size="medium">
+          <MenuItem icon={Sun} onClick={NOOP} type="svg" title="The sun" />
+          <MenuItem icon={Moon} onClick={NOOP} type="svg" title="The moon" />
+          <MenuItem icon={Favorite} onClick={NOOP} type="svg" title="And the stars" />
         </Menu>
       </MenuButton>
     );
diff --git a/packages/docs/src/pages/components/Modal/Modal.mdx b/packages/docs/src/pages/components/Modal/Modal.mdx
index bc5c2d8bf4..499e0a6a1f 100644
--- a/packages/docs/src/pages/components/Modal/Modal.mdx
+++ b/packages/docs/src/pages/components/Modal/Modal.mdx
@@ -12,7 +12,7 @@ import ctaDont from "./assets/cta-dont.png";
 import styles from "./Modal.stories.module.scss";
 import { StorybookLink } from "vibe-storybook-components";
 
-<Meta title="Components/Modal [New]" />
+<Meta title="Components/Modal" />
 
 # Modal
 
@@ -24,9 +24,7 @@ import { StorybookLink } from "vibe-storybook-components";
 
 ### Import
 
-All the Modal-related components can be imported from `@vibe/core/next`.
-
-Notice not to import components directly from the `@vibe/core` package, as they are deprecated.
+All the Modal-related components can be imported from `@vibe/core`.
 
 ```ts
 import {
@@ -39,25 +37,25 @@ import {
   ModalBasicLayout,
   ModalSideBySideLayout,
   ModalMediaLayout
-} from "@vibe/core/next";
+} from "@vibe/core";
 ```
 
 ### Basic modal
 
-The <StorybookLink page="Components/Modal [New]/Basic modal">Basic Modal</StorybookLink> is intended for straightforward tasks, like selecting items or gathering basic information. Basic Modals help users focus on a single task without distractions. These modals do not support images or videos.
+The <StorybookLink page="Components/Modal/Basic modal">Basic Modal</StorybookLink> is intended for straightforward tasks, like selecting items or gathering basic information. Basic Modals help users focus on a single task without distractions. These modals do not support images or videos.
 
 <Canvas of={BasicModalPreview} sourceState="none" />
 
 ### Side by side modal
 
-The <StorybookLink page="Components/Modal [New]/Side by side modal">Side-by-Side Modal</StorybookLink> offers two distinct sections: the left for text or inputs, and the right for supporting visuals.
+The <StorybookLink page="Components/Modal/Side by side modal">Side-by-Side Modal</StorybookLink> offers two distinct sections: the left for text or inputs, and the right for supporting visuals.
 It's ideal when users need to reference media alongside information.
 
 <Canvas of={SideBySideModalPreview} sourceState="none" />
 
 ### Media modal
 
-The <StorybookLink page="Components/Modal [New]/Media modal">Media Modal</StorybookLink> includes a highlighted media section followed by text, perfect for grabbing attention with visuals before users interact with the content. Ideal for introducing new features or onboarding.
+The <StorybookLink page="Components/Modal/Media modal">Media Modal</StorybookLink> includes a highlighted media section followed by text, perfect for grabbing attention with visuals before users interact with the content. Ideal for introducing new features or onboarding.
 
 <Canvas of={MediaModalPreview} sourceState="none" />
 
diff --git a/packages/docs/src/pages/components/Modal/Modal.stories.helpers.tsx b/packages/docs/src/pages/components/Modal/Modal.stories.helpers.tsx
index 1ab5c738f9..5f98003d9b 100644
--- a/packages/docs/src/pages/components/Modal/Modal.stories.helpers.tsx
+++ b/packages/docs/src/pages/components/Modal/Modal.stories.helpers.tsx
@@ -44,7 +44,7 @@ export const OpenedModalPreview = forwardRef(
             icon={Fullscreen}
             color="primary"
             onClick={onFullPreviewClick}
-            ariaLabel="Open modal in full preview mode"
+            aria-label="Open modal in full preview mode"
           />
         )}
       </div>
@@ -118,7 +118,7 @@ export const ModalTip = () => (
     <Tip>
       Since the modal is used for short and non-frequent tasks, consider using the main flow for common tasks. For
       creating a popover positioned next to other components, like customized menus, check out our{" "}
-      <StorybookLink page="Popover/Dialog" size={StorybookLink.sizes.SMALL}>
+      <StorybookLink page="Popover/Dialog" size="small">
         Dialog
       </StorybookLink>{" "}
       component.
diff --git a/packages/docs/src/pages/components/Modal/ModalBasicLayout.mdx b/packages/docs/src/pages/components/Modal/ModalBasicLayout.mdx
index e34ddb5382..a8b565c69f 100644
--- a/packages/docs/src/pages/components/Modal/ModalBasicLayout.mdx
+++ b/packages/docs/src/pages/components/Modal/ModalBasicLayout.mdx
@@ -15,12 +15,10 @@ The Basic Modal is intended for straightforward tasks, like selecting items or g
 
 ### Import
 
-All the Basic Modal layout components can be imported from `@vibe/core/next`.
-
-Notice not to import components directly from the `@vibe/core` package, as they are deprecated.
+All the Basic Modal layout components can be imported from `@vibe/core`.
 
 ```ts
-import { Modal, ModalHeader, ModalContent, ModalFooter, ModalFooterWizard, ModalBasicLayout } from "@vibe/core/next";
+import { Modal, ModalHeader, ModalContent, ModalFooter, ModalFooterWizard, ModalBasicLayout } from "@vibe/core";
 ```
 
 ## Props
diff --git a/packages/docs/src/pages/components/Modal/ModalBasicLayout.stories.helpers.tsx b/packages/docs/src/pages/components/Modal/ModalBasicLayout.stories.helpers.tsx
index aec3ffc3f6..02bc1c382c 100644
--- a/packages/docs/src/pages/components/Modal/ModalBasicLayout.stories.helpers.tsx
+++ b/packages/docs/src/pages/components/Modal/ModalBasicLayout.stories.helpers.tsx
@@ -5,11 +5,11 @@ export const BasicModalTip = () => (
   <div style={{ marginTop: 40 }}>
     <Tip>
       If your content is not scrollable and you need to add media as supporting element, consider using{" "}
-      <StorybookLink page="Components/Modal [New]/Side by side modal" size={StorybookLink.sizes.SMALL}>
+      <StorybookLink page="Components/Modal/Side by side modal" size="small">
         Side-by-side modal
       </StorybookLink>{" "}
       or{" "}
-      <StorybookLink page="Components/Modal [New]/Media modal" size={StorybookLink.sizes.SMALL}>
+      <StorybookLink page="Components/Modal/Media modal" size="small">
         Media modal
       </StorybookLink>{" "}
       depends on your use case.
diff --git a/packages/docs/src/pages/components/Modal/ModalBasicLayout.stories.tsx b/packages/docs/src/pages/components/Modal/ModalBasicLayout.stories.tsx
index 74c6180d8e..bc1ecdd33d 100644
--- a/packages/docs/src/pages/components/Modal/ModalBasicLayout.stories.tsx
+++ b/packages/docs/src/pages/components/Modal/ModalBasicLayout.stories.tsx
@@ -1,7 +1,7 @@
 import React, { useRef, useState } from "react";
 import { type Meta, type StoryObj } from "@storybook/react";
 import { TransitionView, useWizard, Checkbox, IconButton, Button, Text, Link, Flex } from "@vibe/core";
-import { Modal, ModalBasicLayout, ModalHeader, ModalContent, ModalFooter, ModalFooterWizard } from "@vibe/core/next";
+import { Modal, ModalBasicLayout, ModalHeader, ModalContent, ModalFooter, ModalFooterWizard } from "@vibe/core";
 import { Menu } from "@vibe/icons";
 import { createStoryMetaSettingsDecorator } from "../../../utils/createStoryMetaSettingsDecorator";
 import { withOpenedModalPreview } from "./Modal.stories.helpers";
@@ -13,7 +13,7 @@ const metaSettings = createStoryMetaSettingsDecorator({
 });
 
 export default {
-  title: "Components/Modal [New]/Basic modal",
+  title: "Components/Modal/Basic modal",
   component: Modal,
   subcomponents: { ModalBasicLayout, ModalHeader, ModalContent, ModalFooter, ModalFooterWizard, TransitionView },
   argTypes: metaSettings.argTypes,
@@ -327,7 +327,7 @@ export const HeaderWithIconButton: Story = {
       <Modal
         id="modal-basic"
         show={show}
-        renderHeaderAction={<IconButton icon={Menu} size="small" kind="tertiary" ariaLabel="Open Menu" />}
+        renderHeaderAction={<IconButton icon={Menu} size="small" kind="tertiary" aria-label="Open Menu" />}
         size="medium"
         onClose={() => setShow(false)}
         container={container}
diff --git a/packages/docs/src/pages/components/Modal/ModalMediaLayout.mdx b/packages/docs/src/pages/components/Modal/ModalMediaLayout.mdx
index f81b22c2e2..8da056f0f6 100644
--- a/packages/docs/src/pages/components/Modal/ModalMediaLayout.mdx
+++ b/packages/docs/src/pages/components/Modal/ModalMediaLayout.mdx
@@ -15,9 +15,7 @@ The Media Modal includes a highlighted media section, followed by a textual cont
 
 ### Import
 
-All the Media Modal layout components can be imported from `@vibe/core/next`.
-
-Notice not to import components directly from the `@vibe/core` package, as they are deprecated.
+All the Media Modal layout components can be imported from `@vibe/core`.
 
 ```ts
 import {
@@ -28,7 +26,7 @@ import {
   ModalFooter,
   ModalFooterWizard,
   ModalMediaLayout
-} from "@vibe/core/next";
+} from "@vibe/core";
 ```
 
 ## Props
diff --git a/packages/docs/src/pages/components/Modal/ModalMediaLayout.stories.helpers.tsx b/packages/docs/src/pages/components/Modal/ModalMediaLayout.stories.helpers.tsx
index bc860367fc..8566861de2 100644
--- a/packages/docs/src/pages/components/Modal/ModalMediaLayout.stories.helpers.tsx
+++ b/packages/docs/src/pages/components/Modal/ModalMediaLayout.stories.helpers.tsx
@@ -5,7 +5,7 @@ export const MediaModalTip = () => (
   <div style={{ marginTop: 40 }}>
     <Tip>
       If your content is scrollable or wide (you need more space), consider using{" "}
-      <StorybookLink page="Components/Modal [New]/Basic modal" size={StorybookLink.sizes.SMALL}>
+      <StorybookLink page="Components/Modal/Basic modal" size="small">
         Basic modal
       </StorybookLink>
       .
diff --git a/packages/docs/src/pages/components/Modal/ModalMediaLayout.stories.tsx b/packages/docs/src/pages/components/Modal/ModalMediaLayout.stories.tsx
index 83306ebff8..d60d4d0e98 100644
--- a/packages/docs/src/pages/components/Modal/ModalMediaLayout.stories.tsx
+++ b/packages/docs/src/pages/components/Modal/ModalMediaLayout.stories.tsx
@@ -8,7 +8,7 @@ import {
   ModalContent,
   ModalFooter,
   ModalFooterWizard
-} from "@vibe/core/next";
+} from "@vibe/core";
 import { useWizard, Button, Text, Link, Flex, IconButton, TransitionView } from "@vibe/core";
 import { Menu } from "@vibe/icons";
 import { createStoryMetaSettingsDecorator } from "../../../utils/createStoryMetaSettingsDecorator";
@@ -22,7 +22,7 @@ const metaSettings = createStoryMetaSettingsDecorator({
 });
 
 export default {
-  title: "Components/Modal [New]/Media modal",
+  title: "Components/Modal/Media modal",
   component: Modal,
   subcomponents: {
     ModalMediaLayout,
@@ -176,7 +176,7 @@ export const HeaderWithIconButton: Story = {
       <Modal
         id="modal-media"
         show={show}
-        renderHeaderAction={<IconButton icon={Menu} size="small" kind="tertiary" ariaLabel="Open Menu" />}
+        renderHeaderAction={<IconButton icon={Menu} size="small" kind="tertiary" aria-label="Open Menu" />}
         size="medium"
         onClose={() => setShow(false)}
         container={container}
diff --git a/packages/docs/src/pages/components/Modal/ModalSideBySideLayout.mdx b/packages/docs/src/pages/components/Modal/ModalSideBySideLayout.mdx
index 92b64b7623..874c44696e 100644
--- a/packages/docs/src/pages/components/Modal/ModalSideBySideLayout.mdx
+++ b/packages/docs/src/pages/components/Modal/ModalSideBySideLayout.mdx
@@ -19,9 +19,7 @@ The Side-by-side Modal offers a layout with two distinct sections. The left side
 
 ### Import
 
-All the Side-by-side Modal layout components can be imported from `@vibe/core/next`.
-
-Notice not to import components directly from the `@vibe/core` package, as they are deprecated.
+All the Side-by-side Modal layout components can be imported from `@vibe/core`.
 
 ```ts
 import {
@@ -32,7 +30,7 @@ import {
   ModalFooter,
   ModalFooterWizard,
   ModalSideBySideLayout
-} from "@vibe/core/next";
+} from "@vibe/core";
 ```
 
 ## Props
@@ -122,7 +120,7 @@ Each modal includes an animation type based on its entrance point, with wizard m
         description: (
           <>
             Don't turn this modal into a two-column grid. If you don't need an image, consider using the{" "}
-            <StorybookLink page="Components/Modal [New]/Basic modal">basic modal</StorybookLink>.
+            <StorybookLink page="Components/Modal/Basic modal">basic modal</StorybookLink>.
           </>
         )
       }
diff --git a/packages/docs/src/pages/components/Modal/ModalSideBySideLayout.stories.helpers.tsx b/packages/docs/src/pages/components/Modal/ModalSideBySideLayout.stories.helpers.tsx
index 7a49e71a83..a1d074b59a 100644
--- a/packages/docs/src/pages/components/Modal/ModalSideBySideLayout.stories.helpers.tsx
+++ b/packages/docs/src/pages/components/Modal/ModalSideBySideLayout.stories.helpers.tsx
@@ -5,7 +5,7 @@ export const SideBySideModalTip = () => (
   <div style={{ marginTop: 40 }}>
     <Tip>
       If your content is scrollable, consider using{" "}
-      <StorybookLink page="Components/Modal [New]/Basic modal" size={StorybookLink.sizes.SMALL}>
+      <StorybookLink page="Components/Modal/Basic modal" size="small">
         Basic modal
       </StorybookLink>
       .
diff --git a/packages/docs/src/pages/components/Modal/ModalSideBySideLayout.stories.tsx b/packages/docs/src/pages/components/Modal/ModalSideBySideLayout.stories.tsx
index f8200c562d..fdeeecc876 100644
--- a/packages/docs/src/pages/components/Modal/ModalSideBySideLayout.stories.tsx
+++ b/packages/docs/src/pages/components/Modal/ModalSideBySideLayout.stories.tsx
@@ -8,7 +8,7 @@ import {
   ModalContent,
   ModalFooter,
   ModalFooterWizard
-} from "@vibe/core/next";
+} from "@vibe/core";
 import {
   TransitionView,
   useWizard,
@@ -33,7 +33,7 @@ const metaSettings = createStoryMetaSettingsDecorator({
 });
 
 export default {
-  title: "Components/Modal [New]/Side by side modal",
+  title: "Components/Modal/Side by side modal",
   component: Modal,
   subcomponents: {
     ModalSideBySideLayout,
@@ -236,7 +236,7 @@ export const HeaderWithIconButton: Story = {
       <Modal
         id="modal-sbs"
         show={show}
-        renderHeaderAction={<IconButton icon={Menu} size="small" kind="tertiary" ariaLabel="Open Menu" />}
+        renderHeaderAction={<IconButton icon={Menu} size="small" kind="tertiary" aria-label="Open Menu" />}
         size="large"
         onClose={() => setShow(false)}
         container={container}
diff --git a/packages/docs/src/pages/components/Modal/legacy/LegacyModal.mdx b/packages/docs/src/pages/components/Modal/legacy/LegacyModal.mdx
deleted file mode 100644
index ce3b94aa09..0000000000
--- a/packages/docs/src/pages/components/Modal/legacy/LegacyModal.mdx
+++ /dev/null
@@ -1,98 +0,0 @@
-import { ComponentRules, DeprecatedWarning, UsageGuidelines } from "vibe-storybook-components";
-import { Canvas, Meta } from "@storybook/blocks";
-import {
-  DialogAsModalBadExample,
-  ModalExampleWrapper,
-  TipAlertDialog,
-  TipDevDropdownInsideModal,
-  TipDialog
-} from "./LegacyModal.stories.helpers";
-import * as ModalStories from "./LegacyModal.stories";
-
-<Meta of={ModalStories} />
-
-# Modal - Deprecated
-
-<DeprecatedWarning alternativeName="Modal" alternativeLink="/?path=/docs/components-modal-new" />
-
-Modal allows the user to focus on one task or a piece of information, by popping-up and blocking the page content until the modal task is completed, or until the user dismisses the action.
-Use modal for short and non-frequent tasks. For common tasks consider using the main flow.
-
-<Canvas of={ModalStories.Overview} />
-
-### Import
-
-```js
-import { Modal, ModalHeader, ModalContent, ModalFooter, ModalFooterButtons } from "@vibe/core";
-```
-
-## Props
-
-<PropsTable />
-
-## Usage
-
-<UsageGuidelines
-  guidelines={[
-    "Modals appear centered on the page, with a visible backdrop dimming the rest of the page for focus.",
-    "Modals height is dynamic according to its content.",
-    "All modals must have a title and a close button",
-    "By default, Modal will be closed by: clicking outside, the ESC key and the closing buttons."
-  ]}
-/>
-
-<TipAlertDialog />
-<br />
-<TipDialog />
-
-## Variants
-
-### Sizes
-
-<Canvas of={ModalStories.Sizes} />
-
-### Modal header with an icon
-
-Use the ModalHeader component to display a Header with an icon
-
-<Canvas of={ModalStories.ModalWithIcon} />
-
-### Alert Modal
-
-Use the <code>alertDialog</code> boolean prop in order to allow closing the modal only by the close buttons and not by ESC or by
-clicking outside. Use this variant in case of sensitive or important messages, and in modals that requires data from the user, such as forms.
-
-<Canvas of={ModalStories.AlertModal} />
-
-## Do’s and Don’ts
-
-<ComponentRules
-  rules={[
-    {
-      positive: {
-        component: (
-          <ModalExampleWrapper bestPractice modalTitle="Modal title" buttonTitle="Click here">
-            Modal content
-          </ModalExampleWrapper>
-        ),
-        description: "Modal must include backdrop element."
-      },
-      negative: {
-        component: <DialogAsModalBadExample />,
-        description: "Don't remove the backdrop element of the modal or the modal's title."
-      }
-    }
-  ]}
-/>
-
-<TipDevDropdownInsideModal />
-
-## Use cases and examples
-
-### Modal with editable title
-
-<Canvas of={ModalStories.ModalWithEditableTitle} />
-
-## Related components
-
-<RelatedComponents componentsNames={["Tooltip", "Dialog", "Tipseen"]} />
diff --git a/packages/docs/src/pages/components/Modal/legacy/LegacyModal.stories.helpers.tsx b/packages/docs/src/pages/components/Modal/legacy/LegacyModal.stories.helpers.tsx
deleted file mode 100644
index 64436bf8fa..0000000000
--- a/packages/docs/src/pages/components/Modal/legacy/LegacyModal.stories.helpers.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import React, { useCallback, useRef, useState } from "react";
-import { Button, Dialog, DialogContentContainer, Heading, Flex, Modal, ModalFooterButtons } from "@vibe/core";
-import styles from "./LegacyModal.stories.module.scss";
-import cx from "classnames";
-import { StorybookLink, Tip } from "vibe-storybook-components";
-
-// internal custom hook to help with writing tests and stories.
-export const useHelperOpenModalButton = ({
-  title = "Open modal",
-  setShow,
-  openModalButtonRef,
-  color = undefined,
-  testId = undefined
-}: any) => {
-  return (
-    <Button onClick={() => setShow(true)} ref={openModalButtonRef} color={color} data-testid={testId}>
-      {title}
-    </Button>
-  );
-};
-
-// Internal component for create all boilerplate needed for implementing modal example to the "Do and don't" section
-export const ModalExampleWrapper = ({
-  bestPractice,
-  modalTitle,
-  buttonTitle,
-  children,
-  hideFooter,
-  show: defaultShow = false,
-  openModalTestId,
-  ...otherModalProps
-}: any) => {
-  // Control if modal is display or hidden
-  const [show, setShow] = useState(defaultShow);
-  const openModalButtonRef = useRef(null);
-  const closeModal = useCallback(() => {
-    setShow(false);
-  }, []);
-  const openModalColor = bestPractice ? "positive" : "negative";
-  const openModalButton = useHelperOpenModalButton({
-    testId: openModalTestId,
-    title: buttonTitle || modalTitle,
-    setShow,
-    openModalButtonRef,
-    color: openModalColor
-  });
-  const footer = hideFooter ? null : (
-    <ModalFooterButtons
-      primaryButtonText="Confirm"
-      secondaryButtonText="Cancel"
-      onPrimaryButtonClick={closeModal}
-      onSecondaryButtonClick={closeModal}
-    />
-  );
-
-  return (
-    <>
-      {openModalButton}
-      <Modal
-        id={"story-book-modal"}
-        title={modalTitle}
-        triggerElement={openModalButtonRef.current}
-        // is modal show or hidden
-        show={show}
-        // set show state to close
-        onClose={closeModal}
-        closeButtonAriaLabel={"close"}
-        {...otherModalProps}
-        contentSpacing
-      >
-        {children}
-        {footer}
-      </Modal>
-    </>
-  );
-};
-
-export const DialogAsModalBadExample = () => {
-  const [show, setShow] = useState(false);
-  const closeDialog = useCallback(() => {
-    setShow(false);
-  }, []);
-  const onShow = useCallback(() => {
-    setShow(true);
-  }, []);
-  const dialogContent = (
-    <DialogContentContainer style={{ width: "500px", margin: "auto" }}>
-      <Flex
-        className={cx(styles.modalDialogBadExample, styles.content)}
-        direction="column"
-        justify="start"
-        align="start"
-      >
-        <Heading className={cx(styles.modalDialogBadExample, styles.heading)} type="h2">
-          Dialog title
-        </Heading>
-        Dialog content
-        <ModalFooterButtons
-          primaryButtonText="Confirm"
-          secondaryButtonText="Cancel"
-          className={cx(styles.modalDialogBadExample, styles.footer)}
-          onPrimaryButtonClick={closeDialog}
-          onSecondaryButtonClick={closeDialog}
-        />
-      </Flex>
-    </DialogContentContainer>
-  );
-  return (
-    <Dialog
-      open={show}
-      onClickOutside={closeDialog}
-      wrapperClassName={cx(styles.modalDialogBadExample, styles.wrapper)}
-      content={dialogContent}
-    >
-      <Button onClick={onShow} color="negative">
-        Click here
-      </Button>
-    </Dialog>
-  );
-};
-
-export const TipAlertDialog = () => (
-  <Tip>
-    Set <code>alertDialog</code> to <code>true</code> in order to allow closing the modal only by the close buttons and
-    not by ESC or by clicking outside.
-  </Tip>
-);
-
-export const TipDialog = () => (
-  <Tip>
-    For creating a popover positioned next to other components, like customized menus, check out our{" "}
-    <StorybookLink page="Components/Dialog/Dialog" size={StorybookLink.sizes.SMALL}>
-      Dialog
-    </StorybookLink>{" "}
-    component.
-  </Tip>
-);
-
-export const TipDevDropdownInsideModal = () => (
-  <Tip title="Dev tip">
-    {`If you wish to implement a dropdown inside a Modal container and need help displaying the dropdown's popovers
-    correctly, read more about our dropdown in popovers technical pattern `}
-    <StorybookLink
-      page="Technical patterns/Dropdowns inside pop overs"
-      story="Modal with damaged dropdown"
-      size={StorybookLink.sizes.SMALL}
-    >
-      here.
-    </StorybookLink>
-  </Tip>
-);
diff --git a/packages/docs/src/pages/components/Modal/legacy/LegacyModal.stories.module.scss b/packages/docs/src/pages/components/Modal/legacy/LegacyModal.stories.module.scss
deleted file mode 100644
index 4a3d241f40..0000000000
--- a/packages/docs/src/pages/components/Modal/legacy/LegacyModal.stories.module.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-.modalDialogBadExample {
-  &.wrapper {
-    position: sticky !important;
-    transform: none !important;
-    bottom: 50% !important;
-  }
-
-  &.content {
-    margin-bottom: var(--sb-spacing-large);
-    margin-inline: var(--sb-spacing-large);
-  }
-
-  &.heading {
-    padding: 0;
-  }
-
-  &.footer {
-    width: 100%;
-  }
-}
diff --git a/packages/docs/src/pages/components/Modal/legacy/LegacyModal.stories.tsx b/packages/docs/src/pages/components/Modal/legacy/LegacyModal.stories.tsx
deleted file mode 100644
index 59fce1657d..0000000000
--- a/packages/docs/src/pages/components/Modal/legacy/LegacyModal.stories.tsx
+++ /dev/null
@@ -1,316 +0,0 @@
-import React, { useCallback, useRef, useState } from "react";
-import { createStoryMetaSettingsDecorator } from "../../../../utils/createStoryMetaSettingsDecorator";
-import {
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  Modal,
-  type LegacyModalProps as ModalProps,
-  EditableHeading,
-  ModalFooterButtons
-} from "@vibe/core";
-import { useHelperOpenModalButton } from "./LegacyModal.stories.helpers";
-import { Upgrade } from "@vibe/icons";
-const metaSettings = createStoryMetaSettingsDecorator({
-  component: Modal,
-  actionPropsArray: ["onClose"]
-});
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const modalTemplate = ({ onClose, ...modalProps }: ModalProps) => {
-  // For some reason storybook replace onClose with mock function as part of the template props so in purpose not pass it forward
-  // Control if modal is display or hidden
-  const [show, setShow] = useState(false);
-  const openModalButtonRef = useRef(null);
-  const closeModal = useCallback(() => setShow(false), []);
-  // Internal helper method for creating basic button which change the show state to true in order to display the modal
-  // This method is not part of our external API and not required for creating functional modal component
-  const openModalButton = useHelperOpenModalButton({ title: modalProps.title, setShow, openModalButtonRef });
-  return (
-    <div>
-      {openModalButton}
-      <Modal
-        id={"story-book-modal"}
-        title={"Modal title"}
-        description="Subtitle description text goes here"
-        contentSpacing
-        triggerElement={openModalButtonRef.current}
-        // is modal show or hidden
-        show={show}
-        // set show state to close
-        onClose={closeModal}
-        {...modalProps}
-      >
-        <ModalContent>
-          <p>Modal content goes here</p>
-        </ModalContent>
-        <ModalFooterButtons
-          primaryButtonText="Confirm"
-          secondaryButtonText="Cancel"
-          onPrimaryButtonClick={closeModal}
-          onSecondaryButtonClick={closeModal}
-        />
-      </Modal>
-    </div>
-  );
-};
-
-export default {
-  title: "Components/Modal [Deprecated]",
-  component: Modal,
-  subcomponents: {
-    ModalHeader,
-    ModalContent,
-    ModalFooter
-  },
-  argTypes: metaSettings.argTypes,
-  decorators: metaSettings.decorators
-};
-
-export const Overview = {
-  render: modalTemplate.bind({}),
-  name: "Overview"
-};
-
-export const Sizes = {
-  render: () => {
-    const [showNormal, setShowNormal] = useState(false);
-    const [showFull, setShowFull] = useState(false);
-    const [showCustom, setShowCustom] = useState(false);
-
-    const openModalButtonRefNormal = useRef(null);
-    const openModalButtonRefFull = useRef(null);
-    const openModalButtonRefCustom = useRef(null);
-
-    const closeModalNormal = useCallback(() => setShowNormal(false), []);
-    const closeModalFull = useCallback(() => setShowFull(false), []);
-    const closeModalCustom = useCallback(() => setShowCustom(false), []);
-
-    const openModalButtonNormal = useHelperOpenModalButton({
-      title: "Default",
-      setShow: setShowNormal,
-      openModalButtonRef: openModalButtonRefNormal
-    });
-
-    const openModalButtonFull = useHelperOpenModalButton({
-      title: "Full size",
-      setShow: setShowFull,
-      openModalButtonRef: openModalButtonRefFull
-    });
-
-    const openModalButtonCustom = useHelperOpenModalButton({
-      title: "Custom size (720px)",
-      setShow: setShowCustom,
-      openModalButtonRef: openModalButtonRefCustom
-    });
-
-    return (
-      <>
-        {/* Default Width Modal */}
-        {openModalButtonNormal}
-        <Modal
-          id="storybook-modal-normal"
-          title="Modal title"
-          triggerElement={openModalButtonRefNormal.current}
-          show={showNormal}
-          onClose={closeModalNormal}
-          contentSpacing
-        >
-          <ModalContent>Modal content goes here</ModalContent>
-          <ModalFooterButtons
-            primaryButtonText="Confirm"
-            secondaryButtonText="Cancel"
-            onPrimaryButtonClick={closeModalNormal}
-            onSecondaryButtonClick={closeModalNormal}
-          />
-        </Modal>
-
-        {/* Full Width Modal */}
-        {openModalButtonFull}
-        <Modal
-          id="storybook-modal-full"
-          title="Modal title"
-          triggerElement={openModalButtonRefFull.current}
-          show={showFull}
-          onClose={closeModalFull}
-          width="full-width"
-          contentSpacing
-        >
-          <ModalContent>Modal content goes here</ModalContent>
-          <ModalFooterButtons
-            primaryButtonText="Confirm"
-            secondaryButtonText="Cancel"
-            onPrimaryButtonClick={closeModalFull}
-            onSecondaryButtonClick={closeModalFull}
-          />
-        </Modal>
-
-        {/* Custom Width Modal */}
-        {openModalButtonCustom}
-        <Modal
-          id="storybook-modal-custom"
-          title="Modal title"
-          triggerElement={openModalButtonRefCustom.current}
-          show={showCustom}
-          onClose={closeModalCustom}
-          width="720px"
-          contentSpacing
-        >
-          <ModalContent>Modal content goes here</ModalContent>
-          <ModalFooterButtons
-            primaryButtonText="Confirm"
-            secondaryButtonText="Cancel"
-            onPrimaryButtonClick={closeModalCustom}
-            onSecondaryButtonClick={closeModalCustom}
-          />
-        </Modal>
-      </>
-    );
-  },
-  name: "Sizes"
-};
-
-export const ModalWithIcon = {
-  // Boilerplate for creating a modal, not relevant for add icon to the header
-  render:
-    // Internal helper, not part of the API
-    // Modal header with an icon example
-    /** Please implement your custom Modal header and set it as child for adding an Icon to your modal **/
-    () => {
-      const [show, setShow] = useState(false);
-      const openModalButtonRef = useRef(null);
-
-      const closeModal = useCallback(() => {
-        setShow(false);
-      }, []);
-
-      const openModalButton = useHelperOpenModalButton({
-        title: "Header with icon",
-        setShow,
-        openModalButtonRef
-      });
-
-      return (
-        <div>
-          {openModalButton}
-          <Modal
-            id={"story-book-modal"}
-            title="Modal header with an Icon"
-            triggerElement={openModalButtonRef.current}
-            show={show}
-            onClose={closeModal}
-            closeButtonAriaLabel={"close"}
-            contentSpacing
-          >
-            {}
-            <ModalHeader title={"Modal Heading"} icon={Upgrade} iconSize={32} />
-            <ModalContent>Modal content goes here</ModalContent>
-            <ModalFooterButtons
-              primaryButtonText="Confirm"
-              secondaryButtonText="Cancel"
-              onPrimaryButtonClick={closeModal}
-              onSecondaryButtonClick={closeModal}
-            />
-          </Modal>
-        </div>
-      );
-    },
-
-  name: "Modal with icon"
-};
-
-export const AlertModal = {
-  // Boilerplate for creating a modal, not relevant for add icon to the header
-  render:
-    // Internal helper, not part of the API
-    // Modal header with an icon example
-    // this makes your modal as alert dialog
-    () => {
-      const [show, setShow] = useState(false);
-      const openModalButtonRef = useRef(null);
-
-      const closeModal = useCallback(() => {
-        setShow(false);
-      }, []);
-
-      const openModalButton = useHelperOpenModalButton({
-        title: "Alert dialog",
-        setShow,
-        openModalButtonRef
-      });
-
-      return (
-        <div>
-          {openModalButton}
-          <Modal
-            alertDialog
-            id="story-book-modal"
-            title="Alert modal"
-            triggerElement={openModalButtonRef.current}
-            show={show}
-            onClose={closeModal}
-            contentSpacing
-          >
-            <ModalContent>Modal content goes here</ModalContent>
-            <ModalFooterButtons
-              primaryButtonText="Confirm"
-              secondaryButtonText="Cancel"
-              onPrimaryButtonClick={closeModal}
-              onSecondaryButtonClick={closeModal}
-            />
-          </Modal>
-        </div>
-      );
-    },
-
-  name: "Alert Modal"
-};
-
-export const ModalWithEditableTitle = {
-  // Boilerplate for creating a modal, not relevant for add icon to the header
-  render:
-    // Internal helper, not part of the API
-    // Modal header with an icon example
-    /** Please follow the design guidelines when implementing custom title **/
-    () => {
-      const [show, setShow] = useState(false);
-      const openModalButtonRef = useRef(null);
-
-      const closeModal = useCallback(() => {
-        setShow(false);
-      }, []);
-
-      const openModalButton = useHelperOpenModalButton({
-        title: "Open modal",
-        setShow,
-        openModalButtonRef
-      });
-
-      return (
-        <div>
-          {openModalButton}
-          <Modal
-            id={"story-book-modal"}
-            triggerElement={openModalButtonRef.current}
-            show={show}
-            onClose={closeModal}
-            closeButtonAriaLabel={"close"}
-            contentSpacing
-          >
-            <ModalHeader description={"Description text goes here"}>
-              <EditableHeading type={EditableHeading.types.H2} value={"Modal title"} />
-            </ModalHeader>
-            <ModalContent>Modal content goes here</ModalContent>
-            <ModalFooterButtons
-              primaryButtonText="Confirm"
-              secondaryButtonText="Cancel"
-              onPrimaryButtonClick={closeModal}
-              onSecondaryButtonClick={closeModal}
-            />
-          </Modal>
-        </div>
-      );
-    },
-
-  name: "Modal with editable title"
-};
diff --git a/packages/docs/src/pages/components/MultiStepIndicator/MultiStepIndicator.stories.helpers.tsx b/packages/docs/src/pages/components/MultiStepIndicator/MultiStepIndicator.stories.helpers.tsx
index a4ec95cb26..1a3836f249 100644
--- a/packages/docs/src/pages/components/MultiStepIndicator/MultiStepIndicator.stories.helpers.tsx
+++ b/packages/docs/src/pages/components/MultiStepIndicator/MultiStepIndicator.stories.helpers.tsx
@@ -59,11 +59,11 @@ export const thirdSteps: Step[] = [
 export const TipNotWhatYouAreLookingFor = () => (
   <Tip title="Not what you were looking for?">
     In order to navigate between content without a linear progress, use the{" "}
-    <StorybookLink page="Components/Tabs" size={StorybookLink.sizes.SMALL}>
+    <StorybookLink page="Components/Tabs" size="small">
       Tabs
     </StorybookLink>{" "}
     or{" "}
-    <StorybookLink page="Components/ButtonGroup" size={StorybookLink.sizes.SMALL}>
+    <StorybookLink page="Components/ButtonGroup" size="small">
       Button group
     </StorybookLink>{" "}
     component.
diff --git a/packages/docs/src/pages/components/NumberField/NumberField.stories.tsx b/packages/docs/src/pages/components/NumberField/NumberField.stories.tsx
index bec1c82325..39dd5a30d7 100644
--- a/packages/docs/src/pages/components/NumberField/NumberField.stories.tsx
+++ b/packages/docs/src/pages/components/NumberField/NumberField.stories.tsx
@@ -11,7 +11,7 @@ const metaSettings = createStoryMetaSettingsDecorator({
 });
 
 export default {
-  title: "Components/NumberField [New]",
+  title: "Components/NumberField",
   component: NumberField,
   argTypes: metaSettings.argTypes,
   decorators: metaSettings.decorators
diff --git a/packages/docs/src/pages/components/ProgressBars/LinearProgressBar.mdx b/packages/docs/src/pages/components/ProgressBars/ProgressBar.mdx
similarity index 67%
rename from packages/docs/src/pages/components/ProgressBars/LinearProgressBar.mdx
rename to packages/docs/src/pages/components/ProgressBars/ProgressBar.mdx
index 917fda9d72..f56ba469b5 100644
--- a/packages/docs/src/pages/components/ProgressBars/LinearProgressBar.mdx
+++ b/packages/docs/src/pages/components/ProgressBars/ProgressBar.mdx
@@ -3,21 +3,21 @@ import {
   ComponentRuleNegative,
   ComponentRulePositive,
   TipMultiStepIndicator
-} from "./LinearProgressBar.stories.helpers";
-import * as LinearProgressBarStories from "./LinearProgressBar.stories";
+} from "./ProgressBar.stories.helpers";
+import * as ProgressBarStories from "./ProgressBar.stories";
 
-<Meta of={LinearProgressBarStories} />
+<Meta of={ProgressBarStories} />
 
-# LinearProgressBar
+# ProgressBar
 
 Progress bars show continuous progress through a process, such as a percentage value. They show how much progress is complete and how much remains.
 
-<Canvas of={LinearProgressBarStories.Overview} />
+<Canvas of={ProgressBarStories.Overview} />
 
 ### Import
 
 ```js
-import { LinearProgressBar } from "@vibe/core";
+import { ProgressBar } from "@vibe/core";
 ```
 
 ## Props
@@ -36,15 +36,15 @@ import { LinearProgressBar } from "@vibe/core";
 
 ### Regular
 
-<Canvas of={LinearProgressBarStories.Regular} />
+<Canvas of={ProgressBarStories.Regular} />
 
 ### With secondary value
 
-<Canvas of={LinearProgressBarStories.WithSecondaryValue} />
+<Canvas of={ProgressBarStories.WithSecondaryValue} />
 
 ### Multi progress bar
 
-<Canvas of={LinearProgressBarStories.MultiProgressBar} />
+<Canvas of={ProgressBarStories.MultiProgressBar} />
 
 ## Do’s and Don’ts
 
@@ -69,11 +69,11 @@ import { LinearProgressBar } from "@vibe/core";
 
 The user can see in a clear way the number of items used in the account.
 
-<Canvas of={LinearProgressBarStories.ProgressBarAsACounter} />
+<Canvas of={ProgressBarStories.ProgressBarAsACounter} />
 
 ### Progress bar as loading indicator
 
-<Canvas of={LinearProgressBarStories.ProgressBarAsLoadingIndicator} />
+<Canvas of={ProgressBarStories.ProgressBarAsLoadingIndicator} />
 
 ## Related components
 
diff --git a/packages/docs/src/pages/components/ProgressBars/LinearProgressBar.stories.helpers.tsx b/packages/docs/src/pages/components/ProgressBars/ProgressBar.stories.helpers.tsx
similarity index 81%
rename from packages/docs/src/pages/components/ProgressBars/LinearProgressBar.stories.helpers.tsx
rename to packages/docs/src/pages/components/ProgressBars/ProgressBar.stories.helpers.tsx
index 19eb8f7153..6a66a52166 100644
--- a/packages/docs/src/pages/components/ProgressBars/LinearProgressBar.stories.helpers.tsx
+++ b/packages/docs/src/pages/components/ProgressBars/ProgressBar.stories.helpers.tsx
@@ -1,11 +1,11 @@
 import React from "react";
 import { StorybookLink, Tip } from "vibe-storybook-components";
-import { DialogContentContainer, Text, Flex, LinearProgressBar } from "@vibe/core";
+import { DialogContentContainer, Text, Flex, ProgressBar } from "@vibe/core";
 
 export const TipMultiStepIndicator = () => (
   <Tip>
     If you need to lead a user through a progress, use the{" "}
-    <StorybookLink page="Components/MultiStepIndicator" size={StorybookLink.sizes.SMALL}>
+    <StorybookLink page="Components/MultiStepIndicator" size="small">
       MultiStepIndicator
     </StorybookLink>{" "}
     instead.
@@ -22,7 +22,7 @@ export const ComponentRulePositive = () => (
         <Text>Items</Text>
         <Text>142/200</Text>
       </Flex>
-      <LinearProgressBar value={71} />
+      <ProgressBar value={71} />
     </DialogContentContainer>
   </div>
 );
@@ -37,19 +37,19 @@ export const ComponentRuleNegative = () => (
         <Text ellipsis={false} style={{ flexBasis: 80 }}>
           Drive 1
         </Text>
-        <LinearProgressBar value={88} />
+        <ProgressBar value={88} />
       </Flex>
       <Flex gap="medium">
         <Text ellipsis={false} style={{ flexBasis: 80 }}>
           Drive 2
         </Text>
-        <LinearProgressBar value={46} />
+        <ProgressBar value={46} />
       </Flex>
       <Flex gap="medium">
         <Text ellipsis={false} style={{ flexBasis: 80 }}>
           Drive 3
         </Text>
-        <LinearProgressBar value={72} />
+        <ProgressBar value={72} />
       </Flex>
     </DialogContentContainer>
   </div>
diff --git a/packages/docs/src/pages/components/ProgressBars/LinearProgressBar.stories.tsx b/packages/docs/src/pages/components/ProgressBars/ProgressBar.stories.tsx
similarity index 83%
rename from packages/docs/src/pages/components/ProgressBars/LinearProgressBar.stories.tsx
rename to packages/docs/src/pages/components/ProgressBars/ProgressBar.stories.tsx
index 9c305c4981..3a3759e89a 100644
--- a/packages/docs/src/pages/components/ProgressBars/LinearProgressBar.stories.tsx
+++ b/packages/docs/src/pages/components/ProgressBars/ProgressBar.stories.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { LinearProgressBar, type LinearProgressBarProps, Flex, Text, Box } from "@vibe/core";
+import { ProgressBar, type ProgressBarProps, Flex, Text, Box } from "@vibe/core";
 import { useMemo } from "react";
 import { createStoryMetaSettingsDecorator } from "../../../utils/createStoryMetaSettingsDecorator";
 import { Info } from "@vibe/icons";
@@ -8,26 +8,26 @@ import Logo from "./assets/Logo.png";
 import { type Meta, type StoryObj } from "@storybook/react";
 
 const metaSettings = createStoryMetaSettingsDecorator({
-  component: LinearProgressBar
+  component: ProgressBar
 });
 
 export default {
-  title: "Components/LinearProgressBar",
-  component: LinearProgressBar,
+  title: "Components/ProgressBar",
+  component: ProgressBar,
   argTypes: metaSettings.argTypes,
   decorators: metaSettings.decorators
-} satisfies Meta<typeof LinearProgressBar>;
+} satisfies Meta<typeof ProgressBar>;
 
-type Story = StoryObj<typeof LinearProgressBar>;
+type Story = StoryObj<typeof ProgressBar>;
 
 export const Overview: Story = {
-  render: (args: LinearProgressBarProps) => (
+  render: (args: ProgressBarProps) => (
     <div style={{ width: "400px" }}>
-      <LinearProgressBar
+      <ProgressBar
         value={20}
         size="large"
         id="overview-linear-progress-bar"
-        ariaLabel="Overview linear progress bar"
+        aria-label="Overview linear progress bar"
         {...args}
       />
     </div>
@@ -46,9 +46,9 @@ export const Regular: Story = {
   render: () => (
     <Flex direction="column" gap="large">
       <Flex direction="column" gap="small" align="start" style={{ width: "400px" }}>
-        <LinearProgressBar
+        <ProgressBar
           id="regular-linear-progress-bar"
-          ariaLabel="Regular linear progress bar"
+          aria-label="Regular linear progress bar"
           indicateProgress
           value={30}
           size="large"
@@ -56,7 +56,7 @@ export const Regular: Story = {
         With label
       </Flex>
       <Flex direction="column" gap="small" align="start" style={{ width: "400px" }}>
-        <LinearProgressBar id="regular-linear-progress-bar-without-label" value={30} size="large" />
+        <ProgressBar id="regular-linear-progress-bar-without-label" value={30} size="large" />
         Without label
       </Flex>
     </Flex>
@@ -66,9 +66,9 @@ export const Regular: Story = {
 export const WithSecondaryValue: Story = {
   render: () => (
     <div style={{ width: "400px" }}>
-      <LinearProgressBar
+      <ProgressBar
         id="with-secondary-value-linear-progress-bar"
-        ariaLabel="With secondary value linear progress bar"
+        aria-label="With secondary value linear progress bar"
         value={50}
         indicateProgress
         valueSecondary={65}
@@ -100,9 +100,9 @@ export const MultiProgressBar: Story = {
 
     return (
       <div style={{ width: "600px" }}>
-        <LinearProgressBar
+        <ProgressBar
           id="multi-progress-bar"
-          ariaLabel="Multi progress bar"
+          aria-label="Multi progress bar"
           value={25}
           size="large"
           indicateProgress
@@ -129,9 +129,9 @@ export const ProgressBarAsACounter: Story = {
         </Flex>
         <Text>142/200</Text>
       </Flex>
-      <LinearProgressBar
+      <ProgressBar
         id="progress-bar-as-a-counter"
-        ariaLabel="Progress bar as a counter"
+        aria-label="Progress bar as a counter"
         value={71}
         size="large"
         barStyle="positive"
@@ -159,9 +159,9 @@ export const ProgressBarAsLoadingIndicator: Story = {
           </Flex>
         </Flex>
       </Flex>
-      <LinearProgressBar
+      <ProgressBar
         id="progress-bar-as-loading-indicator"
-        ariaLabel="Progress bar as loading indicator"
+        aria-label="Progress bar as loading indicator"
         value={71}
       />
     </Box>
@@ -177,7 +177,7 @@ export const ExceedingMaxValue: Story = {
         <Text type="text1" weight="bold">
           Standard behavior (capped at 100%)
         </Text>
-        <LinearProgressBar
+        <ProgressBar
           id="standard-progress-bar"
           ariaLabel="Standard progress bar"
           value={120}
@@ -194,7 +194,7 @@ export const ExceedingMaxValue: Story = {
         <Text type="text1" weight="bold">
           Allowing exceeding max
         </Text>
-        <LinearProgressBar
+        <ProgressBar
           id="exceeding-progress-bar"
           ariaLabel="Exceeding progress bar"
           value={120}
diff --git a/packages/docs/src/pages/components/RadioButton/RadioButton.stories.helpers.tsx b/packages/docs/src/pages/components/RadioButton/RadioButton.stories.helpers.tsx
index aae3e0b232..e59bd67bbc 100644
--- a/packages/docs/src/pages/components/RadioButton/RadioButton.stories.helpers.tsx
+++ b/packages/docs/src/pages/components/RadioButton/RadioButton.stories.helpers.tsx
@@ -4,7 +4,7 @@ import { StorybookLink, Tip } from "vibe-storybook-components";
 export const TipDropdown = () => (
   <Tip>
     When there’s limited space or no default selection, consider using a select{" "}
-    <StorybookLink page="Components/Dropdown" size={StorybookLink.sizes.SMALL}>
+    <StorybookLink page="Components/Dropdown" size="small">
       Dropdown
     </StorybookLink>{" "}
     instead.
diff --git a/packages/docs/src/pages/components/Search/Search.mdx b/packages/docs/src/pages/components/Search/Search.mdx
index 8ca514f958..54e36c4c79 100644
--- a/packages/docs/src/pages/components/Search/Search.mdx
+++ b/packages/docs/src/pages/components/Search/Search.mdx
@@ -38,7 +38,7 @@ import { Search } from "@vibe/core";
 
 <Tip title="Not what you were looking for?">
   <span>If you need to filter results from a long list, consider using the </span>
-  <StorybookLink page="Components/Combobox" size={StorybookLink.sizes.SMALL}>
+  <StorybookLink page="Components/Combobox" size={StorybookLinkSize.small}>
     <span>Combobox</span>
   </StorybookLink>
   <span> component.</span>
diff --git a/packages/docs/src/pages/components/Search/Search.stories.tsx b/packages/docs/src/pages/components/Search/Search.stories.tsx
index a274d225bb..773dfab149 100644
--- a/packages/docs/src/pages/components/Search/Search.stories.tsx
+++ b/packages/docs/src/pages/components/Search/Search.stories.tsx
@@ -75,7 +75,7 @@ export const WithAdditionalAction: Story = {
       id="search-with-action"
       inputAriaLabel="Search with filter action"
       placeholder="Search with icon"
-      renderAction={<IconButton id="filter-action-button" icon={FilterIcon} ariaLabel="Filter results" size="small" />}
+      renderAction={<IconButton id="filter-action-button" icon={FilterIcon} aria-label="Filter results" size="small" />}
     />
   ),
   decorators: [withFixedWidth],
diff --git a/packages/docs/src/pages/components/Skeleton/Skeleton.mdx b/packages/docs/src/pages/components/Skeleton/Skeleton.mdx
index be4430a57d..daeb86ba41 100644
--- a/packages/docs/src/pages/components/Skeleton/Skeleton.mdx
+++ b/packages/docs/src/pages/components/Skeleton/Skeleton.mdx
@@ -116,4 +116,4 @@ Use this menu to allow a user to either select one or more items from the list.
 
 ## Related components
 
-<RelatedComponents componentsNames={["LinearProgressBar", "Counter", "Spinner"]} />
+<RelatedComponents componentsNames={["ProgressBar", "Counter", "Spinner"]} />
diff --git a/packages/docs/src/pages/components/Skeleton/Skeleton.stories.helpers.tsx b/packages/docs/src/pages/components/Skeleton/Skeleton.stories.helpers.tsx
index 8b1191a537..cb652a1bc1 100644
--- a/packages/docs/src/pages/components/Skeleton/Skeleton.stories.helpers.tsx
+++ b/packages/docs/src/pages/components/Skeleton/Skeleton.stories.helpers.tsx
@@ -4,7 +4,7 @@ import { StorybookLink, Tip } from "vibe-storybook-components";
 export const TipLoader = () => (
   <Tip>
     Using loader after the pages are fully loaded consider using the{" "}
-    <StorybookLink page="Components/Loader" size={StorybookLink.sizes.SMALL}>
+    <StorybookLink page="Components/Loader" size="small">
       loader component.
     </StorybookLink>
   </Tip>
diff --git a/packages/docs/src/pages/components/Slider/Slider.mdx b/packages/docs/src/pages/components/Slider/Slider.mdx
index adedd799d3..ba41738fb8 100644
--- a/packages/docs/src/pages/components/Slider/Slider.mdx
+++ b/packages/docs/src/pages/components/Slider/Slider.mdx
@@ -88,4 +88,4 @@ Custom ID, custom `data-testid` and Custom Class. Add Custom Items as Prefix and
 
 ## Related components
 
-<RelatedComponents componentsNames={["LinearProgressBar", "Toggle", "MultiStepIndicator"]} />
+<RelatedComponents componentsNames={["ProgressBar", "Toggle", "MultiStepIndicator"]} />
diff --git a/packages/docs/src/pages/components/Slider/Slider.stories.helpers.tsx b/packages/docs/src/pages/components/Slider/Slider.stories.helpers.tsx
index 0ab6d24357..9d50ee06d8 100644
--- a/packages/docs/src/pages/components/Slider/Slider.stories.helpers.tsx
+++ b/packages/docs/src/pages/components/Slider/Slider.stories.helpers.tsx
@@ -4,7 +4,7 @@ import { StorybookLink, Tip } from "vibe-storybook-components";
 export const TipMultiStepIndicator = () => (
   <Tip title="Not what you were looking for?">
     If you need to visualize progress use{" "}
-    <StorybookLink page="Components/MultiStepIndicator" size={StorybookLink.sizes.SMALL}>
+    <StorybookLink page="Components/MultiStepIndicator" size="small">
       MultiStepIndicator
     </StorybookLink>{" "}
     component instead
diff --git a/packages/docs/src/pages/components/Slider/Slider.stories.tsx b/packages/docs/src/pages/components/Slider/Slider.stories.tsx
index 51ce574d03..549b61f0bc 100644
--- a/packages/docs/src/pages/components/Slider/Slider.stories.tsx
+++ b/packages/docs/src/pages/components/Slider/Slider.stories.tsx
@@ -21,7 +21,7 @@ export const Overview = {
   render: sliderTemplate.bind({}),
   args: {
     id: "overview-slider",
-    ariaLabel: "Overview slider"
+    "aria-label": "Overview slider"
   },
   parameters: {
     docs: {
@@ -35,9 +35,9 @@ export const Overview = {
 export const Sizes = {
   render: () => (
     <Flex gap="medium" flex="1">
-      <Slider id="sizes-small" ariaLabel="Small slider" size="small" defaultValue={12} />
-      <Slider id="sizes-medium" ariaLabel="Medium slider" size="medium" defaultValue={24} />
-      <Slider id="sizes-large" ariaLabel="Large slider" size="large" defaultValue={35} />
+      <Slider id="sizes-small" aria-label="Small slider" size="small" defaultValue={12} />
+      <Slider id="sizes-medium" aria-label="Medium slider" size="medium" defaultValue={24} />
+      <Slider id="sizes-large" aria-label="Large slider" size="large" defaultValue={35} />
     </Flex>
   )
 };
@@ -47,20 +47,20 @@ export const Ranged = {
     <Flex gap="medium" flex="1">
       <Slider
         id="ranged-small"
-        ariaLabel="Small ranged slider"
+        aria-label="Small ranged slider"
         data-testid={"monday-ranged-slider-s"}
         size="small"
         ranged={true}
       />
       <Slider
         id="ranged-medium"
-        ariaLabel="Medium ranged slider"
+        aria-label="Medium ranged slider"
         data-testid={"monday-ranged-slider-m"}
         size="medium"
         ranged={true}
         defaultValue={[12, 55]}
       />
-      <Slider id="ranged-large" ariaLabel="Large ranged slider" size="large" ranged={true} defaultValue={[25, 32]} />
+      <Slider id="ranged-large" aria-label="Large ranged slider" size="large" ranged={true} defaultValue={[25, 32]} />
     </Flex>
   ),
   play: rangedSliderMouseEventsPlaySuite
@@ -69,16 +69,16 @@ export const Ranged = {
 export const Colors = {
   render: () => (
     <Flex gap="medium" flex="1">
-      <Slider id="color-positive" ariaLabel="Positive color slider" color="positive" defaultValue={34} size="medium" />
+      <Slider id="color-positive" aria-label="Positive color slider" color="positive" defaultValue={34} size="medium" />
       <Slider
         id="color-negative"
-        ariaLabel="Negative color ranged slider"
+        aria-label="Negative color ranged slider"
         color="negative"
         ranged={true}
         defaultValue={[12, 55]}
         size="medium"
       />
-      <Slider id="color-primary" ariaLabel="Primary color slider" color="primary" defaultValue={12} size="medium" />
+      <Slider id="color-primary" aria-label="Primary color slider" color="primary" defaultValue={12} size="medium" />
     </Flex>
   )
 };
@@ -88,7 +88,7 @@ export const Disabled = {
     <Flex gap="medium" flex="1">
       <Slider
         id="disabled-positive"
-        ariaLabel="Disabled positive slider"
+        aria-label="Disabled positive slider"
         disabled={true}
         defaultValue={24}
         color="positive"
@@ -96,14 +96,14 @@ export const Disabled = {
       />
       <Slider
         id="disabled-negative"
-        ariaLabel="Disabled negative slider"
+        aria-label="Disabled negative slider"
         disabled={true}
         color="negative"
         size="medium"
       />
       <Slider
         id="disabled-ranged"
-        ariaLabel="Disabled ranged primary slider"
+        aria-label="Disabled ranged primary slider"
         disabled={true}
         ranged={true}
         defaultValue={[12, 55]}
@@ -119,14 +119,14 @@ export const WithLabels = {
     <Flex direction="column" gap="large" style={{ width: "500px" }}>
       <Slider
         id="labeled-simple"
-        ariaLabel="Simple labeled slider"
+        aria-label="Simple labeled slider"
         indicateSelection={true}
         defaultValue={12}
         size="small"
       />
       <Slider
         id="labeled-ranged"
-        ariaLabel="Labeled ranged slider"
+        aria-label="Labeled ranged slider"
         indicateSelection={true}
         ranged={true}
         defaultValue={[12, 55]}
@@ -134,7 +134,7 @@ export const WithLabels = {
       />
       <Slider
         id="labeled-sound"
-        ariaLabel="Sound slider with icon"
+        aria-label="Sound slider with icon"
         // @ts-ignore
         prefix={{ icon: Sound }}
         indicateSelection={true}
@@ -143,7 +143,7 @@ export const WithLabels = {
       />
       <Slider
         id="labeled-video"
-        ariaLabel="Video slider with icons"
+        aria-label="Video slider with icons"
         // @ts-ignore
         prefix={{ icon: Video }}
         // @ts-ignore
@@ -153,7 +153,7 @@ export const WithLabels = {
       />
       <Slider
         id="labeled-volume"
-        ariaLabel="Volume slider"
+        aria-label="Volume slider"
         prefix="Vol"
         indicateSelection={true}
         defaultValue={0}
@@ -175,7 +175,7 @@ export const ShowValue = {
     <Flex gap="medium" flex="1">
       <Slider
         id="show-value-small"
-        ariaLabel="Small slider showing value"
+        aria-label="Small slider showing value"
         data-testid={"monday-slider-show-value-s"}
         showValue={true}
         defaultValue={12}
@@ -183,7 +183,7 @@ export const ShowValue = {
       />
       <Slider
         id="show-value-medium"
-        ariaLabel="Medium slider showing value"
+        aria-label="Medium slider showing value"
         data-testid={"monday-slider-show-value-m"}
         showValue={true}
         defaultValue={55}
@@ -191,7 +191,7 @@ export const ShowValue = {
       />
       <Slider
         id="show-value-large"
-        ariaLabel="Large slider showing value"
+        aria-label="Large slider showing value"
         data-testid={"monday-slider-show-value-l"}
         showValue={true}
         defaultValue={89}
@@ -207,7 +207,7 @@ export const LimitsSteps = {
     <Flex direction="column" gap="large" style={{ width: "500px" }}>
       <Slider
         id="step-10"
-        ariaLabel="Slider with step 10"
+        aria-label="Slider with step 10"
         prefix="Step 10"
         step={10}
         indicateSelection={true}
@@ -216,7 +216,7 @@ export const LimitsSteps = {
       />
       <Slider
         id="step-2-max-20"
-        ariaLabel="Slider with step 2 max 20"
+        aria-label="Slider with step 2 max 20"
         prefix="Step 2, Max: 20"
         max={20}
         step={2}
@@ -226,7 +226,7 @@ export const LimitsSteps = {
       />
       <Slider
         id="percentage-range"
-        ariaLabel="Percentage range slider from 20% to 80%"
+        aria-label="Percentage range slider from 20% to 80%"
         prefix="from 20%"
         postfix="till 80%"
         min={20}
@@ -237,7 +237,7 @@ export const LimitsSteps = {
       />
       <Slider
         id="ranged-100-200"
-        ariaLabel="Ranged slider from 100 to 200"
+        aria-label="Ranged slider from 100 to 200"
         ranged={true}
         indicateSelection={true}
         min={100}
diff --git a/packages/docs/src/pages/components/SplitButton/SplitButton.stories.helpers.tsx b/packages/docs/src/pages/components/SplitButton/SplitButton.stories.helpers.tsx
index 89bc6874ec..716d4056cf 100644
--- a/packages/docs/src/pages/components/SplitButton/SplitButton.stories.helpers.tsx
+++ b/packages/docs/src/pages/components/SplitButton/SplitButton.stories.helpers.tsx
@@ -6,7 +6,7 @@ import React from "react";
 export const TipMenu = () => (
   <Tip>
     If the actions in the menu are not related to each other, consider using a{" "}
-    <StorybookLink page="Components/Menu" size={StorybookLink.sizes.SMALL}>
+    <StorybookLink page="Components/Menu" size="small">
       Menu
     </StorybookLink>{" "}
     component.
diff --git a/packages/docs/src/pages/components/SplitButton/SplitButton.stories.tsx b/packages/docs/src/pages/components/SplitButton/SplitButton.stories.tsx
index 5aa6ddcec4..69ecfefb19 100644
--- a/packages/docs/src/pages/components/SplitButton/SplitButton.stories.tsx
+++ b/packages/docs/src/pages/components/SplitButton/SplitButton.stories.tsx
@@ -30,7 +30,7 @@ export default {
 
 export const Overview = {
   render: (args: SplitButtonProps) => (
-    <SplitButton id="overview-split-button" ariaLabel="Overview split button" {...args}>
+    <SplitButton id="overview-split-button" aria-label="Overview split button" {...args}>
       Button
     </SplitButton>
   ),
@@ -54,7 +54,7 @@ export const Types = {
     <>
       <SplitButton
         id="types-primary"
-        ariaLabel="Primary split button"
+        aria-label="Primary split button"
         secondaryDialogContent={
           <SplitButtonMenu id="types-primary-menu">
             <MenuItem id="types-primary-check" icon={Check} title="Hey" />
@@ -66,7 +66,7 @@ export const Types = {
       </SplitButton>
       <SplitButton
         id="types-secondary"
-        ariaLabel="Secondary split button"
+        aria-label="Secondary split button"
         kind="secondary"
         secondaryDialogContent={
           <SplitButtonMenu id="types-secondary-menu">
@@ -79,7 +79,7 @@ export const Types = {
       </SplitButton>
       <SplitButton
         id="types-tertiary"
-        ariaLabel="Tertiary split button"
+        aria-label="Tertiary split button"
         kind="tertiary"
         secondaryDialogContent={
           <SplitButtonMenu id="types-tertiary-menu">
@@ -99,7 +99,7 @@ export const Sizes = {
     <>
       <SplitButton
         id="sizes-small"
-        ariaLabel="Small split button"
+        aria-label="Small split button"
         size="small"
         secondaryDialogContent={
           <SplitButtonMenu id="sizes-small-menu">
@@ -112,7 +112,7 @@ export const Sizes = {
       </SplitButton>
       <SplitButton
         id="sizes-medium"
-        ariaLabel="Medium split button"
+        aria-label="Medium split button"
         size="medium"
         secondaryDialogContent={
           <SplitButtonMenu id="sizes-medium-menu">
@@ -125,7 +125,7 @@ export const Sizes = {
       </SplitButton>
       <SplitButton
         id="sizes-large"
-        ariaLabel="Large split button"
+        aria-label="Large split button"
         size="large"
         secondaryDialogContent={
           <SplitButtonMenu id="sizes-large-menu">
@@ -145,7 +145,7 @@ export const SplitButtonWithIcons = {
     <>
       <SplitButton
         id="icons-left"
-        ariaLabel="Split button with left icon"
+        aria-label="Split button with left icon"
         leftIcon={Add}
         secondaryDialogContent={
           <SplitButtonMenu id="icons-left-menu">
@@ -158,7 +158,7 @@ export const SplitButtonWithIcons = {
       </SplitButton>
       <SplitButton
         id="icons-right"
-        ariaLabel="Split button with right icon"
+        aria-label="Split button with right icon"
         rightIcon={Add}
         secondaryDialogContent={
           <SplitButtonMenu id="icons-right-menu">
@@ -178,7 +178,7 @@ export const SplitButtonAsThePrimaryAction = {
   render: () => (
     <SplitButton
       id="primary-action"
-      ariaLabel="Use template split button"
+      aria-label="Use template split button"
       secondaryDialogPosition="bottom-start"
       secondaryDialogContent={
         <SplitButtonMenu id="primary-action-menu">
@@ -198,7 +198,7 @@ export const SecondarySplitButton = {
     <>
       <SplitButton
         id="secondary-export"
-        ariaLabel="Export options split button"
+        aria-label="Export options split button"
         kind="secondary"
         secondaryDialogPosition="bottom-start"
         secondaryDialogContent={
@@ -211,7 +211,7 @@ export const SecondarySplitButton = {
       >
         Export to CSV
       </SplitButton>
-      <Button id="new-item-button" ariaLabel="Create new item">
+      <Button id="new-item-button" aria-label="Create new item">
         New item
       </Button>
     </>
@@ -223,13 +223,13 @@ export const CustomMenu = {
   render: () => (
     <SplitButton
       id="custom-menu"
-      ariaLabel="Custom menu split button"
+      aria-label="Custom menu split button"
       secondaryDialogContent={
         <Menu focusItemIndexOnMount={2} id="custom-menu-content" size="medium">
           <MenuTitle caption="Look up, you might see" captionPosition="top" />
-          <MenuItem id="custom-menu-sun" icon={Sun} iconType="svg" title="The sun" />
-          <MenuItem id="custom-menu-moon" icon={Moon} iconType="svg" title="The moon" />
-          <MenuItem id="custom-menu-stars" icon={Favorite} iconType="svg" title="And the stars" />
+          <MenuItem id="custom-menu-sun" icon={Sun} type="svg" title="The sun" />
+          <MenuItem id="custom-menu-moon" icon={Moon} type="svg" title="The moon" />
+          <MenuItem id="custom-menu-stars" icon={Favorite} type="svg" title="And the stars" />
         </Menu>
       }
     >
diff --git a/packages/docs/src/pages/components/Steps/Steps.stories.tsx b/packages/docs/src/pages/components/Steps/Steps.stories.tsx
index e4a0559045..7a5b1b743f 100644
--- a/packages/docs/src/pages/components/Steps/Steps.stories.tsx
+++ b/packages/docs/src/pages/components/Steps/Steps.stories.tsx
@@ -48,7 +48,6 @@ const NavigableStepsTemplate = (args: StepsProps) => {
       }}
       {...args}
       onChangeActiveStep={onChangeActiveStep}
-      onFinish={() => {}}
     />
   );
 };
@@ -132,7 +131,6 @@ export const NavigableSteps = {
           nextButtonProps={{
             onClick: stepNext
           }}
-          onFinish={() => {}}
         />
       </div>
     );
@@ -185,7 +183,6 @@ export const StepsInsideATipseen = {
               size: "small",
               onClick: stepNext
             }}
-            onFinish={() => {}}
           />
         }
       >
diff --git a/packages/docs/src/pages/components/Table/Table.stories.helpers.tsx b/packages/docs/src/pages/components/Table/Table.stories.helpers.tsx
index b58f9129eb..f51f1b2316 100644
--- a/packages/docs/src/pages/components/Table/Table.stories.helpers.tsx
+++ b/packages/docs/src/pages/components/Table/Table.stories.helpers.tsx
@@ -479,7 +479,7 @@ export const TableAvatar = ({ text }: { text: string }) => (
       .join("")}
     customSize={24}
     size="small"
-    ariaLabel={text}
+    aria-label={text}
     backgroundColor="dark_purple"
   />
 );
diff --git a/packages/docs/src/pages/components/Tabs/Tabs.stories.helpers.tsx b/packages/docs/src/pages/components/Tabs/Tabs.stories.helpers.tsx
index 185207c7ab..5a08f1eab6 100644
--- a/packages/docs/src/pages/components/Tabs/Tabs.stories.helpers.tsx
+++ b/packages/docs/src/pages/components/Tabs/Tabs.stories.helpers.tsx
@@ -4,7 +4,7 @@ import { StorybookLink, Tip } from "vibe-storybook-components";
 export const TipButtonGroup = () => (
   <Tip>
     Use tabs to navigate between different contents, if switching between states within the same content use{" "}
-    <StorybookLink page="Components/ButtonGroup" size={StorybookLink.sizes.SMALL}>
+    <StorybookLink page="Components/ButtonGroup" size="small">
       Button group
     </StorybookLink>{" "}
     instead
diff --git a/packages/docs/src/pages/components/Text/Text.stories.helpers.tsx b/packages/docs/src/pages/components/Text/Text.stories.helpers.tsx
index 4a387b8bb9..d0699f61cc 100644
--- a/packages/docs/src/pages/components/Text/Text.stories.helpers.tsx
+++ b/packages/docs/src/pages/components/Text/Text.stories.helpers.tsx
@@ -4,7 +4,7 @@ import { StorybookLink, Tip } from "vibe-storybook-components";
 export const TipHeading = () => (
   <Tip>
     Check out our{" "}
-    <StorybookLink page="Text/Heading" size={StorybookLink.sizes.SMALL}>
+    <StorybookLink page="Text/Heading" size="small">
       Heading
     </StorybookLink>{" "}
     component for text headlines.
@@ -14,7 +14,7 @@ export const TipHeading = () => (
 export const TipLink = () => (
   <Tip>
     If you need to place a link outside of the textual flow, please use our{" "}
-    <StorybookLink page="Components/Link" size={StorybookLink.sizes.SMALL}>
+    <StorybookLink page="Components/Link" size="small">
       Link
     </StorybookLink>{" "}
     component.
diff --git a/packages/docs/src/pages/components/Text/Text.stories.tsx b/packages/docs/src/pages/components/Text/Text.stories.tsx
index 2a95c245e1..a93edc66e2 100644
--- a/packages/docs/src/pages/components/Text/Text.stories.tsx
+++ b/packages/docs/src/pages/components/Text/Text.stories.tsx
@@ -173,7 +173,7 @@ export const LinksInsideRunningText = {
     <Flex direction="column" align="start" gap="small">
       <Text align="center">
         This is the story of a{" "}
-        <StorybookLink page="Foundations/Typography" size={StorybookLink.sizes.SMALL}>
+        <StorybookLink page="Foundations/Typography" size="small">
           link
         </StorybookLink>{" "}
         inside running text.
@@ -181,7 +181,7 @@ export const LinksInsideRunningText = {
       <Box style={{ backgroundColor: "var(--primary-color)", width: "420px" }} padding="small">
         <Text align="center" color="onPrimary">
           This is the story of a{" "}
-          <StorybookLink page="Foundations/Typography" size={StorybookLink.sizes.SMALL}>
+          <StorybookLink page="Foundations/Typography" size="small">
             link
           </StorybookLink>{" "}
           inside running text on a primary color
@@ -190,7 +190,7 @@ export const LinksInsideRunningText = {
       <Box style={{ width: "420px" }} backgroundColor="invertedColorBackground" padding="small">
         <Text align="center" color="onInverted">
           This is the story of a{" "}
-          <StorybookLink page="Foundations/Typography" size={StorybookLink.sizes.SMALL}>
+          <StorybookLink page="Foundations/Typography" size="small">
             link
           </StorybookLink>{" "}
           inside running text on an inverted color
@@ -199,7 +199,7 @@ export const LinksInsideRunningText = {
       <Box style={{ backgroundColor: "black", width: "420px" }} padding="small">
         <Text ellipsis={false} style={{}} align="center" color="fixedLight">
           This is the story of a{" "}
-          <StorybookLink page="Foundations/Typography" size={StorybookLink.sizes.SMALL}>
+          <StorybookLink page="Foundations/Typography" size="small">
             link
           </StorybookLink>{" "}
           inside running text with fixed light color
@@ -208,7 +208,7 @@ export const LinksInsideRunningText = {
       <Box style={{ backgroundColor: "whitesmoke", width: "420px" }} padding="small">
         <Text ellipsis={false} align="center" color="fixedDark">
           This is the story of a{" "}
-          <StorybookLink page="Foundations/Typography" size={StorybookLink.sizes.SMALL}>
+          <StorybookLink page="Foundations/Typography" size="small">
             link
           </StorybookLink>{" "}
           inside running text with fixed dark color
diff --git a/packages/docs/src/pages/components/TextField/TextField.mdx b/packages/docs/src/pages/components/TextField/TextField.mdx
index d013266923..570fb7f3ae 100644
--- a/packages/docs/src/pages/components/TextField/TextField.mdx
+++ b/packages/docs/src/pages/components/TextField/TextField.mdx
@@ -55,8 +55,8 @@ import { TextField } from "@vibe/core";
       and correct validation issues.
     </>,
     <>
-      When using icons, provide meaningful labels through <code>iconsNames.primary</code> and{" "}
-      <code>iconsNames.secondary</code> props for screen reader users.
+      When using icons, provide meaningful labels through <code>iconLabel</code> and{" "}
+      <code>secondaryIconLabel</code> props for screen reader users.
     </>,
     <>
       For search inputs, use <code>type='search'</code> and provide <code>searchResultsContainerId</code> to properly
diff --git a/packages/docs/src/pages/components/TextField/TextField.stories.tsx b/packages/docs/src/pages/components/TextField/TextField.stories.tsx
index 9f89c26745..f561e9aa25 100644
--- a/packages/docs/src/pages/components/TextField/TextField.stories.tsx
+++ b/packages/docs/src/pages/components/TextField/TextField.stories.tsx
@@ -8,7 +8,7 @@ type Story = StoryObj<typeof TextField>;
 
 const metaSettings = createStoryMetaSettingsDecorator({
   component: TextField,
-  iconPropNamesArray: ["secondaryIconName", "iconName", "labelIconName"]
+  iconPropNamesArray: ["secondaryIconName", "icon", "labelIconName"]
 });
 
 export default {
@@ -27,7 +27,7 @@ export const Overview: Story = {
   args: {
     id: "overview-textfield",
     title: "Name",
-    iconName: Show,
+    icon: Show,
 
     validation: {
       text: "Helper text"
@@ -70,7 +70,7 @@ export const States: Story = {
           id="states-with-icon"
           inputAriaLabel="Text field with icon"
           placeholder="With icon"
-          iconName={Email}
+          icon={Email}
           size="medium"
         />
         <TextField
@@ -78,7 +78,7 @@ export const States: Story = {
           inputAriaLabel="Text field with clickable icon"
           placeholder="With clickable icon"
           iconTooltipContent="Copy"
-          iconName={Duplicate}
+          icon={Duplicate}
           onIconClick={() => {}}
           size="medium"
         />
@@ -92,7 +92,7 @@ export const States: Story = {
           validation={{
             status: "success"
           }}
-          iconName={Check}
+          icon={Check}
           size="medium"
         />
         <TextField
@@ -102,7 +102,7 @@ export const States: Story = {
           validation={{
             status: "error"
           }}
-          iconName={CloseSmall}
+          icon={CloseSmall}
           size="medium"
         />
       </Flex>
diff --git a/packages/docs/src/pages/components/ThemeProvider/ThemeProvider.mdx b/packages/docs/src/pages/components/ThemeProvider/ThemeProvider.mdx
index ee929ae4ec..0510447c3e 100644
--- a/packages/docs/src/pages/components/ThemeProvider/ThemeProvider.mdx
+++ b/packages/docs/src/pages/components/ThemeProvider/ThemeProvider.mdx
@@ -13,10 +13,6 @@ import { Frame } from "vibe-storybook-components";
 
 # ThemeProvider
 
-<p>
-  <AlphaWarning />
-</p>
-
 This component helps to customize the colors of library's components by overriding a specific css variables with a values provided within <code>themeConfig</code> object.
 There are 2 levels of theming: **system theme** and **product theme**.
 System theme is a one of a 3 predefined themes: <code>light</code>(<code>.light-app-theme</code>), <code>dark</code>(<code>.dark-app-theme</code>) and <code>black</code>(<code>.black-app-theme</code>).
diff --git a/packages/docs/src/pages/components/ThemeProvider/ThemeProvider.stories.tsx b/packages/docs/src/pages/components/ThemeProvider/ThemeProvider.stories.tsx
index 685ac7dbd0..b1194c89b9 100644
--- a/packages/docs/src/pages/components/ThemeProvider/ThemeProvider.stories.tsx
+++ b/packages/docs/src/pages/components/ThemeProvider/ThemeProvider.stories.tsx
@@ -18,7 +18,7 @@ const metaSettings = createStoryMetaSettingsDecorator({
 });
 
 export default {
-  title: "Theming/ThemeProvider [alpha]",
+  title: "Theming/ThemeProvider",
   component: ThemeProvider,
   argTypes: metaSettings.argTypes,
   decorators: metaSettings.decorators
diff --git a/packages/docs/src/pages/components/Tipseen/Tipseen.mdx b/packages/docs/src/pages/components/Tipseen/Tipseen.mdx
index 4845c74384..061d78b6b0 100644
--- a/packages/docs/src/pages/components/Tipseen/Tipseen.mdx
+++ b/packages/docs/src/pages/components/Tipseen/Tipseen.mdx
@@ -3,7 +3,7 @@ import { Link } from "vibe-storybook-components";
 import { Tipseen, TipseenContent, TipseenWizard } from "@vibe/core";
 import { Icon } from "@vibe/icon";
 import { Board, BoardPrivate } from "@vibe/icons";
-import { modifiers, TipCheckYourself, wizardContent } from "./Tipseen.stories.helpers";
+import { TipCheckYourself, wizardContent } from "./Tipseen.stories.helpers";
 import * as TipseenStories from "./Tipseen.stories";
 import do1 from "./assets/do1.png";
 import do2 from "./assets/do2.png";
@@ -23,7 +23,7 @@ Tipseen is a virtual unboxing experience that helps users get started with the s
 ### Import
 
 ```js
-import { Tipseen, TipseenMedia, TipseenImage, TipseenContent, TipseenWizard } from "@vibe/core";
+import { Tipseen, TipseenMedia, TipseenContent, TipseenWizard } from "@vibe/core";
 ```
 
 ## Props
diff --git a/packages/docs/src/pages/components/Tipseen/Tipseen.stories.helpers.tsx b/packages/docs/src/pages/components/Tipseen/Tipseen.stories.helpers.tsx
index aa71f67e6b..8fa1e4acf2 100644
--- a/packages/docs/src/pages/components/Tipseen/Tipseen.stories.helpers.tsx
+++ b/packages/docs/src/pages/components/Tipseen/Tipseen.stories.helpers.tsx
@@ -1,15 +1,6 @@
 import React from "react";
 import { StorybookLink, Tip } from "vibe-storybook-components";
 
-export const modifiers = [
-  {
-    name: "preventOverflow",
-    options: {
-      mainAxis: false
-    }
-  }
-];
-
 export const wizardContent = [
   <div>Message for the user will appear here, to give more information about the feature.</div>,
   <div>Message for the user will appear here, to give more information about the feature.</div>,
@@ -21,11 +12,11 @@ export const wizardContent = [
 export const TipCheckYourself = () => (
   <Tip title="Check yourself">
     If you need to provide additional information about a component, use the{" "}
-    <StorybookLink page="Components/Tooltip" size={StorybookLink.sizes.SMALL}>
+    <StorybookLink page="Components/Tooltip" size="small">
       Tooltip
     </StorybookLink>{" "}
     or{" "}
-    <StorybookLink page="Components/AttentionBox" size={StorybookLink.sizes.SMALL}>
+    <StorybookLink page="Components/AttentionBox" size="small">
       Attention box.
     </StorybookLink>
   </Tip>
diff --git a/packages/docs/src/pages/components/Tipseen/Tipseen.stories.tsx b/packages/docs/src/pages/components/Tipseen/Tipseen.stories.tsx
index dad76e34be..50d1a8c0fb 100644
--- a/packages/docs/src/pages/components/Tipseen/Tipseen.stories.tsx
+++ b/packages/docs/src/pages/components/Tipseen/Tipseen.stories.tsx
@@ -6,14 +6,18 @@ import {
   TipseenContent,
   type TipseenContentProps,
   TipseenWizard,
-  TipseenImage,
   TipseenMedia,
   Flex
 } from "@vibe/core";
+import { shift, flip } from "@floating-ui/react-dom";
 import picture from "./assets/picture.svg";
 import video from "./assets/video.mp4";
 import { createStoryMetaSettingsDecorator } from "../../../utils/createStoryMetaSettingsDecorator";
 
+// Middleware to prevent the tipseen from being displaced when the user scrolls the story.
+// Not needed in real implementations.
+const storyMiddleware = [shift({ mainAxis: false }), flip({ fallbackPlacements: [] })];
+
 const metaSettings = createStoryMetaSettingsDecorator({
   component: Tipseen
 });
@@ -23,7 +27,6 @@ export default {
   component: Tipseen,
   subcomponents: {
     TipseenMedia,
-    TipseenImage,
     TipseenContent,
     TipseenWizard
   },
@@ -34,16 +37,7 @@ export default {
 const tipseenTemplate = ({ title, children, position, ...otherArgs }: TipseenProps & TipseenContentProps) => {
   return (
     <Tipseen
-      // The modifier's purpose is to prevent the tipseen from being displayed when the user scrolls the story upwards / downwards.
-      // Therefore, there is no need to move this prop in your implementations.
-      modifiers={[
-        {
-          name: "preventOverflow",
-          options: {
-            mainAxis: false
-          }
-        }
-      ]}
+      middleware={storyMiddleware}
       position={position}
       content={<TipseenContent title={title}>{children}</TipseenContent>}
       {...otherArgs}
@@ -77,16 +71,7 @@ export const Colors: StoryObj<typeof Tipseen> = {
       <Flex direction="column">
         <Tipseen
           id="colors-tipseen-1"
-          // The modifier's purpose is to prevent the tipseen from being displayed when the user scrolls the story upwards / downwards.
-          // Therefore, there is no need to move this prop in your implementations.
-          modifiers={[
-            {
-              name: "preventOverflow",
-              options: {
-                mainAxis: false
-              }
-            }
-          ]}
+          middleware={storyMiddleware}
           position="right"
           content={
             <TipseenContent id="colors-content-1" title="This is a title">
@@ -98,16 +83,7 @@ export const Colors: StoryObj<typeof Tipseen> = {
         </Tipseen>
         <Tipseen
           id="colors-tipseen-2"
-          // The modifier's purpose is to prevent the tipseen from being displayed when the user scrolls the story upwards / downwards.
-          // Therefore, there is no need to move this prop in your implementations.
-          modifiers={[
-            {
-              name: "preventOverflow",
-              options: {
-                mainAxis: false
-              }
-            }
-          ]}
+          middleware={storyMiddleware}
           position="right"
           color="primary"
           content={
@@ -142,16 +118,7 @@ export const TipseenWithAWizard: StoryObj<typeof Tipseen> = {
 
     return (
       <Tipseen
-        // The modifier's purpose is to prevent the tipseen from being displayed when the user scrolls the story upwards / downwards.
-        // Therefore, there is no need to move this prop in your implementations.
-        modifiers={[
-          {
-            name: "preventOverflow",
-            options: {
-              mainAxis: false
-            }
-          }
-        ]}
+        middleware={storyMiddleware}
         position="right"
         content={
           <TipseenWizard
@@ -183,21 +150,14 @@ export const TipseenWithImage: StoryObj<typeof Tipseen> = {
 
     return (
       <Tipseen
-        // The modifier's purpose is to prevent the tipseen from being displayed when the user scrolls the story upwards / downwards.
-        // Therefore, there is no need to move this prop in your implementations.
+        middleware={storyMiddleware}
         position="right"
-        modifiers={[
-          {
-            name: "preventOverflow",
-            options: {
-              mainAxis: false
-            }
-          }
-        ]}
         closeButtonTheme="light"
         content={
           <>
-            <TipseenImage src={picture} />
+            <TipseenMedia>
+              <img src={picture} alt="" style={{ objectFit: "cover", width: "100%" }} />
+            </TipseenMedia>
             <TipseenWizard title="This is a title" steps={content} activeStepIndex={2} />
           </>
         }
@@ -221,17 +181,8 @@ export const TipseenWithCustomMedia: StoryObj<typeof Tipseen> = {
   render: () => {
     return (
       <Tipseen
+        middleware={storyMiddleware}
         position="right"
-        // The modifier's purpose is to prevent the tipseen from being displayed when the user scrolls the story upwards / downwards.
-        // Therefore, there is no need to move this prop in your implementations.
-        modifiers={[
-          {
-            name: "preventOverflow",
-            options: {
-              mainAxis: false
-            }
-          }
-        ]}
         closeButtonTheme="dark"
         content={
           <>
@@ -275,7 +226,9 @@ export const FloatingTipseen: StoryObj<typeof Tipseen> = {
         floating
         content={
           <>
-            <TipseenImage src={picture} />
+            <TipseenMedia>
+              <img src={picture} alt="" style={{ objectFit: "cover", width: "100%" }} />
+            </TipseenMedia>
             <TipseenContent title="This is a Floating Tipseen">
               Message for the user will appear here, to give more information about the feature.
             </TipseenContent>
diff --git a/packages/docs/src/pages/components/Toast/Toast.stories.helpers.tsx b/packages/docs/src/pages/components/Toast/Toast.stories.helpers.tsx
index 62a1337e88..e66f6d6c97 100644
--- a/packages/docs/src/pages/components/Toast/Toast.stories.helpers.tsx
+++ b/packages/docs/src/pages/components/Toast/Toast.stories.helpers.tsx
@@ -4,7 +4,7 @@ import { StorybookLink, Tip } from "vibe-storybook-components";
 export const TipAlertBanner = () => (
   <Tip title="Check yourself">
     Need to inform the user about a system’s action? Use an{" "}
-    <StorybookLink page="Components/AlertBanner" size={StorybookLink.sizes.SMALL}>
+    <StorybookLink page="Components/AlertBanner" size="small">
       AlertBanner
     </StorybookLink>{" "}
     instead.
diff --git a/packages/docs/src/pages/components/Toast/Toast.stories.tsx b/packages/docs/src/pages/components/Toast/Toast.stories.tsx
index fab28ecedc..8560497f63 100644
--- a/packages/docs/src/pages/components/Toast/Toast.stories.tsx
+++ b/packages/docs/src/pages/components/Toast/Toast.stories.tsx
@@ -179,17 +179,17 @@ export const Animation = {
       <Flex gap="medium">
         <Button
           id="animation-success-button"
-          ariaLabel="Trigger success toast"
+          aria-label="Trigger success toast"
           onClick={onSuccessClick}
-          kind={Button.kinds.SECONDARY}
+          kind="secondary"
         >
           Success action
         </Button>
         <Button
           id="animation-failure-button"
-          ariaLabel="Trigger failure toast"
+          aria-label="Trigger failure toast"
           onClick={onFailureClick}
-          kind={Button.kinds.SECONDARY}
+          kind="secondary"
         >
           Failure action
         </Button>
diff --git a/packages/docs/src/pages/components/Toggle/Toggle.stories.helpers.tsx b/packages/docs/src/pages/components/Toggle/Toggle.stories.helpers.tsx
index deb9c35edd..311e178dad 100644
--- a/packages/docs/src/pages/components/Toggle/Toggle.stories.helpers.tsx
+++ b/packages/docs/src/pages/components/Toggle/Toggle.stories.helpers.tsx
@@ -4,11 +4,11 @@ import { StorybookLink, Tip } from "vibe-storybook-components";
 export const TipOtherComponents = () => (
   <Tip>
     If the user needs to choose an item from a set of options, use{" "}
-    <StorybookLink page="Components/RadioButton" size={StorybookLink.sizes.SMALL}>
+    <StorybookLink page="Components/RadioButton" size="small">
       Radio button
     </StorybookLink>{" "}
     or{" "}
-    <StorybookLink page="Components/Checkbox" size={StorybookLink.sizes.SMALL}>
+    <StorybookLink page="Components/Checkbox" size="small">
       Checkboxes
     </StorybookLink>{" "}
     instead.
diff --git a/packages/docs/src/pages/components/Toggle/Toggle.stories.tsx b/packages/docs/src/pages/components/Toggle/Toggle.stories.tsx
index c2acf09d31..a162c126e0 100644
--- a/packages/docs/src/pages/components/Toggle/Toggle.stories.tsx
+++ b/packages/docs/src/pages/components/Toggle/Toggle.stories.tsx
@@ -24,7 +24,7 @@ export const Overview: Story = {
   render: toggleTemplate.bind({}),
   args: {
     id: "overview-toggle",
-    ariaLabel: "Toggle option"
+    "aria-label": "Toggle option"
   },
   parameters: {
     docs: {
@@ -38,8 +38,8 @@ export const Overview: Story = {
 export const States: Story = {
   render: () => (
     <Flex direction="column" gap="medium">
-      <Toggle id="states-off" ariaLabel="Toggle off state" isDefaultSelected={false} />
-      <Toggle id="states-on" ariaLabel="Toggle on state" />
+      <Toggle id="states-off" aria-label="Toggle off state" isDefaultSelected={false} />
+      <Toggle id="states-on" aria-label="Toggle on state" />
     </Flex>
   ),
   parameters: {
@@ -54,8 +54,8 @@ export const States: Story = {
 export const Size: Story = {
   render: () => (
     <Flex gap="large">
-      <Toggle id="size-medium" ariaLabel="Medium toggle" size="medium" />
-      <Toggle id="size-small" ariaLabel="Small toggle" size="small" />
+      <Toggle id="size-medium" aria-label="Medium toggle" size="medium" />
+      <Toggle id="size-small" aria-label="Small toggle" size="small" />
     </Flex>
   ),
   parameters: {
@@ -70,8 +70,8 @@ export const Size: Story = {
 export const Disabled: Story = {
   render: () => (
     <Flex direction="column" gap="large">
-      <Toggle id="disabled-off" ariaLabel="Disabled toggle off" isDefaultSelected={false} disabled />
-      <Toggle id="disabled-on" ariaLabel="Disabled toggle on" disabled />
+      <Toggle id="disabled-off" aria-label="Disabled toggle off" isDefaultSelected={false} disabled />
+      <Toggle id="disabled-on" aria-label="Disabled toggle on" disabled />
     </Flex>
   ),
   parameters: {
@@ -87,7 +87,7 @@ export const TurnOnOffAnAutomation: Story = {
   render: () => (
     <Flex gap="medium">
       <Text id="automation-label">Board automations</Text>
-      <Toggle id="automation-toggle" ariaLabel="Toggle board automations" />
+      <Toggle id="automation-toggle" aria-label="Toggle board automations" />
     </Flex>
   ),
   name: "Turn on/ off an automation"
diff --git a/packages/docs/src/pages/components/Tooltip/Tooltip.mdx b/packages/docs/src/pages/components/Tooltip/Tooltip.mdx
index e31c97137b..402f6384d4 100644
--- a/packages/docs/src/pages/components/Tooltip/Tooltip.mdx
+++ b/packages/docs/src/pages/components/Tooltip/Tooltip.mdx
@@ -2,7 +2,7 @@ import { Tooltip, Icon, Button, TabList, Tab, Link, IconButton } from "@vibe/cor
 import { Canvas, Meta } from "@storybook/blocks";
 import { Bolt } from "@vibe/icons";
 import * as TooltipStories from "./Tooltip.stories";
-import { TipOtherComponents, modifiers } from "./Tooltip.stories.helpers";
+import { TipOtherComponents } from "./Tooltip.stories.helpers";
 import image from "./assets/tooltip-image.png";
 
 <Meta of={TooltipStories} />
@@ -89,7 +89,7 @@ Tooltip's arrow can appear from top, bottom, left or right.
     {
       positive: {
         component: (
-          <Tooltip shouldShowOnMount content="Quick search + B" modifiers={modifiers}>
+          <Tooltip shouldShowOnMount content="Quick search + B">
             <IconButton kind="secondary" icon={Bolt} iconSize="32" />
           </Tooltip>
         ),
@@ -97,7 +97,7 @@ Tooltip's arrow can appear from top, bottom, left or right.
       },
       negative: {
         component: (
-          <Tooltip shouldShowOnMount content="Quick search + B" modifiers={modifiers}>
+          <Tooltip shouldShowOnMount content="Quick search + B">
             <Button>Quick search</Button>
           </Tooltip>
         ),
@@ -117,7 +117,7 @@ Tooltip's arrow can appear from top, bottom, left or right.
       negative: {
         component: (
           <TabList>
-            <Tooltip shouldShowOnMount content="Boards" position="bottom" modifiers={modifiers}>
+            <Tooltip shouldShowOnMount content="Boards" position="bottom">
               <Tab>Boards</Tab>
             </Tooltip>
             <Tab>Items</Tab>
@@ -132,7 +132,6 @@ Tooltip's arrow can appear from top, bottom, left or right.
           <Tooltip
             shouldShowOnMount
             title="I'm a rich tooltip"
-            modifiers={modifiers}
             open
             content={
               <div>
@@ -150,7 +149,6 @@ Tooltip's arrow can appear from top, bottom, left or right.
           <Tooltip
             shouldShowOnMount
             title="I'm a rich tooltip"
-            modifiers={modifiers}
             open
             content={
               <div>
@@ -172,7 +170,6 @@ Tooltip's arrow can appear from top, bottom, left or right.
             shouldShowOnMount
             image={image}
             position="right"
-            modifiers={modifiers}
             open
           >
             <div style={{ position: "relative", left: "-25%" }} />
@@ -187,7 +184,6 @@ Tooltip's arrow can appear from top, bottom, left or right.
             shouldShowOnMount
             image={image}
             position="right"
-            modifiers={modifiers}
             open
           >
             <div style={{ position: "relative", left: "-25%" }} />
diff --git a/packages/docs/src/pages/components/Tooltip/Tooltip.stories.helpers.tsx b/packages/docs/src/pages/components/Tooltip/Tooltip.stories.helpers.tsx
index 4639c02e4f..6b7d93540f 100644
--- a/packages/docs/src/pages/components/Tooltip/Tooltip.stories.helpers.tsx
+++ b/packages/docs/src/pages/components/Tooltip/Tooltip.stories.helpers.tsx
@@ -1,31 +1,15 @@
 import React from "react";
 import { StorybookLink, Tip } from "vibe-storybook-components";
 
-export const modifiers = [
-  {
-    name: "preventOverflow",
-    options: {
-      mainAxis: false
-    }
-  },
-  {
-    name: "flip",
-    options: {
-      // @ts-ignore
-      fallbackPlacements: []
-    }
-  }
-];
-
 export const TipOtherComponents = () => (
   <Tip>
     As tooltips only surface from a hover, never include links or buttons in the copy. If your tooltip requires either
     of these, considers putting your content in a{" "}
-    <StorybookLink page="Components/AttentionBox" size={StorybookLink.sizes.SMALL}>
+    <StorybookLink page="Components/AttentionBox" size="small">
       Attention box
     </StorybookLink>{" "}
     or{" "}
-    <StorybookLink page="Components/Dialog" size={StorybookLink.sizes.SMALL}>
+    <StorybookLink page="Components/Dialog" size="small">
       Dialog.
     </StorybookLink>
   </Tip>
diff --git a/packages/docs/src/pages/components/Tooltip/Tooltip.stories.tsx b/packages/docs/src/pages/components/Tooltip/Tooltip.stories.tsx
index f0ca296bb4..cf6aff5917 100644
--- a/packages/docs/src/pages/components/Tooltip/Tooltip.stories.tsx
+++ b/packages/docs/src/pages/components/Tooltip/Tooltip.stories.tsx
@@ -1,10 +1,14 @@
 import React from "react";
 import { Tooltip, type TooltipProps, Button, Flex, IconButton } from "@vibe/core";
 import { Hide, Menu, Subitems } from "@vibe/icons";
-import { modifiers } from "./Tooltip.stories.helpers";
+import { shift, flip } from "@floating-ui/react-dom";
 import image from "./assets/tooltip-image.png";
 import { createStoryMetaSettingsDecorator } from "../../../utils/createStoryMetaSettingsDecorator";
 
+// Middleware to prevent the tooltip from being displaced when the user scrolls the story.
+// Not needed in real implementations.
+const storyMiddleware = [shift({ mainAxis: false }), flip({ fallbackPlacements: [] })];
+
 const metaSettings = createStoryMetaSettingsDecorator({
   component: Tooltip,
   iconPropNamesArray: ["icon"]
@@ -24,24 +28,8 @@ export const Overview = {
         id="overview-tooltip"
         {...args}
         open
+        middleware={storyMiddleware}
         hideWhenReferenceHidden
-        // The modifier's purpose is to prevent the tooltip from being displayed when the user scrolls the story upwards / downwards.
-        // Therefore, there is no need to move this prop in your implementations.
-        modifiers={[
-          {
-            name: "preventOverflow",
-            options: {
-              mainAxis: false
-            }
-          },
-          {
-            name: "flip",
-            options: {
-              // @ts-ignore
-              fallbackPlacements: []
-            }
-          }
-        ]}
       >
         <div id="overview-tooltip-trigger" />
       </Tooltip>
@@ -67,24 +55,8 @@ export const TooltipWithTitle = () => (
       title="Tooltip title"
       shouldShowOnMount
       position="right"
+      middleware={storyMiddleware}
       hideWhenReferenceHidden
-      // The modifier's purpose is to prevent the tooltip from being displayed when the user scrolls the story upwards / downwards.
-      // Therefore, there is no need to move this prop in your implementations.
-      modifiers={[
-        {
-          name: "preventOverflow",
-          options: {
-            mainAxis: false
-          }
-        },
-        {
-          name: "flip",
-          options: {
-            // @ts-ignore
-            fallbackPlacements: []
-          }
-        }
-      ]}
       open
     >
       <div id="tooltip-with-title-trigger" />
@@ -101,8 +73,8 @@ export const TooltipWithImage = () => (
       shouldShowOnMount
       image={image}
       position="right"
+      middleware={storyMiddleware}
       hideWhenReferenceHidden
-      modifiers={modifiers}
       style={{ minHeight: "135px" }}
       open
     >
@@ -113,33 +85,13 @@ export const TooltipWithImage = () => (
 
 export const Positions = {
   render: () => {
-    // The modifier's purpose is to prevent the tooltip from being displayed when the user scrolls the story upwards / downwards.
-    // Therefore, there is no need to move this prop in your implementations.
-    const modifiers = [
-      {
-        name: "preventOverflow",
-        options: {
-          mainAxis: false
-        }
-      },
-      {
-        name: "flip",
-        options: {
-          // @ts-ignore
-          fallbackPlacements: []
-        }
-      }
-    ];
-
     return (
       <Flex gap={16}>
         <div style={{ padding: "0 64px 68px 0", margin: "0 32px" }}>
-          {/* The modifier's purpose is to prevent the tipseen from being displayed when the user scrolls the story upwards / downwards.
-         Therefore, there is no need to move this prop in your implementations. */}
           <Tooltip
             id="position-top-tooltip"
+            middleware={storyMiddleware}
             hideWhenReferenceHidden
-            modifiers={modifiers}
             content="Top"
             shouldShowOnMount
             position="bottom"
@@ -151,8 +103,8 @@ export const Positions = {
         <div style={{ padding: "50px 0 0 0", margin: "0 32px" }}>
           <Tooltip
             id="position-bottom-tooltip"
+            middleware={storyMiddleware}
             hideWhenReferenceHidden
-            modifiers={modifiers}
             content="Bottom"
             shouldShowOnMount
             open
@@ -163,8 +115,8 @@ export const Positions = {
         <div style={{ padding: "0 32px 8px 32px", margin: "0 32px" }}>
           <Tooltip
             id="position-left-tooltip"
+            middleware={storyMiddleware}
             hideWhenReferenceHidden
-            modifiers={modifiers}
             content="Left"
             position="right"
             shouldShowOnMount
@@ -176,8 +128,8 @@ export const Positions = {
         <div style={{ padding: "0 64px 8px 64px", margin: "0 64px" }}>
           <Tooltip
             id="position-right-tooltip"
+            middleware={storyMiddleware}
             hideWhenReferenceHidden
-            modifiers={modifiers}
             content="Right"
             position="left"
             shouldShowOnMount
@@ -199,13 +151,13 @@ export const Positions = {
 
 export const IconTooltip = () => (
   <Tooltip id="icon-tooltip" hideWhenReferenceHidden content="Hidden columns">
-    <IconButton id="icon-tooltip-trigger" ariaLabel="Hide columns" kind="secondary" size="small" icon={Hide} />
+    <IconButton id="icon-tooltip-trigger" aria-label="Hide columns" kind="secondary" size="small" icon={Hide} />
   </Tooltip>
 );
 
 export const DefinitionTooltip = () => (
   <Tooltip id="definition-tooltip" hideWhenReferenceHidden content="Item name: Bottom sheets">
-    <Button id="definition-tooltip-trigger" ariaLabel="View subitems" kind="secondary" size="small" leftIcon={Subitems}>
+    <Button id="definition-tooltip-trigger" aria-label="View subitems" kind="secondary" size="small" leftIcon={Subitems}>
       Subitem
     </Button>
   </Tooltip>
@@ -214,13 +166,13 @@ export const DefinitionTooltip = () => (
 export const ImmediateTooltips = () => (
   <Flex gap="small">
     <Tooltip id="immediate-tooltip-1" hideWhenReferenceHidden immediateShowDelay={0} content="I'm a tooltip">
-      <IconButton id="immediate-trigger-1" ariaLabel="Menu button 1" icon={Menu} kind="secondary" size="small" />
+      <IconButton id="immediate-trigger-1" aria-label="Menu button 1" icon={Menu} kind="secondary" size="small" />
     </Tooltip>
     <Tooltip id="immediate-tooltip-2" hideWhenReferenceHidden immediateShowDelay={0} content="I'm a tooltip">
-      <IconButton id="immediate-trigger-2" ariaLabel="Menu button 2" icon={Menu} kind="secondary" size="small" />
+      <IconButton id="immediate-trigger-2" aria-label="Menu button 2" icon={Menu} kind="secondary" size="small" />
     </Tooltip>
     <Tooltip id="immediate-tooltip-3" hideWhenReferenceHidden content="I'm a tooltip">
-      <IconButton id="immediate-trigger-3" ariaLabel="Menu button 3" icon={Menu} kind="secondary" size="small" />
+      <IconButton id="immediate-trigger-3" aria-label="Menu button 3" icon={Menu} kind="secondary" size="small" />
     </Tooltip>
   </Flex>
 );
diff --git a/packages/docs/src/pages/components/VirtualizedGrid/VirtualizedGrid.stories.helpers.tsx b/packages/docs/src/pages/components/VirtualizedGrid/VirtualizedGrid.stories.helpers.tsx
index 4f21f4fdd8..8f153085b7 100644
--- a/packages/docs/src/pages/components/VirtualizedGrid/VirtualizedGrid.stories.helpers.tsx
+++ b/packages/docs/src/pages/components/VirtualizedGrid/VirtualizedGrid.stories.helpers.tsx
@@ -15,7 +15,7 @@ export const itemRenderer = (item: VirtualizedGridItemType, index: number, style
     return (
       <div key={index} style={style}>
         <Text
-          color={Text.colors.FIXED_DARK}
+          color="fixedDark"
           style={{
             backgroundColor,
             height: item.height,
diff --git a/packages/docs/src/pages/foundations/accessibility/accessibility.stories.helpers.tsx b/packages/docs/src/pages/foundations/accessibility/accessibility.stories.helpers.tsx
index 7b0b07ff0f..1cca74df2b 100644
--- a/packages/docs/src/pages/foundations/accessibility/accessibility.stories.helpers.tsx
+++ b/packages/docs/src/pages/foundations/accessibility/accessibility.stories.helpers.tsx
@@ -4,7 +4,7 @@ import { accessibilityCheckList } from "./assets";
 
 export const TipChecklistLink = () => (
   <Tip title="Get our Accessibility checklist">
-    <Link href={accessibilityCheckList} size={Link.sizes.SMALL}>
+    <Link href={accessibilityCheckList} size="small">
       Download
     </Link>
     our accessibility checklist file.
@@ -15,7 +15,7 @@ export const TipColorContrast = () => (
   <Tip title="Use color contrast tools for code and design">
     <div>
       To check color contrast in design use
-      <Link href="https://www.figma.com/community/plugin/748533339900865323/Contrast" size={Link.sizes.SMALL}>
+      <Link href="https://www.figma.com/community/plugin/748533339900865323/Contrast" size="small">
         contrast figma plugin
       </Link>
       and inspect elements accessibility tab for live code verification
diff --git a/packages/docs/src/pages/foundations/accessibility/principles/principlesAccesability.scss b/packages/docs/src/pages/foundations/accessibility/principles/principlesAccesability.scss
index bc0f0d3e89..a30b9a7b27 100644
--- a/packages/docs/src/pages/foundations/accessibility/principles/principlesAccesability.scss
+++ b/packages/docs/src/pages/foundations/accessibility/principles/principlesAccesability.scss
@@ -1,4 +1,4 @@
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 
 $principles-cell-min-width: $grid-auto-fit-cell-width-medium;
 $principles-column-gap: var(--sb-spacing-large);
diff --git a/packages/docs/src/pages/foundations/motion/animation-overviews/animation-overviews.module.scss b/packages/docs/src/pages/foundations/motion/animation-overviews/animation-overviews.module.scss
index db769bccdb..ac02153f59 100644
--- a/packages/docs/src/pages/foundations/motion/animation-overviews/animation-overviews.module.scss
+++ b/packages/docs/src/pages/foundations/motion/animation-overviews/animation-overviews.module.scss
@@ -1,4 +1,4 @@
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 
 $animation-overview-grid-gap: 64px;
 $animation-overview-cell-min-width: $grid-auto-fit-cell-width-large;
diff --git a/packages/docs/src/pages/foundations/motion/animation-types/animation-types.module.scss b/packages/docs/src/pages/foundations/motion/animation-types/animation-types.module.scss
index 2e75c138b0..bd179f8e50 100644
--- a/packages/docs/src/pages/foundations/motion/animation-types/animation-types.module.scss
+++ b/packages/docs/src/pages/foundations/motion/animation-types/animation-types.module.scss
@@ -1,4 +1,4 @@
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 
 $animation-types-grid-gap: 64px;
 $animation-types-cell-min-width: $grid-auto-fit-cell-width-medium;
diff --git a/packages/docs/src/pages/foundations/motion/duration-expressive-tokens/duaration-expressive-tokens.module.scss b/packages/docs/src/pages/foundations/motion/duration-expressive-tokens/duaration-expressive-tokens.module.scss
index 4bd7b73267..39bcd7c216 100644
--- a/packages/docs/src/pages/foundations/motion/duration-expressive-tokens/duaration-expressive-tokens.module.scss
+++ b/packages/docs/src/pages/foundations/motion/duration-expressive-tokens/duaration-expressive-tokens.module.scss
@@ -1,4 +1,4 @@
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 
 $duration-grid-column-gap: var(--sb-spacing-large);
 $duration-cell-min-width: $grid-auto-fit-cell-width-medium;
diff --git a/packages/docs/src/pages/foundations/motion/duration-productive-tokens/duaration-productive-tokens.module.scss b/packages/docs/src/pages/foundations/motion/duration-productive-tokens/duaration-productive-tokens.module.scss
index 4bd7b73267..39bcd7c216 100644
--- a/packages/docs/src/pages/foundations/motion/duration-productive-tokens/duaration-productive-tokens.module.scss
+++ b/packages/docs/src/pages/foundations/motion/duration-productive-tokens/duaration-productive-tokens.module.scss
@@ -1,4 +1,4 @@
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 
 $duration-grid-column-gap: var(--sb-spacing-large);
 $duration-cell-min-width: $grid-auto-fit-cell-width-medium;
diff --git a/packages/docs/src/pages/foundations/round-corners/corners-settings/corner-settings.scss b/packages/docs/src/pages/foundations/round-corners/corners-settings/corner-settings.scss
index 14d1c60531..9f6c0ad239 100644
--- a/packages/docs/src/pages/foundations/round-corners/corners-settings/corner-settings.scss
+++ b/packages/docs/src/pages/foundations/round-corners/corners-settings/corner-settings.scss
@@ -1,4 +1,4 @@
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 
 .global-settings-general-component {
   margin-top: var(--sb-spacing-between-section-items);
diff --git a/packages/docs/src/pages/foundations/round-corners/rounded-corner/rounded-corner.module.scss b/packages/docs/src/pages/foundations/round-corners/rounded-corner/rounded-corner.module.scss
index 6dcd5c5bb0..f95fcad50a 100644
--- a/packages/docs/src/pages/foundations/round-corners/rounded-corner/rounded-corner.module.scss
+++ b/packages/docs/src/pages/foundations/round-corners/rounded-corner/rounded-corner.module.scss
@@ -1,4 +1,4 @@
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 
 .rounded-corner-component {
   @include vibe-text(text1, bold);
diff --git a/packages/docs/src/pages/foundations/shadow/shadow-levels/shadow-levels.scss b/packages/docs/src/pages/foundations/shadow/shadow-levels/shadow-levels.scss
index 16cfa99483..12840a85d3 100644
--- a/packages/docs/src/pages/foundations/shadow/shadow-levels/shadow-levels.scss
+++ b/packages/docs/src/pages/foundations/shadow/shadow-levels/shadow-levels.scss
@@ -1,4 +1,4 @@
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 
 $shadow-level-grid-column-gap: var(--sb-spacing-large);
 $shadow-level-grid-row-gap: var(--sb-spacing-xl);
diff --git a/packages/docs/src/pages/foundations/typography/examples-table/example-table.module.scss b/packages/docs/src/pages/foundations/typography/examples-table/example-table.module.scss
index a281008c61..a8f89636c0 100644
--- a/packages/docs/src/pages/foundations/typography/examples-table/example-table.module.scss
+++ b/packages/docs/src/pages/foundations/typography/examples-table/example-table.module.scss
@@ -1,7 +1,7 @@
 .table {
   $border: 1px solid var(--sb-layout-border-color);
   width: 100%;
-  margin-block: var(--spacing-medium) var(--spacing-xl);
+  margin-block: var(--space-16) var(--space-32);
   border-inline: $border;
   border-block-start: $border;
   border-spacing: 0;
@@ -9,7 +9,7 @@
   th,
   td {
     text-align: start !important;
-    padding: var(--spacing-small) var(--spacing-medium);
+    padding: var(--space-8) var(--space-16);
     height: 40px;
     border-bottom: $border;
     &:not(:last-child) {
diff --git a/packages/docs/src/pages/foundations/typography/typograpghy.stories.helpers.tsx b/packages/docs/src/pages/foundations/typography/typograpghy.stories.helpers.tsx
index 26c053e2f5..c2e786e3f7 100644
--- a/packages/docs/src/pages/foundations/typography/typograpghy.stories.helpers.tsx
+++ b/packages/docs/src/pages/foundations/typography/typograpghy.stories.helpers.tsx
@@ -4,11 +4,11 @@ import { Link, Tip } from "vibe-storybook-components";
 export const TipHowToUseFonts = () => (
   <Tip title="How to use the fonts?">
     Figtree and Poppins are both Google Fonts. Click
-    <Link size={Link.sizes.SMALL} href="https://fonts.google.com/specimen/Figtree">
+    <Link size="small" href="https://fonts.google.com/specimen/Figtree">
       here
     </Link>
     to download Figtree, and click
-    <Link size={Link.sizes.SMALL} href="https://fonts.google.com/specimen/Poppins">
+    <Link size="small" href="https://fonts.google.com/specimen/Poppins">
       here
     </Link>
     to download Poppins.
diff --git a/packages/docs/src/pages/hooks/useActiveDescendantListFocus/useActiveDescendantListFocus.module.scss b/packages/docs/src/pages/hooks/useActiveDescendantListFocus/useActiveDescendantListFocus.module.scss
index 192ce31e9c..da90cc37cf 100644
--- a/packages/docs/src/pages/hooks/useActiveDescendantListFocus/useActiveDescendantListFocus.module.scss
+++ b/packages/docs/src/pages/hooks/useActiveDescendantListFocus/useActiveDescendantListFocus.module.scss
@@ -1,4 +1,4 @@
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 
 .visualFocus {
   @include focus-style-css;
diff --git a/packages/docs/src/pages/hooks/useClickableProps/useClickableProps.mdx b/packages/docs/src/pages/hooks/useClickableProps/useClickableProps.mdx
index 78db1c7eed..51eddd8b5c 100644
--- a/packages/docs/src/pages/hooks/useClickableProps/useClickableProps.mdx
+++ b/packages/docs/src/pages/hooks/useClickableProps/useClickableProps.mdx
@@ -49,7 +49,7 @@ import { useClickableProps } from "@vibe/core";
     description={
       <>
         Provide semantic meaning to content.
-        <Link size={Link.sizes.SMALL} href={"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles"}>
+        <Link size="small" href={"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles"}>
           More details.
         </Link>
       </>
@@ -62,7 +62,7 @@ import { useClickableProps } from "@vibe/core";
       <>
         Specifies the tab order of the element. Default value is 0.
         <Link
-          size={Link.sizes.SMALL}
+          size="small"
           href={"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex"}
         >
           More details.
@@ -71,13 +71,13 @@ import { useClickableProps } from "@vibe/core";
     }
   />
   <FunctionArgument
-    name="ariaLabel"
+    name="aria-label"
     type="string"
     description={
       <>
         Defines a string value that labels an interactive element for assistive technologies.
         <Link
-          size={Link.sizes.SMALL}
+          size="small"
           href={"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label"}
         >
           More details.
@@ -86,13 +86,13 @@ import { useClickableProps } from "@vibe/core";
     }
   />
   <FunctionArgument
-    name="ariaHidden"
+    name="aria-hidden"
     type="boolean"
     description={
       <>
         HTML attribute for hiding content from screen readers and other assistive technologies.
         <Link
-          size={Link.sizes.SMALL}
+          size="small"
           href={"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden"}
         >
           More details.
@@ -101,14 +101,14 @@ import { useClickableProps } from "@vibe/core";
     }
   />
   <FunctionArgument
-    name="ariaHasPopup"
+    name="aria-haspopup"
     type="boolean"
     description={
       <>
         Indicates the availability and type of interactive popup element that can be triggered by the element on which
         the attribute is set.
         <Link
-          size={Link.sizes.SMALL}
+          size="small"
           href={"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup"}
         >
           More details.
@@ -117,13 +117,13 @@ import { useClickableProps } from "@vibe/core";
     }
   />
   <FunctionArgument
-    name="ariaExpanded"
+    name="aria-expanded"
     type="boolean"
     description={
       <>
         Indicate if a control is expanded or collapsed, and whether or not its child elements are displayed or hidden.
         <Link
-          size={Link.sizes.SMALL}
+          size="small"
           href={"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded"}
         >
           More details.
@@ -142,7 +142,7 @@ import { useClickableProps } from "@vibe/core";
     description={
       <>
         A React
-        <Link size={Link.sizes.SMALL} href="https://react.dev/reference/react/useRef">
+        <Link size="small" href="https://react.dev/reference/react/useRef">
           ref
         </Link>
         object for the clickable element.
@@ -168,7 +168,7 @@ import { useClickableProps } from "@vibe/core";
     description={
       <>
         Provide semantic meaning to content.
-        <Link size={Link.sizes.SMALL} href={"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles"}>
+        <Link size="small" href={"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles"}>
           More details.
         </Link>
       </>
@@ -181,7 +181,7 @@ import { useClickableProps } from "@vibe/core";
       <>
         Specifies the tab order of an element.
         <Link
-          size={Link.sizes.SMALL}
+          size="small"
           href={"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex"}
         >
           More details.
@@ -196,7 +196,7 @@ import { useClickableProps } from "@vibe/core";
       <>
         Defines a string value that labels an interactive element.
         <Link
-          size={Link.sizes.SMALL}
+          size="small"
           href={"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label"}
         >
           More details.
@@ -211,7 +211,7 @@ import { useClickableProps } from "@vibe/core";
       <>
         Used to hide non-interactive content from the accessibility API.
         <Link
-          size={Link.sizes.SMALL}
+          size="small"
           href={"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden"}
         >
           More details.
@@ -227,7 +227,7 @@ import { useClickableProps } from "@vibe/core";
         Indicates the availability and type of interactive popup element that can be triggered by the element on which
         the attribute is set.
         <Link
-          size={Link.sizes.SMALL}
+          size="small"
           href={"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup"}
         >
           More details.
@@ -242,7 +242,7 @@ import { useClickableProps } from "@vibe/core";
       <>
         Indicate if a control is expanded or collapsed, and whether or not its child elements are displayed or hidden.
         <Link
-          size={Link.sizes.SMALL}
+          size="small"
           href={"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded"}
         >
           More details.
diff --git a/packages/docs/src/pages/hooks/useClickableProps/useClickableProps.stories.helpers.tsx b/packages/docs/src/pages/hooks/useClickableProps/useClickableProps.stories.helpers.tsx
index 64811aa529..24de6f6ec0 100644
--- a/packages/docs/src/pages/hooks/useClickableProps/useClickableProps.stories.helpers.tsx
+++ b/packages/docs/src/pages/hooks/useClickableProps/useClickableProps.stories.helpers.tsx
@@ -4,7 +4,7 @@ import { StorybookLink, Tip } from "vibe-storybook-components";
 export const TipClickable = () => (
   <Tip title="Check out our component solution for this use case">
     For more simple use cases, you also can use our{" "}
-    <StorybookLink size={StorybookLink.sizes.SMALL} page="Accessibility/Clickable">
+    <StorybookLink size="small" page="Accessibility/Clickable">
       Clickable
     </StorybookLink>{" "}
     component wrapper.
diff --git a/packages/docs/src/pages/hooks/useClickableProps/useClickableProps.stories.scss b/packages/docs/src/pages/hooks/useClickableProps/useClickableProps.stories.scss
index d891765418..49e752587d 100644
--- a/packages/docs/src/pages/hooks/useClickableProps/useClickableProps.stories.scss
+++ b/packages/docs/src/pages/hooks/useClickableProps/useClickableProps.stories.scss
@@ -1,4 +1,4 @@
-@import "~monday-ui-style/dist/mixins";
+@import "~@vibe/style/dist/mixins";
 
 .monday-storybook-use-clickable-props {
   @include focus-style;
diff --git a/packages/docs/src/pages/hooks/useClickableProps/useClickableProps.stories.tsx b/packages/docs/src/pages/hooks/useClickableProps/useClickableProps.stories.tsx
index 856a4a06d7..c07f109c84 100644
--- a/packages/docs/src/pages/hooks/useClickableProps/useClickableProps.stories.tsx
+++ b/packages/docs/src/pages/hooks/useClickableProps/useClickableProps.stories.tsx
@@ -15,9 +15,9 @@ export const Overview = {
       {
         onClick: onClick,
         id: "clickable-id",
-        ariaHidden: false,
-        ariaHasPopup: false,
-        ariaExpanded: false
+        "aria-hidden": false,
+        "aria-haspopup": false,
+        "aria-expanded": false
       },
       ref
     );
diff --git a/packages/docs/src/pages/hooks/useHover/useHover.mdx b/packages/docs/src/pages/hooks/useHover/useHover.mdx
index 6620a1de77..56175f624a 100644
--- a/packages/docs/src/pages/hooks/useHover/useHover.mdx
+++ b/packages/docs/src/pages/hooks/useHover/useHover.mdx
@@ -34,7 +34,7 @@ import { useHover } from "@vibe/core";
     description={
       <>
         A React
-        <Link size={Link.sizes.MEDIUM} href="https://react.dev/reference/react/useRef">
+        <Link size="medium" href="https://react.dev/reference/react/useRef">
           ref
         </Link>
         object to assign to the element which hover state needs to be tracked.
diff --git a/packages/docs/src/pages/hooks/useIsOverflowing/useIsOverflowing.mdx b/packages/docs/src/pages/hooks/useIsOverflowing/useIsOverflowing.mdx
index f9a8686362..4aabdabb28 100644
--- a/packages/docs/src/pages/hooks/useIsOverflowing/useIsOverflowing.mdx
+++ b/packages/docs/src/pages/hooks/useIsOverflowing/useIsOverflowing.mdx
@@ -32,7 +32,7 @@ import { useIsOverflowing } from "@vibe/core";
     description={
       <>
         A React
-        <Link size={Link.sizes.MEDIUM} href="https://react.dev/reference/react/useRef">
+        <Link size="medium" href="https://react.dev/reference/react/useRef">
           ref
         </Link>
         object for the container of likely to overflow content.
diff --git a/packages/docs/src/pages/hooks/useIsOverflowing/useIsOverflowing.stories.helpers.tsx b/packages/docs/src/pages/hooks/useIsOverflowing/useIsOverflowing.stories.helpers.tsx
index d9d5276f07..2e1e856c76 100644
--- a/packages/docs/src/pages/hooks/useIsOverflowing/useIsOverflowing.stories.helpers.tsx
+++ b/packages/docs/src/pages/hooks/useIsOverflowing/useIsOverflowing.stories.helpers.tsx
@@ -4,7 +4,7 @@ import { StorybookLink, Tip } from "vibe-storybook-components";
 export const TipTooltip = () => (
   <Tip title={"What to do when overflow is detected?"}>
     You might want to use{" "}
-    <StorybookLink size={StorybookLink.sizes.SMALL} page="Components/Tooltip">
+    <StorybookLink size="small" page="Components/Tooltip">
       Tooltip
     </StorybookLink>{" "}
     to display all the content.
diff --git a/packages/docs/src/pages/hooks/useKeyEvent/useKeyEvent.stories.tsx b/packages/docs/src/pages/hooks/useKeyEvent/useKeyEvent.stories.tsx
index 5ee6ace652..9aed5a7ead 100644
--- a/packages/docs/src/pages/hooks/useKeyEvent/useKeyEvent.stories.tsx
+++ b/packages/docs/src/pages/hooks/useKeyEvent/useKeyEvent.stories.tsx
@@ -12,7 +12,6 @@ export const Overview = {
 
     useKeyEvent({
       keys: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
-      // @ts-ignore
       callback: e => setKeyName(e.key)
     });
 
diff --git a/packages/docs/src/pages/hooks/useListenFocusTriggers/useListenFocusTriggers.mdx b/packages/docs/src/pages/hooks/useListenFocusTriggers/useListenFocusTriggers.mdx
deleted file mode 100644
index f8e5a27dd9..0000000000
--- a/packages/docs/src/pages/hooks/useListenFocusTriggers/useListenFocusTriggers.mdx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Canvas, Meta } from "@storybook/blocks";
-import { FunctionArgument, FunctionArguments, Link, UsageGuidelines } from "vibe-storybook-components";
-import * as UseListenFocusTriggersStories from "./useListenFocusTriggers.stories";
-
-<Meta of={UseListenFocusTriggersStories} />
-
-# useListenFocusTriggers
-
-Fire provided callbacks, when focus by mouse or by keyboard happens.
-
-<Canvas of={UseListenFocusTriggersStories.Overview} />
-
-### Import
-
-```js
-import { useListenFocusTriggers } from "@vibe/core";
-```
-
-## Arguments
-
-<FunctionArguments>
-  <FunctionArgument name="options" type="Object">
-    <FunctionArgument
-      name="ref"
-      type="React.MutableRefObject"
-      description={
-        <>
-          A React
-          <Link size={Link.sizes.MEDIUM} href="https://react.dev/reference/react/useRef">
-            ref
-          </Link>
-          object.
-        </>
-      }
-    />
-    <FunctionArgument
-      name="onFocusByKeyboard"
-      type="(event: FocusEvent) => void"
-      description="Callback function to execute when the focus by keyboard event is fired."
-    />
-    <FunctionArgument
-      name="onFocusByMouse"
-      type="(event: FocusEvent) => void"
-      description="Callback function to execute when the focus by mouse (onMouseDown) event is fired."
-    />
-  </FunctionArgument>
-</FunctionArguments>
-
-## Usage
-
-<UsageGuidelines guidelines={["Use this hook to track when element was focused by mouse or keyboard."]} />
diff --git a/packages/docs/src/pages/hooks/useListenFocusTriggers/useListenFocusTriggers.stories.tsx b/packages/docs/src/pages/hooks/useListenFocusTriggers/useListenFocusTriggers.stories.tsx
deleted file mode 100644
index e0c3866554..0000000000
--- a/packages/docs/src/pages/hooks/useListenFocusTriggers/useListenFocusTriggers.stories.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React, { useCallback, useRef, useState } from "react";
-import { useListenFocusTriggers, Button, Flex } from "@vibe/core";
-
-export default {
-  title: "Hooks/useListenFocusTriggers"
-};
-
-export const Overview = {
-  render: () => {
-    const [text, setText] = useState<string>("-");
-    const ref = useRef<HTMLButtonElement>(null);
-
-    const onFocusByMouse = useCallback((_event: FocusEvent) => {
-      setText("mouse");
-    }, []);
-
-    const onFocusByKeyboard = useCallback((_event: FocusEvent) => {
-      setText("keyboard");
-    }, []);
-
-    useListenFocusTriggers({
-      ref: ref,
-      onFocusByMouse: onFocusByMouse,
-      onFocusByKeyboard: onFocusByKeyboard
-    });
-
-    return (
-      <Flex direction="column" gap="medium" align="start">
-        <Button ref={ref}>Focus target</Button>
-        <div>Received focus by: {text}</div>
-      </Flex>
-    );
-  },
-
-  name: "Overview"
-};
diff --git a/packages/docs/src/pages/hooks/useWizard/useWizard.stories.tsx b/packages/docs/src/pages/hooks/useWizard/useWizard.stories.tsx
index 8c0fcadc2b..6ad8c9e6e6 100644
--- a/packages/docs/src/pages/hooks/useWizard/useWizard.stories.tsx
+++ b/packages/docs/src/pages/hooks/useWizard/useWizard.stories.tsx
@@ -4,7 +4,7 @@ import { type Decorator } from "@storybook/react";
 import styles from "./useWizard.stories.module.scss";
 
 const withUseWizardDecorator: Decorator = Story => (
-  <Flex direction={Flex.directions.COLUMN} gap={Flex.gaps.MEDIUM}>
+  <Flex direction="column" gap="medium">
     <Story />
   </Flex>
 );
@@ -23,11 +23,11 @@ export const Overview = {
 
     return (
       <>
-        <Heading weight={Heading.weights.MEDIUM} type={Heading.types.H3}>
+        <Heading weight="medium" type="h3">
           Active Step: {activeStep}
         </Heading>
-        <Flex gap={Flex.gaps.SMALL}>
-          <Button kind={Button.kinds.TERTIARY} onClick={back} disabled={isFirstStep}>
+        <Flex gap="small">
+          <Button kind="tertiary" onClick={back} disabled={isFirstStep}>
             Back
           </Button>
           <Button onClick={next}>Next</Button>
@@ -46,11 +46,11 @@ export const WithInitialStep = {
 
     return (
       <>
-        <Heading weight={Heading.weights.MEDIUM} type={Heading.types.H3}>
+        <Heading weight="medium" type="h3">
           Active Step: {activeStep}
         </Heading>
-        <Flex gap={Flex.gaps.SMALL}>
-          <Button kind={Button.kinds.TERTIARY} onClick={back} disabled={isFirstStep}>
+        <Flex gap="small">
+          <Button kind="tertiary" onClick={back} disabled={isFirstStep}>
             Back
           </Button>
           <Button onClick={next}>Next</Button>
@@ -84,8 +84,8 @@ export const WithStepsComponent = {
           activeStepIndex={activeStep}
           onChangeActiveStep={(_e, stepIndex) => goToStep(stepIndex)}
         />
-        <Flex gap={Flex.gaps.SMALL}>
-          <Button kind={Button.kinds.TERTIARY} onClick={back} disabled={isFirstStep}>
+        <Flex gap="small">
+          <Button kind="tertiary" onClick={back} disabled={isFirstStep}>
             Back
           </Button>
           <Button onClick={next}>Next</Button>
diff --git a/packages/docs/src/pages/mcp/mcp.mdx b/packages/docs/src/pages/mcp/mcp.mdx
index 6c2f92a856..7fddd81e2d 100644
--- a/packages/docs/src/pages/mcp/mcp.mdx
+++ b/packages/docs/src/pages/mcp/mcp.mdx
@@ -3,7 +3,7 @@ import { Link, Tip, Frame, UsageGuidelines } from "vibe-storybook-components";
 import { Text, Heading } from "@vibe/core";
 import vibeXMcp from "./assets/vibe-x-mcp.png";
 
-<Meta title="MCP [New]" />
+<Meta title="MCP" />
 
 # MCP Server
 
@@ -106,7 +106,7 @@ This tool analyzes your entire project and provides:
 
 #### `dropdown-migration`
 
-Specialized migration assistant for upgrading from the old Dropdown component to the new Dropdown available in `@vibe/core/next`.
+Specialized migration assistant for upgrading from the old Dropdown component to the new Dropdown available in `@vibe/core`.
 
 **Key capabilities:**
 
diff --git a/packages/docs/src/pages/migration-guide/migration-guide.mdx b/packages/docs/src/pages/migration-guide/migration-guide.mdx
deleted file mode 100644
index 612cfe52f9..0000000000
--- a/packages/docs/src/pages/migration-guide/migration-guide.mdx
+++ /dev/null
@@ -1,454 +0,0 @@
-import { Meta, Markdown, Source } from "@storybook/blocks";
-import { Link, Tip } from "vibe-storybook-components";
-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { dark } from "react-syntax-highlighter/dist/esm/styles/prism";
-import { DiffCodeBlock } from "./DiffCodeBlock";
-import propsGif from "./assets/props.gif";
-import packageSplitDiagram from "./assets/package-split.png";
-import layersGif from "./assets/layers.gif";
-
-<Meta title="Migration Guide" />
-
-# Vibe 3 Migration Guide
-
-<br />
-
-<Tip type="success" title="NEW! 🚀 Migration just got INCREDIBLY easy!" emoji={false}>
-  **Skip the manual work and let AI handle your entire Vibe 3 migration!** With the [Vibe MCP
-  server](https://vibe.monday.com/?path=/docs/mcp-new--docs), simply ask your AI assistant: *"Help me migrate this
-  project from Vibe 2 to Vibe 3"* and watch the magic happen! The MCP will automatically scan your entire codebase,
-  identify all deprecated components, detect breaking changes, and generate the exact codemod commands you need - all in
-  seconds.
-  <br /> <br /> **[Install the MCP →](https://vibe.monday.com/?path=/docs/mcp-new--docs) and turn your migration work into
-  minutes!**
-</Tip>
-
-<div style={{ lineHeight: "1.8" }} >
-
-- [Intro](#intro)
-- [New Features ✨](#new-features-)
-- [Migration Steps 🚀](#migration-steps-)
-- [Breaking Changes 🚨](#breaking-changes-)
-  - [General](#general)
-  - [Typography](#typography)
-  - [Components](#components)
-  - [Colors](#colors)
-  - [Icons](#icons)
-- [FAQ ❓](#faq-)
-- [Help 🙏](#help-)
-
-## Intro
-
-Vibe 3 is a major update to the Vibe design system, introducing several new features, enhancements, and breaking changes. This guide will walk you through the changes to help you transition smoothly from v2 to v3.
-
-<Tip title="Migration from v1 to v2" emoji={false}>
-  To migrate from v1 to v2, please refer to the [Vibe 2 migration
-  guide](https://github.com/mondaycom/vibe/tree/master/packages/docs/src/pages/migration-guide/vibe2-migration-guide.md)
-</Tip>
-
-## New Features ✨
-
-### Package rename
-
-The `monday-ui-react-core` package has been renamed to `@vibe/core` to better reflect the library's purpose and align with the Vibe branding. In addition, the `/icons` entry point has been moved to a new `@vibe/icons` package.
-
-<img src={packageSplitDiagram} alt="packages split diagram" width="500"></img>
-
-### Reduced bundle size
-
-By removing CommonJS support, dividing the library into packages, and optimizing the library exports - the bundle size has been reduced by 43%, resulting in faster load times and improved performance.
-
-### New Typography System
-
-New and improved <StorybookLink page="Text/Heading">Heading</StorybookLink>, <StorybookLink page="Components/EditableHeading">EditableHeading</StorybookLink> components. For more info, check the [Typography](#typography) section.
-
-### Enhanced Typescript Support
-
-All components' types and interfaces are exported for better type-safe compositions. For example:
-
-```tsx
-import { Button, ButtonProps, ButtonSize } from "@vibe/core";
-```
-
-### Improved prop type-checking
-
-Now you can use type-safe strings instead of static enums for props, providing a better and faster development experience:
-
-```tsx
-// Before
-<Button kind={Button.kinds.PRIMARY} size={Button.sizes.SMALL}>click</Button>
-
-// After
-<Button kind="primary" size="small">click</Button>
-```
-
-See IntelliSense in action in your favorite IDE:
-
-<img src={propsGif} width="300" alt="Using props values instead of enums" />
-
-You can keep using the static properties, although not recommended, as they are likely to be deprecated in the future.
-
-### Improved layering of floating components
-
-When used inside Modals, the floating components (i.e., Tooltip, Tipseen, Dialog) will now be rendered inside the Modal's container by default, ensuring they are always on top. This change prevents any z-index interference and ensures a consistent user experience.
-
-<img src={layersGif} alt="floating elements on modal" width="500"></img>
-
-## Migration Steps 🚀
-
-Most of the changes required to migrate from Vibe 2 to Vibe 3 are covered by an automatic migration script, but some manual changes may still be required, especially changes that are related to style, UX, or behavior.
-
-These steps will guide you through the migration process:
-
-1. Install `@vibe/core` (and `@vibe/icons`, if needed) and remove `monday-ui-react-core`:
-
-   ```bash
-   yarn add @vibe/core @vibe/icons # or npm install @vibe/core @vibe/icons
-   yarn remove monday-ui-react-core # or npm uninstall monday-ui-react-core
-   ```
-
-   The changes in your `package.json` file should look like this:
-
-<ul>
-  <DiffCodeBlock
-    code={`"dependencies": {
-- "monday-ui-react-core": "^2.120.0",
-+ "@vibe/core": "^3.0.0",
-+ "@vibe/icons": "^1.0.0"
-  ...
-},`}
-  />
-</ul>
-
-2. Run the migration script to update your codebase:
-
-   ```bash
-   npx @vibe/codemod -m v3
-   ```
-
-   For more information, and for more options, refer to the [@vibe/codemod](https://github.com/mondaycom/vibe/blob/master/packages/codemod/README.md) docs.
-
-3. Follow the changes in the [Breaking Changes 🚨](#breaking-changes-) section below and apply any manual changes required.
-
-4. **Review the changes and test your application thoroughly** to ensure everything works as expected.
-
-5. Run Prettier or any code formatting tool to format the changes made by the migration script [optional].
-
-## Breaking Changes 🚨
-
-Several breaking changes have been made to optimize and streamline the library. These changes include the removal of deprecated components, updates to component APIs, and overall enhancements.
-
-Please note that the following changes are **complementary to the migration script** and require manual intervention, assuming that the migration script has ran successfully. If you prefer migrating entirely manually (without the `@vibe/codemod` script), please refer to the [Complete Vibe 3 changelog](https://github.com/mondaycom/vibe/blob/master/packages/docs/src/pages/migration-guide/vibe-3-changelog.md).
-
-### General
-
-- **CommonJS support has been removed** to modernize the library, reduce complexity, and ensure better compatibility with modern JavaScript tooling and ESM (ECMAScript Modules) standards.
-- The `monday-ui-react-core/storybookComponents` entry **was removed**, use the [vibe-storybook-components](https://www.npmjs.com/package/vibe-storybook-components) package instead.
-- The `monday-ui-react-core/dist/main.css` **was removed**, use `@vibe/core/tokens` instead to load all relevant CSS tokens:
-
-<ul>
-  <DiffCodeBlock
-    code={`- import "monday-ui-react-core/dist/main.css";
-+ import "@vibe/core/tokens";
-`}
-  />
-</ul>
-
-- The `monday-ui-style/src/Icons` **was removed**, use `@vibe/icons/raw` instead to use svg icons:
-
-<ul>
-  <DiffCodeBlock
-    code={`- import Close from "monday-ui-style/src/Icons/Close.svg";
-+ import { Close } from "@vibe/icons/raw";
-`}
-  />
-</ul>
-
-### Typography
-
-The typography system has been updated to provide a more consistent and accessible experience. The new typography system includes a set of predefined text styles and sizes that can be easily applied to components.
-
-- Use the <StorybookLink page="Text/Text">Text</StorybookLink> component for paragraphs, labels, and texts up to
-  16px. It includes 3 variants: <code>text1</code>, <code>text2</code> and <code>text3</code>. Each variant has a
-  fixed size and three different weights.
-
-- Use the <StorybookLink page="Text/Heading">Heading</StorybookLink> component the for titles and text from 18px and
-  up. It includes 3 variants: <code>h1</code>, <code>h2</code> and <code>h3</code>. Each of these variant is mapped
-  to an <code>h1</code>, <code>h2</code>, <code>h3</code> element accordingly.
-
-To replace old typography usages:
-
-- **H1 Main heading** (`--font-h1`) → **Heading/H1/normal**
-- **H2 Secondary heading** (`--font-h2`) → **Heading/H2/bold**
-- **H3 Tertiary heading** (`--font-h3`) → **Heading/H2/light**
-- **H4 Fourth heading** (`--font-h4`) → **Heading/H3/bold**
-- **H5 Paragraph** (`--font-h5`) → **Text/text1/bold**
-- **H6 UI text** (`--font-general-label`) → **Text/text2/normal**
-- **Medium Text** (`--font-subtext`) → **Text/text2/normal**
-- **P Paragraph text** (`--font-paragraph`) → **Text/text1/normal**
-- **Medium text link** (`--font-general-label`, `--link-color`) → **Text/text2/normal**
-
-For more information, refer to the <StorybookLink page="Foundations/Typography">Typography</StorybookLink> docs.
-
-### Components
-
-The following components have been **removed** and are no longer available:
-
-- `Input` - use <StorybookLink page="Components/TextField">TextField</StorybookLink> instead
-- `EditableInput` - use <StorybookLink page="Components/EditableText">EditableText</StorybookLink> instead
-- `SearchComponent` - use <StorybookLink page="Components/Search">Search</StorybookLink> instead
-- `ResponsiveList` - use <StorybookLink page="Hooks/useIsOverflowing">useIsOverflowing</StorybookLink> hook instead, to show/hide content based on overflow
-
-These components were **rewritten from scratch** with new API and style, offering better accessibility and usability:
-
-- <StorybookLink page="Text/Heading">Heading</StorybookLink>
-- <StorybookLink page="Components/EditableHeading">EditableHeading</StorybookLink>
-- <StorybookLink page="Components/Search">Search</StorybookLink>
-
-Make sure to import them from `@vibe/core` instead of the `/next` entry:
-
-<DiffCodeBlock
-  code={`- import { Heading, EditableHeading, Search } from "monday-ui-react-core/next";
-+ import { Heading, EditableHeading, Search } from "@vibe/core";
-`}
-/>
-
-The following components have breaking changes to their API, behavior, or style, as detailed below:
-
-**AvatarGroup**
-
-- The component no longer has padding at the bottom
-
-**Button**
-
-- The `children` prop is now required
-- The `sm`, `md`, `lg` sizes were removed, use `small`, `medium`, `large` respectively:
-
-<ul>
-  <DiffCodeBlock
-    code={`- <Button size="sm">
-+ <Button size="small">
-`}
-  />
-</ul>
-
-**Chips**
-
-- The `DARK_INDIGO` and `BLACKISH` colors were removed from the `color` prop
-- The `clickable` and `isClickable` props were removed, use `onClick` instead, to get clickable behavior and style:
-
-<ul>
-  <DiffCodeBlock
-    code={`- <Chips clickable>
-+ <Chips onClick={() => {}}>
-`}
-  />
-</ul>
-
-**Counter**
-
-- The `sm`, `md`, `lg` sizes were removed, use `small`, `medium`, `large` respectively:
-
-<ul>
-  <DiffCodeBlock
-    code={`- <Counter size="sm">
-+ <Counter size="small">
-`}
-  />
-</ul>
-
-**DialogContentContainer**
-
-- The "medium" `size` now has an increased padding, correcting a previous sizing issue where "medium" and "small" had identical paddings. As a result, "small" is now the default size. If no size was specified there's no action required.
-
-**Flex**
-
-- The `Flex.gaps.NONE` property has been removed. To specify no gap simply omit the `gap` prop
-
-**Dropdown**
-
-- The `xxs`, `xs` sizes were acting as the `small` size and were therefore removed. Use `small` instead
-- New readonly style
-
-**Icon**
-
-- The `clickable`, `onClick` props were removed, use `<IconButton>` for clickable icons:
-
-<ul>
-  <DiffCodeBlock
-    code={`- <Icon icon={Heart} clickable onClick={() => {}}>
-+ <IconButton icon={Heart} onClick={() => {}}>
-`}
-  />
-</ul>
-
-**Label**
-
-- The "Spin In" animation was removed
-
-**MenuButton**
-
-- The `hideWhenReferenceHidden` prop default value changes to "true", meaning when the MenuButton is hidden hide the dialog and tooltip as well. To disable this behavior set `hideWhenReferenceHidden` to "false"
-
-**MenuItem**
-
-- The provided tooltip (when the text is overflowing) now wraps the entire element so non-block layout given to the `title` prop may break
-
-**Modal**
-
-- The `hideCloseButton` has been removed since Modals should always have a close button. It has also been removed from ModalHeader component.
-- The `unmountOnClose` prop default value changes to "true", meaning the Modal will not render when `show` is "false". To disable this behavior set `unmountOnClose` to "false"
-- Tooltips, Tipseens, and Dialogs on Modals will now be rendered inside the Modal's container by default, without any z-index interference
-
-**Search**
-
-- The `type` prop was removed. The `Search.types.SQUARE`, `ROUND`, and `UNDERLINE` variants are no longer available
-- The `validation` prop was removed
-- The `wrapperClassName` prop was removed, use `className` instead
-- The `setRef` prop was removed, use the standard `ref` prop instead
-- The `iconNames` prop was removed. Use `clearIconLabel` for the clear button accessibility label
-- The `iconName` prop was renamed to `searchIconName`
-- The `secondaryIconName` prop was renamed to `clearIconName`
-- The `activeDescendant` prop was renamed to `currentAriaResultId`:
-
-<ul>
-  <DiffCodeBlock
-    code={`- <Search iconName={MyIcon} secondaryIconName={ClearIcon} activeDescendant="result-1" />
-+ <Search searchIconName={MyIcon} clearIconName={ClearIcon} currentAriaResultId="result-1" />
-`}
-  />
-</ul>
-
-- The `Search.sizes.SMALL/MEDIUM/LARGE` size values were removed, use `small`, `medium`, `large` respectively:
-
-<ul>
-  <DiffCodeBlock
-    code={`- <Search size={Search.sizes.SMALL} />
-+ <Search size="small" />
-`}
-  />
-</ul>
-
-- The `debounceRate` default changed from `200` to `400`
-
-The following components have breaking changes to their API, behavior, or style, as detailed below:
-
-**SplitButton**
-
-- The `data-testId` prop will no longer be applied to the internal elements, only the root element
-
-**Steps**
-
-- The `isOnPrimary` prop was removed, use `color="primary` instead:
-
-<ul>
-  <DiffCodeBlock
-    code={`- <Steps isOnPrimary>
-+ <Steps color="primary">
-`}
-  />
-</ul>
-
-**Tabs**
-
-- The browser's default margin/padding for `ul` and `li` elements were reset
-
-**TabList**
-
-- The component no longer gets a padding bottom
-
-**TabPanels**
-
-- TabPanels will render only the active tab instead of rendering all the panels
-
-**TextField**
-
-- The `iconsNames` prop no longer accepts the `layout` property
-- Providing the `required` prop will now show a red asterisk, implying that the field is mandatory, and so the `requiredAsterisk` prop was removed
-- New readonly style
-- The `sm`, `md`, `lg` sizes were removed, use `small`, `medium`, `large` respectively:
-
-<ul>
-  <DiffCodeBlock
-    code={`- <TextField size="sm">
-+ <TextField size="small">
-`}
-  />
-</ul>
-
-**Tipseen**
-
-- The `content` prop is now mandatory
-- The default `color` has changed from 'primary' to 'inverted'. To keep the previous color, set the `color` prop to 'primary'
-- The `showDelay` prop's default value has changed to 100
-- The `justify` prop was removed, and so the `Tipseen.justifyTypes` static property was removed as well
-
-**TipseenContent**
-
-- The `submitButtonProps`, `dismissButtonProps` props were removed, use `submitButtonText` and `dismissButtonText` to change the buttons' text
-
-**Tooltip**
-
-- The `paddingSize`, `justify`, and `arrowPosition` props were removed. Accordingly the `Tooltip.paddingSizes`, `Tooltip.justifyTypes`, and `Tooltip.arrowPositions` static properties were removed as well
-- The `theme` prop can now accept only "dark" or "primary"
-- The `position` prop can now accept only "top, right, bottom, left"
-- The `showOnDialogEnter` prop's default value has changed to `true`; now the tooltip will remain open by default when hovering over it
-- The `hideDelay` prop's default value changed to 100
-- The `addKeyboardHideShowTriggersByDefault` default changed to true, making it accessible with keyboard navigation
-- The tooltip's max-width is now set to 240px
-- The Tooltip's `content` is now wrapped in another `div`, meaning that non-block layouts inside the tooltip may break
-- The `containerSelector` will now fallback to `document.body` instead of `#tooltips-container` if not provided
-
-### Colors
-
-- The `--shareable-color` and `--private-color` CSS variables were removed for all themes
-- The `color-warning`, `color-warning-hover`, `color-warning-select`, `color-warning-select-hover` colors were removed from the `colors.json` file (in `monday-ui-style` package), use `warning-color-*` respectively
-
-### Icons
-
-- The `Upgrade` icon has been removed, and the `Featured` icon has been renamed to `Upgrade`:
-- The `Replay` icon has been renamed to `Reply`
-
-<ul>
-  <DiffCodeBlock
-    code={`- <Icon icon={Featured}>
-+ <Icon icon={Upgrade}>
-`}
-  />
-</ul>
-
-## FAQ ❓
-
-**What is the best way to migrate to Vibe 3?**
-
-It is recommended to follow the migration steps outlined in this guide to ensure a smooth transition from Vibe 2 to Vibe 3.
-
-**Are there any manual changes required after running the migration script?**
-
-While the migration script covers most changes, some manual changes may still be required where style, UX, or behavior changes are involved. You should walk through the [breaking changes](#breaking-changes-) section to identify any manual changes required.
-
-**Do I need to stop using static properties (e.g. `Button.kinds.PRIMARY`) in my code?**
-
-You can still use static properties, but it is recommended to use type-safe strings instead. Static properties are likely to be deprecated in the future. To migrate to type-safe strings, use the following script: `npx @vibe/codemod -m enums`.
-
-**I have already been using Heading, EditableHeading, Search from `/next`, do I need to change anything?**
-
-If you have been using these components from `/next`, you will only need to update your imports to use the components from the main entry (`@vibe/core`).
-
-**Are there any known issues or limitations with Vibe 3?**
-
-While we have made every effort to ensure Vibe 3 is stable and reliable, there may be some known issues or limitations. If you encounter any problems, please create an [issue](https://github.com/mondaycom/vibe/issues/new/choose).
-
-**What if I don't want to migrate to Vibe 3?**
-
-While we recommend migrating to Vibe 3 to take advantage of the new features and improvements, you can continue using Vibe 2. However, please note that Vibe 2 will no longer recieve any new features or updates aside from critical bug fixes, and will reach EOL upon the next major version (Vibe 4) release.
-
-**The migration script failed to run, what should I do?**
-
-Make sure to run the migration script in the root directory of your project, and make sure to run it on a clean git branch to avoid any conflicts. If you still encounter issues, please create an [issue](https://github.com/mondaycom/vibe/issues/new/choose) describing the steps, system info and any error messages you received.
-
-</div>
-
-## Help 🙏
-
-If you have any questions, feedback, or need help, please don't hesitate to reach out to us. You can provide [feedback](https://github.com/mondaycom/vibe/discussions) or [report issues](https://github.com/mondaycom/vibe/issues/new/choose) in the [Vibe repository](https://github.com/mondaycom/vibe) on GitHub.
diff --git a/packages/docs/src/pages/migration-guide/vibe-4-changelog.md b/packages/docs/src/pages/migration-guide/vibe-4-changelog.md
new file mode 100644
index 0000000000..a4d5ffaabb
--- /dev/null
+++ b/packages/docs/src/pages/migration-guide/vibe-4-changelog.md
@@ -0,0 +1,232 @@
+# Vibe 4 Changelog
+
+This is the complete list of changes in the Vibe 4 release. Changes that are marked with a 🔀 are covered by a migration script (codemod).
+
+For the complete migration guide see the [Vibe 4 Migration Guide](https://vibe.monday.com/?path=/docs/vibe-4-migration-guide--docs).
+
+## General
+
+- React 19 support — all deprecated React APIs removed, including dependencies
+- `moment` removed as a peer dependency
+- `@vibe/core/next` consolidation — AttentionBox, Dropdown, DatePicker, and Modal promoted to `@vibe/core`. Only `List` remains in `@vibe/core/next` 🔀
+- All deprecated enum exports and static properties removed across all components 🔀 (see [Enums](#enums) section)
+- ARIA props renamed from camelCase to standard `aria-*` attributes across all components 🔀 (see [ARIA Props](#aria-props) section)
+- Internal Package rename — `monday-ui-style` renamed to `@vibe/style` (the package is included in @vibe/core) 🔀
+
+## Enums
+
+> codemod: `enums-migration`
+
+All deprecated enum exports and static property accessors have been removed. Use string literals instead. 🔀
+
+Affected components: AlertBanner, AttentionBox, Avatar, Badge, Box, Button, Clickable, ColorPicker, Counter, Dialog, Divider, Dropdown, Flex, Heading, Icon, IconButton, Label, LinearProgressBar, List, ListItem, ListItemIcon, Loader, MenuButton, MenuTitle, MultiStepIndicator, Skeleton, Slider, Steps, TabPanels, Text, TextField, ThemeProvider, Tipseen, Toast, Tooltip.
+
+Example: `Button.sizes.LARGE` → `"large"`, `ButtonType.PRIMARY` → `"primary"`
+
+## ARIA Props
+
+> codemod: `aria-props-migration`
+
+All custom camelCase ARIA props renamed to standard HTML `aria-*` attributes. 🔀
+
+- `ariaLabel` → `aria-label` 🔀
+- `ariaHidden` → `aria-hidden` 🔀
+- `ariaExpanded` → `aria-expanded` 🔀
+- `ariaControls` → `aria-controls` 🔀
+- `ariaHasPopup` → `aria-haspopup` 🔀
+- `ariaLabeledBy` / `ariaLabelledBy` → `aria-labelledby` 🔀
+- `ariaDescribedBy` / `ariaDescribedby` → `aria-describedby` 🔀
+- `ariaLabelDescription` (Link) → `aria-label` 🔀
+
+Note: Component-specific compound props like `inputAriaLabel`, `menuAriaLabel`, `closeButtonAriaLabel` are not affected.
+
+## Components
+
+### AttentionBox
+
+- Legacy `AttentionBox` removed, new implementation (from `@vibe/core/next`) promoted to `@vibe/core` 🔀
+- `AttentionBoxLink` removed as a public export — use the `link` prop instead
+- `AttentionBoxConstants` removed (deprecated enums: `AttentionBoxType`, `IconTypeEnum`) 🔀
+- Type values changed: `"success"` → `"positive"`, `"danger"` → `"negative"`, `"dark"` → `"neutral"`
+- `entryAnimation` prop → `animate`
+- `withoutIcon` / `withIconWithoutHeader` props removed — use `icon={false}`
+
+### Chips
+
+> codemod: `Chips-component-migration`
+
+- The `disableClickableBehavior` prop has been removed — Chips now always uses the clickable wrapper when click handlers are provided 🔀
+
+### Clickable
+
+- `ariaHasPopup` now accepts `boolean` only (was `boolean | string`)
+- `tabIndex` now accepts `number` only (was `string | number`)
+
+### DatePicker
+
+- Legacy DatePicker (`react-dates` + `moment`) replaced with new implementation (`react-day-picker` + `date-fns`) with an updated visual design
+- `date` prop type changed from `moment.Moment` to `Date`
+- `onPickDate` renamed to `onDateChange`
+- `range` boolean prop replaced with `mode: "single" | "range"`
+- `moment` no longer required as a peer dependency
+
+### Dialog
+
+> codemod: `Dialog-component-migration`
+
+- Legacy class-based Dialog (Popper.js) replaced with new functional Dialog (Floating UI)
+- `modifiers` prop removed — use `middleware` prop instead
+- `enableNestedDialogLayer` prop removed — layer handling is always used internally 🔀
+- `addKeyboardHideShowTriggersByDefault` default changed to `true`
+
+### Dropdown
+
+- Old `react-select`-based Dropdown removed, in favor of a new improved and customizable Dropdown
+- Import changed from `@vibe/core/next` to `@vibe/core` 🔀
+- Options structure changed from `{ id, text }` to `{ value, label }`
+- Sub-components removed: `DropdownMenu`, `DropdownOption`, `DropdownSingleValue`
+- `padding-inline-start` reduced from `16px` to `8px` on Dropdown Trigger
+- Placeholder now uses `var(--placeholder-color)` instead of `var(--secondary-text-color)`
+- See the [Dropdown Migration Guide](https://vibe.monday.com/?path=/docs/components-dropdown-migration-guide--docs)
+
+### Flex
+
+> codemod: `Flex-component-migration`
+
+- The `"stretch"` value removed from `justify` prop 🔀
+
+### Icon
+
+> codemod: `Icon-component-migration`
+
+- `iconLabel` prop renamed to `label` 🔀
+- `iconType` prop renamed to `type` 🔀
+- `iconSize` prop renamed to `size` 🔀
+- `size` prop now applies to `type="src"` icons (previously only affected `type="svg"`)
+- `onClick` and `clickable` props removed from internal `CustomSvgIcon` — wrap with a clickable element (e.g. `<IconButton>`) instead
+
+### LinearProgressBar (ProgressBar)
+
+> codemod: `LinearProgressBar-component-migration`
+
+- `LinearProgressBar` renamed to `ProgressBar` 🔀
+- `LinearProgressBarProps` renamed to `ProgressBarProps` 🔀
+
+### MenuButton
+
+- `focusItemIndexOnMount` now defaults to `0` for Menu children (first item focused on open)
+
+### MenuItem
+
+- `children` prop now accepts only a single `MenuChild`, not `MenuChild[]`
+
+### Modal
+
+- Legacy Modal removed and replaced with a completely new Modal component with a different API (previously available via `@vibe/core/next`) 🔀
+- Removed: `ModalFooterButtons`, `ModalWidth` type, legacy sub-component props
+- New: `ModalBasicLayout`, `ModalMediaLayout`, `ModalSideBySideLayout`, `ModalFooterWizard`
+- For more info see [Modal docs](https://vibe.monday.com/?path=/docs/components-modal-new--docs)
+
+### Steps
+
+- Finish button now renders by default on the last step
+
+### Tipseen
+
+- `modifiers` prop removed — use `middleware` instead (same as Dialog/Tooltip). For more info see [Floating UI docs](https://floating-ui.com/docs/middleware).
+
+### TextField
+
+> codemod: `TextField-component-migration`
+
+- `iconName` prop renamed to `icon` 🔀
+- `iconsNames` object prop replaced with flat `iconLabel` and `secondaryIconLabel` props 🔀
+- `padding-inline-start` reduced from `16px` to `8px`
+- Placeholder now uses `var(--placeholder-color)` instead of `var(--secondary-text-color)`
+
+### Search
+
+- `padding-inline-start` reduced from `16px` to `8px`
+- Placeholder now uses `var(--placeholder-color)` instead of `var(--secondary-text-color)`
+
+### TextArea
+
+- `padding-inline-start` reduced from `16px` to `8px`
+- Placeholder now uses `var(--placeholder-color)` instead of `var(--secondary-text-color)`
+
+### NumberField
+
+- `padding-inline-start` reduced from `16px` to `8px`
+- Placeholder now uses `var(--placeholder-color)` instead of `var(--secondary-text-color)`
+
+### Combobox
+
+- `padding-inline-start` reduced from `16px` to `8px`
+- Placeholder now uses `var(--placeholder-color)` instead of `var(--secondary-text-color)`
+
+### TextWithHighlight
+
+> codemod: `TextWithHighlight-component-migration`
+
+- The `tooltipPosition` prop has been removed, use `tooltipProps={{ position: "value" }}` instead 🔀
+
+### TipseenImage
+
+> codemod: `TipseenImage-component-migration`
+
+- `TipseenImage` component removed — use `TipseenMedia` with an `<img>` child instead 🔀
+
+### Toggle
+
+> codemod: `Toggle-component-migration`
+
+- The `noSpacing` prop has been removed — margin is auto-removed when `areLabelsHidden` is `true` 🔀
+- Duplicate `data-testid="toggle"` removed from internal visual div — the test ID is now only on the input element
+
+### Tooltip
+
+- `modifiers` prop removed — use `middleware` instead (same as Dialog)
+
+### VirtualizedGrid
+
+- `itemRenderer` return type corrected to `ReactElement`
+
+### VirtualizedList
+
+> codemod: `VirtualizedList-component-migration`
+
+- `getItemHeight` prop renamed to `getItemSize` 🔀
+- `onVerticalScrollbarVisiblityChange` prop renamed to `onLayoutDirectionScrollbarVisibilityChange` 🔀
+
+## Hooks
+
+### useMergeRefs
+
+- Removed from `@vibe/core` — use `react-merge-refs` or implement your own
+
+### useListenFocusTriggers
+
+- Removed from `@vibe/core` — inline the logic using `useEventListener`
+
+### useActiveDescendantListFocus
+
+- `onItemClickCallback` and `createOnItemClickCallback` return values removed — use `onItemClick` directly
+
+### useKeyEvent
+
+- `callback` type changed from `GenericEventCallback` to `KeyboardEventCallback` (native `KeyboardEvent`)
+
+## CSS and Design Tokens
+
+### Spacing Tokens
+
+- Deprecated semantic spacing tokens removed from `@vibe/style` 🔀 (stylelint auto-fix via `@vibe/style/use-new-spacing-tokens`)
+  - `--spacing-xs` → `--space-4`
+  - `--spacing-small` → `--space-8`
+  - `--spacing-medium` → `--space-16`
+  - `--spacing-large` → `--space-24`
+  - `--spacing-xl` → `--space-32`
+  - `--spacing-xxl` → `--space-48`
+  - `--spacing-xxxl` → `--space-64`
+
+For more info see the [Spacing page](https://vibe.monday.com/?path=/docs/foundations-spacing--spacing)
diff --git a/packages/docs/src/pages/migration-guide/vibe-4-migration-guide.mdx b/packages/docs/src/pages/migration-guide/vibe-4-migration-guide.mdx
new file mode 100644
index 0000000000..5f393e4225
--- /dev/null
+++ b/packages/docs/src/pages/migration-guide/vibe-4-migration-guide.mdx
@@ -0,0 +1,246 @@
+import { Meta } from "@storybook/blocks";
+import { Link, Tip } from "vibe-storybook-components";
+import { DiffCodeBlock } from "./DiffCodeBlock";
+
+<Meta title="Migration Guide" />
+
+# Vibe 4 Migration Guide
+
+<br />
+
+<div style={{ lineHeight: "1.8" }}>
+
+- [What's New ✨](#whats-new-)
+- [Migration Steps 🚀](#migration-steps-)
+- [Breaking Changes 🚨](#breaking-changes-)
+  - [Components](#components)
+  - [Hooks](#hooks)
+  - [CSS and Design Tokens](#css-and-design-tokens)
+- [FAQ ❓](#faq-)
+- [Help 🙏](#help-)
+
+Vibe 4 is a major update to the Vibe design system, built for **React 19 compatibility**. It also delivers a leaner bundle, modern APIs, and stronger type safety. Legacy components, deprecated enums, and outdated dependencies have been removed in favor of simpler, more consistent alternatives.
+
+<Tip title="Older versions migrations" emoji={false}>
+
+- From v2 to v3 see [Vibe 3 migration guide](https://vibe.monday.com/v3/?path=/docs/migration-guide--docs)
+- From v1 to v2 see [Vibe 2 migration guide](https://github.com/mondaycom/vibe/tree/master/packages/docs/src/pages/migration-guide/vibe2-migration-guide.md)
+
+</Tip>
+
+## What's New ✨
+
+### React 19 support
+
+Vibe 4 is fully compatible with React 19.
+
+If your app is upgrading to React 19, you **must** upgrade to Vibe 4 — Vibe 3 is not compatible with React 19.
+
+### New component implementations
+
+Several components have been completely rewritten with new APIs:
+
+- **Dropdown** - New custom implementation replacing the old `react-select`-based Dropdown
+- **Modal** - New component with layout-based API (`ModalBasicLayout`, `ModalMediaLayout`, etc.)
+- **AttentionBox** - New implementation with simplified props
+- **DatePicker** - New implementation using native `Date` objects and `date-fns` instead of `moment`
+- **Dialog/Tooltip/Tipseen** - Now powered by Floating UI (replacing Popper.js)
+
+### Smaller bundle
+
+Several internal runtime dependencies have been removed resulting in a significantly smaller bundle.
+
+### No more enums or static properties
+
+All deprecated enum exports (e.g. `ButtonType`, `DialogPositionEnum`) and static property accessors (e.g. `Button.sizes.LARGE`) have been removed in favor of string literals, which are type-safe, tree-shakeable, and provide the same IntelliSense experience.
+
+### Standard ARIA props
+
+Custom camelCase ARIA props (`ariaLabel`, `ariaHidden`, etc.) have been replaced with the standard HTML `aria-*` attributes that React natively supports, eliminating an unnecessary abstraction layer.
+
+## Migration Steps 🚀
+
+### With AI (recommended)
+
+<Tip emoji={false} type="success" title="Install the Vibe MCP">
+  To migrate faster and easier using AI, make sure you have the [Vibe MCP server](?path=/docs/mcp-new--docs) installed.
+</Tip>
+
+1. Ask your AI assistant:
+
+   ```
+   Help me migrate this project from Vibe 3 to Vibe 4 using the Vibe MCP v4 migration tool
+   ```
+
+2. This will scan your codebase, identify the breaking changes, run the codemods automatically, and will fix all the issues.
+
+3. **Review the changes and test your application thoroughly.**
+
+4. Run your code formatter to clean up any formatting changes from the codemod (optional).
+
+### Manually
+
+If you prefer to migrate manually, follow these steps:
+
+1. Update `@vibe/core`:
+
+   ```bash
+   yarn add @vibe/core@^4.0.0
+   ```
+
+2. Run the automated migration codemod:
+
+   ```bash
+   npx @vibe/codemod -m v4
+   ```
+
+   The codemod handles enum-to-string-literal conversions, ARIA prop renames, Icon prop renames, and several component-specific migrations. For more options, see the [@vibe/codemod docs](https://github.com/mondaycom/vibe/blob/master/packages/codemod/README.md).
+
+3. Follow the [Breaking Changes](#breaking-changes-) section below and apply any remaining manual changes.
+
+4. **Review the changes and test your application thoroughly.**
+
+5. Run your code formatter to clean up any formatting changes from the codemod (optional).
+
+## Breaking Changes 🚨
+
+The following changes are **complementary to the migration codemod** and may require manual intervention. If you prefer to migrate entirely by hand (without `@vibe/codemod`), refer to the [Complete Vibe 4 changelog](https://github.com/mondaycom/vibe/blob/master/packages/docs/src/pages/migration-guide/v4-changelog.md).
+
+### Components
+
+**AttentionBox**
+
+- The component has been completely rewritten with a new API. Legacy `AttentionBox` removed, new implementation (previously at `@vibe/core/next`) promoted to `@vibe/core`
+- `AttentionBoxLink` component removed, use the `link` prop instead
+- Type values changed: `"success"` → `"positive"`, `"danger"` → `"negative"`, `"dark"` → `"neutral"`
+- `entryAnimation` prop → `animate`
+- `withoutIcon` / `withIconWithoutHeader` props removed — use `icon={false}`
+
+**Clickable**
+
+- `ariaHasPopup` now accepts `boolean` only (was `boolean | string`)
+- `tabIndex` now accepts `number` only (was `string | number`)
+
+**DatePicker**
+
+- The legacy DatePicker (based on `react-dates` and `moment.js`) has been replaced with a completely new component (previously at `@vibe/core/next`) with a different visual design, and promoted to `@vibe/core`
+- `date` prop now uses native `Date` objects instead of `moment.Moment`
+- `onPickDate` prop renamed to `onDateChange`
+- `range` boolean prop replaced with `mode: "single" | "range"`
+- `moment` no longer required as a peer dependency
+
+**Dialog**
+
+- The legacy class-based Dialog (Popper.js) has been replaced with a new functional Dialog (Floating UI)
+- The `modifiers` prop (Popper.js) has been removed — use [middleware](https://floating-ui.com/docs/middleware) prop (Floating UI) instead
+- `addKeyboardHideShowTriggersByDefault` now defaults to `true` — set it explicitly to `false` if you relied on the previous default
+
+**Dropdown**
+
+- The old `react-select`-based Dropdown has been removed. The new custom Dropdown (previously at `@vibe/core/next`) is now the default with a completely different API. See the [Dropdown Migration Guide](?path=/docs/components-dropdown-migration-guide--docs) for full details
+
+**Combobox**
+
+- The `Combobox` component is marked as **deprecated** and will be removed in a future version. Use [Dropdown with box mode](?path=/docs/components-dropdown--docs) instead
+
+**Icon**
+
+- `size` prop now applies to `type="src"` icons (previously only affected `type="svg"`)
+
+**MenuButton**
+
+- MenuButton now passes `focusItemIndexOnMount={0}` to its Menu children by default, so the first menu item is focused when the menu opens
+
+**MenuItem**
+
+- The `children` prop now accepts only a single `MenuChild`, not `MenuChild[]` (passing an array was already a runtime error in v3)
+
+**Modal**
+
+- The legacy Modal has been removed and replaced with a completely new Modal component with a different API (previously at `@vibe/core/next`) and promoted to `@vibe/core`
+  See the [Modal documentation](?path=/docs/components-modal--docs) for the full API
+
+**Steps**
+
+- The finish button now renders by default on the last step
+
+**Tipseen**
+
+- The `modifiers` prop (Popper.js) has been removed — use [`middleware`](https://floating-ui.com/docs/middleware) instead (same as Dialog)
+
+**Tooltip**
+
+- The `modifiers` prop (Popper.js) has been removed — use [`middleware`](https://floating-ui.com/docs/middleware) instead (same as Dialog)
+
+**Toggle**
+
+- The duplicate `data-testid="toggle"` has been removed from the internal visual `div` — the test ID is now only on the `<input>` element. Update any test selectors that targeted the visual div.
+
+**VirtualizedGrid**
+
+- `itemRenderer` return type corrected to `ReactElement` — if TypeScript reports errors, ensure your renderer explicitly returns `ReactElement`
+
+### Hooks
+
+- **`useMergeRefs`** removed from `@vibe/core` — use the [`react-merge-refs`](https://www.npmjs.com/package/react-merge-refs) package instead
+- **`useListenFocusTriggers`** removed from `@vibe/core` — inline the logic using `useEventListener`
+- **`useActiveDescendantListFocus`** — `onItemClickCallback` and `createOnItemClickCallback` return values removed, use `onItemClick` directly
+- **`useKeyEvent`** — `callback` type changed from `GenericEventCallback` to `KeyboardEventCallback` (native `KeyboardEvent`)
+
+### CSS and Design Tokens
+
+**Spacing Tokens**
+
+The deprecated semantic spacing CSS custom properties have been removed. Replace with numeric tokens:
+
+| Removed Token      | Replacement  |
+| ------------------ | ------------ |
+| `--spacing-xs`     | `--space-4`  |
+| `--spacing-small`  | `--space-8`  |
+| `--spacing-medium` | `--space-16` |
+| `--spacing-large`  | `--space-24` |
+| `--spacing-xl`     | `--space-32` |
+| `--spacing-xxl`    | `--space-48` |
+| `--spacing-xxxl`   | `--space-64` |
+
+**Auto-fix available**: Run `npx stylelint --fix "**/*.scss"` with the `@vibe/style/use-new-spacing-tokens` rule enabled.
+
+**Input Padding**
+
+`padding-inline-start` reduced from `16px` to `8px` across TextField, BaseInput, TextArea, and Dropdown Trigger.
+
+**Input Placeholder Color**
+
+Inputs now use `var(--placeholder-color)` instead of `var(--secondary-text-color)`.
+
+## FAQ ❓
+
+**What is the best way to migrate to Vibe 4?**
+
+Follow the [Migration Steps](#migration-steps-) above. It is highly recommended to use the Vibe MCP to handle all the changes.
+
+**I was using enums like `Button.sizes.LARGE` — what do I use now?**
+
+Use string literals: `"large"`. They are fully type-safe and provide the same IntelliSense autocomplete in your IDE. Run `npx @vibe/codemod -m enums` to migrate automatically.
+
+**I was importing components from `@vibe/core/next` — what changed?**
+
+Most components from `@vibe/core/next` (AttentionBox, Dropdown, DatePicker, Dialog, Modal) have been promoted to `@vibe/core`. Update your imports to use `@vibe/core` directly and follow the API changes (if any).
+
+**Is Vibe 4 compatible with React 19?**
+
+Yes. Vibe 4 is fully compatible with React 19. Note that Vibe 3 is **not** compatible with React 19, so if you are upgrading to React 19, you must upgrade to Vibe 4.
+
+**What if I don't want to migrate to Vibe 4?**
+
+You can continue using Vibe 3 with React 16–18, but it will only receive critical bug fixes. New features, improvements, and React 19 support are only available in Vibe 4.
+
+**The migration script failed — what should I do?**
+
+Run the script in the root of your project on a clean git branch. If issues persist, please [report an issue](https://github.com/mondaycom/vibe/issues/new/choose) with the error message and your environment details.
+
+</div>
+
+## Help 🙏
+
+If you have any questions, feedback, or need help, please don't hesitate to reach out. You can provide [feedback](https://github.com/mondaycom/vibe/discussions) or [report issues](https://github.com/mondaycom/vibe/issues/new/choose) in the [Vibe repository](https://github.com/mondaycom/vibe) on GitHub.
diff --git a/packages/docs/src/pages/playground/playground-helpers.ts b/packages/docs/src/pages/playground/playground-helpers.ts
index 6bfc74bb77..e962257fd2 100644
--- a/packages/docs/src/pages/playground/playground-helpers.ts
+++ b/packages/docs/src/pages/playground/playground-helpers.ts
@@ -31,7 +31,7 @@ const jsx = `() => {
       />
       <Flex direction="column" align="center" justify="center" gap="xs">
         <Flex align="center" gap="xs">
-          <Icon icon={VibeIcons.Labs} iconSize="16" />
+          <Icon icon={VibeIcons.Labs} size="16" />
           <Heading type="h3" align="center">
             Playground
           </Heading>
@@ -63,7 +63,7 @@ const css = `.playground {
 
 .vibe-logo {
   width: 150px;
-  margin-block-end: var(--spacing-large);
+  margin-block-end: var(--space-24);
   transition: transform 0.3s ease, filter 0.3s ease;
 }
 
@@ -73,7 +73,7 @@ const css = `.playground {
 }
 
 .count-button {
-  margin-block: var(--spacing-medium);
+  margin-block: var(--space-16);
 }
 `;
 
diff --git a/packages/hooks/package.json b/packages/hooks/package.json
index 2cdaddfd52..13379168d6 100644
--- a/packages/hooks/package.json
+++ b/packages/hooks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vibe/hooks",
-  "version": "3.0.3",
+  "version": "4.0.0-rc.0",
   "description": "Vibe sub-package for React hooks",
   "repository": {
     "type": "git",
@@ -33,7 +33,7 @@
     "lint": "eslint \"./src/**/*.{js,jsx,ts,tsx}\""
   },
   "dependencies": {
-    "@vibe/shared": "3.0.8",
+    "@vibe/shared": "^4.0.0-rc.0",
     "classnames": "^2.5.1",
     "es-toolkit": "^1.39.10"
   },
@@ -41,11 +41,11 @@
     "@testing-library/react": "^12.1.2",
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^13.5.0",
-    "@vibe/config": "3.0.5",
+    "@vibe/config": "^4.0.0-rc.0",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
     "react-test-renderer": "16",
-    "typescript": "^4.7.3",
+    "typescript": "^5.9.3",
     "vitest": "^1.6.0"
   },
   "peerDependencies": {
diff --git a/packages/icons/package.json b/packages/icons/package.json
index cab0f10de7..351b30c2a8 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vibe/icons",
-  "version": "1.16.0",
+  "version": "4.0.0-rc.0",
   "description": "Vibe's Icon Library",
   "repository": {
     "type": "git",
@@ -85,7 +85,7 @@
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.34.1",
     "svg2react-icon": "^3.1.178",
-    "typescript": "^4.7.3",
+    "typescript": "^5.9.3",
     "vitest": "^1.6.0"
   },
   "peerDependencies": {
diff --git a/packages/mcp/README.md b/packages/mcp/README.md
index e34c5a19e0..6ccfec24b9 100644
--- a/packages/mcp/README.md
+++ b/packages/mcp/README.md
@@ -61,7 +61,7 @@ or manually update your VSCode MCP configuration file at `.vscode/mcp.json` (cre
 
 #### Token Tool
 
-- `list-vibe-tokens`: Get a list of all available Vibe design tokens from the `monday-ui-style` package. Supports optional filtering by text query, category, or limiting results. Returns token names, values, categories, and files, with optional CSS usage examples.
+- `list-vibe-tokens`: Get a list of all available Vibe design tokens from the `@vibe/style` package. Supports optional filtering by text query, category, or limiting results. Returns token names, values, categories, and files, with optional CSS usage examples.
 
 #### Migration Tool
 
diff --git a/packages/mcp/package.json b/packages/mcp/package.json
index 6ed7166caa..754b51b206 100644
--- a/packages/mcp/package.json
+++ b/packages/mcp/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vibe/mcp",
-  "version": "0.8.2",
+  "version": "4.0.0-rc.0",
   "description": "Vibe's MCP server to interact with the Vibe ecosystem",
   "repository": {
     "type": "git",
diff --git a/packages/mcp/src/index.ts b/packages/mcp/src/index.ts
index 66e5171202..d36d67b29c 100644
--- a/packages/mcp/src/index.ts
+++ b/packages/mcp/src/index.ts
@@ -10,6 +10,7 @@ import { listVibeIconsTool } from "./server/tools/list-vibe-icons.js";
 import { listVibeTokensTool } from "./server/tools/list-vibe-tokens.js";
 import { v3MigrationTool } from "./server/tools/v3-migration.js";
 import { dropdownMigrationTool } from "./server/tools/dropdown-migration.js";
+import { v4MigrationTool } from "./server/tools/v4-migration.js";
 
 async function main() {
   const transport = new StdioServerTransport();
@@ -21,6 +22,7 @@ async function main() {
   addServerTool(listVibeTokensTool);
   addServerTool(v3MigrationTool);
   addServerTool(dropdownMigrationTool);
+  addServerTool(v4MigrationTool);
   await server.connect(transport);
 }
 
diff --git a/packages/mcp/src/server/tools/dropdown-migration.ts b/packages/mcp/src/server/tools/dropdown-migration.ts
index 090cca06d7..68e107af62 100644
--- a/packages/mcp/src/server/tools/dropdown-migration.ts
+++ b/packages/mcp/src/server/tools/dropdown-migration.ts
@@ -121,10 +121,10 @@ function getDropdownMigrationInstructions(projectInfo: any) {
         {
           step: 2,
           title: "Update Import Statements",
-          action: "Change import path from '@vibe/core' to '@vibe/core/next'",
-          example: "import { Dropdown } from '@vibe/core/next';",
-          description: "Update all Dropdown imports to use the new Alpha version",
-          command: "Find and replace: 'from \"@vibe/core\"' → 'from \"@vibe/core/next\"' (for Dropdown imports only)"
+          action: "Import Dropdown from '@vibe/core'",
+          example: "import { Dropdown } from '@vibe/core';",
+          description: "In v4, the new Dropdown is the default export from @vibe/core. If you were using @vibe/core/next, update to @vibe/core.",
+          command: "Find and replace: 'from \"@vibe/core/next\"' → 'from \"@vibe/core\"' (for Dropdown imports)"
         },
         {
           step: 3,
@@ -165,9 +165,9 @@ function getDropdownMigrationInstructions(projectInfo: any) {
     },
     breakingChanges: {
       importPath: {
-        old: "import { Dropdown } from '@vibe/core';",
-        new: "import { Dropdown } from '@vibe/core/next';",
-        reason: "New Dropdown is available in Alpha under /next path"
+        old: "import { Dropdown } from '@vibe/core'; // v3 (react-select based)",
+        new: "import { Dropdown } from '@vibe/core'; // v4 (new implementation)",
+        reason: "The old react-select Dropdown has been removed in v4. The new Dropdown is now the default export."
       },
       optionStructure: {
         old: "{ id: 1, text: 'Option 1' }",
@@ -480,10 +480,10 @@ function generateRecommendations(analysis: any, projectInfo: any) {
       recommendations.push({
         type: "import-migration",
         priority: "high",
-        action: "Update Dropdown imports to use Alpha version",
+        action: "Update Dropdown imports for v4",
         details: `Found ${imports.oldDropdownImports.length} files importing Dropdown from '@vibe/core'`,
         files: imports.oldDropdownImports.slice(0, 10),
-        fix: "Change 'from \"@vibe/core\"' to 'from \"@vibe/core/next\"' for Dropdown imports",
+        fix: "The Dropdown API has changed in v4. Update usage to match the new API (see migration guide).",
         command: "Find and replace in files with Dropdown imports"
       });
     }
diff --git a/packages/mcp/src/server/tools/list-vibe-icons.ts b/packages/mcp/src/server/tools/list-vibe-icons.ts
index afa0c0ae27..cf50b16f64 100644
--- a/packages/mcp/src/server/tools/list-vibe-icons.ts
+++ b/packages/mcp/src/server/tools/list-vibe-icons.ts
@@ -62,7 +62,7 @@ export const listVibeIconsTool: MCPTool<typeof SearchIconsParamsSchema.shape> =
               "Import Icon Component": `import { Icon } from "@vibe/core";`,
               "Import Icon": `import { ${icon.name} } from "@vibe/icons";`,
               "Basic Usage": `<Icon icon={${icon.name}} />`,
-              "With Props": `<Icon icon={${icon.name}} iconSize={24} iconLabel="${icon.description}" />`
+              "With Props": `<Icon icon={${icon.name}} size={24} label="${icon.description}" />`
             }
           };
         }
diff --git a/packages/mcp/src/server/tools/token-metadata-service.ts b/packages/mcp/src/server/tools/token-metadata-service.ts
index c271a8efd7..c7c31bd3ff 100644
--- a/packages/mcp/src/server/tools/token-metadata-service.ts
+++ b/packages/mcp/src/server/tools/token-metadata-service.ts
@@ -13,7 +13,7 @@ export interface TokenMetadata {
 
 export class TokenMetadataService {
   private static tokenCache: TokenMetadata[] | null = null;
-  private static readonly TOKENS_URL = "https://unpkg.com/monday-ui-style@latest/dist/index.css";
+  private static readonly TOKENS_URL = "https://unpkg.com/@vibe/style@latest/dist/index.css";
 
   /**
    * Get all design tokens from the style package
diff --git a/packages/mcp/src/server/tools/v4-migration.ts b/packages/mcp/src/server/tools/v4-migration.ts
new file mode 100644
index 0000000000..46fc7ad497
--- /dev/null
+++ b/packages/mcp/src/server/tools/v4-migration.ts
@@ -0,0 +1,1230 @@
+import { getErrorMessage, MCPTool } from "../index.js";
+import { z } from "zod";
+import { readFileSync, existsSync, readdirSync, statSync } from "fs";
+import { join, resolve, extname } from "path";
+
+// ── Promoted Components (old @vibe/core → new @vibe/core/next in v3, now default in v4) ──
+
+const PROMOTED_COMPONENTS = ["Dropdown", "AttentionBox", "Modal", "DatePicker", "Dialog"] as const;
+
+interface OldComponentDetection {
+  component: string;
+  file: string;
+  line: number;
+  importSource: "old" | "new";
+  importStatement: string;
+}
+
+interface PromotedComponentAnalysis {
+  oldApiUsage: OldComponentDetection[];
+  newApiUsage: OldComponentDetection[];
+  summary: Record<string, { oldCount: number; newCount: number; oldFiles: string[]; newFiles: string[] }>;
+}
+
+const migrationGuideSchema = z.object({
+  projectPath: z.string().describe("Path to the project directory to analyze for migration")
+});
+
+export const v4MigrationTool: MCPTool<typeof migrationGuideSchema.shape> = {
+  name: "v4-migration",
+  description:
+    "Analyzes a project for Vibe 3 to Vibe 4 migration requirements. Scans for deprecated APIs, removed props, renamed components, and generates migration commands with file-level before/after replacements.",
+  inputSchema: migrationGuideSchema.shape,
+  execute: async input => {
+    try {
+      const { projectPath } = input;
+      const resolvedPath = resolve(projectPath);
+
+      if (!existsSync(resolvedPath)) {
+        return {
+          content: [
+            {
+              type: "text",
+              text: `Error: Project path "${resolvedPath}" does not exist.`
+            }
+          ],
+          isError: true
+        };
+      }
+
+      const projectInfo = {
+        targetDirectory: resolvedPath
+      };
+
+      const migrationData = getMigrationInstructions(projectInfo);
+      const analysis = await analyzeProject(resolvedPath);
+
+      const result = {
+        migrationGuide: migrationData,
+        promotedComponentMigrationGuide: getPromotedComponentMigrationGuide(),
+        projectInfo,
+        projectAnalysis: analysis,
+        recommendations: generateRecommendations(analysis, projectInfo)
+      };
+
+      return {
+        content: [
+          {
+            type: "text",
+            text: JSON.stringify(result, null, 2)
+          }
+        ]
+      };
+    } catch (e) {
+      const errorMessage = getErrorMessage(e);
+      return {
+        content: [
+          {
+            type: "text",
+            text: `Error in vibe-migration-tool: ${errorMessage}`
+          }
+        ],
+        isError: true
+      };
+    }
+  }
+};
+
+// ── Migration Instructions ───────────────────────────────────────────
+
+function getMigrationInstructions(projectInfo: { targetDirectory: string }) {
+  return {
+    overview: {
+      description: "Vibe 4 is a major update focused on React 19 support, ~170KB smaller bundle, and modern API patterns",
+      keyChanges: [
+        "React 19 support — findDOMNode, class components, and framer-motion removed",
+        "~170KB smaller bundle (min+gzip) from removing 8 heavy dependencies",
+        "All deprecated enum exports and static properties removed — use string literals",
+        "ARIA props standardized from camelCase to aria-* attributes",
+        "Package rename: monday-ui-style → @vibe/style",
+        "@vibe/core/next components promoted to @vibe/core (except List)",
+        "moment removed as peer dependency — DatePicker uses native Date + date-fns"
+      ]
+    },
+    packageChanges: {
+      upgrade: ["@vibe/core@^4"],
+      replace: [{ from: "monday-ui-style", to: "@vibe/style", note: "Uncommon — only a few consumers use this directly" }],
+      description: "Upgrade @vibe/core. The project analysis below will detect any dependencies that need to be removed or replaced."
+    },
+    importChanges: {
+      styleImports: {
+        from: "monday-ui-style",
+        to: "@vibe/style"
+      },
+      nextComponents: {
+        from: "@vibe/core/next",
+        to: "@vibe/core",
+        components: ["AttentionBox", "Dropdown", "DatePicker", "Dialog", "Modal"],
+        exception: "List remains in @vibe/core/next"
+      }
+    },
+    removedComponents: [
+      { name: "TipseenImage", replacement: "TipseenMedia with <img> child" },
+      { name: "AttentionBoxLink", replacement: "AttentionBox link prop" },
+      { name: "DropdownMenu", replacement: "New Dropdown API" },
+      { name: "DropdownOption", replacement: "New Dropdown API" },
+      { name: "DropdownSingleValue", replacement: "New Dropdown API" },
+      { name: "Combobox", replacement: "Dropdown with box mode (from @vibe/core)" }
+    ],
+    breakingChanges: {
+      AttentionBox: {
+        changes: [
+          'type values: "success" → "positive", "danger" → "negative", "dark" → "neutral"',
+          "entryAnimation → animate",
+          "withoutIcon / withIconWithoutHeader → icon={false}",
+          "AttentionBoxLink removed — use link prop"
+        ]
+      },
+      Chips: {
+        changes: ["disableClickableBehavior prop removed"]
+      },
+      Clickable: {
+        changes: [
+          "ariaHasPopup now accepts boolean only (was boolean | string)",
+          "tabIndex now accepts number only (was string | number)"
+        ]
+      },
+      CustomSvgIcon: {
+        changes: ["onClick and clickable props removed — wrap with a clickable element"]
+      },
+      DatePicker: {
+        changes: [
+          "date prop: moment.Moment → Date",
+          "onPickDate → onDateChange",
+          'range boolean → mode: "single" | "range"',
+          "moment no longer required as peer dependency"
+        ]
+      },
+      Dialog: {
+        changes: [
+          "modifiers prop removed — use middleware (Floating UI)",
+          "enableNestedDialogLayer removed — LayerProvider always used",
+          "addKeyboardHideShowTriggersByDefault default changed to true",
+          "Refable component removed from public exports"
+        ]
+      },
+      Dropdown: {
+        changes: [
+          "Options: { id, text } → { value, label }",
+          "Sub-components removed: DropdownMenu, DropdownOption, DropdownSingleValue"
+        ]
+      },
+      Flex: {
+        changes: ['"stretch" value removed from justify prop']
+      },
+      Icon: {
+        changes: ["iconLabel → label", "iconType → type", "iconSize → size", 'size prop now applies to type="src" icons']
+      },
+      LinearProgressBar: {
+        changes: ["Renamed to ProgressBar", "LinearProgressBarProps → ProgressBarProps"]
+      },
+      Link: {
+        changes: ["@supports CSS fallback removed for logical properties"]
+      },
+      MenuButton: {
+        changes: ["focusItemIndexOnMount now defaults to 0"]
+      },
+      MenuItem: {
+        changes: ["children accepts only single MenuChild, not array"]
+      },
+      Modal: {
+        changes: ["Legacy Modal removed — new functional Modal promoted from @vibe/core/next"]
+      },
+      Steps: {
+        changes: ["Finish button renders by default on last step"]
+      },
+      TextField: {
+        changes: ["iconName → icon", "iconsNames → flat iconLabel and secondaryIconLabel props"]
+      },
+      TextWithHighlight: {
+        changes: ['tooltipPosition removed — use tooltipProps={{ position }}']
+      },
+      Tipseen: {
+        changes: ["modifiers prop removed — use middleware"]
+      },
+      TipseenImage: {
+        changes: ["Removed — use TipseenMedia with <img> child"]
+      },
+      Toggle: {
+        changes: ["noSpacing prop removed — auto-removed when areLabelsHidden is true"]
+      },
+      Tooltip: {
+        changes: ["TooltipProps extends DialogProps", "modifiers removed — use middleware"]
+      },
+      VirtualizedList: {
+        changes: ["getItemHeight prop removed", "onVerticalScrollbarVisiblityChange prop removed"]
+      },
+      VirtualizedGrid: {
+        changes: ["itemRenderer return type corrected to ReactElement"]
+      }
+    },
+    hookChanges: {
+      useMergeRefs: { status: "removed", replacement: "Use react-merge-refs or implement your own" },
+      useListenFocusTriggers: { status: "removed", replacement: "Inline the logic using useEventListener" },
+      useActiveDescendantListFocus: {
+        status: "changed",
+        changes: ["onItemClickCallback and createOnItemClickCallback removed — use onItemClick directly"]
+      },
+      useKeyEvent: {
+        status: "changed",
+        changes: ["callback type: GenericEventCallback → KeyboardEventCallback (native KeyboardEvent)"]
+      }
+    },
+    typeChanges: {
+      VibeComponent: { status: "removed", replacement: "Use forwardRef<P, T> and let TypeScript infer" },
+      withStaticProps: { status: "removed", replacement: "No replacement — static properties removed in v4" },
+      withStaticPropsWithoutForwardRef: { status: "removed", replacement: "No replacement" }
+    },
+    cssChanges: {
+      spacingTokens: {
+        "--spacing-xs": "--space-4",
+        "--spacing-small": "--space-8",
+        "--spacing-medium": "--space-16",
+        "--spacing-large": "--space-24",
+        "--spacing-xl": "--space-32",
+        "--spacing-xxl": "--space-48",
+        "--spacing-xxxl": "--space-64"
+      },
+      inputPadding: "padding-inline-start reduced from 16px to 8px",
+      placeholderColor: "Inputs use var(--placeholder-color) instead of var(--secondary-text-color)"
+    },
+    migrationSteps: {
+      note: "⚠️ IMPORTANT: Follow these steps sequentially. Complete each step fully before proceeding to the next.",
+      steps: [
+        {
+          step: 1,
+          title: "Analyze Project",
+          action: "Run detailed analysis to understand what needs to be migrated",
+          description: "Use this migration tool to understand the scope of changes needed",
+          details: [
+            "Check package.json dependencies",
+            "Scan for deprecated APIs, removed props, and enum usage",
+            "Identify components with breaking changes",
+            "Check for ARIA prop usage and CSS token changes"
+          ],
+          note: "This analysis is already being performed by this tool - review the results carefully"
+        },
+        {
+          step: 2,
+          title: "Update Package Dependencies",
+          action: "Upgrade @vibe/core, replace monday-ui-style, remove unused dependencies",
+          command: "yarn add @vibe/core@^4 && yarn remove moment react-select",
+          description: "Update package.json and install new Vibe 4 packages",
+          important: "Do NOT proceed to step 3 until this completes successfully"
+        },
+        {
+          step: 3,
+          title: "Migrate Old Components to New API",
+          action: "Identify and migrate components that had old/new versions in Vibe 3",
+          description:
+            "In Vibe 3, Dropdown, AttentionBox, Modal, DatePicker, and Dialog had OLD versions in @vibe/core and NEW versions in @vibe/core/next. " +
+            "In Vibe 4, the NEW versions are now the default in @vibe/core. If you were importing these from @vibe/core (old API), " +
+            "your code now silently uses a completely different component with a different API.",
+          details: [
+            "Check the promotedComponentAnalysis section in the project analysis output",
+            "Components imported from @vibe/core (old API) need manual migration to the new API",
+            "Components imported from @vibe/core/next (new API) only need the import path updated (handled by codemod)",
+            "For Dropdown migration, use the dedicated 'dropdown-migration' tool for detailed guidance",
+            "Review the promotedComponentMigrationGuide for before/after examples per component"
+          ],
+          important: "⚠️ This step MUST be completed BEFORE running codemods. The codemods update import paths but do NOT transform old API usage to new API usage."
+        },
+        {
+          step: 4,
+          title: "Run Automated Migration",
+          action: `Run migration script: npx @vibe/codemod -m v4 --target "${projectInfo.targetDirectory}" --extensions tsx jsx -y`,
+          command: `npx @vibe/codemod -m v4 --target "${projectInfo.targetDirectory}" --extensions tsx jsx -y`,
+          description: "Handles enum→string, ARIA props, import renames, and component prop changes automatically.",
+          important: "⚠️ Complete step 3 (promoted component migration) BEFORE running this. After this script rewrites imports, old vs new API usage becomes indistinguishable.",
+          codemods: [
+            "Enums → string literals (Button.sizes.LARGE → \"large\")",
+            "ARIA camelCase → aria-* attributes",
+            "Icon prop renames (iconLabel → label, iconType → type, iconSize → size)",
+            "TextField prop renames (iconName → icon, iconsNames → flat props)",
+            "LinearProgressBar → ProgressBar rename",
+            "@vibe/core/next → @vibe/core import rewrite (List stays in /next)",
+            "monday-ui-style → @vibe/style import rewrite",
+            "Flex stretch removal, Toggle noSpacing removal, Chips disableClickableBehavior removal",
+            "Dialog enableNestedDialogLayer removal",
+            "TipseenImage → TipseenMedia, TextWithHighlight tooltipPosition → tooltipProps"
+          ]
+        },
+        {
+          step: 5,
+          title: "Manual Review and Fixes",
+          action: "Apply changes that codemods cannot handle",
+          description: "Use the projectAnalysis.manualChanges results to find and fix these issues",
+          details: [
+            "DatePicker: Replace moment objects with native Date, onPickDate → onDateChange, range → mode",
+            "Dropdown: Update options from { id, text } to { value, label }",
+            "Dialog/Tooltip/Tipseen: Replace modifiers with middleware (@floating-ui/react-dom)",
+            "CustomSvgIcon: Wrap with <button> or <Clickable> if onClick was used",
+            "AttentionBox: Update type values (success→positive, danger→negative, dark→neutral)",
+            "Modal: Review sub-component API changes (ModalHeader, ModalContent, ModalFooter)",
+            "useMergeRefs: Replace with react-merge-refs package",
+            "useListenFocusTriggers: Inline with useEventListener",
+            "VibeComponent type: Remove and use forwardRef directly",
+            "withStaticProps: Remove — static properties no longer used",
+            "CSS spacing tokens: Replace --spacing-* with --space-* in stylesheets"
+          ],
+          important: "Use the file:line references from projectAnalysis to locate each issue"
+        },
+        {
+          step: 6,
+          title: "Testing",
+          action: "Build and test application",
+          description: "Run build and tests to verify all functionality",
+          details: [
+            "Verify the project builds successfully (e.g., yarn build / npm run build)",
+            "Run all unit and integration tests",
+            "Verify the application works correctly in the browser"
+          ],
+          important: "Do not consider migration complete until build passes and all features work correctly"
+        },
+        {
+          step: 7,
+          title: "Migration Summary & Next Steps",
+          action: "Review migration completion",
+          description: "Congratulations! You've successfully migrated to Vibe 4.",
+          nextSteps: [
+            {
+              title: "Code Formatting (Optional)",
+              description: "Format your code according to your project's settings",
+              note: "Check your package.json scripts for available formatting commands"
+            },
+            {
+              title: "Show Your Support ⭐",
+              description: "If this migration helped you, consider giving the Vibe Design System a star!",
+              action: "Visit https://github.com/mondaycom/vibe and click the ⭐ Star button"
+            }
+          ],
+          important: "🎉 Migration to Vibe 4 is now complete!"
+        }
+      ]
+    }
+  };
+}
+
+// ── Project Analysis ─────────────────────────────────────────────────
+
+interface FileIssue {
+  file: string;
+  line: number;
+  match: string;
+  before: string;
+  after: string;
+}
+
+async function analyzeProject(projectPath: string) {
+  const analysis: any = {
+    packageJsonAnalysis: null,
+    importAnalysis: null,
+    componentUsage: null,
+    manualChanges: null,
+    promotedComponentAnalysis: null,
+    potentialIssues: []
+  };
+
+  const packageJsonPath = join(projectPath, "package.json");
+  if (existsSync(packageJsonPath)) {
+    try {
+      const packageJson = JSON.parse(readFileSync(packageJsonPath, "utf-8"));
+      analysis.packageJsonAnalysis = analyzePackageJson(packageJson);
+    } catch (e) {
+      analysis.potentialIssues.push(`Could not parse package.json: ${getErrorMessage(e)}`);
+    }
+  }
+
+  const files = getAllSourceFiles(projectPath);
+  const scanResult = scanAllFiles(files);
+  analysis.importAnalysis = scanResult.importAnalysis;
+  analysis.componentUsage = scanResult.componentUsage;
+  analysis.manualChanges = scanResult.manualChanges;
+  analysis.promotedComponentAnalysis = scanResult.promotedComponentAnalysis;
+
+  return analysis;
+}
+
+function analyzePackageJson(packageJson: any) {
+  const dependencies = { ...packageJson.dependencies, ...packageJson.devDependencies };
+  const hasVibeCore = !!dependencies["@vibe/core"];
+  const vibeCoreVersion = dependencies["@vibe/core"] || "not found";
+  const hasMondayUIStyle = !!dependencies["monday-ui-style"];
+
+  return {
+    hasVibeCore,
+    vibeCoreVersion,
+    hasMondayUIStyle,
+    migrationStatus: hasVibeCore ? "needs-migration" : "not-using-vibe",
+    dependencyActions: [
+      hasVibeCore && { action: "upgrade", package: "@vibe/core", from: vibeCoreVersion, to: "^4", command: "yarn add @vibe/core@^4" },
+      hasMondayUIStyle && { action: "replace", package: "monday-ui-style", with: "@vibe/style", command: "yarn add @vibe/style && yarn remove monday-ui-style" }
+    ].filter(Boolean)
+  };
+}
+
+function scanAllFiles(files: string[]) {
+  const importAnalysis: any = {
+    mondayUIStyleImports: [] as string[],
+    nextImports: [] as string[],
+    enumUsage: [] as string[],
+    ariaPropsUsage: [] as string[],
+    filesScanned: files.length
+  };
+
+  const componentUsage: any = {
+    renamedComponents: {} as Record<string, string[]>,
+    removedComponents: {} as Record<string, string[]>,
+    breakingChangeComponents: {} as Record<string, string[]>,
+    filesScanned: files.length
+  };
+
+  const manualChanges: Record<string, FileIssue[]> = {
+    datePickerMoment: [],
+    datePickerOnPickDate: [],
+    datePickerRange: [],
+    dropdownOldOptions: [],
+    dropdownSubComponents: [],
+    dialogModifiers: [],
+    tooltipModifiers: [],
+    tipseenModifiers: [],
+    customSvgIconOnClick: [],
+    attentionBoxTypeValues: [],
+    attentionBoxProps: [],
+    attentionBoxLink: [],
+    modalFromNext: [],
+    useMergeRefs: [],
+    useListenFocusTriggers: [],
+    vibeComponentType: [],
+    withStaticPropsUsage: [],
+    useActiveDescendantCallbacks: [],
+    useKeyEventCallback: [],
+    spacingTokens: []
+  };
+
+  const removedComponents = ["TipseenImage", "AttentionBoxLink", "DropdownMenu", "DropdownOption", "DropdownSingleValue", "Combobox"];
+  const breakingChangeComponents = [
+    "AttentionBox", "Chips", "CustomSvgIcon", "DatePicker", "Dialog", "Dropdown", "Flex",
+    "Icon", "LinearProgressBar", "MenuButton", "MenuItem", "Modal", "Steps",
+    "TextField", "TextWithHighlight", "Tipseen", "Toggle", "Tooltip",
+    "VirtualizedList", "VirtualizedGrid"
+  ];
+
+  for (const file of files) {
+    try {
+      const content = readFileSync(file, "utf-8");
+      const lines = content.split("\n");
+      const ext = extname(file);
+      const isStyleFile = ext === ".css" || ext === ".scss";
+
+      if (isStyleFile) {
+        scanStyleFile(file, lines, importAnalysis, manualChanges);
+        continue;
+      }
+
+      // Import analysis
+      if (content.includes("monday-ui-style")) {
+        importAnalysis.mondayUIStyleImports.push(file);
+      }
+      if (content.includes("@vibe/core/next")) {
+        importAnalysis.nextImports.push(file);
+      }
+      if (/\.\b(sizes|kinds|types|positions|colors|feedbacks)\b\.\b[A-Z_]+\b/.test(content)) {
+        importAnalysis.enumUsage.push(file);
+      }
+      if (/\bariaLabel\b|\bariaHidden\b|\bariaExpanded\b|\bariaControls\b|\bariaHasPopup\b|\bariaLabelledBy\b|\bariaLabeledBy\b|\bariaDescribedBy\b/.test(content)) {
+        importAnalysis.ariaPropsUsage.push(file);
+      }
+
+      // Component usage
+      if (content.includes("LinearProgressBar")) {
+        if (!componentUsage.renamedComponents["LinearProgressBar"]) componentUsage.renamedComponents["LinearProgressBar"] = [];
+        componentUsage.renamedComponents["LinearProgressBar"].push(file);
+      }
+
+      for (const comp of removedComponents) {
+        if (content.includes(comp)) {
+          if (!componentUsage.removedComponents[comp]) componentUsage.removedComponents[comp] = [];
+          componentUsage.removedComponents[comp].push(file);
+        }
+      }
+
+      for (const comp of breakingChangeComponents) {
+        if (content.includes(`<${comp}`) || content.includes(`${comp}.`)) {
+          if (!componentUsage.breakingChangeComponents[comp]) componentUsage.breakingChangeComponents[comp] = [];
+          componentUsage.breakingChangeComponents[comp].push(file);
+        }
+      }
+
+      // Manual changes — file:line level detection
+      scanManualChanges(file, lines, content, manualChanges);
+    } catch {
+      // Skip unreadable files
+    }
+  }
+
+  const promotedComponentAnalysis = detectPromotedComponentImports(files);
+
+  return { importAnalysis, componentUsage, manualChanges, promotedComponentAnalysis };
+}
+
+function scanStyleFile(file: string, lines: string[], importAnalysis: any, manualChanges: Record<string, FileIssue[]>) {
+  const spacingMap: Record<string, string> = {
+    "--spacing-xs": "--space-4",
+    "--spacing-small": "--space-8",
+    "--spacing-medium": "--space-16",
+    "--spacing-large": "--space-24",
+    "--spacing-xl": "--space-32",
+    "--spacing-xxl": "--space-48",
+    "--spacing-xxxl": "--space-64"
+  };
+
+  for (let i = 0; i < lines.length; i++) {
+    for (const [oldToken, newToken] of Object.entries(spacingMap)) {
+      if (lines[i].includes(oldToken)) {
+        manualChanges.spacingTokens.push({
+          file, line: i + 1, match: lines[i].trim(),
+          before: `var(${oldToken})`,
+          after: `var(${newToken})`
+        });
+      }
+    }
+    if (lines[i].includes("monday-ui-style")) {
+      importAnalysis.mondayUIStyleImports.push(file);
+    }
+  }
+}
+
+function scanManualChanges(file: string, lines: string[], content: string, manualChanges: Record<string, FileIssue[]>) {
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+
+    // DatePicker: moment → Date
+    if (content.includes("DatePicker") && /\bmoment\b/.test(line) && !line.trimStart().startsWith("//")) {
+      manualChanges.datePickerMoment.push({
+        file, line: i + 1, match: line.trim(),
+        before: 'moment("2023-05-01")',
+        after: 'new Date("2023-05-01")'
+      });
+    }
+
+    // DatePicker: onPickDate → onDateChange
+    if (line.includes("onPickDate")) {
+      manualChanges.datePickerOnPickDate.push({
+        file, line: i + 1, match: line.trim(),
+        before: "onPickDate={(d) => setDate(d)}",
+        after: "onDateChange={(d) => setDate(d)}"
+      });
+    }
+
+    // DatePicker: range → mode
+    if (content.includes("DatePicker") && /\brange\b/.test(line) && !line.includes("mode")) {
+      manualChanges.datePickerRange.push({
+        file, line: i + 1, match: line.trim(),
+        before: "<DatePicker range />",
+        after: '<DatePicker mode="range" />'
+      });
+    }
+
+    // Dropdown: { id, text } → { value, label }
+    if (content.includes("Dropdown") && (/\{\s*id\s*:.*text\s*:/.test(line) || /\{\s*text\s*:.*id\s*:/.test(line))) {
+      manualChanges.dropdownOldOptions.push({
+        file, line: i + 1, match: line.trim(),
+        before: '{ id: "1", text: "Option 1" }',
+        after: '{ value: "1", label: "Option 1" }'
+      });
+    }
+
+    // Dropdown sub-components
+    for (const subComp of ["DropdownMenu", "DropdownOption", "DropdownSingleValue"]) {
+      if (line.includes(subComp)) {
+        manualChanges.dropdownSubComponents.push({
+          file, line: i + 1, match: line.trim(),
+          before: subComp,
+          after: "// removed — use new Dropdown API. See: https://vibe.monday.com/?path=/docs/components-dropdown-migration-guide--docs"
+        });
+      }
+    }
+
+    // Dialog/Tooltip/Tipseen: modifiers → middleware
+    if (/\bmodifiers\b/.test(line)) {
+      if (content.includes("<Dialog")) {
+        manualChanges.dialogModifiers.push({
+          file, line: i + 1, match: line.trim(),
+          before: 'modifiers={[{ name: "offset", options: { offset: [0, 8] } }]}',
+          after: 'middleware={[offset(8)]}  // import { offset } from "@floating-ui/react-dom"'
+        });
+      }
+      if (content.includes("<Tooltip")) {
+        manualChanges.tooltipModifiers.push({
+          file, line: i + 1, match: line.trim(),
+          before: "modifiers={...}",
+          after: "middleware={...}  // use @floating-ui/react-dom middleware"
+        });
+      }
+      if (content.includes("<Tipseen")) {
+        manualChanges.tipseenModifiers.push({
+          file, line: i + 1, match: line.trim(),
+          before: "modifiers={...}",
+          after: "middleware={...}  // use @floating-ui/react-dom middleware"
+        });
+      }
+    }
+
+    // CustomSvgIcon: onClick removed
+    if (content.includes("CustomSvgIcon") && /\bonClick\b/.test(line)) {
+      manualChanges.customSvgIconOnClick.push({
+        file, line: i + 1, match: line.trim(),
+        before: "<CustomSvgIcon onClick={handleClick} clickable />",
+        after: '<button onClick={handleClick}><CustomSvgIcon /></button>  // or use <Clickable>'
+      });
+    }
+
+    // AttentionBox: type value changes
+    if (content.includes("AttentionBox")) {
+      const typeMatch = line.match(/type\s*=\s*["'](success|danger|dark)["']/);
+      if (typeMatch) {
+        const oldType = typeMatch[1];
+        const newType = oldType === "success" ? "positive" : oldType === "danger" ? "negative" : "neutral";
+        manualChanges.attentionBoxTypeValues.push({
+          file, line: i + 1, match: line.trim(),
+          before: `type="${oldType}"`,
+          after: `type="${newType}"`
+        });
+      }
+      if (line.includes("entryAnimation")) {
+        manualChanges.attentionBoxProps.push({
+          file, line: i + 1, match: line.trim(), before: "entryAnimation", after: "animate"
+        });
+      }
+      if (line.includes("withoutIcon") || line.includes("withIconWithoutHeader")) {
+        manualChanges.attentionBoxProps.push({
+          file, line: i + 1, match: line.trim(), before: "withoutIcon", after: "icon={false}"
+        });
+      }
+    }
+
+    // AttentionBoxLink
+    if (line.includes("AttentionBoxLink")) {
+      manualChanges.attentionBoxLink.push({
+        file, line: i + 1, match: line.trim(),
+        before: '<AttentionBoxLink href="/docs" text="Learn more" />',
+        after: '// use AttentionBox link prop: link={{ href: "/docs", text: "Learn more" }}'
+      });
+    }
+
+    // Modal from @vibe/core/next
+    if (line.includes("Modal") && line.includes("@vibe/core/next")) {
+      manualChanges.modalFromNext.push({
+        file, line: i + 1, match: line.trim(),
+        before: 'import { Modal } from "@vibe/core/next"',
+        after: 'import { Modal } from "@vibe/core"  // review ModalHeader/ModalContent/ModalFooter API changes'
+      });
+    }
+
+    // useMergeRefs
+    if (line.includes("useMergeRefs")) {
+      manualChanges.useMergeRefs.push({
+        file, line: i + 1, match: line.trim(),
+        before: 'import { useMergeRefs } from "@vibe/core";\nconst ref = useMergeRefs({ refs: [ref1, ref2] });',
+        after: 'import { mergeRefs } from "react-merge-refs";\nconst ref = mergeRefs([ref1, ref2]);'
+      });
+    }
+
+    // useListenFocusTriggers
+    if (line.includes("useListenFocusTriggers")) {
+      manualChanges.useListenFocusTriggers.push({
+        file, line: i + 1, match: line.trim(),
+        before: "useListenFocusTriggers({ ref, onFocusByKeyboard, onFocusByMouse })",
+        after: 'Inline using useEventListener:\nuseEventListener({ eventName: "focusin", callback: ..., ref });\nuseEventListener({ eventName: "mousedown", callback: ..., ref });'
+      });
+    }
+
+    // VibeComponent type
+    if (/\bVibeComponent\b/.test(line) && !line.includes("VibeComponentProps")) {
+      manualChanges.vibeComponentType.push({
+        file, line: i + 1, match: line.trim(),
+        before: "const MyComp: VibeComponent<MyProps, HTMLDivElement> = forwardRef(...)",
+        after: "const MyComp = forwardRef<HTMLDivElement, MyProps>(...)  // let TS infer"
+      });
+    }
+
+    // withStaticProps
+    if (line.includes("withStaticProps")) {
+      manualChanges.withStaticPropsUsage.push({
+        file, line: i + 1, match: line.trim(),
+        before: "export default withStaticProps(MyComponent, { sizes: MySizes })",
+        after: "export default MyComponent  // static properties removed in v4"
+      });
+    }
+
+    // useActiveDescendantListFocus removed callbacks
+    if (line.includes("onItemClickCallback") || line.includes("createOnItemClickCallback")) {
+      manualChanges.useActiveDescendantCallbacks.push({
+        file, line: i + 1, match: line.trim(),
+        before: "const { onItemClickCallback } = useActiveDescendantListFocus(...)",
+        after: "// use onItemClick directly instead"
+      });
+    }
+
+    // useKeyEvent callback type
+    if (line.includes("GenericEventCallback") && content.includes("useKeyEvent")) {
+      manualChanges.useKeyEventCallback.push({
+        file, line: i + 1, match: line.trim(),
+        before: "callback: GenericEventCallback",
+        after: "callback: KeyboardEventCallback  // native KeyboardEvent"
+      });
+    }
+  }
+}
+
+// ── Promoted Component Detection ─────────────────────────────────────
+
+/**
+ * Collapses multi-line imports into single logical lines, preserving the
+ * start line number of the `import` keyword.
+ *
+ * e.g.
+ *   import {         <- line 3
+ *     Dropdown,
+ *     Button
+ *   } from "@vibe/core";
+ *
+ * becomes: { text: 'import { Dropdown, Button } from "@vibe/core";', line: 3 }
+ */
+function collapseImportLines(lines: string[]): Array<{ text: string; line: number }> {
+  const result: Array<{ text: string; line: number }> = [];
+  let i = 0;
+
+  while (i < lines.length) {
+    const line = lines[i];
+
+    if (/^\s*import\s+\{/.test(line)) {
+      const startLine = i + 1; // 1-based
+      let accumulated = line;
+
+      // If the closing brace and `from` are not on this line, keep accumulating
+      while (!/\}\s*from\s+["']/.test(accumulated) && i + 1 < lines.length) {
+        i++;
+        accumulated = accumulated.trimEnd() + " " + lines[i].trim();
+      }
+
+      result.push({ text: accumulated, line: startLine });
+    } else {
+      result.push({ text: line, line: i + 1 });
+    }
+
+    i++;
+  }
+
+  return result;
+}
+
+function detectPromotedComponentImports(files: string[]): PromotedComponentAnalysis {
+  const oldApiUsage: OldComponentDetection[] = [];
+  const newApiUsage: OldComponentDetection[] = [];
+  const summary: PromotedComponentAnalysis["summary"] = {};
+
+  for (const comp of PROMOTED_COMPONENTS) {
+    summary[comp] = { oldCount: 0, newCount: 0, oldFiles: [], newFiles: [] };
+  }
+
+  // Match import statements from @vibe/core or @vibe/core/next (both quote styles)
+  const importRegex = /import\s+\{([^}]+)\}\s+from\s+["'](@vibe\/core(?:\/next)?)["']/;
+
+  for (const file of files) {
+    try {
+      const content = readFileSync(file, "utf-8");
+      const lines = content.split("\n");
+      const logicalLines = collapseImportLines(lines);
+
+      for (const { text, line } of logicalLines) {
+        const match = importRegex.exec(text);
+        if (!match) continue;
+
+        const importedNames = match[1].split(",").map(s => s.trim().split(/\s+as\s+/)[0].trim()).filter(Boolean);
+        const source = match[2];
+        const isNext = source === "@vibe/core/next";
+
+        for (const name of importedNames) {
+          if ((PROMOTED_COMPONENTS as readonly string[]).includes(name)) {
+            const detection: OldComponentDetection = {
+              component: name,
+              file,
+              line,
+              importSource: isNext ? "new" : "old",
+              importStatement: text.trim()
+            };
+
+            if (isNext) {
+              newApiUsage.push(detection);
+              summary[name].newCount++;
+              if (!summary[name].newFiles.includes(file)) {
+                summary[name].newFiles.push(file);
+              }
+            } else {
+              oldApiUsage.push(detection);
+              summary[name].oldCount++;
+              if (!summary[name].oldFiles.includes(file)) {
+                summary[name].oldFiles.push(file);
+              }
+            }
+          }
+        }
+      }
+    } catch {
+      // Skip unreadable files
+    }
+  }
+
+  return { oldApiUsage, newApiUsage, summary };
+}
+
+function getPromotedComponentMigrationGuide() {
+  return {
+    description:
+      "In Vibe 3, these components had OLD versions in @vibe/core and NEW versions in @vibe/core/next. " +
+      "In Vibe 4, the NEW versions are now the default in @vibe/core. If you were using the OLD version " +
+      "from @vibe/core, your import path is now 'correct' but points to a completely different component with a different API.",
+    components: {
+      Dropdown: {
+        severity: "critical" as const,
+        migrateTool: "dropdown-migration",
+        note: "Use the 'dropdown-migration' tool for complete Dropdown migration guidance including API changes, before/after examples, and step-by-step instructions."
+      },
+      AttentionBox: {
+        severity: "high" as const,
+        apiChanges: [
+          'type values renamed: "success" → "positive", "danger" → "negative", "dark" → "neutral"',
+          "entryAnimation → animate",
+          "withoutIcon / withIconWithoutHeader → icon={false}",
+          "AttentionBoxLink removed — use link prop"
+        ],
+        before: `import { AttentionBox } from "@vibe/core";\n<AttentionBox type="danger" entryAnimation withoutIcon />`,
+        after: `import { AttentionBox } from "@vibe/core";\n<AttentionBox type="negative" animate icon={false} />`
+      },
+      Modal: {
+        severity: "critical" as const,
+        apiChanges: [
+          "id prop is now required",
+          "show prop controls visibility (replaces external state pattern)",
+          "width → size (\"small\" | \"medium\" | \"large\")",
+          "Layout via ModalHeader, ModalContent, ModalFooter sub-components",
+          "ModalFooterButtons removed — use ModalFooter with Button children"
+        ],
+        before: `import { Modal } from "@vibe/core";\n<Modal title="My Modal" width={500}>{content}</Modal>`,
+        after: `import { Modal } from "@vibe/core";\n<Modal id="my-modal" show={isOpen} onClose={onClose} size="medium">\n  <ModalHeader title="My Modal" />\n  <ModalContent>{content}</ModalContent>\n</Modal>`
+      },
+      DatePicker: {
+        severity: "critical" as const,
+        apiChanges: [
+          "date prop: moment.Moment → native Date",
+          "onPickDate → onDateChange",
+          'range boolean → mode: "single" | "range"',
+          "shouldBlockDay → isDateDisabled",
+          "moment no longer a peer dependency — uses date-fns internally"
+        ],
+        before: `import { DatePicker } from "@vibe/core";\n<DatePicker date={moment("2024-01-01")} onPickDate={handler} range />`,
+        after: `import { DatePicker } from "@vibe/core";\n<DatePicker date={new Date("2024-01-01")} onDateChange={handler} mode="range" />`
+      },
+      Dialog: {
+        severity: "high" as const,
+        apiChanges: [
+          "modifiers → middleware (uses @floating-ui/react-dom)",
+          "enableNestedDialogLayer removed — LayerProvider is always used",
+          "addKeyboardHideShowTriggersByDefault default changed to true"
+        ],
+        before: `import { Dialog } from "@vibe/core";\n<Dialog modifiers={[{ name: "offset", options: { offset: [0, 8] } }]} enableNestedDialogLayer>`,
+        after: `import { Dialog } from "@vibe/core";\n<Dialog middleware={[offset(8)]}>  // import { offset } from "@floating-ui/react-dom"`
+      }
+    }
+  };
+}
+
+// ── File Discovery ───────────────────────────────────────────────────
+
+function getAllSourceFiles(dir: string): string[] {
+  const files: string[] = [];
+  const validExtensions = [".ts", ".tsx", ".js", ".jsx", ".css", ".scss"];
+
+  function scanDirectory(currentDir: string, depth = 0) {
+    if (depth > 5) return;
+    try {
+      const entries = readdirSync(currentDir);
+      for (const entry of entries) {
+        if (entry.startsWith(".") || entry === "node_modules" || entry === "dist" || entry === "build") continue;
+        const fullPath = join(currentDir, entry);
+        try {
+          const stat = statSync(fullPath);
+          if (stat.isDirectory()) {
+            scanDirectory(fullPath, depth + 1);
+          } else if (stat.isFile() && validExtensions.includes(extname(entry))) {
+            files.push(fullPath);
+          }
+        } catch { /* skip */ }
+      }
+    } catch { /* skip */ }
+  }
+
+  scanDirectory(dir);
+  return files;
+}
+
+// ── Recommendations ──────────────────────────────────────────────────
+
+function generateRecommendations(analysis: any, projectInfo: { targetDirectory: string }) {
+  const recommendations = [];
+
+  // Package recommendations
+  if (analysis.packageJsonAnalysis) {
+    const pkg = analysis.packageJsonAnalysis;
+
+    if (pkg.migrationStatus === "needs-migration") {
+      recommendations.push({
+        type: "package-upgrade",
+        priority: "high",
+        action: "Upgrade @vibe/core to v4",
+        command: "yarn add @vibe/core@^4",
+        details: "This is the first step in the migration process"
+      });
+    }
+
+    if (pkg.dependencyActions.length > 0) {
+      recommendations.push({
+        type: "dependency-cleanup",
+        priority: "high",
+        action: "Remove/replace deprecated dependencies",
+        details: `${pkg.dependencyActions.length} dependency changes needed`,
+        commands: pkg.dependencyActions.map((d: any) => d.command)
+      });
+    }
+  }
+
+  // Import recommendations
+  if (analysis.importAnalysis) {
+    const imports = analysis.importAnalysis;
+
+    if (imports.mondayUIStyleImports?.length > 0) {
+      recommendations.push({
+        type: "style-imports",
+        priority: "medium",
+        action: "Update monday-ui-style imports to @vibe/style",
+        details: `Found ${imports.mondayUIStyleImports.length} files. Note: most consumers don't use monday-ui-style directly.`,
+        files: imports.mondayUIStyleImports.slice(0, 5),
+        fix: "Handled by codemod: packages-rename-migration"
+      });
+    }
+
+    if (imports.nextImports?.length > 0) {
+      recommendations.push({
+        type: "next-imports",
+        priority: "high",
+        action: "Update @vibe/core/next imports to @vibe/core",
+        details: `Found ${imports.nextImports.length} files`,
+        files: imports.nextImports.slice(0, 5),
+        fix: "Handled by codemod: next-imports-migration (List stays in /next)"
+      });
+    }
+
+    if (imports.ariaPropsUsage?.length > 0) {
+      recommendations.push({
+        type: "aria-props",
+        priority: "high",
+        action: "Update camelCase ARIA props to standard aria-* attributes",
+        details: `Found ${imports.ariaPropsUsage.length} files`,
+        files: imports.ariaPropsUsage.slice(0, 5),
+        fix: "Handled by codemod: Aria-props-migration"
+      });
+    }
+
+    if (imports.enumUsage?.length > 0) {
+      recommendations.push({
+        type: "enum-usage",
+        priority: "high",
+        action: "Replace enum static properties with string literals",
+        details: `Found ${imports.enumUsage.length} files`,
+        files: imports.enumUsage.slice(0, 5),
+        fix: "Handled by codemod: Enums-migration"
+      });
+    }
+  }
+
+  // Component usage recommendations
+  if (analysis.componentUsage) {
+    const usage = analysis.componentUsage;
+
+    Object.entries(usage.renamedComponents || {}).forEach(([component, files]: [string, any]) => {
+      recommendations.push({
+        type: "renamed-component",
+        priority: "high",
+        action: `Rename ${component} → ${getComponentReplacement(component)}`,
+        details: `Found ${files.length} files`,
+        files: files.slice(0, 5),
+        fix: "Handled by codemod"
+      });
+    });
+
+    Object.entries(usage.removedComponents || {}).forEach(([component, files]: [string, any]) => {
+      recommendations.push({
+        type: "removed-component",
+        priority: "high",
+        action: `Replace removed component: ${component}`,
+        details: `Found ${files.length} files`,
+        files: files.slice(0, 5),
+        fix: getComponentReplacementDetails(component)
+      });
+    });
+
+    Object.entries(usage.breakingChangeComponents || {}).forEach(([component, files]: [string, any]) => {
+      recommendations.push({
+        type: "breaking-change",
+        priority: "medium",
+        action: `Review ${component} usage`,
+        details: `Found ${files.length} files using ${component} - check for breaking changes`,
+        files: files.slice(0, 5),
+        fix: getBreakingChangeDetails(component)
+      });
+    });
+  }
+
+  // Manual changes recommendations
+  if (analysis.manualChanges) {
+    const manual = analysis.manualChanges;
+    const manualIssueCount = Object.values(manual).reduce((sum: number, arr: any) => sum + arr.length, 0);
+
+    if (manualIssueCount > 0) {
+      recommendations.push({
+        type: "manual-changes",
+        priority: "high",
+        action: "Apply manual changes that codemods cannot handle",
+        details: `${manualIssueCount} issues found across ${Object.entries(manual).filter(([, arr]: [string, any]) => arr.length > 0).length} categories`,
+        categories: Object.entries(manual)
+          .filter(([, arr]: [string, any]) => arr.length > 0)
+          .map(([key, arr]: [string, any]) => `${key}: ${arr.length} issues`),
+        important: "Review the manualChanges section for file:line locations and before/after replacements"
+      });
+    }
+  }
+
+  // Promoted component recommendations
+  if (analysis.promotedComponentAnalysis) {
+    const promoted = analysis.promotedComponentAnalysis as PromotedComponentAnalysis;
+    const guide = getPromotedComponentMigrationGuide();
+
+    for (const [component, counts] of Object.entries(promoted.summary)) {
+      const componentGuide = guide.components[component as keyof typeof guide.components];
+      if (!componentGuide) continue;
+
+      if (counts.oldCount > 0) {
+        const recommendation: any = {
+          type: "promoted-component-old-api",
+          priority: componentGuide.severity,
+          action: `Migrate ${component} from old API to new API`,
+          details:
+            `Found ${counts.oldCount} import(s) of ${component} from @vibe/core (old API) across ${counts.oldFiles.length} file(s). ` +
+            `After upgrading to Vibe 4, these imports will silently point to the NEW ${component} which has a different API.`,
+          files: counts.oldFiles.slice(0, 10),
+          important: "⚠️ Must be resolved BEFORE running codemods (step 3 must be done before step 4)"
+        };
+
+        if ("migrateTool" in componentGuide) {
+          recommendation.migrateTool = componentGuide.migrateTool;
+          recommendation.note = componentGuide.note;
+        } else {
+          recommendation.apiChanges = componentGuide.apiChanges;
+          recommendation.before = componentGuide.before;
+          recommendation.after = componentGuide.after;
+        }
+
+        recommendations.push(recommendation);
+      }
+
+      if (counts.newCount > 0) {
+        recommendations.push({
+          type: "promoted-component-new-api",
+          priority: "info",
+          action: `${component}: already using new API from @vibe/core/next`,
+          details:
+            `Found ${counts.newCount} import(s) of ${component} from @vibe/core/next (new API) across ${counts.newFiles.length} file(s). ` +
+            `The codemod will automatically update the import path from @vibe/core/next to @vibe/core.`,
+          files: counts.newFiles.slice(0, 10),
+          fix: "Handled by codemod: next-imports-migration"
+        });
+      }
+    }
+  }
+
+  // Migration script
+  recommendations.push({
+    type: "migration-script",
+    priority: "high",
+    action: "Run automated migration script",
+    command: `npx @vibe/codemod -m v4 --target "${projectInfo.targetDirectory}" --extensions tsx jsx -y`,
+    details: "Handles enums, ARIA props, import renames, and component prop migrations automatically",
+    warning: "⚠️ ONLY run this AFTER completing promoted component migration (step 3). After codemods rewrite imports, old vs new API usage becomes indistinguishable."
+  });
+
+  // CSS tokens
+  if (analysis.manualChanges?.spacingTokens?.length > 0) {
+    recommendations.push({
+      type: "css-tokens",
+      priority: "medium",
+      action: "Update deprecated CSS spacing tokens",
+      details: `Found ${analysis.manualChanges.spacingTokens.length} uses of deprecated --spacing-* tokens`,
+      fix: "Replace --spacing-xs/small/medium/large/xl/xxl/xxxl with --space-4/8/16/24/32/48/64"
+    });
+  }
+
+  recommendations.push({
+    type: "manual-review",
+    priority: "medium",
+    action: "Manual review and fixes",
+    details: "Review breaking changes and apply manual fixes",
+    warning: "⚠️ Promoted component migration (step 3) must be done BEFORE codemods. Other manual fixes (step 5) should be done AFTER."
+  });
+
+  recommendations.push({
+    type: "testing",
+    priority: "high",
+    action: "Thorough testing required",
+    details: [
+      "Test DatePicker with native Date objects",
+      "Verify Dialog/Tooltip/Tipseen positioning (Floating UI)",
+      "Check Dropdown options with new { value, label } structure",
+      "Test Modal behavior and sub-component APIs",
+      "Verify ARIA attributes render correctly",
+      "Check CSS spacing and layout"
+    ],
+    warning: "⚠️ ONLY test AFTER completing manual fixes (step 5)"
+  });
+
+  recommendations.push({
+    type: "sequential-steps",
+    priority: "critical",
+    action: "Follow migration steps in order",
+    details: "Use the migrationSteps guide to follow the process sequentially",
+    warning: "🚨 DO NOT skip steps or work on multiple steps simultaneously"
+  });
+
+  recommendations.push({
+    type: "formatting",
+    priority: "info",
+    action: "Format code according to your project settings",
+    details: "Run your project's formatting commands after migration is complete"
+  });
+
+  recommendations.push({
+    type: "github-star",
+    priority: "info",
+    action: "Show your support with a GitHub star ⭐",
+    details: "If this migration tool helped you, consider starring the Vibe repository",
+    link: "https://github.com/mondaycom/vibe"
+  });
+
+  return recommendations;
+}
+
+function getComponentReplacement(component: string): string {
+  const replacements: Record<string, string> = {
+    LinearProgressBar: "ProgressBar"
+  };
+  return replacements[component] || component;
+}
+
+function getComponentReplacementDetails(component: string): string {
+  const replacements: Record<string, string> = {
+    TipseenImage: "Use TipseenMedia with an <img> child",
+    AttentionBoxLink: "Use the AttentionBox link prop instead",
+    DropdownMenu: "Removed — use new Dropdown API",
+    DropdownOption: "Removed — use new Dropdown API",
+    DropdownSingleValue: "Removed — use new Dropdown API",
+    Combobox: "Deprecated — use Dropdown with box mode from @vibe/core"
+  };
+  return replacements[component] || "Check migration guide for replacement";
+}
+
+function getBreakingChangeDetails(component: string): string {
+  const details: Record<string, string> = {
+    AttentionBox: 'Type values changed (success→positive, danger→negative, dark→neutral). entryAnimation→animate. withoutIcon→icon={false}',
+    Chips: "disableClickableBehavior prop removed",
+    CustomSvgIcon: "onClick and clickable props removed — wrap with clickable element",
+    DatePicker: "moment→Date, onPickDate→onDateChange, range→mode. Requires manual migration.",
+    Dialog: "modifiers→middleware (Floating UI). enableNestedDialogLayer removed.",
+    Dropdown: "Options: { id, text } → { value, label }. Sub-components removed. Requires manual migration.",
+    Flex: '"stretch" value removed from justify prop',
+    Icon: "iconLabel→label, iconType→type, iconSize→size",
+    LinearProgressBar: "Renamed to ProgressBar",
+    MenuButton: "focusItemIndexOnMount now defaults to 0",
+    MenuItem: "children accepts only single MenuChild",
+    Modal: "Legacy Modal removed — review new API",
+    Steps: "Finish button renders by default on last step",
+    TextField: "iconName→icon, iconsNames→flat iconLabel/secondaryIconLabel props",
+    TextWithHighlight: "tooltipPosition→tooltipProps",
+    Tipseen: "modifiers→middleware",
+    Toggle: "noSpacing prop removed",
+    Tooltip: "modifiers→middleware",
+    VirtualizedList: "getItemHeight and onVerticalScrollbarVisiblityChange props removed",
+    VirtualizedGrid: "itemRenderer return type corrected to ReactElement"
+  };
+  return details[component] || "Check migration guide for specific changes";
+}
diff --git a/packages/shared/package.json b/packages/shared/package.json
index 0c9fc9623d..5c4e9365d1 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vibe/shared",
-  "version": "3.0.8",
+  "version": "4.0.0-rc.0",
   "description": "Shared utilities for Vibe packages",
   "repository": {
     "type": "git",
@@ -34,12 +34,12 @@
     "lint:fix": "yarn lint -- --fix"
   },
   "devDependencies": {
-    "@vibe/config": "3.0.5",
+    "@vibe/config": "^4.0.0-rc.0",
     "@vitejs/plugin-react": "^4.3.1",
     "prettier": "^2.5.1",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "typescript": "^4.7.3"
+    "typescript": "^5.9.3"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
diff --git a/packages/shared/src/hooks/useKeyEvent.ts b/packages/shared/src/hooks/useKeyEvent.ts
index 90fc6f40d9..7b8dee7843 100644
--- a/packages/shared/src/hooks/useKeyEvent.ts
+++ b/packages/shared/src/hooks/useKeyEvent.ts
@@ -1,6 +1,6 @@
+import type React from "react";
 import { type RefObject, useCallback, useRef } from "react";
 import { useEventListener } from "./useEventListener";
-import { type GenericEventCallback } from "../types/events";
 import { isClient } from "../utils/ssr-utils";
 
 const CTRL_OR_META = "ctrlOrMetaKey";
@@ -33,11 +33,10 @@ export interface UseKeyEventArgs {
    * The list of keys that should trigger the event.
    */
   keys: KeyboardEvent["key"][];
-  // TODO: [breaking] change to keyboard event
   /**
    * Callback fired when a specified key is pressed.
    */
-  callback: GenericEventCallback;
+  callback: (event: KeyboardEvent | React.KeyboardEvent) => void;
   /**
    * Modifier key that must be pressed along with the specified key.
    */
diff --git a/packages/shared/src/tests/constants.ts b/packages/shared/src/tests/constants.ts
index 17e7c23244..0d445aa2c6 100644
--- a/packages/shared/src/tests/constants.ts
+++ b/packages/shared/src/tests/constants.ts
@@ -53,7 +53,7 @@ export enum ComponentDefaultTestId {
   BREADCRUMBS_BAR = "breadcrumbs-bar",
   BREADCRUMB_MENU = "breadcrumb-menu",
   BREADCRUMB_MENU_ITEM = "breadcrumb-menu-item",
-  LINEAR_PROGRESS_BAR = "linear-progress-bar",
+  PROGRESS_BAR = "progress-bar",
   BAR = "bar",
   BAR_PRIMARY = "bar-primary",
   BAR_SECONDARY = "bar-secondary",
@@ -103,21 +103,16 @@ export enum ComponentDefaultTestId {
   ICON = "icon",
   RESPONSIVE_LIST = "responsive-list",
   LIST = "list",
-  MODAL = "monday-dialog-container",
-  MODAL_OVERLAY = "monday-modal-overlay",
-  MODAL_CONTENT = "modal-content",
+  MODAL = "modal",
+  MODAL_OVERLAY = "modal-overlay",
   MODAL_HEADER = "modal-header",
-  MODAL_FOOTER_BUTTONS = "modal-footer-buttons",
-  MODAL_NEXT = "modal",
-  MODAL_NEXT_OVERLAY = "modal-overlay",
-  MODAL_NEXT_HEADER = "modal-header-next",
-  MODAL_NEXT_CLOSE_BUTTON = "modal-close-button",
-  MODAL_NEXT_CONTENT = "modal-content-next",
-  MODAL_NEXT_FOOTER = "modal-footer",
-  MODAL_NEXT_MEDIA = "modal-media",
-  MODAL_NEXT_BASIC_LAYOUT = "modal-basic-layout",
-  MODAL_NEXT_SIDE_BY_SIDE_LAYOUT = "modal-side-by-side-layout",
-  MODAL_NEXT_MEDIA_LAYOUT = "modal-media-layout",
+  MODAL_CLOSE_BUTTON = "modal-close-button",
+  MODAL_CONTENT = "modal-content",
+  MODAL_FOOTER = "modal-footer",
+  MODAL_MEDIA = "modal-media",
+  MODAL_BASIC_LAYOUT = "modal-basic-layout",
+  MODAL_SIDE_BY_SIDE_LAYOUT = "modal-side-by-side-layout",
+  MODAL_MEDIA_LAYOUT = "modal-media-layout",
   FORMATTED_NUMBER = "formatted-number",
   HIDDEN_TEXT = "hidden-text",
   DIALOG_CONTENT_CONTAINER = "dialog-content-container",
@@ -174,7 +169,7 @@ export enum ComponentVibeId {
   ICON = "Icon",
   ICON_BUTTON = "IconButton",
   LABEL = "Label",
-  LINEAR_PROGRESS_BAR = "LinearProgressBar",
+  PROGRESS_BAR = "ProgressBar",
   LINK = "Link",
   LIST = "List",
   LOADER = "Loader",
diff --git a/packages/shared/src/types/VibeComponent.ts b/packages/shared/src/types/VibeComponent.ts
deleted file mode 100644
index 4b4fdb39d7..0000000000
--- a/packages/shared/src/types/VibeComponent.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { type ForwardRefExoticComponent, type RefAttributes } from "react";
-
-type VibeComponent<T, P = HTMLElement> = ForwardRefExoticComponent<T & RefAttributes<P>>;
-
-export default VibeComponent;
diff --git a/packages/shared/src/types/index.ts b/packages/shared/src/types/index.ts
index 854f673cbe..ddbc4e97de 100644
--- a/packages/shared/src/types/index.ts
+++ b/packages/shared/src/types/index.ts
@@ -1,7 +1,5 @@
 export * from "./events";
-export type { default as VibeComponent } from "./VibeComponent";
 export type { default as VibeComponentProps } from "./VibeComponentProps";
-export * from "./withStaticProps";
 export * from "./ArrayLastElement";
 export * from "./SplitString";
 export * from "./ElementContent";
diff --git a/packages/shared/src/types/withStaticProps.ts b/packages/shared/src/types/withStaticProps.ts
deleted file mode 100644
index 318c86489a..0000000000
--- a/packages/shared/src/types/withStaticProps.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { type FC, type ForwardRefExoticComponent, type RefAttributes } from "react";
-type Required<T> = {
-  [P in keyof T]-?: T[P];
-};
-
-export const withStaticProps = <Props, StaticProps, Ref = HTMLElement>(
-  component: ForwardRefExoticComponent<Props & RefAttributes<Ref>>,
-  staticProps: Required<StaticProps>
-) => Object.assign(component, staticProps);
-
-export const withStaticPropsWithoutForwardRef = <Props, StaticProps>(
-  component: FC<Props>,
-  staticProps: Required<StaticProps>
-) => Object.assign(component, staticProps);
diff --git a/packages/shared/src/utils/textManipulations.ts b/packages/shared/src/utils/textManipulations.ts
index 9375204ec8..8e52f0c8e5 100644
--- a/packages/shared/src/utils/textManipulations.ts
+++ b/packages/shared/src/utils/textManipulations.ts
@@ -7,7 +7,7 @@ const DEFAULT_LOCAL = "en-US";
 function validateLocalSupported(local: string) {
   let isLocalSupported;
   try {
-    const options = { localeMatcher: "lookup" };
+    const options = { localeMatcher: "lookup" as const };
     isLocalSupported = !!Intl.NumberFormat.supportedLocalesOf(convertToArray(local), options).length;
   } catch (err) {
     isLocalSupported = false;
diff --git a/packages/storybook-blocks/package.json b/packages/storybook-blocks/package.json
index 5c2df7b4d3..4b8f4af0ac 100644
--- a/packages/storybook-blocks/package.json
+++ b/packages/storybook-blocks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vibe-storybook-components",
-  "version": "1.0.7",
+  "version": "4.0.0-rc.0",
   "description": "Collection of Vibe's Storybook components",
   "repository": {
     "type": "git",
@@ -96,7 +96,7 @@
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-typescript2": "^0.35.0",
     "ts-jest": "^29.1.2",
-    "typescript": "^5.1.6",
+    "typescript": "^5.9.3",
     "typescript-plugin-css-modules": "^5.0.1"
   },
   "peerDependencies": {
diff --git a/packages/storybook-blocks/src/helpers/components/Link/Link.module.scss b/packages/storybook-blocks/src/helpers/components/Link/Link.module.scss
index ce7469ea64..3875d2434c 100644
--- a/packages/storybook-blocks/src/helpers/components/Link/Link.module.scss
+++ b/packages/storybook-blocks/src/helpers/components/Link/Link.module.scss
@@ -27,23 +27,10 @@
 
 .iconStart {
   line-height: 24px;
-  margin-right: var(--sb-spacing-small);
+  margin-inline-end: var(--sb-spacing-xs);
 }
 
 .iconEnd {
   line-height: 24px;
-  margin-left: var(--sb-spacing-small);
-}
-
-@supports (margin-inline-start: initial) {
-  .iconStart {
-    line-height: 24px;
-    margin-right: 0;
-    margin-inline-end: var(--sb-spacing-xs);
-  }
-  .iconEnd {
-    line-height: 24px;
-    margin-left: 0;
-    margin-inline-start: var(--sb-spacing-xs);
-  }
+  margin-inline-start: var(--sb-spacing-xs);
 }
diff --git a/packages/style/.cursor/rules/color-token-management.mdc b/packages/style/.cursor/rules/color-token-management.mdc
index cb9179f3b4..b5a592c97a 100644
--- a/packages/style/.cursor/rules/color-token-management.mdc
+++ b/packages/style/.cursor/rules/color-token-management.mdc
@@ -1,11 +1,11 @@
 ---
-description: "Comprehensive guide for adding, modifying, and managing color tokens in the monday-ui-style package (@style). Covers SCSS theme files, build process, naming conventions, and special handling for hacker theme."
+description: "Comprehensive guide for adding, modifying, and managing color tokens in the @vibe/style package. Covers SCSS theme files, build process, naming conventions, and special handling for hacker theme."
 globs: "packages/style/**/*"
 ---
 
-# Color Token Management for monday-ui-style (@style)
+# Color Token Management for @vibe/style
 
-This rule provides a complete guide for managing color tokens in the `@style` package, which publishes as `monday-ui-style`.
+This rule provides a complete guide for managing color tokens in the `@style` package, which publishes as `@vibe/style`.
 
 ## Package Structure Overview
 
diff --git a/packages/style/README.md b/packages/style/README.md
index ae1d83a601..340a4fbe3c 100644
--- a/packages/style/README.md
+++ b/packages/style/README.md
@@ -5,9 +5,9 @@
 ## Installation
 
 ```bash
-npm install monday-ui-style
+npm install @vibe/style
 # or
-yarn add monday-ui-style
+yarn add @vibe/style
 ```
 
 ## Usage
@@ -15,32 +15,32 @@ yarn add monday-ui-style
 **Styles**: Import the css file in order to have the css variables exposed on the root level
 
 ```scss
-@import "~monday-ui-style/dist/index.min.css";
+@import "~@vibe/style/dist/index.min.css";
 ```
 
 or if you want to import it in your JS files
 
 ```javascript
-import "monday-ui-style/dist/index.min.css";
+import "@vibe/style/dist/index.min.css";
 ```
 
 **Mixins and functions**: We export multiple SCSS mixins and function helpers that can be used in your application if you use SASS. All helpers can be imported as demonstrated below.
 
 ```scss
-@import "~monday-ui-style/dist/mixins";
-@import "~monday-ui-style/dist/functions";
+@import "~@vibe/style/dist/mixins";
+@import "~@vibe/style/dist/functions";
 ```
 
 ## Stylelint rules
 
 It is recommended to extend our [Stylelint](https://stylelint.io/) config in order to ensure proper usage of this library.  
-To use the supplied config, add `monday-ui-style/stylelint-config` as a [Stylelint config extension](https://stylelint.io/user-guide/configure/#extends):
+To use the supplied config, add `@vibe/style/stylelint-config` as a [Stylelint config extension](https://stylelint.io/user-guide/configure/#extends):
 
 ```js
 // Your .stylelintrc
 {
   ...
-  "extends": "monday-ui-style/stylelint-config",
+  "extends": "@vibe/style/stylelint-config",
   ...
 }
 ```
diff --git a/packages/style/package.json b/packages/style/package.json
index fad81e03da..d564b74c46 100644
--- a/packages/style/package.json
+++ b/packages/style/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "monday-ui-style",
-  "version": "0.26.2",
+  "name": "@vibe/style",
+  "version": "4.0.0-rc.0",
   "description": "Monday UI CSS Foundations",
   "keywords": [
     "CSS",
diff --git a/packages/style/src/spacing.scss b/packages/style/src/spacing.scss
index 61451833c8..a413095e2e 100644
--- a/packages/style/src/spacing.scss
+++ b/packages/style/src/spacing.scss
@@ -1,11 +1,4 @@
 :root {
-  --spacing-xs: 4px;
-  --spacing-small: 8px;
-  --spacing-medium: 16px;
-  --spacing-large: 24px;
-  --spacing-xl: 32px;
-  --spacing-xxl: 48px;
-  --spacing-xxxl: 64px;
   --space-2: 2px;
   --space-4: 4px;
   --space-8: 8px;
diff --git a/packages/style/stylelint-config/index.js b/packages/style/stylelint-config/index.js
index 2de93b5446..178b18b741 100644
--- a/packages/style/stylelint-config/index.js
+++ b/packages/style/stylelint-config/index.js
@@ -2,6 +2,6 @@ module.exports = {
   customSyntax: require.resolve("postcss-scss"),
   plugins: ["./rules/use-defined-css-var-when-available/index.js", "./rules/use-new-spacing-tokens/index.js"],
   rules: {
-    "monday-ui-style/use-defined-css-var-when-available": true
+    "@vibe/style/use-defined-css-var-when-available": true
   }
 };
diff --git a/packages/style/stylelint-config/rules/use-defined-css-var-when-available/__tests__/index.test.js b/packages/style/stylelint-config/rules/use-defined-css-var-when-available/__tests__/index.test.js
index 3ebc282b53..2afbefeb10 100644
--- a/packages/style/stylelint-config/rules/use-defined-css-var-when-available/__tests__/index.test.js
+++ b/packages/style/stylelint-config/rules/use-defined-css-var-when-available/__tests__/index.test.js
@@ -6,14 +6,14 @@ const config = {
   plugins: [path.resolve(__dirname, "../index.js")],
   customSyntax: "postcss-scss",
   rules: {
-    "monday-ui-style/use-defined-css-var-when-available": true
+    "@vibe/style/use-defined-css-var-when-available": true
   }
 };
 
 const configWithUseRecommendation = {
   ...config,
   rules: {
-    "monday-ui-style/use-defined-css-var-when-available": [
+    "@vibe/style/use-defined-css-var-when-available": [
       true,
       {
         useRecommendedFixes: true
@@ -22,7 +22,7 @@ const configWithUseRecommendation = {
   }
 };
 
-describe("monday-ui-style/use-defined-css-var-when-available", () => {
+describe("@vibe/style/use-defined-css-var-when-available", () => {
   // since we run tests that actually perform code fixes, the fixtures are expected to change
   const fixturesContentBeforeTests = new Map();
 
@@ -61,16 +61,13 @@ describe("monday-ui-style/use-defined-css-var-when-available", () => {
     const [firstWarning, secondWarning] = warnings;
 
     expect(firstWarning.text).toBe(
-      `Expected \"16px\" to be one of vars: 
---space-16
---spacing-medium
- (monday-ui-style/use-defined-css-var-when-available)`
+      `Expected \"16px\" to be \"var(--space-16)\" (@vibe/style/use-defined-css-var-when-available)`
     );
     expect(firstWarning.line).toBe(3);
     expect(firstWarning.column).toBe(15);
 
     expect(secondWarning.text).toBe(
-      `Expected \"16px\" to be \"var(--border-radius-big)\" (monday-ui-style/use-defined-css-var-when-available)`
+      `Expected \"16px\" to be \"var(--border-radius-big)\" (@vibe/style/use-defined-css-var-when-available)`
     );
     expect(secondWarning.line).toBe(7);
     expect(secondWarning.column).toBe(18);
@@ -115,7 +112,7 @@ describe("monday-ui-style/use-defined-css-var-when-available", () => {
 --font-size-20
 --font-size-general-label
 --font-size-subtext
- (monday-ui-style/use-defined-css-var-when-available)`
+ (@vibe/style/use-defined-css-var-when-available)`
     );
     expect(firstWarning.line).toBe(3);
     expect(firstWarning.column).toBe(14);
@@ -162,7 +159,7 @@ describe("monday-ui-style/use-defined-css-var-when-available", () => {
         config: {
           ...config,
           rules: {
-            "monday-ui-style/use-defined-css-var-when-available": ruleConfigValue
+            "@vibe/style/use-defined-css-var-when-available": ruleConfigValue
           }
         }
       });
diff --git a/packages/style/stylelint-config/rules/use-defined-css-var-when-available/index.js b/packages/style/stylelint-config/rules/use-defined-css-var-when-available/index.js
index 47ea9ce66e..bc2ff26e31 100644
--- a/packages/style/stylelint-config/rules/use-defined-css-var-when-available/index.js
+++ b/packages/style/stylelint-config/rules/use-defined-css-var-when-available/index.js
@@ -4,7 +4,7 @@ const { getPropsToAllowedCssVars } = require("./parse-monday-css");
 
 const { report, ruleMessages, validateOptions } = stylelint.utils;
 
-const RULE_NAME = "monday-ui-style/use-defined-css-var-when-available";
+const RULE_NAME = "@vibe/style/use-defined-css-var-when-available";
 const CONFIGS_THAT_MEAN_IGNORE_FILE = ["disabled", "disable", "off", "0"];
 
 const messages = ruleMessages(RULE_NAME, {
diff --git a/packages/style/stylelint-config/rules/use-defined-css-var-when-available/parse-monday-css.js b/packages/style/stylelint-config/rules/use-defined-css-var-when-available/parse-monday-css.js
index 688c43d5d2..0e044e2f31 100644
--- a/packages/style/stylelint-config/rules/use-defined-css-var-when-available/parse-monday-css.js
+++ b/packages/style/stylelint-config/rules/use-defined-css-var-when-available/parse-monday-css.js
@@ -18,7 +18,7 @@ function parseMondayUiCss(css = readCssFromDefaultPath()) {
   const ast = postcss.parse(css);
 
   const varsToCanonicalValue = {}; // css vars that are mapped to canonical values. e.g. {"--color-primary": "#131313"}
-  const canonicalValuesToVars = {}; // matching css vars for each canonical value. e.g. {"16px": ["--font-size-h3", "--spacing-medium"]}
+  const canonicalValuesToVars = {}; // matching css vars for each canonical value. e.g. {"16px": ["--font-size-h3", "--space-16"]}
   const referenceTokens = {}; // css vars that are pointing to other css vars. e.g. {"--color-primary": "--color-red"}
   const referenceTokensToCanonicalValue = {}; // maps between reference token names to canonical values. e.g. if "--font-size-h5: var(--font-size-30)" and "--font-size-30: 16px", then {"--font-size-h5": "16px"}
 
@@ -70,8 +70,8 @@ function parseMondayUiCss(css = readCssFromDefaultPath()) {
  {
     padding: {
       {
-        "8px": { allowedVars: [ "--spacing-small" ] },
-        "16px": { allowedVars: [ "--spacing-medium" ] },
+        "8px": { allowedVars: [ "--space-8" ] },
+        "16px": { allowedVars: [ "--space-16" ] },
       }
     },
     "font-size":{
diff --git a/packages/style/stylelint-config/rules/use-defined-css-var-when-available/props-to-allowed-vars.js b/packages/style/stylelint-config/rules/use-defined-css-var-when-available/props-to-allowed-vars.js
index 51edb91128..675736d604 100644
--- a/packages/style/stylelint-config/rules/use-defined-css-var-when-available/props-to-allowed-vars.js
+++ b/packages/style/stylelint-config/rules/use-defined-css-var-when-available/props-to-allowed-vars.js
@@ -10,14 +10,7 @@ const SPACINGS = [
   "--space-40",
   "--space-48",
   "--space-64",
-  "--space-80",
-  "--spacing-xs",
-  "--spacing-small",
-  "--spacing-medium",
-  "--spacing-large",
-  "--spacing-xl",
-  "--spacing-xxl",
-  "--spacing-xxxl"
+  "--space-80"
 ];
 
 const BORDER_RADIUSES = ["--border-radius-small", "--border-radius-medium", "--border-radius-big"];
@@ -154,15 +147,7 @@ function mapPropsToAllowedVars(propNames, allowedVars, recommended = undefined)
 // This means that if --border-radius-small or --border-radius-medium can be used while linting a rule with the property "border-radius", we will show an error
 
 const PROPS_TO_ALLOWED_VARS = {
-  ...mapPropsToAllowedVars(SPACING_PROPS, SPACINGS, [
-    "--space-4",
-    "--space-8",
-    "--space-16",
-    "--space-24",
-    "--space-32",
-    "--space-48",
-    "--space-64"
-  ]),
+  ...mapPropsToAllowedVars(SPACING_PROPS, SPACINGS),
     ...mapPropsToAllowedVars(BORDER_RADIUSES_PROPS, BORDER_RADIUSES),
   ...mapPropsToAllowedVars(BORDER_WIDTHS_PROPS, BORDER_WIDTHS),
   ...mapPropsToAllowedVars(BORDER_STYLES_PROPS, BORDER_STYLES),
diff --git a/packages/style/stylelint-config/rules/use-new-spacing-tokens/__tests__/index.test.js b/packages/style/stylelint-config/rules/use-new-spacing-tokens/__tests__/index.test.js
index 3d89f2b694..32172136f7 100644
--- a/packages/style/stylelint-config/rules/use-new-spacing-tokens/__tests__/index.test.js
+++ b/packages/style/stylelint-config/rules/use-new-spacing-tokens/__tests__/index.test.js
@@ -5,18 +5,18 @@ const config = {
   plugins: [path.resolve(__dirname, "../index.js")],
   customSyntax: "postcss-scss",
   rules: {
-    "monday-ui-style/use-new-spacing-tokens": [true, { severity: "warning" }]
+    "@vibe/style/use-new-spacing-tokens": [true, { severity: "warning" }]
   }
 };
 
 const configWithError = {
   ...config,
   rules: {
-    "monday-ui-style/use-new-spacing-tokens": true // Default severity is error
+    "@vibe/style/use-new-spacing-tokens": true // Default severity is error
   }
 };
 
-describe("monday-ui-style/use-new-spacing-tokens", () => {
+describe("@vibe/style/use-new-spacing-tokens", () => {
   it("should warn for legacy spacing tokens by default", async () => {
     const result = await lint({
       code: `
diff --git a/packages/style/stylelint-config/rules/use-new-spacing-tokens/index.js b/packages/style/stylelint-config/rules/use-new-spacing-tokens/index.js
index 14af93f434..4e94ae64f2 100644
--- a/packages/style/stylelint-config/rules/use-new-spacing-tokens/index.js
+++ b/packages/style/stylelint-config/rules/use-new-spacing-tokens/index.js
@@ -1,6 +1,6 @@
 const stylelint = require("stylelint");
 
-const ruleName = "monday-ui-style/use-new-spacing-tokens";
+const ruleName = "@vibe/style/use-new-spacing-tokens";
 const messages = stylelint.utils.ruleMessages(ruleName, {
   rejected: (_property, value, replacement) =>
     `Use new spacing tokens instead of legacy ones. Replace "${value}" with "${replacement}".`
diff --git a/packages/testkit/__tests__/Button.test.ts b/packages/testkit/__tests__/Button.test.ts
index d88d7659cf..f999e63d63 100644
--- a/packages/testkit/__tests__/Button.test.ts
+++ b/packages/testkit/__tests__/Button.test.ts
@@ -4,7 +4,7 @@ import { buttonStory } from "./utils/url-helper";
 
 let frame: FrameLocator;
 let button: Button;
-const buttonLocator = 'button[data-testid="button"]';
+const buttonLocator = 'button[data-testid^="button"]';
 const frameLocator = "[id='storybook-preview-iframe']";
 
 test.describe("Testkit - Unit Tests - Button", () => {
diff --git a/packages/testkit/__tests__/ButtonGroup.test.ts b/packages/testkit/__tests__/ButtonGroup.test.ts
index c0f0744215..748c9cb87d 100644
--- a/packages/testkit/__tests__/ButtonGroup.test.ts
+++ b/packages/testkit/__tests__/ButtonGroup.test.ts
@@ -4,7 +4,7 @@ import { buttonGroupStory } from "./utils/url-helper";
 
 let frame: FrameLocator;
 let buttonGroup: ButtonGroup;
-const buttonGroupLocator = 'div[data-testid="button-group"]';
+const buttonGroupLocator = 'div[data-testid^="button-group"]';
 const frameLocator = "[id='storybook-preview-iframe']";
 
 test.describe("Testkit - Unit Tests - ButtonGroup", () => {
diff --git a/packages/testkit/__tests__/Checkbox.test.ts b/packages/testkit/__tests__/Checkbox.test.ts
index 00c4587d4c..e185c3e3f5 100644
--- a/packages/testkit/__tests__/Checkbox.test.ts
+++ b/packages/testkit/__tests__/Checkbox.test.ts
@@ -1,10 +1,10 @@
 import { test, expect, FrameLocator } from "@playwright/test";
-import { BaseElement, Checkbox } from "../components";
+import { Checkbox } from "../components";
 import { checkboxStory } from "./utils/url-helper";
 
 let frame: FrameLocator;
 let checkbox: Checkbox;
-const checkboxLocator = 'label[data-testid="checkbox"]';
+const checkboxLocator = 'label[data-testid^="checkbox"]';
 const frameLocator = "[id='storybook-preview-iframe']";
 
 test.describe("Testkit - Unit Tests - Checkbox", () => {
@@ -17,19 +17,19 @@ test.describe("Testkit - Unit Tests - Checkbox", () => {
   });
 
   test("Checkbox should be initially checked", async () => {
-    await expect(checkbox.getLocator()).toBeChecked();
+    await expect(checkbox.getLocator().locator("input")).toBeChecked();
   });
 
   test("Checkbox should be able to be unchecked", async () => {
     await checkbox.setUnchecked();
-    await expect(checkbox.getLocator()).not.toBeChecked();
+    await expect(checkbox.getLocator().locator("input")).not.toBeChecked();
   });
 
   test("Checkbox should be able to be checked after being unchecked", async () => {
     await checkbox.setUnchecked();
-    await expect.soft(checkbox.getLocator()).not.toBeChecked();
+    await expect.soft(checkbox.getLocator().locator("input")).not.toBeChecked();
     await checkbox.setChecked();
-    await expect(checkbox.getLocator()).toBeChecked();
+    await expect(checkbox.getLocator().locator("input")).toBeChecked();
   });
 
   test("Checkbox should return its label text", async () => {
@@ -40,13 +40,13 @@ test.describe("Testkit - Unit Tests - Checkbox", () => {
   });
 
   test("Checkbox should toggle correctly with multiple check/uncheck operations", async () => {
-    await expect.soft(checkbox.getLocator()).toBeChecked();
+    await expect.soft(checkbox.getLocator().locator("input")).toBeChecked();
     await checkbox.setUnchecked();
-    await expect.soft(checkbox.getLocator()).not.toBeChecked();
+    await expect.soft(checkbox.getLocator().locator("input")).not.toBeChecked();
     await checkbox.setChecked();
-    await expect.soft(checkbox.getLocator()).toBeChecked();
+    await expect.soft(checkbox.getLocator().locator("input")).toBeChecked();
     await checkbox.setUnchecked();
-    await expect(checkbox.getLocator()).not.toBeChecked();
+    await expect(checkbox.getLocator().locator("input")).not.toBeChecked();
   });
 
   test("Checkbox should be enabled by default", async () => {
@@ -63,11 +63,7 @@ test.describe("Testkit - Unit Tests - Checkbox", () => {
   });
 
   test("should handle attribute retrieval", async () => {
-    const attributeValue = await new BaseElement(
-      checkbox.getPage(),
-      checkbox.getLocator().locator("div"),
-      "Checkbox"
-    ).getAttributeValue("data-vibe");
+    const attributeValue = await checkbox.getAttributeValue("data-vibe");
     expect(attributeValue).toContain("Checkbox");
   });
 });
diff --git a/packages/testkit/__tests__/Dropdown.test.ts b/packages/testkit/__tests__/Dropdown.test.ts
index 716cbd61c8..bad52aa099 100644
--- a/packages/testkit/__tests__/Dropdown.test.ts
+++ b/packages/testkit/__tests__/Dropdown.test.ts
@@ -1,10 +1,10 @@
 import { test, expect, FrameLocator } from "@playwright/test";
-import { BaseElement, Dropdown } from "../components";
+import { Dropdown } from "../components";
 import { dropdownStory } from "./utils/url-helper";
 
 let frame: FrameLocator;
 let dropdown: Dropdown;
-const dropdownLocator = ".dropdown-stories-styles_spacing";
+const dropdownLocator = '[data-vibe="Dropdown"]';
 const frameLocator = "[id='storybook-preview-iframe']";
 
 test.describe("Testkit - Unit Tests - Dropdown", () => {
@@ -37,11 +37,7 @@ test.describe("Testkit - Unit Tests - Dropdown", () => {
   });
 
   test("should handle attribute retrieval", async () => {
-    const attributeValue = await new BaseElement(
-      dropdown.getPage(),
-      dropdown.getLocator().locator("input"),
-      "Dropdown"
-    ).getAttributeValue("aria-label");
-    expect(attributeValue).toContain("Dropdown input");
+    const attributeValue = await dropdown.getAttributeValue("data-vibe");
+    expect(attributeValue).toContain("Dropdown");
   });
 });
diff --git a/packages/testkit/__tests__/IconButton.test.ts b/packages/testkit/__tests__/IconButton.test.ts
index 17b8a19483..be5a594dc9 100644
--- a/packages/testkit/__tests__/IconButton.test.ts
+++ b/packages/testkit/__tests__/IconButton.test.ts
@@ -4,7 +4,7 @@ import { iconButtonStory } from "./utils/url-helper";
 
 let frame: FrameLocator;
 let iconButton: IconButton;
-const iconButtonLocator = 'button[data-testid="icon-button"]';
+const iconButtonLocator = 'button[data-testid^="icon-button"]';
 const frameLocator = "[id='storybook-preview-iframe']";
 
 test.describe("Testkit - Unit Tests - IconButton", () => {
diff --git a/packages/testkit/__tests__/Link.test.ts b/packages/testkit/__tests__/Link.test.ts
index 9de0c164b0..6ec18abc19 100644
--- a/packages/testkit/__tests__/Link.test.ts
+++ b/packages/testkit/__tests__/Link.test.ts
@@ -4,7 +4,7 @@ import { linkStory } from "./utils/url-helper";
 
 let frame: FrameLocator;
 let link: Link;
-const linkLocator = 'a[data-testid="link"]';
+const linkLocator = 'a[data-testid^="link"]';
 const frameLocator = "[id='storybook-preview-iframe']";
 
 test.describe("Testkit - Unit Tests - Link", () => {
diff --git a/packages/testkit/__tests__/Loader.test.ts b/packages/testkit/__tests__/Loader.test.ts
index 84566347a5..4f7d73c11c 100644
--- a/packages/testkit/__tests__/Loader.test.ts
+++ b/packages/testkit/__tests__/Loader.test.ts
@@ -4,7 +4,7 @@ import { loaderStory } from "./utils/url-helper";
 
 let frame: FrameLocator;
 let loader: Loader;
-const loaderLocator = 'div[data-testid="loader"]';
+const loaderLocator = 'div[data-testid^="loader"]';
 const frameLocator = "[id='storybook-preview-iframe']";
 
 test.describe("Testkit - Unit Tests - Loader", () => {
diff --git a/packages/testkit/__tests__/MenuButton.test.ts b/packages/testkit/__tests__/MenuButton.test.ts
index 600812b9cf..1f2257632a 100644
--- a/packages/testkit/__tests__/MenuButton.test.ts
+++ b/packages/testkit/__tests__/MenuButton.test.ts
@@ -5,7 +5,7 @@ import { Menu } from "../components/Menu";
 
 let frame: FrameLocator;
 let menuButton: MenuButton;
-const menuButtonLocator = 'button[data-testid="menu-button"]';
+const menuButtonLocator = 'button[data-testid^="menu-button"]';
 const menuLocator = 'ul[role="menu"]';
 const frameLocator = "[id='storybook-preview-iframe']";
 
diff --git a/packages/testkit/__tests__/RadioButton.test.ts b/packages/testkit/__tests__/RadioButton.test.ts
index cf1edcc1e1..00425a3758 100644
--- a/packages/testkit/__tests__/RadioButton.test.ts
+++ b/packages/testkit/__tests__/RadioButton.test.ts
@@ -4,7 +4,7 @@ import { radioButtonStory } from "./utils/url-helper";
 
 let frame: FrameLocator;
 let radioButton: RadioButton;
-const radioButtonLocator = 'label[data-testid="radio-button"]';
+const radioButtonLocator = 'label[data-testid^="radio-button"]';
 const frameLocator = "[id='storybook-preview-iframe']";
 
 test.describe("Testkit - Unit Tests - RadioButton", () => {
diff --git a/packages/testkit/__tests__/SplitButton.test.ts b/packages/testkit/__tests__/SplitButton.test.ts
index 284d68e638..5caba36e05 100644
--- a/packages/testkit/__tests__/SplitButton.test.ts
+++ b/packages/testkit/__tests__/SplitButton.test.ts
@@ -5,7 +5,7 @@ import { Menu } from "../components/Menu";
 
 let frame: FrameLocator;
 let splitButton: SplitButton;
-const splitButtonLocator = 'div[data-testid="split-button"]';
+const splitButtonLocator = 'div[data-testid^="split-button"]';
 const menuLocator = 'ul[role="menu"]';
 const frameLocator = "[id='storybook-preview-iframe']";
 
diff --git a/packages/testkit/__tests__/Steps.test.ts b/packages/testkit/__tests__/Steps.test.ts
index 83d93d8e07..3d2371a008 100644
--- a/packages/testkit/__tests__/Steps.test.ts
+++ b/packages/testkit/__tests__/Steps.test.ts
@@ -4,7 +4,7 @@ import { stepsStory } from "./utils/url-helper";
 
 let frame: FrameLocator;
 let steps: Steps;
-const stepsLocator = 'div[data-testid="steps"]';
+const stepsLocator = 'div[data-testid^="steps"]';
 const frameLocator = "[id='storybook-preview-iframe']";
 
 test.describe("Testkit - Unit Tests - Steps", () => {
diff --git a/packages/testkit/__tests__/TextArea.test.ts b/packages/testkit/__tests__/TextArea.test.ts
index bae6ce20e7..7308240861 100644
--- a/packages/testkit/__tests__/TextArea.test.ts
+++ b/packages/testkit/__tests__/TextArea.test.ts
@@ -4,7 +4,7 @@ import { textAreaStory } from "./utils/url-helper";
 
 let frame: FrameLocator;
 let textArea: TextArea;
-const textAreaLocator = 'div[data-testid="text-area"]';
+const textAreaLocator = 'div[data-testid^="text-area"]';
 const frameLocator = "[id='storybook-preview-iframe']";
 
 test.describe("Testkit - Unit Tests - TextArea", () => {
diff --git a/packages/testkit/__tests__/TextField.test.ts b/packages/testkit/__tests__/TextField.test.ts
index aebdd59d9c..f79f208eb1 100644
--- a/packages/testkit/__tests__/TextField.test.ts
+++ b/packages/testkit/__tests__/TextField.test.ts
@@ -4,7 +4,7 @@ import { textfieldStory } from "./utils/url-helper";
 
 let frame: FrameLocator;
 let textField: TextField;
-const textFieldLocator = "#input";
+const textFieldLocator = 'input[data-testid^="text-field"]';
 const frameLocator = "[id='storybook-preview-iframe']";
 
 test.describe("Testkit - Unit Tests - TextField", () => {
diff --git a/packages/testkit/__tests__/Toast.test.ts b/packages/testkit/__tests__/Toast.test.ts
index d156956525..b4933c9584 100644
--- a/packages/testkit/__tests__/Toast.test.ts
+++ b/packages/testkit/__tests__/Toast.test.ts
@@ -2,7 +2,7 @@ import { test, expect, FrameLocator } from "@playwright/test";
 import { linkToastStory, buttonToastStory, loadingToastStory } from "./utils/url-helper";
 import { Toast } from "../components/Toast";
 
-const toastLocator = 'div[data-testid="toast"]';
+const toastLocator = 'div[data-testid^="toast_"]';
 const frameLocator = "[id='storybook-preview-iframe']";
 
 test.describe("Testkit - Unit Tests - Button Toast", () => {
diff --git a/packages/testkit/__tests__/utils/url-helper.js b/packages/testkit/__tests__/utils/url-helper.js
index dbb23e644b..9f0f34f2ee 100644
--- a/packages/testkit/__tests__/utils/url-helper.js
+++ b/packages/testkit/__tests__/utils/url-helper.js
@@ -3,8 +3,8 @@ export const buttonGroupStory = "/?path=/story/components-buttongroup--overview"
 export const buttonToastStory = "/?path=/story/components-toast--default-with-button";
 export const checkboxStory = "/?path=/story/components-checkbox--overview";
 export const colorPickerStory = "/?path=/story/components-colorpicker--overview";
-export const comboboxStory = "/?path=/story/components-combobox--overview";
-export const dropdownStory = "/?path=/story/components-dropdown-deprecated--overview";
+export const comboboxStory = "/?path=/story/components-combobox-deprecated--overview";
+export const dropdownStory = "/?path=/story/components-dropdown-basic-dropdown--searchable";
 export const editableHeadingStory = "/?path=/story/components-editableheading--overview";
 export const editableTextStory = "/?path=/story/components-editabletext--overview";
 export const expandCollapseStory = "/?path=/story/components-expandcollapse--overview";
@@ -18,7 +18,7 @@ export const loadingToastStory = "/?path=/story/components-toast--toast-with-loa
 export const menuStory = "/?path=/story/components-menu-menu--overview";
 export const menuItemStory = "/?path=/story/components-menu-menuitem--overview";
 export const menuButtonStory = "/?path=/story/components-menubutton--overview";
-export const modalStory = "/?path=/story/components-modal-new-basic-modal--overview";
+export const modalStory = "/?path=/story/components-modal-basic-modal--overview";
 export const radioButtonStory = "/?path=/story/components-radiobutton--overview";
 export const searchStory = "/?path=/story/components-search--overview";
 export const splitButtonStory = "/?path=/story/components-splitbutton--overview";
diff --git a/packages/testkit/components/Checkbox.ts b/packages/testkit/components/Checkbox.ts
index ca04ce630d..fe43dee8d8 100644
--- a/packages/testkit/components/Checkbox.ts
+++ b/packages/testkit/components/Checkbox.ts
@@ -19,7 +19,7 @@ export class Checkbox extends BaseElement {
    */
   constructor(page: Page, locator: Locator, elementReportName: string) {
     super(page, locator, elementReportName);
-    this.checkbox = new TextField(page, locator.locator("div"), `${elementReportName} - Checkbox`);
+    this.checkbox = new TextField(page, locator.locator("input"), `${elementReportName} - Checkbox`);
     this.label = new Text(page, locator.locator("span"), `${elementReportName} - Label`);
   }
 
@@ -30,7 +30,7 @@ export class Checkbox extends BaseElement {
   async setChecked(): Promise<void> {
     await test.step(`Check checkbox for ${this.getElementReportName()}`, async () => {
       if (!(await this.isChecked())) {
-        await this.checkbox.getLocator().check();
+        await this.getLocator().click();
       }
     });
   }
@@ -42,7 +42,7 @@ export class Checkbox extends BaseElement {
   async setUnchecked(): Promise<void> {
     await test.step(`Uncheck checkbox for ${this.getElementReportName()}`, async () => {
       if (await this.isChecked()) {
-        await this.checkbox.getLocator().uncheck();
+        await this.getLocator().click();
       }
     });
   }
diff --git a/packages/testkit/package.json b/packages/testkit/package.json
index 4e8a892544..7483be4d7f 100644
--- a/packages/testkit/package.json
+++ b/packages/testkit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vibe/testkit",
-  "version": "1.16.0",
+  "version": "4.0.0-rc.0",
   "description": "Vibe e2e testing toolkit",
   "keywords": [
     "TESTING",
diff --git a/yarn.lock b/yarn.lock
index fde43ef56d..a5491907c3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -50,6 +50,15 @@
     js-tokens "^4.0.0"
     picocolors "^1.1.1"
 
+"@babel/code-frame@^7.28.6", "@babel/code-frame@^7.29.0":
+  version "7.29.0"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.29.0.tgz#7cd7a59f15b3cc0dcd803038f7792712a7d0b15c"
+  integrity sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.28.5"
+    js-tokens "^4.0.0"
+    picocolors "^1.1.1"
+
 "@babel/compat-data@^7.22.6", "@babel/compat-data@^7.23.5", "@babel/compat-data@^7.24.1":
   version "7.24.1"
   resolved "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.24.1.tgz"
@@ -200,6 +209,17 @@
     "@jridgewell/trace-mapping" "^0.3.25"
     jsesc "^3.0.2"
 
+"@babel/generator@^7.29.0":
+  version "7.29.1"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.29.1.tgz#d09876290111abbb00ef962a7b83a5307fba0d50"
+  integrity sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==
+  dependencies:
+    "@babel/parser" "^7.29.0"
+    "@babel/types" "^7.29.0"
+    "@jridgewell/gen-mapping" "^0.3.12"
+    "@jridgewell/trace-mapping" "^0.3.28"
+    jsesc "^3.0.2"
+
 "@babel/helper-annotate-as-pure@^7.18.6", "@babel/helper-annotate-as-pure@^7.22.5":
   version "7.22.5"
   resolved "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz"
@@ -366,13 +386,13 @@
     "@babel/traverse" "^7.24.7"
     "@babel/types" "^7.24.7"
 
-"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.7.tgz"
-  integrity sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==
+"@babel/helper-module-imports@^7.0.0":
+  version "7.28.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.28.6.tgz#60632cbd6ffb70b22823187201116762a03e2d5c"
+  integrity sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==
   dependencies:
-    "@babel/traverse" "^7.24.7"
-    "@babel/types" "^7.24.7"
+    "@babel/traverse" "^7.28.6"
+    "@babel/types" "^7.28.6"
 
 "@babel/helper-module-imports@^7.18.6", "@babel/helper-module-imports@^7.22.15", "@babel/helper-module-imports@^7.24.1", "@babel/helper-module-imports@^7.24.3":
   version "7.24.3"
@@ -381,6 +401,14 @@
   dependencies:
     "@babel/types" "^7.24.0"
 
+"@babel/helper-module-imports@^7.24.7":
+  version "7.24.7"
+  resolved "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.7.tgz"
+  integrity sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==
+  dependencies:
+    "@babel/traverse" "^7.24.7"
+    "@babel/types" "^7.24.7"
+
 "@babel/helper-module-imports@^7.27.1":
   version "7.27.1"
   resolved "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz"
@@ -670,6 +698,13 @@
   dependencies:
     "@babel/types" "^7.28.5"
 
+"@babel/parser@^7.28.6", "@babel/parser@^7.29.0":
+  version "7.29.0"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.29.0.tgz#669ef345add7d057e92b7ed15f0bac07611831b6"
+  integrity sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==
+  dependencies:
+    "@babel/types" "^7.29.0"
+
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.24.1":
   version "7.24.1"
   resolved "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.24.1.tgz"
@@ -1590,13 +1625,18 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
-"@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.7.2":
+"@babel/runtime@^7.3.1":
   version "7.25.0"
   resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.0.tgz"
   integrity sha512-7dRy4DwXwtzBrPbZflqxnvfxLF8kdZXPkhymtDeFoFqE6ldzjQFgYTtYIFARcLEYDrqfBfYcZt1WqFxRoyC9Rw==
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.4.4", "@babel/runtime@^7.7.2":
+  version "7.28.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.28.6.tgz#d267a43cb1836dc4d182cce93ae75ba954ef6d2b"
+  integrity sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==
+
 "@babel/standalone@^7.24.4":
   version "7.24.4"
   resolved "https://registry.npmjs.org/@babel/standalone/-/standalone-7.24.4.tgz"
@@ -1629,6 +1669,15 @@
     "@babel/parser" "^7.24.7"
     "@babel/types" "^7.24.7"
 
+"@babel/template@^7.28.6":
+  version "7.28.6"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.28.6.tgz#0e7e56ecedb78aeef66ce7972b082fce76a23e57"
+  integrity sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==
+  dependencies:
+    "@babel/code-frame" "^7.28.6"
+    "@babel/parser" "^7.28.6"
+    "@babel/types" "^7.28.6"
+
 "@babel/traverse@^7.18.9", "@babel/traverse@^7.24.1", "@babel/traverse@^7.7.2":
   version "7.24.1"
   resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.24.1.tgz"
@@ -1687,6 +1736,19 @@
     "@babel/types" "^7.28.5"
     debug "^4.3.1"
 
+"@babel/traverse@^7.28.6":
+  version "7.29.0"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.29.0.tgz#f323d05001440253eead3c9c858adbe00b90310a"
+  integrity sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==
+  dependencies:
+    "@babel/code-frame" "^7.29.0"
+    "@babel/generator" "^7.29.0"
+    "@babel/helper-globals" "^7.28.0"
+    "@babel/parser" "^7.29.0"
+    "@babel/template" "^7.28.6"
+    "@babel/types" "^7.29.0"
+    debug "^4.3.1"
+
 "@babel/types@^7.0.0", "@babel/types@^7.18.9", "@babel/types@^7.20.7", "@babel/types@^7.22.15", "@babel/types@^7.22.19", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.23.4", "@babel/types@^7.24.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4":
   version "7.24.0"
   resolved "https://registry.npmjs.org/@babel/types/-/types-7.24.0.tgz"
@@ -1721,6 +1783,14 @@
     "@babel/helper-string-parser" "^7.27.1"
     "@babel/helper-validator-identifier" "^7.28.5"
 
+"@babel/types@^7.28.6", "@babel/types@^7.29.0":
+  version "7.29.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.29.0.tgz#9f5b1e838c446e72cf3cd4b918152b8c605e37c7"
+  integrity sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==
+  dependencies:
+    "@babel/helper-string-parser" "^7.27.1"
+    "@babel/helper-validator-identifier" "^7.28.5"
+
 "@bcoe/v8-coverage@^0.2.3":
   version "0.2.3"
   resolved "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz"
@@ -2100,7 +2170,7 @@
 
 "@emotion/cache@^10.0.27", "@emotion/cache@^10.0.9":
   version "10.0.29"
-  resolved "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.29.tgz#87e7e64f412c060102d589fe7c6dc042e6f9d1e0"
   integrity sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==
   dependencies:
     "@emotion/sheet" "0.9.4"
@@ -2110,7 +2180,7 @@
 
 "@emotion/core@^10.0.9":
   version "10.3.1"
-  resolved "https://registry.npmjs.org/@emotion/core/-/core-10.3.1.tgz"
+  resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.3.1.tgz#4021b6d8b33b3304d48b0bb478485e7d7421c69d"
   integrity sha512-447aUEjPIm0MnE6QYIaFz9VQOHSXf4Iu6EWOIqq11EAPqinkSZmfymPTmlOE3QjLv846lH4JVZBUOtwGbuQoww==
   dependencies:
     "@babel/runtime" "^7.5.5"
@@ -2122,7 +2192,7 @@
 
 "@emotion/css@^10.0.27", "@emotion/css@^10.0.9":
   version "10.0.27"
-  resolved "https://registry.npmjs.org/@emotion/css/-/css-10.0.27.tgz"
+  resolved "https://registry.yarnpkg.com/@emotion/css/-/css-10.0.27.tgz#3a7458198fbbebb53b01b2b87f64e5e21241e14c"
   integrity sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==
   dependencies:
     "@emotion/serialize" "^0.11.15"
@@ -2131,7 +2201,7 @@
 
 "@emotion/hash@0.8.0":
   version "0.8.0"
-  resolved "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
   integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
 
 "@emotion/is-prop-valid@^0.8.2":
@@ -2148,7 +2218,7 @@
 
 "@emotion/serialize@^0.11.15", "@emotion/serialize@^0.11.16":
   version "0.11.16"
-  resolved "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.16.tgz#dee05f9e96ad2fb25a5206b6d759b2d1ed3379ad"
   integrity sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==
   dependencies:
     "@emotion/hash" "0.8.0"
@@ -2159,17 +2229,17 @@
 
 "@emotion/sheet@0.9.4":
   version "0.9.4"
-  resolved "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.4.tgz#894374bea39ec30f489bbfc3438192b9774d32e5"
   integrity sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==
 
 "@emotion/stylis@0.8.5":
   version "0.8.5"
-  resolved "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz"
+  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
   integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
 
 "@emotion/unitless@0.7.5":
   version "0.7.5"
-  resolved "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
   integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
 
 "@emotion/use-insertion-effect-with-fallbacks@^1.0.0":
@@ -2179,12 +2249,12 @@
 
 "@emotion/utils@0.11.3":
   version "0.11.3"
-  resolved "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.3.tgz#a759863867befa7e583400d322652a3f44820924"
   integrity sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==
 
 "@emotion/weak-memoize@0.2.5":
   version "0.2.5"
-  resolved "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz"
+  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
   integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
 
 "@esbuild/aix-ppc64@0.21.5":
@@ -6013,15 +6083,6 @@
   resolved "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.7.tgz"
   integrity sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==
 
-"@types/react-dates@^21.8.3":
-  version "21.8.6"
-  resolved "https://registry.npmjs.org/@types/react-dates/-/react-dates-21.8.6.tgz"
-  integrity sha512-fDF322SOXAxstapv0/oruiPx9kY4DiiaEHYAVvXdPfQhi/hdaONsA9dFw5JBNPAWz7Niuwk+UUhxPU98h70TjA==
-  dependencies:
-    "@types/react" "*"
-    "@types/react-outside-click-handler" "*"
-    moment "^2.26.0"
-
 "@types/react-dom@*", "@types/react-dom@>=16.9.0":
   version "18.2.22"
   resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.22.tgz"
@@ -6043,13 +6104,6 @@
   dependencies:
     "@types/react" "^16"
 
-"@types/react-outside-click-handler@*":
-  version "1.3.3"
-  resolved "https://registry.npmjs.org/@types/react-outside-click-handler/-/react-outside-click-handler-1.3.3.tgz"
-  integrity sha512-fF7x4dHf/IPIne8kkt3rlCGuWFrWkFJmzQm4JkxSBzXJIM9WDLob++VnmGpE3ToVWrW3Xw9D5TxcUWrwqe04Gg==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react-resizable@^3.0.7":
   version "3.0.7"
   resolved "https://registry.npmjs.org/@types/react-resizable/-/react-resizable-3.0.7.tgz"
@@ -6617,6 +6671,34 @@
   resolved "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz"
   integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
 
+"@vibe/base@3.0.5":
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@vibe/base/-/base-3.0.5.tgz#d15de26ea7399251a047947bd2c5cdc3cd932b32"
+  integrity sha512-e0JQWygbbRj6q85XlovXAOgkxZtoTR7I9K+OMoMvFc09xnQ1evZr8G2HF6Il8ENT/23s5O8hLJ1Ef/OzdBbp2w==
+  dependencies:
+    "@vibe/shared" "3.0.8"
+    classnames "^2.5.1"
+
+"@vibe/button@3.0.16":
+  version "3.0.16"
+  resolved "https://registry.yarnpkg.com/@vibe/button/-/button-3.0.16.tgz#6612892a8a338b603b77e2fa310df7b342ba3f45"
+  integrity sha512-fjFb7Khv86P/tk6rO8Mdg2+fwBLen98i+E6YXC2gkWcFJAvNfjkH8kZN4m0HhmaQDBQb+ESmXZdq9vZIllS3Dw==
+  dependencies:
+    "@vibe/icon" "3.0.11"
+    "@vibe/loader" "3.0.11"
+    "@vibe/shared" "3.0.8"
+    classnames "^2.5.1"
+    es-toolkit "^1.39.10"
+
+"@vibe/clickable@3.0.3":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@vibe/clickable/-/clickable-3.0.3.tgz#e5c0ad7e739f350326eddfa7447acf0458b363e0"
+  integrity sha512-xsMt0TpUj8Wdv62kADvq//BhXlU3YVBix4WJdcyRPBp5NRPMksIbbOiMc35WIZznO/lA9IwoE1ktFOjwx28hfw==
+  dependencies:
+    "@vibe/shared" "3.0.8"
+    classnames "^2.5.1"
+    es-toolkit "^1.39.10"
+
 "@vibe/core@3.85.1":
   version "3.85.1"
   resolved "https://registry.yarnpkg.com/@vibe/core/-/core-3.85.1.tgz#ba541d5c3798e44810cb76e12720d690d86a04a0"
@@ -6660,6 +6742,50 @@
     react-windowed-select "^2.0.4"
     style-inject "^0.3.0"
 
+"@vibe/core@^3.59.0":
+  version "3.87.0"
+  resolved "https://registry.yarnpkg.com/@vibe/core/-/core-3.87.0.tgz#ef2e6d2a03bdc59aa792451ea16557f980dbe5b5"
+  integrity sha512-3IVFH6o0/AbrpyF/hfEzwTbJ1UdubURugTUiam1ElhzXFJAE83tpEkvTSmml34jMojBifEpV3QiIVJZXc+taxA==
+  dependencies:
+    "@floating-ui/react-dom" "^2.1.2"
+    "@popperjs/core" "2.11.6"
+    "@vibe/base" "3.0.5"
+    "@vibe/button" "3.0.16"
+    "@vibe/clickable" "3.0.3"
+    "@vibe/dialog" "3.0.12"
+    "@vibe/hooks" "3.0.3"
+    "@vibe/icon" "3.0.11"
+    "@vibe/icon-button" "3.0.5"
+    "@vibe/icons" "1.16.0"
+    "@vibe/layer" "3.0.10"
+    "@vibe/layout" "3.0.3"
+    "@vibe/loader" "3.0.11"
+    "@vibe/shared" "3.0.8"
+    "@vibe/tooltip" "3.0.5"
+    "@vibe/typography" "3.0.5"
+    a11y-dialog "^7.5.2"
+    body-scroll-lock "^4.0.0-beta.0"
+    browserslist-config-monday "1.0.6"
+    classnames "^2.3.2"
+    date-fns "^2.30.0"
+    downshift "^9.0.8"
+    es-toolkit "^1.39.10"
+    framer-motion "^6.5.1"
+    monday-ui-style "0.26.2"
+    react-dates "21.8.0"
+    react-day-picker "^8.8.0"
+    react-focus-lock "^2.13.2"
+    react-inlinesvg "^4.1.3"
+    react-is "^16.9.0"
+    react-popper "^2.3.0"
+    react-remove-scroll "^2.6.0"
+    react-select "npm:react-select-module@3.4.0"
+    react-transition-group "^4.4.5"
+    react-virtualized-auto-sizer "^1.0.7"
+    react-window "^1.8.7"
+    react-windowed-select "^2.0.4"
+    style-inject "^0.3.0"
+
 "@vibe/dialog@3.0.11":
   version "3.0.11"
   resolved "https://registry.yarnpkg.com/@vibe/dialog/-/dialog-3.0.11.tgz#a7be64b673bb7443325b39f38582758b077c6331"
@@ -6674,6 +6800,29 @@
     react-popper "^2.3.0"
     react-transition-group "^4.4.5"
 
+"@vibe/dialog@3.0.12":
+  version "3.0.12"
+  resolved "https://registry.yarnpkg.com/@vibe/dialog/-/dialog-3.0.12.tgz#f417c21fd15fdbe0c10552e2ccf768125542c1f6"
+  integrity sha512-XOM7VuSRkDsdOcwtx2Xfx4WfaXeBmW9I1IwkM6nThTZzFv6QlePw9RacIUj/xYwale/IfjlzrpA0Hx5jMq68XA==
+  dependencies:
+    "@popperjs/core" "2.11.6"
+    "@vibe/hooks" "3.0.3"
+    "@vibe/layer" "3.0.10"
+    "@vibe/shared" "3.0.8"
+    classnames "^2.5.1"
+    es-toolkit "^1.39.10"
+    react-popper "^2.3.0"
+    react-transition-group "^4.4.5"
+
+"@vibe/hooks@3.0.3":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@vibe/hooks/-/hooks-3.0.3.tgz#048284a79c75a9aaddbd730dc5fdb49851a2ecf9"
+  integrity sha512-74iEe2qLdjm3enpstGtewFkrKxNACvPMtIAxgUiBZ9T28cYu5mjbtH+Lp2Gv/kNMMv3x/V3RWcn7uqjLjyKBbQ==
+  dependencies:
+    "@vibe/shared" "3.0.8"
+    classnames "^2.5.1"
+    es-toolkit "^1.39.10"
+
 "@vibe/icon-button@3.0.4":
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/@vibe/icon-button/-/icon-button-3.0.4.tgz#cd11ca357a16415174bf866ba3124d708ec6ebfc"
@@ -6687,6 +6836,70 @@
     classnames "^2.5.1"
     es-toolkit "^1.39.10"
 
+"@vibe/icon-button@3.0.5":
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@vibe/icon-button/-/icon-button-3.0.5.tgz#3bbb1db95a3c2af1737acfbcef54a38867ba8191"
+  integrity sha512-GS31OUHgoElhRYUerqALRK8kB3czIXyHVONRhzVtKTGdoKLYaJP3bvIcqpnfzWaYjMMuKjgwp//JlUh2JHUI/g==
+  dependencies:
+    "@vibe/button" "3.0.16"
+    "@vibe/icon" "3.0.11"
+    "@vibe/icons" "1.16.0"
+    "@vibe/shared" "3.0.8"
+    "@vibe/tooltip" "3.0.5"
+    classnames "^2.5.1"
+    es-toolkit "^1.39.10"
+
+"@vibe/icon@3.0.11":
+  version "3.0.11"
+  resolved "https://registry.yarnpkg.com/@vibe/icon/-/icon-3.0.11.tgz#bb3159ec302a389d6f3e20edc36723d068f2efa5"
+  integrity sha512-4xdj++K+2e7Wy7mSeTS6aLK0rjZpwIuZZoFv6X/lE5PxR7JkA1IRiaHUyCSE9CS9W0TDGEAzN923YuFjU0ghsA==
+  dependencies:
+    "@vibe/shared" "3.0.8"
+    classnames "^2.5.1"
+    es-toolkit "^1.39.10"
+    react-inlinesvg "^4.1.3"
+
+"@vibe/icons@1.16.0", "@vibe/icons@^1.9.0":
+  version "1.16.0"
+  resolved "https://registry.yarnpkg.com/@vibe/icons/-/icons-1.16.0.tgz#89f51b2308b5f4c053f6a1e9e6fad2adca2ab1d3"
+  integrity sha512-/ljaos2zNr4NfZKLoAjOfEilWUlmvBwqh9fFN+Z1BdYW84oGZQGRdj4TJW5jyirZyJ/H6jTcutKUbJaD3Om7+w==
+
+"@vibe/layer@3.0.10":
+  version "3.0.10"
+  resolved "https://registry.yarnpkg.com/@vibe/layer/-/layer-3.0.10.tgz#656e9c33c9511d621199ad12c989bc9c8370ccb0"
+  integrity sha512-UChefl8dxp4SLadYcItRMc49AS8PEakDv05KBNxzej2vybignt0sqI98+CurC6lr+0dNRlf8x58+Gae9wy5ybQ==
+  dependencies:
+    "@vibe/icon" "3.0.11"
+    "@vibe/loader" "3.0.11"
+    "@vibe/shared" "3.0.8"
+    classnames "^2.5.1"
+    es-toolkit "^1.39.10"
+
+"@vibe/layout@3.0.3":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@vibe/layout/-/layout-3.0.3.tgz#0cb8f057844fc624696e5e1e13f244088e6ea354"
+  integrity sha512-9SGVKKl4IJqsqg7Yuy9aQHtqGG/wPs/7ZCK2g3Fp8ot0/yc3EjWgBQh0uP+wOVHyRaRUPfI4CdkCsVmdGJ4YFQ==
+  dependencies:
+    "@vibe/clickable" "3.0.3"
+    "@vibe/shared" "3.0.8"
+    classnames "^2.5.1"
+    es-toolkit "^1.39.10"
+
+"@vibe/loader@3.0.11":
+  version "3.0.11"
+  resolved "https://registry.yarnpkg.com/@vibe/loader/-/loader-3.0.11.tgz#f73390703330369cb5886bc4d42c1df120da8556"
+  integrity sha512-F1Yn9ti0yaD08VYt0pfubfyE1yRsG8GZA41TR+0erVr/XnVlf6NA8+07pU85N06rQnp89slxlMy8Yf4AevkWDQ==
+  dependencies:
+    "@vibe/shared" "3.0.8"
+    classnames "^2.5.1"
+
+"@vibe/shared@3.0.8":
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/@vibe/shared/-/shared-3.0.8.tgz#fddb789695ee5f62a894a1930674466b210819d2"
+  integrity sha512-qjWaNylbVKbdaDi75jFpp+LmF3y74JYdaLNWf6noiMkhq0fhcPTietVrHBxYO2b0cBvm1sQbrytX5YiBk3ii2w==
+  dependencies:
+    es-toolkit "^1.39.10"
+
 "@vibe/tooltip@3.0.4":
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/@vibe/tooltip/-/tooltip-3.0.4.tgz#73630b7747dd1721ed1e797e5e452bce06451580"
@@ -6699,6 +6912,18 @@
     classnames "^2.5.1"
     es-toolkit "^1.39.10"
 
+"@vibe/tooltip@3.0.5":
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@vibe/tooltip/-/tooltip-3.0.5.tgz#7e793b7086eec6951e892dfdc52a1375e787248b"
+  integrity sha512-+PYHdWDw/5ua1qj2RHRC0R1pmzpjd3wnUOpkq9+l7wJvqVmb66SFMhq2O7u4RxpKTvxjj41eS6jcAyHgWiaYvw==
+  dependencies:
+    "@vibe/dialog" "3.0.12"
+    "@vibe/icon" "3.0.11"
+    "@vibe/layout" "3.0.3"
+    "@vibe/shared" "3.0.8"
+    classnames "^2.5.1"
+    es-toolkit "^1.39.10"
+
 "@vibe/typography@3.0.4":
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/@vibe/typography/-/typography-3.0.4.tgz#c19140765431c2f9ae23bfb0e9a69c37dcff7784"
@@ -6711,6 +6936,18 @@
     es-toolkit "^1.39.10"
     monday-ui-style "0.26.2"
 
+"@vibe/typography@3.0.5":
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@vibe/typography/-/typography-3.0.5.tgz#d6cc582f24b15ea4bd5181b90f1a3f616f55292b"
+  integrity sha512-SRLWcFymgsdjagstUXWyUb8nYaQCKiaHi6/488MyjP5ssSXzP0/uJcQkd7c29fmZXxh5lg53xTEebPZrR7bmLA==
+  dependencies:
+    "@vibe/hooks" "3.0.3"
+    "@vibe/shared" "3.0.8"
+    "@vibe/tooltip" "3.0.5"
+    classnames "^2.5.1"
+    es-toolkit "^1.39.10"
+    monday-ui-style "0.26.2"
+
 "@vitejs/plugin-react@^4.3.1":
   version "4.5.2"
   resolved "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.5.2.tgz"
@@ -6889,7 +7126,7 @@ JSONStream@^1.3.5:
 
 a11y-dialog@^7.5.2:
   version "7.5.3"
-  resolved "https://registry.npmjs.org/a11y-dialog/-/a11y-dialog-7.5.3.tgz"
+  resolved "https://registry.yarnpkg.com/a11y-dialog/-/a11y-dialog-7.5.3.tgz#ceed4b3832d60b0123e29878d13a0ec5c2e7bcab"
   integrity sha512-ssx2j2FIgxhycE+liCKRam/S7F2TJyDJd8FwaoDS3vq5+yVTSg4dJAQPJr1abJLOlNmsjl5iAGE0VIp0x7gikg==
   dependencies:
     focusable-selectors "^0.4.0"
@@ -7027,7 +7264,7 @@ aggregate-error@^4.0.0:
 
 airbnb-prop-types@^2.14.0, airbnb-prop-types@^2.15.0, airbnb-prop-types@^2.16.0:
   version "2.16.0"
-  resolved "https://registry.npmjs.org/airbnb-prop-types/-/airbnb-prop-types-2.16.0.tgz"
+  resolved "https://registry.yarnpkg.com/airbnb-prop-types/-/airbnb-prop-types-2.16.0.tgz#b96274cefa1abb14f623f804173ee97c13971dc2"
   integrity sha512-7WHOFolP/6cS96PhKNrslCLMYAI8yB1Pp6u6XmxozQOiZbsI5ycglZr5cHhBFfuRcQQjzCMith5ZPZdYiJCxUg==
   dependencies:
     array.prototype.find "^2.1.1"
@@ -7244,6 +7481,14 @@ array-buffer-byte-length@^1.0.0, array-buffer-byte-length@^1.0.1:
     call-bind "^1.0.5"
     is-array-buffer "^3.0.4"
 
+array-buffer-byte-length@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz#384d12a37295aec3769ab022ad323a18a51ccf8b"
+  integrity sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==
+  dependencies:
+    call-bound "^1.0.3"
+    is-array-buffer "^3.0.5"
+
 array-differ@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/array-differ/-/array-differ-3.0.0.tgz"
@@ -7283,7 +7528,7 @@ array-union@^2.1.0:
 
 array.prototype.find@^2.1.1:
   version "2.2.3"
-  resolved "https://registry.npmjs.org/array.prototype.find/-/array.prototype.find-2.2.3.tgz"
+  resolved "https://registry.yarnpkg.com/array.prototype.find/-/array.prototype.find-2.2.3.tgz#675a233dbcd9b65ecf1fb3f915741aebc45461e6"
   integrity sha512-fO/ORdOELvjbbeIfZfzrXFMhYHGofRGqd+am9zm3tZ4GlJINj/pA2eITyfd65Vg6+ZbHd/Cys7stpoRSWtQFdA==
   dependencies:
     call-bind "^1.0.7"
@@ -7316,7 +7561,17 @@ array.prototype.findlastindex@^1.2.3:
     es-object-atoms "^1.0.0"
     es-shim-unscopables "^1.0.2"
 
-array.prototype.flat@^1.2.1, array.prototype.flat@^1.3.1, array.prototype.flat@^1.3.2:
+array.prototype.flat@^1.2.1:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.3.3.tgz#534aaf9e6e8dd79fb6b9a9917f839ef1ec63afe5"
+  integrity sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==
+  dependencies:
+    call-bind "^1.0.8"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.5"
+    es-shim-unscopables "^1.0.2"
+
+array.prototype.flat@^1.3.1, array.prototype.flat@^1.3.2:
   version "1.3.2"
   resolved "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.2.tgz"
   integrity sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==
@@ -7384,6 +7639,19 @@ arraybuffer.prototype.slice@^1.0.3:
     is-array-buffer "^3.0.4"
     is-shared-array-buffer "^1.0.2"
 
+arraybuffer.prototype.slice@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.4.tgz#9d760d84dbdd06d0cbf92c8849615a1a7ab3183c"
+  integrity sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==
+  dependencies:
+    array-buffer-byte-length "^1.0.1"
+    call-bind "^1.0.8"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.5"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.6"
+    is-array-buffer "^3.0.4"
+
 arrify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz"
@@ -7624,7 +7892,7 @@ babel-messages@^6.23.0:
 
 babel-plugin-emotion@^10.0.27:
   version "10.2.2"
-  resolved "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.2.2.tgz"
+  resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.2.2.tgz#a1fe3503cff80abfd0bdda14abd2e8e57a79d17d"
   integrity sha512-SMSkGoqTbTyUTDeuVuPIWifPdUGkTk1Kf9BWRiXIOIcuyMfsdp2EjeiiFvOzX8NOBvEh/ypKYvUh2rkgAJMCLA==
   dependencies:
     "@babel/helper-module-imports" "^7.0.0"
@@ -7671,7 +7939,7 @@ babel-plugin-jest-hoist@^29.6.3:
 
 babel-plugin-macros@^2.0.0:
   version "2.8.0"
-  resolved "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz"
+  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138"
   integrity sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==
   dependencies:
     "@babel/runtime" "^7.7.2"
@@ -7964,7 +8232,7 @@ body-parser@^2.2.0:
 
 body-scroll-lock@^4.0.0-beta.0:
   version "4.0.0-beta.0"
-  resolved "https://registry.npmjs.org/body-scroll-lock/-/body-scroll-lock-4.0.0-beta.0.tgz"
+  resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-4.0.0-beta.0.tgz#4f78789d10e6388115c0460cd6d7d4dd2bbc4f7e"
   integrity sha512-a7tP5+0Mw3YlUJcGAKUqIBkYYGlYxk2fnCasq/FUph1hadxlTRjF+gAcZksxANnaMnALjxEddmSi/H3OR8ugcQ==
 
 boolbase@^1.0.0, boolbase@~1.0.0:
@@ -8010,7 +8278,7 @@ braces@^3.0.3:
 
 brcast@^2.0.2:
   version "2.0.2"
-  resolved "https://registry.npmjs.org/brcast/-/brcast-2.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/brcast/-/brcast-2.0.2.tgz#2db16de44140e418dc37fab10beec0369e78dcef"
   integrity sha512-Tfn5JSE7hrUlFcOoaLzVvkbgIemIorMIyoMr3TgvszWW7jFt2C9PdeMLtysYD9RU0MmU17b69+XJG1eRY2OBRg==
 
 browser-assert@^1.2.1:
@@ -8163,7 +8431,7 @@ caching-transform@^4.0.0:
     package-hash "^4.0.0"
     write-file-atomic "^3.0.0"
 
-call-bind-apply-helpers@^1.0.1, call-bind-apply-helpers@^1.0.2:
+call-bind-apply-helpers@^1.0.0, call-bind-apply-helpers@^1.0.1, call-bind-apply-helpers@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz"
   integrity sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==
@@ -8182,7 +8450,17 @@ call-bind@^1.0.0, call-bind@^1.0.2, call-bind@^1.0.5, call-bind@^1.0.6, call-bin
     get-intrinsic "^1.2.4"
     set-function-length "^1.2.1"
 
-call-bound@^1.0.2:
+call-bind@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.8.tgz#0736a9660f537e3388826f440d5ec45f744eaa4c"
+  integrity sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==
+  dependencies:
+    call-bind-apply-helpers "^1.0.0"
+    es-define-property "^1.0.0"
+    get-intrinsic "^1.2.4"
+    set-function-length "^1.2.2"
+
+call-bound@^1.0.2, call-bound@^1.0.3, call-bound@^1.0.4:
   version "1.0.4"
   resolved "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz"
   integrity sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==
@@ -8801,7 +9079,7 @@ console-control-strings@^1.1.0:
 
 "consolidated-events@^1.1.1 || ^2.0.0":
   version "2.0.2"
-  resolved "https://registry.npmjs.org/consolidated-events/-/consolidated-events-2.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/consolidated-events/-/consolidated-events-2.0.2.tgz#da8d8f8c2b232831413d9e190dc11669c79f4a91"
   integrity sha512-2/uRVMdRypf5z/TW/ncD/66l75P5hH2vM/GR8Jf8HLc2xnfJtmina6F6du8+v4Z2vTrMo7jC+W1tmEEuuELgkQ==
 
 constant-case@^3.0.4:
@@ -8952,7 +9230,7 @@ cors@^2.8.5:
 
 cosmiconfig@^6.0.0:
   version "6.0.0"
-  resolved "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-6.0.0.tgz#da4fee853c52f6b1e6935f41c1a2fc50bd4a9982"
   integrity sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==
   dependencies:
     "@types/parse-json" "^4.0.0"
@@ -9198,7 +9476,7 @@ cssstyle@^2.3.0:
 
 csstype@^2.5.7:
   version "2.6.21"
-  resolved "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.21.tgz#2efb85b7cc55c80017c66a5ad7cbd931fda3a90e"
   integrity sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==
 
 csstype@^3.0.2, csstype@^3.1.0:
@@ -9251,6 +9529,15 @@ data-view-buffer@^1.0.1:
     es-errors "^1.3.0"
     is-data-view "^1.0.1"
 
+data-view-buffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/data-view-buffer/-/data-view-buffer-1.0.2.tgz#211a03ba95ecaf7798a8c7198d79536211f88570"
+  integrity sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==
+  dependencies:
+    call-bound "^1.0.3"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.2"
+
 data-view-byte-length@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.1.tgz"
@@ -9260,6 +9547,15 @@ data-view-byte-length@^1.0.1:
     es-errors "^1.3.0"
     is-data-view "^1.0.1"
 
+data-view-byte-length@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/data-view-byte-length/-/data-view-byte-length-1.0.2.tgz#9e80f7ca52453ce3e93d25a35318767ea7704735"
+  integrity sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==
+  dependencies:
+    call-bound "^1.0.3"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.2"
+
 data-view-byte-offset@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.0.tgz"
@@ -9269,6 +9565,15 @@ data-view-byte-offset@^1.0.0:
     es-errors "^1.3.0"
     is-data-view "^1.0.1"
 
+data-view-byte-offset@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/data-view-byte-offset/-/data-view-byte-offset-1.0.1.tgz#068307f9b71ab76dbbe10291389e020856606191"
+  integrity sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==
+  dependencies:
+    call-bound "^1.0.2"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.1"
+
 date-fns@^2.30.0:
   version "2.30.0"
   resolved "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0"
@@ -9404,7 +9709,7 @@ deep-is@^0.1.3:
 
 deepmerge@^1.5.2:
   version "1.5.2"
-  resolved "https://registry.npmjs.org/deepmerge/-/deepmerge-1.5.2.tgz"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-1.5.2.tgz#10499d868844cdad4fee0842df8c7f6f0c95a753"
   integrity sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==
 
 deepmerge@^4.2.2:
@@ -9568,7 +9873,7 @@ dir-glob@^3.0.1:
 
 direction@^1.0.4:
   version "1.0.4"
-  resolved "https://registry.npmjs.org/direction/-/direction-1.0.4.tgz"
+  resolved "https://registry.yarnpkg.com/direction/-/direction-1.0.4.tgz#2b86fb686967e987088caf8b89059370d4837442"
   integrity sha512-GYqKi1aH7PJXxdhTeZBFrg8vUBeKXi+cNprXsC1kpJcbcVnV9wBsrOu1cQEdG0WeQwlfHiy3XvnKfIrJ2R0NzQ==
 
 disparity@^2.0.0:
@@ -9595,7 +9900,7 @@ doctrine@^3.0.0:
 
 document.contains@^1.0.1:
   version "1.0.2"
-  resolved "https://registry.npmjs.org/document.contains/-/document.contains-1.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/document.contains/-/document.contains-1.0.2.tgz#4260abad67a6ae9e135c1be83d68da0db169d5f0"
   integrity sha512-YcvYFs15mX8m3AO1QNQy3BlIpSMfNRj3Ujk2BEJxsZG+HZf7/hZ6jr7mDpXrF8q+ff95Vef5yjhiZxm8CGJr6Q==
   dependencies:
     define-properties "^1.1.3"
@@ -9761,7 +10066,7 @@ downshift@^9.0.8:
     react-is "18.2.0"
     tslib "^2.6.2"
 
-dunder-proto@^1.0.1:
+dunder-proto@^1.0.0, dunder-proto@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz"
   integrity sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==
@@ -9921,7 +10226,7 @@ envinfo@7.8.1:
 
 enzyme-shallow-equal@^1.0.0:
   version "1.0.7"
-  resolved "https://registry.npmjs.org/enzyme-shallow-equal/-/enzyme-shallow-equal-1.0.7.tgz"
+  resolved "https://registry.yarnpkg.com/enzyme-shallow-equal/-/enzyme-shallow-equal-1.0.7.tgz#4e3aa678022387a68e6c47aff200587851885b5e"
   integrity sha512-/um0GFqUXnpM9SvKtje+9Tjoz3f1fpBC3eXRFrNs8kpYn69JljciYP7KZTqM/YQbUY9KUjvKB4jo/q+L6WGGvg==
   dependencies:
     hasown "^2.0.0"
@@ -9998,6 +10303,66 @@ es-abstract@^1.17.2, es-abstract@^1.22.1, es-abstract@^1.22.3, es-abstract@^1.23
     unbox-primitive "^1.0.2"
     which-typed-array "^1.1.15"
 
+es-abstract@^1.23.5, es-abstract@^1.23.9:
+  version "1.24.1"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.24.1.tgz#f0c131ed5ea1bb2411134a8dd94def09c46c7899"
+  integrity sha512-zHXBLhP+QehSSbsS9Pt23Gg964240DPd6QCf8WpkqEXxQ7fhdZzYsocOr5u7apWonsS5EjZDmTF+/slGMyasvw==
+  dependencies:
+    array-buffer-byte-length "^1.0.2"
+    arraybuffer.prototype.slice "^1.0.4"
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.8"
+    call-bound "^1.0.4"
+    data-view-buffer "^1.0.2"
+    data-view-byte-length "^1.0.2"
+    data-view-byte-offset "^1.0.1"
+    es-define-property "^1.0.1"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.1.1"
+    es-set-tostringtag "^2.1.0"
+    es-to-primitive "^1.3.0"
+    function.prototype.name "^1.1.8"
+    get-intrinsic "^1.3.0"
+    get-proto "^1.0.1"
+    get-symbol-description "^1.1.0"
+    globalthis "^1.0.4"
+    gopd "^1.2.0"
+    has-property-descriptors "^1.0.2"
+    has-proto "^1.2.0"
+    has-symbols "^1.1.0"
+    hasown "^2.0.2"
+    internal-slot "^1.1.0"
+    is-array-buffer "^3.0.5"
+    is-callable "^1.2.7"
+    is-data-view "^1.0.2"
+    is-negative-zero "^2.0.3"
+    is-regex "^1.2.1"
+    is-set "^2.0.3"
+    is-shared-array-buffer "^1.0.4"
+    is-string "^1.1.1"
+    is-typed-array "^1.1.15"
+    is-weakref "^1.1.1"
+    math-intrinsics "^1.1.0"
+    object-inspect "^1.13.4"
+    object-keys "^1.1.1"
+    object.assign "^4.1.7"
+    own-keys "^1.0.1"
+    regexp.prototype.flags "^1.5.4"
+    safe-array-concat "^1.1.3"
+    safe-push-apply "^1.0.0"
+    safe-regex-test "^1.1.0"
+    set-proto "^1.0.0"
+    stop-iteration-iterator "^1.1.0"
+    string.prototype.trim "^1.2.10"
+    string.prototype.trimend "^1.0.9"
+    string.prototype.trimstart "^1.0.8"
+    typed-array-buffer "^1.0.3"
+    typed-array-byte-length "^1.0.3"
+    typed-array-byte-offset "^1.0.4"
+    typed-array-length "^1.0.7"
+    unbox-primitive "^1.1.0"
+    which-typed-array "^1.1.19"
+
 es-array-method-boxes-properly@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/es-array-method-boxes-properly/-/es-array-method-boxes-properly-1.0.0.tgz"
@@ -10104,6 +10469,15 @@ es-to-primitive@^1.2.1:
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
+es-to-primitive@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.3.0.tgz#96c89c82cc49fd8794a24835ba3e1ff87f214e18"
+  integrity sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==
+  dependencies:
+    is-callable "^1.2.7"
+    is-date-object "^1.0.5"
+    is-symbol "^1.0.4"
+
 es-toolkit@^1.22.0, es-toolkit@^1.39.10:
   version "1.39.10"
   resolved "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.39.10.tgz"
@@ -11062,7 +11436,7 @@ find-process@^1.4.4:
 
 find-root@^1.1.0:
   version "1.1.0"
-  resolved "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
   integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
 
 find-up@5.0.0, find-up@^5.0.0:
@@ -11154,7 +11528,7 @@ focus-lock@^1.3.5:
 
 focusable-selectors@^0.4.0:
   version "0.4.0"
-  resolved "https://registry.npmjs.org/focusable-selectors/-/focusable-selectors-0.4.0.tgz"
+  resolved "https://registry.yarnpkg.com/focusable-selectors/-/focusable-selectors-0.4.0.tgz#c93092bfe65c7cf7ef52aed82fb6f8df31072459"
   integrity sha512-tc/236hUU3xemsRLu1RKhRQ5UWHjRM9iJTli1zdac43h7b1biRSgG0mILM0qrcsKaGCHcOPJ6NKbk12ouKHLpw==
 
 follow-redirects@^1.15.6:
@@ -11169,6 +11543,13 @@ for-each@^0.3.3:
   dependencies:
     is-callable "^1.1.3"
 
+for-each@^0.3.5:
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.5.tgz#d650688027826920feeb0af747ee7b9421a41d47"
+  integrity sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==
+  dependencies:
+    is-callable "^1.2.7"
+
 for-in@^1.0.1:
   version "1.0.2"
   resolved "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz"
@@ -11360,7 +11741,19 @@ function-bind@^1.1.2:
   resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz"
   integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
 
-function.prototype.name@^1.1.2, function.prototype.name@^1.1.5, function.prototype.name@^1.1.6:
+function.prototype.name@^1.1.2, function.prototype.name@^1.1.8:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.8.tgz#e68e1df7b259a5c949eeef95cdbde53edffabb78"
+  integrity sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    define-properties "^1.2.1"
+    functions-have-names "^1.2.3"
+    hasown "^2.0.2"
+    is-callable "^1.2.7"
+
+function.prototype.name@^1.1.5, function.prototype.name@^1.1.6:
   version "1.1.6"
   resolved "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.6.tgz"
   integrity sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==
@@ -11427,7 +11820,7 @@ get-intrinsic@^1.1.3, get-intrinsic@^1.2.1, get-intrinsic@^1.2.2, get-intrinsic@
     has-symbols "^1.0.3"
     hasown "^2.0.0"
 
-get-intrinsic@^1.2.5, get-intrinsic@^1.2.6, get-intrinsic@^1.3.0:
+get-intrinsic@^1.2.5, get-intrinsic@^1.2.6, get-intrinsic@^1.2.7, get-intrinsic@^1.3.0:
   version "1.3.0"
   resolved "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz"
   integrity sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==
@@ -11500,6 +11893,15 @@ get-symbol-description@^1.0.2:
     es-errors "^1.3.0"
     get-intrinsic "^1.2.4"
 
+get-symbol-description@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/get-symbol-description/-/get-symbol-description-1.1.0.tgz#7bdd54e0befe8ffc9f3b4e203220d9f1e881b6ee"
+  integrity sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==
+  dependencies:
+    call-bound "^1.0.3"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.6"
+
 get-tsconfig@^4.5.0:
   version "4.7.3"
   resolved "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.7.3.tgz"
@@ -11636,7 +12038,7 @@ glob@^9.2.0:
 
 global-cache@^1.2.1:
   version "1.2.1"
-  resolved "https://registry.npmjs.org/global-cache/-/global-cache-1.2.1.tgz"
+  resolved "https://registry.yarnpkg.com/global-cache/-/global-cache-1.2.1.tgz#39ca020d3dd7b3f0934c52b75363f8d53312c16d"
   integrity sha512-EOeUaup5DgWKlCMhA9YFqNRIlZwoxt731jCh47WBV9fQqHgXhr3Fa55hfgIUqilIcPsfdNKN7LHjrNY+Km40KA==
   dependencies:
     define-properties "^1.1.2"
@@ -11720,6 +12122,14 @@ globalthis@^1.0.3:
   dependencies:
     define-properties "^1.1.3"
 
+globalthis@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.4.tgz#7430ed3a975d97bfb59bcce41f5cabbafa651236"
+  integrity sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==
+  dependencies:
+    define-properties "^1.2.1"
+    gopd "^1.0.1"
+
 globby@10.0.1:
   version "10.0.1"
   resolved "https://registry.npmjs.org/globby/-/globby-10.0.1.tgz"
@@ -11840,6 +12250,13 @@ has-proto@^1.0.1, has-proto@^1.0.3:
   resolved "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz"
   integrity sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==
 
+has-proto@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.2.0.tgz#5de5a6eabd95fdffd9818b43055e8065e39fe9d5"
+  integrity sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==
+  dependencies:
+    dunder-proto "^1.0.0"
+
 has-symbols@^1.0.1, has-symbols@^1.0.2, has-symbols@^1.0.3:
   version "1.0.3"
   resolved "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz"
@@ -11862,11 +12279,6 @@ has-unicode@2.0.1, has-unicode@^2.0.1:
   resolved "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz"
   integrity sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==
 
-has@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.npmjs.org/has/-/has-1.0.4.tgz"
-  integrity sha512-qdSAmqLF6209RFj4VVItywPMbm3vWylknmB3nvNiUIs72xAimcM8nVYxYr7ncvZq5qzk9MKIZR8ijqD/1QuYjQ==
-
 hasha@^5.0.0:
   version "5.2.2"
   resolved "https://registry.npmjs.org/hasha/-/hasha-5.2.2.tgz#a48477989b3b327aea3c04f53096d816d97522a1"
@@ -11923,7 +12335,7 @@ highlight.js@^10.4.1, highlight.js@~10.7.0:
 
 hoist-non-react-statics@^3.2.1, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
-  resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
   dependencies:
     react-is "^16.7.0"
@@ -12164,7 +12576,15 @@ import-cwd@^3.0.0:
   dependencies:
     import-from "^3.0.0"
 
-import-fresh@^3.1.0, import-fresh@^3.2.1, import-fresh@^3.3.0:
+import-fresh@^3.1.0:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.1.tgz#9cecb56503c0ada1f2741dbbd6546e4b13b57ccf"
+  integrity sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==
+  dependencies:
+    parent-module "^1.0.0"
+    resolve-from "^4.0.0"
+
+import-fresh@^3.2.1, import-fresh@^3.3.0:
   version "3.3.0"
   resolved "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz"
   integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
@@ -12286,6 +12706,15 @@ internal-slot@^1.0.4, internal-slot@^1.0.7:
     hasown "^2.0.0"
     side-channel "^1.0.4"
 
+internal-slot@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.1.0.tgz#1eac91762947d2f7056bc838d93e13b2e9604961"
+  integrity sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==
+  dependencies:
+    es-errors "^1.3.0"
+    hasown "^2.0.2"
+    side-channel "^1.1.0"
+
 interpret@^1.0.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz"
@@ -12353,6 +12782,15 @@ is-array-buffer@^3.0.2, is-array-buffer@^3.0.4:
     call-bind "^1.0.2"
     get-intrinsic "^1.2.1"
 
+is-array-buffer@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/is-array-buffer/-/is-array-buffer-3.0.5.tgz#65742e1e687bd2cc666253068fd8707fe4d44280"
+  integrity sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    get-intrinsic "^1.2.6"
+
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz"
@@ -12372,6 +12810,13 @@ is-bigint@^1.0.1:
   dependencies:
     has-bigints "^1.0.1"
 
+is-bigint@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.1.0.tgz#dda7a3445df57a42583db4228682eba7c4170672"
+  integrity sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==
+  dependencies:
+    has-bigints "^1.0.2"
+
 is-binary-path@~2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz"
@@ -12387,6 +12832,14 @@ is-boolean-object@^1.1.0:
     call-bind "^1.0.2"
     has-tostringtag "^1.0.0"
 
+is-boolean-object@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.2.2.tgz#7067f47709809a393c71ff5bb3e135d8a9215d9e"
+  integrity sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==
+  dependencies:
+    call-bound "^1.0.3"
+    has-tostringtag "^1.0.2"
+
 is-builtin-module@^3.2.1:
   version "3.2.1"
   resolved "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-3.2.1.tgz"
@@ -12413,7 +12866,7 @@ is-core-module@^2.11.0, is-core-module@^2.13.0, is-core-module@^2.13.1, is-core-
   dependencies:
     hasown "^2.0.0"
 
-is-core-module@^2.16.0:
+is-core-module@^2.16.0, is-core-module@^2.16.1:
   version "2.16.1"
   resolved "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz"
   integrity sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==
@@ -12427,6 +12880,15 @@ is-data-view@^1.0.1:
   dependencies:
     is-typed-array "^1.1.13"
 
+is-data-view@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-data-view/-/is-data-view-1.0.2.tgz#bae0a41b9688986c2188dda6657e56b8f9e63b8e"
+  integrity sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==
+  dependencies:
+    call-bound "^1.0.2"
+    get-intrinsic "^1.2.6"
+    is-typed-array "^1.1.13"
+
 is-date-object@^1.0.1, is-date-object@^1.0.5:
   version "1.0.5"
   resolved "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz"
@@ -12434,6 +12896,14 @@ is-date-object@^1.0.1, is-date-object@^1.0.5:
   dependencies:
     has-tostringtag "^1.0.0"
 
+is-date-object@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.1.0.tgz#ad85541996fc7aa8b2729701d27b7319f95d82f7"
+  integrity sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==
+  dependencies:
+    call-bound "^1.0.2"
+    has-tostringtag "^1.0.2"
+
 is-decimal@^1.0.0:
   version "1.0.4"
   resolved "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz"
@@ -12456,6 +12926,13 @@ is-finalizationregistry@^1.0.2:
   dependencies:
     call-bind "^1.0.2"
 
+is-finalizationregistry@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-finalizationregistry/-/is-finalizationregistry-1.1.1.tgz#eefdcdc6c94ddd0674d9c85887bf93f944a97c90"
+  integrity sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==
+  dependencies:
+    call-bound "^1.0.3"
+
 is-finite@^1.0.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/is-finite/-/is-finite-1.1.0.tgz"
@@ -12535,6 +13012,14 @@ is-number-object@^1.0.4:
   dependencies:
     has-tostringtag "^1.0.0"
 
+is-number-object@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.1.1.tgz#144b21e95a1bc148205dcc2814a9134ec41b2541"
+  integrity sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==
+  dependencies:
+    call-bound "^1.0.3"
+    has-tostringtag "^1.0.2"
+
 is-number@^7.0.0:
   version "7.0.0"
   resolved "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz"
@@ -12609,7 +13094,17 @@ is-reference@1.2.1:
   dependencies:
     "@types/estree" "*"
 
-is-regex@^1.1.0, is-regex@^1.1.4:
+is-regex@^1.1.0, is-regex@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.2.1.tgz#76d70a3ed10ef9be48eb577887d74205bf0cad22"
+  integrity sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==
+  dependencies:
+    call-bound "^1.0.2"
+    gopd "^1.2.0"
+    has-tostringtag "^1.0.2"
+    hasown "^2.0.2"
+
+is-regex@^1.1.4:
   version "1.1.4"
   resolved "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz"
   integrity sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==
@@ -12636,6 +13131,13 @@ is-shared-array-buffer@^1.0.2, is-shared-array-buffer@^1.0.3:
   dependencies:
     call-bind "^1.0.7"
 
+is-shared-array-buffer@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.4.tgz#9b67844bd9b7f246ba0708c3a93e34269c774f6f"
+  integrity sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==
+  dependencies:
+    call-bound "^1.0.3"
+
 is-ssh@^1.4.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/is-ssh/-/is-ssh-1.4.0.tgz"
@@ -12665,7 +13167,24 @@ is-string@^1.0.5, is-string@^1.0.7:
   dependencies:
     has-tostringtag "^1.0.0"
 
-is-symbol@^1.0.1, is-symbol@^1.0.2, is-symbol@^1.0.3:
+is-string@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.1.1.tgz#92ea3f3d5c5b6e039ca8677e5ac8d07ea773cbb9"
+  integrity sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==
+  dependencies:
+    call-bound "^1.0.3"
+    has-tostringtag "^1.0.2"
+
+is-symbol@^1.0.1, is-symbol@^1.0.4, is-symbol@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.1.1.tgz#f47761279f532e2b05a7024a7506dbbedacd0634"
+  integrity sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==
+  dependencies:
+    call-bound "^1.0.2"
+    has-symbols "^1.1.0"
+    safe-regex-test "^1.1.0"
+
+is-symbol@^1.0.2, is-symbol@^1.0.3:
   version "1.0.4"
   resolved "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz"
   integrity sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==
@@ -12681,7 +13200,7 @@ is-text-path@^1.0.1:
 
 is-touch-device@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.npmjs.org/is-touch-device/-/is-touch-device-1.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/is-touch-device/-/is-touch-device-1.0.1.tgz#9a2fd59f689e9a9bf6ae9a86924c4ba805a42eab"
   integrity sha512-LAYzo9kMT1b2p19L/1ATGt2XcSilnzNlyvq6c0pbPRVisLbAPpLqr53tIJS00kvrTkj0HtR8U7+u8X0yR8lPSw==
 
 is-typed-array@^1.1.13, is-typed-array@^1.1.3:
@@ -12691,6 +13210,13 @@ is-typed-array@^1.1.13, is-typed-array@^1.1.3:
   dependencies:
     which-typed-array "^1.1.14"
 
+is-typed-array@^1.1.14, is-typed-array@^1.1.15:
+  version "1.1.15"
+  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.15.tgz#4bfb4a45b61cee83a5a46fba778e4e8d59c0ce0b"
+  integrity sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==
+  dependencies:
+    which-typed-array "^1.1.16"
+
 is-typedarray@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz"
@@ -12730,6 +13256,13 @@ is-weakref@^1.0.2:
   dependencies:
     call-bind "^1.0.2"
 
+is-weakref@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-weakref/-/is-weakref-1.1.1.tgz#eea430182be8d64174bd96bffbc46f21bf3f9293"
+  integrity sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==
+  dependencies:
+    call-bound "^1.0.3"
+
 is-weakset@^2.0.3:
   version "2.0.3"
   resolved "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.3.tgz"
@@ -14504,7 +15037,12 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz"
   integrity sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==
 
-lodash@^4.1.1, lodash@^4.17.15, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0:
+lodash@^4.1.1:
+  version "4.17.23"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.23.tgz#f113b0378386103be4f6893388c73d0bde7f2c5a"
+  integrity sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==
+
+lodash@^4.17.15, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0:
   version "4.17.21"
   resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -15532,11 +16070,21 @@ modify-values@^1.0.1:
   resolved "https://registry.npmjs.org/modify-values/-/modify-values-1.0.1.tgz"
   integrity sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==
 
-moment@>=1.6.0, moment@^2.26.0:
+moment@>=1.6.0:
   version "2.30.1"
-  resolved "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.30.1.tgz#f8c91c07b7a786e30c59926df530b4eac96974ae"
   integrity sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==
 
+monday-ui-style@0.26.2:
+  version "0.26.2"
+  resolved "https://registry.yarnpkg.com/monday-ui-style/-/monday-ui-style-0.26.2.tgz#2335dbf63fa988c841e55519eaf7d260c5d822e1"
+  integrity sha512-LZxjT+eqppL/m/hvxPfGdiFZ5xbv31rFkwItfuVHup8Xw3axTNgsvewDJg/Ahs0G7qcO9T7ucMIk7B440HtUJg==
+  dependencies:
+    postcss "8.4.31"
+    postcss-scss "^4.0.9"
+    postcss-value-parser "4.2.0"
+    stylelint "^14.16.1"
+
 mout@1.1.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/mout/-/mout-1.1.0.tgz"
@@ -16094,7 +16642,7 @@ object-inspect@^1.13.1:
   resolved "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz"
   integrity sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==
 
-object-inspect@^1.13.3:
+object-inspect@^1.13.3, object-inspect@^1.13.4:
   version "1.13.4"
   resolved "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz"
   integrity sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==
@@ -16112,7 +16660,19 @@ object-keys@^1.1.1:
   resolved "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz"
   integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
 
-object.assign@^4.1.0, object.assign@^4.1.2, object.assign@^4.1.4, object.assign@^4.1.5:
+object.assign@^4.1.0, object.assign@^4.1.7:
+  version "4.1.7"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.7.tgz#8c14ca1a424c6a561b0bb2a22f66f5049a945d3d"
+  integrity sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+    has-symbols "^1.1.0"
+    object-keys "^1.1.1"
+
+object.assign@^4.1.2, object.assign@^4.1.4, object.assign@^4.1.5:
   version "4.1.5"
   resolved "https://registry.npmjs.org/object.assign/-/object.assign-4.1.5.tgz"
   integrity sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==
@@ -16132,7 +16692,17 @@ object.defaults@^1.1.0:
     for-own "^1.0.0"
     isobject "^3.0.0"
 
-object.entries@^1.1.2, object.entries@^1.1.5, object.entries@^1.1.7:
+object.entries@^1.1.2:
+  version "1.1.9"
+  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.9.tgz#e4770a6a1444afb61bd39f984018b5bede25f8b3"
+  integrity sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.4"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.1.1"
+
+object.entries@^1.1.5, object.entries@^1.1.7:
   version "1.1.8"
   resolved "https://registry.npmjs.org/object.entries/-/object.entries-1.1.8.tgz"
   integrity sha512-cmopxi8VwRIAw/fkijJohSfpef5PdN0pMQJN6VC/ZKvn0LIknWD8KtgY6KlQdEc4tIjcQ3HxSMmnvtzIscdaYQ==
@@ -16197,7 +16767,7 @@ object.pick@^1.3.0:
   dependencies:
     isobject "^3.0.1"
 
-object.values@^1.1.0, object.values@^1.1.5, object.values@^1.1.6, object.values@^1.1.7:
+object.values@^1.1.0, object.values@^1.1.6, object.values@^1.1.7:
   version "1.2.0"
   resolved "https://registry.npmjs.org/object.values/-/object.values-1.2.0.tgz"
   integrity sha512-yBYjY9QX2hnRmZHAjG/f13MzmBzxzYgQhFrke06TTyKY5zSTEqkOeukBzIdVA3j3ulu8Qa3MbVFShV7T2RmGtQ==
@@ -16206,6 +16776,16 @@ object.values@^1.1.0, object.values@^1.1.5, object.values@^1.1.6, object.values@
     define-properties "^1.2.1"
     es-object-atoms "^1.0.0"
 
+object.values@^1.1.5:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.2.1.tgz#deed520a50809ff7f75a7cfd4bc64c7a038c6216"
+  integrity sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+
 on-finished@^2.4.1:
   version "2.4.1"
   resolved "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz"
@@ -16309,6 +16889,15 @@ os-tmpdir@^1.0.1, os-tmpdir@~1.0.2:
   resolved "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz"
   integrity sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==
 
+own-keys@^1.0.0, own-keys@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/own-keys/-/own-keys-1.0.1.tgz#e4006910a2bf913585289676eebd6f390cf51358"
+  integrity sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==
+  dependencies:
+    get-intrinsic "^1.2.6"
+    object-keys "^1.1.1"
+    safe-push-apply "^1.0.0"
+
 p-finally@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz"
@@ -16694,7 +17283,7 @@ pathval@^2.0.0:
 
 performance-now@^2.1.0:
   version "2.1.0"
-  resolved "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
   integrity sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==
 
 picocolors@^1.0.0:
@@ -17348,13 +17937,16 @@ promzard@^1.0.0:
     read "^2.0.0"
 
 prop-types-exact@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.npmjs.org/prop-types-exact/-/prop-types-exact-1.2.0.tgz"
-  integrity sha512-K+Tk3Kd9V0odiXFP9fwDHUYRyvK3Nun3GVyPapSIs5OBkITAm15W0CPFD/YKTkMUAbc0b9CUwRQp2ybiBIq+eA==
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/prop-types-exact/-/prop-types-exact-1.2.7.tgz#dba4509df22b72f79583bb82e22cce663b05f0e3"
+  integrity sha512-A4RaV6mg3jocQqBYmqi2ojJ2VnV4AKTEHhl3xHsud08/u87gcVJc8DUOtgnPegoOCQv/shUqEk4eZGYibjnHzQ==
   dependencies:
-    has "^1.0.3"
-    object.assign "^4.1.0"
-    reflect.ownkeys "^0.2.0"
+    call-bound "^1.0.3"
+    es-errors "^1.3.0"
+    hasown "^2.0.2"
+    isarray "^2.0.5"
+    object.assign "^4.1.7"
+    own-keys "^1.0.0"
 
 prop-types@15.x, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
@@ -17461,7 +18053,7 @@ quick-lru@^4.0.1:
 
 raf@^3.4.1:
   version "3.4.1"
-  resolved "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz"
+  resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
   integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
   dependencies:
     performance-now "^2.1.0"
@@ -17514,7 +18106,7 @@ react-confetti@^6.1.0:
 
 react-dates@21.8.0:
   version "21.8.0"
-  resolved "https://registry.npmjs.org/react-dates/-/react-dates-21.8.0.tgz"
+  resolved "https://registry.yarnpkg.com/react-dates/-/react-dates-21.8.0.tgz#355c3c7a243a7c29568fe00aca96231e171a5e94"
   integrity sha512-PPriGqi30CtzZmoHiGdhlA++YPYPYGCZrhydYmXXQ6RAvAsaONcPtYgXRTLozIOrsQ5mSo40+DiA5eOFHnZ6xw==
   dependencies:
     airbnb-prop-types "^2.15.0"
@@ -17615,14 +18207,14 @@ react-inlinesvg@^4.1.3:
 
 react-input-autosize@^2.2.2:
   version "2.2.2"
-  resolved "https://registry.npmjs.org/react-input-autosize/-/react-input-autosize-2.2.2.tgz"
+  resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-2.2.2.tgz#fcaa7020568ec206bc04be36f4eb68e647c4d8c2"
   integrity sha512-jQJgYCA3S0j+cuOwzuCd1OjmBmnZLdqQdiLKRYrsMMzbjUrVDS5RvJUDwJqA7sKuksDuzFtm6hZGKFu7Mjk5aw==
   dependencies:
     prop-types "^15.5.8"
 
 react-input-autosize@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.npmjs.org/react-input-autosize/-/react-input-autosize-3.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-3.0.0.tgz#6b5898c790d4478d69420b55441fcc31d5c50a85"
   integrity sha512-nL9uS7jEs/zu8sqwFE5MAPx6pPkNAriACQ2rGLlqmKr2sPGtN7TXTyDdQt4lbNXVx7Uzadb40x8qotIuru6Rhg==
   dependencies:
     prop-types "^15.5.8"
@@ -17662,14 +18254,14 @@ react-live@^4.1.7:
 
 react-moment-proptypes@^1.6.0:
   version "1.8.1"
-  resolved "https://registry.npmjs.org/react-moment-proptypes/-/react-moment-proptypes-1.8.1.tgz"
+  resolved "https://registry.yarnpkg.com/react-moment-proptypes/-/react-moment-proptypes-1.8.1.tgz#7ba4076147f6b5998f0d4f51d302d6d8c62049fd"
   integrity sha512-Er940DxWoObfIqPrZNfwXKugjxMIuk1LAuEzn23gytzV6hKS/sw108wibi9QubfMN4h+nrlje8eUCSbQRJo2fQ==
   dependencies:
     moment ">=1.6.0"
 
 react-outside-click-handler@^1.2.4:
   version "1.3.0"
-  resolved "https://registry.npmjs.org/react-outside-click-handler/-/react-outside-click-handler-1.3.0.tgz"
+  resolved "https://registry.yarnpkg.com/react-outside-click-handler/-/react-outside-click-handler-1.3.0.tgz#3831d541ac059deecd38ec5423f81e80ad60e115"
   integrity sha512-Te/7zFU0oHpAnctl//pP3hEAeobfeHMyygHB8MnjP6sX5OR8KHT1G3jmLsV3U9RnIYo+Yn+peJYWu+D5tUS8qQ==
   dependencies:
     airbnb-prop-types "^2.15.0"
@@ -17687,9 +18279,9 @@ react-popper@^2.3.0:
     warning "^4.0.2"
 
 react-portal@^4.2.0:
-  version "4.2.2"
-  resolved "https://registry.npmjs.org/react-portal/-/react-portal-4.2.2.tgz"
-  integrity sha512-vS18idTmevQxyQpnde0Td6ZcUlv+pD8GTyR42n3CHUQq9OHi1C4jDE4ZWEbEsrbrLRhSECYiao58cvocwMtP7Q==
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/react-portal/-/react-portal-4.3.0.tgz#92ca3492b1309883134f317a6aa88004534c860f"
+  integrity sha512-qs/2uKq1ifB3J1+K8ExfgUvCDZqlqCkfOEhqTELEDTfosloKiuzOzc7hl7IQ/7nohiFZD41BUYU0boAsIsGYHw==
   dependencies:
     prop-types "^15.5.8"
 
@@ -17738,7 +18330,7 @@ react-resizable@^3.0.4:
 
 react-select@3.1.0:
   version "3.1.0"
-  resolved "https://registry.npmjs.org/react-select/-/react-select-3.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/react-select/-/react-select-3.1.0.tgz#ab098720b2e9fe275047c993f0d0caf5ded17c27"
   integrity sha512-wBFVblBH1iuCBprtpyGtd1dGMadsG36W5/t2Aj8OE6WbByDg5jIFyT7X5gT+l0qmT5TqWhxX+VsKJvCEl2uL9g==
   dependencies:
     "@babel/runtime" "^7.4.4"
@@ -17752,7 +18344,7 @@ react-select@3.1.0:
 
 "react-select@npm:react-select-module@3.4.0":
   version "3.4.0"
-  resolved "https://registry.npmjs.org/react-select-module/-/react-select-module-3.4.0.tgz#0a132a29428e841928ce16e7c758683f747ee189"
+  resolved "https://registry.yarnpkg.com/react-select-module/-/react-select-module-3.4.0.tgz#0a132a29428e841928ce16e7c758683f747ee189"
   integrity sha512-d9swlWWqqQyrZPfako6aKFK/kdLY9m4TQMIdhuD387VVAqB3+0zEKGb0ANQWsNNobo5ga46SltQzXuklxUvteA==
   dependencies:
     "@babel/runtime" "^7.4.4"
@@ -17811,7 +18403,7 @@ react-virtualized-auto-sizer@^1.0.7:
 
 react-window@1.8.5:
   version "1.8.5"
-  resolved "https://registry.npmjs.org/react-window/-/react-window-1.8.5.tgz"
+  resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.5.tgz#a56b39307e79979721021f5d06a67742ecca52d1"
   integrity sha512-HeTwlNa37AFa8MDZFZOKcNEkuF2YflA0hpGPiTT9vR7OawEt+GZbfM6wqkBahD3D3pUjIabQYzsnY/BSJbgq6Q==
   dependencies:
     "@babel/runtime" "^7.0.0"
@@ -17827,7 +18419,7 @@ react-window@^1.8.7:
 
 react-windowed-select@^2.0.4:
   version "2.0.5"
-  resolved "https://registry.npmjs.org/react-windowed-select/-/react-windowed-select-2.0.5.tgz"
+  resolved "https://registry.yarnpkg.com/react-windowed-select/-/react-windowed-select-2.0.5.tgz#4fa56bdbe246706cb3d01f8882933807bea2e900"
   integrity sha512-HIpl3jl7fjxAFAn9RgY7JMw240Gj1Spookx656zyG7cYucYtCK4RLqv1celqdGHcXTCy5R3IFVoDcVasF2YNDg==
   dependencies:
     react-select "3.1.0"
@@ -17835,7 +18427,7 @@ react-windowed-select@^2.0.4:
 
 react-with-direction@^1.3.1:
   version "1.4.0"
-  resolved "https://registry.npmjs.org/react-with-direction/-/react-with-direction-1.4.0.tgz"
+  resolved "https://registry.yarnpkg.com/react-with-direction/-/react-with-direction-1.4.0.tgz#ebdf64d685d0650ce966e872e6431ad5a2485444"
   integrity sha512-ybHNPiAmaJpoWwugwqry9Hd1Irl2hnNXlo/2SXQBwbLn/jGMauMS2y9jw+ydyX5V9ICryCqObNSthNt5R94xpg==
   dependencies:
     airbnb-prop-types "^2.16.0"
@@ -17849,7 +18441,7 @@ react-with-direction@^1.3.1:
 
 react-with-styles-interface-css@^6.0.0:
   version "6.0.0"
-  resolved "https://registry.npmjs.org/react-with-styles-interface-css/-/react-with-styles-interface-css-6.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/react-with-styles-interface-css/-/react-with-styles-interface-css-6.0.0.tgz#b53da7fa8359d452cb934cface8738acaef7b5fe"
   integrity sha512-6khSG1Trf4L/uXOge/ZAlBnq2O2PEXlQEqAhCRbvzaQU4sksIkdwpCPEl6d+DtP3+IdhyffTWuHDO9lhe1iYvA==
   dependencies:
     array.prototype.flat "^1.2.1"
@@ -17857,7 +18449,7 @@ react-with-styles-interface-css@^6.0.0:
 
 react-with-styles@^4.1.0:
   version "4.2.0"
-  resolved "https://registry.npmjs.org/react-with-styles/-/react-with-styles-4.2.0.tgz"
+  resolved "https://registry.yarnpkg.com/react-with-styles/-/react-with-styles-4.2.0.tgz#0b8a8e5d94d082518b9f564f6fcf6103e28096c5"
   integrity sha512-tZCTY27KriRNhwHIbg1NkSdTTOSfXDg6Z7s+Q37mtz0Ym7Sc7IOr3PzVt4qJhJMW6Nkvfi3g34FuhtiGAJCBQA==
   dependencies:
     airbnb-prop-types "^2.14.0"
@@ -18074,10 +18666,19 @@ reflect.getprototypeof@^1.0.4:
     globalthis "^1.0.3"
     which-builtin-type "^1.1.3"
 
-reflect.ownkeys@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.npmjs.org/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz"
-  integrity sha512-qOLsBKHCpSOFKK1NUOCGC5VyeufB6lEsFe92AL2bhIJsacZS1qdoOZSbPk3MYKuT2cFlRDnulKXuuElIrMjGUg==
+reflect.getprototypeof@^1.0.6, reflect.getprototypeof@^1.0.9:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz#c629219e78a3316d8b604c765ef68996964e7bf9"
+  integrity sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==
+  dependencies:
+    call-bind "^1.0.8"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.9"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    get-intrinsic "^1.2.7"
+    get-proto "^1.0.1"
+    which-builtin-type "^1.2.1"
 
 refractor@^3.6.0:
   version "3.6.0"
@@ -18137,6 +18738,18 @@ regexp.prototype.flags@^1.5.1, regexp.prototype.flags@^1.5.2:
     es-errors "^1.3.0"
     set-function-name "^2.0.1"
 
+regexp.prototype.flags@^1.5.4:
+  version "1.5.4"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz#1ad6c62d44a259007e55b3970e00f746efbcaa19"
+  integrity sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==
+  dependencies:
+    call-bind "^1.0.8"
+    define-properties "^1.2.1"
+    es-errors "^1.3.0"
+    get-proto "^1.0.1"
+    gopd "^1.2.0"
+    set-function-name "^2.0.2"
+
 regexpu-core@^5.3.1:
   version "5.3.2"
   resolved "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.3.2.tgz"
@@ -18295,7 +18908,7 @@ resolve.exports@^2.0.0:
   resolved "https://registry.npmjs.org/resolve.exports/-/resolve.exports-2.0.2.tgz"
   integrity sha512-X2UW6Nw3n/aMgDVy+0rSqgHlv39WZAlZrXCdnbyEiKm17DSqHX4MmQMaST3FbeWR5FTuRcUwYAziZajji0Y7mg==
 
-resolve@^1.1.5, resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.12.0, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.1, resolve@^1.22.4:
+resolve@^1.1.5, resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.1, resolve@^1.22.4:
   version "1.22.8"
   resolved "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz"
   integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
@@ -18304,6 +18917,15 @@ resolve@^1.1.5, resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.12.0
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
+resolve@^1.12.0:
+  version "1.22.11"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.11.tgz#aad857ce1ffb8bfa9b0b1ac29f1156383f68c262"
+  integrity sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==
+  dependencies:
+    is-core-module "^2.16.1"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
 resolve@^1.22.8:
   version "1.22.10"
   resolved "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz"
@@ -18617,6 +19239,17 @@ safe-array-concat@^1.1.2:
     has-symbols "^1.0.3"
     isarray "^2.0.5"
 
+safe-array-concat@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/safe-array-concat/-/safe-array-concat-1.1.3.tgz#c9e54ec4f603b0bbb8e7e5007a5ee7aecd1538c3"
+  integrity sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.2"
+    get-intrinsic "^1.2.6"
+    has-symbols "^1.1.0"
+    isarray "^2.0.5"
+
 safe-buffer@5.2.1, safe-buffer@^5.1.0, safe-buffer@~5.2.0:
   version "5.2.1"
   resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz"
@@ -18632,6 +19265,14 @@ safe-identifier@^0.4.2:
   resolved "https://registry.npmjs.org/safe-identifier/-/safe-identifier-0.4.2.tgz"
   integrity sha512-6pNbSMW6OhAi9j+N8V+U715yBQsaWJ7eyEUaOrawX+isg5ZxhUlV1NipNtgaKHmFGiABwt+ZF04Ii+3Xjkg+8w==
 
+safe-push-apply@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/safe-push-apply/-/safe-push-apply-1.0.0.tgz#01850e981c1602d398c85081f360e4e6d03d27f5"
+  integrity sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==
+  dependencies:
+    es-errors "^1.3.0"
+    isarray "^2.0.5"
+
 safe-regex-test@^1.0.3:
   version "1.0.3"
   resolved "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.3.tgz"
@@ -18641,6 +19282,15 @@ safe-regex-test@^1.0.3:
     es-errors "^1.3.0"
     is-regex "^1.1.4"
 
+safe-regex-test@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/safe-regex-test/-/safe-regex-test-1.1.0.tgz#7f87dfb67a3150782eaaf18583ff5d1711ac10c1"
+  integrity sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==
+  dependencies:
+    call-bound "^1.0.2"
+    es-errors "^1.3.0"
+    is-regex "^1.2.1"
+
 "safer-buffer@>= 2.1.2 < 3", "safer-buffer@>= 2.1.2 < 3.0.0":
   version "2.1.2"
   resolved "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz"
@@ -18802,7 +19452,7 @@ set-blocking@^2.0.0:
   resolved "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz"
   integrity sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==
 
-set-function-length@^1.2.1:
+set-function-length@^1.2.1, set-function-length@^1.2.2:
   version "1.2.2"
   resolved "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz"
   integrity sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==
@@ -18824,6 +19474,15 @@ set-function-name@^2.0.1, set-function-name@^2.0.2:
     functions-have-names "^1.2.3"
     has-property-descriptors "^1.0.2"
 
+set-proto@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/set-proto/-/set-proto-1.0.0.tgz#0760dbcff30b2d7e801fd6e19983e56da337565e"
+  integrity sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==
+  dependencies:
+    dunder-proto "^1.0.1"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+
 setprototypeof@1.2.0:
   version "1.2.0"
   resolved "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz"
@@ -19249,6 +19908,14 @@ stop-iteration-iterator@^1.0.0:
   dependencies:
     internal-slot "^1.0.4"
 
+stop-iteration-iterator@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz#f481ff70a548f6124d0312c3aa14cbfa7aa542ad"
+  integrity sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==
+  dependencies:
+    es-errors "^1.3.0"
+    internal-slot "^1.1.0"
+
 store2@^2.14.2:
   version "2.14.3"
   resolved "https://registry.npmjs.org/store2/-/store2-2.14.3.tgz"
@@ -19359,6 +20026,19 @@ string.prototype.matchall@^4.0.10:
     set-function-name "^2.0.2"
     side-channel "^1.0.6"
 
+string.prototype.trim@^1.2.10:
+  version "1.2.10"
+  resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.10.tgz#40b2dd5ee94c959b4dcfb1d65ce72e90da480c81"
+  integrity sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.2"
+    define-data-property "^1.1.4"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.5"
+    es-object-atoms "^1.0.0"
+    has-property-descriptors "^1.0.2"
+
 string.prototype.trim@^1.2.9:
   version "1.2.9"
   resolved "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.9.tgz"
@@ -19378,7 +20058,17 @@ string.prototype.trimend@^1.0.8:
     define-properties "^1.2.1"
     es-object-atoms "^1.0.0"
 
-string.prototype.trimstart@^1.0.7:
+string.prototype.trimend@^1.0.9:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.9.tgz#62e2731272cd285041b36596054e9f66569b6942"
+  integrity sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.2"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+
+string.prototype.trimstart@^1.0.7, string.prototype.trimstart@^1.0.8:
   version "1.0.8"
   resolved "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz"
   integrity sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==
@@ -20253,6 +20943,15 @@ typed-array-buffer@^1.0.2:
     es-errors "^1.3.0"
     is-typed-array "^1.1.13"
 
+typed-array-buffer@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz#a72395450a4869ec033fd549371b47af3a2ee536"
+  integrity sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==
+  dependencies:
+    call-bound "^1.0.3"
+    es-errors "^1.3.0"
+    is-typed-array "^1.1.14"
+
 typed-array-byte-length@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.1.tgz"
@@ -20264,6 +20963,17 @@ typed-array-byte-length@^1.0.1:
     has-proto "^1.0.3"
     is-typed-array "^1.1.13"
 
+typed-array-byte-length@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/typed-array-byte-length/-/typed-array-byte-length-1.0.3.tgz#8407a04f7d78684f3d252aa1a143d2b77b4160ce"
+  integrity sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==
+  dependencies:
+    call-bind "^1.0.8"
+    for-each "^0.3.3"
+    gopd "^1.2.0"
+    has-proto "^1.2.0"
+    is-typed-array "^1.1.14"
+
 typed-array-byte-offset@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.2.tgz"
@@ -20276,6 +20986,19 @@ typed-array-byte-offset@^1.0.2:
     has-proto "^1.0.3"
     is-typed-array "^1.1.13"
 
+typed-array-byte-offset@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/typed-array-byte-offset/-/typed-array-byte-offset-1.0.4.tgz#ae3698b8ec91a8ab945016108aef00d5bff12355"
+  integrity sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==
+  dependencies:
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.8"
+    for-each "^0.3.3"
+    gopd "^1.2.0"
+    has-proto "^1.2.0"
+    is-typed-array "^1.1.15"
+    reflect.getprototypeof "^1.0.9"
+
 typed-array-length@^1.0.5:
   version "1.0.6"
   resolved "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.6.tgz"
@@ -20288,6 +21011,18 @@ typed-array-length@^1.0.5:
     is-typed-array "^1.1.13"
     possible-typed-array-names "^1.0.0"
 
+typed-array-length@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/typed-array-length/-/typed-array-length-1.0.7.tgz#ee4deff984b64be1e118b0de8c9c877d5ce73d3d"
+  integrity sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==
+  dependencies:
+    call-bind "^1.0.7"
+    for-each "^0.3.3"
+    gopd "^1.0.1"
+    is-typed-array "^1.1.13"
+    possible-typed-array-names "^1.0.0"
+    reflect.getprototypeof "^1.0.6"
+
 typedarray-to-buffer@^3.1.5:
   version "3.1.5"
   resolved "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz"
@@ -20344,15 +21079,15 @@ typescript-plugin-css-modules@^5.0.1:
     stylus "^0.62.0"
     tsconfig-paths "^4.2.0"
 
-"typescript@>=3 < 6", typescript@^5.1.6:
+"typescript@>=3 < 6":
   version "5.4.3"
   resolved "https://registry.npmjs.org/typescript/-/typescript-5.4.3.tgz"
   integrity sha512-KrPd3PKaCLr78MalgiwJnA25Nm8HAmdwN3mYUYZgG/wizIo9EainNVQI9/yDavtVFRN2h3k8uf3GLHuhDMgEHg==
 
-typescript@^4.7.3:
-  version "4.9.5"
-  resolved "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz"
-  integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
+typescript@^5.9.3:
+  version "5.9.3"
+  resolved "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz#5b4f59e15310ab17a216f5d6cf53ee476ede670f"
+  integrity sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==
 
 ufo@^1.5.3:
   version "1.5.3"
@@ -20374,6 +21109,16 @@ unbox-primitive@^1.0.2:
     has-symbols "^1.0.3"
     which-boxed-primitive "^1.0.2"
 
+unbox-primitive@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.1.0.tgz#8d9d2c9edeea8460c7f35033a88867944934d1e2"
+  integrity sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==
+  dependencies:
+    call-bound "^1.0.3"
+    has-bigints "^1.0.2"
+    has-symbols "^1.1.0"
+    which-boxed-primitive "^1.1.1"
+
 unc-path-regex@^0.1.2:
   version "0.1.2"
   resolved "https://registry.npmjs.org/unc-path-regex/-/unc-path-regex-0.1.2.tgz"
@@ -20960,6 +21705,17 @@ which-boxed-primitive@^1.0.2:
     is-string "^1.0.5"
     is-symbol "^1.0.3"
 
+which-boxed-primitive@^1.1.0, which-boxed-primitive@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz#d76ec27df7fa165f18d5808374a5fe23c29b176e"
+  integrity sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==
+  dependencies:
+    is-bigint "^1.1.0"
+    is-boolean-object "^1.2.1"
+    is-number-object "^1.1.1"
+    is-string "^1.1.1"
+    is-symbol "^1.1.1"
+
 which-builtin-type@^1.1.3:
   version "1.1.3"
   resolved "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.1.3.tgz"
@@ -20978,7 +21734,26 @@ which-builtin-type@^1.1.3:
     which-collection "^1.0.1"
     which-typed-array "^1.1.9"
 
-which-collection@^1.0.1:
+which-builtin-type@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/which-builtin-type/-/which-builtin-type-1.2.1.tgz#89183da1b4907ab089a6b02029cc5d8d6574270e"
+  integrity sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==
+  dependencies:
+    call-bound "^1.0.2"
+    function.prototype.name "^1.1.6"
+    has-tostringtag "^1.0.2"
+    is-async-function "^2.0.0"
+    is-date-object "^1.1.0"
+    is-finalizationregistry "^1.1.0"
+    is-generator-function "^1.0.10"
+    is-regex "^1.2.1"
+    is-weakref "^1.0.2"
+    isarray "^2.0.5"
+    which-boxed-primitive "^1.1.0"
+    which-collection "^1.0.2"
+    which-typed-array "^1.1.16"
+
+which-collection@^1.0.1, which-collection@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz"
   integrity sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==
@@ -21004,6 +21779,19 @@ which-typed-array@^1.1.13, which-typed-array@^1.1.14, which-typed-array@^1.1.15,
     gopd "^1.0.1"
     has-tostringtag "^1.0.2"
 
+which-typed-array@^1.1.16, which-typed-array@^1.1.19:
+  version "1.1.20"
+  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.20.tgz#3fdb7adfafe0ea69157b1509f3a1cd892bd1d122"
+  integrity sha512-LYfpUkmqwl0h9A2HL09Mms427Q1RZWuOHsukfVcKRq9q95iQxdw0ix1JQrqbcDR9PH1QDwf5Qo8OZb5lksZ8Xg==
+  dependencies:
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.8"
+    call-bound "^1.0.4"
+    for-each "^0.3.5"
+    get-proto "^1.0.1"
+    gopd "^1.2.0"
+    has-tostringtag "^1.0.2"
+
 which@^1.0.5, which@^1.2.12, which@^1.2.14, which@^1.2.4, which@^1.3.1:
   version "1.3.1"
   resolved "https://registry.npmjs.org/which/-/which-1.3.1.tgz"