diff --git a/projects/js-packages/charts/composer.json b/projects/js-packages/charts/composer.json
index f2d38414dc78c..41bb0f0dadc60 100644
--- a/projects/js-packages/charts/composer.json
+++ b/projects/js-packages/charts/composer.json
@@ -13,6 +13,12 @@
 		]
 	},
 	"scripts": {
+		"build-development": [
+			"pnpm run build"
+		],
+		"build-production": [
+			"NODE_ENV=production pnpm run build"
+		],
 		"test-coverage": [
 			"pnpm run test-coverage"
 		],
diff --git a/projects/js-packages/charts/index.ts b/projects/js-packages/charts/index.ts
new file mode 100644
index 0000000000000..c5666e2773e38
--- /dev/null
+++ b/projects/js-packages/charts/index.ts
@@ -0,0 +1,19 @@
+// Charts
+export { BarChart } from './src/components/bar-chart';
+export { LineChart } from './src/components/line-chart';
+export { PieChart } from './src/components/pie-chart';
+export { PieSemiCircleChart } from './src/components/pie-semi-circle-chart';
+
+// Chart components
+export { BaseTooltip } from './src/components/tooltip';
+export { Legend } from './src/components/legend';
+
+// Providers
+export { ThemeProvider } from './src/providers/theme';
+
+// Hooks
+export { default as useChartMouseHandler } from './src/hooks/use-chart-mouse-handler';
+
+// Types
+export type * from './src/components/shared/types';
+export type { BaseTooltipProps } from './src/components/tooltip';
diff --git a/projects/js-packages/charts/package.json b/projects/js-packages/charts/package.json
index c9acca5d411b5..f6a044d43f10d 100644
--- a/projects/js-packages/charts/package.json
+++ b/projects/js-packages/charts/package.json
@@ -17,7 +17,10 @@
 		"clean": "rm -rf node_modules",
 		"test": "jest --config=tests/jest.config.cjs",
 		"test-coverage": "pnpm run test --coverage",
-		"storybook": "cd ../storybook && pnpm run storybook:dev"
+		"storybook": "cd ../storybook && pnpm run storybook:dev",
+		"compile-ts": "tsc --pretty",
+		"build": "pnpm run clean-build && pnpm run compile-ts",
+		"clean-build": "rm -rf build/"
 	},
 	"dependencies": {
 		"@react-spring/web": "9.7.3",
diff --git a/projects/js-packages/charts/src/components/bar-chart/index.tsx b/projects/js-packages/charts/src/components/bar-chart/index.tsx
index df4a1f97ba3ad..35afda744bf9e 100644
--- a/projects/js-packages/charts/src/components/bar-chart/index.tsx
+++ b/projects/js-packages/charts/src/components/bar-chart/index.tsx
@@ -1 +1 @@
-export { default } from './bar-chart';
+export { default as BarChart } from './bar-chart';
diff --git a/projects/js-packages/charts/src/components/bar-chart/stories/index.stories.tsx b/projects/js-packages/charts/src/components/bar-chart/stories/index.stories.tsx
index 0ca8d40d60462..33dd147e604b4 100644
--- a/projects/js-packages/charts/src/components/bar-chart/stories/index.stories.tsx
+++ b/projects/js-packages/charts/src/components/bar-chart/stories/index.stories.tsx
@@ -1,4 +1,4 @@
-import BarChart from '../index';
+import { BarChart } from '../index';
 import data from './sample-data';
 import type { Meta, StoryObj } from '@storybook/react';
 
diff --git a/projects/js-packages/charts/src/index.ts b/projects/js-packages/charts/src/index.ts
index b52a51461252c..cd8a712946e4b 100644
--- a/projects/js-packages/charts/src/index.ts
+++ b/projects/js-packages/charts/src/index.ts
@@ -1,16 +1,18 @@
 // Charts
-export { default as BarChart } from './components/bar-chart';
+export { BarChart } from './components/bar-chart';
 export { LineChart } from './components/line-chart';
 export { PieChart } from './components/pie-chart';
 export { PieSemiCircleChart } from './components/pie-semi-circle-chart';
 
 // Chart components
 export { BaseTooltip } from './components/tooltip';
+export { Legend } from './components/legend';
 
 // Providers
 export { ThemeProvider } from './providers/theme';
 
 // Hooks
+export { default as useChartMouseHandler } from './hooks/use-chart-mouse-handler';
 
 // Types
 export type * from './components/shared/types';
diff --git a/projects/js-packages/charts/src/providers/theme/stories/index.stories.tsx b/projects/js-packages/charts/src/providers/theme/stories/index.stories.tsx
index 31a1aa1c320b1..cd14af571d52f 100644
--- a/projects/js-packages/charts/src/providers/theme/stories/index.stories.tsx
+++ b/projects/js-packages/charts/src/providers/theme/stories/index.stories.tsx
@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { ThemeProvider, jetpackTheme, wooTheme } from '../.';
-import { LineChart, BarChart, PieSemiCircleChart } from '../../..';
+import { LineChart, BarChart, PieSemiCircleChart } from '../../../.';
 import barSampleData from '../../../components/bar-chart/stories/sample-data';
 
 const meta: Meta< typeof LineChart > = {
diff --git a/projects/js-packages/charts/tsconfig.json b/projects/js-packages/charts/tsconfig.json
index 0e1116eec9836..6fa28c02613bd 100644
--- a/projects/js-packages/charts/tsconfig.json
+++ b/projects/js-packages/charts/tsconfig.json
@@ -5,5 +5,5 @@
 		"outDir": "./build/"
 	},
 	// List all sources and source-containing subdirs.
-	"include": [ "./src" ]
+	"include": [ "./index.ts", "./src" ]
 }