@gravity-ui/dynamic-forms 4.15.0 → 4.16.0

package/build/esm/lib/kit/components/Inputs/Checkbox/Checkbox.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-checkbox {
-  height: 28px;
+  height: var(--df-checkbox-height, 28px);
   display: flex;
   align-items: center;
 }

package/build/esm/lib/kit/components/Inputs/CheckboxGroup/CheckboxGroup.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-checkbox-group {
   display: flex;
   align-items: center;
-  height: 28px;
+  height: var(--df-checkbox-height, 28px);
 }
 .df-checkbox-group > *:not(:last-child) {
-  margin-right: 6px;
+  margin-right: var(--df-checkbox-group-child-margin-right, 6px);
 }
 .df-checkbox-group_vertical {
   flex-direction: column;
   align-items: flex-start;
-  margin-top: 8px;
+  margin-top: var(--df-checkbox-group-vertical-margin-top, var(--g-spacing-2));
   height: auto;
 }
 .df-checkbox-group_vertical > *:not(:last-child) {
-  margin-right: 0px;
-  margin-bottom: 6px;
+  margin: var(--df-checkbox-group-vertical-child-margin, var(--g-spacing-0) var(--g-spacing-0) 6px);
 }

package/build/esm/lib/kit/components/Inputs/DateInput/DateInput.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-date-input {
-  width: 100%;
+  width: var(--df-date-input-width, 100%);
 }

package/build/esm/lib/kit/components/Inputs/FileInput/FileInput.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-file-input {
   display: flex;
 }
@@ -6,6 +25,6 @@
 }
 .df-file-input__file-name {
   display: block;
-  margin: auto 10px;
-  max-width: 160px;
+  margin: var(--df-file-input-file-name-margin, auto 10px);
+  max-width: var(--df-file-input-file-name-max-width, 160px);
 }

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

@@ -1,8 +1,27 @@
+/*
+@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-monaco-header {
-  height: 52px;
+  height: var(--df-monaco-header-height, 52px);
   display: flex;
   justify-content: space-between;
-  padding: 15px;
+  padding: var(--df-monaco-header-padding, 15px);
   align-items: center;
   background-color: var(--g-color-base-float-hover);
 }

package/build/esm/lib/kit/components/Inputs/MonacoInput/MonacoInputBase.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-monaco-input {
-  width: 550px;
+  width: var(--df-monaco-input-width, 550px);
 }
 .df-monaco-input__container {
   border: 1px solid var(--g-color-line-generic);

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

@@ -1,9 +1,28 @@
+/*
+@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-monaco-input-dialog .g-dialog-footer {
-  padding: 10px 32px 32px;
+  padding: var(--df-monaco-input-dialog-dialog-footer-padding, 6px var(--g-spacing-8) var(--g-spacing-8));
 }
 .df-monaco-input-dialog__container {
   border: 1px solid var(--g-color-line-generic);
 }
 .df-monaco-input-dialog__dialog-header .g-dialog-header__caption {
-  min-height: 24px;
+  min-height: var(--df-monaco-dialog-header-caption-min-height, 24px);
 }

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

@@ -1,13 +1,32 @@
+/*
+@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-multi-oneof__select {
-  max-width: 305px;
+  max-width: var(--df-multi-oneof-select-max-width, 305px);
 }
 .df-multi-oneof__content_flat > .df-group-indent {
-  margin: 0;
+  margin: var(--df-multi-oneof-content-flat-margin, var(--g-spacing-0));
   border-left: none;
-  padding: 0;
+  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: 15px;
+  margin-top: var(--df-spacing-inputs, 15px);
 }
 .df-multi-oneof__content_flat > .df-group-indent > .df-use-search:empty {
   display: none;

package/build/esm/lib/kit/components/Inputs/MultiSelect/MultiSelect.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-multi-select {
-  max-width: 305px;
+  max-width: var(--df-multi-select-max-width, 305px);
 }
 .df-multi-select__meta-text {
   display: block;

package/build/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/lib/kit/components/Inputs/TextContent/TextContent.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Label, Text } from '@gravity-ui/uikit';
+import { isEmpty } from 'lodash';
+import { Alert, Label, Text } from '@gravity-ui/uikit';
 import cloneDeep from 'lodash/cloneDeep';
 import { block } from '../../../utils';
 import { LazyLoader } from '../../LazyLoader';
@@ -15,7 +16,15 @@ export const TextContentComponent = ({ spec, value, Layout, }) => {
     }
     const iconLib = (textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.icon) ? (React.createElement(LazyLoader, { component: loadIcon(textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.icon) })) : null;
     let content = React.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) || !isEmpty(textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.titleAlert)
+            ? textContentParams.titleAlert
+            : undefined;
+        content = (React.createElement(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.createElement(Label, { size: "m", theme: textContentParams.themeLabel, className: b(), value: value, icon: iconLib }, content));
     }
     else {

package/build/esm/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/esm/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));
 }