diff --git a/packages/charts/src/components/BarChart/BarChart.cy.tsx b/packages/charts/src/components/BarChart/BarChart.cy.tsx
index b2dda1dd1f2..fb90d53974f 100644
--- a/packages/charts/src/components/BarChart/BarChart.cy.tsx
+++ b/packages/charts/src/components/BarChart/BarChart.cy.tsx
@@ -1,11 +1,11 @@
+import { complexDataSet } from '../../resources/DemoProps.js';
+import { BarChart } from './index.js';
 import {
   cypressPassThroughTestsFactory,
   testChartLegendConfig,
   testChartZoomingTool,
   testStackAggregateTotals,
-} from '../../../../../cypress/support/utils';
-import { complexDataSet } from '../../resources/DemoProps.js';
-import { BarChart } from './index.js';
+} from '@/cypress/support/utils';
 
 const dimensions = [
   {
diff --git a/packages/charts/src/components/BarChart/BarChart.mdx b/packages/charts/src/components/BarChart/BarChart.mdx
index 8626098d6a1..39f2bbf4aff 100644
--- a/packages/charts/src/components/BarChart/BarChart.mdx
+++ b/packages/charts/src/components/BarChart/BarChart.mdx
@@ -1,4 +1,4 @@
-import { ControlsWithNote, DocsHeader, Footer } from '../../../../../.storybook/components';
+import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 import TooltipStory from '../../resources/TooltipConfig.mdx';
 import LegendStory from '../../resources/LegendConfig.mdx';
diff --git a/packages/charts/src/components/BulletChart/BulletChart.cy.tsx b/packages/charts/src/components/BulletChart/BulletChart.cy.tsx
index deb0f9fbff4..addcbd59510 100644
--- a/packages/charts/src/components/BulletChart/BulletChart.cy.tsx
+++ b/packages/charts/src/components/BulletChart/BulletChart.cy.tsx
@@ -1,10 +1,6 @@
-import {
-  cypressPassThroughTestsFactory,
-  testChartLegendConfig,
-  testChartZoomingTool,
-} from '../../../../../cypress/support/utils';
 import { complexDataSet } from '../../resources/DemoProps.js';
 import { BulletChart } from './index.js';
+import { cypressPassThroughTestsFactory, testChartLegendConfig, testChartZoomingTool } from '@/cypress/support/utils';
 
 const dimensions = [
   {
diff --git a/packages/charts/src/components/BulletChart/BulletChart.mdx b/packages/charts/src/components/BulletChart/BulletChart.mdx
index 48e310b919e..a8e3a6967c3 100644
--- a/packages/charts/src/components/BulletChart/BulletChart.mdx
+++ b/packages/charts/src/components/BulletChart/BulletChart.mdx
@@ -1,4 +1,4 @@
-import { ControlsWithNote, DocsHeader, Footer } from '../../../../../.storybook/components';
+import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 import TooltipStory from '../../resources/TooltipConfig.mdx';
 import LegendStory from '../../resources/LegendConfig.mdx';
diff --git a/packages/charts/src/components/ColumnChart/ColumnChart.cy.tsx b/packages/charts/src/components/ColumnChart/ColumnChart.cy.tsx
index fe36c755dac..54ec1dcf6c3 100644
--- a/packages/charts/src/components/ColumnChart/ColumnChart.cy.tsx
+++ b/packages/charts/src/components/ColumnChart/ColumnChart.cy.tsx
@@ -1,11 +1,11 @@
+import { complexDataSet } from '../../resources/DemoProps.js';
+import { ColumnChart } from './index.js';
 import {
   cypressPassThroughTestsFactory,
   testChartLegendConfig,
   testChartZoomingTool,
   testStackAggregateTotals,
-} from '../../../../../cypress/support/utils';
-import { complexDataSet } from '../../resources/DemoProps.js';
-import { ColumnChart } from './index.js';
+} from '@/cypress/support/utils';
 
 const dimensions = [
   {
diff --git a/packages/charts/src/components/ColumnChart/ColumnChart.mdx b/packages/charts/src/components/ColumnChart/ColumnChart.mdx
index 1ca5455dbad..d4ea30cd4ad 100644
--- a/packages/charts/src/components/ColumnChart/ColumnChart.mdx
+++ b/packages/charts/src/components/ColumnChart/ColumnChart.mdx
@@ -1,4 +1,4 @@
-import { ControlsWithNote, DocsHeader, Footer } from '../../../../../.storybook/components';
+import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 import TooltipStory from '../../resources/TooltipConfig.mdx';
 import LegendStory from '../../resources/LegendConfig.mdx';
diff --git a/packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.cy.tsx b/packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.cy.tsx
index 5fe20f0edf6..fc63be0686d 100644
--- a/packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.cy.tsx
+++ b/packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.cy.tsx
@@ -1,10 +1,6 @@
-import {
-  cypressPassThroughTestsFactory,
-  testChartLegendConfig,
-  testChartZoomingTool,
-} from '../../../../../cypress/support/utils';
 import { complexDataSet } from '../../resources/DemoProps.js';
 import { ColumnChartWithTrend } from './index.js';
+import { cypressPassThroughTestsFactory, testChartLegendConfig, testChartZoomingTool } from '@/cypress/support/utils';
 
 const dimensions = [
   {
diff --git a/packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.mdx b/packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.mdx
index 1531dd2970e..0c083b00434 100644
--- a/packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.mdx
+++ b/packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.mdx
@@ -1,4 +1,4 @@
-import { ControlsWithNote, DocsHeader, Footer } from '../../../../../.storybook/components';
+import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 import * as ComponentStories from './ColumnChartWithTrend.stories';
 import LegendStory from '../../resources/LegendConfig.mdx';
diff --git a/packages/charts/src/components/ComposedChart/ComposedChart.cy.tsx b/packages/charts/src/components/ComposedChart/ComposedChart.cy.tsx
index 39382823eaf..a82eacb3460 100644
--- a/packages/charts/src/components/ComposedChart/ComposedChart.cy.tsx
+++ b/packages/charts/src/components/ComposedChart/ComposedChart.cy.tsx
@@ -1,11 +1,11 @@
+import { complexDataSet } from '../../resources/DemoProps.js';
+import { ComposedChart } from './index.js';
 import {
   cypressPassThroughTestsFactory,
   testChartLegendConfig,
   testChartZoomingTool,
   testStackAggregateTotals,
-} from '../../../../../cypress/support/utils';
-import { complexDataSet } from '../../resources/DemoProps.js';
-import { ComposedChart } from './index.js';
+} from '@/cypress/support/utils';
 
 const dimensions = [
   {
diff --git a/packages/charts/src/components/ComposedChart/ComposedChart.mdx b/packages/charts/src/components/ComposedChart/ComposedChart.mdx
index 248d6a508a7..d6bad2527ad 100644
--- a/packages/charts/src/components/ComposedChart/ComposedChart.mdx
+++ b/packages/charts/src/components/ComposedChart/ComposedChart.mdx
@@ -1,4 +1,4 @@
-import { ControlsWithNote, DocsHeader, Footer } from '../../../../../.storybook/components';
+import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 import TooltipStory from '../../resources/TooltipConfig.mdx';
 import LegendStory from '../../resources/LegendConfig.mdx';
diff --git a/packages/charts/src/components/DonutChart/DonutChart.cy.tsx b/packages/charts/src/components/DonutChart/DonutChart.cy.tsx
index a0a38de588d..c14f4afa303 100644
--- a/packages/charts/src/components/DonutChart/DonutChart.cy.tsx
+++ b/packages/charts/src/components/DonutChart/DonutChart.cy.tsx
@@ -1,6 +1,6 @@
-import { cypressPassThroughTestsFactory, testChartLegendConfig } from '../../../../../cypress/support/utils';
 import { complexDataSet, simpleDataSet } from '../../resources/DemoProps.js';
 import { DonutChart } from './index.js';
+import { cypressPassThroughTestsFactory, testChartLegendConfig } from '@/cypress/support/utils';
 
 const dimension = {
   accessor: 'name',
diff --git a/packages/charts/src/components/DonutChart/DonutChart.mdx b/packages/charts/src/components/DonutChart/DonutChart.mdx
index 03cf69c5763..186dbec2ed2 100644
--- a/packages/charts/src/components/DonutChart/DonutChart.mdx
+++ b/packages/charts/src/components/DonutChart/DonutChart.mdx
@@ -1,5 +1,5 @@
 import { Canvas, Meta } from '@storybook/addon-docs/blocks';
-import { ControlsWithNote, DocsHeader, Footer } from '../../../../../.storybook/components';
+import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import TooltipStory from '../../resources/TooltipConfig.mdx';
 import * as ComponentStories from './DonutChart.stories';
 import LegendStory from '../../resources/LegendConfig.mdx';
diff --git a/packages/charts/src/components/LineChart/LineChart.cy.tsx b/packages/charts/src/components/LineChart/LineChart.cy.tsx
index 56eacf5fdb4..0f7c078374d 100644
--- a/packages/charts/src/components/LineChart/LineChart.cy.tsx
+++ b/packages/charts/src/components/LineChart/LineChart.cy.tsx
@@ -1,10 +1,6 @@
-import {
-  cypressPassThroughTestsFactory,
-  testChartLegendConfig,
-  testChartZoomingTool,
-} from '../../../../../cypress/support/utils';
 import { complexDataSet } from '../../resources/DemoProps.js';
 import { LineChart } from './index.js';
+import { cypressPassThroughTestsFactory, testChartLegendConfig, testChartZoomingTool } from '@/cypress/support/utils';
 
 const dimensions = [
   {
diff --git a/packages/charts/src/components/LineChart/LineChart.mdx b/packages/charts/src/components/LineChart/LineChart.mdx
index ee10c67eb86..86852227b8b 100644
--- a/packages/charts/src/components/LineChart/LineChart.mdx
+++ b/packages/charts/src/components/LineChart/LineChart.mdx
@@ -1,5 +1,5 @@
 import { Canvas, Meta } from '@storybook/addon-docs/blocks';
-import { ControlsWithNote, DocsHeader, Footer } from '../../../../../.storybook/components';
+import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import TooltipStory from '../../resources/TooltipConfig.mdx';
 import * as ComponentStories from './LineChart.stories';
 import LegendStory from '../../resources/LegendConfig.mdx';
diff --git a/packages/charts/src/components/PieChart/PieChart.cy.tsx b/packages/charts/src/components/PieChart/PieChart.cy.tsx
index acdcdbc7b00..8dd5d4223a2 100644
--- a/packages/charts/src/components/PieChart/PieChart.cy.tsx
+++ b/packages/charts/src/components/PieChart/PieChart.cy.tsx
@@ -1,7 +1,7 @@
 import { Text as RechartsText } from 'recharts';
-import { cypressPassThroughTestsFactory, testChartLegendConfig } from '../../../../../cypress/support/utils';
 import { complexDataSet, simpleDataSet } from '../../resources/DemoProps.js';
 import { PieChart } from './index.js';
+import { cypressPassThroughTestsFactory, testChartLegendConfig } from '@/cypress/support/utils';
 
 const dimension = {
   accessor: 'name',
diff --git a/packages/charts/src/components/PieChart/PieChart.mdx b/packages/charts/src/components/PieChart/PieChart.mdx
index f84647a7072..1b7dbcff3c8 100644
--- a/packages/charts/src/components/PieChart/PieChart.mdx
+++ b/packages/charts/src/components/PieChart/PieChart.mdx
@@ -1,4 +1,4 @@
-import { ControlsWithNote, DocsHeader, Footer } from '../../../../../.storybook/components';
+import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 import TooltipStory from '../../resources/TooltipConfig.mdx';
 import * as ComponentStories from './PieChart.stories';
diff --git a/packages/charts/src/components/RadarChart/RadarChart.cy.tsx b/packages/charts/src/components/RadarChart/RadarChart.cy.tsx
index 44503e7479b..841278dae49 100644
--- a/packages/charts/src/components/RadarChart/RadarChart.cy.tsx
+++ b/packages/charts/src/components/RadarChart/RadarChart.cy.tsx
@@ -1,6 +1,6 @@
-import { cypressPassThroughTestsFactory, testChartLegendConfig } from '../../../../../cypress/support/utils';
 import { complexDataSet } from '../../resources/DemoProps.js';
 import { RadarChart } from './index.js';
+import { cypressPassThroughTestsFactory, testChartLegendConfig } from '@/cypress/support/utils';
 
 const dimensions = [
   {
diff --git a/packages/charts/src/components/RadarChart/RadarChart.mdx b/packages/charts/src/components/RadarChart/RadarChart.mdx
index f55672d8a49..830c50db85c 100644
--- a/packages/charts/src/components/RadarChart/RadarChart.mdx
+++ b/packages/charts/src/components/RadarChart/RadarChart.mdx
@@ -1,4 +1,4 @@
-import { ControlsWithNote, DocsHeader, Footer } from '../../../../../.storybook/components';
+import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 import TooltipStory from '../../resources/TooltipConfig.mdx';
 import * as ComponentStories from './RadarChart.stories';
diff --git a/packages/charts/src/components/RadialChart/RadialChart.cy.tsx b/packages/charts/src/components/RadialChart/RadialChart.cy.tsx
index 1ab7a012b25..db256c52b1a 100644
--- a/packages/charts/src/components/RadialChart/RadialChart.cy.tsx
+++ b/packages/charts/src/components/RadialChart/RadialChart.cy.tsx
@@ -1,5 +1,5 @@
-import { cypressPassThroughTestsFactory } from '../../../../../cypress/support/utils';
 import { RadialChart } from './index.js';
+import { cypressPassThroughTestsFactory } from '@/cypress/support/utils';
 
 describe('RadialChart', () => {
   it('Basic', () => {
diff --git a/packages/charts/src/components/RadialChart/RadialChart.mdx b/packages/charts/src/components/RadialChart/RadialChart.mdx
index 85dea7f64f3..48d2caa581c 100644
--- a/packages/charts/src/components/RadialChart/RadialChart.mdx
+++ b/packages/charts/src/components/RadialChart/RadialChart.mdx
@@ -1,4 +1,4 @@
-import { ControlsWithNote, DocsHeader, Footer } from '../../../../../.storybook/components';
+import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 import * as ComponentStories from './RadialChart.stories';
 
diff --git a/packages/charts/src/components/ScatterChart/ScatterChart.cy.tsx b/packages/charts/src/components/ScatterChart/ScatterChart.cy.tsx
index 3ab7d6d20e7..e2793419442 100644
--- a/packages/charts/src/components/ScatterChart/ScatterChart.cy.tsx
+++ b/packages/charts/src/components/ScatterChart/ScatterChart.cy.tsx
@@ -1,6 +1,6 @@
-import { cypressPassThroughTestsFactory, testChartLegendConfig } from '../../../../../cypress/support/utils';
 import { complexDataSet, scatterComplexDataSet } from '../../resources/DemoProps.js';
 import { ScatterChart } from './index.js';
+import { cypressPassThroughTestsFactory, testChartLegendConfig } from '@/cypress/support/utils';
 
 const measures = [
   {
diff --git a/packages/charts/src/components/ScatterChart/ScatterChart.mdx b/packages/charts/src/components/ScatterChart/ScatterChart.mdx
index 4020111baed..626c9ca463c 100644
--- a/packages/charts/src/components/ScatterChart/ScatterChart.mdx
+++ b/packages/charts/src/components/ScatterChart/ScatterChart.mdx
@@ -1,4 +1,4 @@
-import { ControlsWithNote, DocsHeader, Footer } from '../../../../../.storybook/components';
+import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 import TooltipStory from '../../resources/TooltipConfig.mdx';
 import * as ComponentStories from './ScatterChart.stories';
diff --git a/packages/charts/src/components/TimelineChart/TimeLineChart.mdx b/packages/charts/src/components/TimelineChart/TimeLineChart.mdx
index ddfbfcbae2b..ea93aa605a4 100644
--- a/packages/charts/src/components/TimelineChart/TimeLineChart.mdx
+++ b/packages/charts/src/components/TimelineChart/TimeLineChart.mdx
@@ -1,6 +1,5 @@
-import { ControlsWithNote, DocsHeader, Footer } from '../../../../../.storybook/components';
-import { Canvas, Meta, Markdown, ArgTypes } from '@storybook/addon-docs/blocks';
-import SubcomponentsSection from '../../../../../.storybook/docs/SubcomponentsSection.md?raw';
+import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
 import * as ComponentStories from './TimeLineChart.stories';
 import { TimelineChartAnnotation } from './TimelineChartAnnotation';
 
@@ -133,8 +132,6 @@ A lot more things can be customized in the `TimelineChart`. These include:
 
 <Canvas of={ComponentStories.LoadingPlaceholder} />
 
-<Markdown>{SubcomponentsSection}</Markdown>
-
 ## TimelineChartAnnotation
 
 The `TimelineChartAnnotation` is designed to be used for creating custom annotations, markers