@react-magma/charts 12.0.1-next.0 → 12.0.1-next.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-magma/charts",
-  "version": "12.0.1-next.0",
+  "version": "12.0.1-next.1",
   "license": "MIT",
   "exports": {
     ".": {
@@ -19,8 +19,8 @@
     "src"
   ],
   "scripts": {
-    "build": "microbundle build --jsx jsx --jsxImportSource react --globals react/jsx-runtime=jsx,@emotion/react=EmotionReact,@emotion/styled=EmotionStyled,@carbon/charts-react=CarbonChartsReact",
-    "build-watch": "microbundle watch --jsx jsx --jsxImportSource react --globals react/jsx-runtime=jsx,@emotion/react=EmotionReact,@emotion/styled=EmotionStyled,@carbon/charts-react=CarbonChartsReact",
+    "build": "rollup -c rollup.config.js --bundleConfigAsCjs",
+    "build-watch": "rollup -c rollup.config.js --watch --bundleConfigAsCjs",
     "lint": "eslint ./src",
     "test": "jest",
     "test-watch": "jest --watch"
@@ -35,12 +35,17 @@
   "devDependencies": {
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
+    "@rollup/plugin-commonjs": "^28.0.8",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-typescript": "^12.1.4",
     "dom-to-image-more": "3.1.4",
     "identity-obj-proxy": "^3.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-magma-dom": "^4.10.1-next.0",
-    "react-magma-icons": "^3.2.0"
+    "react-magma-icons": "^3.2.0",
+    "rollup": "^4.52.4",
+    "rollup-plugin-postcss": "^4.0.2"
   },
   "peerDependencies": {
     "@emotion/react": "^11.13.0",

package/src/components/CarbonChart/CarbonChart.tsx

@@ -21,12 +21,11 @@ import {
   ComboChart,
   ChartOptions,
 } from '@carbon/charts-react';
-import { Global } from '@emotion/react';
 import styled from '@emotion/styled';
 import { transparentize } from 'polished';
 import { ThemeInterface, ThemeContext, useIsInverse } from 'react-magma-dom';
 
-import { carbonChartStyles } from './embeddedStyles';
+import './carbon-charts.css';
 
 export enum CarbonChartType {
   area = 'area',
@@ -615,20 +614,17 @@ export const CarbonChart = React.forwardRef<HTMLDivElement, CarbonChartProps>(
     const groupsLength = Object.keys(buildColors()).length;
 
     return (
-      <>
-        <Global styles={carbonChartStyles} />
-        <CarbonChartWrapper
-          data-testid={testId}
-          ref={ref}
-          isInverse={isInverse}
-          theme={theme}
-          className="carbon-chart-wrapper"
-          groupsLength={groupsLength < 6 ? groupsLength : 14}
-          {...rest}
-        >
-          <ChartType data={dataSet} options={newOptions} />
-        </CarbonChartWrapper>
-      </>
+      <CarbonChartWrapper
+        data-testid={testId}
+        ref={ref}
+        isInverse={isInverse}
+        theme={theme}
+        className="carbon-chart-wrapper"
+        groupsLength={groupsLength < 6 ? groupsLength : 14}
+        {...rest}
+      >
+        <ChartType data={dataSet} options={newOptions} />
+      </CarbonChartWrapper>
     );
   }
 );