@gravity-ui/dynamic-forms 4.14.3 → 4.16.0

package/build/esm/lib/kit/components/TogglerCard/TogglerCard.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-toggler-card {
-  width: 254px;
-  padding: 10px;
-  height: 88px;
+  width: var(--df-toggler-card-width, 254px);
+  padding: var(--df-toggler-card-padding, 6px);
+  height: var(--df-toggler-card-height, 88px);
 }
 .df-toggler-card__header {
   display: flex;
@@ -9,10 +28,9 @@
   align-items: baseline;
 }
 .df-toggler-card__text {
-  margin-top: 12px;
+  margin: var(--df-toggler-card-text-margin, var(--g-spacing-3) 15px var(--g-spacing-0) var(--g-spacing-0));
   display: block;
-  margin-right: 15px;
-  height: 36px;
+  height: var(--df-toggler-card-text-height, 36px);
   overflow: hidden;
   text-overflow: ellipsis;
 }

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

@@ -0,0 +1,60 @@
+/*
+@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 */
+/*
+@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-view-column {
+  margin-bottom: var(--df-spacing-view, var(--g-spacing-5));
+}
+.df-view-column:last-child {
+  margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
+}
+.df-view-column__first-row {
+  display: flex;
+  align-items: baseline;
+}
+.df-view-column__note {
+  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);
+}
+.df-view-column__second-row > .df-view-transparent:last-child {
+  margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
+}
+.df-view-column:hover > .df-copy-button {
+  display: block;
+}

package/build/esm/lib/kit/components/ViewLayouts/ViewColumn/ViewColumn.d.ts

@@ -0,0 +1,3 @@
+import { FormValue, Spec, ViewLayoutProps } from '../../../../core';
+import './ViewColumn.css';
+export declare const ViewColumn: <T extends FormValue, S extends Spec<any, undefined, undefined>>({ value, spec, children, }: ViewLayoutProps<T, S>) => JSX.Element | null;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Text } from '@gravity-ui/uikit';
+import { HelpPopover } from '@gravity-ui/components';
+import { useDynamicFormsCtx } from '../../../../core';
+import { CopyButton } from '../../../../kit';
+import { block, isNotEmptyValue } from '../../../utils';
+import './ViewColumn.css';
+const b = block('view-column');
+export const ViewColumn = ({ value, spec, children, }) => {
+    const { showLayoutDescription } = useDynamicFormsCtx();
+    if (!isNotEmptyValue(value, spec)) {
+        return null;
+    }
+    return (React.createElement("div", { className: b() },
+        React.createElement("div", { className: b('first-row') },
+            React.createElement(Text, { color: "secondary", ellipsis: true }, spec.viewSpec.layoutTitle),
+            showLayoutDescription && spec.viewSpec.layoutDescription ? (React.createElement(HelpPopover, { className: b('note'), htmlContent: spec.viewSpec.layoutDescription, placement: ['bottom', 'top'] })) : null),
+        React.createElement("div", { className: b('second-row') }, children),
+        React.createElement(CopyButton, { spec: spec, value: value })));
+};

package/build/esm/lib/kit/components/ViewLayouts/ViewColumn/index.d.ts

@@ -0,0 +1 @@
+export * from './ViewColumn';

package/build/esm/lib/kit/components/ViewLayouts/ViewColumn/index.js

@@ -0,0 +1 @@
+export * from './ViewColumn';

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

@@ -1,39 +1,77 @@
+/*
+@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 */
+/*
+@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-view-row {
-  width: 100%;
+  width: var(--df-view-row-width, 100%);
   display: flex;
-  margin-bottom: 20px;
+  margin-bottom: var(--df-spacing-view, var(--g-spacing-5));
 }
 .df-view-row:last-child {
-  margin-bottom: 0;
+  margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
 }
 .df-view-row__left {
-  width: 300px;
-  max-width: 300px;
-  min-width: 300px;
+  width: var(--df-view-row-left-width, 300px);
+  max-width: var(--df-view-row-left-max-width, 300px);
+  min-width: var(--df-view-row-left-min-width, 300px);
   display: flex;
   align-items: baseline;
   overflow: hidden;
 }
 .df-view-row__note {
-  margin-inline-start: var(--g-spacing-half);
+  margin-inline-start: var(--df-view-row-note-margin-inline-start, var(--g-spacing-half));
 }
 .df-view-row__dots {
-  min-width: 40px;
+  min-width: var(--df-view-row-dots-min-width, 40px);
   flex-grow: 1;
-  margin: 0 2px;
+  margin: var(--df-view-row-dots-margin, var(--g-spacing-0) var(--g-spacing-half));
   border-bottom: 1px dotted var(--g-color-text-secondary);
 }
 .df-view-row__right {
-  max-width: 480px;
+  max-width: var(--df-view-row-right-width, 480px);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 .df-view-row__right > .df-view-transparent {
-  margin-bottom: 6px;
+  margin-bottom: var(--df-view-row-right-child-view-transparent-margin-bottom, 6px);
 }
 .df-view-row__right > .df-view-transparent:last-child {
-  margin-bottom: 0;
+  margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
 }
 .df-view-row:hover > .df-copy-button {
   display: block;

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

@@ -1,20 +1,58 @@
+/*
+@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 */
+/*
+@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-view-table-cell {
   display: flex;
 }
 .df-view-table-cell__inner {
-  max-width: 100%;
+  max-width: var(--df-view-table-cell-inner-max-width, 100%);
   display: flex;
   flex-direction: column;
   justify-content: center;
 }
 .df-view-table-cell__inner > .df-view-row:last-child {
-  margin-bottom: 0;
+  margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
 }
 .df-view-table-cell__inner > .df-view-transparent {
-  margin-bottom: 6px;
+  margin-bottom: var(--df-view-table-cell-inner-child-view-transparent-margin-bottom, 6px);
 }
 .df-view-table-cell__inner > .df-view-transparent:last-child {
-  margin-bottom: 0;
+  margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
 }
 .df-view-table-cell:hover > .df-copy-button {
   display: block;

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

@@ -1,14 +1,52 @@
+/*
+@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 */
+/*
+@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-view-transparent {
   display: flex;
-  margin-bottom: 20px;
+  margin-bottom: var(--df-spacing-view, var(--g-spacing-5));
 }
 .df-view-transparent:last-child {
-  margin-bottom: 0;
+  margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
 }
 .df-view-transparent:hover > .df-copy-button {
   display: block;
 }
 .df-view-transparent__inner {
-  max-width: 100%;
-  width: 100%;
+  max-width: var(--df-view-transparent-inner-max-width, 100%);
+  width: var(--df-view-transparent-inner-width, 100%);
 }

package/build/esm/lib/kit/components/ViewLayouts/index.d.ts

@@ -3,6 +3,7 @@ export * from './ViewCardAccordeon';
 export * from './ViewAccordeonCard';
 export * from './ViewCardSection';
 export * from './ViewRow';
+export * from './ViewColumn';
 export * from './ViewSection';
 export * from './ViewTableCell';
 export * from './ViewTransparent';

package/build/esm/lib/kit/components/ViewLayouts/index.js

@@ -3,6 +3,7 @@ export * from './ViewCardAccordeon';
 export * from './ViewAccordeonCard';
 export * from './ViewCardSection';
 export * from './ViewRow';
+export * from './ViewColumn';
 export * from './ViewSection';
 export * from './ViewTableCell';
 export * from './ViewTransparent';

package/build/esm/lib/kit/components/Views/ArrayBaseView/ArrayBaseView.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-view__item-prefix {
-  margin-bottom: 6px;
+  margin-bottom: var(--df-array-base-view-item-prefix-margin-bottom, 6px);
 }

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

@@ -1,27 +1,45 @@
+/*
+@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-view {
   display: flex;
 }
 .df-checkbox-group-view > *:not(:last-child) {
-  margin-right: 6px;
+  margin-right: var(--df-checkbox-group-view-child-margin-right, 6px);
 }
 .df-checkbox-group-view_vertical {
   flex-direction: column;
   align-items: flex-start;
 }
 .df-checkbox-group-view_vertical > *:not(:last-child) {
-  margin-right: 0px;
-  margin-bottom: 6px;
+  margin: var(--df-checkbox-group-view-vertical-child-margin, var(--g-spacing-0) var(--g-spacing-0) 6px);
 }
 .df-checkbox-group-view__tooltip {
   overflow-wrap: break-word;
 }
 .df-checkbox-group-view__tooltip-container {
-  max-width: 100%;
+  max-width: var(--df-tooltip-container-max-width, 100%);
   overflow: hidden;
   text-overflow: ellipsis;
   display: block;
-  margin-bottom: 6px;
+  margin-bottom: var(--df-tooltip-container-margin-bottom, 6px);
 }
 .df-checkbox-group-view__tooltip-container:last-child {
-  margin-bottom: 0;
+  margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
 }

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

@@ -1,4 +1,23 @@
+/*
+@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-base-view {
   border: 1px solid var(--g-color-line-generic);
-  width: 550px;
+  width: var(--df-monaco-base-view-width, 550px);
 }

package/build/esm/lib/kit/components/Views/MonacoInputView/MonacoViewDialog.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-view-dialog .g-dialog-footer {
-  padding: 10px 32px 32px;
+  padding: var(--df-monaco-view-dialog-footer-padding, 10px var(--g-spacing-8) var(--g-spacing-8));
 }
 .df-monaco-view-dialog__container {
   border: 1px solid var(--g-color-line-generic);
 }
 .df-monaco-view-dialog__dialog-header {
-  height: 48px;
+  height: var(--df-monaco-view-dialog-header-height, 48px);
 }

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

@@ -1,21 +1,40 @@
+/*
+@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-view__tooltip {
   overflow-wrap: break-word;
 }
 .df-multi-oneof-view__tooltip-container {
-  max-width: 100%;
+  max-width: var(--df-tooltip-container-max-width, 100%);
   overflow: hidden;
   text-overflow: ellipsis;
   display: block;
-  margin-bottom: 6px;
+  margin-bottom: var(--df-tooltip-container-margin-bottom, 6px);
 }
 .df-multi-oneof-view__tooltip-container:last-child {
-  margin-bottom: 0;
+  margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
 }
 .df-multi-oneof-view__content_multiple-values > .df-group-indent {
-  padding-top: 0px;
+  padding-top: var(--df-multi-oneof-view-content-multiple-values-child-padding-top, var(--g-spacing-0));
 }
 .df-multi-oneof-view__content_flat > .df-group-indent {
-  margin: 0 0 20px;
+  margin: var(--df-multi-oneof-view-content-flat-child-margin, var(--g-spacing-0) var(--g-spacing-0) var(--g-spacing-5));
   border-left: none;
-  padding: 0;
+  padding: var(--df-multi-oneof-view-content-flat-child-padding, var(--g-spacing-0));
 }

package/build/esm/lib/kit/components/Views/MultiSelectView/MultiSelectView.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-multiselect-view__tooltip {
   overflow-wrap: break-word;
 }
 .df-multiselect-view__tooltip-container {
-  max-width: 100%;
+  max-width: var(--df-tooltip-container-max-width, 100%);
   overflow: hidden;
   text-overflow: ellipsis;
   display: block;
-  margin-bottom: 6px;
+  margin-bottom: var(--df-tooltip-container-margin-bottom, 6px);
 }
 .df-multiselect-view__tooltip-container:last-child {
-  margin-bottom: 0;
+  margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
 }

package/build/esm/lib/kit/components/Views/NumberWithScaleView/NumberWithScaleView.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-number-with-scale-view {
   display: flex;
 }
@@ -8,8 +27,8 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 100%;
+  max-width: var(--df-tooltip-container-max-width, 100%);
 }
 .df-number-with-scale-view__size {
-  margin-left: 2px;
+  margin-left: var(--df-number-with-scale-view-size-margin-left, var(--g-spacing-half));
 }

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

@@ -1,17 +1,35 @@
+/*
+@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-view__content_inline {
   display: flex;
 }
 .df-object-base-view__content_inline > div {
   flex: auto;
-  margin-right: 8px;
-  margin-bottom: 0;
+  margin: var(--df-object-base-view-content-inline-margin, var(--g-spacing-0) var(--g-spacing-2) var(--g-spacing-0) var(--g-spacing-0));
 }
 .df-object-base-view__content_inline > div:last-child {
-  margin-right: 0;
+  margin-right: var(--df-spacing-last-child, var(--g-spacing-0));
 }
 .df-object-base-view__delimiter {
   display: flex;
-  margin-right: 8px;
+  margin-right: var(--df-object-base-view-delimiter-right, var(--g-spacing-2));
   align-items: center;
   white-space: nowrap;
 }