@flowgram.ai/form-materials 0.1.0-alpha.17 → 0.1.0-alpha.19

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;
+  }
+}
+

package/dist/cjs/components/dynamic-value-input/index.js

@@ -36,7 +36,7 @@ const index_js_namespaceObject = require("../../shared/index.js");
 const external_variable_selector_index_js_namespaceObject = require("../variable-selector/index.js");
 const external_type_selector_index_js_namespaceObject = require("../type-selector/index.js");
 const external_constant_input_index_js_namespaceObject = require("../constant-input/index.js");
-const external_styles_js_namespaceObject = require("./styles.js");
+require("./styles.css");
 const external_hooks_js_namespaceObject = require("./hooks.js");
 const DEFAULT_VALUE = {
     type: 'constant',
@@ -146,16 +146,20 @@ function DynamicValueInput({ value, onChange, readonly, style, schema: schemaFro
                     })
                 })
         });
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_styles_js_namespaceObject.UIContainer, {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: "gedit-m-dynamic-value-input-container",
         style: style,
         children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UIType, {
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "gedit-m-dynamic-value-input-type",
                 children: renderTypeSelector()
             }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UIMain, {
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "gedit-m-dynamic-value-input-main",
                 children: renderMain()
             }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UITrigger, {
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "gedit-m-dynamic-value-input-trigger",
                 children: renderTrigger()
             })
         ]

package/dist/{esm/components/dynamic-value-input/styles.mjs → cjs/components/dynamic-value-input/styles.css}

@@ -1,54 +1,48 @@
-import styled_components from "styled-components";
-const UIContainer = styled_components.div`
-  display: flex;
-  align-items: center;
-  border-radius: 4px;
+.gedit-m-dynamic-value-input-container {
   border: 1px solid var(--semi-color-border);
-
-  overflow: hidden;
-
   background-color: var(--semi-color-fill-0);
-`;
-const UIMain = styled_components.div`
-  flex-grow: 1;
+  border-radius: 4px;
+  align-items: center;
+  line-height: normal;
+  display: flex;
   overflow: hidden;
-  min-width: 0;
+}
+
+.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 {
-    width: 100%;
-    border: none;
-    border-radius: 0;
-  }
-
-  & .semi-input-wrapper {
+  & .semi-tree-select, & .semi-input-number, & .semi-select {
     border: none;
     border-radius: 0;
+    width: 100%;
   }
 
-  & .semi-input-textarea-wrapper {
+  & .semi-input-wrapper, & .semi-input-textarea-wrapper {
     border: none;
     border-radius: 0;
   }
 
   & .semi-input-textarea {
-    padding: 2px 6px;
+    word-break: break-all;
     border: none;
     border-radius: 0;
-    word-break: break-all;
+    padding: 2px 6px;
   }
-`;
-const UIType = styled_components.div`
+}
+
+.gedit-m-dynamic-value-input-type {
   & .semi-button {
     border-radius: 0;
   }
-`;
-const UITrigger = styled_components.div`
+}
+
+.gedit-m-dynamic-value-input-trigger {
   & .semi-button {
     border-radius: 0;
   }
-`;
-export { UIContainer, UIMain, UITrigger, UIType };
+}
+

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

@@ -34,7 +34,7 @@ const semi_icons_namespaceObject = require("@douyinfe/semi-icons");
 const index_js_namespaceObject = require("../../hooks/index.js");
 const external_dynamic_value_input_index_js_namespaceObject = require("../dynamic-value-input/index.js");
 const external_blur_input_index_js_namespaceObject = require("../blur-input/index.js");
-const external_styles_js_namespaceObject = require("./styles.js");
+require("./styles.css");
 function InputsValues({ value, onChange, style, readonly, constantProps, schema, hasError }) {
     const { list, updateKey, updateValue, remove, add } = (0, index_js_namespaceObject.useObjectList)({
         value,
@@ -43,9 +43,11 @@ function InputsValues({ value, onChange, style, readonly, constantProps, schema,
     });
     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-inputs-values-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-inputs-values-row",
                         children: [
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_blur_input_index_js_namespaceObject.BlurInput, {
                                 style: {

package/dist/cjs/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/cjs/components/inputs-values-tree/icon.js

@@ -0,0 +1,70 @@
+"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__, {
+    IconAddChildren: ()=>IconAddChildren
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+require("react");
+const semi_icons_namespaceObject = require("@douyinfe/semi-icons");
+var semi_icons_default = /*#__PURE__*/ __webpack_require__.n(semi_icons_namespaceObject);
+const iconAddChildrenSvg = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_icons_default(), {
+        size: "small",
+        svg: iconAddChildrenSvg
+    });
+exports.IconAddChildren = __webpack_exports__.IconAddChildren;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "IconAddChildren"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -33,18 +33,19 @@ const semi_ui_namespaceObject = require("@douyinfe/semi-ui");
 const semi_icons_namespaceObject = require("@douyinfe/semi-icons");
 const index_js_namespaceObject = require("../../shared/index.js");
 const external_hooks_index_js_namespaceObject = require("../../hooks/index.js");
-const external_styles_js_namespaceObject = require("./styles.js");
+require("./styles.css");
 const external_row_js_namespaceObject = require("./row.js");
 function InputsValuesTree(props) {
     const { value, onChange, readonly, hasError, constantProps } = props;
     const { list, updateKey, updateValue, remove, add } = (0, external_hooks_index_js_namespaceObject.useObjectList)({
         value,
-        onChange,
+        onChange: (v)=>onChange?.(v),
         sortIndexKey: (value)=>index_js_namespaceObject.FlowValueUtils.isFlowValue(value) ? 'extra.index' : ''
     });
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
         children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UITreeItems, {
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "gedit-m-inputs-values-tree-tree-items",
                 children: list.map((item)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_row_js_namespaceObject.InputValueRow, {
                         keyName: item.key,
                         value: item.value,

package/dist/cjs/components/inputs-values-tree/row.js

@@ -31,10 +31,11 @@ const external_react_namespaceObject = require("react");
 const editor_namespaceObject = require("@flowgram.ai/editor");
 const semi_ui_namespaceObject = require("@douyinfe/semi-ui");
 const semi_icons_namespaceObject = require("@douyinfe/semi-icons");
-const external_styles_js_namespaceObject = require("./styles.js");
+require("./styles.css");
 const use_child_list_js_namespaceObject = require("./hooks/use-child-list.js");
 const index_js_namespaceObject = require("../dynamic-value-input/index.js");
 const external_blur_input_index_js_namespaceObject = require("../blur-input/index.js");
+const external_icon_js_namespaceObject = require("./icon.js");
 const AddObjectChildStrategy = {
     hit: (schema)=>'object' === schema.type,
     Renderer: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.Input, {
@@ -70,11 +71,10 @@ function InputValueRow(props) {
     ]);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
         children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UITreeItemLeft, {
-                $isLast: $isLast,
-                $showLine: $level > 0,
-                $showCollapse: hasChildren,
-                children: hasChildren && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UICollapseTrigger, {
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: `gedit-m-inputs-values-tree-tree-item-left ${$level > 0 ? 'show-line' : ''} ${$isLast ? 'is-last' : ''} ${hasChildren ? 'show-collapse' : ''}`,
+                children: hasChildren && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                    className: "gedit-m-inputs-values-tree-collapse-trigger",
                     onClick: ()=>setCollapse((_collapse)=>!_collapse),
                     children: collapse ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_icons_namespaceObject.IconChevronDown, {
                         size: "small"
@@ -83,10 +83,13 @@ function InputValueRow(props) {
                     })
                 })
             }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_styles_js_namespaceObject.UITreeItemRight, {
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "gedit-m-inputs-values-tree-tree-item-right",
                 children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UITreeItemMain, {
-                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_styles_js_namespaceObject.UIRow, {
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        className: "gedit-m-inputs-values-tree-tree-item-main",
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                            className: "gedit-m-inputs-values-tree-row",
                             children: [
                                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_blur_input_index_js_namespaceObject.BlurInput, {
                                     style: {
@@ -113,13 +116,14 @@ function InputValueRow(props) {
                                         strategies
                                     }
                                 }),
-                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_styles_js_namespaceObject.UIActions, {
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                    className: "gedit-m-inputs-values-tree-actions",
                                     children: [
                                         canAddField && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.IconButton, {
                                             disabled: readonly,
                                             size: "small",
                                             theme: "borderless",
-                                            icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.IconAddChildren, {}),
+                                            icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_icon_js_namespaceObject.IconAddChildren, {}),
                                             onClick: ()=>{
                                                 add({
                                                     type: 'constant',
@@ -145,10 +149,10 @@ function InputValueRow(props) {
                             ]
                         })
                     }),
-                    hasChildren && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UICollapsible, {
-                        $collapse: collapse,
-                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UITreeItems, {
-                            $shrink: true,
+                    hasChildren && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        className: `gedit-m-inputs-values-tree-collapsible ${collapse ? 'collapse' : ''}`,
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                            className: "gedit-m-inputs-values-tree-tree-items shrink",
                             children: list.map((_item, index)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(InputValueRow, {
                                     readonly: readonly,
                                     hasError: hasError,

package/dist/cjs/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/cjs/components/json-schema-editor/default-value.js

@@ -30,10 +30,10 @@ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 require("react");
 const editor_namespaceObject = require("@flowgram.ai/editor");
 const index_js_namespaceObject = require("../constant-input/index.js");
-const external_styles_js_namespaceObject = require("./styles.js");
 function DefaultValue(props) {
     const { value, schema, onChange, placeholder } = props;
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.ConstantInputWrapper, {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: "gedit-m-json-schema-editor-constant-input-wrapper",
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_js_namespaceObject.ConstantInput, {
             value: value,
             onChange: (_v)=>onChange(_v),