@gravity-ui/dynamic-forms 4.14.3 → 4.16.0

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));
 }

package/build/esm/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/esm/lib/kit/components/Layouts/Column/Column.d.ts

@@ -0,0 +1,3 @@
+import { FieldValue, LayoutProps, Spec } from '../../../../core';
+import './Column.css';
+export declare const Column: <T extends FieldValue, S extends Spec<any, undefined, undefined>>(props: LayoutProps<T, undefined, undefined, S>) => JSX.Element;

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { HelpPopover } from '@gravity-ui/components';
+import { TrashBin } from '@gravity-ui/icons';
+import { Button, Icon, Text } from '@gravity-ui/uikit';
+import { isArrayItem, isArraySpec, isObjectSpec, withGenerateButton, } from '../../../../core';
+import { ErrorWrapper, GenerateRandomValueButton } from '../../../components';
+import { block } from '../../../utils';
+import './Column.css';
+const b = block('column');
+const ColumnBase = ({ name, spec, input, meta, children, }) => {
+    const arrayItem = React.useMemo(() => isArrayItem(name), [name]);
+    const generateButton = React.useMemo(() => withGenerateButton(spec), [spec]);
+    return (React.createElement("div", { className: b() },
+        React.createElement("div", { className: b('first-row') },
+            React.createElement("div", { className: b('first-row-inner') },
+                React.createElement(Text, { className: b('title', { required: spec.required }) }, spec.viewSpec.layoutTitle),
+                spec.viewSpec.layoutDescription ? (React.createElement("span", { className: b('note') },
+                    React.createElement(Text, { className: b('note-inner') },
+                        React.createElement(HelpPopover, { htmlContent: spec.viewSpec.layoutDescription, placement: ['bottom', 'top'] })))) : null)),
+        React.createElement("div", { className: b('second-row') },
+            React.createElement("div", { className: b('second-row-inner') },
+                React.createElement(ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: 
+                    // TODO: remove condition spec.viewSpec.type !== 'select'
+                    (isArraySpec(spec) && spec.viewSpec.type !== 'select') ||
+                        isObjectSpec(spec), className: b('error-wrapper') }, children),
+                generateButton ? (React.createElement(GenerateRandomValueButton, { spec: spec, onChange: input.onChange })) : null,
+                arrayItem ? (React.createElement(Button, { view: "flat-secondary", className: b('remove-button'), onClick: input.onDrop, qa: `${name}-remove-item` },
+                    React.createElement(Icon, { data: TrashBin, size: 16 }))) : null))));
+};
+export const Column = (props) => React.createElement(ColumnBase, Object.assign({}, props));

package/build/esm/lib/kit/components/Layouts/Column/index.d.ts

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

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

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

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

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

@@ -1,12 +1,31 @@
+/*
+@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-transparent {
   display: flex;
-  margin-bottom: 15px;
+  margin-bottom: var(--df-spacing-inputs, 15px);
 }
 .df-transparent:last-child {
-  margin-bottom: 0;
+  margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
 }
 .df-transparent_array-item {
-  max-width: 338px;
+  max-width: var(--df-transparent-array-item-max-width, 338px);
 }
 .df-transparent_without-max-width {
   max-width: unset;
@@ -15,5 +34,5 @@
   width: auto;
 }
 .df-transparent__remove-button {
-  margin-left: 5px;
+  margin-left: var(--df-remove-button-margin-left, 5px);
 }

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

@@ -3,6 +3,7 @@ export * from './AccordeonCard';
 export * from './CardAccordeon';
 export * from './CardSection';
 export * from './Row';
+export * from './Column';
 export * from './Section';
 export * from './TableCell';
 export * from './Transparent';

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

@@ -3,6 +3,7 @@ export * from './AccordeonCard';
 export * from './CardAccordeon';
 export * from './CardSection';
 export * from './Row';
+export * from './Column';
 export * from './Section';
 export * from './TableCell';
 export * from './Transparent';

package/build/esm/lib/kit/components/LongValue/LongValue.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-long-value {
-  max-width: 100%;
+  max-width: var(--df-long-value-max-width, 100%);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

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

@@ -1,12 +1,31 @@
+/*
+@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-simple-vertical-accordeon {
-  margin-bottom: 20px;
+  margin-bottom: var(--df-spacing-inputs-section, var(--g-spacing-5));
 }
 .df-simple-vertical-accordeon:last-child {
-  margin-bottom: 0;
+  margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
 }
 .df-simple-vertical-accordeon_branch .df-simple-vertical-accordeon__body {
-  padding-left: 20px;
-  margin-left: 5px;
+  padding-left: var(--df-simple-vertical-accordeon-body-padding-left, var(--g-spacing-5));
+  margin-left: var(--df-simple-vertical-accordeon-body-margin-left, 5px);
   border-left: 1px solid var(--g-color-line-generic-accent);
 }
 .df-simple-vertical-accordeon__header {
@@ -14,14 +33,14 @@
   align-items: center;
 }
 .df-simple-vertical-accordeon__header-inner {
-  margin-left: -13px;
-  max-width: 533px;
+  margin-left: var(--df-simple-vertical-accordeon-header-inner-margin-left, -13px);
+  max-width: var(--df-simple-vertical-accordeon-header-inner-max-width, 533px);
 }
 .df-simple-vertical-accordeon__header .g-popover__handler {
   display: flex;
 }
 .df-simple-vertical-accordeon__tooltip {
-  margin: 0px 5px;
+  margin: var(--df-simple-vertical-accordeon-tooltip-margin, var(--g-spacing-0) 5px);
 }
 .df-simple-vertical-accordeon__chevron {
   transform: rotate(-90deg);
@@ -30,8 +49,8 @@
   transform: none;
 }
 .df-simple-vertical-accordeon__body {
-  margin-top: 4px;
-  padding-top: 6px;
+  margin-top: var(--df-simple-vertical-accordeon-body-margin-top, var(--g-spacing-1));
+  padding-top: var(--df-simple-vertical-accordeon-body-padding-top, 6px);
 }
 .df-simple-vertical-accordeon__body_hidden {
   display: none;