@gravity-ui/dynamic-forms 4.15.0 → 4.16.0

package/build/cjs/lib/core/components/Form/hooks/useSearch/useSearch.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-use-search {
-  margin-bottom: 15px;
+  margin-bottom: var(--df-spacing-inputs, 15px);
 }
 .df-use-search_hidden {
   display: none;
 }
 .df-use-search:last-child {
-  margin-bottom: 0;
+  margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
 }

package/build/cjs/lib/kit/components/AccordeonCard/AccordeonCard.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-accordeon-card {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   box-sizing: border-box;
   box-shadow: 0 1px 5px var(--g-color-sfx-shadow);
-  border-radius: 5px;
+  border-radius: var(--df-accordeon-card-border-radius, 5px);
   color: var(--g-color-text-primary);
   background-color: var(--g-color-base-float);
 }
 .df-accordeon-card .df-row {
-  width: 100%;
+  width: var(--df-accordeon-card-row-width, 100%);
   max-width: unset;
 }
 .df-accordeon-card .df-row .df-select,
@@ -19,13 +38,13 @@
 }
 .df-accordeon-card .df-monaco-input,
 .df-accordeon-card .df-monaco-base-view {
-  width: 100%;
+  width: var(--df-accordeon-card-monaco-input-width, 100%);
 }
 .df-accordeon-card:hover {
   box-shadow: 0 3px 10px var(--g-color-sfx-shadow);
 }
 .df-accordeon-card:last-child {
-  margin-bottom: 0;
+  margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
 }
 .df-accordeon-card_empty .df-accordeon-card__body,
 .df-accordeon-card_empty .df-accordeon-card__header-toggle-btn {
@@ -38,8 +57,8 @@
   display: flex;
   position: relative;
   box-sizing: border-box;
-  width: 100%;
-  padding: 16px;
+  width: var(--df-accordeon-card-header-width, 100%);
+  padding: var(--df-accordeon-card-header-padding, var(--g-spacing-4));
 }
 .df-accordeon-card__header:hover {
   cursor: pointer;
@@ -60,7 +79,7 @@
   order: -1;
 }
 .df-accordeon-card__header-content-description {
-  margin-top: 12px;
+  margin-top: var(--df-accordeon-card-content-description-margin-top, var(--g-spacing-3));
   color: var(--g-color-text-complementary);
 }
 .df-accordeon-card__header-toggle-btn {
@@ -69,14 +88,14 @@
   order: 1;
 }
 .df-accordeon-card__interal-actions {
-  margin-right: 5px;
+  margin-right: var(--df-accordeon-card-interal-actions-margin-right, 5px);
 }
 .df-accordeon-card__toggle-icon_open {
   transform: rotate(180deg);
 }
 .df-accordeon-card__body {
   display: none;
-  padding: 16px;
+  padding: var(--df-accordeon-card-body-padding, var(--g-spacing-4));
 }
 .df-accordeon-card__body_open {
   display: block;

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

@@ -1,11 +1,30 @@
+/*
+@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-card {
-  margin-bottom: 20px;
+  margin-bottom: var(--df-spacing-inputs-section, var(--g-spacing-5));
 }
 .df-card:last-child {
-  margin-bottom: 0;
+  margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
 }
 .df-card .df-row {
-  width: 100%;
+  width: var(--df-card-row-width, 100%);
   max-width: unset;
 }
 .df-card .df-row .df-select,
@@ -15,7 +34,7 @@
 }
 .df-card .df-monaco-input,
 .df-card .df-monaco-base-view {
-  width: 100%;
+  width: var(--df-card-monaco-input-width, 100%);
 }
 .df-card_empty-body .df-card__header {
   cursor: default;
@@ -30,7 +49,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 20px;
+  padding: var(--df-card-header-padding, var(--g-spacing-5));
 }
 .df-card__header_interactive {
   cursor: pointer;
@@ -45,17 +64,17 @@
   align-items: center;
 }
 .df-card__header-right > * {
-  margin-left: 10px;
+  margin-left: var(--df-card-header-right-child-margin-left, 10px);
 }
 .df-card__title {
-  max-width: 533px;
-  height: 20px;
+  max-width: var(--df-card-title-max-width, 533px);
+  height: var(--df-card-title-height, var(--g-spacing-5));
 }
 .df-card__title-popover {
-  height: 20px;
+  height: var(--df-card-title-popover-height, var(--g-spacing-5));
 }
 .df-card__note {
-  margin-left: 5px;
+  margin-left: var(--df-card-note-margin-left, 5px);
 }
 .df-card__note .gc-help-popover {
   display: flex;
@@ -68,7 +87,7 @@
 }
 .df-card__body {
   display: none;
-  padding: 0 20px 20px;
+  padding: var(--df-card-body-padding, var(--g-spacing-0) var(--g-spacing-5) var(--g-spacing-5));
 }
 .df-card__body_open {
   display: block;

package/build/cjs/lib/kit/components/CopyButton/CopyButton.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-copy-button {
   width: 20px;
   display: none;

package/build/cjs/lib/kit/components/ErrorWrapper/ErrorWrapper.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-error-wrapper {
-  width: 100%;
+  width: var(--df-error-wrapper-width, 100%);
 }
 .df-error-wrapper_error .yc-select-control:not(.df-error-wrapper-ignore),
 .df-error-wrapper_error .yc-select-control:focus:not(.df-error-wrapper-ignore),
@@ -24,7 +43,7 @@
 }
 .df-error-wrapper__error-text {
   color: var(--g-color-text-danger);
-  margin-top: 2px;
+  margin-top: var(--df-error-wrapper-error-text-margin-top, var(--g-spacing-half));
   font-size: var(--g-text-body-1-font-size);
   line-height: var(--g-text-body-1-line-height);
 }

package/build/cjs/lib/kit/components/GenerateRandomValueButton/GenerateRandomValueButton.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-generate-random-value-button {
-  margin-left: 8px;
+  margin-left: var(--df-generate-random-value-button-margin-left, var(--g-spacing-2));
 }

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

@@ -1,17 +1,33 @@
+/*
+@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-group-indent {
-  padding-top: 11px;
-  padding-left: 20px;
-  margin-top: -11px;
-  margin-bottom: 20px;
-  margin-left: 5px;
+  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);
   border-left: 1px solid var(--g-color-line-generic-accent);
 }
 .df-group-indent:last-child {
-  margin-bottom: 0;
+  margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
 }
 .df-group-indent:empty {
   display: none;
 }
 .df-group-indent > .df-simple-vertical-accordeon_view {
-  margin-top: -10px;
+  margin-top: var(--df-group-indent-simple-vertical-accordeon-view-margin-top, -10px);
 }

package/build/cjs/lib/kit/components/Inputs/ArrayBase/ArrayBase.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-array-base_add-button-right {
   display: flex;
   align-items: flex-end;
@@ -6,18 +25,17 @@
   align-items: flex-end;
 }
 .df-array-base__items-wrapper_add-button-down {
-  margin-bottom: 15px;
+  margin-bottom: var(--df-spacing-inputs, 15px);
 }
 .df-array-base__items-wrapper_items-primitive {
-  min-width: 100%;
+  min-width: var(--df-array-base-items-primitive-min-width, 100%);
 }
 .df-array-base__items-wrapper_items-primitive:empty {
   min-width: unset;
 }
 .df-array-base__item-prefix {
-  margin-top: -7px;
-  margin-bottom: 8px;
+  margin: var(--df-array-base-item-prefix-margin, -7px var(--g-spacing-0) var(--g-spacing-2));
 }
 .df-array-base__add-button_right {
-  margin-left: 4px;
+  margin-left: var(--df-array-base-add-button-right-margin-left, var(--g-spacing-1));
 }

package/build/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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;