@flowgram.ai/form-materials 0.1.0-alpha.14 → 0.1.0-alpha.16

package/dist/cjs/components/coze-editor-extensions/extensions/inputs-tree.js

@@ -0,0 +1,172 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __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, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    InputsTree: ()=>InputsTree,
+    InputsPicker: ()=>InputsPicker
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const external_lodash_es_namespaceObject = require("lodash-es");
+const editor_namespaceObject = require("@flowgram.ai/editor");
+const react_namespaceObject = require("@flowgram.ai/coze-editor/react");
+const semi_ui_namespaceObject = require("@douyinfe/semi-ui");
+const index_js_namespaceObject = require("../../../shared/index.js");
+function InputsPicker({ inputsValues, onSelect }) {
+    const available = (0, editor_namespaceObject.useScopeAvailable)();
+    const getArrayDrilldown = (type, depth = 1)=>{
+        if (editor_namespaceObject.ASTMatch.isArray(type.items)) return getArrayDrilldown(type.items, depth + 1);
+        return {
+            type: type.items,
+            depth: depth
+        };
+    };
+    const renderVariable = (variable, keyPath)=>{
+        let type = variable?.type;
+        let children;
+        if (editor_namespaceObject.ASTMatch.isObject(type)) children = (type.properties || []).map((_property)=>renderVariable(_property, [
+                ...keyPath,
+                _property.key
+            ])).filter(Boolean);
+        if (editor_namespaceObject.ASTMatch.isArray(type)) {
+            const drilldown = getArrayDrilldown(type);
+            if (editor_namespaceObject.ASTMatch.isObject(drilldown.type)) children = (drilldown.type.properties || []).map((_property)=>renderVariable(_property, [
+                    ...keyPath,
+                    ...new Array(drilldown.depth).fill('[0]'),
+                    _property.key
+                ])).filter(Boolean);
+        }
+        const key = keyPath.map((_key, idx)=>'[0]' === _key || 0 === idx ? _key : `.${_key}`).join('');
+        return {
+            key: key,
+            label: (0, external_lodash_es_namespaceObject.last)(keyPath),
+            value: key,
+            children
+        };
+    };
+    const getTreeData = (value, keyPath)=>{
+        const currKey = keyPath.join('.');
+        if (index_js_namespaceObject.FlowValueUtils.isFlowValue(value)) {
+            if (index_js_namespaceObject.FlowValueUtils.isRef(value)) {
+                const variable = available.getByKeyPath(value.content || []);
+                if (variable) return renderVariable(variable, keyPath);
+            }
+            return {
+                key: currKey,
+                value: currKey,
+                label: (0, external_lodash_es_namespaceObject.last)(keyPath)
+            };
+        }
+        if ((0, external_lodash_es_namespaceObject.isPlainObject)(value)) return {
+            key: currKey,
+            value: currKey,
+            label: (0, external_lodash_es_namespaceObject.last)(keyPath),
+            children: Object.entries(value).map(([key, value])=>getTreeData(value, [
+                    ...keyPath,
+                    key
+                ])).filter(Boolean)
+        };
+    };
+    const treeData = (0, external_react_namespaceObject.useMemo)(()=>Object.entries(inputsValues).map(([key, value])=>getTreeData(value, [
+                key
+            ])).filter(Boolean), []);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.Tree, {
+        treeData: treeData,
+        onSelect: (v)=>onSelect(v)
+    });
+}
+const DEFAULT_TRIGGER_CHARACTERS = [
+    '{',
+    '{}',
+    '@'
+];
+function InputsTree({ inputsValues, triggerCharacters = DEFAULT_TRIGGER_CHARACTERS }) {
+    const [posKey, setPosKey] = (0, external_react_namespaceObject.useState)('');
+    const [visible, setVisible] = (0, external_react_namespaceObject.useState)(false);
+    const [position, setPosition] = (0, external_react_namespaceObject.useState)(-1);
+    const editor = (0, react_namespaceObject.useEditor)();
+    function insert(variablePath) {
+        const range = (0, react_namespaceObject.getCurrentMentionReplaceRange)(editor.$view.state);
+        if (!range) return;
+        let { from, to } = range;
+        while('{' === editor.$view.state.doc.sliceString(from - 1, from))from--;
+        while('}' === editor.$view.state.doc.sliceString(to, to + 1))to++;
+        editor.replaceText({
+            ...range,
+            text: '{{' + variablePath + '}}'
+        });
+        setVisible(false);
+    }
+    function handleOpenChange(e) {
+        setPosition(e.state.selection.main.head);
+        setVisible(e.value);
+    }
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (!editor) return;
+    }, [
+        editor,
+        visible
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.Mention, {
+                triggerCharacters: triggerCharacters,
+                onOpenChange: handleOpenChange
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.Popover, {
+                visible: visible,
+                trigger: "custom",
+                position: "topLeft",
+                rePosKey: posKey,
+                content: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                    style: {
+                        width: 300,
+                        maxHeight: 300,
+                        overflowY: 'auto'
+                    },
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(InputsPicker, {
+                        inputsValues: inputsValues,
+                        onSelect: (v)=>{
+                            insert(v);
+                        }
+                    })
+                }),
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.PositionMirror, {
+                    position: position,
+                    onChange: ()=>setPosKey(String(Math.random()))
+                })
+            })
+        ]
+    });
+}
+exports.InputsPicker = __webpack_exports__.InputsPicker;
+exports.InputsTree = __webpack_exports__.InputsTree;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "InputsPicker",
+    "InputsTree"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,152 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __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, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    VariableTagInject: ()=>VariableTagInject
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const external_lodash_es_namespaceObject = require("lodash-es");
+const editor_namespaceObject = require("@flowgram.ai/editor");
+const react_namespaceObject = require("@flowgram.ai/coze-editor/react");
+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");
+class VariableTagWidget extends view_namespaceObject.WidgetType {
+    constructor({ keyPath, scope }){
+        super(), this.toDispose = new editor_namespaceObject.DisposableCollection(), this.renderIcon = (icon)=>{
+            if ('string' == typeof icon) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("img", {
+                style: {
+                    marginRight: 8
+                },
+                width: 12,
+                height: 12,
+                src: icon
+            });
+            return icon;
+        };
+        this.keyPath = keyPath;
+        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, {}),
+            color: "amber",
+            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, {
+            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, {
+                children: [
+                    rootIcon,
+                    rootTitle,
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UIVarName, {
+                        children: v?.keyPath.slice(1).join('.')
+                    })
+                ]
+            }),
+            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_styles_js_namespaceObject.UITag, {
+                prefixIcon: rootIcon,
+                children: [
+                    rootTitle,
+                    !isRoot && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UIVarName, {
+                        children: v?.key
+                    })
+                ]
+            })
+        }));
+    }
+    toDOM(view) {
+        const dom = document.createElement('span');
+        this.root = (0, index_js_namespaceObject.polyfillCreateRoot)(dom);
+        this.toDispose.push(editor_namespaceObject.Disposable.create(()=>{
+            this.root.unmount();
+        }));
+        this.toDispose.push(this.scope.available.trackByKeyPath(this.keyPath, (v)=>{
+            this.renderVariable(v);
+        }, {
+            triggerOnInit: false
+        }));
+        this.renderVariable(this.scope.available.getByKeyPath(this.keyPath));
+        return dom;
+    }
+    eq(other) {
+        return (0, external_lodash_es_namespaceObject.isEqual)(this.keyPath, other.keyPath);
+    }
+    ignoreEvent() {
+        return false;
+    }
+    destroy(dom) {
+        this.toDispose.dispose();
+    }
+}
+function VariableTagInject() {
+    const injector = (0, react_namespaceObject.useInjector)();
+    const scope = (0, editor_namespaceObject.useCurrentScope)();
+    (0, external_react_namespaceObject.useLayoutEffect)(()=>{
+        const atMatcher = new view_namespaceObject.MatchDecorator({
+            regexp: /\{\{([^\}\{]+)\}\}/g,
+            decoration: (match)=>view_namespaceObject.Decoration.replace({
+                    widget: new VariableTagWidget({
+                        keyPath: match[1]?.split('.') ?? [],
+                        scope
+                    })
+                })
+        });
+        return injector.inject([
+            view_namespaceObject.ViewPlugin.fromClass(class {
+                constructor(view){
+                    this.view = view;
+                    this.decorations = atMatcher.createDeco(view);
+                }
+                update() {
+                    this.decorations = atMatcher.createDeco(this.view);
+                }
+            }, {
+                decorations: (p)=>p.decorations,
+                provide (p) {
+                    return view_namespaceObject.EditorView.atomicRanges.of((view)=>view.plugin(p)?.decorations ?? view_namespaceObject.Decoration.none);
+                }
+            })
+        ]);
+    }, [
+        injector
+    ]);
+    return null;
+}
+exports.VariableTagInject = __webpack_exports__.VariableTagInject;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "VariableTagInject"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,109 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __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, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    VariableTree: ()=>VariableTree
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const react_namespaceObject = require("@flowgram.ai/coze-editor/react");
+const semi_ui_namespaceObject = require("@douyinfe/semi-ui");
+const index_js_namespaceObject = require("../../variable-selector/index.js");
+const DEFAULT_TRIGGER_CHARACTER = [
+    '{',
+    '{}',
+    '@'
+];
+function VariableTree({ triggerCharacters = DEFAULT_TRIGGER_CHARACTER }) {
+    const [posKey, setPosKey] = (0, external_react_namespaceObject.useState)('');
+    const [visible, setVisible] = (0, external_react_namespaceObject.useState)(false);
+    const [position, setPosition] = (0, external_react_namespaceObject.useState)(-1);
+    const editor = (0, react_namespaceObject.useEditor)();
+    function insert(variablePath) {
+        const range = (0, react_namespaceObject.getCurrentMentionReplaceRange)(editor.$view.state);
+        if (!range) return;
+        let { from, to } = range;
+        while('{' === editor.$view.state.doc.sliceString(from - 1, from))from--;
+        while('}' === editor.$view.state.doc.sliceString(to, to + 1))to++;
+        editor.replaceText({
+            from,
+            to,
+            text: '{{' + variablePath + '}}'
+        });
+        setVisible(false);
+    }
+    function handleOpenChange(e) {
+        setPosition(e.state.selection.main.head);
+        setVisible(e.value);
+    }
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (!editor) return;
+    }, [
+        editor,
+        visible
+    ]);
+    const treeData = (0, index_js_namespaceObject.useVariableTree)({});
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.Mention, {
+                triggerCharacters: triggerCharacters,
+                onOpenChange: handleOpenChange
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.Popover, {
+                visible: visible,
+                trigger: "custom",
+                position: "topLeft",
+                rePosKey: posKey,
+                content: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                    style: {
+                        width: 300,
+                        maxHeight: 300,
+                        overflowY: 'auto'
+                    },
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.Tree, {
+                        treeData: treeData,
+                        onExpand: (v)=>{
+                            setPosKey(String(Math.random()));
+                        },
+                        onSelect: (v)=>{
+                            insert(v);
+                        }
+                    })
+                }),
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.PositionMirror, {
+                    position: position,
+                    onChange: ()=>setPosKey(String(Math.random()))
+                })
+            })
+        ]
+    });
+}
+exports.VariableTree = __webpack_exports__.VariableTree;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "VariableTree"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/components/coze-editor-extensions/index.js

@@ -0,0 +1,86 @@
+"use strict";
+var __webpack_modules__ = {
+    "./extensions/inputs-tree": function(module) {
+        module.exports = import("./extensions/inputs-tree.js").then(function(module) {
+            return module;
+        });
+    },
+    "./extensions/variable-tag": function(module) {
+        module.exports = import("./extensions/variable-tag.js").then(function(module) {
+            return module;
+        });
+    },
+    "./extensions/variable-tree": function(module) {
+        module.exports = import("./extensions/variable-tree.js").then(function(module) {
+            return module;
+        });
+    }
+};
+var __webpack_module_cache__ = {};
+function __webpack_require__(moduleId) {
+    var cachedModule = __webpack_module_cache__[moduleId];
+    if (void 0 !== cachedModule) return cachedModule.exports;
+    var module = __webpack_module_cache__[moduleId] = {
+        exports: {}
+    };
+    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+    return module.exports;
+}
+(()=>{
+    __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, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+(()=>{
+    __webpack_require__.r(__webpack_exports__);
+    __webpack_require__.d(__webpack_exports__, {
+        EditorInputsTree: ()=>EditorInputsTree,
+        EditorVariableTagInject: ()=>EditorVariableTagInject,
+        EditorVariableTree: ()=>EditorVariableTree
+    });
+    const external_react_namespaceObject = require("react");
+    const index_js_namespaceObject = require("../../shared/index.js");
+    const EditorVariableTree = (0, index_js_namespaceObject.createInjectMaterial)(/*#__PURE__*/ (0, external_react_namespaceObject.lazy)(()=>Promise.resolve().then(__webpack_require__.bind(__webpack_require__, "./extensions/variable-tree")).then((module)=>({
+                default: module.VariableTree
+            }))), {
+        renderKey: 'EditorVariableTree'
+    });
+    const EditorVariableTagInject = (0, index_js_namespaceObject.createInjectMaterial)(/*#__PURE__*/ (0, external_react_namespaceObject.lazy)(()=>Promise.resolve().then(__webpack_require__.bind(__webpack_require__, "./extensions/variable-tag")).then((module)=>({
+                default: module.VariableTagInject
+            }))), {
+        renderKey: 'EditorVariableTagInject'
+    });
+    const EditorInputsTree = (0, index_js_namespaceObject.createInjectMaterial)(/*#__PURE__*/ (0, external_react_namespaceObject.lazy)(()=>Promise.resolve().then(__webpack_require__.bind(__webpack_require__, "./extensions/inputs-tree")).then((module)=>({
+                default: module.InputsTree
+            }))), {
+        renderKey: 'EditorInputsTree'
+    });
+})();
+exports.EditorInputsTree = __webpack_exports__.EditorInputsTree;
+exports.EditorVariableTagInject = __webpack_exports__.EditorVariableTagInject;
+exports.EditorVariableTree = __webpack_exports__.EditorVariableTree;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "EditorInputsTree",
+    "EditorVariableTagInject",
+    "EditorVariableTree"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/components/coze-editor-extensions/styles.js

@@ -0,0 +1,89 @@
+"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, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    UIRootTitle: ()=>UIRootTitle,
+    UIPopoverContent: ()=>UIPopoverContent,
+    UIVarName: ()=>UIVarName,
+    UITag: ()=>UITag
+});
+const external_styled_components_namespaceObject = require("styled-components");
+var external_styled_components_default = /*#__PURE__*/ __webpack_require__.n(external_styled_components_namespaceObject);
+const semi_ui_namespaceObject = require("@douyinfe/semi-ui");
+const UIRootTitle = external_styled_components_default().div`
+  margin-right: 4px;
+  min-width: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--semi-color-text-2);
+`;
+const UIVarName = external_styled_components_default().div`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+const UITag = external_styled_components_default()(semi_ui_namespaceObject.Tag)`
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  max-width: 300px;
+
+  & .semi-tag-content-center {
+    justify-content: flex-start;
+  }
+
+  &.semi-tag {
+    margin: 0 5px;
+  }
+`;
+const UIPopoverContent = external_styled_components_default().div`
+  padding: 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+`;
+exports.UIPopoverContent = __webpack_exports__.UIPopoverContent;
+exports.UIRootTitle = __webpack_exports__.UIRootTitle;
+exports.UITag = __webpack_exports__.UITag;
+exports.UIVarName = __webpack_exports__.UIVarName;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "UIPopoverContent",
+    "UIRootTitle",
+    "UITag",
+    "UIVarName"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});