@react-magma/charts 12.0.0-next.4 → 12.0.0-next.5

package/dist/components/CarbonChart/CarbonChart.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { ChartOptions } from '@carbon/charts-react';
 import { ThemeInterface } from 'react-magma-dom';
-import './styles.min.css';
 export declare enum CarbonChartType {
     area = "area",
     areaStacked = "areaStacked",

package/dist/components/CarbonChart/embeddedStyles.d.ts

@@ -0,0 +1 @@
+export declare const carbonChartStyles: import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "@react-magma/charts",
-  "version": "12.0.0-next.4",
+  "version": "12.0.0-next.5",
   "license": "MIT",
   "exports": {
-    ".": "./src",
-    "./src/components/CarbonChart/": "./styles.min.css"
+    ".": {
+      "import": "./dist/charts.modern.module.js",
+      "require": "./dist/charts.js",
+      "types": "./dist/index.d.ts"
+    }
   },
   "main": "dist/charts.js",
   "umd:main": "dist/charts.umd.js",
@@ -13,12 +16,11 @@
   "types": "dist/index.d.ts",
   "files": [
     "dist",
-    "src",
-    "src/components/CarbonChart/styles.min.css"
+    "src"
   ],
   "scripts": {
-    "build": "microbundle build --jsx jsx --jsxImportSource react --globals react/jsx-runtime=jsx",
-    "build-watch": "microbundle watch --jsx jsx --jsxImportSource react --globals react/jsx-runtime=jsx",
+    "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",
     "lint": "eslint ./src",
     "test": "jest",
     "test-watch": "jest --watch"
@@ -37,7 +39,7 @@
     "identity-obj-proxy": "^3.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-magma-dom": "^4.10.0-next.3",
+    "react-magma-dom": "^4.10.0-next.29",
     "react-magma-icons": "^3.2.0"
   },
   "peerDependencies": {

package/src/components/CarbonChart/CarbonChart.tsx

@@ -21,10 +21,12 @@ 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 './styles.min.css';
+
+import { carbonChartStyles } from './embeddedStyles';
 
 export enum CarbonChartType {
   area = 'area',
@@ -579,17 +581,20 @@ export const CarbonChart = React.forwardRef<HTMLDivElement, CarbonChartProps>(
     const groupsLength = Object.keys(buildColors()).length;
 
     return (
-      <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>
+      <>
+        <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>
+      </>
     );
   }
 );