@gravity-ui/dynamic-forms 5.0.0 → 5.1.0

package/build/cjs/lib/core/components/Form/hooks/useSearch/useSearch.css

@@ -18,7 +18,7 @@
 */
 /* Border-radius */
 .df-use-search {
-  margin-bottom: var(--df-spacing-inputs, 15px);
+  margin-bottom: var(--df-spacing-inputs, var(--g-spacing-4));
 }
 .df-use-search_hidden {
   display: none;

package/build/cjs/lib/kit/components/AccordeonCard/AccordeonCard.css

@@ -88,7 +88,7 @@
   order: 1;
 }
 .df-accordeon-card__interal-actions {
-  margin-right: var(--df-accordeon-card-interal-actions-margin-right, 5px);
+  margin-right: var(--df-accordeon-card-interal-actions-margin-right, var(--g-spacing-1));
 }
 .df-accordeon-card__toggle-icon_open {
   transform: rotate(180deg);

package/build/cjs/lib/kit/components/Card/Card.css

@@ -64,7 +64,7 @@
   align-items: center;
 }
 .df-card__header-right > * {
-  margin-left: var(--df-card-header-right-child-margin-left, 10px);
+  margin-left: var(--df-card-header-right-child-margin-left, var(--g-spacing-2));
 }
 .df-card__title {
   max-width: var(--df-card-title-max-width, 533px);
@@ -76,7 +76,7 @@
   max-width: 300px;
 }
 .df-card__note {
-  margin-left: var(--df-card-note-margin-left, 5px);
+  margin-left: var(--df-card-note-margin-left, var(--g-spacing-1));
 }
 .df-card__note .gc-help-popover {
   display: flex;

package/build/cjs/lib/kit/components/CopyButton/CopyButton.css

@@ -21,7 +21,7 @@
   width: 20px;
   display: none;
   position: relative;
-  margin: -1px 0 0 5px;
+  margin: var(--df-copy-button-margin, var(--g-spacing-0) var(--g-spacing-0) var(--g-spacing-0) var(--g-spacing-1));
 }
 .df-copy-button__button {
   position: absolute;

package/build/cjs/lib/kit/components/GroupIndent/GroupIndent.css

@@ -18,8 +18,8 @@
 */
 /* Border-radius */
 .df-group-indent {
-  padding: var(--df-group-indent-padding, 11px var(--g-spacing-0) var(--g-spacing-0) var(--g-spacing-5));
-  margin: var(--df-group-indent-margin, -11px var(--g-spacing-0) var(--g-spacing-0) 5px);
+  padding: var(--df-group-indent-padding, var(--g-spacing-3) var(--g-spacing-0) var(--g-spacing-0) var(--g-spacing-5));
+  margin: var(--df-group-indent-margin, calc(-1 * var(--g-spacing-3)) var(--g-spacing-0) var(--g-spacing-0) var(--g-spacing-1));
   border-left: 1px solid var(--g-color-line-generic-accent);
 }
 .df-group-indent:last-child {
@@ -29,5 +29,5 @@
   display: none;
 }
 .df-group-indent > .df-simple-vertical-accordeon_view {
-  margin-top: var(--df-group-indent-simple-vertical-accordeon-view-margin-top, -10px);
+  margin-top: var(--df-group-indent-simple-vertical-accordeon-view-margin-top, calc(-1 * var(--g-spacing-3)));
 }

package/build/cjs/lib/kit/components/Inputs/ArrayBase/ArrayBase.css

@@ -25,7 +25,7 @@
   align-items: flex-end;
 }
 .df-array-base__items-wrapper_add-button-down {
-  margin-bottom: var(--df-spacing-inputs, 15px);
+  margin-bottom: var(--df-spacing-inputs, var(--g-spacing-4));
 }
 .df-array-base__items-wrapper_items-primitive {
   min-width: var(--df-array-base-items-primitive-min-width, 100%);
@@ -34,7 +34,7 @@
   min-width: unset;
 }
 .df-array-base__item-prefix {
-  margin: var(--df-array-base-item-prefix-margin, -7px var(--g-spacing-0) var(--g-spacing-2));
+  margin: var(--df-array-base-item-prefix-margin, calc(-1 * var(--g-spacing-2)) var(--g-spacing-0) var(--g-spacing-2));
 }
 .df-array-base__add-button_right {
   margin-left: var(--df-array-base-add-button-right-margin-left, var(--g-spacing-1));

package/build/cjs/lib/kit/components/Inputs/CheckboxGroup/CheckboxGroup.css

@@ -23,10 +23,10 @@
   height: var(--df-checkbox-height, 28px);
 }
 .df-checkbox-group .g-control-label__text {
-  margin-inline-start: var(--df-checkbox-margint-start, 5px);
+  margin-inline-start: var(--df-checkbox-margint-start, var(--g-spacing-1));
 }
 .df-checkbox-group > *:not(:last-child) {
-  margin-right: var(--df-checkbox-group-child-margin-right, 6px);
+  margin-right: var(--df-checkbox-group-child-margin-right, var(--g-spacing-3));
 }
 .df-checkbox-group_vertical {
   flex-direction: column;
@@ -35,5 +35,5 @@
   height: auto;
 }
 .df-checkbox-group_vertical > *:not(:last-child) {
-  margin: var(--df-checkbox-group-vertical-child-margin, var(--g-spacing-0) var(--g-spacing-0) 6px);
+  margin: var(--df-checkbox-group-vertical-child-margin, var(--g-spacing-0) var(--g-spacing-0) var(--g-spacing-2));
 }

package/build/cjs/lib/kit/components/Inputs/FileInput/FileInput.css

@@ -25,6 +25,6 @@
 }
 .df-file-input__file-name {
   display: block;
-  margin: var(--df-file-input-file-name-margin, auto 10px);
+  margin: var(--df-file-input-file-name-margin, auto var(--g-spacing-2));
   max-width: var(--df-file-input-file-name-max-width, 160px);
 }

package/build/cjs/lib/kit/components/Inputs/MonacoInput/MonacoHeader.css

@@ -21,7 +21,7 @@
   height: var(--df-monaco-header-height, 52px);
   display: flex;
   justify-content: space-between;
-  padding: var(--df-monaco-header-padding, 15px);
+  padding: var(--df-monaco-header-padding, var(--g-spacing-4));
   align-items: center;
   background-color: var(--g-color-base-float-hover);
 }

package/build/cjs/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.css

@@ -18,7 +18,7 @@
 */
 /* Border-radius */
 .df-monaco-input-dialog .g-dialog-footer {
-  padding: var(--df-monaco-input-dialog-dialog-footer-padding, 6px var(--g-spacing-8) var(--g-spacing-8));
+  padding: var(--df-monaco-input-dialog-dialog-footer-padding, var(--g-spacing-2) var(--g-spacing-8) var(--g-spacing-8));
 }
 .df-monaco-input-dialog__container {
   border: 1px solid var(--g-color-line-generic);

package/build/cjs/lib/kit/components/Inputs/MultiOneOf/MultiOneOf.css

@@ -26,7 +26,7 @@
   padding: var(--df-multi-oneof-content-flat-padding, var(--g-spacing-0));
 }
 .df-multi-oneof__content_flat > .df-group-indent > .df-use-search {
-  margin-top: var(--df-spacing-inputs, 15px);
+  margin-top: var(--df-spacing-inputs, var(--g-spacing-4));
 }
 .df-multi-oneof__content_flat > .df-group-indent > .df-use-search:empty {
   display: none;

package/build/cjs/lib/kit/components/Inputs/NumberWithScale/NumberWithScale.css

@@ -22,5 +22,5 @@
 }
 .df-number-with-scale__select {
   max-width: var(--df-number-with-scale-select-max-width, 102px);
-  margin-left: var(--df-number-with-scale-select-margin-left, 5px);
+  margin-left: var(--df-number-with-scale-select-margin-left, var(--g-spacing-1));
 }

package/build/cjs/lib/kit/components/Inputs/OneOf/OneOf.css

@@ -28,8 +28,8 @@
   all: unset;
 }
 .df-oneof_base > .df-group-indent > .df-use-search {
-  padding: var(--df-oneof-base-padding, 11px var(--g-spacing-0) var(--g-spacing-0) var(--g-spacing-5));
-  margin: var(--df-oneof-base-margin, var(--g-spacing-1) var(--g-spacing-0) var(--g-spacing-5) 5px);
+  padding: var(--df-oneof-base-padding, var(--g-spacing-3) var(--g-spacing-0) var(--g-spacing-0) var(--g-spacing-5));
+  margin: var(--df-oneof-base-margin, var(--g-spacing-1) var(--g-spacing-0) var(--g-spacing-5) var(--g-spacing-1));
   border-left: 1px solid var(--g-color-line-generic-accent);
 }
 .df-oneof_base > .df-group-indent > .df-use-search:empty {
@@ -39,7 +39,7 @@
   margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
 }
 .df-oneof_base > .df-group-indent > .df-use-search > .df-simple-vertical-accordeon_view {
-  margin-top: var(--df-oneof-base-simple-vertical-accordeon-margin-top, -10px);
+  margin-top: var(--df-oneof-base-simple-vertical-accordeon-margin-top, calc(-1 * var(--g-spacing-3)));
 }
 .df-oneof_flat > .df-group-indent {
   margin: var(--df-oneof-flat-margin, var(--g-spacing-0));
@@ -47,7 +47,7 @@
   padding: var(--df-oneof-flat-padding, var(--g-spacing-0));
 }
 .df-oneof_flat > .df-group-indent > .df-use-search {
-  margin-top: var(--df-spacing-inputs, 15px);
+  margin-top: var(--df-spacing-inputs, var(--g-spacing-4));
 }
 .df-oneof_flat > .df-group-indent > .df-use-search:empty {
   display: none;

package/build/cjs/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.css

@@ -18,7 +18,7 @@
 */
 /* Border-radius */
 .df-table-array__table {
-  margin-bottom: var(--df-table-array-table-margin-bottom, 10px);
+  margin-bottom: var(--df-table-array-table-margin-bottom, var(--g-spacing-2));
 }
 .df-table-array__table .g-table__cell {
   border-bottom: 0px transparent;
@@ -40,7 +40,7 @@
   min-width: var(--df-table-array-cell-min-width, 150px);
 }
 .df-table-array__cell_arr, .df-table-array__cell_obj {
-  padding-left: var(--df-table-array-cell-obj-padding-left, 3px);
+  padding-left: var(--df-table-array-cell-obj-padding-left, var(--g-spacing-half));
 }
 .df-table-array__cell_arr .yc-text-input,
 .df-table-array__cell_arr .g-text-input,

package/build/cjs/lib/kit/components/Layouts/Column/Column.css

@@ -18,7 +18,7 @@
 */
 /* Border-radius */
 .df-column {
-  margin-bottom: var(--df-spacing-inputs, 15px);
+  margin-bottom: var(--df-spacing-inputs, var(--g-spacing-4));
 }
 .df-column:last-child {
   margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
@@ -42,7 +42,7 @@
 }
 .df-column__title {
   word-break: break-word;
-  margin-right: var(--df-column-title-margin-right, 3px);
+  margin-right: var(--df-column-title-margin-right, var(--g-spacing-half));
 }
 .df-column__title_required::after {
   content: "*";
@@ -53,7 +53,7 @@
 }
 .df-column__note-inner {
   position: absolute;
-  margin-top: var(--df-column-note-inner-margin-top, 1px);
+  margin-top: var(--df-column-note-inner-margin-top, var(--g-spacing-0));
 }
 .df-column__note-inner .g-help-popover {
   display: flex;
@@ -71,7 +71,7 @@
   justify-content: space-around;
 }
 .df-column__remove-button {
-  margin-left: var(--df-remove-button-margin-left, 5px);
+  margin-left: var(--df-remove-button-margin-left, var(--g-spacing-1));
 }
 .df-column__required-mark {
   color: var(--g-color-text-danger);

package/build/cjs/lib/kit/components/Layouts/Row/Row.css

@@ -21,7 +21,7 @@
   display: flex;
   width: var(--df-row-width, 500px);
   max-width: var(--df-row-max-width, 500px);
-  margin-bottom: var(--df-spacing-inputs, 15px);
+  margin-bottom: var(--df-spacing-inputs, var(--g-spacing-4));
 }
 .df-row:last-child {
   margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
@@ -46,7 +46,7 @@
 }
 .df-row__title {
   word-break: break-word;
-  margin-right: var(--df-row-title-margin-right, 3px);
+  margin-right: var(--df-row-title-margin-right, var(--g-spacing-half));
 }
 .df-row__title_required::after {
   content: "*";
@@ -58,7 +58,7 @@
 }
 .df-row__note-inner {
   position: absolute;
-  margin-top: var(--df-row-note-inner-margin-top, 1px);
+  margin-top: var(--df-row-note-inner-margin-top, var(--g-spacing-0));
 }
 .df-row__note-inner .g-help-popover {
   display: flex;
@@ -70,19 +70,19 @@
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  margin-left: var(--df-row-right-margin-left, 15px);
+  margin-left: var(--df-row-right-margin-left, var(--g-spacing-4));
 }
 .df-row__right-inner {
   display: flex;
   justify-content: space-around;
 }
 .df-row__description {
-  margin-top: var(--df-row-description-margin-top, 10px);
+  margin-top: var(--df-row-description-margin-top, var(--g-spacing-2));
   color: var(--g-color-text-secondary);
   word-break: break-word;
 }
 .df-row__remove-button {
-  margin-left: var(--df-remove-button-margin-left, 5px);
+  margin-left: var(--df-remove-button-margin-left, var(--g-spacing-1));
 }
 .df-row__required-mark {
   color: var(--g-color-text-danger);

package/build/cjs/lib/kit/components/Layouts/Section/Section.css

@@ -43,7 +43,7 @@
   max-width: 300px;
 }
 .df-section__note {
-  margin-left: var(--df-section-note-margin-left, 5px);
+  margin-left: var(--df-section-note-margin-left, var(--g-spacing-1));
 }
 .df-section__note .g-help-popover {
   display: flex;
@@ -55,5 +55,5 @@
   margin-top: var(--df-section-description-margin-top, var(--g-spacing-1));
 }
 .df-section__remove-button {
-  margin-left: var(--df-remove-button-margin-left, 5px);
+  margin-left: var(--df-remove-button-margin-left, var(--g-spacing-1));
 }

package/build/cjs/lib/kit/components/Layouts/Transparent/Transparent.css

@@ -19,7 +19,7 @@
 /* Border-radius */
 .df-transparent {
   display: flex;
-  margin-bottom: var(--df-spacing-inputs, 15px);
+  margin-bottom: var(--df-spacing-inputs, var(--g-spacing-4));
 }
 .df-transparent:last-child {
   margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
@@ -34,5 +34,5 @@
   width: auto;
 }
 .df-transparent__remove-button {
-  margin-left: var(--df-remove-button-margin-left, 5px);
+  margin-left: var(--df-remove-button-margin-left, var(--g-spacing-1));
 }

package/build/cjs/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.css

@@ -25,7 +25,7 @@
 }
 .df-simple-vertical-accordeon_branch .df-simple-vertical-accordeon__body {
   padding-left: var(--df-simple-vertical-accordeon-body-padding-left, var(--g-spacing-5));
-  margin-left: var(--df-simple-vertical-accordeon-body-margin-left, 5px);
+  margin-left: var(--df-simple-vertical-accordeon-body-margin-left, var(--g-spacing-1));
   border-left: 1px solid var(--g-color-line-generic-accent);
 }
 .df-simple-vertical-accordeon__header {
@@ -33,14 +33,14 @@
   align-items: center;
 }
 .df-simple-vertical-accordeon__header-inner {
-  margin-left: var(--df-simple-vertical-accordeon-header-inner-margin-left, -13px);
+  margin-left: var(--df-simple-vertical-accordeon-header-inner-margin-left, calc(-1 * var(--g-spacing-3)));
   max-width: var(--df-simple-vertical-accordeon-header-inner-max-width, 533px);
 }
 .df-simple-vertical-accordeon__header .g-popover__handler {
   display: flex;
 }
 .df-simple-vertical-accordeon__tooltip {
-  margin: var(--df-simple-vertical-accordeon-tooltip-margin, var(--g-spacing-0) 5px);
+  margin: var(--df-simple-vertical-accordeon-tooltip-margin, var(--g-spacing-0) var(--g-spacing-1));
 }
 .df-simple-vertical-accordeon__popover {
   padding: var(--g-spacing-2);
@@ -53,7 +53,7 @@
 }
 .df-simple-vertical-accordeon__body {
   margin-top: var(--df-simple-vertical-accordeon-body-margin-top, var(--g-spacing-1));
-  padding-top: var(--df-simple-vertical-accordeon-body-padding-top, 6px);
+  padding-top: var(--df-simple-vertical-accordeon-body-padding-top, var(--g-spacing-1));
 }
 .df-simple-vertical-accordeon__body_hidden {
   display: none;

package/build/cjs/lib/kit/components/TogglerCard/TogglerCard.css

@@ -19,7 +19,7 @@
 /* Border-radius */
 .df-toggler-card {
   width: var(--df-toggler-card-width, 254px);
-  padding: var(--df-toggler-card-padding, 6px);
+  padding: var(--df-toggler-card-padding, var(--g-spacing-2));
   height: var(--df-toggler-card-height, 88px);
 }
 .df-toggler-card__header {
@@ -28,7 +28,7 @@
   align-items: baseline;
 }
 .df-toggler-card__text {
-  margin: var(--df-toggler-card-text-margin, var(--g-spacing-3) 15px var(--g-spacing-0) var(--g-spacing-0));
+  margin: var(--df-toggler-card-text-margin, var(--g-spacing-3) var(--g-spacing-4) var(--g-spacing-0) var(--g-spacing-0));
   display: block;
   height: var(--df-toggler-card-text-height, 36px);
   overflow: hidden;

package/build/cjs/lib/kit/components/ViewLayouts/ViewColumn/ViewColumn.css

@@ -50,7 +50,7 @@
   margin-inline-start: var(--df-view-column-note-margin-inline-start, var(--g-spacing-half));
 }
 .df-view-column__second-row > .df-view-transparent {
-  margin-bottom: var(--df-view-column-second-row-child-view-transperant-margin-bottom, 6px);
+  margin-bottom: var(--df-view-column-second-row-child-view-transperant-margin-bottom, var(--g-spacing-2));
 }
 .df-view-column__second-row > .df-view-transparent:last-child {
   margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));

package/build/cjs/lib/kit/components/ViewLayouts/ViewRow/ViewRow.css

@@ -68,7 +68,7 @@
   text-overflow: ellipsis;
 }
 .df-view-row__right > .df-view-transparent {
-  margin-bottom: var(--df-view-row-right-child-view-transparent-margin-bottom, 6px);
+  margin-bottom: var(--df-view-row-right-child-view-transparent-margin-bottom, var(--g-spacing-2));
 }
 .df-view-row__right > .df-view-transparent:last-child {
   margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));

package/build/cjs/lib/kit/components/ViewLayouts/ViewTableCell/ViewTableCell.css

@@ -49,7 +49,7 @@
   margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
 }
 .df-view-table-cell__inner > .df-view-transparent {
-  margin-bottom: var(--df-view-table-cell-inner-child-view-transparent-margin-bottom, 6px);
+  margin-bottom: var(--df-view-table-cell-inner-child-view-transparent-margin-bottom, var(--g-spacing-2));
 }
 .df-view-table-cell__inner > .df-view-transparent:last-child {
   margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));

package/build/cjs/lib/kit/components/Views/ArrayBaseView/ArrayBaseView.css

@@ -18,5 +18,5 @@
 */
 /* Border-radius */
 .df-array-base-view__item-prefix {
-  margin-bottom: var(--df-array-base-view-item-prefix-margin-bottom, 6px);
+  margin-bottom: var(--df-array-base-view-item-prefix-margin-bottom, var(--g-spacing-2));
 }

package/build/cjs/lib/kit/components/Views/CheckboxGroupView/CheckboxGroupView.css

@@ -21,14 +21,14 @@
   display: flex;
 }
 .df-checkbox-group-view > *:not(:last-child) {
-  margin-right: var(--df-checkbox-group-view-child-margin-right, 6px);
+  margin-right: var(--df-checkbox-group-view-child-margin-right, var(--g-spacing-3));
 }
 .df-checkbox-group-view_vertical {
   flex-direction: column;
   align-items: flex-start;
 }
 .df-checkbox-group-view_vertical > *:not(:last-child) {
-  margin: var(--df-checkbox-group-view-vertical-child-margin, var(--g-spacing-0) var(--g-spacing-0) 6px);
+  margin: var(--df-checkbox-group-view-vertical-child-margin, var(--g-spacing-0) var(--g-spacing-0) var(--g-spacing-2));
 }
 .df-checkbox-group-view__popover {
   padding: var(--g-spacing-2);

package/build/cjs/lib/kit/components/Views/MonacoInputView/MonacoViewDialog.css

@@ -18,7 +18,7 @@
 */
 /* Border-radius */
 .df-monaco-view-dialog .g-dialog-footer {
-  padding: var(--df-monaco-view-dialog-footer-padding, 10px var(--g-spacing-8) var(--g-spacing-8));
+  padding: var(--df-monaco-view-dialog-footer-padding, var(--g-spacing-4));
 }
 .df-monaco-view-dialog__container {
   border: 1px solid var(--g-color-line-generic);

package/build/cjs/lib/kit/components/Views/TableArrayView/TableArrayView.css

@@ -18,7 +18,7 @@
 */
 /* Border-radius */
 .df-table-array-view__table {
-  margin-bottom: var(--df-table-array-view-table-margin-bottom, 10px);
+  margin-bottom: var(--df-table-array-view-table-margin-bottom, var(--g-spacing-3));
 }
 .df-table-array-view__cell {
   max-width: var(--df-table-array-view-cell-min-width, 150px);

package/build/cjs/lib/kit/components/Views/TextAreaView/TextAreaView.css

@@ -24,7 +24,7 @@
   cursor: pointer;
 }
 .df-text-area-view__chevron {
-  margin: var(--df-text-area-view-chevron-margin, 3px);
+  margin: var(--df-text-area-view-chevron-margin, var(--g-spacing-half));
 }
 .df-text-area-view__chevron_open {
   transform: rotate(180deg);

package/build/cjs/lib/kit/hooks/useOneOf/useOneOf.css

@@ -23,7 +23,7 @@
 }
 .df-use-oneof__toggler_card + .df-group-indent > .df-use-search:not(.df-group-indent) {
   padding-top: var(--df-use-oneof-card-child-padding, var(--g-spacing-0));
-  margin-top: var(--df-spacing-inputs, 15px);
+  margin-top: var(--df-spacing-inputs, var(--g-spacing-4));
 }
 .df-use-oneof__card {
   display: flex;

package/build/esm/lib/core/components/Form/hooks/useSearch/useSearch.css

@@ -18,7 +18,7 @@
 */
 /* Border-radius */
 .df-use-search {
-  margin-bottom: var(--df-spacing-inputs, 15px);
+  margin-bottom: var(--df-spacing-inputs, var(--g-spacing-4));
 }
 .df-use-search_hidden {
   display: none;

package/build/esm/lib/kit/components/AccordeonCard/AccordeonCard.css

@@ -88,7 +88,7 @@
   order: 1;
 }
 .df-accordeon-card__interal-actions {
-  margin-right: var(--df-accordeon-card-interal-actions-margin-right, 5px);
+  margin-right: var(--df-accordeon-card-interal-actions-margin-right, var(--g-spacing-1));
 }
 .df-accordeon-card__toggle-icon_open {
   transform: rotate(180deg);

package/build/esm/lib/kit/components/Card/Card.css

@@ -64,7 +64,7 @@
   align-items: center;
 }
 .df-card__header-right > * {
-  margin-left: var(--df-card-header-right-child-margin-left, 10px);
+  margin-left: var(--df-card-header-right-child-margin-left, var(--g-spacing-2));
 }
 .df-card__title {
   max-width: var(--df-card-title-max-width, 533px);
@@ -76,7 +76,7 @@
   max-width: 300px;
 }
 .df-card__note {
-  margin-left: var(--df-card-note-margin-left, 5px);
+  margin-left: var(--df-card-note-margin-left, var(--g-spacing-1));
 }
 .df-card__note .gc-help-popover {
   display: flex;

package/build/esm/lib/kit/components/CopyButton/CopyButton.css

@@ -21,7 +21,7 @@
   width: 20px;
   display: none;
   position: relative;
-  margin: -1px 0 0 5px;
+  margin: var(--df-copy-button-margin, var(--g-spacing-0) var(--g-spacing-0) var(--g-spacing-0) var(--g-spacing-1));
 }
 .df-copy-button__button {
   position: absolute;

package/build/esm/lib/kit/components/GroupIndent/GroupIndent.css

@@ -18,8 +18,8 @@
 */
 /* Border-radius */
 .df-group-indent {
-  padding: var(--df-group-indent-padding, 11px var(--g-spacing-0) var(--g-spacing-0) var(--g-spacing-5));
-  margin: var(--df-group-indent-margin, -11px var(--g-spacing-0) var(--g-spacing-0) 5px);
+  padding: var(--df-group-indent-padding, var(--g-spacing-3) var(--g-spacing-0) var(--g-spacing-0) var(--g-spacing-5));
+  margin: var(--df-group-indent-margin, calc(-1 * var(--g-spacing-3)) var(--g-spacing-0) var(--g-spacing-0) var(--g-spacing-1));
   border-left: 1px solid var(--g-color-line-generic-accent);
 }
 .df-group-indent:last-child {
@@ -29,5 +29,5 @@
   display: none;
 }
 .df-group-indent > .df-simple-vertical-accordeon_view {
-  margin-top: var(--df-group-indent-simple-vertical-accordeon-view-margin-top, -10px);
+  margin-top: var(--df-group-indent-simple-vertical-accordeon-view-margin-top, calc(-1 * var(--g-spacing-3)));
 }

package/build/esm/lib/kit/components/Inputs/ArrayBase/ArrayBase.css

@@ -25,7 +25,7 @@
   align-items: flex-end;
 }
 .df-array-base__items-wrapper_add-button-down {
-  margin-bottom: var(--df-spacing-inputs, 15px);
+  margin-bottom: var(--df-spacing-inputs, var(--g-spacing-4));
 }
 .df-array-base__items-wrapper_items-primitive {
   min-width: var(--df-array-base-items-primitive-min-width, 100%);
@@ -34,7 +34,7 @@
   min-width: unset;
 }
 .df-array-base__item-prefix {
-  margin: var(--df-array-base-item-prefix-margin, -7px var(--g-spacing-0) var(--g-spacing-2));
+  margin: var(--df-array-base-item-prefix-margin, calc(-1 * var(--g-spacing-2)) var(--g-spacing-0) var(--g-spacing-2));
 }
 .df-array-base__add-button_right {
   margin-left: var(--df-array-base-add-button-right-margin-left, var(--g-spacing-1));

package/build/esm/lib/kit/components/Inputs/CheckboxGroup/CheckboxGroup.css

@@ -23,10 +23,10 @@
   height: var(--df-checkbox-height, 28px);
 }
 .df-checkbox-group .g-control-label__text {
-  margin-inline-start: var(--df-checkbox-margint-start, 5px);
+  margin-inline-start: var(--df-checkbox-margint-start, var(--g-spacing-1));
 }
 .df-checkbox-group > *:not(:last-child) {
-  margin-right: var(--df-checkbox-group-child-margin-right, 6px);
+  margin-right: var(--df-checkbox-group-child-margin-right, var(--g-spacing-3));
 }
 .df-checkbox-group_vertical {
   flex-direction: column;
@@ -35,5 +35,5 @@
   height: auto;
 }
 .df-checkbox-group_vertical > *:not(:last-child) {
-  margin: var(--df-checkbox-group-vertical-child-margin, var(--g-spacing-0) var(--g-spacing-0) 6px);
+  margin: var(--df-checkbox-group-vertical-child-margin, var(--g-spacing-0) var(--g-spacing-0) var(--g-spacing-2));
 }

package/build/esm/lib/kit/components/Inputs/FileInput/FileInput.css

@@ -25,6 +25,6 @@
 }
 .df-file-input__file-name {
   display: block;
-  margin: var(--df-file-input-file-name-margin, auto 10px);
+  margin: var(--df-file-input-file-name-margin, auto var(--g-spacing-2));
   max-width: var(--df-file-input-file-name-max-width, 160px);
 }

package/build/esm/lib/kit/components/Inputs/MonacoInput/MonacoHeader.css

@@ -21,7 +21,7 @@
   height: var(--df-monaco-header-height, 52px);
   display: flex;
   justify-content: space-between;
-  padding: var(--df-monaco-header-padding, 15px);
+  padding: var(--df-monaco-header-padding, var(--g-spacing-4));
   align-items: center;
   background-color: var(--g-color-base-float-hover);
 }

package/build/esm/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.css

@@ -18,7 +18,7 @@
 */
 /* Border-radius */
 .df-monaco-input-dialog .g-dialog-footer {
-  padding: var(--df-monaco-input-dialog-dialog-footer-padding, 6px var(--g-spacing-8) var(--g-spacing-8));
+  padding: var(--df-monaco-input-dialog-dialog-footer-padding, var(--g-spacing-2) var(--g-spacing-8) var(--g-spacing-8));
 }
 .df-monaco-input-dialog__container {
   border: 1px solid var(--g-color-line-generic);

package/build/esm/lib/kit/components/Inputs/MultiOneOf/MultiOneOf.css

@@ -26,7 +26,7 @@
   padding: var(--df-multi-oneof-content-flat-padding, var(--g-spacing-0));
 }
 .df-multi-oneof__content_flat > .df-group-indent > .df-use-search {
-  margin-top: var(--df-spacing-inputs, 15px);
+  margin-top: var(--df-spacing-inputs, var(--g-spacing-4));
 }
 .df-multi-oneof__content_flat > .df-group-indent > .df-use-search:empty {
   display: none;

package/build/esm/lib/kit/components/Inputs/NumberWithScale/NumberWithScale.css

@@ -22,5 +22,5 @@
 }
 .df-number-with-scale__select {
   max-width: var(--df-number-with-scale-select-max-width, 102px);
-  margin-left: var(--df-number-with-scale-select-margin-left, 5px);
+  margin-left: var(--df-number-with-scale-select-margin-left, var(--g-spacing-1));
 }

package/build/esm/lib/kit/components/Inputs/OneOf/OneOf.css

@@ -28,8 +28,8 @@
   all: unset;
 }
 .df-oneof_base > .df-group-indent > .df-use-search {
-  padding: var(--df-oneof-base-padding, 11px var(--g-spacing-0) var(--g-spacing-0) var(--g-spacing-5));
-  margin: var(--df-oneof-base-margin, var(--g-spacing-1) var(--g-spacing-0) var(--g-spacing-5) 5px);
+  padding: var(--df-oneof-base-padding, var(--g-spacing-3) var(--g-spacing-0) var(--g-spacing-0) var(--g-spacing-5));
+  margin: var(--df-oneof-base-margin, var(--g-spacing-1) var(--g-spacing-0) var(--g-spacing-5) var(--g-spacing-1));
   border-left: 1px solid var(--g-color-line-generic-accent);
 }
 .df-oneof_base > .df-group-indent > .df-use-search:empty {
@@ -39,7 +39,7 @@
   margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
 }
 .df-oneof_base > .df-group-indent > .df-use-search > .df-simple-vertical-accordeon_view {
-  margin-top: var(--df-oneof-base-simple-vertical-accordeon-margin-top, -10px);
+  margin-top: var(--df-oneof-base-simple-vertical-accordeon-margin-top, calc(-1 * var(--g-spacing-3)));
 }
 .df-oneof_flat > .df-group-indent {
   margin: var(--df-oneof-flat-margin, var(--g-spacing-0));
@@ -47,7 +47,7 @@
   padding: var(--df-oneof-flat-padding, var(--g-spacing-0));
 }
 .df-oneof_flat > .df-group-indent > .df-use-search {
-  margin-top: var(--df-spacing-inputs, 15px);
+  margin-top: var(--df-spacing-inputs, var(--g-spacing-4));
 }
 .df-oneof_flat > .df-group-indent > .df-use-search:empty {
   display: none;

package/build/esm/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.css

@@ -18,7 +18,7 @@
 */
 /* Border-radius */
 .df-table-array__table {
-  margin-bottom: var(--df-table-array-table-margin-bottom, 10px);
+  margin-bottom: var(--df-table-array-table-margin-bottom, var(--g-spacing-2));
 }
 .df-table-array__table .g-table__cell {
   border-bottom: 0px transparent;
@@ -40,7 +40,7 @@
   min-width: var(--df-table-array-cell-min-width, 150px);
 }
 .df-table-array__cell_arr, .df-table-array__cell_obj {
-  padding-left: var(--df-table-array-cell-obj-padding-left, 3px);
+  padding-left: var(--df-table-array-cell-obj-padding-left, var(--g-spacing-half));
 }
 .df-table-array__cell_arr .yc-text-input,
 .df-table-array__cell_arr .g-text-input,

package/build/esm/lib/kit/components/Layouts/Column/Column.css

@@ -18,7 +18,7 @@
 */
 /* Border-radius */
 .df-column {
-  margin-bottom: var(--df-spacing-inputs, 15px);
+  margin-bottom: var(--df-spacing-inputs, var(--g-spacing-4));
 }
 .df-column:last-child {
   margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
@@ -42,7 +42,7 @@
 }
 .df-column__title {
   word-break: break-word;
-  margin-right: var(--df-column-title-margin-right, 3px);
+  margin-right: var(--df-column-title-margin-right, var(--g-spacing-half));
 }
 .df-column__title_required::after {
   content: "*";
@@ -53,7 +53,7 @@
 }
 .df-column__note-inner {
   position: absolute;
-  margin-top: var(--df-column-note-inner-margin-top, 1px);
+  margin-top: var(--df-column-note-inner-margin-top, var(--g-spacing-0));
 }
 .df-column__note-inner .g-help-popover {
   display: flex;
@@ -71,7 +71,7 @@
   justify-content: space-around;
 }
 .df-column__remove-button {
-  margin-left: var(--df-remove-button-margin-left, 5px);
+  margin-left: var(--df-remove-button-margin-left, var(--g-spacing-1));
 }
 .df-column__required-mark {
   color: var(--g-color-text-danger);

package/build/esm/lib/kit/components/Layouts/Row/Row.css

@@ -21,7 +21,7 @@
   display: flex;
   width: var(--df-row-width, 500px);
   max-width: var(--df-row-max-width, 500px);
-  margin-bottom: var(--df-spacing-inputs, 15px);
+  margin-bottom: var(--df-spacing-inputs, var(--g-spacing-4));
 }
 .df-row:last-child {
   margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
@@ -46,7 +46,7 @@
 }
 .df-row__title {
   word-break: break-word;
-  margin-right: var(--df-row-title-margin-right, 3px);
+  margin-right: var(--df-row-title-margin-right, var(--g-spacing-half));
 }
 .df-row__title_required::after {
   content: "*";
@@ -58,7 +58,7 @@
 }
 .df-row__note-inner {
   position: absolute;
-  margin-top: var(--df-row-note-inner-margin-top, 1px);
+  margin-top: var(--df-row-note-inner-margin-top, var(--g-spacing-0));
 }
 .df-row__note-inner .g-help-popover {
   display: flex;
@@ -70,19 +70,19 @@
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  margin-left: var(--df-row-right-margin-left, 15px);
+  margin-left: var(--df-row-right-margin-left, var(--g-spacing-4));
 }
 .df-row__right-inner {
   display: flex;
   justify-content: space-around;
 }
 .df-row__description {
-  margin-top: var(--df-row-description-margin-top, 10px);
+  margin-top: var(--df-row-description-margin-top, var(--g-spacing-2));
   color: var(--g-color-text-secondary);
   word-break: break-word;
 }
 .df-row__remove-button {
-  margin-left: var(--df-remove-button-margin-left, 5px);
+  margin-left: var(--df-remove-button-margin-left, var(--g-spacing-1));
 }
 .df-row__required-mark {
   color: var(--g-color-text-danger);

package/build/esm/lib/kit/components/Layouts/Section/Section.css

@@ -43,7 +43,7 @@
   max-width: 300px;
 }
 .df-section__note {
-  margin-left: var(--df-section-note-margin-left, 5px);
+  margin-left: var(--df-section-note-margin-left, var(--g-spacing-1));
 }
 .df-section__note .g-help-popover {
   display: flex;
@@ -55,5 +55,5 @@
   margin-top: var(--df-section-description-margin-top, var(--g-spacing-1));
 }
 .df-section__remove-button {
-  margin-left: var(--df-remove-button-margin-left, 5px);
+  margin-left: var(--df-remove-button-margin-left, var(--g-spacing-1));
 }

package/build/esm/lib/kit/components/Layouts/Transparent/Transparent.css

@@ -19,7 +19,7 @@
 /* Border-radius */
 .df-transparent {
   display: flex;
-  margin-bottom: var(--df-spacing-inputs, 15px);
+  margin-bottom: var(--df-spacing-inputs, var(--g-spacing-4));
 }
 .df-transparent:last-child {
   margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
@@ -34,5 +34,5 @@
   width: auto;
 }
 .df-transparent__remove-button {
-  margin-left: var(--df-remove-button-margin-left, 5px);
+  margin-left: var(--df-remove-button-margin-left, var(--g-spacing-1));
 }

package/build/esm/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.css

@@ -25,7 +25,7 @@
 }
 .df-simple-vertical-accordeon_branch .df-simple-vertical-accordeon__body {
   padding-left: var(--df-simple-vertical-accordeon-body-padding-left, var(--g-spacing-5));
-  margin-left: var(--df-simple-vertical-accordeon-body-margin-left, 5px);
+  margin-left: var(--df-simple-vertical-accordeon-body-margin-left, var(--g-spacing-1));
   border-left: 1px solid var(--g-color-line-generic-accent);
 }
 .df-simple-vertical-accordeon__header {
@@ -33,14 +33,14 @@
   align-items: center;
 }
 .df-simple-vertical-accordeon__header-inner {
-  margin-left: var(--df-simple-vertical-accordeon-header-inner-margin-left, -13px);
+  margin-left: var(--df-simple-vertical-accordeon-header-inner-margin-left, calc(-1 * var(--g-spacing-3)));
   max-width: var(--df-simple-vertical-accordeon-header-inner-max-width, 533px);
 }
 .df-simple-vertical-accordeon__header .g-popover__handler {
   display: flex;
 }
 .df-simple-vertical-accordeon__tooltip {
-  margin: var(--df-simple-vertical-accordeon-tooltip-margin, var(--g-spacing-0) 5px);
+  margin: var(--df-simple-vertical-accordeon-tooltip-margin, var(--g-spacing-0) var(--g-spacing-1));
 }
 .df-simple-vertical-accordeon__popover {
   padding: var(--g-spacing-2);
@@ -53,7 +53,7 @@
 }
 .df-simple-vertical-accordeon__body {
   margin-top: var(--df-simple-vertical-accordeon-body-margin-top, var(--g-spacing-1));
-  padding-top: var(--df-simple-vertical-accordeon-body-padding-top, 6px);
+  padding-top: var(--df-simple-vertical-accordeon-body-padding-top, var(--g-spacing-1));
 }
 .df-simple-vertical-accordeon__body_hidden {
   display: none;

package/build/esm/lib/kit/components/TogglerCard/TogglerCard.css

@@ -19,7 +19,7 @@
 /* Border-radius */
 .df-toggler-card {
   width: var(--df-toggler-card-width, 254px);
-  padding: var(--df-toggler-card-padding, 6px);
+  padding: var(--df-toggler-card-padding, var(--g-spacing-2));
   height: var(--df-toggler-card-height, 88px);
 }
 .df-toggler-card__header {
@@ -28,7 +28,7 @@
   align-items: baseline;
 }
 .df-toggler-card__text {
-  margin: var(--df-toggler-card-text-margin, var(--g-spacing-3) 15px var(--g-spacing-0) var(--g-spacing-0));
+  margin: var(--df-toggler-card-text-margin, var(--g-spacing-3) var(--g-spacing-4) var(--g-spacing-0) var(--g-spacing-0));
   display: block;
   height: var(--df-toggler-card-text-height, 36px);
   overflow: hidden;

package/build/esm/lib/kit/components/ViewLayouts/ViewColumn/ViewColumn.css

@@ -50,7 +50,7 @@
   margin-inline-start: var(--df-view-column-note-margin-inline-start, var(--g-spacing-half));
 }
 .df-view-column__second-row > .df-view-transparent {
-  margin-bottom: var(--df-view-column-second-row-child-view-transperant-margin-bottom, 6px);
+  margin-bottom: var(--df-view-column-second-row-child-view-transperant-margin-bottom, var(--g-spacing-2));
 }
 .df-view-column__second-row > .df-view-transparent:last-child {
   margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));

package/build/esm/lib/kit/components/ViewLayouts/ViewRow/ViewRow.css

@@ -68,7 +68,7 @@
   text-overflow: ellipsis;
 }
 .df-view-row__right > .df-view-transparent {
-  margin-bottom: var(--df-view-row-right-child-view-transparent-margin-bottom, 6px);
+  margin-bottom: var(--df-view-row-right-child-view-transparent-margin-bottom, var(--g-spacing-2));
 }
 .df-view-row__right > .df-view-transparent:last-child {
   margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));

package/build/esm/lib/kit/components/ViewLayouts/ViewTableCell/ViewTableCell.css

@@ -49,7 +49,7 @@
   margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
 }
 .df-view-table-cell__inner > .df-view-transparent {
-  margin-bottom: var(--df-view-table-cell-inner-child-view-transparent-margin-bottom, 6px);
+  margin-bottom: var(--df-view-table-cell-inner-child-view-transparent-margin-bottom, var(--g-spacing-2));
 }
 .df-view-table-cell__inner > .df-view-transparent:last-child {
   margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));

package/build/esm/lib/kit/components/Views/ArrayBaseView/ArrayBaseView.css

@@ -18,5 +18,5 @@
 */
 /* Border-radius */
 .df-array-base-view__item-prefix {
-  margin-bottom: var(--df-array-base-view-item-prefix-margin-bottom, 6px);
+  margin-bottom: var(--df-array-base-view-item-prefix-margin-bottom, var(--g-spacing-2));
 }

package/build/esm/lib/kit/components/Views/CheckboxGroupView/CheckboxGroupView.css

@@ -21,14 +21,14 @@
   display: flex;
 }
 .df-checkbox-group-view > *:not(:last-child) {
-  margin-right: var(--df-checkbox-group-view-child-margin-right, 6px);
+  margin-right: var(--df-checkbox-group-view-child-margin-right, var(--g-spacing-3));
 }
 .df-checkbox-group-view_vertical {
   flex-direction: column;
   align-items: flex-start;
 }
 .df-checkbox-group-view_vertical > *:not(:last-child) {
-  margin: var(--df-checkbox-group-view-vertical-child-margin, var(--g-spacing-0) var(--g-spacing-0) 6px);
+  margin: var(--df-checkbox-group-view-vertical-child-margin, var(--g-spacing-0) var(--g-spacing-0) var(--g-spacing-2));
 }
 .df-checkbox-group-view__popover {
   padding: var(--g-spacing-2);

package/build/esm/lib/kit/components/Views/MonacoInputView/MonacoViewDialog.css

@@ -18,7 +18,7 @@
 */
 /* Border-radius */
 .df-monaco-view-dialog .g-dialog-footer {
-  padding: var(--df-monaco-view-dialog-footer-padding, 10px var(--g-spacing-8) var(--g-spacing-8));
+  padding: var(--df-monaco-view-dialog-footer-padding, var(--g-spacing-4));
 }
 .df-monaco-view-dialog__container {
   border: 1px solid var(--g-color-line-generic);

package/build/esm/lib/kit/components/Views/TableArrayView/TableArrayView.css

@@ -18,7 +18,7 @@
 */
 /* Border-radius */
 .df-table-array-view__table {
-  margin-bottom: var(--df-table-array-view-table-margin-bottom, 10px);
+  margin-bottom: var(--df-table-array-view-table-margin-bottom, var(--g-spacing-3));
 }
 .df-table-array-view__cell {
   max-width: var(--df-table-array-view-cell-min-width, 150px);

package/build/esm/lib/kit/components/Views/TextAreaView/TextAreaView.css

@@ -24,7 +24,7 @@
   cursor: pointer;
 }
 .df-text-area-view__chevron {
-  margin: var(--df-text-area-view-chevron-margin, 3px);
+  margin: var(--df-text-area-view-chevron-margin, var(--g-spacing-half));
 }
 .df-text-area-view__chevron_open {
   transform: rotate(180deg);

package/build/esm/lib/kit/hooks/useOneOf/useOneOf.css

@@ -23,7 +23,7 @@
 }
 .df-use-oneof__toggler_card + .df-group-indent > .df-use-search:not(.df-group-indent) {
   padding-top: var(--df-use-oneof-card-child-padding, var(--g-spacing-0));
-  margin-top: var(--df-spacing-inputs, 15px);
+  margin-top: var(--df-spacing-inputs, var(--g-spacing-4));
 }
 .df-use-oneof__card {
   display: flex;

package/package.json

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