@flowgram.ai/form-materials 0.5.4 → 0.5.6

package/dist/esm/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/esm/components/coze-editor-extensions/extensions/variable-tag.mjs

@@ -3,11 +3,11 @@ import { useLayoutEffect } from "react";
 import { isEqual, last } from "lodash-es";
 import { Disposable, DisposableCollection, useCurrentScope } from "@flowgram.ai/editor";
 import { useInjector } from "@flowgram.ai/coze-editor/react";
-import { Popover } from "@douyinfe/semi-ui";
+import { Popover, Tag } from "@douyinfe/semi-ui";
 import { IconIssueStroked } from "@douyinfe/semi-icons";
 import { Decoration, EditorView, MatchDecorator, ViewPlugin, WidgetType } from "@codemirror/view";
 import { polyfillCreateRoot } from "../../../shared/index.mjs";
-import { UIPopoverContent, UIRootTitle, UITag, UIVarName } from "../styles.mjs";
+import "../styles.css";
 class VariableTagWidget extends WidgetType {
     constructor({ keyPath, scope }){
         super(), this.toDispose = new DisposableCollection(), this.renderIcon = (icon)=>{
@@ -25,32 +25,50 @@ class VariableTagWidget extends WidgetType {
         this.scope = scope;
     }
     renderVariable(v) {
-        if (!v) return void this.root.render(/*#__PURE__*/ jsx(UITag, {
-            prefixIcon: /*#__PURE__*/ jsx(IconIssueStroked, {}),
+        if (!v) return void this.root.render(/*#__PURE__*/ jsxs(Tag, {
+            className: "gedit-m-coze-editor-tag",
             color: "amber",
-            children: "Unknown"
+            children: [
+                /*#__PURE__*/ jsx(IconIssueStroked, {
+                    style: {
+                        marginRight: '4px'
+                    }
+                }),
+                /*#__PURE__*/ jsx("span", {
+                    children: "Unknown"
+                })
+            ]
         }));
         const rootField = last(v.parentFields) || v;
         const isRoot = v === rootField;
-        const rootTitle = /*#__PURE__*/ jsx(UIRootTitle, {
+        const rootTitle = /*#__PURE__*/ 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__*/ jsx(Popover, {
-            content: /*#__PURE__*/ jsxs(UIPopoverContent, {
+            content: /*#__PURE__*/ jsxs("div", {
+                className: "gedit-m-coze-editor-popover-content",
                 children: [
                     rootIcon,
                     rootTitle,
-                    /*#__PURE__*/ jsx(UIVarName, {
+                    /*#__PURE__*/ jsx("span", {
+                        className: "gedit-m-coze-editor-var-name",
                         children: v?.keyPath.slice(1).join('.')
                     })
                 ]
             }),
-            children: /*#__PURE__*/ jsxs(UITag, {
-                prefixIcon: rootIcon,
+            children: /*#__PURE__*/ jsxs(Tag, {
+                className: "gedit-m-coze-editor-tag",
+                style: {
+                    display: 'inline-flex',
+                    alignItems: 'center'
+                },
                 children: [
+                    rootIcon,
                     rootTitle,
-                    !isRoot && /*#__PURE__*/ jsx(UIVarName, {
+                    !isRoot && /*#__PURE__*/ jsx("span", {
+                        className: "gedit-m-coze-editor-var-name",
                         children: v?.key
                     })
                 ]

package/dist/esm/components/coze-editor-extensions/styles.css

@@ -0,0 +1,37 @@
+.gedit-m-coze-editor-root-title {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 20px;
+  color: var(--semi-color-text-2);
+  margin-right: 4px;
+  overflow: hidden;
+}
+
+.gedit-m-coze-editor-var-name {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  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;
+  }
+
+  &.semi-tag {
+    margin: 0 5px;
+  }
+}
+
+.gedit-m-coze-editor-popover-content {
+  justify-content: flex-start;
+  align-items: center;
+  padding: 10px;
+  display: inline-flex;
+}
+

package/dist/esm/components/db-condition-row/index.mjs

@@ -6,12 +6,8 @@ import { IconChevronDownStroked } from "@douyinfe/semi-icons";
 import { useTypeManager } from "../../plugins/index.mjs";
 import { InjectDynamicValueInput } from "../dynamic-value-input/index.mjs";
 import { useCondition } from "../condition-context/index.mjs";
-import { UIContainer, UILeft, UIOperator, UIOptionLabel, UIRight, UISelect, UIValues } from "./styles.mjs";
-const defaultRuleConfig = {
-    ops: {},
-    rules: {}
-};
-function DBConditionRow({ style, value, onChange, readonly, options, ruleConfig = defaultRuleConfig }) {
+import "./styles.css";
+function DBConditionRow({ style, value, onChange, readonly, options, ruleConfig }) {
     const { left, operator, right } = value || {};
     const typeManager = useTypeManager();
     const leftSchema = useMemo(()=>options?.find((item)=>item.value === left)?.schema, [
@@ -23,7 +19,8 @@ function DBConditionRow({ style, value, onChange, readonly, options, ruleConfig
         operator,
         ruleConfig
     });
-    const renderDBOptionSelect = ()=>/*#__PURE__*/ jsx(UISelect, {
+    const renderDBOptionSelect = ()=>/*#__PURE__*/ jsx(Select, {
+            className: "gedit-m-db-condition-row-select",
             disabled: readonly,
             size: "small",
             style: {
@@ -35,7 +32,8 @@ function DBConditionRow({ style, value, onChange, readonly, options, ruleConfig
                     left: v
                 }),
             optionList: options?.map((item)=>({
-                    label: /*#__PURE__*/ jsxs(UIOptionLabel, {
+                    label: /*#__PURE__*/ jsxs("div", {
+                        className: "gedit-m-db-condition-row-option-label",
                         children: [
                             /*#__PURE__*/ jsx(Icon, {
                                 size: "small",
@@ -69,18 +67,23 @@ function DBConditionRow({ style, value, onChange, readonly, options, ruleConfig
                     })
                 })
         });
-    return /*#__PURE__*/ jsxs(UIContainer, {
+    return /*#__PURE__*/ jsxs("div", {
+        className: "gedit-m-db-condition-row-container",
         style: style,
         children: [
-            /*#__PURE__*/ jsx(UIOperator, {
+            /*#__PURE__*/ jsx("div", {
+                className: "gedit-m-db-condition-row-operator",
                 children: renderOpSelect()
             }),
-            /*#__PURE__*/ jsxs(UIValues, {
+            /*#__PURE__*/ jsxs("div", {
+                className: "gedit-m-db-condition-row-values",
                 children: [
-                    /*#__PURE__*/ jsx(UILeft, {
+                    /*#__PURE__*/ jsx("div", {
+                        className: "gedit-m-db-condition-row-left",
                         children: renderDBOptionSelect()
                     }),
-                    /*#__PURE__*/ jsx(UIRight, {
+                    /*#__PURE__*/ jsx("div", {
+                        className: "gedit-m-db-condition-row-right",
                         children: targetSchema ? /*#__PURE__*/ jsx(InjectDynamicValueInput, {
                             readonly: readonly || !rule,
                             value: right,

package/dist/esm/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/esm/components/display-inputs-values/index.mjs

@@ -4,11 +4,12 @@ import { isPlainObject } from "lodash-es";
 import { useScopeAvailable } from "@flowgram.ai/editor";
 import { FlowValueUtils } from "../../shared/index.mjs";
 import { DisplayFlowValue } from "../display-flow-value/index.mjs";
-import { DisplayInputsWrapper } from "./styles.mjs";
+import "./styles.css";
 import { DisplaySchemaTag } from "../display-schema-tag/index.mjs";
 function DisplayInputsValues({ value, showIconInTree }) {
     const childEntries = Object.entries(value || {});
-    return /*#__PURE__*/ jsx(DisplayInputsWrapper, {
+    return /*#__PURE__*/ jsx("div", {
+        className: "gedit-m-display-inputs-wrapper",
         children: childEntries.map(([key, value])=>{
             if (FlowValueUtils.isFlowValue(value)) return /*#__PURE__*/ jsx(DisplayFlowValue, {
                 title: key,

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

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

package/dist/esm/components/display-outputs/index.mjs

@@ -3,7 +3,7 @@ import { useEffect } from "react";
 import { JsonSchemaUtils } from "@flowgram.ai/json-schema";
 import { useCurrentScope, useRefresh } from "@flowgram.ai/editor";
 import { DisplaySchemaTag } from "../display-schema-tag/index.mjs";
-import { DisplayOutputsWrapper } from "./styles.mjs";
+import "./styles.css";
 function DisplayOutputs({ value, showIconInTree, displayFromScope }) {
     const scope = useCurrentScope();
     const refresh = useRefresh();
@@ -26,7 +26,8 @@ function DisplayOutputs({ value, showIconInTree, displayFromScope }) {
         return acm;
     }, {}) : value?.properties || {};
     const childEntries = Object.entries(properties || {});
-    return /*#__PURE__*/ jsx(DisplayOutputsWrapper, {
+    return /*#__PURE__*/ jsx("div", {
+        className: "gedit-m-display-outputs-wrapper",
         children: childEntries.map(([key, schema])=>/*#__PURE__*/ jsx(DisplaySchemaTag, {
                 title: key,
                 value: schema,

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

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

package/dist/esm/components/display-schema-tag/index.mjs

@@ -1,29 +1,32 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import react from "react";
-import { Popover } from "@douyinfe/semi-ui";
+import { Popover, Tag } from "@douyinfe/semi-ui";
 import { useTypeManager } from "../../plugins/index.mjs";
 import { DisplaySchemaTree } from "../display-schema-tree/index.mjs";
-import { PopoverContent, StyledTag, TitleSpan } from "./styles.mjs";
+import "./styles.css";
 function DisplaySchemaTag({ value = {}, showIconInTree, title, warning }) {
     const typeManager = useTypeManager();
     const icon = typeManager?.getDisplayIcon(value) || typeManager.getDisplayIcon({
         type: 'unknown'
     });
     return /*#__PURE__*/ jsx(Popover, {
-        content: /*#__PURE__*/ jsx(PopoverContent, {
+        content: /*#__PURE__*/ jsx("div", {
+            className: "gedit-m-display-schema-tag-popover-content",
             children: /*#__PURE__*/ jsx(DisplaySchemaTree, {
                 value: value,
                 typeManager: typeManager,
                 showIcon: showIconInTree
             })
         }),
-        children: /*#__PURE__*/ jsxs(StyledTag, {
+        children: /*#__PURE__*/ jsxs(Tag, {
             color: warning ? 'amber' : 'white',
+            className: "gedit-m-display-schema-tag-tag",
             children: [
                 icon && /*#__PURE__*/ react.cloneElement(icon, {
                     className: 'tag-icon'
                 }),
-                title && /*#__PURE__*/ jsx(TitleSpan, {
+                title && /*#__PURE__*/ jsx("span", {
+                    className: "gedit-m-display-schema-tag-title",
                     children: title
                 })
             ]

package/dist/esm/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/esm/components/display-schema-tree/index.mjs

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

package/dist/esm/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;
+  }
+}
+

package/dist/esm/components/dynamic-value-input/index.mjs

@@ -7,7 +7,7 @@ import { createInjectMaterial } from "../../shared/index.mjs";
 import { InjectVariableSelector } from "../variable-selector/index.mjs";
 import { TypeSelector } from "../type-selector/index.mjs";
 import { ConstantInput } from "../constant-input/index.mjs";
-import { UIContainer, UIMain, UITrigger, UIType } from "./styles.mjs";
+import "./styles.css";
 import { useIncludeSchema, useRefVariable, useSelectSchema } from "./hooks.mjs";
 const DEFAULT_VALUE = {
     type: 'constant',
@@ -117,16 +117,20 @@ function DynamicValueInput({ value, onChange, readonly, style, schema: schemaFro
                     })
                 })
         });
-    return /*#__PURE__*/ jsxs(UIContainer, {
+    return /*#__PURE__*/ jsxs("div", {
+        className: "gedit-m-dynamic-value-input-container",
         style: style,
         children: [
-            /*#__PURE__*/ jsx(UIType, {
+            /*#__PURE__*/ jsx("div", {
+                className: "gedit-m-dynamic-value-input-type",
                 children: renderTypeSelector()
             }),
-            /*#__PURE__*/ jsx(UIMain, {
+            /*#__PURE__*/ jsx("div", {
+                className: "gedit-m-dynamic-value-input-main",
                 children: renderMain()
             }),
-            /*#__PURE__*/ jsx(UITrigger, {
+            /*#__PURE__*/ jsx("div", {
+                className: "gedit-m-dynamic-value-input-trigger",
                 children: renderTrigger()
             })
         ]

package/dist/esm/components/dynamic-value-input/styles.css

@@ -0,0 +1,48 @@
+.gedit-m-dynamic-value-input-container {
+  border: 1px solid var(--semi-color-border);
+  background-color: var(--semi-color-fill-0);
+  border-radius: 4px;
+  align-items: center;
+  line-height: normal;
+  display: flex;
+  overflow: hidden;
+}
+
+.gedit-m-dynamic-value-input-main {
+  border-left: 1px solid var(--semi-color-border);
+  border-right: 1px solid var(--semi-color-border);
+  flex-grow: 1;
+  min-width: 0;
+  overflow: hidden;
+
+  & .semi-tree-select, & .semi-input-number, & .semi-select {
+    border: none;
+    border-radius: 0;
+    width: 100%;
+  }
+
+  & .semi-input-wrapper, & .semi-input-textarea-wrapper {
+    border: none;
+    border-radius: 0;
+  }
+
+  & .semi-input-textarea {
+    word-break: break-all;
+    border: none;
+    border-radius: 0;
+    padding: 2px 6px;
+  }
+}
+
+.gedit-m-dynamic-value-input-type {
+  & .semi-button {
+    border-radius: 0;
+  }
+}
+
+.gedit-m-dynamic-value-input-trigger {
+  & .semi-button {
+    border-radius: 0;
+  }
+}
+

package/dist/esm/components/inputs-values/index.mjs

@@ -6,7 +6,7 @@ import { IconDelete, IconPlus } from "@douyinfe/semi-icons";
 import { useObjectList } from "../../hooks/index.mjs";
 import { InjectDynamicValueInput } from "../dynamic-value-input/index.mjs";
 import { BlurInput } from "../blur-input/index.mjs";
-import { UIRow, UIRows } from "./styles.mjs";
+import "./styles.css";
 function InputsValues({ value, onChange, style, readonly, constantProps, schema, hasError }) {
     const { list, updateKey, updateValue, remove, add } = useObjectList({
         value,
@@ -15,9 +15,11 @@ function InputsValues({ value, onChange, style, readonly, constantProps, schema,
     });
     return /*#__PURE__*/ jsxs("div", {
         children: [
-            /*#__PURE__*/ jsx(UIRows, {
+            /*#__PURE__*/ jsx("div", {
+                className: "gedit-m-inputs-values-rows",
                 style: style,
-                children: list.map((item)=>/*#__PURE__*/ jsxs(UIRow, {
+                children: list.map((item)=>/*#__PURE__*/ jsxs("div", {
+                        className: "gedit-m-inputs-values-row",
                         children: [
                             /*#__PURE__*/ jsx(BlurInput, {
                                 style: {

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

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

package/dist/esm/components/inputs-values-tree/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/inputs-values-tree/index.mjs

@@ -5,7 +5,7 @@ import { Button } from "@douyinfe/semi-ui";
 import { IconPlus } from "@douyinfe/semi-icons";
 import { FlowValueUtils } from "../../shared/index.mjs";
 import { useObjectList } from "../../hooks/index.mjs";
-import { UITreeItems } from "./styles.mjs";
+import "./styles.css";
 import { InputValueRow } from "./row.mjs";
 function InputsValuesTree(props) {
     const { value, onChange, readonly, hasError, constantProps } = props;
@@ -16,7 +16,8 @@ function InputsValuesTree(props) {
     });
     return /*#__PURE__*/ jsxs("div", {
         children: [
-            /*#__PURE__*/ jsx(UITreeItems, {
+            /*#__PURE__*/ jsx("div", {
+                className: "gedit-m-inputs-values-tree-tree-items",
                 children: list.map((item)=>/*#__PURE__*/ jsx(InputValueRow, {
                         keyName: item.key,
                         value: item.value,