@antv/gpt-vis 0.0.4 → 0.0.5

package/dist/cjs/ChartCodeRender/index.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './index.css';
 import { WithChartCodeOptions } from './type';
 export declare const withChartCode: (options: WithChartCodeOptions) => keyof JSX.IntrinsicElements | import("hast-util-to-jsx-runtime/lib/components").Component<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & import("hast-util-to-jsx-runtime/lib/components").ExtraProps> | undefined;
 /**

package/dist/cjs/ChartCodeRender/index.js

@@ -36,10 +36,28 @@ module.exports = __toCommonJS(ChartCodeRender_exports);
 var import_icons = require("@ant-design/icons");
 var import_lodash = require("lodash");
 var import_react = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
 var import_constants = require("../constants");
-var import_index = require("./index.css");
+var StyledGPTVis = import_styled_components.default.div`
+  min-width: 600px;
+  max-width: 100%;
+`;
+var StyledLoading = import_styled_components.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  width: 400px;
+  height: 400px;
+  background-image: linear-gradient(135deg, #e3f3ff 0%, #f1eeff 100%);
+  color: rgba(0, 0, 0, 88%);
+
+  &-icon {
+    margin-bottom: 6px;
+  }
+`;
 var Loading = () => {
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: "gpt-vis-loading" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "gpt-vis-loading-icon" }, /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement(StyledLoading, { className: "gpt-vis-loading" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "gpt-vis-loading-icon" }, /* @__PURE__ */ import_react.default.createElement(
     import_icons.LoadingOutlined,
     {
       style: { fontSize: "24px", color: "rgb(56, 177, 246)" }
@@ -89,7 +107,7 @@ var withCodeBlock = (options) => {
       if (!ChartComponent) {
         return /* @__PURE__ */ import_react.default.createElement("code", null, `Chart type "${type}" is not supported.`);
       }
-      return /* @__PURE__ */ import_react.default.createElement("div", { className: "gpt-vis" }, /* @__PURE__ */ import_react.default.createElement(ChartComponent, { ...chartJson }));
+      return /* @__PURE__ */ import_react.default.createElement(StyledGPTVis, { className: "gpt-vis" }, /* @__PURE__ */ import_react.default.createElement(ChartComponent, { ...chartJson }));
     }
     const languageName = ((_a = className.match(/language-(.*)/)) == null ? void 0 : _a[1]) || "";
     const extraLanguageRenderers = extraRenderers || languageRenderers;

package/dist/esm/ChartCodeRender/index.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './index.css';
 import { WithChartCodeOptions } from './type';
 export declare const withChartCode: (options: WithChartCodeOptions) => keyof JSX.IntrinsicElements | import("hast-util-to-jsx-runtime/lib/components").Component<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & import("hast-util-to-jsx-runtime/lib/components").ExtraProps> | undefined;
 /**

package/dist/esm/ChartCodeRender/index.js

@@ -7,10 +7,18 @@ var _excluded = ["children", "className", "node"];
 import { LoadingOutlined } from '@ant-design/icons';
 import { get } from 'lodash';
 import React, { useRef, useState } from 'react';
+import styled from 'styled-components';
 import { DEFAULT_CHART_COMPONENTS } from "../constants";
-import "./index.css";
+var StyledGPTVis = styled.div.withConfig({
+  displayName: "StyledGPTVis",
+  componentId: "gpt-vis-ed04__sc-1osp6pj-0"
+})(["min-width:600px;max-width:100%;"]);
+var StyledLoading = styled.div.withConfig({
+  displayName: "StyledLoading",
+  componentId: "gpt-vis-ed04__sc-1osp6pj-1"
+})(["display:flex;align-items:center;justify-content:center;flex-direction:column;width:400px;height:400px;background-image:linear-gradient(135deg,#e3f3ff 0%,#f1eeff 100%);color:rgba(0,0,0,88%);&-icon{margin-bottom:6px;}"]);
 var Loading = function Loading() {
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(StyledLoading, {
     className: "gpt-vis-loading"
   }, /*#__PURE__*/React.createElement("div", {
     className: "gpt-vis-loading-icon"
@@ -79,7 +87,7 @@ var withCodeBlock = function withCodeBlock(options) {
 
       // Render the supported chart component with data
 
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement(StyledGPTVis, {
         className: "gpt-vis"
       }, /*#__PURE__*/React.createElement(ChartComponent, chartJson));
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/gpt-vis",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "A chart library for LLM Agent",
   "repository": {
     "type": "git",

package/dist/cjs/ChartCodeRender/index.css

@@ -1,19 +0,0 @@
-.gpt-vis {
-  min-width: 600px;
-  max-width: 100%;
-}
-
-.gpt-vis-loading {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  width: 400px;
-  height: 400px;
-  background-image: linear-gradient(135deg, #e3f3ff 0%, #f1eeff 100%);
-  color: rgba(0, 0, 0, 88%);
-
-  &-icon {
-    margin-bottom: 6px;
-  }
-}

package/dist/esm/ChartCodeRender/index.css

@@ -1,19 +0,0 @@
-.gpt-vis {
-  min-width: 600px;
-  max-width: 100%;
-}
-
-.gpt-vis-loading {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  width: 400px;
-  height: 400px;
-  background-image: linear-gradient(135deg, #e3f3ff 0%, #f1eeff 100%);
-  color: rgba(0, 0, 0, 88%);
-
-  &-icon {
-    margin-bottom: 6px;
-  }
-}