diff --git a/.gitignore b/.gitignore
index 3b24352..f38ef36 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,5 +10,4 @@ node_modules/
 .eslintcache
 .node_repl_history
 .yarn-integrity
-declarations
-dist
\ No newline at end of file
+declarations
\ No newline at end of file
diff --git a/dist/cjs/index.js b/dist/cjs/index.js
new file mode 100644
index 0000000..09ac4f9
--- /dev/null
+++ b/dist/cjs/index.js
@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var core = require('@mantine/core');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function TestComponent({ color, children }) {
+    const theme = core.useMantineTheme();
+    return (React__default["default"].createElement("div", { style: {
+            backgroundColor: theme.colorScheme === 'dark' ? theme.white : theme.black,
+            color: theme.colors[color][6],
+        } }, children));
+}
+
+exports.TestComponent = TestComponent;
diff --git a/dist/esm/index.js b/dist/esm/index.js
new file mode 100644
index 0000000..10722eb
--- /dev/null
+++ b/dist/esm/index.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import { useMantineTheme } from '@mantine/core';
+
+function TestComponent({ color, children }) {
+    const theme = useMantineTheme();
+    return (React.createElement("div", { style: {
+            backgroundColor: theme.colorScheme === 'dark' ? theme.white : theme.black,
+            color: theme.colors[color][6],
+        } }, children));
+}
+
+export { TestComponent };
diff --git a/package.json b/package.json
index ea5bb66..2877428 100644
--- a/package.json
+++ b/package.json
@@ -111,6 +111,6 @@
     "registry": "https://npm.pkg.github.com/@cohstats"
   },
   "pre-commit": [
-    "build" 
+    "build"
   ]
 }