@flowgram.ai/form-materials 0.5.4 → 0.5.6

package/dist/cjs/components/batch-outputs/index.js

@@ -33,15 +33,17 @@ const semi_ui_namespaceObject = require("@douyinfe/semi-ui");
 const semi_icons_namespaceObject = require("@douyinfe/semi-icons");
 const index_js_namespaceObject = require("../../hooks/index.js");
 const external_variable_selector_index_js_namespaceObject = require("../variable-selector/index.js");
-const external_styles_js_namespaceObject = require("./styles.js");
+require("./styles.css");
 function BatchOutputs(props) {
     const { readonly, style } = props;
     const { list, add, updateKey, updateValue, remove } = (0, index_js_namespaceObject.useObjectList)(props);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
         children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UIRows, {
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "gedit-m-batch-outputs-rows",
                 style: style,
-                children: list.map((item)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_styles_js_namespaceObject.UIRow, {
+                children: list.map((item)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        className: "gedit-m-batch-outputs-row",
                         children: [
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.Input, {
                                 style: {

package/dist/cjs/components/batch-outputs/styles.css

@@ -0,0 +1,13 @@
+.gedit-m-batch-outputs-rows {
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 10px;
+  display: flex;
+}
+
+.gedit-m-batch-outputs-row {
+  align-items: center;
+  gap: 5px;
+  display: flex;
+}
+

package/dist/cjs/components/code-editor/editor.js

@@ -37,13 +37,12 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_react_namespaceObject = require("react");
-const external_styled_components_namespaceObject = require("styled-components");
-var external_styled_components_default = /*#__PURE__*/ __webpack_require__.n(external_styled_components_namespaceObject);
 const react_namespaceObject = require("@flowgram.ai/coze-editor/react");
 const preset_code_namespaceObject = require("@flowgram.ai/coze-editor/preset-code");
 var preset_code_default = /*#__PURE__*/ __webpack_require__.n(preset_code_namespaceObject);
 const view_namespaceObject = require("@codemirror/view");
 const external_utils_js_namespaceObject = require("./utils.js");
+require("./styles.css");
 const OriginCodeEditor = (0, react_namespaceObject.createRenderer)(preset_code_default(), [
     view_namespaceObject.EditorView.theme({
         '&.cm-focused': {
@@ -51,23 +50,28 @@ const OriginCodeEditor = (0, react_namespaceObject.createRenderer)(preset_code_d
         }
     })
 ]);
-const UIContainer = external_styled_components_default().div`
-  ${({ $mini })=>$mini && (0, external_styled_components_namespaceObject.css)`
-      height: 24px;
-    `}
-`;
 function BaseCodeEditor({ value, onChange, languageId = 'python', theme = 'light', children, placeholder, activeLinePlaceholder, options, readonly, mini }) {
     const editorRef = (0, external_react_namespaceObject.useRef)(null);
+    const editorValue = String(value || '');
     (0, external_react_namespaceObject.useEffect)(()=>{
-        if (editorRef.current?.getValue() !== value) editorRef.current?.setValue(String(value || ''));
+        if (editorRef.current?.getValue() !== editorValue) {
+            const editorView = editorRef.current?.$view;
+            editorView?.dispatch({
+                changes: {
+                    from: 0,
+                    to: editorView?.state.doc.length,
+                    insert: editorValue
+                }
+            });
+        }
     }, [
-        value
+        editorValue
     ]);
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(UIContainer, {
-        $mini: mini,
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: `gedit-m-code-editor-container ${mini ? 'mini' : ''}`,
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.EditorProvider, {
             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(OriginCodeEditor, {
-                defaultValue: String(value || ''),
+                defaultValue: editorValue,
                 options: {
                     uri: `file:///untitled${(0, external_utils_js_namespaceObject.getSuffixByLanguageId)(languageId)}`,
                     languageId,

package/dist/cjs/components/code-editor/styles.css

@@ -0,0 +1,4 @@
+.gedit-m-code-editor-container.mini {
+  height: 24px;
+}
+

package/dist/cjs/components/code-editor-mini/index.js

@@ -1,14 +1,5 @@
 "use strict";
 var __webpack_require__ = {};
-(()=>{
-    __webpack_require__.n = (module)=>{
-        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
-        __webpack_require__.d(getter, {
-            a: getter
-        });
-        return getter;
-    };
-})();
 (()=>{
     __webpack_require__.d = (exports1, definition)=>{
         for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
@@ -37,15 +28,10 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 require("react");
-const external_styled_components_namespaceObject = require("styled-components");
-var external_styled_components_default = /*#__PURE__*/ __webpack_require__.n(external_styled_components_namespaceObject);
 const index_js_namespaceObject = require("../code-editor/index.js");
-const UIMini = external_styled_components_default().div`
-  .ͼ1 .cm-content {
-  }
-`;
 function CodeEditorMini(props) {
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(UIMini, {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: "gedit-m-code-editor-mini",
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_js_namespaceObject.CodeEditor, {
             ...props,
             options: {

package/dist/cjs/components/condition-row/index.js

@@ -35,12 +35,8 @@ const semi_icons_namespaceObject = require("@douyinfe/semi-icons");
 const index_js_namespaceObject = require("../variable-selector/index.js");
 const external_dynamic_value_input_index_js_namespaceObject = require("../dynamic-value-input/index.js");
 const external_condition_context_index_js_namespaceObject = require("../condition-context/index.js");
-const external_styles_js_namespaceObject = require("./styles.js");
-const defaultRuleConfig = {
-    ops: {},
-    rules: {}
-};
-function ConditionRow({ style, value, onChange, readonly, ruleConfig = defaultRuleConfig }) {
+require("./styles.css");
+function ConditionRow({ style, value, onChange, readonly, ruleConfig }) {
     const { left, operator, right } = value || {};
     const available = (0, editor_namespaceObject.useScopeAvailable)();
     const variable = (0, external_react_namespaceObject.useMemo)(()=>{
@@ -60,7 +56,8 @@ function ConditionRow({ style, value, onChange, readonly, ruleConfig = defaultRu
     ]);
     const { rule, opConfig, opOptionList, targetSchema } = (0, external_condition_context_index_js_namespaceObject.useCondition)({
         leftSchema,
-        operator
+        operator,
+        ruleConfig
     });
     const renderOpSelect = ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.Select, {
             style: {
@@ -84,15 +81,19 @@ function ConditionRow({ style, value, onChange, readonly, ruleConfig = defaultRu
                     })
                 })
         });
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_styles_js_namespaceObject.UIContainer, {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: "gedit-m-condition-row-container",
         style: style,
         children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UIOperator, {
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "gedit-m-condition-row-operator",
                 children: renderOpSelect()
             }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_styles_js_namespaceObject.UIValues, {
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "gedit-m-condition-row-values",
                 children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UILeft, {
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        className: "gedit-m-condition-row-left",
                         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_js_namespaceObject.InjectVariableSelector, {
                             readonly: readonly,
                             style: {
@@ -108,7 +109,8 @@ function ConditionRow({ style, value, onChange, readonly, ruleConfig = defaultRu
                                 })
                         })
                     }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UIRight, {
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        className: "gedit-m-condition-row-right",
                         children: targetSchema ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_dynamic_value_input_index_js_namespaceObject.InjectDynamicValueInput, {
                             readonly: readonly || !rule,
                             value: right,

package/dist/cjs/components/condition-row/styles.css

@@ -0,0 +1,19 @@
+.gedit-m-condition-row-container {
+  align-items: center;
+  gap: 4px;
+  display: flex;
+}
+
+.gedit-m-condition-row-left, .gedit-m-condition-row-right {
+  width: 100%;
+}
+
+.gedit-m-condition-row-values {
+  flex-direction: column;
+  flex-grow: 1;
+  align-items: center;
+  gap: 4px;
+  display: flex;
+  overflow: hidden;
+}
+

package/dist/cjs/components/coze-editor-extensions/extensions/variable-tag.js

@@ -35,7 +35,7 @@ const semi_ui_namespaceObject = require("@douyinfe/semi-ui");
 const semi_icons_namespaceObject = require("@douyinfe/semi-icons");
 const view_namespaceObject = require("@codemirror/view");
 const index_js_namespaceObject = require("../../../shared/index.js");
-const external_styles_js_namespaceObject = require("../styles.js");
+require("../styles.css");
 class VariableTagWidget extends view_namespaceObject.WidgetType {
     constructor({ keyPath, scope }){
         super(), this.toDispose = new editor_namespaceObject.DisposableCollection(), this.renderIcon = (icon)=>{
@@ -53,32 +53,50 @@ class VariableTagWidget extends view_namespaceObject.WidgetType {
         this.scope = scope;
     }
     renderVariable(v) {
-        if (!v) return void this.root.render(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UITag, {
-            prefixIcon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_icons_namespaceObject.IconIssueStroked, {}),
+        if (!v) return void this.root.render(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(semi_ui_namespaceObject.Tag, {
+            className: "gedit-m-coze-editor-tag",
             color: "amber",
-            children: "Unknown"
+            children: [
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_icons_namespaceObject.IconIssueStroked, {
+                    style: {
+                        marginRight: '4px'
+                    }
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                    children: "Unknown"
+                })
+            ]
         }));
         const rootField = (0, external_lodash_es_namespaceObject.last)(v.parentFields) || v;
         const isRoot = v === rootField;
-        const rootTitle = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UIRootTitle, {
+        const rootTitle = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+            className: "gedit-m-coze-editor-root-title",
             children: rootField.meta?.title ? `${rootField.meta.title} ${isRoot ? '' : '-'} ` : ''
         });
         const rootIcon = this.renderIcon(rootField?.meta.icon);
         this.root.render(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.Popover, {
-            content: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_styles_js_namespaceObject.UIPopoverContent, {
+            content: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "gedit-m-coze-editor-popover-content",
                 children: [
                     rootIcon,
                     rootTitle,
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UIVarName, {
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                        className: "gedit-m-coze-editor-var-name",
                         children: v?.keyPath.slice(1).join('.')
                     })
                 ]
             }),
-            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_styles_js_namespaceObject.UITag, {
-                prefixIcon: rootIcon,
+            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(semi_ui_namespaceObject.Tag, {
+                className: "gedit-m-coze-editor-tag",
+                style: {
+                    display: 'inline-flex',
+                    alignItems: 'center'
+                },
                 children: [
+                    rootIcon,
                     rootTitle,
-                    !isRoot && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UIVarName, {
+                    !isRoot && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                        className: "gedit-m-coze-editor-var-name",
                         children: v?.key
                     })
                 ]

package/dist/{esm/components/coze-editor-extensions/styles.mjs → cjs/components/coze-editor-extensions/styles.css}

@@ -1,23 +1,23 @@
-import styled_components from "styled-components";
-import { Tag } from "@douyinfe/semi-ui";
-const UIRootTitle = styled_components.div`
-  margin-right: 4px;
-  min-width: 20px;
-  overflow: hidden;
+.gedit-m-coze-editor-root-title {
   text-overflow: ellipsis;
   white-space: nowrap;
+  min-width: 20px;
   color: var(--semi-color-text-2);
-`;
-const UIVarName = styled_components.div`
+  margin-right: 4px;
   overflow: hidden;
+}
+
+.gedit-m-coze-editor-var-name {
   text-overflow: ellipsis;
   white-space: nowrap;
-`;
-const UITag = styled_components(Tag)`
-  display: inline-flex;
-  align-items: center;
+  overflow: hidden;
+}
+
+.gedit-m-coze-editor-tag {
   justify-content: flex-start;
+  align-items: center;
   max-width: 300px;
+  display: inline-flex;
 
   & .semi-tag-content-center {
     justify-content: flex-start;
@@ -26,11 +26,12 @@ const UITag = styled_components(Tag)`
   &.semi-tag {
     margin: 0 5px;
   }
-`;
-const UIPopoverContent = styled_components.div`
+}
+
+.gedit-m-coze-editor-popover-content {
+  justify-content: flex-start;
+  align-items: center;
   padding: 10px;
   display: inline-flex;
-  align-items: center;
-  justify-content: flex-start;
-`;
-export { UIPopoverContent, UIRootTitle, UITag, UIVarName };
+}
+

package/dist/cjs/components/db-condition-row/index.js

@@ -34,12 +34,8 @@ const semi_icons_namespaceObject = require("@douyinfe/semi-icons");
 const index_js_namespaceObject = require("../../plugins/index.js");
 const external_dynamic_value_input_index_js_namespaceObject = require("../dynamic-value-input/index.js");
 const external_condition_context_index_js_namespaceObject = require("../condition-context/index.js");
-const external_styles_js_namespaceObject = require("./styles.js");
-const defaultRuleConfig = {
-    ops: {},
-    rules: {}
-};
-function DBConditionRow({ style, value, onChange, readonly, options, ruleConfig = defaultRuleConfig }) {
+require("./styles.css");
+function DBConditionRow({ style, value, onChange, readonly, options, ruleConfig }) {
     const { left, operator, right } = value || {};
     const typeManager = (0, index_js_namespaceObject.useTypeManager)();
     const leftSchema = (0, external_react_namespaceObject.useMemo)(()=>options?.find((item)=>item.value === left)?.schema, [
@@ -51,7 +47,8 @@ function DBConditionRow({ style, value, onChange, readonly, options, ruleConfig
         operator,
         ruleConfig
     });
-    const renderDBOptionSelect = ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UISelect, {
+    const renderDBOptionSelect = ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.Select, {
+            className: "gedit-m-db-condition-row-select",
             disabled: readonly,
             size: "small",
             style: {
@@ -63,7 +60,8 @@ function DBConditionRow({ style, value, onChange, readonly, options, ruleConfig
                     left: v
                 }),
             optionList: options?.map((item)=>({
-                    label: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_styles_js_namespaceObject.UIOptionLabel, {
+                    label: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        className: "gedit-m-db-condition-row-option-label",
                         children: [
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.Icon, {
                                 size: "small",
@@ -97,18 +95,23 @@ function DBConditionRow({ style, value, onChange, readonly, options, ruleConfig
                     })
                 })
         });
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_styles_js_namespaceObject.UIContainer, {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: "gedit-m-db-condition-row-container",
         style: style,
         children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UIOperator, {
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "gedit-m-db-condition-row-operator",
                 children: renderOpSelect()
             }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_styles_js_namespaceObject.UIValues, {
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "gedit-m-db-condition-row-values",
                 children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UILeft, {
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        className: "gedit-m-db-condition-row-left",
                         children: renderDBOptionSelect()
                     }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UIRight, {
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        className: "gedit-m-db-condition-row-right",
                         children: targetSchema ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_dynamic_value_input_index_js_namespaceObject.InjectDynamicValueInput, {
                             readonly: readonly || !rule,
                             value: right,

package/dist/cjs/components/db-condition-row/styles.css

@@ -0,0 +1,30 @@
+.gedit-m-db-condition-row-container {
+  align-items: center;
+  gap: 4px;
+  display: flex;
+}
+
+.gedit-m-db-condition-row-left, .gedit-m-db-condition-row-right {
+  width: 100%;
+}
+
+.gedit-m-db-condition-row-values {
+  flex-direction: column;
+  flex-grow: 1;
+  align-items: center;
+  gap: 4px;
+  display: flex;
+}
+
+.gedit-m-db-condition-row-option-label {
+  align-items: center;
+  gap: 10px;
+  display: flex;
+}
+
+.gedit-m-db-condition-row-select {
+  & .semi-select-selection {
+    margin-left: 5px;
+  }
+}
+

package/dist/cjs/components/display-inputs-values/index.js

@@ -33,11 +33,12 @@ const external_lodash_es_namespaceObject = require("lodash-es");
 const editor_namespaceObject = require("@flowgram.ai/editor");
 const index_js_namespaceObject = require("../../shared/index.js");
 const external_display_flow_value_index_js_namespaceObject = require("../display-flow-value/index.js");
-const external_styles_js_namespaceObject = require("./styles.js");
+require("./styles.css");
 const external_display_schema_tag_index_js_namespaceObject = require("../display-schema-tag/index.js");
 function DisplayInputsValues({ value, showIconInTree }) {
     const childEntries = Object.entries(value || {});
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.DisplayInputsWrapper, {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: "gedit-m-display-inputs-wrapper",
         children: childEntries.map(([key, value])=>{
             if (index_js_namespaceObject.FlowValueUtils.isFlowValue(value)) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_display_flow_value_index_js_namespaceObject.DisplayFlowValue, {
                 title: key,

package/dist/cjs/components/display-inputs-values/styles.css

@@ -0,0 +1,6 @@
+.gedit-m-display-inputs-wrapper {
+  flex-wrap: wrap;
+  gap: 5px;
+  display: flex;
+}
+

package/dist/cjs/components/display-outputs/index.js

@@ -31,7 +31,7 @@ const external_react_namespaceObject = require("react");
 const json_schema_namespaceObject = require("@flowgram.ai/json-schema");
 const editor_namespaceObject = require("@flowgram.ai/editor");
 const index_js_namespaceObject = require("../display-schema-tag/index.js");
-const external_styles_js_namespaceObject = require("./styles.js");
+require("./styles.css");
 function DisplayOutputs({ value, showIconInTree, displayFromScope }) {
     const scope = (0, editor_namespaceObject.useCurrentScope)();
     const refresh = (0, editor_namespaceObject.useRefresh)();
@@ -54,7 +54,8 @@ function DisplayOutputs({ value, showIconInTree, displayFromScope }) {
         return acm;
     }, {}) : value?.properties || {};
     const childEntries = Object.entries(properties || {});
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.DisplayOutputsWrapper, {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: "gedit-m-display-outputs-wrapper",
         children: childEntries.map(([key, schema])=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_js_namespaceObject.DisplaySchemaTag, {
                 title: key,
                 value: schema,

package/dist/cjs/components/display-outputs/styles.css

@@ -0,0 +1,6 @@
+.gedit-m-display-outputs-wrapper {
+  flex-wrap: wrap;
+  gap: 5px;
+  display: flex;
+}
+

package/dist/cjs/components/display-schema-tag/index.js

@@ -41,27 +41,30 @@ var external_react_default = /*#__PURE__*/ __webpack_require__.n(external_react_
 const semi_ui_namespaceObject = require("@douyinfe/semi-ui");
 const index_js_namespaceObject = require("../../plugins/index.js");
 const external_display_schema_tree_index_js_namespaceObject = require("../display-schema-tree/index.js");
-const external_styles_js_namespaceObject = require("./styles.js");
+require("./styles.css");
 function DisplaySchemaTag({ value = {}, showIconInTree, title, warning }) {
     const typeManager = (0, index_js_namespaceObject.useTypeManager)();
     const icon = typeManager?.getDisplayIcon(value) || typeManager.getDisplayIcon({
         type: 'unknown'
     });
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.Popover, {
-        content: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.PopoverContent, {
+        content: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+            className: "gedit-m-display-schema-tag-popover-content",
             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_display_schema_tree_index_js_namespaceObject.DisplaySchemaTree, {
                 value: value,
                 typeManager: typeManager,
                 showIcon: showIconInTree
             })
         }),
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_styles_js_namespaceObject.StyledTag, {
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(semi_ui_namespaceObject.Tag, {
             color: warning ? 'amber' : 'white',
+            className: "gedit-m-display-schema-tag-tag",
             children: [
                 icon && /*#__PURE__*/ external_react_default().cloneElement(icon, {
                     className: 'tag-icon'
                 }),
-                title && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.TitleSpan, {
+                title && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                    className: "gedit-m-display-schema-tag-title",
                     children: title
                 })
             ]

package/dist/cjs/components/display-schema-tag/styles.css

@@ -0,0 +1,21 @@
+.gedit-m-display-schema-tag-popover-content {
+  padding: 10px;
+}
+
+.gedit-m-display-schema-tag-tag {
+  padding: 4px;
+
+  & .tag-icon {
+    width: 12px;
+    height: 12px;
+  }
+}
+
+.gedit-m-display-schema-tag-title {
+  text-overflow: ellipsis;
+  margin-top: -1px;
+  margin-left: 4px;
+  display: inline-block;
+  overflow: hidden;
+}
+

package/dist/cjs/components/display-schema-tree/index.js

@@ -39,7 +39,7 @@ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_react_namespaceObject = require("react");
 var external_react_default = /*#__PURE__*/ __webpack_require__.n(external_react_namespaceObject);
 const json_schema_namespaceObject = require("@flowgram.ai/json-schema");
-const external_styles_js_namespaceObject = require("./styles.js");
+require("./styles.css");
 function DisplaySchemaTree(props) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SchemaTree, {
         ...props
@@ -53,16 +53,20 @@ function SchemaTree(props) {
     const icon = typeManager?.getDisplayIcon(schema);
     let properties = drilldown && config ? config.getTypeSchemaProperties(schema) : {};
     const childEntries = Object.entries(properties || {});
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_styles_js_namespaceObject.TreeItem, {
-        depth: depth,
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: `gedit-m-display-schema-tree-item depth-${depth}`,
         children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_styles_js_namespaceObject.TreeRow, {
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "gedit-m-display-schema-tree-row",
                 children: [
-                    0 !== depth && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.HorizontalLine, {}),
+                    0 !== depth && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        className: "gedit-m-display-schema-tree-horizontal-line"
+                    }),
                     showIcon && icon && /*#__PURE__*/ external_react_default().cloneElement(icon, {
                         className: 'tree-icon'
                     }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.TreeTitle, {
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        className: "gedit-m-display-schema-tree-title",
                         children: parentKey ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
                             children: [
                                 `${parentKey} (`,
@@ -73,7 +77,8 @@ function SchemaTree(props) {
                     })
                 ]
             }),
-            childEntries?.length ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.TreeLevel, {
+            childEntries?.length ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "gedit-m-display-schema-tree-level",
                 children: childEntries.map(([key, value])=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SchemaTree, {
                         ...props,
                         parentKey: key,

package/dist/cjs/components/display-schema-tree/styles.css

@@ -0,0 +1,64 @@
+.gedit-m-display-schema-tree-row {
+  align-items: center;
+  display: flex;
+
+  & .tree-icon {
+    width: 14px;
+    height: 14px;
+    margin-right: 8px;
+  }
+
+  white-space: nowrap;
+  height: 27px;
+}
+
+.gedit-m-display-schema-tree-horizontal-line {
+  position: relative;
+
+  &:before, &:after {
+    content: "";
+    background-color: var(--semi-color-text-3);
+    position: absolute;
+  }
+
+  &:after {
+    width: 15px;
+    height: 1px;
+    top: 0;
+    right: 6px;
+  }
+}
+
+.gedit-m-display-schema-tree-level {
+  padding-left: 30px;
+  position: relative;
+}
+
+.gedit-m-display-schema-tree-item {
+  position: relative;
+
+  &:before {
+    content: "";
+    background-color: var(--semi-color-text-3);
+    position: absolute;
+  }
+
+  &:not(:last-child):before {
+    width: 1px;
+    top: 0;
+    bottom: 0;
+    left: -22px;
+  }
+
+  &:last-child:before {
+    width: 1px;
+    height: 14px;
+    top: 0;
+    left: -22px;
+  }
+
+  &.depth-0:before {
+    width: 0 !important;
+  }
+}
+