@gravity-ui/dynamic-forms 5.29.2 → 5.30.0

package/build/cjs/lib/unstable/kit/components/EntityContainer/EntityContainer.d.ts

@@ -3,6 +3,7 @@ import { type FlexProps } from '@gravity-ui/uikit';
 export interface EntityContainerProps extends FlexProps {
     children: React.ReactNode;
     fill?: 'populated' | 'empty' | 'by-child';
+    ref?: React.ComponentPropsWithRef<'div'>['ref'];
     stretch: 'max' | 'fit' | 'by-child';
 }
 export declare const EntityContainer: React.FC<EntityContainerProps>;

package/build/cjs/lib/unstable/kit/entities/FewOfNested/FewOfNested.d.ts

@@ -3,5 +3,6 @@ export interface FewOfNestedProps {
     toggler: JsonSchema;
     withIndent?: boolean;
     togglerArrayRemoveButton?: boolean;
+    order?: string[];
 }
 export declare const FewOfNested: NodeEntity<JsonSchemaObject, FewOfNestedProps>;

package/build/cjs/lib/unstable/kit/entities/FewOfNested/FewOfNested.js

@@ -10,7 +10,7 @@ const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('few-of-nested');
 const FewOfNested = ({ Layout, headName, input, layoutProps, meta, mode, props, schema, schemaPath, }) => {
     const { name, value } = input;
-    const { togglerArrayRemoveButton = false, toggler: togglerSchema = {}, withIndent = false, } = props;
+    const { togglerArrayRemoveButton = false, toggler: togglerSchema = {}, withIndent = false, order, } = props;
     const overviewFlag = mode === core_1.SchemaRendererMode.Overview;
     const srState = (0, core_1.useSchemaRendererState)({
         headName,
@@ -20,8 +20,13 @@ const FewOfNested = ({ Layout, headName, input, layoutProps, meta, mode, props,
         if (value && Object.keys(value).length) {
             return Object.keys(value);
         }
-        if (!overviewFlag && schema.properties && Object.keys(schema.properties).length) {
-            return [Object.keys(schema.properties)[0]];
+        if (!overviewFlag) {
+            if ((order === null || order === void 0 ? void 0 : order[0]) !== undefined) {
+                return [order[0]];
+            }
+            if (schema.properties && Object.keys(schema.properties).length) {
+                return [Object.keys(schema.properties)[0]];
+            }
         }
         return [];
     });

package/build/cjs/lib/unstable/kit/entities/OneOfNested/OneOfNested.d.ts

@@ -7,5 +7,6 @@ export interface OneOfNestedProps {
     };
     withIndent?: boolean;
     togglerArrayRemoveButton?: boolean;
+    order?: string[];
 }
 export declare const OneOfNested: NodeEntity<JsonSchemaObject, OneOfNestedProps>;

package/build/cjs/lib/unstable/kit/entities/OneOfNested/OneOfNested.js

@@ -9,7 +9,7 @@ const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('one-of-nested');
 const OneOfNested = ({ Layout, headName, input, layoutProps, meta, mode, props, schema, schemaPath, }) => {
     const { name, value } = input;
-    const { booleanToKey, togglerArrayRemoveButton = false, toggler: togglerSchema = {}, withIndent = false, } = props;
+    const { booleanToKey, togglerArrayRemoveButton = false, toggler: togglerSchema = {}, withIndent = false, order, } = props;
     const overviewFlag = mode === core_1.SchemaRendererMode.Overview;
     const srState = (0, core_1.useSchemaRendererState)({
         headName,
@@ -19,8 +19,13 @@ const OneOfNested = ({ Layout, headName, input, layoutProps, meta, mode, props,
         if (value && Object.keys(value).length) {
             return Object.keys(value)[0];
         }
-        if (!overviewFlag && schema.properties) {
-            return Object.keys(schema.properties)[0];
+        if (!overviewFlag) {
+            if ((order === null || order === void 0 ? void 0 : order[0]) !== undefined) {
+                return order[0];
+            }
+            if (schema.properties) {
+                return Object.keys(schema.properties)[0];
+            }
         }
         return undefined;
     });

package/build/cjs/lib/unstable/kit/form-entities/SegmentedRadioGroupInput/SegmentedRadioGroupInput.css

@@ -1,11 +1,16 @@
+.sr-segmented-radio-group-input {
+  position: relative;
+}
 .sr-segmented-radio-group-input_error .g-segmented-radio-group .g-segmented-radio-group__option_checked:hover::after {
   border: 1px solid var(--g-color-text-danger);
 }
 .sr-segmented-radio-group-input_error .g-segmented-radio-group .g-segmented-radio-group__option_checked::after {
   border: 1px solid var(--g-color-text-danger);
 }
-.sr-segmented-radio-group-input_overflowed {
-  height: 0;
-  opacity: 0;
-  overflow: hidden;
+.sr-segmented-radio-group-input__checker {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: max-content;
+  visibility: hidden;
 }

package/build/cjs/lib/unstable/kit/form-entities/SegmentedRadioGroupInput/SegmentedRadioGroupInput.js

@@ -14,7 +14,8 @@ const SegmentedRadioGroupInput = (_a) => {
     const { name, onBlur, onChange, onFocus, value } = input;
     const { enumDescriptions, optionsDisabled } = props, restEntityProps = tslib_1.__rest(props, ["enumDescriptions", "optionsDisabled"]);
     const { disabled } = ((_b = schema.nodeParameters) === null || _b === void 0 ? void 0 : _b.flags) || {};
-    const ref = react_1.default.useRef(null);
+    const containerRef = react_1.default.useRef(null);
+    const controlRef = react_1.default.useRef(null);
     const [overflowed, setOverflowed] = react_1.default.useState(false);
     const options = react_1.default.useMemo(() => {
         var _a;
@@ -30,27 +31,25 @@ const SegmentedRadioGroupInput = (_a) => {
         onBlur();
     }, [onBlur, onChange, onFocus]);
     react_1.default.useLayoutEffect(() => {
-        const root = ref.current;
-        if (!root) {
+        const container = containerRef.current;
+        const control = controlRef.current;
+        if (!container || !control) {
             return;
         }
         const measure = () => {
-            const texts = root.querySelectorAll('.g-segmented-radio-group__option-text');
-            setOverflowed(Array.from(texts).some((node) => {
-                if (node.offsetWidth === 0 && node.scrollWidth === 0) {
-                    return false;
-                }
-                return node.scrollWidth > node.clientWidth;
-            }));
+            const GAP = 48; // little bit more than potential remove button width + spacing
+            const containerWidth = container.offsetWidth - GAP;
+            const controlWidth = control.offsetWidth;
+            setOverflowed(controlWidth > containerWidth);
         };
         measure();
         const observer = new ResizeObserver(measure);
-        observer.observe(root);
+        observer.observe(container);
         return () => observer.disconnect();
     }, [options]);
-    return (react_1.default.createElement(components_1.EntityContainer, { stretch: "max" },
-        overflowed ? (react_1.default.createElement(SelectInput_1.SelectInput, Object.assign({ input: input, meta: meta, props: props, schema: schema }, restProps))) : null,
-        react_1.default.createElement(components_1.EntityContainer, { stretch: "max", className: b({ error: (0, utils_1.getBooleanValidationState)(meta), overflowed }) },
-            react_1.default.createElement(uikit_1.SegmentedRadioGroup, Object.assign({ ref: ref, width: "max", disabled: disabled || schema.readOnly, options: options }, restEntityProps, { value: value, onFocus: onFocus, onBlur: onBlur, onUpdate: onUpdate, qa: name })))));
+    return (react_1.default.createElement(components_1.EntityContainer, { ref: containerRef, className: b({ error: (0, utils_1.getBooleanValidationState)(meta) }), stretch: "max" },
+        overflowed ? (react_1.default.createElement(SelectInput_1.SelectInput, Object.assign({ input: input, meta: meta, props: props, schema: schema }, restProps))) : (react_1.default.createElement(uikit_1.SegmentedRadioGroup, Object.assign({ width: "max", disabled: disabled || schema.readOnly, options: options }, restEntityProps, { value: value, onFocus: onFocus, onBlur: onBlur, onUpdate: onUpdate, qa: name }))),
+        react_1.default.createElement("div", { className: b('checker') },
+            react_1.default.createElement(uikit_1.SegmentedRadioGroup, Object.assign({ ref: controlRef, width: "max", disabled: disabled || schema.readOnly, options: options }, restEntityProps)))));
 };
 exports.SegmentedRadioGroupInput = SegmentedRadioGroupInput;

package/build/cjs/lib/unstable/kit/form-layouts/FormColumn/FormColumn.js

@@ -26,7 +26,7 @@ const FormColumn = ({ children, headName, input, meta, schema, props, }) => {
     return (react_1.default.createElement(components_1.LayoutContainer, { className: b(), gap: 2, hidden: hidden },
         react_1.default.createElement(uikit_1.Flex, { direction: "column", gap: 0.5 },
             react_1.default.createElement("div", { className: b('top') },
-                react_1.default.createElement(uikit_1.Text, { className: b('title', { required }), wordBreak: "break-word" }, schema.title),
+                react_1.default.createElement(uikit_1.Text, { className: b('title', { required }), variant: "subheader-1", color: "complementary", wordBreak: "break-word" }, schema.title),
                 tooltip,
                 react_1.default.createElement(components_1.ArrayRemoveButton, { name: input.name, headName: headName })),
             bottomDescription),

package/build/cjs/lib/unstable/kit/form-layouts/FormRow/FormRow.js

@@ -25,7 +25,7 @@ const FormRow = ({ children, headName, input, meta, schema, props, }) => {
     }, [headName, schema.description, props.descriptionType]);
     return (react_1.default.createElement(components_1.LayoutContainer, { className: b(), direction: "row", alignItems: "flex-start", gap: 2, hidden: hidden },
         react_1.default.createElement("div", { className: b('left') },
-            react_1.default.createElement(uikit_1.Text, { className: b('title', { required }), wordBreak: "break-word" }, schema.title),
+            react_1.default.createElement(uikit_1.Text, { className: b('title', { required }), variant: "subheader-1", color: "complementary", wordBreak: "break-word" }, schema.title),
             tooltip),
         react_1.default.createElement(uikit_1.Flex, { className: b('right'), direction: "column", gap: 0.5, grow: 1 },
             react_1.default.createElement(uikit_1.Flex, { grow: 1, gap: 2 },

package/build/cjs/lib/unstable/kit/layouts/Accordeon/Accordeon.js

@@ -14,7 +14,7 @@ const Accordeon = ({ children, headName, input, meta, mode, schema, props, }) =>
     const { titleProps, togglerProps, withIndent = false, withDefaultSummary = false } = props, restLayoutProps = tslib_1.__rest(props, ["titleProps", "togglerProps", "withIndent", "withDefaultSummary"]);
     const { copy, required, hidden, open } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
     const overviewFlag = mode === core_1.SchemaRendererMode.Overview;
-    const summary = react_1.default.useMemo(() => (react_1.default.createElement(uikit_1.Text, Object.assign({}, titleProps, { className: b('title', { required: required && !overviewFlag }, titleProps === null || titleProps === void 0 ? void 0 : titleProps.className) }), schema.title)), [overviewFlag, required, schema.title, titleProps]);
+    const summary = react_1.default.useMemo(() => (react_1.default.createElement(uikit_1.Text, Object.assign({ variant: "subheader-1", color: "complementary" }, titleProps, { className: b('title', { required: required && !overviewFlag }, titleProps === null || titleProps === void 0 ? void 0 : titleProps.className) }), schema.title)), [overviewFlag, required, schema.title, titleProps]);
     const helpMark = react_1.default.useMemo(() => {
         if (schema.description) {
             return (react_1.default.createElement(uikit_1.HelpMark, null,

package/build/cjs/lib/unstable/kit/layouts/Card/Card.js

@@ -37,7 +37,7 @@ const Card = ({ children, headName, input, meta, mode, schema, props, }) => {
                 react_1.default.createElement(uikit_1.Flex, { className: b('header'), direction: "column", justifyContent: "center" },
                     react_1.default.createElement(uikit_1.Flex, { justifyContent: "space-between", alignItems: "center" },
                         react_1.default.createElement(uikit_1.Flex, { alignItems: "center", gap: 2 },
-                            react_1.default.createElement(uikit_1.Text, { variant: "subheader-1", className: b('title', { required: required && !overviewFlag }) }, schema.title),
+                            react_1.default.createElement(uikit_1.Text, { variant: "subheader-1", color: "complementary", className: b('title', { required: required && !overviewFlag }) }, schema.title),
                             tooltip),
                         react_1.default.createElement(uikit_1.Flex, { className: b('header-actions'), alignItems: "center", gap: 2 },
                             overviewFlag ? (react_1.default.createElement(components_1.CopyButton, { className: b('copy-button'), copy: copy, value: input.value })) : null,

package/build/cjs/lib/unstable/kit/layouts/Section/Section.js

@@ -30,7 +30,7 @@ const Section = ({ children, headName, input, meta, mode, schema, props, }) => {
         react_1.default.createElement(uikit_1.Flex, { direction: "column", gap: 4 },
             react_1.default.createElement(uikit_1.Flex, { direction: "column" },
                 react_1.default.createElement(uikit_1.Flex, { className: b('header'), gap: 2, alignItems: "center" },
-                    react_1.default.createElement(uikit_1.Text, Object.assign({ variant: "subheader-1" }, restLayoutProps, { className: b('title', { required: required && !overviewFlag }, restLayoutProps === null || restLayoutProps === void 0 ? void 0 : restLayoutProps.className) }), schema.title),
+                    react_1.default.createElement(uikit_1.Text, Object.assign({ variant: "subheader-1", color: "complementary" }, restLayoutProps, { className: b('title', { required: required && !overviewFlag }, restLayoutProps === null || restLayoutProps === void 0 ? void 0 : restLayoutProps.className) }), schema.title),
                     tooltip,
                     overviewFlag ? (react_1.default.createElement(components_1.CopyButton, { className: b('copy-button'), copy: copy, value: input.value })) : null,
                     overviewFlag ? null : (react_1.default.createElement(components_1.ArrayRemoveButton, { name: input.name, headName: headName }))),

package/build/esm/lib/unstable/kit/components/EntityContainer/EntityContainer.d.ts

@@ -4,6 +4,7 @@ import './EntityContainer.css';
 export interface EntityContainerProps extends FlexProps {
     children: React.ReactNode;
     fill?: 'populated' | 'empty' | 'by-child';
+    ref?: React.ComponentPropsWithRef<'div'>['ref'];
     stretch: 'max' | 'fit' | 'by-child';
 }
 export declare const EntityContainer: React.FC<EntityContainerProps>;

package/build/esm/lib/unstable/kit/entities/FewOfNested/FewOfNested.d.ts

@@ -4,5 +4,6 @@ export interface FewOfNestedProps {
     toggler: JsonSchema;
     withIndent?: boolean;
     togglerArrayRemoveButton?: boolean;
+    order?: string[];
 }
 export declare const FewOfNested: NodeEntity<JsonSchemaObject, FewOfNestedProps>;

package/build/esm/lib/unstable/kit/entities/FewOfNested/FewOfNested.js

@@ -7,7 +7,7 @@ import './FewOfNested.css';
 const b = block('few-of-nested');
 export const FewOfNested = ({ Layout, headName, input, layoutProps, meta, mode, props, schema, schemaPath, }) => {
     const { name, value } = input;
-    const { togglerArrayRemoveButton = false, toggler: togglerSchema = {}, withIndent = false, } = props;
+    const { togglerArrayRemoveButton = false, toggler: togglerSchema = {}, withIndent = false, order, } = props;
     const overviewFlag = mode === SchemaRendererMode.Overview;
     const srState = useSchemaRendererState({
         headName,
@@ -17,8 +17,13 @@ export const FewOfNested = ({ Layout, headName, input, layoutProps, meta, mode,
         if (value && Object.keys(value).length) {
             return Object.keys(value);
         }
-        if (!overviewFlag && schema.properties && Object.keys(schema.properties).length) {
-            return [Object.keys(schema.properties)[0]];
+        if (!overviewFlag) {
+            if ((order === null || order === void 0 ? void 0 : order[0]) !== undefined) {
+                return [order[0]];
+            }
+            if (schema.properties && Object.keys(schema.properties).length) {
+                return [Object.keys(schema.properties)[0]];
+            }
         }
         return [];
     });

package/build/esm/lib/unstable/kit/entities/OneOfNested/OneOfNested.d.ts

@@ -8,5 +8,6 @@ export interface OneOfNestedProps {
     };
     withIndent?: boolean;
     togglerArrayRemoveButton?: boolean;
+    order?: string[];
 }
 export declare const OneOfNested: NodeEntity<JsonSchemaObject, OneOfNestedProps>;

package/build/esm/lib/unstable/kit/entities/OneOfNested/OneOfNested.js

@@ -6,7 +6,7 @@ import './OneOfNested.css';
 const b = block('one-of-nested');
 export const OneOfNested = ({ Layout, headName, input, layoutProps, meta, mode, props, schema, schemaPath, }) => {
     const { name, value } = input;
-    const { booleanToKey, togglerArrayRemoveButton = false, toggler: togglerSchema = {}, withIndent = false, } = props;
+    const { booleanToKey, togglerArrayRemoveButton = false, toggler: togglerSchema = {}, withIndent = false, order, } = props;
     const overviewFlag = mode === SchemaRendererMode.Overview;
     const srState = useSchemaRendererState({
         headName,
@@ -16,8 +16,13 @@ export const OneOfNested = ({ Layout, headName, input, layoutProps, meta, mode,
         if (value && Object.keys(value).length) {
             return Object.keys(value)[0];
         }
-        if (!overviewFlag && schema.properties) {
-            return Object.keys(schema.properties)[0];
+        if (!overviewFlag) {
+            if ((order === null || order === void 0 ? void 0 : order[0]) !== undefined) {
+                return order[0];
+            }
+            if (schema.properties) {
+                return Object.keys(schema.properties)[0];
+            }
         }
         return undefined;
     });

package/build/esm/lib/unstable/kit/form-entities/SegmentedRadioGroupInput/SegmentedRadioGroupInput.css

@@ -1,11 +1,16 @@
+.sr-segmented-radio-group-input {
+  position: relative;
+}
 .sr-segmented-radio-group-input_error .g-segmented-radio-group .g-segmented-radio-group__option_checked:hover::after {
   border: 1px solid var(--g-color-text-danger);
 }
 .sr-segmented-radio-group-input_error .g-segmented-radio-group .g-segmented-radio-group__option_checked::after {
   border: 1px solid var(--g-color-text-danger);
 }
-.sr-segmented-radio-group-input_overflowed {
-  height: 0;
-  opacity: 0;
-  overflow: hidden;
+.sr-segmented-radio-group-input__checker {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: max-content;
+  visibility: hidden;
 }

package/build/esm/lib/unstable/kit/form-entities/SegmentedRadioGroupInput/SegmentedRadioGroupInput.js

@@ -12,7 +12,8 @@ export const SegmentedRadioGroupInput = (_a) => {
     const { name, onBlur, onChange, onFocus, value } = input;
     const { enumDescriptions, optionsDisabled } = props, restEntityProps = __rest(props, ["enumDescriptions", "optionsDisabled"]);
     const { disabled } = ((_b = schema.nodeParameters) === null || _b === void 0 ? void 0 : _b.flags) || {};
-    const ref = React.useRef(null);
+    const containerRef = React.useRef(null);
+    const controlRef = React.useRef(null);
     const [overflowed, setOverflowed] = React.useState(false);
     const options = React.useMemo(() => {
         var _a;
@@ -28,26 +29,24 @@ export const SegmentedRadioGroupInput = (_a) => {
         onBlur();
     }, [onBlur, onChange, onFocus]);
     React.useLayoutEffect(() => {
-        const root = ref.current;
-        if (!root) {
+        const container = containerRef.current;
+        const control = controlRef.current;
+        if (!container || !control) {
             return;
         }
         const measure = () => {
-            const texts = root.querySelectorAll('.g-segmented-radio-group__option-text');
-            setOverflowed(Array.from(texts).some((node) => {
-                if (node.offsetWidth === 0 && node.scrollWidth === 0) {
-                    return false;
-                }
-                return node.scrollWidth > node.clientWidth;
-            }));
+            const GAP = 48; // little bit more than potential remove button width + spacing
+            const containerWidth = container.offsetWidth - GAP;
+            const controlWidth = control.offsetWidth;
+            setOverflowed(controlWidth > containerWidth);
         };
         measure();
         const observer = new ResizeObserver(measure);
-        observer.observe(root);
+        observer.observe(container);
         return () => observer.disconnect();
     }, [options]);
-    return (React.createElement(EntityContainer, { stretch: "max" },
-        overflowed ? (React.createElement(SelectInput, Object.assign({ input: input, meta: meta, props: props, schema: schema }, restProps))) : null,
-        React.createElement(EntityContainer, { stretch: "max", className: b({ error: getBooleanValidationState(meta), overflowed }) },
-            React.createElement(SegmentedRadioGroup, Object.assign({ ref: ref, width: "max", disabled: disabled || schema.readOnly, options: options }, restEntityProps, { value: value, onFocus: onFocus, onBlur: onBlur, onUpdate: onUpdate, qa: name })))));
+    return (React.createElement(EntityContainer, { ref: containerRef, className: b({ error: getBooleanValidationState(meta) }), stretch: "max" },
+        overflowed ? (React.createElement(SelectInput, Object.assign({ input: input, meta: meta, props: props, schema: schema }, restProps))) : (React.createElement(SegmentedRadioGroup, Object.assign({ width: "max", disabled: disabled || schema.readOnly, options: options }, restEntityProps, { value: value, onFocus: onFocus, onBlur: onBlur, onUpdate: onUpdate, qa: name }))),
+        React.createElement("div", { className: b('checker') },
+            React.createElement(SegmentedRadioGroup, Object.assign({ ref: controlRef, width: "max", disabled: disabled || schema.readOnly, options: options }, restEntityProps)))));
 };

package/build/esm/lib/unstable/kit/form-layouts/FormColumn/FormColumn.js

@@ -23,7 +23,7 @@ export const FormColumn = ({ children, headName, input, meta, schema, props, })
     return (React.createElement(LayoutContainer, { className: b(), gap: 2, hidden: hidden },
         React.createElement(Flex, { direction: "column", gap: 0.5 },
             React.createElement("div", { className: b('top') },
-                React.createElement(Text, { className: b('title', { required }), wordBreak: "break-word" }, schema.title),
+                React.createElement(Text, { className: b('title', { required }), variant: "subheader-1", color: "complementary", wordBreak: "break-word" }, schema.title),
                 tooltip,
                 React.createElement(ArrayRemoveButton, { name: input.name, headName: headName })),
             bottomDescription),

package/build/esm/lib/unstable/kit/form-layouts/FormRow/FormRow.js

@@ -22,7 +22,7 @@ export const FormRow = ({ children, headName, input, meta, schema, props, }) =>
     }, [headName, schema.description, props.descriptionType]);
     return (React.createElement(LayoutContainer, { className: b(), direction: "row", alignItems: "flex-start", gap: 2, hidden: hidden },
         React.createElement("div", { className: b('left') },
-            React.createElement(Text, { className: b('title', { required }), wordBreak: "break-word" }, schema.title),
+            React.createElement(Text, { className: b('title', { required }), variant: "subheader-1", color: "complementary", wordBreak: "break-word" }, schema.title),
             tooltip),
         React.createElement(Flex, { className: b('right'), direction: "column", gap: 0.5, grow: 1 },
             React.createElement(Flex, { grow: 1, gap: 2 },

package/build/esm/lib/unstable/kit/layouts/Accordeon/Accordeon.js

@@ -12,7 +12,7 @@ export const Accordeon = ({ children, headName, input, meta, mode, schema, props
     const { titleProps, togglerProps, withIndent = false, withDefaultSummary = false } = props, restLayoutProps = __rest(props, ["titleProps", "togglerProps", "withIndent", "withDefaultSummary"]);
     const { copy, required, hidden, open } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
     const overviewFlag = mode === SchemaRendererMode.Overview;
-    const summary = React.useMemo(() => (React.createElement(Text, Object.assign({}, titleProps, { className: b('title', { required: required && !overviewFlag }, titleProps === null || titleProps === void 0 ? void 0 : titleProps.className) }), schema.title)), [overviewFlag, required, schema.title, titleProps]);
+    const summary = React.useMemo(() => (React.createElement(Text, Object.assign({ variant: "subheader-1", color: "complementary" }, titleProps, { className: b('title', { required: required && !overviewFlag }, titleProps === null || titleProps === void 0 ? void 0 : titleProps.className) }), schema.title)), [overviewFlag, required, schema.title, titleProps]);
     const helpMark = React.useMemo(() => {
         if (schema.description) {
             return (React.createElement(HelpMark, null,

package/build/esm/lib/unstable/kit/layouts/Card/Card.js

@@ -35,7 +35,7 @@ export const Card = ({ children, headName, input, meta, mode, schema, props, })
                 React.createElement(Flex, { className: b('header'), direction: "column", justifyContent: "center" },
                     React.createElement(Flex, { justifyContent: "space-between", alignItems: "center" },
                         React.createElement(Flex, { alignItems: "center", gap: 2 },
-                            React.createElement(Text, { variant: "subheader-1", className: b('title', { required: required && !overviewFlag }) }, schema.title),
+                            React.createElement(Text, { variant: "subheader-1", color: "complementary", className: b('title', { required: required && !overviewFlag }) }, schema.title),
                             tooltip),
                         React.createElement(Flex, { className: b('header-actions'), alignItems: "center", gap: 2 },
                             overviewFlag ? (React.createElement(CopyButton, { className: b('copy-button'), copy: copy, value: input.value })) : null,

package/build/esm/lib/unstable/kit/layouts/Section/Section.js

@@ -28,7 +28,7 @@ export const Section = ({ children, headName, input, meta, mode, schema, props,
         React.createElement(Flex, { direction: "column", gap: 4 },
             React.createElement(Flex, { direction: "column" },
                 React.createElement(Flex, { className: b('header'), gap: 2, alignItems: "center" },
-                    React.createElement(Text, Object.assign({ variant: "subheader-1" }, restLayoutProps, { className: b('title', { required: required && !overviewFlag }, restLayoutProps === null || restLayoutProps === void 0 ? void 0 : restLayoutProps.className) }), schema.title),
+                    React.createElement(Text, Object.assign({ variant: "subheader-1", color: "complementary" }, restLayoutProps, { className: b('title', { required: required && !overviewFlag }, restLayoutProps === null || restLayoutProps === void 0 ? void 0 : restLayoutProps.className) }), schema.title),
                     tooltip,
                     overviewFlag ? (React.createElement(CopyButton, { className: b('copy-button'), copy: copy, value: input.value })) : null,
                     overviewFlag ? null : (React.createElement(ArrayRemoveButton, { name: input.name, headName: headName }))),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/dynamic-forms",
-  "version": "5.29.2",
+  "version": "5.30.0",
   "description": "",
   "license": "MIT",
   "main": "build/cjs/index.js",