@gravity-ui/dynamic-forms 4.14.3 → 4.16.0

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

@@ -1,7 +1,26 @@
+/*
+@mixin variables {
+    --g-spacing-base: 4px;
+
+    --g-spacing-0: calc(var(--g-spacing-base) * 0); //0px
+    --g-spacing-half: calc(var(--g-spacing-base) * 0.5); //2px
+    --g-spacing-1: var(--g-spacing-base); // 4px
+    --g-spacing-2: calc(var(--g-spacing-base) * 2); // 8px
+    --g-spacing-3: calc(var(--g-spacing-base) * 3); // 12px
+    --g-spacing-4: calc(var(--g-spacing-base) * 4); // 16px
+    --g-spacing-5: calc(var(--g-spacing-base) * 5); // 20px
+    --g-spacing-6: calc(var(--g-spacing-base) * 6); // 24px
+    --g-spacing-7: calc(var(--g-spacing-base) * 7); // 28px
+    --g-spacing-8: calc(var(--g-spacing-base) * 8); // 32px
+    --g-spacing-9: calc(var(--g-spacing-base) * 9); // 36px
+    --g-spacing-10: calc(var(--g-spacing-base) * 10); // 40px
+}
+*/
+/* Border-radius */
 .df-number-with-scale__wrapper {
   display: flex;
 }
 .df-number-with-scale__select {
-  max-width: 102px;
-  margin-left: 5px;
+  max-width: var(--df-number-with-scale-select-max-width, 102px);
+  margin-left: var(--df-number-with-scale-select-margin-left, 5px);
 }

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

@@ -1,18 +1,36 @@
+/*
+@mixin variables {
+    --g-spacing-base: 4px;
+
+    --g-spacing-0: calc(var(--g-spacing-base) * 0); //0px
+    --g-spacing-half: calc(var(--g-spacing-base) * 0.5); //2px
+    --g-spacing-1: var(--g-spacing-base); // 4px
+    --g-spacing-2: calc(var(--g-spacing-base) * 2); // 8px
+    --g-spacing-3: calc(var(--g-spacing-base) * 3); // 12px
+    --g-spacing-4: calc(var(--g-spacing-base) * 4); // 16px
+    --g-spacing-5: calc(var(--g-spacing-base) * 5); // 20px
+    --g-spacing-6: calc(var(--g-spacing-base) * 6); // 24px
+    --g-spacing-7: calc(var(--g-spacing-base) * 7); // 28px
+    --g-spacing-8: calc(var(--g-spacing-base) * 8); // 32px
+    --g-spacing-9: calc(var(--g-spacing-base) * 9); // 36px
+    --g-spacing-10: calc(var(--g-spacing-base) * 10); // 40px
+}
+*/
+/* Border-radius */
 .df-object-base__content_inline {
   display: flex;
 }
 .df-object-base__content_inline > .df-use-search {
-  width: 150px;
-  margin-bottom: 0;
-  margin-right: 8px;
+  width: var(--df-object-base-inline-width, 150px);
+  margin: var(--df-object-base-inline-margin, var(--g-spacing-0) var(--g-spacing-2) var(--g-spacing-0) var(--g-spacing-0));
 }
 .df-object-base__content_inline > .df-use-search:last-child {
-  margin-right: 0;
+  margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
 }
 .df-object-base__delimiter {
-  height: 28px;
+  height: var(--df-object-base-delimiter-height, 28px);
   display: flex;
-  margin-right: 8px;
+  margin-right: var(--df-object-base-delimiter-margin-right, var(--g-spacing-2));
   align-items: center;
   white-space: nowrap;
 }

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

@@ -1,37 +1,53 @@
+/*
+@mixin variables {
+    --g-spacing-base: 4px;
+
+    --g-spacing-0: calc(var(--g-spacing-base) * 0); //0px
+    --g-spacing-half: calc(var(--g-spacing-base) * 0.5); //2px
+    --g-spacing-1: var(--g-spacing-base); // 4px
+    --g-spacing-2: calc(var(--g-spacing-base) * 2); // 8px
+    --g-spacing-3: calc(var(--g-spacing-base) * 3); // 12px
+    --g-spacing-4: calc(var(--g-spacing-base) * 4); // 16px
+    --g-spacing-5: calc(var(--g-spacing-base) * 5); // 20px
+    --g-spacing-6: calc(var(--g-spacing-base) * 6); // 24px
+    --g-spacing-7: calc(var(--g-spacing-base) * 7); // 28px
+    --g-spacing-8: calc(var(--g-spacing-base) * 8); // 32px
+    --g-spacing-9: calc(var(--g-spacing-base) * 9); // 36px
+    --g-spacing-10: calc(var(--g-spacing-base) * 10); // 40px
+}
+*/
+/* Border-radius */
 .df-oneof {
   display: flex;
   flex-direction: column;
 }
 .df-oneof:last-child > .df-group-indent {
-  margin-bottom: 0;
+  margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
 }
 .df-oneof_base > .df-group-indent {
   all: unset;
 }
 .df-oneof_base > .df-group-indent > .df-use-search {
-  padding-top: 11px;
-  padding-left: 20px;
-  margin-top: 4px;
-  margin-bottom: 20px;
-  margin-left: 5px;
+  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);
   border-left: 1px solid var(--g-color-line-generic-accent);
 }
 .df-oneof_base > .df-group-indent > .df-use-search:empty {
   display: none;
 }
 .df-oneof_base > .df-group-indent > .df-use-search:last-child {
-  margin-bottom: 0;
+  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: -10px;
+  margin-top: var(--df-oneof-base-simple-vertical-accordeon-margin-top, -10px);
 }
 .df-oneof_flat > .df-group-indent {
-  margin: 0;
+  margin: var(--df-oneof-flat-margin, var(--g-spacing-0));
   border-left: none;
-  padding: 0;
+  padding: var(--df-oneof-flat-padding, var(--g-spacing-0));
 }
 .df-oneof_flat > .df-group-indent > .df-use-search {
-  margin-top: 15px;
+  margin-top: var(--df-spacing-inputs, 15px);
 }
 .df-oneof_flat > .df-group-indent > .df-use-search:empty {
   display: none;

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

@@ -1,5 +1,24 @@
+/*
+@mixin variables {
+    --g-spacing-base: 4px;
+
+    --g-spacing-0: calc(var(--g-spacing-base) * 0); //0px
+    --g-spacing-half: calc(var(--g-spacing-base) * 0.5); //2px
+    --g-spacing-1: var(--g-spacing-base); // 4px
+    --g-spacing-2: calc(var(--g-spacing-base) * 2); // 8px
+    --g-spacing-3: calc(var(--g-spacing-base) * 3); // 12px
+    --g-spacing-4: calc(var(--g-spacing-base) * 4); // 16px
+    --g-spacing-5: calc(var(--g-spacing-base) * 5); // 20px
+    --g-spacing-6: calc(var(--g-spacing-base) * 6); // 24px
+    --g-spacing-7: calc(var(--g-spacing-base) * 7); // 28px
+    --g-spacing-8: calc(var(--g-spacing-base) * 8); // 32px
+    --g-spacing-9: calc(var(--g-spacing-base) * 9); // 36px
+    --g-spacing-10: calc(var(--g-spacing-base) * 10); // 40px
+}
+*/
+/* Border-radius */
 .df-select {
-  max-width: 305px;
+  max-width: var(--df-select-max-width, 305px);
 }
 .df-select__meta-text {
   display: block;

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

@@ -1,5 +1,24 @@
+/*
+@mixin variables {
+    --g-spacing-base: 4px;
+
+    --g-spacing-0: calc(var(--g-spacing-base) * 0); //0px
+    --g-spacing-half: calc(var(--g-spacing-base) * 0.5); //2px
+    --g-spacing-1: var(--g-spacing-base); // 4px
+    --g-spacing-2: calc(var(--g-spacing-base) * 2); // 8px
+    --g-spacing-3: calc(var(--g-spacing-base) * 3); // 12px
+    --g-spacing-4: calc(var(--g-spacing-base) * 4); // 16px
+    --g-spacing-5: calc(var(--g-spacing-base) * 5); // 20px
+    --g-spacing-6: calc(var(--g-spacing-base) * 6); // 24px
+    --g-spacing-7: calc(var(--g-spacing-base) * 7); // 28px
+    --g-spacing-8: calc(var(--g-spacing-base) * 8); // 32px
+    --g-spacing-9: calc(var(--g-spacing-base) * 9); // 36px
+    --g-spacing-10: calc(var(--g-spacing-base) * 10); // 40px
+}
+*/
+/* Border-radius */
 .df-switch {
-  height: 28px;
+  height: var(--df-switch-height, 28px);
   display: flex;
   align-items: center;
 }

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

@@ -1,5 +1,24 @@
+/*
+@mixin variables {
+    --g-spacing-base: 4px;
+
+    --g-spacing-0: calc(var(--g-spacing-base) * 0); //0px
+    --g-spacing-half: calc(var(--g-spacing-base) * 0.5); //2px
+    --g-spacing-1: var(--g-spacing-base); // 4px
+    --g-spacing-2: calc(var(--g-spacing-base) * 2); // 8px
+    --g-spacing-3: calc(var(--g-spacing-base) * 3); // 12px
+    --g-spacing-4: calc(var(--g-spacing-base) * 4); // 16px
+    --g-spacing-5: calc(var(--g-spacing-base) * 5); // 20px
+    --g-spacing-6: calc(var(--g-spacing-base) * 6); // 24px
+    --g-spacing-7: calc(var(--g-spacing-base) * 7); // 28px
+    --g-spacing-8: calc(var(--g-spacing-base) * 8); // 32px
+    --g-spacing-9: calc(var(--g-spacing-base) * 9); // 36px
+    --g-spacing-10: calc(var(--g-spacing-base) * 10); // 40px
+}
+*/
+/* Border-radius */
 .df-table-array__table {
-  margin-bottom: 10px;
+  margin-bottom: var(--df-table-array-table-margin-bottom, 10px);
 }
 .df-table-array__table .g-table__cell {
   border-bottom: 0px transparent;
@@ -17,11 +36,11 @@
 .df-table-array__cell .g-select-control,
 .df-table-array__cell .yc-select,
 .df-table-array__cell .g-select {
-  max-width: 150px;
-  min-width: 150px;
+  max-width: var(--df-table-array-cell-max-width, 150px);
+  min-width: var(--df-table-array-cell-min-width, 150px);
 }
 .df-table-array__cell_arr, .df-table-array__cell_obj {
-  padding-left: 3px;
+  padding-left: var(--df-table-array-cell-obj-padding-left, 3px);
 }
 .df-table-array__cell_arr .yc-text-input,
 .df-table-array__cell_arr .g-text-input,
@@ -37,12 +56,12 @@
   max-width: unset;
 }
 .df-table-array__cell_arr > .simple-vertical-accordeon, .df-table-array__cell_obj > .simple-vertical-accordeon {
-  margin-bottom: 0;
+  margin-bottom: var(--df-table-array-cell-obj-simple-vertical-accordeon-margin-bottom, var(--g-spacing-0));
 }
 .df-table-array__cell_bool {
   max-width: 50px;
   min-width: 50px;
 }
 .df-table-array__idx {
-  padding-top: 6px;
+  padding-top: var(--df-table-array-idx-padding-top, 6px);
 }

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

@@ -1,3 +1,22 @@
+/*
+@mixin variables {
+    --g-spacing-base: 4px;
+
+    --g-spacing-0: calc(var(--g-spacing-base) * 0); //0px
+    --g-spacing-half: calc(var(--g-spacing-base) * 0.5); //2px
+    --g-spacing-1: var(--g-spacing-base); // 4px
+    --g-spacing-2: calc(var(--g-spacing-base) * 2); // 8px
+    --g-spacing-3: calc(var(--g-spacing-base) * 3); // 12px
+    --g-spacing-4: calc(var(--g-spacing-base) * 4); // 16px
+    --g-spacing-5: calc(var(--g-spacing-base) * 5); // 20px
+    --g-spacing-6: calc(var(--g-spacing-base) * 6); // 24px
+    --g-spacing-7: calc(var(--g-spacing-base) * 7); // 28px
+    --g-spacing-8: calc(var(--g-spacing-base) * 8); // 32px
+    --g-spacing-9: calc(var(--g-spacing-base) * 9); // 36px
+    --g-spacing-10: calc(var(--g-spacing-base) * 10); // 40px
+}
+*/
+/* Border-radius */
 .df-text-content.g-label {
   height: auto;
   width: auto;
@@ -9,11 +28,11 @@
 .df-text-content__icon {
   display: flex;
   align-items: center;
-  margin-right: 4px;
+  margin-right: var(--df-text-content-icon-margin-right, var(--g-spacing-1));
 }
 .df-text-content__wrapper {
   display: flex;
 }
 .df-text-content__separator {
-  margin: 0 4px;
+  margin: var(--df-text-content-separator-margin, var(--g-spacing-0) var(--g-spacing-1));
 }

package/build/cjs/lib/kit/components/Inputs/TextContent/TextContent.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextContent = exports.TextContentComponent = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const lodash_1 = require("lodash");
 const uikit_1 = require("@gravity-ui/uikit");
 const cloneDeep_1 = tslib_1.__importDefault(require("lodash/cloneDeep"));
 const utils_1 = require("../../../utils");
@@ -18,7 +19,15 @@ const TextContentComponent = ({ spec, value, Layout, }) => {
     }
     const iconLib = (textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.icon) ? (react_1.default.createElement(LazyLoader_1.LazyLoader, { component: (0, utils_2.loadIcon)(textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.icon) })) : null;
     let content = react_1.default.createElement("span", { dangerouslySetInnerHTML: { __html: text } });
-    if (textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.themeLabel) {
+    if (textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.themeAlert) {
+        const titleAlert = (textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.titleAlert) || !(0, lodash_1.isEmpty)(textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.titleAlert)
+            ? textContentParams.titleAlert
+            : undefined;
+        content = (react_1.default.createElement(uikit_1.Alert, { icon: iconLib, message: content, 
+            // If the title is an empty line, then you need to explicitly write undefined, otherwise there will be an additional indent
+            title: titleAlert, theme: textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.themeAlert }));
+    }
+    else if (textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.themeLabel) {
         content = (react_1.default.createElement(uikit_1.Label, { size: "m", theme: textContentParams.themeLabel, className: b(), value: value, icon: iconLib }, content));
     }
     else {

package/build/cjs/lib/kit/components/Inputs/TimeRangeSelector/components/TimeRangeSelect/TimeRangeSelect.css

@@ -1,3 +1,22 @@
+/*
+@mixin variables {
+    --g-spacing-base: 4px;
+
+    --g-spacing-0: calc(var(--g-spacing-base) * 0); //0px
+    --g-spacing-half: calc(var(--g-spacing-base) * 0.5); //2px
+    --g-spacing-1: var(--g-spacing-base); // 4px
+    --g-spacing-2: calc(var(--g-spacing-base) * 2); // 8px
+    --g-spacing-3: calc(var(--g-spacing-base) * 3); // 12px
+    --g-spacing-4: calc(var(--g-spacing-base) * 4); // 16px
+    --g-spacing-5: calc(var(--g-spacing-base) * 5); // 20px
+    --g-spacing-6: calc(var(--g-spacing-base) * 6); // 24px
+    --g-spacing-7: calc(var(--g-spacing-base) * 7); // 28px
+    --g-spacing-8: calc(var(--g-spacing-base) * 8); // 32px
+    --g-spacing-9: calc(var(--g-spacing-base) * 9); // 36px
+    --g-spacing-10: calc(var(--g-spacing-base) * 10); // 40px
+}
+*/
+/* Border-radius */
 .df-time-range-select__select {
   min-width: 100px;
 }

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

@@ -1,3 +1,22 @@
+/*
+@mixin variables {
+    --g-spacing-base: 4px;
+
+    --g-spacing-0: calc(var(--g-spacing-base) * 0); //0px
+    --g-spacing-half: calc(var(--g-spacing-base) * 0.5); //2px
+    --g-spacing-1: var(--g-spacing-base); // 4px
+    --g-spacing-2: calc(var(--g-spacing-base) * 2); // 8px
+    --g-spacing-3: calc(var(--g-spacing-base) * 3); // 12px
+    --g-spacing-4: calc(var(--g-spacing-base) * 4); // 16px
+    --g-spacing-5: calc(var(--g-spacing-base) * 5); // 20px
+    --g-spacing-6: calc(var(--g-spacing-base) * 6); // 24px
+    --g-spacing-7: calc(var(--g-spacing-base) * 7); // 28px
+    --g-spacing-8: calc(var(--g-spacing-base) * 8); // 32px
+    --g-spacing-9: calc(var(--g-spacing-base) * 9); // 36px
+    --g-spacing-10: calc(var(--g-spacing-base) * 10); // 40px
+}
+*/
+/* Border-radius */
 .df-accordeon-card-form__accordeon-card-body {
-  padding-right: 32px;
+  padding-right: var(--df-accordeon-card-form-body-padding-right, var(--g-spacing-8));
 }

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

@@ -0,0 +1,81 @@
+/*
+@mixin variables {
+    --g-spacing-base: 4px;
+
+    --g-spacing-0: calc(var(--g-spacing-base) * 0); //0px
+    --g-spacing-half: calc(var(--g-spacing-base) * 0.5); //2px
+    --g-spacing-1: var(--g-spacing-base); // 4px
+    --g-spacing-2: calc(var(--g-spacing-base) * 2); // 8px
+    --g-spacing-3: calc(var(--g-spacing-base) * 3); // 12px
+    --g-spacing-4: calc(var(--g-spacing-base) * 4); // 16px
+    --g-spacing-5: calc(var(--g-spacing-base) * 5); // 20px
+    --g-spacing-6: calc(var(--g-spacing-base) * 6); // 24px
+    --g-spacing-7: calc(var(--g-spacing-base) * 7); // 28px
+    --g-spacing-8: calc(var(--g-spacing-base) * 8); // 32px
+    --g-spacing-9: calc(var(--g-spacing-base) * 9); // 36px
+    --g-spacing-10: calc(var(--g-spacing-base) * 10); // 40px
+}
+*/
+/* Border-radius */
+.df-column {
+  margin-bottom: var(--df-spacing-inputs, 15px);
+}
+.df-column:last-child {
+  margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
+}
+.df-column__first-row {
+  min-height: var(--df-column-first-row-min-height, 28px);
+  display: flex;
+  margin-bottom: auto;
+  flex-direction: column;
+  flex-shrink: 0;
+}
+.df-column__first-row-inner {
+  display: inline;
+  margin-top: auto;
+  margin-bottom: auto;
+}
+.df-column__first-row::after {
+  content: "";
+  width: 100%;
+  flex-shrink: 1;
+}
+.df-column__title {
+  word-break: break-word;
+  margin-right: var(--df-column-title-margin-right, 3px);
+}
+.df-column__title_required::after {
+  content: "*";
+  color: var(--g-color-text-danger);
+}
+.df-column__note {
+  position: relative;
+}
+.df-column__note-inner {
+  position: absolute;
+  margin-top: var(--df-column-note-inner-margin-top, 1px);
+}
+.df-column__note-inner .g-help-popover {
+  display: flex;
+}
+.df-column__note-inner .g-help-popover > span {
+  display: flex;
+}
+.df-column__second-row {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+.df-column__second-row-inner {
+  display: flex;
+  justify-content: space-around;
+}
+.df-column__remove-button {
+  margin-left: var(--df-remove-button-margin-left, 5px);
+}
+.df-column__required-mark {
+  color: var(--g-color-text-danger);
+}
+.df-column__error-wrapper {
+  min-width: 100%;
+}

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

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Column = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const components_1 = require("@gravity-ui/components");
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const core_1 = require("../../../../core");
+const components_2 = require("../../../components");
+const utils_1 = require("../../../utils");
+const b = (0, utils_1.block)('column');
+const ColumnBase = ({ name, spec, input, meta, children, }) => {
+    const arrayItem = react_1.default.useMemo(() => (0, core_1.isArrayItem)(name), [name]);
+    const generateButton = react_1.default.useMemo(() => (0, core_1.withGenerateButton)(spec), [spec]);
+    return (react_1.default.createElement("div", { className: b() },
+        react_1.default.createElement("div", { className: b('first-row') },
+            react_1.default.createElement("div", { className: b('first-row-inner') },
+                react_1.default.createElement(uikit_1.Text, { className: b('title', { required: spec.required }) }, spec.viewSpec.layoutTitle),
+                spec.viewSpec.layoutDescription ? (react_1.default.createElement("span", { className: b('note') },
+                    react_1.default.createElement(uikit_1.Text, { className: b('note-inner') },
+                        react_1.default.createElement(components_1.HelpPopover, { htmlContent: spec.viewSpec.layoutDescription, placement: ['bottom', 'top'] })))) : null)),
+        react_1.default.createElement("div", { className: b('second-row') },
+            react_1.default.createElement("div", { className: b('second-row-inner') },
+                react_1.default.createElement(components_2.ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: 
+                    // TODO: remove condition spec.viewSpec.type !== 'select'
+                    ((0, core_1.isArraySpec)(spec) && spec.viewSpec.type !== 'select') ||
+                        (0, core_1.isObjectSpec)(spec), className: b('error-wrapper') }, children),
+                generateButton ? (react_1.default.createElement(components_2.GenerateRandomValueButton, { spec: spec, onChange: input.onChange })) : null,
+                arrayItem ? (react_1.default.createElement(uikit_1.Button, { view: "flat-secondary", className: b('remove-button'), onClick: input.onDrop, qa: `${name}-remove-item` },
+                    react_1.default.createElement(uikit_1.Icon, { data: icons_1.TrashBin, size: 16 }))) : null))));
+};
+const Column = (props) => react_1.default.createElement(ColumnBase, Object.assign({}, props));
+exports.Column = Column;

package/build/cjs/lib/kit/components/Layouts/Column/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Column"), exports);

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

@@ -1,15 +1,34 @@
+/*
+@mixin variables {
+    --g-spacing-base: 4px;
+
+    --g-spacing-0: calc(var(--g-spacing-base) * 0); //0px
+    --g-spacing-half: calc(var(--g-spacing-base) * 0.5); //2px
+    --g-spacing-1: var(--g-spacing-base); // 4px
+    --g-spacing-2: calc(var(--g-spacing-base) * 2); // 8px
+    --g-spacing-3: calc(var(--g-spacing-base) * 3); // 12px
+    --g-spacing-4: calc(var(--g-spacing-base) * 4); // 16px
+    --g-spacing-5: calc(var(--g-spacing-base) * 5); // 20px
+    --g-spacing-6: calc(var(--g-spacing-base) * 6); // 24px
+    --g-spacing-7: calc(var(--g-spacing-base) * 7); // 28px
+    --g-spacing-8: calc(var(--g-spacing-base) * 8); // 32px
+    --g-spacing-9: calc(var(--g-spacing-base) * 9); // 36px
+    --g-spacing-10: calc(var(--g-spacing-base) * 10); // 40px
+}
+*/
+/* Border-radius */
 .df-row {
   display: flex;
-  width: 500px;
-  max-width: 500px;
-  margin-bottom: 15px;
+  width: var(--df-row-width, 500px);
+  max-width: var(--df-row-max-width, 500px);
+  margin-bottom: var(--df-spacing-inputs, 15px);
 }
 .df-row:last-child {
-  margin-bottom: 0;
+  margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
 }
 .df-row__left {
-  width: 180px;
-  min-height: 28px;
+  width: var(--df-row-left-width, 180px);
+  min-height: var(--df-row-left-min-height, 28px);
   display: flex;
   margin-bottom: auto;
   flex-direction: column;
@@ -27,19 +46,19 @@
 }
 .df-row__title {
   word-break: break-word;
-  margin-right: 3px;
+  margin-right: var(--df-row-title-margin-right, 3px);
 }
 .df-row__title_required::after {
   content: "*";
   color: var(--g-color-text-danger);
 }
 .df-row__note {
-  padding-right: 16px;
+  padding-right: var(--df-row-note-padding-right, var(--g-spacing-4));
   position: relative;
 }
 .df-row__note-inner {
   position: absolute;
-  margin-top: 1px;
+  margin-top: var(--df-row-note-inner-margin-top, 1px);
 }
 .df-row__note-inner .g-help-popover {
   display: flex;
@@ -51,19 +70,19 @@
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  margin-left: 15px;
+  margin-left: var(--df-row-right-margin-left, 15px);
 }
 .df-row__right-inner {
   display: flex;
   justify-content: space-around;
 }
 .df-row__description {
-  margin-top: 10px;
+  margin-top: var(--df-row-description-margin-top, 10px);
   color: var(--g-color-text-secondary);
   word-break: break-word;
 }
 .df-row__remove-button {
-  margin-left: 5px;
+  margin-left: var(--df-remove-button-margin-left, 5px);
 }
 .df-row__required-mark {
   color: var(--g-color-text-danger);

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

@@ -1,22 +1,41 @@
+/*
+@mixin variables {
+    --g-spacing-base: 4px;
+
+    --g-spacing-0: calc(var(--g-spacing-base) * 0); //0px
+    --g-spacing-half: calc(var(--g-spacing-base) * 0.5); //2px
+    --g-spacing-1: var(--g-spacing-base); // 4px
+    --g-spacing-2: calc(var(--g-spacing-base) * 2); // 8px
+    --g-spacing-3: calc(var(--g-spacing-base) * 3); // 12px
+    --g-spacing-4: calc(var(--g-spacing-base) * 4); // 16px
+    --g-spacing-5: calc(var(--g-spacing-base) * 5); // 20px
+    --g-spacing-6: calc(var(--g-spacing-base) * 6); // 24px
+    --g-spacing-7: calc(var(--g-spacing-base) * 7); // 28px
+    --g-spacing-8: calc(var(--g-spacing-base) * 8); // 32px
+    --g-spacing-9: calc(var(--g-spacing-base) * 9); // 36px
+    --g-spacing-10: calc(var(--g-spacing-base) * 10); // 40px
+}
+*/
+/* Border-radius */
 .df-section {
-  margin-bottom: 20px;
+  margin-bottom: var(--df-spacing-inputs-section, var(--g-spacing-5));
 }
 .df-section:last-child {
-  margin-bottom: 0;
+  margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
 }
 .df-section__header {
   display: flex;
   align-items: center;
-  margin-bottom: 20px;
+  margin-bottom: var(--df-section-header-margin-bottom, var(--g-spacing-5));
 }
 .df-section__header_size_s {
-  height: 18px;
+  height: var(--df-section-header-size-s, 18px);
 }
 .df-section__header_size_m {
-  height: 20px;
+  height: var(--df-section-header-size-m, 20px);
 }
 .df-section__title {
-  max-width: 533px;
+  max-width: var(--df-section-title-max-width, 533px);
 }
 .df-section__title-popover {
   display: flex;
@@ -26,7 +45,7 @@
   display: flex;
 }
 .df-section__note {
-  margin-left: 5px;
+  margin-left: var(--df-section-note-margin-left, 5px);
 }
 .df-section__note .g-help-popover {
   display: flex;
@@ -35,8 +54,8 @@
   display: flex;
 }
 .df-section__description {
-  margin-top: 4px;
+  margin-top: var(--df-section-description-margin-top, var(--g-spacing-1));
 }
 .df-section__remove-button {
-  margin-left: 5px;
+  margin-left: var(--df-remove-button-margin-left, 5px);
 }