@gravity-ui/dynamic-forms 4.14.3 → 4.16.0

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

package/build/cjs/lib/kit/components/Views/OneOfView/OneOfView.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-oneof-view > .df-group-indent {
-  margin-bottom: 20px;
+  margin-bottom: var(--df-spacing-inputs-section, var(--g-spacing-5));
 }
 .df-oneof-view:last-child > .df-group-indent {
-  margin-bottom: 0;
+  margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
 }
 .df-oneof-view_flat > .df-group-indent {
-  margin: 0 0 20px;
+  margin: var(--df-oneof-view-flat-child-margin, var(--g-spacing-0) var(--g-spacing-0) var(--g-spacing-5));
   border-left: none;
-  padding: 0;
+  padding: var(--df-oneof-view-flat-child-padding, var(--g-spacing-0));
 }

package/build/cjs/lib/kit/components/Views/TableArrayView/TableArrayView.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-table-array-view__table {
-  margin-bottom: 10px;
+  margin-bottom: var(--df-table-array-view-table-margin-bottom, 10px);
 }
 .df-table-array-view__cell {
-  max-width: 150px;
-  min-width: 150px;
+  max-width: var(--df-table-array-view-cell-min-width, 150px);
+  min-width: var(--df-table-array-view-cell-max-width, 150px);
 }
 .df-table-array-view__cell_arr, .df-table-array-view__cell_obj {
   max-width: unset;
 }
 .df-table-array-view__cell_arr > .simple-vertical-accordeon, .df-table-array-view__cell_obj > .simple-vertical-accordeon {
-  margin-bottom: 0;
+  margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
 }
 .df-table-array-view__cell_bool {
   max-width: 50px;

package/build/cjs/lib/kit/components/Views/TextAreaView/TextAreaView.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-area-view {
   display: flex;
 }
@@ -5,7 +24,7 @@
   cursor: pointer;
 }
 .df-text-area-view__chevron {
-  margin: 3px;
+  margin: var(--df-text-area-view-chevron-margin, 3px);
 }
 .df-text-area-view__chevron_open {
   transform: rotate(180deg);

package/build/cjs/lib/kit/constants/config.js

@@ -14,6 +14,7 @@ exports.dynamicConfig = {
         layouts: {
             row: components_1.Row,
             row_verbose: components_1.RowVerbose,
+            column: components_1.Column,
             accordeon: components_1.Accordeon,
             section: components_1.Section,
             section2: components_1.Section2,
@@ -37,6 +38,7 @@ exports.dynamicConfig = {
         layouts: {
             row: components_1.Row,
             row_verbose: components_1.RowVerbose,
+            column: components_1.Column,
             table_item: components_1.TableCell,
             transparent: components_1.Transparent,
         },
@@ -51,6 +53,7 @@ exports.dynamicConfig = {
         layouts: {
             row: components_1.Row,
             row_verbose: components_1.RowVerbose,
+            column: components_1.Column,
             table_item: components_1.TableCell,
             transparent: components_1.Transparent,
         },
@@ -75,6 +78,7 @@ exports.dynamicConfig = {
         layouts: {
             row: components_1.Row,
             row_verbose: components_1.RowVerbose,
+            column: components_1.Column,
             accordeon: components_1.Accordeon,
             section: components_1.Section,
             section2: components_1.Section2,
@@ -104,6 +108,7 @@ exports.dynamicConfig = {
         layouts: {
             row: components_1.Row,
             row_verbose: components_1.RowVerbose,
+            column: components_1.Column,
             table_item: components_1.TableCell,
             transparent: components_1.Transparent,
             section: components_1.Section,
@@ -129,6 +134,7 @@ exports.dynamicViewConfig = {
         layouts: {
             row: components_1.ViewRow,
             row_verbose: components_1.ViewRow,
+            column: components_1.ViewColumn,
             accordeon: components_1.ViewAccordeon,
             section: components_1.ViewSection,
             section2: components_1.ViewSection2,
@@ -149,6 +155,7 @@ exports.dynamicViewConfig = {
         layouts: {
             row: components_1.ViewRow,
             row_verbose: components_1.ViewRow,
+            column: components_1.ViewColumn,
             table_item: components_1.ViewTableCell,
             transparent: components_1.ViewTransparent,
         },
@@ -160,6 +167,7 @@ exports.dynamicViewConfig = {
         layouts: {
             row: components_1.ViewRow,
             row_verbose: components_1.ViewRow,
+            column: components_1.ViewColumn,
             table_item: components_1.ViewTableCell,
             transparent: components_1.ViewTransparent,
         },
@@ -181,6 +189,7 @@ exports.dynamicViewConfig = {
         layouts: {
             row: components_1.ViewRow,
             row_verbose: components_1.ViewRow,
+            column: components_1.ViewColumn,
             accordeon: components_1.ViewAccordeon,
             section: components_1.ViewSection,
             section2: components_1.ViewSection2,
@@ -207,6 +216,7 @@ exports.dynamicViewConfig = {
         layouts: {
             row: components_1.ViewRow,
             row_verbose: components_1.ViewRow,
+            column: components_1.ViewColumn,
             table_item: components_1.ViewTableCell,
             transparent: components_1.ViewTransparent,
             section: components_1.ViewSection,

package/build/cjs/lib/kit/hooks/useOneOf/useOneOf.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-use-oneof__toggler_radio > .df-row {
   width: unset;
   max-width: unset;
 }
 .df-use-oneof__toggler_card + .df-group-indent > .df-use-search:not(.df-group-indent) {
-  padding-top: 0px;
-  margin-top: 15px;
+  padding-top: var(--df-use-oneof-card-child-padding, var(--g-spacing-0));
+  margin-top: var(--df-spacing-inputs, 15px);
 }
 .df-use-oneof__card {
   display: flex;
 }
 .df-use-oneof__card > * {
-  margin-right: 8px;
+  margin-right: var(--df-use-oneof-card-margin-right, var(--g-spacing-2));
 }
 .df-use-oneof__card > :last-child {
-  margin-right: 0;
+  margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
 }
 .df-use-oneof__checkbox {
-  height: 28px;
+  height: var(--df-use-oneof-checkbox-height, 28px);
   display: flex;
   align-items: center;
 }

package/build/cjs/lib/kit/styles/mixins.css

@@ -0,0 +1,19 @@
+/*
+@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 */

package/build/cjs/lib/kit/styles/variables.css

@@ -0,0 +1,19 @@
+/*
+@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 */

package/build/cjs/lib/kit/utils/common.js

@@ -42,7 +42,7 @@ const isNotEmptyValue = (value, spec) => {
 };
 exports.isNotEmptyValue = isNotEmptyValue;
 const prepareSpec = (spec, parseJsonDefaultValue, overridePatternError) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     if ((0, isObjectLike_1.default)(spec)) {
         const result = (0, cloneDeep_1.default)(spec);
         if ((0, isString_1.default)(result.type)) {
@@ -54,7 +54,7 @@ const prepareSpec = (spec, parseJsonDefaultValue, overridePatternError) => {
                 try {
                     _defaultValue = JSON.parse(result.defaultValue);
                 }
-                catch (_j) {
+                catch (_l) {
                     _defaultValue = undefined;
                 }
             }
@@ -85,6 +85,10 @@ const prepareSpec = (spec, parseJsonDefaultValue, overridePatternError) => {
             result.viewSpec.textContentParams.themeLabel =
                 result.viewSpec.textContentParams.themeLabel.toLowerCase();
         }
+        if ((0, isString_1.default)((_k = (_j = result.viewSpec) === null || _j === void 0 ? void 0 : _j.textContentParams) === null || _k === void 0 ? void 0 : _k.themeAlert)) {
+            result.viewSpec.textContentParams.themeAlert =
+                result.viewSpec.textContentParams.themeAlert.toLowerCase();
+        }
         if ((0, isString_1.default)(result.validator)) {
             result.validator = result.validator.toLowerCase();
         }

package/build/esm/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/esm/lib/core/components/Form/types/field.d.ts

@@ -28,5 +28,6 @@ export interface FieldRenderProps<Value extends FieldValue> {
         valid: boolean;
         visited: boolean;
         submitFailed: boolean;
+        childErrors: Record<string, ValidateError>;
     };
 }

package/build/esm/lib/core/types/specs.d.ts

@@ -1,4 +1,4 @@
-import { LabelProps } from '@gravity-ui/uikit';
+import { AlertProps, LabelProps } from '@gravity-ui/uikit';
 import { ColorTextBaseProps } from '@gravity-ui/uikit/build/esm/components/Text/colorText/colorText';
 import { ReadAsMethod, SpecTypes } from '../constants';
 import { ArrayValue, ObjectValue } from './';
@@ -149,6 +149,8 @@ export interface StringSpec<LinkType = any, InputComponentProps extends Record<s
             text: string;
             icon?: string;
             iconColor?: ColorTextBaseProps['color'];
+            titleAlert?: string;
+            themeAlert?: AlertProps['theme'];
         };
         fileInput?: {
             accept?: string;

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