@flowgram.ai/form-materials 0.5.4 → 0.5.6

package/dist/esm/components/inputs-values-tree/row.mjs

@@ -3,10 +3,11 @@ import { useMemo, useState } from "react";
 import { I18n } from "@flowgram.ai/editor";
 import { IconButton, Input } from "@douyinfe/semi-ui";
 import { IconChevronDown, IconChevronRight, IconDelete } from "@douyinfe/semi-icons";
-import { IconAddChildren, UIActions, UICollapseTrigger, UICollapsible, UIRow, UITreeItemLeft, UITreeItemMain, UITreeItemRight, UITreeItems } from "./styles.mjs";
+import "./styles.css";
 import { useChildList } from "./hooks/use-child-list.mjs";
 import { InjectDynamicValueInput } from "../dynamic-value-input/index.mjs";
 import { BlurInput } from "../blur-input/index.mjs";
+import { IconAddChildren } from "./icon.mjs";
 const AddObjectChildStrategy = {
     hit: (schema)=>'object' === schema.type,
     Renderer: ()=>/*#__PURE__*/ jsx(Input, {
@@ -42,11 +43,10 @@ function InputValueRow(props) {
     ]);
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
-            /*#__PURE__*/ jsx(UITreeItemLeft, {
-                $isLast: $isLast,
-                $showLine: $level > 0,
-                $showCollapse: hasChildren,
-                children: hasChildren && /*#__PURE__*/ jsx(UICollapseTrigger, {
+            /*#__PURE__*/ jsx("div", {
+                className: `gedit-m-inputs-values-tree-tree-item-left ${$level > 0 ? 'show-line' : ''} ${$isLast ? 'is-last' : ''} ${hasChildren ? 'show-collapse' : ''}`,
+                children: hasChildren && /*#__PURE__*/ jsx("div", {
+                    className: "gedit-m-inputs-values-tree-collapse-trigger",
                     onClick: ()=>setCollapse((_collapse)=>!_collapse),
                     children: collapse ? /*#__PURE__*/ jsx(IconChevronDown, {
                         size: "small"
@@ -55,10 +55,13 @@ function InputValueRow(props) {
                     })
                 })
             }),
-            /*#__PURE__*/ jsxs(UITreeItemRight, {
+            /*#__PURE__*/ jsxs("div", {
+                className: "gedit-m-inputs-values-tree-tree-item-right",
                 children: [
-                    /*#__PURE__*/ jsx(UITreeItemMain, {
-                        children: /*#__PURE__*/ jsxs(UIRow, {
+                    /*#__PURE__*/ jsx("div", {
+                        className: "gedit-m-inputs-values-tree-tree-item-main",
+                        children: /*#__PURE__*/ jsxs("div", {
+                            className: "gedit-m-inputs-values-tree-row",
                             children: [
                                 /*#__PURE__*/ jsx(BlurInput, {
                                     style: {
@@ -85,7 +88,8 @@ function InputValueRow(props) {
                                         strategies
                                     }
                                 }),
-                                /*#__PURE__*/ jsxs(UIActions, {
+                                /*#__PURE__*/ jsxs("div", {
+                                    className: "gedit-m-inputs-values-tree-actions",
                                     children: [
                                         canAddField && /*#__PURE__*/ jsx(IconButton, {
                                             disabled: readonly,
@@ -117,10 +121,10 @@ function InputValueRow(props) {
                             ]
                         })
                     }),
-                    hasChildren && /*#__PURE__*/ jsx(UICollapsible, {
-                        $collapse: collapse,
-                        children: /*#__PURE__*/ jsx(UITreeItems, {
-                            $shrink: true,
+                    hasChildren && /*#__PURE__*/ jsx("div", {
+                        className: `gedit-m-inputs-values-tree-collapsible ${collapse ? 'collapse' : ''}`,
+                        children: /*#__PURE__*/ jsx("div", {
+                            className: "gedit-m-inputs-values-tree-tree-items shrink",
                             children: list.map((_item, index)=>/*#__PURE__*/ jsx(InputValueRow, {
                                     readonly: readonly,
                                     hasError: hasError,

package/dist/esm/components/inputs-values-tree/styles.css

@@ -0,0 +1,85 @@
+.gedit-m-inputs-values-tree-row {
+  align-items: flex-start;
+  gap: 5px;
+  display: flex;
+}
+
+.gedit-m-inputs-values-tree-collapse-trigger {
+  cursor: pointer;
+  margin-right: 5px;
+}
+
+.gedit-m-inputs-values-tree-tree-items {
+  grid-template-columns: auto 1fr;
+  display: grid;
+}
+
+.gedit-m-inputs-values-tree-tree-items.shrink {
+  margin-top: 10px;
+  padding-left: 3px;
+}
+
+.gedit-m-inputs-values-tree-tree-item-left {
+  grid-column: 1;
+  width: 16px;
+  position: relative;
+}
+
+.gedit-m-inputs-values-tree-tree-item-left.show-line:before {
+  content: "";
+  height: var(--line-height, 100%);
+  background: #d9d9d9;
+  width: 1px;
+  display: block;
+  position: absolute;
+  top: -16px;
+  left: -14px;
+}
+
+.gedit-m-inputs-values-tree-tree-item-left.show-line:after {
+  content: "";
+  width: var(--line-width, 30px);
+  background: #d9d9d9;
+  height: 1px;
+  display: block;
+  position: absolute;
+  top: 8px;
+  left: -14px;
+}
+
+.gedit-m-inputs-values-tree-tree-item-left.show-line.is-last:before {
+  height: 24px;
+}
+
+.gedit-m-inputs-values-tree-tree-item-left.show-line.show-collapse:after {
+  width: 12px;
+}
+
+.gedit-m-inputs-values-tree-tree-item-right {
+  grid-column: 2;
+  margin-bottom: 10px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.gedit-m-inputs-values-tree-tree-item-main {
+  flex-direction: column;
+  gap: 10px;
+  display: flex;
+  position: relative;
+}
+
+.gedit-m-inputs-values-tree-collapsible {
+  display: none;
+}
+
+.gedit-m-inputs-values-tree-collapsible.collapse {
+  display: block;
+}
+
+.gedit-m-inputs-values-tree-actions {
+  white-space: nowrap;
+}
+

package/dist/esm/components/json-schema-editor/default-value.mjs

@@ -2,10 +2,10 @@ import { jsx } from "react/jsx-runtime";
 import "react";
 import { I18n } from "@flowgram.ai/editor";
 import { ConstantInput } from "../constant-input/index.mjs";
-import { ConstantInputWrapper } from "./styles.mjs";
 function DefaultValue(props) {
     const { value, schema, onChange, placeholder } = props;
-    return /*#__PURE__*/ jsx(ConstantInputWrapper, {
+    return /*#__PURE__*/ jsx("div", {
+        className: "gedit-m-json-schema-editor-constant-input-wrapper",
         children: /*#__PURE__*/ jsx(ConstantInput, {
             value: value,
             onChange: (_v)=>onChange(_v),

package/dist/esm/components/json-schema-editor/icon.mjs

@@ -0,0 +1,26 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import semi_icons from "@douyinfe/semi-icons";
+const iconAddChildrenSvg = /*#__PURE__*/ jsxs("svg", {
+    className: "icon-icon icon-icon-coz_add_node ",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+        /*#__PURE__*/ jsx("path", {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M11 6.49988C11 8.64148 9.50397 10.4337 7.49995 10.8884V15.4998C7.49995 16.0521 7.94767 16.4998 8.49995 16.4998H11.208C11.0742 16.8061 11 17.1443 11 17.4998C11 17.8554 11.0742 18.1936 11.208 18.4998H8.49995C6.8431 18.4998 5.49995 17.1567 5.49995 15.4998V10.8884C3.49599 10.4336 2 8.64145 2 6.49988C2 4.0146 4.01472 1.99988 6.5 1.99988C8.98528 1.99988 11 4.0146 11 6.49988ZM6.5 8.99988C7.88071 8.99988 9 7.88059 9 6.49988C9 5.11917 7.88071 3.99988 6.5 3.99988C5.11929 3.99988 4 5.11917 4 6.49988C4 7.88059 5.11929 8.99988 6.5 8.99988Z"
+        }),
+        /*#__PURE__*/ jsx("path", {
+            d: "M17.5 12.4999C18.0523 12.4999 18.5 12.9476 18.5 13.4999V16.4999H21.5C22.0523 16.4999 22.5 16.9476 22.5 17.4999C22.5 18.0522 22.0523 18.4999 21.5 18.4999H18.5V21.4999C18.5 22.0522 18.0523 22.4999 17.5 22.4999C16.9477 22.4999 16.5 22.0522 16.5 21.4999V18.4999H13.5C12.9477 18.4999 12.5 18.0522 12.5 17.4999C12.5 16.9476 12.9477 16.4999 13.5 16.4999H16.5V13.4999C16.5 12.9476 16.9477 12.4999 17.5 12.4999Z"
+        })
+    ]
+});
+const IconAddChildren = ()=>/*#__PURE__*/ jsx(semi_icons, {
+        size: "small",
+        svg: iconAddChildrenSvg
+    });
+export { IconAddChildren };

package/dist/esm/components/json-schema-editor/index.mjs

@@ -5,19 +5,21 @@ import { Button, Checkbox, IconButton } from "@douyinfe/semi-ui";
 import { IconChevronDown, IconChevronRight, IconExpand, IconMinus, IconPlus, IconShrink } from "@douyinfe/semi-icons";
 import { InjectTypeSelector } from "../type-selector/index.mjs";
 import { BlurInput } from "../blur-input/index.mjs";
-import { DefaultValueWrapper, IconAddChildren, UIActions, UICollapseTrigger, UICollapsible, UIContainer, UIExpandDetail, UILabel, UIName, UIRequired, UIRow, UITreeItemLeft, UITreeItemMain, UITreeItemRight, UITreeItems, UIType } from "./styles.mjs";
+import { IconAddChildren } from "./icon.mjs";
 import { usePropertiesEdit } from "./hooks.mjs";
 import { DefaultValue } from "./default-value.mjs";
+import "./styles.css";
 const DEFAULT = {
     type: 'object'
 };
 function JsonSchemaEditor(props) {
     const { value = DEFAULT, config = {}, onChange: onChangeProps, readonly } = props;
     const { propertyList, onAddProperty, onRemoveProperty, onEditProperty } = usePropertiesEdit(value, onChangeProps);
-    return /*#__PURE__*/ jsxs(UIContainer, {
-        className: props.className,
+    return /*#__PURE__*/ jsxs("div", {
+        className: "gedit-m-json-schema-editor-container",
         children: [
-            /*#__PURE__*/ jsx(UITreeItems, {
+            /*#__PURE__*/ jsx("div", {
+                className: "gedit-m-json-schema-editor-tree-items",
                 children: propertyList.map((_property)=>/*#__PURE__*/ jsx(PropertyEdit, {
                         readonly: readonly,
                         value: _property,
@@ -66,11 +68,10 @@ function PropertyEdit(props) {
     const showCollapse = canAddField && propertyList.length > 0;
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
-            /*#__PURE__*/ jsx(UITreeItemLeft, {
-                $isLast: $isLast,
-                $showLine: $level > 0,
-                $showCollapse: showCollapse,
-                children: showCollapse && /*#__PURE__*/ jsx(UICollapseTrigger, {
+            /*#__PURE__*/ jsx("div", {
+                className: `gedit-m-json-schema-editor-tree-item-left ${$level > 0 ? 'show-line' : ''} ${$isLast ? 'is-last' : ''} ${showCollapse ? 'show-collapse' : ''}`,
+                children: showCollapse && /*#__PURE__*/ jsx("div", {
+                    className: "gedit-m-json-schema-editor-collapse-trigger",
                     onClick: ()=>setCollapse((_collapse)=>!_collapse),
                     children: collapse ? /*#__PURE__*/ jsx(IconChevronDown, {
                         size: "small"
@@ -79,13 +80,17 @@ function PropertyEdit(props) {
                     })
                 })
             }),
-            /*#__PURE__*/ jsxs(UITreeItemRight, {
+            /*#__PURE__*/ jsxs("div", {
+                className: "gedit-m-json-schema-editor-tree-item-right",
                 children: [
-                    /*#__PURE__*/ jsxs(UITreeItemMain, {
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "gedit-m-json-schema-editor-tree-item-main",
                         children: [
-                            /*#__PURE__*/ jsxs(UIRow, {
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "gedit-m-json-schema-editor-row",
                                 children: [
-                                    /*#__PURE__*/ jsx(UIName, {
+                                    /*#__PURE__*/ jsx("div", {
+                                        className: "gedit-m-json-schema-editor-name",
                                         children: /*#__PURE__*/ jsx(BlurInput, {
                                             disabled: readonly,
                                             placeholder: config?.placeholder ?? I18n.t('Input Variable Name'),
@@ -94,7 +99,8 @@ function PropertyEdit(props) {
                                             onChange: (value)=>onChange('name', value)
                                         })
                                     }),
-                                    /*#__PURE__*/ jsx(UIType, {
+                                    /*#__PURE__*/ jsx("div", {
+                                        className: "gedit-m-json-schema-editor-type",
                                         children: /*#__PURE__*/ jsx(InjectTypeSelector, {
                                             value: typeSelectorValue,
                                             readonly: readonly,
@@ -106,14 +112,16 @@ function PropertyEdit(props) {
                                             }
                                         })
                                     }),
-                                    /*#__PURE__*/ jsx(UIRequired, {
+                                    /*#__PURE__*/ jsx("div", {
+                                        className: "gedit-m-json-schema-editor-required",
                                         children: /*#__PURE__*/ jsx(Checkbox, {
                                             disabled: readonly,
                                             checked: isPropertyRequired,
                                             onChange: (e)=>onChange('isPropertyRequired', e.target.checked)
                                         })
                                     }),
-                                    /*#__PURE__*/ jsxs(UIActions, {
+                                    /*#__PURE__*/ jsxs("div", {
+                                        className: "gedit-m-json-schema-editor-actions",
                                         children: [
                                             /*#__PURE__*/ jsx(IconButton, {
                                                 disabled: readonly,
@@ -151,9 +159,11 @@ function PropertyEdit(props) {
                                     })
                                 ]
                             }),
-                            expand && /*#__PURE__*/ jsxs(UIExpandDetail, {
+                            expand && /*#__PURE__*/ jsxs("div", {
+                                className: "gedit-m-json-schema-editor-expand-detail",
                                 children: [
-                                    /*#__PURE__*/ jsx(UILabel, {
+                                    /*#__PURE__*/ jsx("div", {
+                                        className: "gedit-m-json-schema-editor-label",
                                         children: config?.descTitle ?? I18n.t("Description")
                                     }),
                                     /*#__PURE__*/ jsx(BlurInput, {
@@ -165,13 +175,15 @@ function PropertyEdit(props) {
                                     }),
                                     0 === $level && /*#__PURE__*/ jsxs(Fragment, {
                                         children: [
-                                            /*#__PURE__*/ jsx(UILabel, {
+                                            /*#__PURE__*/ jsx("div", {
+                                                className: "gedit-m-json-schema-editor-label",
                                                 style: {
                                                     marginTop: 10
                                                 },
                                                 children: config?.defaultValueTitle ?? I18n.t('Default Value')
                                             }),
-                                            /*#__PURE__*/ jsx(DefaultValueWrapper, {
+                                            /*#__PURE__*/ jsx("div", {
+                                                className: "gedit-m-json-schema-editor-default-value-wrapper",
                                                 children: /*#__PURE__*/ jsx(DefaultValue, {
                                                     value: defaultValue,
                                                     schema: value,
@@ -185,10 +197,10 @@ function PropertyEdit(props) {
                             })
                         ]
                     }),
-                    showCollapse && /*#__PURE__*/ jsx(UICollapsible, {
-                        $collapse: collapse,
-                        children: /*#__PURE__*/ jsx(UITreeItems, {
-                            $shrink: true,
+                    showCollapse && /*#__PURE__*/ jsx("div", {
+                        className: `gedit-m-json-schema-editor-collapsible ${collapse ? 'collapse' : ''}`,
+                        children: /*#__PURE__*/ jsx("div", {
+                            className: "gedit-m-json-schema-editor-tree-items shrink",
                             children: propertyList.map((_property, index)=>/*#__PURE__*/ jsx(PropertyEdit, {
                                     readonly: readonly,
                                     value: _property,

package/dist/esm/components/json-schema-editor/styles.css

@@ -0,0 +1,113 @@
+.gedit-m-json-schema-editor-row {
+  align-items: center;
+  gap: 6px;
+  display: flex;
+}
+
+.gedit-m-json-schema-editor-collapse-trigger {
+  cursor: pointer;
+  margin-right: 5px;
+}
+
+.gedit-m-json-schema-editor-expand-detail {
+  flex-direction: column;
+  display: flex;
+}
+
+.gedit-m-json-schema-editor-label {
+  color: #999;
+  margin-bottom: 2px;
+  font-size: 12px;
+  font-weight: 400;
+}
+
+.gedit-m-json-schema-editor-tree-items {
+  grid-template-columns: auto 1fr;
+  display: grid;
+}
+
+.gedit-m-json-schema-editor-tree-items.shrink {
+  margin-top: 10px;
+  padding-left: 3px;
+}
+
+.gedit-m-json-schema-editor-tree-item-left {
+  grid-column: 1;
+  width: 16px;
+  position: relative;
+}
+
+.gedit-m-json-schema-editor-tree-item-left.show-line:before {
+  content: "";
+  height: var(--line-height, 100%);
+  background: #d9d9d9;
+  width: 1px;
+  display: block;
+  position: absolute;
+  top: -16px;
+  left: -14px;
+}
+
+.gedit-m-json-schema-editor-tree-item-left.show-line:after {
+  content: "";
+  width: var(--line-width, 30px);
+  background: #d9d9d9;
+  height: 1px;
+  display: block;
+  position: absolute;
+  top: 8px;
+  left: -14px;
+}
+
+.gedit-m-json-schema-editor-tree-item-left.show-line.is-last:before {
+  height: 24px;
+}
+
+.gedit-m-json-schema-editor-tree-item-left.show-line.show-collapse:after {
+  width: 12px;
+}
+
+.gedit-m-json-schema-editor-tree-item-right {
+  grid-column: 2;
+  margin-bottom: 10px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.gedit-m-json-schema-editor-tree-item-main {
+  flex-direction: column;
+  gap: 10px;
+  display: flex;
+  position: relative;
+}
+
+.gedit-m-json-schema-editor-collapsible {
+  display: none;
+}
+
+.gedit-m-json-schema-editor-collapsible.collapse {
+  display: block;
+}
+
+.gedit-m-json-schema-editor-name {
+  flex-grow: 1;
+}
+
+.gedit-m-json-schema-editor-actions {
+  white-space: nowrap;
+}
+
+.gedit-m-json-schema-editor-default-value-wrapper {
+  margin: 0;
+}
+
+.gedit-m-json-schema-editor-constant-input-wrapper {
+  flex-grow: 1;
+
+  & .semi-tree-select, & .semi-input-number, & .semi-select {
+    width: 100%;
+  }
+}
+

package/dist/esm/components/prompt-editor/editor.mjs

@@ -2,20 +2,30 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
 import { ActiveLinePlaceholder, EditorProvider, Renderer } from "@flowgram.ai/coze-editor/react";
 import preset_prompt from "@flowgram.ai/coze-editor/preset-prompt";
-import { UIContainer } from "./styles.mjs";
 import markdown from "./extensions/markdown.mjs";
 import language_support from "./extensions/language-support.mjs";
 import jinja from "./extensions/jinja.mjs";
+import "./styles.css";
 function PromptEditor(props) {
     const { value, onChange, readonly, placeholder, activeLinePlaceholder, style, hasError, children, disableMarkdownHighlight, options } = props || {};
     const editorRef = useRef(null);
+    const editorValue = String(value?.content || '');
     useEffect(()=>{
-        if (editorRef.current?.getValue() !== value?.content) editorRef.current?.setValue(String(value?.content || ''));
+        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__*/ jsx(UIContainer, {
-        $hasError: hasError,
+    return /*#__PURE__*/ jsx("div", {
+        className: `gedit-m-prompt-editor-container ${hasError ? 'has-error' : ''}`,
         style: style,
         children: /*#__PURE__*/ jsxs(EditorProvider, {
             children: [
@@ -24,7 +34,7 @@ function PromptEditor(props) {
                         editorRef.current = editor;
                     },
                     plugins: preset_prompt,
-                    defaultValue: String(value?.content),
+                    defaultValue: editorValue,
                     options: {
                         readOnly: readonly,
                         editable: !readonly,

package/dist/esm/components/prompt-editor/styles.css

@@ -0,0 +1,10 @@
+.gedit-m-prompt-editor-container {
+  background-color: var(--semi-color-fill-0);
+  padding-left: 10px;
+  padding-right: 6px;
+}
+
+.gedit-m-prompt-editor-container.has-error {
+  border: 1px solid var(--semi-color-danger-6);
+}
+

package/dist/esm/components/prompt-editor-with-inputs/index.mjs

@@ -1,5 +1,13 @@
-import { lazySuspense } from "../../shared/index.mjs";
-const PromptEditorWithInputs = lazySuspense(()=>import("./editor.mjs").then((module)=>({
-            default: module.PromptEditorWithInputs
-        })));
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { PromptEditor } from "../prompt-editor/index.mjs";
+import { EditorInputsTree } from "../coze-editor-extensions/index.mjs";
+function PromptEditorWithInputs({ inputsValues, ...restProps }) {
+    return /*#__PURE__*/ jsx(PromptEditor, {
+        ...restProps,
+        children: /*#__PURE__*/ jsx(EditorInputsTree, {
+            inputsValues: inputsValues
+        })
+    });
+}
 export { PromptEditorWithInputs };

package/dist/esm/components/prompt-editor-with-variables/index.mjs

@@ -1,5 +1,14 @@
-import { lazySuspense } from "../../shared/index.mjs";
-const PromptEditorWithVariables = lazySuspense(()=>import("./editor.mjs").then((module)=>({
-            default: module.PromptEditorWithVariables
-        })));
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { PromptEditor } from "../prompt-editor/index.mjs";
+import { EditorVariableTagInject, EditorVariableTree } from "../coze-editor-extensions/index.mjs";
+function PromptEditorWithVariables(props) {
+    return /*#__PURE__*/ jsxs(PromptEditor, {
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx(EditorVariableTree, {}),
+            /*#__PURE__*/ jsx(EditorVariableTagInject, {})
+        ]
+    });
+}
 export { PromptEditorWithVariables };

package/dist/esm/components/variable-selector/context.mjs

@@ -2,11 +2,15 @@ import { jsx } from "react/jsx-runtime";
 import { createContext, useContext, useMemo } from "react";
 const VariableSelectorContext = /*#__PURE__*/ createContext({});
 const useVariableSelectorContext = ()=>useContext(VariableSelectorContext);
-const VariableSelectorProvider = ({ children, skipVariable })=>{
+const VariableSelectorProvider = ({ children, skipVariable, includeSchema, excludeSchema })=>{
     const context = useMemo(()=>({
-            skipVariable
+            skipVariable,
+            includeSchema,
+            excludeSchema
         }), [
-        skipVariable
+        skipVariable,
+        includeSchema,
+        excludeSchema
     ]);
     return /*#__PURE__*/ jsx(VariableSelectorContext.Provider, {
         value: context,

package/dist/esm/components/variable-selector/index.mjs

@@ -1,12 +1,12 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { I18n } from "@flowgram.ai/editor";
-import { Popover } from "@douyinfe/semi-ui";
+import { Popover, Tag, TreeSelect } from "@douyinfe/semi-ui";
 import { IconChevronDownStroked, IconIssueStroked } from "@douyinfe/semi-icons";
 import { createInjectMaterial } from "../../shared/index.mjs";
 import { useVariableTree } from "./use-variable-tree.mjs";
-import { UIPopoverContent, UIRootTitle, UITag, UITreeSelect, UIVarName } from "./styles.mjs";
 import { VariableSelectorProvider, useVariableSelectorContext } from "./context.mjs";
+import "./styles.css";
 const VariableSelector = ({ value, config = {}, onChange, style, readonly = false, includeSchema, excludeSchema, hasError, triggerRender })=>{
     const { skipVariable } = useVariableSelectorContext();
     const treeData = useVariableTree({
@@ -35,21 +35,23 @@ const VariableSelector = ({ value, config = {}, onChange, style, readonly = fals
         return icon;
     };
     return /*#__PURE__*/ jsx(Fragment, {
-        children: /*#__PURE__*/ jsx(UITreeSelect, {
+        children: /*#__PURE__*/ jsx(TreeSelect, {
+            className: `gedit-m-variable-selector-tree-select ${hasError ? 'error' : ''}`,
             dropdownMatchSelectWidth: false,
             disabled: readonly,
             treeData: treeData,
             size: "small",
             value: treeValue,
             clearIcon: null,
-            $error: hasError,
             style: style,
             validateStatus: hasError ? 'error' : void 0,
+            dropdownClassName: "gedit-m-variable-selector-dropdown",
             onChange: (_, _config)=>{
                 onChange(_config.keyPath);
             },
             renderSelectedItem: (_option)=>{
-                if (!_option?.keyPath) return /*#__PURE__*/ jsx(UITag, {
+                if (!_option?.keyPath) return /*#__PURE__*/ jsx(Tag, {
+                    className: "gedit-m-variable-selector-tag",
                     prefixIcon: /*#__PURE__*/ jsx(IconIssueStroked, {}),
                     color: "amber",
                     closable: !readonly,
@@ -57,28 +59,32 @@ const VariableSelector = ({ value, config = {}, onChange, style, readonly = fals
                     children: config?.notFoundContent ?? 'Undefined'
                 });
                 const rootIcon = renderIcon(_option.rootMeta?.icon || _option?.icon);
-                const rootTitle = /*#__PURE__*/ jsx(UIRootTitle, {
+                const rootTitle = /*#__PURE__*/ jsx("div", {
+                    className: "gedit-m-variable-selector-root-title",
                     children: _option.rootMeta?.title ? `${_option.rootMeta?.title} ${_option.isRoot ? '' : '-'} ` : null
                 });
                 return /*#__PURE__*/ jsx("div", {
                     children: /*#__PURE__*/ jsx(Popover, {
-                        content: /*#__PURE__*/ jsxs(UIPopoverContent, {
+                        content: /*#__PURE__*/ jsxs("div", {
+                            className: "gedit-m-variable-selector-tag-pop",
                             children: [
                                 rootIcon,
                                 rootTitle,
-                                /*#__PURE__*/ jsx(UIVarName, {
+                                /*#__PURE__*/ jsx("div", {
+                                    className: "gedit-m-variable-selector-var-name",
                                     children: _option.keyPath.slice(1).join('.')
                                 })
                             ]
                         }),
-                        children: /*#__PURE__*/ jsxs(UITag, {
+                        children: /*#__PURE__*/ jsxs(Tag, {
+                            className: "gedit-m-variable-selector-tag",
                             prefixIcon: rootIcon,
                             closable: !readonly,
                             onClose: ()=>onChange(void 0),
                             children: [
                                 rootTitle,
-                                !_option.isRoot && /*#__PURE__*/ jsx(UIVarName, {
-                                    $inSelector: true,
+                                !_option.isRoot && /*#__PURE__*/ jsx("div", {
+                                    className: "gedit-m-variable-selector-var-name in-selector",
                                     children: _option.label
                                 })
                             ]