survey-creator-core 1.12.6 → 1.12.7

package/survey-creator-core.css

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator v1.12.6
+ * SurveyJS Creator v1.12.7
  * (c) 2015-2024 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -228,7 +228,7 @@
 }
 
 /*# sourceMappingURL=fonts.fontless.css.map*//*!
- * SurveyJS Creator v1.12.6
+ * SurveyJS Creator v1.12.7
  * (c) 2015-2024 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -357,7 +357,7 @@ svc-tab-json-editor-textarea {
 }
 
 .svc-json-error {
-  font-family: var(--sjs-font-family, var(--font-family));
+  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
   font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   padding: var(--sjs-base-unit, var(--base-unit, 8px)) var(--sjs-base-unit, var(--base-unit, 8px)) var(--sjs-base-unit, var(--base-unit, 8px)) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -556,11 +556,13 @@ svc-tab-test {
 }
 .svc-test-tab__content-actions .sv-action-bar-item {
   --small-bold-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
-  font-family: var(--sjs-font-family, var(--font-family));
+  --ctr-small-bold-font-size: calc(0.75 * var(--small-bold-font-size));
+  --ctr-small-bold-line-height: var(--small-bold-font-size);
+  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
   font-style: normal;
   font-weight: 600;
-  font-size: calc(0.75 * var(--small-bold-font-size));
-  line-height: var(--sjs-font-size, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: var(--ctr-font-small-size, var(--ctr-small-bold-font-size, 12px));
+  line-height: var(--ctr-font-small-line-height, var(--ctr-small-bold-line-height, 16px));
   width: 100%;
   height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   transition: background-color var(--sjs-creator-transition-duration, 150ms);
@@ -584,7 +586,7 @@ svc-tab-test {
 }
 
 .svc-test-tab__content .sd-body--empty {
-  font-family: var(--sjs-font-family, var(--font-family));
+  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
   font-style: normal;
   font-weight: 400;
   font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -670,12 +672,13 @@ svc-tab-test {
 .sl-table__cell .svc-action-button:focus,
 .sl-table__cell .svc-action-button:hover:enabled,
 .sl-table__cell .svc-action-button:focus:enabled {
-  --medium-bold-font-size: var(--sjs-base-unit, var(--base-unit, 8px));
-  font-family: var(--sjs-font-family, var(--font-family));
+  --ctr-medium-bold-font-size: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  --ctr-medium-bold-line-height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
   font-style: normal;
-  font-weight: bold;
-  font-size: calc(3 * var(--medium-bold-font-size));
-  line-height: calc(4 * var(--medium-bold-font-size));
+  font-weight: 700;
+  font-size: var(--ctr-font-medium-size, var(--ctr-medium-bold-font-size, 24px));
+  line-height: var(--ctr-font-medium-line-height, var(--ctr-medium-bold-line-height, 32px));
   background: transparent;
   outline: none;
   border: none;
@@ -692,7 +695,7 @@ svc-tab-test {
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   font-weight: bold;
   font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  font-family: var(--sjs-font-family, var(--font-family));
+  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
   vertical-align: top;
   padding: 0;
   width: 100%;
@@ -765,7 +768,7 @@ svc-tab-test {
   margin: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 0 0;
   color: var(--ctr-expression-item-text-color-button, var(--sjs-primary-backcolor, var(--primary, #19b394)));
   background-color: var(--ctr-expression-item-background-color-button, var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1))));
-  font-family: var(--sjs-font-family, var(--font-family));
+  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
   font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   display: flex;
@@ -1076,7 +1079,7 @@ svc-tab-test {
 
 .st-no-strings {
   --center-text-font-size: var(--sjs-base-unit, var(--base-unit, 8px));
-  font-family: var(--sjs-font-family, var(--font-family));
+  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
   font-style: normal;
   font-weight: 400;
   font-size: calc(2 * var(--center-text-font-size));
@@ -1131,11 +1134,13 @@ svc-tab-test {
 .st-title.st-panel__title,
 .st-table__cell.st-table__cell--header {
   --small-bold-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
-  font-family: var(--sjs-font-family, var(--font-family));
+  --ctr-small-bold-font-size: calc(0.75 * var(--small-bold-font-size));
+  --ctr-small-bold-line-height: var(--small-bold-font-size);
+  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
   font-style: normal;
   font-weight: 600;
-  font-size: calc(0.75 * var(--small-bold-font-size));
-  line-height: var(--sjs-font-size, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: var(--ctr-font-small-size, var(--ctr-small-bold-font-size, 12px));
+  line-height: var(--ctr-font-small-line-height, var(--ctr-small-bold-line-height, 16px));
   text-align: left;
 }
 
@@ -1169,11 +1174,12 @@ svc-tab-test {
 
 td.st-table__cell:first-of-type {
   --default-bold-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
-  font-family: var(--sjs-font-family, var(--font-family));
+  --ctr-default-bold-line-height: calc(1.5 * var(--default-bold-font-size));
+  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
   font-style: normal;
   font-weight: 600;
-  font-size: var(--sjs-font-size, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
-  line-height: calc(1.5 * var(--default-bold-font-size));
+  font-size: var(--ctr-font-default-size, var(--default-bold-font-size, 16px));
+  line-height: var(--ctr-font-default-line-height, var(--ctr-default-bold-line-height, 24px));
   color: var(--ctr-string-table-row-text-color-title, var(--sjs-general-forecolor, var(--foreground, #161616)));
   max-width: 300px;
   padding-right: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -1196,10 +1202,11 @@ td.st-table__cell:first-of-type span {
 
 .st-comment {
   --default-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
-  font-family: var(--sjs-font-family, var(--font-family));
-  font-style: normal;
-  font-size: var(--sjs-font-size, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
-  line-height: calc(1.5 * var(--default-font-size));
+  --ctr-default-line-height: calc(1.5 * var(--default-font-size));
+  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
+  font-weight: 400;
+  font-size: var(--ctr-font-default-size, var(--default-font-size, 16px));
+  line-height: var(--ctr-font-default-line-height, var(--ctr-default-line-height, 24px));
   display: block;
   width: calc(100% - 3 * var(--sjs-base-unit, var(--base-unit, 8px)));
   border: unset;
@@ -1277,7 +1284,7 @@ td.st-table__cell:first-of-type span {
 .st-translation-machine-from__btn:disabled .sd-action__title,
 .st-translation-machine-from__title {
   color: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
-  font-family: var(--sjs-font-family, var(--font-family));
+  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
   font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   font-weight: 400;
@@ -1373,7 +1380,7 @@ td.st-table__cell:first-of-type span {
   border: none;
   outline: none;
   font-weight: 600;
-  font-family: var(--sjs-font-family, var(--font-family));
+  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
   font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   color: var(--ctr-expression-item-text-color-parameter-empty, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
   height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -1568,7 +1575,7 @@ td.st-table__cell:first-of-type span {
 }
 
 .svc-logic-paneldynamic {
-  font-family: var(--sjs-font-family, var(--font-family));
+  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
 }
 .svc-logic-paneldynamic .sd-row--multiple {
   padding: 0;
@@ -1639,7 +1646,7 @@ td.st-table__cell:first-of-type span {
 }
 
 .svc-logic-placeholder__text {
-  font-family: var(--sjs-font-family, var(--font-family));
+  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
   font-style: normal;
   font-weight: 400;
   font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -1737,6 +1744,7 @@ svc-tab-designer {
 
 .svc-designer-header {
   border-bottom: 2px solid transparent;
+  position: relative;
 }
 .svc-designer-header h3.sd-title .sv-string-editor[aria-placeholder]:empty:before {
   color: var(--ctr-survey-header-text-title-color-placeholder, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
@@ -1957,11 +1965,13 @@ svc-tab-test {
 }
 .svc-test-tab__content-actions .sv-action-bar-item {
   --small-bold-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
-  font-family: var(--sjs-font-family, var(--font-family));
+  --ctr-small-bold-font-size: calc(0.75 * var(--small-bold-font-size));
+  --ctr-small-bold-line-height: var(--small-bold-font-size);
+  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
   font-style: normal;
   font-weight: 600;
-  font-size: calc(0.75 * var(--small-bold-font-size));
-  line-height: var(--sjs-font-size, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: var(--ctr-font-small-size, var(--ctr-small-bold-font-size, 12px));
+  line-height: var(--ctr-font-small-line-height, var(--ctr-small-bold-line-height, 16px));
   width: 100%;
   height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
@@ -1986,7 +1996,7 @@ svc-tab-test {
 
 .svc-switcher__title {
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
-  font-family: var(--sjs-font-family, var(--font-family));
+  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
   font-size: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   font-style: normal;
   font-weight: 600;
@@ -2082,11 +2092,13 @@ svc-tab-test {
   z-index: 1600;
   visibility: hidden;
   --small-bold-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
-  font-family: var(--sjs-font-family, var(--font-family));
+  --ctr-small-bold-font-size: calc(0.75 * var(--small-bold-font-size));
+  --ctr-small-bold-line-height: var(--small-bold-font-size);
+  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
   font-style: normal;
   font-weight: 600;
-  font-size: calc(0.75 * var(--small-bold-font-size));
-  line-height: var(--sjs-font-size, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: var(--ctr-font-small-size, var(--ctr-small-bold-font-size, 12px));
+  line-height: var(--ctr-font-small-line-height, var(--ctr-small-bold-line-height, 16px));
 }
 
 .svc-notifier.svc-notifier--error {
@@ -2264,7 +2276,7 @@ svc-tab-test {
 }
 .svc-creator-popup.sv-popup--modal .sd-btn.sv-popup__button span {
   text-align: center;
-  font-family: var(--ctr-default-bold-font-family, var(--sjs-font-family, var(--font-family)));
+  font-family: var(--ctr-default-bold-font-family, var(--ctr-font-family, var(--sjs-font-family, var(--font-family))));
   font-size: var(--ctr-default-bold-font-size, var(--sjs-font-size, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))))));
   line-height: var(--ctr-default-bold-line-height, calc(1.5 * var(--default-font-size)));
   font-weight: var(--ctr-default-bold-font-weight, 600);
@@ -2531,11 +2543,12 @@ survey-creator .sv-drag-drop-choices-shortcut .sv-drag-drop-choices-shortcut__co
 .svc-creator__non-commercial-text {
   color: var(--ctr-page-banner-text-color, var(--sjs-primary-forecolor, var(--primary-foreground, #fff)));
   --default-bold-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
-  font-family: var(--sjs-font-family, var(--font-family));
+  --ctr-default-bold-line-height: calc(1.5 * var(--default-bold-font-size));
+  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
   font-style: normal;
   font-weight: 600;
-  font-size: var(--sjs-font-size, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
-  line-height: calc(1.5 * var(--default-bold-font-size));
+  font-size: var(--ctr-font-default-size, var(--default-bold-font-size, 16px));
+  line-height: var(--ctr-font-default-line-height, var(--ctr-default-bold-line-height, 24px));
   vertical-align: middle;
   padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(16 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   display: block;
@@ -2630,7 +2643,7 @@ survey-creator .sv-drag-drop-choices-shortcut .sv-drag-drop-choices-shortcut__co
   vertical-align: top;
   margin-inline-start: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   font-size: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  font-family: var(--sjs-font-family, var(--font-family));
+  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
   font-weight: 400;
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
   line-height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -2743,6 +2756,130 @@ survey-creator .sv-drag-drop-choices-shortcut .sv-drag-drop-choices-shortcut__co
 /*!*********************************************************************************************************************************************************************************!*\
   !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/creator-theme/creator.scss ***!
   \*********************************************************************************************************************************************************************************/
+.svc-creator {
+  --sjs-spacing-x2: calc(var(--ctr-spacing-unit, 8px) * 2);
+  --sjs-spacing-x3: calc(var(--ctr-spacing-unit, 8px) * 3);
+  --sjs-spacing-x1: calc(var(--ctr-spacing-unit, 8px) * 1);
+  --sjs-spacing-x05: calc(var(--ctr-spacing-unit, 8px) * 0.5);
+  --sjs-spacing-x025: calc(var(--ctr-spacing-unit, 8px) * 0.25);
+  --sjs-spacing-x0125: calc(var(--ctr-spacing-unit, 8px) * 0.125);
+  --sjs-spacing-x150: calc(var(--ctr-spacing-unit, 8px) * 1.5);
+  --sjs-spacing-x250: calc(var(--ctr-spacing-unit, 8px) * 2.5);
+  --sjs-spacing-x4: calc(var(--ctr-spacing-unit, 8px) * 4);
+  --sjs-spacing-x350: calc(var(--ctr-spacing-unit, 8px) * 3.5);
+  --sjs-spacing-x5: calc(var(--ctr-spacing-unit, 8px) * 5);
+  --sjs-spacing-x6: calc(var(--ctr-spacing-unit, 8px) * 6);
+  --sjs-spacing-x7: calc(var(--ctr-spacing-unit, 8px) * 7);
+  --sjs-spacing-x8: calc(var(--ctr-spacing-unit, 8px) * 8);
+  --sjs-spacing-x9: calc(var(--ctr-spacing-unit, 8px) * 9);
+  --sjs-spacing-x10: calc(var(--ctr-spacing-unit, 8px) * 10);
+  --sjs-spacing-x11: calc(var(--ctr-spacing-unit, 8px) * 11);
+  --sjs-spacing-x12: calc(var(--ctr-spacing-unit, 8px) * 12);
+  --sjs-spacing-x13: calc(var(--ctr-spacing-unit, 8px) * 13);
+  --sjs-spacing-x14: calc(var(--ctr-spacing-unit, 8px) * 14);
+  --sjs-spacing-x15: calc(var(--ctr-spacing-unit, 8px) * 15);
+  --sjs-spacing-x16: calc(var(--ctr-spacing-unit, 8px) * 16);
+  --sjs-spacing-x075: calc(var(--ctr-spacing-unit, 8px) * 0.75);
+  --sjs-spacing-x125: calc(var(--ctr-spacing-unit, 8px) * 1.25);
+  --sjs-spacing-x1050: calc(var(--ctr-spacing-unit, 8px) * 10.5);
+  --sjs-spacing-x0375: calc(var(--ctr-spacing-unit, 8px) * 0.375);
+  --sjs-spacing-x850: calc(var(--ctr-spacing-unit, 8px) * 8.5);
+  --sjs-spacing-x025n: -calc(var(--ctr-spacing-unit, 8px) * 0.25);
+  --sjs-spacing-x3n: -calc(var(--ctr-spacing-unit, 8px) * 3);
+  --sjs-spacing-x4n: -calc(var(--ctr-spacing-unit, 8px) * 4);
+  --sjs-spacing-x05n: -calc(var(--ctr-spacing-unit, 8px) * 0.5);
+  --sjs-spacing-x1n: -calc(var(--ctr-spacing-unit, 8px) * 1);
+  --sjs-spacing-x150n: -calc(var(--ctr-spacing-unit, 8px) * 1.5);
+  --sjs-spacing-x2n: -calc(var(--ctr-spacing-unit, 8px) * 2);
+  --sjs-spacing-x5n: -calc(var(--ctr-spacing-unit, 8px) * 5);
+  --sjs-spacing-x6n: -calc(var(--ctr-spacing-unit, 8px) * 6);
+  --sjs-spacing-x7n: -calc(var(--ctr-spacing-unit, 8px) * 7);
+  --sjs-spacing-x8n: -calc(var(--ctr-spacing-unit, 8px) * 8);
+  --sjs-corner-radius-x0125: calc(var(--ctr-corner-radius-unit, 8px) * 0.125);
+  --sjs-corner-radius-x025: calc(var(--ctr-corner-radius-unit, 8px) * 0.25);
+  --sjs-corner-radius-x05: calc(var(--ctr-corner-radius-unit, 8px) * 0.5);
+  --sjs-corner-radius-x075: calc(var(--ctr-corner-radius-unit, 8px) * 0.75);
+  --sjs-corner-radius-x1: calc(var(--ctr-corner-radius-unit, 8px) * 1);
+  --sjs-corner-radius-x125: calc(var(--ctr-corner-radius-unit, 8px) * 1.25);
+  --sjs-corner-radius-x150: calc(var(--ctr-corner-radius-unit, 8px) * 1.5);
+  --sjs-corner-radius-x2: calc(var(--ctr-corner-radius-unit, 8px) * 2);
+  --sjs-corner-radius-x250: calc(var(--ctr-corner-radius-unit, 8px) * 2.5);
+  --sjs-corner-radius-x3: calc(var(--ctr-corner-radius-unit, 8px) * 3);
+  --sjs-corner-radius-x350: calc(var(--ctr-corner-radius-unit, 8px) * 3.5);
+  --sjs-corner-radius-x4: calc(var(--ctr-corner-radius-unit, 8px) * 4);
+  --sjs-corner-radius-x5: calc(var(--ctr-corner-radius-unit, 8px) * 5);
+  --sjs-corner-radius-x6: calc(var(--ctr-corner-radius-unit, 8px) * 6);
+  --sjs-corner-radius-x7: calc(var(--ctr-corner-radius-unit, 8px) * 7);
+  --sjs-corner-radius-x8: calc(var(--ctr-corner-radius-unit, 8px) * 8);
+  --sjs-corner-radius-round: calc(var(--ctr-corner-radius-unit, 8px) * 128);
+  --sjs-corner-radius-x0375: calc(var(--ctr-corner-radius-unit, 8px) * 0.375);
+  --sjs-stroke-x1: calc(var(--ctr-stroke-unit, 1px) * 0.125);
+  --sjs-stroke-x2: calc(var(--ctr-stroke-unit, 1px) * 0.25);
+  --sjs-stroke-x3: calc(var(--ctr-stroke-unit, 1px) * 0.375);
+  --sjs-stroke-x4: calc(var(--ctr-stroke-unit, 1px) * 0.5);
+  --sjs-stroke-x6: calc(var(--ctr-stroke-unit, 1px) * 0.75);
+  --sjs-stroke-x8: calc(var(--ctr-stroke-unit, 1px) * 1);
+  --sjs-size-x0125: calc(var(--ctr-size-unit, 8px) * 0.125);
+  --sjs-size-x025: calc(var(--ctr-size-unit, 8px) * 0.25);
+  --sjs-size-x05: calc(var(--ctr-size-unit, 8px) * 0.5);
+  --sjs-size-x075: calc(var(--ctr-size-unit, 8px) * 0.75);
+  --sjs-size-x1: calc(var(--ctr-size-unit, 8px) * 1);
+  --sjs-size-x125: calc(var(--ctr-size-unit, 8px) * 1.25);
+  --sjs-size-x150: calc(var(--ctr-size-unit, 8px) * 1.5);
+  --sjs-size-x2: calc(var(--ctr-size-unit, 8px) * 2);
+  --sjs-size-x250: calc(var(--ctr-size-unit, 8px) * 2.5);
+  --sjs-size-x3: calc(var(--ctr-size-unit, 8px) * 3);
+  --sjs-size-x350: calc(var(--ctr-size-unit, 8px) * 3.5);
+  --sjs-size-x4: calc(var(--ctr-size-unit, 8px) * 4);
+  --sjs-size-x5: calc(var(--ctr-size-unit, 8px) * 5);
+  --sjs-size-x6: calc(var(--ctr-size-unit, 8px) * 6);
+  --sjs-size-x7: calc(var(--ctr-size-unit, 8px) * 7);
+  --sjs-size-x8: calc(var(--ctr-size-unit, 8px) * 8);
+  --sjs-size-x9: calc(var(--ctr-size-unit, 8px) * 9);
+  --sjs-size-x10: calc(var(--ctr-size-unit, 8px) * 10);
+  --sjs-size-x11: calc(var(--ctr-size-unit, 8px) * 11);
+  --sjs-size-x12: calc(var(--ctr-size-unit, 8px) * 12);
+  --sjs-size-x13: calc(var(--ctr-size-unit, 8px) * 13);
+  --sjs-size-x14: calc(var(--ctr-size-unit, 8px) * 14);
+  --sjs-size-x15: calc(var(--ctr-size-unit, 8px) * 15);
+  --sjs-size-x16: calc(var(--ctr-size-unit, 8px) * 16);
+  --sjs-size-x550: calc(var(--ctr-size-unit, 8px) * 5.5);
+  --sjs-size-max: 10000px;
+  --sjs-size-x17: calc(var(--ctr-size-unit, 8px) * 17);
+  --sjs-size-x18: calc(var(--ctr-size-unit, 8px) * 18);
+  --sjs-size-x64: calc(var(--ctr-size-unit, 8px) * 64);
+  --sjs-size-x90: calc(var(--ctr-size-unit, 8px) * 90);
+  --sjs-size-x80: calc(var(--ctr-size-unit, 8px) * 80);
+  --sjs-size-x40: calc(var(--ctr-size-unit, 8px) * 40);
+  --sjs-size-x32: calc(var(--ctr-size-unit, 8px) * 32);
+  --sjs-size-x20: calc(var(--ctr-size-unit, 8px) * 20);
+  --sjs-size-x86: calc(var(--ctr-size-unit, 8px) * 86);
+  --sjs-size-x60: calc(var(--ctr-size-unit, 8px) * 60);
+  --sjs-size-x28: calc(var(--ctr-size-unit, 8px) * 28);
+  --sjs-size-x50: calc(var(--ctr-size-unit, 8px) * 50);
+}
+
+.svc-creator {
+  --sjs-font-size-x1: calc(var(--ctr-font-unit, 8px) * 1);
+  --sjs-font-size-x150: calc(var(--ctr-font-unit, 8px) * 1.5);
+  --sjs-font-size-x2: calc(var(--ctr-font-unit, 8px) * 2);
+  --sjs-font-size-x3: calc(var(--ctr-font-unit, 8px) * 3);
+  --sjs-font-size-x4: calc(var(--ctr-font-unit, 8px) * 4);
+  --sjs-font-size-x5: calc(var(--ctr-font-unit, 8px) * 5);
+  --sjs-font-size-x6: calc(var(--ctr-font-unit, 8px) * 6);
+  --sjs-font-size-x7: calc(var(--ctr-font-unit, 8px) * 7);
+  --sjs-font-size-x8: calc(var(--ctr-font-unit, 8px) * 8);
+  --sjs-line-height-x1: calc(var(--ctr-line-height-unit, 8px) * 1);
+  --sjs-line-height-x150: calc(var(--ctr-line-height-unit, 8px) * 1.5);
+  --sjs-line-height-x2: calc(var(--ctr-line-height-unit, 8px) * 2);
+  --sjs-line-height-x3: calc(var(--ctr-line-height-unit, 8px) * 3);
+  --sjs-line-height-x4: calc(var(--ctr-line-height-unit, 8px) * 4);
+  --sjs-line-height-x5: calc(var(--ctr-line-height-unit, 8px) * 5);
+  --sjs-line-height-x6: calc(var(--ctr-line-height-unit, 8px) * 6);
+  --sjs-line-height-x7: calc(var(--ctr-line-height-unit, 8px) * 7);
+  --sjs-line-height-x8: calc(var(--ctr-line-height-unit, 8px) * 8);
+}
+
 .svc-btn {
   display: flex;
   align-items: center;
@@ -3997,11 +4134,13 @@ svc-question {
 
 .svc-dragged-element-shortcut__text {
   --small-bold-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
-  font-family: var(--sjs-font-family, var(--font-family));
+  --ctr-small-bold-font-size: calc(0.75 * var(--small-bold-font-size));
+  --ctr-small-bold-line-height: var(--small-bold-font-size);
+  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
   font-style: normal;
   font-weight: 600;
-  font-size: calc(0.75 * var(--small-bold-font-size));
-  line-height: var(--sjs-font-size, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: var(--ctr-font-small-size, var(--ctr-small-bold-font-size, 12px));
+  line-height: var(--ctr-font-small-line-height, var(--ctr-small-bold-line-height, 16px));
   line-height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
@@ -5347,7 +5486,7 @@ svc-question .sv-action-bar,
   !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/components/results.scss ***!
   \******************************************************************************************************************************************************************************/
 .svd-test-results {
-  font-family: var(--sjs-font-family, var(--font-family));
+  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
   border-radius: 4px;
   box-shadow: inset 0px 1px 0px 0px var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
   padding: calc(12 * var(--sjs-base-unit, var(--base-unit, 8px)));
@@ -5577,7 +5716,7 @@ svc-question .sv-action-bar,
   text-align: left;
   background: var(--sjs-general-backcolor, var(--background, #fff));
   box-shadow: inset 0px -1px 0px var(--sjs-border-default, var(--border, #d6d6d6));
-  font-family: var(--sjs-font-family, var(--font-family));
+  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
   font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
@@ -5771,216 +5910,188 @@ svc-question .sv-action-bar,
   align-items: center;
   z-index: 20;
   outline: none;
-  padding-top: var(--ctr-toolbox-item-padding-top, calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
-  padding-right: var(--ctr-toolbox-item-padding-right, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
-  padding-bottom: var(--ctr-toolbox-item-padding-bottom, calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
-  padding-left: var(--ctr-toolbox-item-padding-left, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  padding-top: var(--ctr-toolbox-item-padding-top, var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-bottom: var(--ctr-toolbox-item-padding-bottom, var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-inline-end: var(--ctr-toolbox-item-padding-right, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  padding-inline-start: var(--ctr-toolbox-item-padding-left, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   border-radius: var(--ctr-toolbox-item-corner-radius, calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
 }
-.svc-toolbox__item sv-svg-icon,
-.svc-toolbox__item .sv-svg-icon {
+
+.svc-toolbox__item-icon {
   display: block;
   height: var(--ctr-toolbox-item-icon-height, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   width: var(--ctr-toolbox-item-icon-width, unset);
+  pointer-events: none;
 }
 
-.svc-toolbox__tool .sv-action__content {
-  position: relative;
+.svc-toolbox__tool {
+  cursor: default;
+  align-items: var(--ctr-toolbox-item-align, flex-start);
+  align-self: var(--ctr-toolbox-item-align, flex-start);
 }
-.svc-toolbox__tool sv-svg-icon,
-.svc-toolbox__tool .sv-svg-icon {
-  pointer-events: none;
+.svc-toolbox__tool:first-of-type > .svc-toolbox__tool-content {
+  padding-block-start: 0;
+}
+.svc-toolbox__tool:first-of-type > .svc-toolbox__tool-content .svc-toolbox__item-banner {
+  top: 50%;
 }
 
-.svc-toolbox__tool--has-subitems .svc-toolbox__item {
-  padding-right: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+.svc-toolbox__tool-content {
+  display: flex;
+  padding-block-start: var(--ctr-toolbox-group-gap, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  flex-direction: column;
+  align-items: var(--ctr-toolbox-item-align, flex-start);
+  position: relative;
 }
 
-.svc-toolbox--compact .svc-toolbox__item {
-  padding-right: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+.svc-toolbox__item--has-subitems {
+  padding-inline-end: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
+.svc-toolbox__tool--has-subitems {
+  align-items: var(--ctr-toolbox-item-align, flex-start);
+  align-self: var(--ctr-toolbox-item-align, flex-start);
 }
 
 .svc-toolbox__item-container {
+  display: flex;
   outline: none;
-  padding: var(--sjs-base-unit, var(--base-unit, 8px)) 0;
 }
-.svc-toolbox__item-container .sv-svg-icon use {
+.svc-toolbox__item-container use {
   fill: var(--ctr-toolbox-item-icon-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
 }
 
 .svc-toolbox__item-banner {
   opacity: 0;
-  display: flex;
   box-sizing: border-box;
   align-items: center;
-  margin-right: 0;
-  margin-left: calc(-4.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-inline-end: 0;
+  inset-inline-start: var(--ctr-toolbox-item-banner-left, 0);
+  max-width: calc(100 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-top: var(--ctr-tooltip-padding-top, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  padding-inline-end: var(--ctr-tooltip-padding-right, calc(3.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  padding-bottom: var(--ctr-tooltip-padding-bottom, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  padding-inline-start: var(--ctr-tooltip-padding-left, calc(5.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  margin-inline-end: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  white-space: nowrap;
+  --small-bold-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
+  --ctr-small-bold-font-size: calc(0.75 * var(--small-bold-font-size));
+  --ctr-small-bold-line-height: var(--small-bold-font-size);
+  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
+  font-style: normal;
+  font-weight: 600;
+  font-size: var(--ctr-font-small-size, var(--ctr-small-bold-font-size, 12px));
+  line-height: var(--ctr-font-small-line-height, var(--ctr-small-bold-line-height, 16px));
+  color: var(--ctr-toolbox-item-text-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
+  transition: opacity var(--sjs-creator-transition-duration, 150ms);
+  background-color: var(--sjs-general-backcolor, var(--background, #fff));
+  /* Shadow / Medium */
+  border-radius: var(--ctr-tooltip-corder-radius, calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  box-shadow: var(--ctr-tooltip-shadow-1-offset-x, 0px) var(--ctr-tooltip-shadow-1-offset-y, 2px) var(--ctr-tooltip-shadow-1-blur, 6px) var(--ctr-tooltip-shadow-1-spread, 0px) var(--ctr-tooltip-shadow-1-color, rgba(0, 0, 0, 0.1)), var(--ctr-tooltip-shadow-2-offset-x, 0px) var(--ctr-tooltip-shadow-2-offset-y, 1px) var(--ctr-tooltip-shadow-2-blur, 2px) var(--ctr-tooltip-shadow-2-spread, 0px) var(--ctr-tooltip-shadow-2-color, transparent);
+  background-color: var(--ctr-tooltip-background-color, var(--sjs-general-backcolor, var(--background, #fff)));
+  overflow: visible;
+  position: absolute;
+  z-index: 200;
+  top: calc(50% + var(--ctr-toolbox-group-gap, 4px) / 2);
+  transform: translate(0, -50%);
+  pointer-events: none;
 }
 .svc-toolbox__item-banner .svc-toolbox__item-icon {
   position: absolute;
-  display: block;
-  left: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  display: var(--ctr-toolbox-item-banner-icon-display, block);
+  inset-inline-start: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   top: var(--sjs-base-unit, var(--base-unit, 8px));
 }
-.svc-toolbox__item-banner .svc-toolbox__item-title {
-  color: var(--ctr-toolbox-item-text-color-hovered, var(--sjs-general-forecolor, var(--foreground, #161616)));
+.svc-toolbox__item-banner:after {
+  content: " ";
+  display: var(--ctr-toolbox-item-banner-beak-display, none);
+  width: 0;
+  height: 0;
+  border: calc(0.35 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid var(--ctr-tooltip-background-color, var(--sjs-general-backcolor, var(--background, #fff)));
+  border-top-color: transparent;
+  border-inline-end-color: transparent;
+  box-shadow: var(--ctr-tooltip-shadow-1-offset-x, 0px) var(--ctr-tooltip-shadow-1-offset-y, 2px) var(--ctr-tooltip-shadow-1-blur, 6px) var(--ctr-tooltip-shadow-1-spread, 0px) var(--ctr-tooltip-shadow-1-color, rgba(0, 0, 0, 0.1)), var(--ctr-tooltip-shadow-2-offset-x, 0px) var(--ctr-tooltip-shadow-2-offset-y, 1px) var(--ctr-tooltip-shadow-2-blur, 2px) var(--ctr-tooltip-shadow-2-spread, 0px) var(--ctr-tooltip-shadow-2-color, transparent);
+  align-self: center;
+  position: absolute;
+  inset-inline-end: 100%;
+  top: 50%;
+  transform: translate(3px, -3px) rotate(45deg);
+  clip-path: polygon(-100% -100%, -100% 200%, 200% 200%);
 }
 .svc-toolbox__item-banner .sv-svg-icon use {
   fill: var(--ctr-toolbox-item-icon-color-hovered, var(--sjs-primary-backcolor, var(--primary, #19b394)));
 }
 
-.svc-creator__toolbox--right .svc-toolbox__tool:hover .svc-toolbox__item-banner,
-.svc-creator__toolbox--right .svc-toolbox__tool--hovered .svc-toolbox__item-banner,
-.svc-creator__toolbox--right .svc-toolbox__item:focus .svc-toolbox__item-banner,
-[dir=rtl] .svc-toolbox__tool:hover .svc-toolbox__item-banner,
-[dir=rtl] .svc-toolbox__tool--hovered .svc-toolbox__item-banner,
-[dir=rtl] .svc-toolbox__item:focus .svc-toolbox__item-banner,
-[style*="direction:rtl"] .svc-toolbox__tool:hover .svc-toolbox__item-banner,
-[style*="direction:rtl"] .svc-toolbox__tool--hovered .svc-toolbox__item-banner,
-[style*="direction:rtl"] .svc-toolbox__item:focus .svc-toolbox__item-banner,
-[style*="direction: rtl"] .svc-toolbox__tool:hover .svc-toolbox__item-banner,
-[style*="direction: rtl"] .svc-toolbox__tool--hovered .svc-toolbox__item-banner,
-[style*="direction: rtl"] .svc-toolbox__item:focus .svc-toolbox__item-banner {
-  padding-right: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  padding-left: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  margin-left: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  margin-right: calc(-3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  flex-direction: row-reverse;
-  transform: translateX(calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))));
-}
-.svc-creator__toolbox--right .svc-toolbox__tool:hover .svc-toolbox__item-banner .svc-toolbox__item-title,
-.svc-creator__toolbox--right .svc-toolbox__tool--hovered .svc-toolbox__item-banner .svc-toolbox__item-title,
-.svc-creator__toolbox--right .svc-toolbox__item:focus .svc-toolbox__item-banner .svc-toolbox__item-title,
-[dir=rtl] .svc-toolbox__tool:hover .svc-toolbox__item-banner .svc-toolbox__item-title,
-[dir=rtl] .svc-toolbox__tool--hovered .svc-toolbox__item-banner .svc-toolbox__item-title,
-[dir=rtl] .svc-toolbox__item:focus .svc-toolbox__item-banner .svc-toolbox__item-title,
-[style*="direction:rtl"] .svc-toolbox__tool:hover .svc-toolbox__item-banner .svc-toolbox__item-title,
-[style*="direction:rtl"] .svc-toolbox__tool--hovered .svc-toolbox__item-banner .svc-toolbox__item-title,
-[style*="direction:rtl"] .svc-toolbox__item:focus .svc-toolbox__item-banner .svc-toolbox__item-title,
-[style*="direction: rtl"] .svc-toolbox__tool:hover .svc-toolbox__item-banner .svc-toolbox__item-title,
-[style*="direction: rtl"] .svc-toolbox__tool--hovered .svc-toolbox__item-banner .svc-toolbox__item-title,
-[style*="direction: rtl"] .svc-toolbox__item:focus .svc-toolbox__item-banner .svc-toolbox__item-title {
-  padding-right: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  padding-left: var(--sjs-base-unit, var(--base-unit, 8px));
-}
-.svc-creator__toolbox--right .svc-toolbox__item-banner,
-[dir=rtl] .svc-toolbox__item-banner,
-[style*="direction:rtl"] .svc-toolbox__item-banner,
-[style*="direction: rtl"] .svc-toolbox__item-banner {
-  margin-right: calc(-4.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  margin-left: 0;
-}
-.svc-creator__toolbox--right .svc-toolbox__item,
-[dir=rtl] .svc-toolbox__item,
-[style*="direction:rtl"] .svc-toolbox__item,
-[style*="direction: rtl"] .svc-toolbox__item {
-  flex-direction: row-reverse;
-}
-.svc-creator__toolbox--right .svc-toolbox__tool.sv-dots,
-[dir=rtl] .svc-toolbox__tool.sv-dots,
-[style*="direction:rtl"] .svc-toolbox__tool.sv-dots,
-[style*="direction: rtl"] .svc-toolbox__tool.sv-dots {
-  place-self: flex-end;
-}
-.svc-creator__toolbox--right .svc-toolbox__category,
-[dir=rtl] .svc-toolbox__category,
-[style*="direction:rtl"] .svc-toolbox__category,
-[style*="direction: rtl"] .svc-toolbox__category {
-  align-items: flex-end;
-}
-.svc-creator__toolbox--right .svc-toolbox__tool,
-[dir=rtl] .svc-toolbox__tool,
-[style*="direction:rtl"] .svc-toolbox__tool,
-[style*="direction: rtl"] .svc-toolbox__tool {
-  align-items: flex-end;
-}
-.svc-creator__toolbox--right .svc-toolbox__tool--has-subitems .svc-toolbox__item,
-[dir=rtl] .svc-toolbox__tool--has-subitems .svc-toolbox__item,
-[style*="direction:rtl"] .svc-toolbox__tool--has-subitems .svc-toolbox__item,
-[style*="direction: rtl"] .svc-toolbox__tool--has-subitems .svc-toolbox__item {
-  padding-left: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  padding-right: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-}
-.svc-creator__toolbox--right .svc-toolbox__item-banner .svc-toolbox__item-icon,
-[dir=rtl] .svc-toolbox__item-banner .svc-toolbox__item-icon,
-[style*="direction:rtl"] .svc-toolbox__item-banner .svc-toolbox__item-icon,
-[style*="direction: rtl"] .svc-toolbox__item-banner .svc-toolbox__item-icon {
-  left: auto;
-  right: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-}
-
 .svc-toolbox__item-title {
   --small-bold-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
-  font-family: var(--sjs-font-family, var(--font-family));
+  --ctr-small-bold-font-size: calc(0.75 * var(--small-bold-font-size));
+  --ctr-small-bold-line-height: var(--small-bold-font-size);
+  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
   font-style: normal;
   font-weight: 600;
-  font-size: calc(0.75 * var(--small-bold-font-size));
-  line-height: var(--sjs-font-size, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: var(--ctr-font-small-size, var(--ctr-small-bold-font-size, 12px));
+  line-height: var(--ctr-font-small-line-height, var(--ctr-small-bold-line-height, 16px));
   display: block;
-  padding-left: var(--sjs-base-unit, var(--base-unit, 8px));
-  padding-right: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-inline-start: var(--sjs-base-unit, var(--base-unit, 8px));
+  padding-inline-end: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   white-space: nowrap;
   color: var(--ctr-toolbox-item-text-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
 }
 
 .svc-toolbox__tool:hover .svc-toolbox__item-banner,
-.svc-toolbox__tool--hovered .svc-toolbox__item-banner,
-.svc-toolbox__item:focus .svc-toolbox__item-banner {
-  max-width: calc(100 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  padding-left: var(--ctr-toolbox-item-padding-left, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
-  padding-right: var(--ctr-toolbox-item-padding-right, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
-  margin-right: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+.svc-toolbox__tool:focus-within .svc-toolbox__item-banner {
+  display: var(--ctr-toolbox-item-banner-display, flex);
   opacity: 1;
-}
-.svc-toolbox__tool:hover .svc-toolbox__item-banner .svc-toolbox__item-title,
-.svc-toolbox__tool--hovered .svc-toolbox__item-banner .svc-toolbox__item-title,
-.svc-toolbox__item:focus .svc-toolbox__item-banner .svc-toolbox__item-title {
-  padding-left: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  pointer-events: initial;
 }
 .svc-toolbox__tool:hover .svc-toolbox__item-submenu-button,
-.svc-toolbox__tool--hovered .svc-toolbox__item-submenu-button,
-.svc-toolbox__item:focus .svc-toolbox__item-submenu-button {
+.svc-toolbox__tool:focus-within .svc-toolbox__item-submenu-button {
   background: var(--ctr-toolbox-item-submenu-button-background-color, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
 }
 .svc-toolbox__tool:hover .svc-toolbox__item-submenu-button:hover,
-.svc-toolbox__tool--hovered .svc-toolbox__item-submenu-button:hover,
-.svc-toolbox__item:focus .svc-toolbox__item-submenu-button:hover {
+.svc-toolbox__tool:focus-within .svc-toolbox__item-submenu-button:hover {
   background: var(--ctr-toolbox-item-submenu-button-background-color-hovered, var(--sjs-general-backcolor, var(--background, #fff)));
 }
 
 .svc-toolbox__tool--disabled {
   pointer-events: none;
 }
-.svc-toolbox__tool--disabled .sv-svg-icon {
+.svc-toolbox__tool--disabled use {
   opacity: var(--ctr-toolbox-item-icon-opacity-disabled, 0.15);
-}
-.svc-toolbox__tool--disabled .sv-svg-icon use {
   fill: var(--ctr-toolbox-item-icon-color-disabled, rgba(0, 0, 0, 0.91));
 }
 .svc-toolbox__tool--disabled .svc-toolbox__item-title {
   opacity: var(--ctr-toolbox-item-text-opacity-disabled, 0.25);
 }
 
-.svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__item:not(.sv-dots):focus,
-.svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__tool--hovered > .sv-action__content > .svc-toolbox__item:not(.sv-dots),
-.svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__tool:hover > .sv-action__content > .svc-toolbox__item:not(.sv-dots),
-.svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__item:not(.sv-dots):hover {
-  overflow: hidden;
+.svc-toolbox__item:focus,
+.svc-toolbox__tool--has-subitems:hover > .svc-toolbox__tool-content > .svc-toolbox__item,
+.svc-toolbox__item:hover {
+  overflow: visible;
   background-color: var(--ctr-toolbox-item-background-color-hovered, var(--sjs-general-backcolor, var(--background, #fff)));
-  box-shadow: 0px 2px 6px 0px var(--ctr-shadow-medium-color, rgba(0, 0, 0, 0.1));
+  box-shadow: var(--ctr-toolbox-item-shadow-hovered-1-offset-x, 0px) var(--ctr-toolbox-item-shadow-hovered-1-offset-y, 2px) var(--ctr-toolbox-item-shadow-hovered-1-blur, 6px) var(--ctr-toolbox-item-shadow-hovered-1-spread, 0px) var(--ctr-toolbox-item-shadow-hovered-1-color, rgba(0, 0, 0, 0.1)), var(--ctr-toolbox-item-shadow-hovered-2-offset-x, 0px) var(--ctr-toolbox-item-shadow-hovered-2-offset-y, 1px) var(--ctr-toolbox-item-shadow-hovered-2-blur, 2px) var(--ctr-toolbox-item-shadow-hovered-2-spread, 0px) var(--ctr-toolbox-item-shadow-hovered-2-color, transparent);
   transition: 0.1s ease-in-out;
 }
-.svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__item:not(.sv-dots):focus .svc-toolbox__item-title,
-.svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__tool--hovered > .sv-action__content > .svc-toolbox__item:not(.sv-dots) .svc-toolbox__item-title,
-.svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__tool:hover > .sv-action__content > .svc-toolbox__item:not(.sv-dots) .svc-toolbox__item-title,
-.svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__item:not(.sv-dots):hover .svc-toolbox__item-title {
+.svc-toolbox__item:focus .svc-toolbox--compact .svc-toolbox__item:focus,
+.svc-toolbox__item:focus .svc-toolbox--compact .svc-toolbox__tool--has-subitems:hover > .svc-toolbox__tool-content > .svc-toolbox__item,
+.svc-toolbox__item:focus .svc-toolbox--compact .svc-toolbox__item:hover,
+.svc-toolbox__tool--has-subitems:hover > .svc-toolbox__tool-content > .svc-toolbox__item .svc-toolbox--compact .svc-toolbox__item:focus,
+.svc-toolbox__tool--has-subitems:hover > .svc-toolbox__tool-content > .svc-toolbox__item .svc-toolbox--compact .svc-toolbox__tool--has-subitems:hover > .svc-toolbox__tool-content > .svc-toolbox__item,
+.svc-toolbox__tool--has-subitems:hover > .svc-toolbox__tool-content > .svc-toolbox__item .svc-toolbox--compact .svc-toolbox__item:hover,
+.svc-toolbox__item:hover .svc-toolbox--compact .svc-toolbox__item:focus,
+.svc-toolbox__item:hover .svc-toolbox--compact .svc-toolbox__tool--has-subitems:hover > .svc-toolbox__tool-content > .svc-toolbox__item,
+.svc-toolbox__item:hover .svc-toolbox--compact .svc-toolbox__item:hover {
+  background-color: transparent;
+  box-shadow: none;
+}
+.svc-toolbox__item:focus .svc-toolbox__item-title,
+.svc-toolbox__tool--has-subitems:hover > .svc-toolbox__tool-content > .svc-toolbox__item .svc-toolbox__item-title,
+.svc-toolbox__item:hover .svc-toolbox__item-title {
   color: var(--ctr-toolbox-item-text-color-hovered, var(--sjs-general-forecolor, var(--foreground, #161616)));
 }
-.svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__item:not(.sv-dots):focus .sv-svg-icon use,
-.svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__tool--hovered > .sv-action__content > .svc-toolbox__item:not(.sv-dots) .sv-svg-icon use,
-.svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__tool:hover > .sv-action__content > .svc-toolbox__item:not(.sv-dots) .sv-svg-icon use,
-.svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__item:not(.sv-dots):hover .sv-svg-icon use {
+.svc-toolbox__item:focus .sv-svg-icon use,
+.svc-toolbox__tool--has-subitems:hover > .svc-toolbox__tool-content > .svc-toolbox__item .sv-svg-icon use,
+.svc-toolbox__item:hover .sv-svg-icon use {
   fill: var(--ctr-toolbox-item-icon-color-hovered, var(--sjs-primary-backcolor, var(--primary, #19b394)));
 }
 
@@ -5989,6 +6100,7 @@ svc-question .sv-action-bar,
 .svc-toolbox__tool .sv-dots__item.sv-action-bar-item--pressed {
   background-color: var(--ctr-toolbox-button-background-color-hovered, var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1))));
   border-radius: var(--ctr-toolbox-item-corner-radius, calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  box-shadow: none;
 }
 .svc-toolbox__tool .sv-dots__item:hover:enabled .sv-svg-icon use,
 .svc-toolbox__tool .sv-dots__item:focus:enabled .sv-svg-icon use,
@@ -5998,7 +6110,7 @@ svc-question .sv-action-bar,
 
 .svc-toolbox__item-submenu-button {
   position: absolute;
-  right: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  inset-inline-end: var(--ctr-toolbox-item-submenu-button-right, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   display: inline-flex;
   padding: var(--ctr-toolbox-item-submenu-button-padding-top, 4px) var(--ctr-toolbox-item-submenu-button-padding-right, 4px) var(--ctr-toolbox-item-submenu-button-padding-bottom, 4px) var(--ctr-toolbox-item-submenu-button-padding-left, 4px);
@@ -6013,31 +6125,7 @@ svc-question .sv-action-bar,
   fill: var(--ctr-toolbox-item-submenu-button-icon-color, var(--sjs-layer-1-foreground-50, var(--sjs-general-forecolor-light, var(--foreground-light, #909090))));
 }
 
-.svc-toolbox--compact .svc-toolbox__item-submenu-button {
-  display: none;
-}
-
-.svc-creator__toolbox--right .svc-toolbox-popup,
-[dir=rtl] .svc-toolbox-popup,
-[style*="direction:rtl"] .svc-toolbox-popup,
-[style*="direction: rtl"] .svc-toolbox-popup {
-  direction: rtl;
-}
-.svc-creator__toolbox--right .svc-toolbox__item-submenu-button,
-[dir=rtl] .svc-toolbox__item-submenu-button,
-[style*="direction:rtl"] .svc-toolbox__item-submenu-button,
-[style*="direction: rtl"] .svc-toolbox__item-submenu-button {
-  right: initial;
-  left: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-}
-.svc-creator__toolbox--right .svc-toolbox__item-submenu-button .sv-svg-icon,
-[dir=rtl] .svc-toolbox__item-submenu-button .sv-svg-icon,
-[style*="direction:rtl"] .svc-toolbox__item-submenu-button .sv-svg-icon,
-[style*="direction: rtl"] .svc-toolbox__item-submenu-button .sv-svg-icon {
-  transform: rotate(180deg);
-}
-
-.svc-toolbox-popup .sv-list__item:first-child .sv-list__item-separator {
+.svc-toolbox-popup .sv-list__item:first-of-type .sv-list__item-separator {
   display: none;
 }
 .svc-toolbox-popup .sv-list__item .sv-list__item-body {
@@ -6047,22 +6135,25 @@ svc-question .sv-action-bar,
   padding-inline-end: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
-.svc-toolbox .svc-toolbox__tool--pressed .svc-toolbox__item:not(.sv-dots),
-.svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__tool--pressed .svc-toolbox__item:not(.sv-dots) {
-  color: var(--ctr-toolbox-item-text-color-hovered, var(--sjs-general-forecolor, var(--foreground, #161616)));
-  opacity: 0.5;
+.svc-toolbox__tool.svc-toolbox__tool--pressed .svc-toolbox__item {
+  background: var(--ctr-toolbox-item-background-color-pressed, inherit);
+  box-shadow: var(--ctr-toolbox-item-shadow-pressed-offset-x, 0px) var(--ctr-toolbox-item-shadow-pressed-offset-y, 1px) var(--ctr-toolbox-item-shadow-pressed-blur, 2px) var(--ctr-toolbox-item-shadow-pressed-spread, 0px) var(--ctr-toolbox-item-shadow-pressed-color, rgba(0, 0, 0, 0));
 }
-.svc-toolbox .svc-toolbox__tool--pressed .svc-toolbox__item:not(.sv-dots) .sv-svg-icon use,
-.svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__tool--pressed .svc-toolbox__item:not(.sv-dots) .sv-svg-icon use {
+.svc-toolbox__tool.svc-toolbox__tool--pressed .svc-toolbox__item-title {
+  color: var(--ctr-toolbox-item-text-color-pressed, var(--sjs-general-forecolor, var(--foreground, #161616)));
+  opacity: var(--ctr-toolbox-item-text-opacity-pressed, 0.5);
+}
+.svc-toolbox__tool.svc-toolbox__tool--pressed .sv-svg-icon use {
   fill: var(--ctr-toolbox-item-icon-color-pressed, var(--sjs-general-forecolor, var(--foreground, #161616)));
-  opacity: 0.5;
+  opacity: var(--ctr-toolbox-item-icon-opacity-pressed, 0.5);
 }
-.svc-toolbox .svc-toolbox__tool--pressed .svc-toolbox__item.svc-toolbox__item-subtype,
-.svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__tool--pressed .svc-toolbox__item.svc-toolbox__item-subtype {
+.svc-toolbox__tool.svc-toolbox__tool--pressed .svc-toolbox__item.svc-toolbox__item-subtype {
   opacity: unset;
 }
 
 .svc-toolbox-subtypes .sv-popup__container {
+  padding: 0;
+  padding-inline-start: var(--ctr-toolbox-submenu-offset, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   box-shadow: unset;
   background: unset;
 }
@@ -6071,11 +6162,16 @@ svc-question .sv-action-bar,
   column-gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-toolbox-subtypes .sv-popup__body-content {
-  background: unset;
+  border-radius: var(--ctr-toolbox-submenu-corner-radius, var(--sjs-base-unit, var(--base-unit, 8px)));
+  box-shadow: var(--ctr-toolbox-submenu-shadow-1-offset-x, 0px) var(--ctr-toolbox-submenu-shadow-1-offset-y, 2px) var(--ctr-toolbox-submenu-shadow-1-blur, 8px) var(--ctr-toolbox-submenu-shadow-1-spread, 0px) var(--ctr-toolbox-submenu-shadow-1-color, transparent), var(--ctr-toolbox-submenu-shadow-2-offset-x, 0px) var(--ctr-toolbox-submenu-shadow-2-offset-y, 16px) var(--ctr-toolbox-submenu-shadow-2-blur, 32px) var(--ctr-toolbox-submenu-shadow-2-spread, 0px) var(--ctr-toolbox-submenu-shadow-2-color, transparent);
+  background: var(--ctr-toolbox-submenu-background-color, unset);
   padding: 0;
 }
 .svc-toolbox-subtypes .sv-popup__scrolling-content {
-  padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-top: calc(var(--ctr-toolbox-submenu-group-margin-top, 12px));
+  padding-inline-end: var(--ctr-toolbox-submenu-group-margin-right, 12px);
+  padding-bottom: var(--ctr-toolbox-submenu-group-margin-bottom-last, 12px);
+  padding-inline-start: var(--ctr-toolbox-submenu-group-margin-left, 12px);
   overflow: visible;
 }
 .svc-toolbox-subtypes .sv-list__item:hover > .sv-list__item-body,
@@ -6085,30 +6181,56 @@ svc-question .sv-action-bar,
 .svc-toolbox-subtypes .svc-toolbox__item.svc-toolbox__item-subtype {
   opacity: var(--ctr-toolbox-item-opacity-submenu, 0.85);
   overflow: hidden;
-  border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  border-radius: var(--ctr-toolbox-item-corner-radius, calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   background: var(--ctr-toolbox-item-background-color-submenu, var(--sjs-layer-2-background-500, var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9))));
-  box-shadow: 0px 1px 2px 0px var(--ctr-shadow-small-color, rgba(0, 0, 0, 0.15)), 0px 2px 6px 0px var(--ctr-shadow-medium-color, rgba(0, 0, 0, 0.1));
+  box-shadow: var(--ctr-toolbox-item-shadow-hovered-1-offset-x, 0px) var(--ctr-toolbox-item-shadow-hovered-1-offset-y, 2px) var(--ctr-toolbox-item-shadow-hovered-1-blur, 6px) var(--ctr-toolbox-item-shadow-hovered-1-spread, 0px) var(--ctr-toolbox-item-shadow-hovered-1-color, rgba(0, 0, 0, 0.1)), var(--ctr-toolbox-item-shadow-hovered-2-offset-x, 0px) var(--ctr-toolbox-item-shadow-hovered-2-offset-y, 1px) var(--ctr-toolbox-item-shadow-hovered-2-blur, 2px) var(--ctr-toolbox-item-shadow-hovered-2-spread, 0px) var(--ctr-toolbox-item-shadow-hovered-2-color, rgba(0, 0, 0, 0));
   transition: 0.1s ease-in-out;
   padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   align-self: flex-start;
+  min-width: var(--ctr-toolbox-submenu-item-min-width, initial);
+  box-sizing: border-box;
 }
 .svc-toolbox-subtypes .svc-toolbox__item.svc-toolbox__item-subtype .svc-toolbox__item-title {
   color: var(--ctr-toolbox-item-text-color-submenu, var(--sjs-layer-2-foreground-100, rgba(0, 0, 0, 0.9098039216)));
 }
 .svc-toolbox-subtypes .svc-toolbox__tool:hover .svc-toolbox__item-subtype,
-.svc-toolbox-subtypes .svc-toolbox__tool--hovered .svc-toolbox__item-subtype,
 .svc-toolbox-subtypes .svc-toolbox__item:focus .svc-toolbox__item-subtype {
   background: var(--ctr-toolbox-item-background-color-hovered, var(--sjs-layer-1-background-500, var(--sjs-general-backcolor, var(--background, #fff))));
   opacity: unset;
 }
 .svc-toolbox-subtypes .svc-toolbox__tool:hover .svc-toolbox__item-subtype .svc-toolbox__item-title,
-.svc-toolbox-subtypes .svc-toolbox__tool--hovered .svc-toolbox__item-subtype .svc-toolbox__item-title,
 .svc-toolbox-subtypes .svc-toolbox__item:focus .svc-toolbox__item-subtype .svc-toolbox__item-title {
   color: var(--ctr-toolbox-item-text-color-hovered, var(--sjs-layer-1-foreground-100, var(--sjs-general-forecolor, var(--foreground, #161616))));
 }
 .svc-toolbox-subtypes .svc-toolbox__item-title {
   padding: 0;
 }
+
+.svc-toolbox__tool--dots {
+  align-self: flex-start;
+}
+
+.svc-toolbox__item--dots {
+  padding-inline-end: var(--ctr-toolbox-item-padding-left, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  margin-top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
+.svc-toolbox--compact .svc-toolbox__item-submenu-button {
+  display: none;
+}
+.svc-toolbox--compact .svc-toolbox__tool {
+  padding: 0px var(--ctr-toolbox-item-margin-horizontal-no-text, 0px);
+  align-self: flex-start;
+}
+.svc-toolbox--compact .svc-toolbox__search-button {
+  padding-inline-start: var(--ctr-toolbox-item-margin-horizontal-no-text, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+}
+.svc-toolbox--compact .svc-toolbox__item {
+  padding-inline-start: var(--ctr-toolbox-item-padding-left-no-text, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  padding-inline-end: var(--ctr-toolbox-item-padding-right-no-text, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  box-sizing: border-box;
+  align-self: flex-start;
+}
 /*!**************************************************************************************************************************************************************************************!*\
   !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/components/toolbox/toolbox.scss ***!
   \**************************************************************************************************************************************************************************************/
@@ -6122,17 +6244,17 @@ svc-toolbox {
   height: 100%;
   display: flex;
   flex-direction: column;
-}
-.svc-toolbox .svc-item__banner {
-  background-color: var(--ctr-toolbox-item-background-color-hovered, var(--sjs-general-backcolor, var(--background, #fff)));
+  width: var(--ctr-toolbox-min-width, 224.984375px);
 }
 .svc-toolbox .spg-search-editor_container {
-  padding-top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  padding-inline-end: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  padding-bottom: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  padding-inline-start: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  background: var(--ctr-toolbox-background-color, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
+  padding-top: var(--ctr-toolbox-search-padding-top, calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  padding-inline-end: var(--ctr-toolbox-search-padding-right, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  padding-bottom: var(--ctr-toolbox-search-padding-bottom, calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  padding-inline-start: var(--ctr-toolbox-search-padding-left, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   width: unset;
   flex-grow: 1;
+  border-bottom: none;
 }
 .svc-toolbox .spg-search-editor_input {
   width: 0;
@@ -6149,32 +6271,106 @@ svc-toolbox {
   fill: var(--ctr-toolbox-search-clear-button-icon-color-hovered, var(--sjs-special-red, var(--red, #e60a3e)));
 }
 
+.svc-toolbox__panel {
+  position: relative;
+  flex-grow: 1;
+  flex-shrink: 1;
+  height: 0;
+  display: flex;
+  flex-direction: column;
+  border-inline-end: var(--ctr-toolbox-border-width-right, 0px) solid var(--ctr-toolbox-border-color, transparent);
+  background: var(--ctr-toolbox-background-color, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
+}
+
+.svc-toolbox__scroll-wrapper {
+  position: relative;
+  flex-grow: 1;
+  flex-shrink: 1;
+  height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
 .svc-toolbox__scroller {
-  padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding: var(--ctr-toolbox-padding-top, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-toolbox-group-padding-right, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-toolbox-padding-bottom, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-toolbox-group-padding-left, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   box-sizing: border-box;
-  overflow: hidden;
-  direction: rtl;
   flex-grow: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
   display: flex;
   flex-direction: column;
-  align-items: flex-end;
+  align-items: var(--ctr-toolbox-scroller-align-items, flex-end);
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+.svc-toolbox__scroller::-webkit-scrollbar {
+  display: none;
 }
 
-.svc-side-bar .svc-toolbox {
-  direction: ltr;
+.svc-toolbox__scrollbar {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  inset-inline-end: var(--ctr-toolbox-scrollbar-right, initial);
+  inset-inline-start: var(--ctr-toolbox-scrollbar-left, 0);
+  overflow-y: scroll;
+  overflow-x: hidden;
+  width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-inline-start: calc(-0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  display: var(--ctr-toolbox-scrollbar-display, none);
+  z-index: 30;
+  padding: var(--ctr-toolbox-padding-top, var(--sjs-base-unit, var(--base-unit, 8px))) 0 var(--ctr-toolbox-padding-bottom, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))))) 0;
+}
+@-moz-document url-prefix() {
+  .svc-toolbox__scrollbar {
+    scrollbar-width: thin;
+    scrollbar-color: var(--sjs-border-default, var(--border, #d6d6d6)) transparent;
+  }
+}
+
+.svc-toolbox:hover .svc-toolbox__scrollbar {
+  display: block;
+}
+
+.svc-side-bar .svc-toolbox__scroller {
+  direction: initial;
+}
+
+.svc-toolbox--scrollable {
+  width: var(--ctr-toolbox-min-width, 236.984375px);
 }
 
 .svc-toolbox--compact {
+  width: var(--ctr-toolbox-width-compact, calc(10.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+}
+.svc-toolbox--compact .svc-toolbox__panel {
+  overflow: visible;
+}
+.svc-toolbox--compact .svc-toolbox__scroller {
   width: 100vw;
-  margin-right: calc(-100vw + 10.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding: var(--ctr-toolbox-padding-top, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-toolbox-group-padding-right-compact, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-toolbox-padding-bottom, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-toolbox-group-padding-left-compact, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
 }
 .svc-toolbox--compact .spg-search-editor_container {
   opacity: 0;
   position: absolute;
 }
+.svc-toolbox--compact .svc-toolbox__search-container {
+  border-bottom: 0;
+  padding-top: var(--ctr-toolbox-padding-top, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  padding-inline-start: var(--ctr-toolbox-group-padding-left, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  padding-inline-end: var(--ctr-toolbox-group-padding-left, var(--sjs-base-unit, var(--base-unit, 8px)));
+}
+.svc-toolbox--compact .svc-toolbox__category-separator {
+  margin-top: calc(var(--ctr-toolbox-separator-padding-top, 8px) + var(--ctr-toolbox-gap, 4px));
+  width: var(--ctr-toolbox-separator-width-compact, calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  margin-inline-end: calc(var(--ctr-toolbox-separator-padding-right-compact, 16px) - var(--ctr-toolbox-group-padding-left-compact, 12px) - var(--ctr-toolbox-item-margin-horizontal-no-text, 0px));
+  margin-bottom: var(--ctr-toolbox-separator-padding-bottom, 8px);
+  margin-inline-start: calc(var(--ctr-toolbox-separator-padding-left-compact, 16px) - var(--ctr-toolbox-group-padding-left-compact, 12px) - var(--ctr-toolbox-item-margin-horizontal-no-text, 0px));
+}
 .svc-toolbox--compact .svc-toolbox__category-separator--search {
+  margin-inline-end: calc(var(--ctr-toolbox-separator-padding-right-compact, 16px) - var(--ctr-toolbox-group-padding-left-compact, 12px));
   margin-bottom: 0;
-  margin-top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-inline-start: calc(var(--ctr-toolbox-separator-padding-left-compact, 16px) - var(--ctr-toolbox-group-padding-left-compact, 12px));
   min-height: 1px;
 }
 
@@ -6182,15 +6378,12 @@ svc-toolbox {
   z-index: 20;
   justify-content: center;
   align-items: center;
-}
-.svc-toolbox__tool.svc-toolbox__search-button .sv-dots__item {
-  margin-top: 0;
-  width: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  width: fit-content;
 }
 
 .svc-toolbox--flyout {
-  width: 100vw;
-  margin-right: calc(-100vw + 10.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  overflow: visible;
+  max-width: var(--ctr-toolbox-width-compact, calc(10.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   overflow: visible;
 }
 .svc-toolbox--flyout .spg-search-editor_container {
@@ -6199,120 +6392,31 @@ svc-toolbox {
 }
 .svc-toolbox--flyout .svc-toolbox__panel {
   z-index: 200;
+  width: var(--ctr-toolbox-min-width, calc(32 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   position: relative;
-  background: var(--ctr-toolbox-background-color, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
-  width: fit-content;
-  box-shadow: 1px 0 0 0 var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16))), 0px 2px 6px 0px var(--ctr-shadow-medium-color, rgba(0, 0, 0, 0.1)), 0px 8px 16px 0px var(--ctr-shadow-large-color, rgba(0, 0, 0, 0.1));
-}
-
-.svc-toolbox--scrollable .svc-toolbox__scroller {
-  overflow-y: auto;
-}
-
-.svc-toolbox--scrollable.svc-toolbox--scroll-locked .svc-toolbox__scroller {
-  overflow: scroll;
+  box-shadow: var(--ctr-toolbox-shadow-floating-2-offset-x, 0px) var(--ctr-toolbox-shadow-floating-2-offset-y, 8px) var(--ctr-toolbox-shadow-floating-2-blur, 16px) var(--ctr-toolbox-shadow-floating-2-spread, 0px) var(--ctr-toolbox-shadow-floating-2-color, rgba(0, 0, 0, 0.1)), var(--ctr-toolbox-shadow-floating-1-offset-x, 0px) var(--ctr-toolbox-shadow-floating-1-offset-y, 2px) var(--ctr-toolbox-shadow-floating-1-blur, 6px) var(--ctr-toolbox-shadow-floating-1-spread, 0px) var(--ctr-toolbox-shadow-floating-1-color, rgba(0, 0, 0, 0.1));
 }
 
-.svc-toolbox--searchable .svc-toolbox__scroller {
-  padding-top: 0;
-}
 .svc-toolbox--searchable .svc-toolbox__search-container {
   display: flex;
 }
-.svc-toolbox--searchable:not(.svc-toolbox--scrollable) .svc-toolbox__scroller {
-  padding-top: calc(9 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-}
-.svc-toolbox--searchable:not(.svc-toolbox--scrollable) .svc-toolbox__scroller .svc-toolbox__search-container {
-  top: calc(-9 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  margin-top: calc(-9 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-}
-
-.svc-toolbox__panel {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.svc-creator__toolbox--right .svc-toolbox__search-container,
-[dir=rtl] .svc-toolbox__search-container,
-[style*="direction:rtl"] .svc-toolbox__search-container,
-[style*="direction: rtl"] .svc-toolbox__search-container {
-  direction: rtl;
-}
-.svc-creator__toolbox--right .svc-toolbox__scroller,
-[dir=rtl] .svc-toolbox__scroller,
-[style*="direction:rtl"] .svc-toolbox__scroller,
-[style*="direction: rtl"] .svc-toolbox__scroller {
-  direction: ltr;
-}
-.svc-creator__toolbox--right .svc-toolbox__panel,
-[dir=rtl] .svc-toolbox__panel,
-[style*="direction:rtl"] .svc-toolbox__panel,
-[style*="direction: rtl"] .svc-toolbox__panel {
-  direction: rtl;
-}
-.svc-creator__toolbox--right .svc-toolbox--compact,
-[dir=rtl] .svc-toolbox--compact,
-[style*="direction:rtl"] .svc-toolbox--compact,
-[style*="direction: rtl"] .svc-toolbox--compact {
-  margin-right: 0;
-  margin-left: calc(-100vw + 10.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  direction: ltr;
-}
-.svc-creator__toolbox--right .svc-toolbox--flyout,
-[dir=rtl] .svc-toolbox--flyout,
-[style*="direction:rtl"] .svc-toolbox--flyout,
-[style*="direction: rtl"] .svc-toolbox--flyout {
-  margin-right: 0;
-  margin-left: calc(-100vw + 10.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  direction: ltr;
-  align-items: flex-end;
-}
-.svc-creator__toolbox--right .svc-toolbox--flyout .svc-toolbox__panel,
-[dir=rtl] .svc-toolbox--flyout .svc-toolbox__panel,
-[style*="direction:rtl"] .svc-toolbox--flyout .svc-toolbox__panel,
-[style*="direction: rtl"] .svc-toolbox--flyout .svc-toolbox__panel {
-  box-shadow: -1px 0 0 0 var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16))), 0px 2px 6px 0px var(--ctr-shadow-medium-color, rgba(0, 0, 0, 0.1)), 0px 8px 16px 0px var(--ctr-shadow-large-color, rgba(0, 0, 0, 0.1));
-}
-.svc-creator__toolbox--right .svc-toolbox__tool .sv-action__content,
-[dir=rtl] .svc-toolbox__tool .sv-action__content,
-[style*="direction:rtl"] .svc-toolbox__tool .sv-action__content,
-[style*="direction: rtl"] .svc-toolbox__tool .sv-action__content {
-  align-items: flex-end;
-}
-
-.svc-creator__toolbox--right .svc-toolbox__search-container {
-  direction: initial;
-}
-.svc-creator__toolbox--right .svc-toolbox-popup {
-  direction: initial;
-}
 
 .svc-toolbox__container {
-  direction: ltr;
-}
-
-.svc-toolbox--compact:not(.svc-toolbox--flyout) .svc-toolbox__search-container {
-  max-width: fit-content;
-  margin-left: 0;
-  margin-right: 0;
-  width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  width: 100%;
 }
 
 .svc-toolbox__search-container {
-  direction: ltr;
   position: sticky;
   top: 0;
   z-index: 30;
-  padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
-  margin-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
-  margin-right: calc(-1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  margin-left: calc(-1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   display: none;
   flex-direction: column;
-  width: calc(100% + 3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-sizing: border-box;
-  background: var(--ctr-property-grid-search-background-color, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
+  background: var(--ctr-toolbox-background-color, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
+  border-bottom: var(--ctr-toolbox-search-border-width-bottom, 1px) solid var(--ctr-toolbox-search-border-color, var(--sjs-border-default, var(--border, #d6d6d6)));
+}
+.svc-toolbox__search-container svg {
+  pointer-events: none;
 }
 
 .svc-toolbox__category {
@@ -6321,32 +6425,30 @@ svc-toolbox {
   align-items: flex-start;
 }
 
-.svc-toolbox__tool:not(.sv-dots) {
-  display: flex;
-  flex-direction: column;
-  width: auto;
-}
-
-.svc-toolbox__tool .sv-dots__item {
-  width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  margin-top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-}
-
 .svc-toolbox__category-separator {
   height: 1px;
-  width: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  width: var(--ctr-toolbox-separator-width, calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   background-color: var(--ctr-toolbox-separator-color, var(--sjs-border-default, var(--border, #d6d6d6)));
   margin: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
-.svc-toolbox--filtering .svc-toolbox__category-separator {
+.svc-toolbox--no-separators .svc-toolbox__category-separator {
   display: none;
 }
 
+.svc-toolbox__category-header-wrapper {
+  padding: var(--ctr-toolbox-group-header-margin-top, 0px) var(--ctr-toolbox-group-header-margin-left, 0px) var(--ctr-toolbox-group-header-margin-bottom, 0px) var(--ctr-toolbox-group-header-margin-left, 0px);
+  margin-inline-start: calc(0px - var(--ctr-toolbox-group-padding-left, 0px));
+  margin-inline-end: calc(0px - var(--ctr-toolbox-group-padding-right, 0px));
+  align-self: stretch;
+}
+
 .svc-toolbox__category-header {
   height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+  padding-top: var(--ctr-toolbox-group-header-padding-top, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  padding-inline-end: var(--ctr-toolbox-group-header-padding-right, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  padding-bottom: var(--ctr-toolbox-group-header-padding-bottom, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  padding-inline-start: var(--ctr-toolbox-group-header-padding-left, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   border-bottom: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
   box-sizing: border-box;
   width: 100%;
@@ -6359,7 +6461,7 @@ svc-toolbox {
 }
 
 .svc-toolbox__category-title {
-  font-family: var(--sjs-font-family, var(--font-family));
+  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
   font-size: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   font-weight: bold;
   line-height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -6370,8 +6472,8 @@ svc-toolbox {
 
 .svc-toolbox__category-header__controls {
   position: absolute;
-  right: var(--sjs-base-unit, var(--base-unit, 8px));
-  top: var(--sjs-base-unit, var(--base-unit, 8px));
+  inset-inline-end: var(--sjs-base-unit, var(--base-unit, 8px));
+  top: var(--ctr-category-header-controls-top, var(--sjs-base-unit, var(--base-unit, 8px)));
   display: none;
 }
 
@@ -6383,16 +6485,6 @@ svc-toolbox {
   display: block;
 }
 
-.svc-toolbox__tool {
-  cursor: default;
-}
-.svc-toolbox__tool .sv-action__content {
-  display: flex;
-  padding-block-start: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  flex-direction: column;
-  align-items: flex-start;
-}
-
 .svc-toolbox__category--collapsed .svc-toolbox__tool {
   height: 0;
   visibility: hidden;
@@ -6405,16 +6497,43 @@ svc-toolbox {
 
 .svc-toolbox__placeholder {
   padding-top: calc(12 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline-start: auto;
+  margin-inline-end: auto;
   color: var(--ctr-property-grid-placeholder-text-description-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
   --default-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
-  font-family: var(--sjs-font-family, var(--font-family));
-  font-style: normal;
-  font-size: var(--sjs-font-size, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
-  line-height: calc(1.5 * var(--default-font-size));
+  --ctr-default-line-height: calc(1.5 * var(--default-font-size));
+  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
+  font-weight: 400;
+  font-size: var(--ctr-font-default-size, var(--default-font-size, 16px));
+  line-height: var(--ctr-font-default-line-height, var(--ctr-default-line-height, 24px));
   font-size: 12px;
 }
+/*!********************************************************************************************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/components/toolbox/toolbox-right.scss ***!
+  \********************************************************************************************************************************************************************************************/
+.svc-creator__toolbox--right .svc-toolbox,
+[dir=rtl] .svc-toolbox,
+[style*="direction:rtl"] .svc-toolbox,
+[style*="direction: rtl"] .svc-toolbox {
+  direction: rtl;
+}
+.svc-creator__toolbox--right .svc-toolbox__item-banner:after,
+[dir=rtl] .svc-toolbox__item-banner:after,
+[style*="direction:rtl"] .svc-toolbox__item-banner:after,
+[style*="direction: rtl"] .svc-toolbox__item-banner:after {
+  transform: translate(-2px, -2px) rotate(90deg);
+}
+.svc-creator__toolbox--right .svc-toolbox__item-submenu-button,
+[dir=rtl] .svc-toolbox__item-submenu-button,
+[style*="direction:rtl"] .svc-toolbox__item-submenu-button,
+[style*="direction: rtl"] .svc-toolbox__item-submenu-button {
+  transform: rotate(180deg);
+}
+
+.svc-creator__toolbox--right .sv-popup__body-content,
+.svc-creator__toolbox--right .spg-search-editor_container {
+  direction: initial;
+}
 /*!****************************************************************************************************************************************************************************************!*\
   !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/components/side-bar/side-bar.scss ***!
   \****************************************************************************************************************************************************************************************/
@@ -6422,7 +6541,7 @@ svc-toolbox {
   flex-direction: column;
   display: flex;
   position: relative;
-  font-family: var(--sjs-font-family, var(--font-family));
+  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
   min-width: 370px;
   width: 450px;
   height: 100%;
@@ -6714,6 +6833,7 @@ svc-toolbox {
 }
 
 .svc-side-bar .svc-toolbox {
+  padding-top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   width: 100%;
 }
 /*!*******************************************************************************************************************************************************************************************!*\
@@ -6849,8 +6969,11 @@ svc-toolbox {
   cursor: pointer;
 }
 
-.svc-menu-action__button:hover {
+.svc-menu-action__button:hover,
+.svc-menu-action__button:focus,
+.svc-menu-action__button:focus-within {
   background: var(--ctr-menu-toolbar-button-background-color-hovered, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
+  outline: unset;
 }
 
 .svc-menu-action__button.svc-menu-action__button--pressed {
@@ -6928,7 +7051,7 @@ svc-toolbox {
   font-weight: 600;
   font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  font-family: var(--sjs-font-family, var(--font-family));
+  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
   border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background-color: transparent;
   cursor: pointer;
@@ -7000,7 +7123,7 @@ button.spg-action-button--large {
   padding: var(--sjs-base-unit, var(--base-unit, 8px)) 0;
   line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  font-family: var(--sjs-font-family, var(--font-family));
+  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
   color: var(--ctr-label-text-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
   font-weight: normal;
   box-sizing: border-box;
@@ -7027,7 +7150,7 @@ button.spg-action-button--large {
   justify-content: flex-end;
   align-items: flex-end;
   padding: 0px;
-  font-family: var(--sjs-font-family, var(--font-family));
+  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
   line-height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   font-size: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -7158,7 +7281,7 @@ sv-question-error > div {
   padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   outline: none;
   font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  font-family: var(--sjs-font-family, var(--font-family));
+  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
   color: var(--ctr-editor-content-text-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
 }
 
@@ -7254,7 +7377,7 @@ input.spg-input:read-only::placeholder {
   padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   color: var(--ctr-editor-content-text-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
   font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  font-family: var(--sjs-font-family, var(--font-family));
+  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
   outline: none;
   border: none;
   line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -7318,7 +7441,7 @@ input.spg-input:read-only::placeholder {
   cursor: pointer;
   background-color: var(--ctr-property-grid-chapter-caption-background-color, var(--sjs-general-backcolor, var(--background, #fff)));
   box-shadow: inset 0px -1px 0px var(--ctr-property-grid-chapter-caption-border-color, var(--sjs-border-default, var(--border, #d6d6d6)));
-  font-family: var(--sjs-font-family, var(--font-family));
+  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
   font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   font-weight: 400;
   margin: 0;
@@ -7445,7 +7568,7 @@ input.spg-input:read-only::placeholder {
 }
 
 .spg-checkbox__caption {
-  font-family: var(--sjs-font-family, var(--font-family));
+  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
   font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   color: var(--ctr-checkbox-text-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
   line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -7602,7 +7725,7 @@ input.spg-input:read-only::placeholder {
   margin-top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background: transparent;
   color: var(--ctr-survey-action-button-text-color-positive, var(--sjs-primary-backcolor, var(--primary, #19b394)));
-  font-family: var(--sjs-font-family, var(--font-family));
+  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
   font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   font-weight: 600;
   line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -7959,11 +8082,12 @@ input.spg-input:read-only::placeholder {
 }
 .spg-theme-builder-root .spg-theme-group-caption {
   --default-bold-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
-  font-family: var(--sjs-font-family, var(--font-family));
+  --ctr-default-bold-line-height: calc(1.5 * var(--default-bold-font-size));
+  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
   font-style: normal;
   font-weight: 600;
-  font-size: var(--sjs-font-size, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
-  line-height: calc(1.5 * var(--default-bold-font-size));
+  font-size: var(--ctr-font-default-size, var(--default-bold-font-size, 16px));
+  line-height: var(--ctr-font-default-line-height, var(--ctr-default-bold-line-height, 24px));
   color: var(--ctr-property-grid-group-caption-text-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
   position: relative;
   top: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
@@ -8066,7 +8190,7 @@ input.spg-input:read-only::placeholder {
   white-space: nowrap;
   text-overflow: ellipsis;
   color: var(--ctr-property-grid-search-text-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
-  font-family: var(--sjs-font-family, var(--font-family));
+  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
   font-size: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   font-style: normal;
   font-weight: 600;
@@ -8129,7 +8253,7 @@ input.spg-input:read-only::placeholder {
 
 .spg-search-editor_toolbar-counter {
   color: var(--ctr-property-grid-search-count-text-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
-  font-family: var(--sjs-font-family, var(--font-family));
+  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
   font-style: normal;
   font-weight: 600;
   font-size: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -8195,6 +8319,7 @@ input.spg-input:read-only::placeholder {
 }
 
 .spg-root-modern.spg-root--one-category {
+  height: 100%;
   background-color: var(--ctr-property-grid-form-background-color, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
   border-right: unset;
 }
@@ -8239,9 +8364,6 @@ input.spg-input:read-only::placeholder {
 
 .spg-container {
   width: 100%;
-}
-
-.spg-container.spg-container_search {
   height: 100%;
 }
 
@@ -8327,7 +8449,7 @@ input.spg-input:read-only::placeholder {
   !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/utils/design.scss ***!
   \************************************************************************************************************************************************************************/
 .svc-text {
-  font-family: var(--sjs-font-family, var(--font-family));
+  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
   font-style: normal;
   font-weight: normal;
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
@@ -8563,7 +8685,7 @@ input.spg-input:read-only::placeholder {
 .spg-boolean-switch__title {
   color: var(--ctr-toggle-button-label-text-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
   text-align: left;
-  font-family: var(--ctr-default-font-family, var(--sjs-font-family, var(--font-family)));
+  font-family: var(--ctr-default-font-family, var(--ctr-font-family, var(--sjs-font-family, var(--font-family))));
   font-size: var(--ctr-default-font-size, 16px);
   line-height: var(--ctr-default-line-height, 24px);
   font-weight: var(--ctr-default-font-weight, 400);