@dynatrace/strato-components 3.5.2 → 3.7.0

package/editors/base-code-editor/BaseCodeEditor.css

@@ -1,241 +1,241 @@
-@keyframes _mvxq7yj-3-5-2 {
+@keyframes _mvxq7yj-3-7-0 {
   to {
     background-color: var(--dt-colors-background-container-neutral-accent, #5b5c81);
     color: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
   }
 }
-@keyframes _mvxq7yk-3-5-2 {
+@keyframes _mvxq7yk-3-7-0 {
   from {
     background-color: var(--dt-colors-background-container-neutral-accent, #5b5c81);
     color: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
   }
 }
-._mvxq7yl-3-5-2 {
-  --_mvxq7y0-3-5-2: var(--dt-colors-border-neutral-default, #dadbe4);
-  --_mvxq7y1-3-5-2: var(--dt-colors-border-neutral-default-hover, #d0d1dc);
-  --_mvxq7y2-3-5-2: var(--dt-colors-border-neutral-default-active, #c6c7d5);
-  --_mvxq7y7-3-5-2: var(--dt-colors-text-neutral-subdued, #595a7d);
-  --_mvxq7y8-3-5-2: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
-  --_mvxq7y9-3-5-2: var(--dt-colors-border-neutral-default, #dadbe4);
-  --_mvxq7yb-3-5-2: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_mvxq7yf-3-5-2: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_mvxq7yg-3-5-2: var(--dt-colors-border-neutral-accent, #595a7d);
-  --_mvxq7yh-3-5-2: var(--dt-colors-border-neutral-default, #dadbe4);
-  --_mvxq7yi-3-5-2: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+._mvxq7yl-3-7-0 {
+  --_mvxq7y0-3-7-0: var(--dt-colors-border-neutral-default, #dadbe4);
+  --_mvxq7y1-3-7-0: var(--dt-colors-border-neutral-default-hover, #d0d1dc);
+  --_mvxq7y2-3-7-0: var(--dt-colors-border-neutral-default-active, #c6c7d5);
+  --_mvxq7y7-3-7-0: var(--dt-colors-text-neutral-subdued, #595a7d);
+  --_mvxq7y8-3-7-0: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
+  --_mvxq7y9-3-7-0: var(--dt-colors-border-neutral-default, #dadbe4);
+  --_mvxq7yb-3-7-0: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_mvxq7yf-3-7-0: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_mvxq7yg-3-7-0: var(--dt-colors-border-neutral-accent, #595a7d);
+  --_mvxq7yh-3-7-0: var(--dt-colors-border-neutral-default, #dadbe4);
+  --_mvxq7yi-3-7-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
   width: 100%;
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
 }
-._mvxq7yn-3-5-2 {
-  --_mvxq7y3-3-5-2: 100%;
+._mvxq7yn-3-7-0 {
+  --_mvxq7y3-3-7-0: 100%;
   display: flex;
   max-height: 100%;
   min-height: 100%;
   flex-grow: 1;
 }
-._mvxq7yo-3-5-2 {
-  --_mvxq7y7-3-5-2: var(--dt-colors-text-critical-default, #bb0731);
-  --_mvxq7y8-3-5-2: var(--dt-colors-background-container-critical-emphasized, #f8e9e9);
-  --_mvxq7y9-3-5-2: var(--dt-colors-border-critical-default, #f6d6d5);
-  --_mvxq7yb-3-5-2: var(--dt-colors-text-critical-default, #bb0731);
-  --_mvxq7yf-3-5-2: var(--dt-colors-text-critical-default, #bb0731);
-  --_mvxq7yg-3-5-2: var(--dt-colors-border-critical-accent, #bb0731);
-  --_mvxq7yh-3-5-2: var(--dt-colors-border-critical-default, #f6d6d5);
-  --_mvxq7yi-3-5-2: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
-}
-._mvxq7yp-3-5-2 {
-  --_mvxq7ye-3-5-2: var(--dt-spacings-size-2, 2px);
-}
-._mvxq7ys-3-5-2 {
-  --_mvxq7y4-3-5-2: var(--dt-typography-code-base-default-size, 14px);
-  --_mvxq7y5-3-5-2: var(--dt-typography-code-base-default-family, Roboto Mono,monospace);
-  --_mvxq7ya-3-5-2: 33px;
-  --_mvxq7yd-3-5-2: 0 0 0 var(--dt-spacings-size-16, 16px);
-  --_mvxq7ye-3-5-2: var(--dt-spacings-size-12, 12px);
-  --_mvxq7y6-3-5-2: var(--dt-typography-code-base-default-line-height, 1.4285714286);
-  --_mvxq7yc-3-5-2: var(--dt-spacings-size-16, 16px);
-}
-._mvxq7yt-3-5-2 {
-  --_mvxq7y4-3-5-2: var(--dt-typography-code-small-default-size, 12px);
-  --_mvxq7y5-3-5-2: var(--dt-typography-code-small-default-family, Roboto Mono,monospace);
-  --_mvxq7ya-3-5-2: 27px;
-  --_mvxq7yd-3-5-2: 0 0 0 var(--dt-spacings-size-12, 12px);
-  --_mvxq7ye-3-5-2: var(--dt-spacings-size-6, 6px);
-  --_mvxq7y6-3-5-2: var(--dt-typography-code-small-default-line-height, 1.333333333);
-  --_mvxq7yc-3-5-2: var(--dt-spacings-size-12, 12px);
-}
-._mvxq7yu-3-5-2 {
-  --_mvxq7y0-3-5-2: var(--dt-colors-border-critical-default, #f6d6d5);
-  --_mvxq7y1-3-5-2: var(--dt-colors-border-critical-default-hover, #f5cac9);
-  --_mvxq7y2-3-5-2: var(--dt-colors-border-critical-default-active, #f3bebd);
-}
-._mvxq7yv-3-5-2 {
-  --_mvxq7ye-3-5-2: var(--dt-spacings-size-2, 2px);
-}
-._mvxq7yw-3-5-2 {
-  --_mvxq7ye-3-5-2: var(--dt-spacings-size-2, 2px);
-}
-._mvxq7ym-3-5-2 > div {
+._mvxq7yo-3-7-0 {
+  --_mvxq7y7-3-7-0: var(--dt-colors-text-critical-default, #bb0731);
+  --_mvxq7y8-3-7-0: var(--dt-colors-background-container-critical-emphasized, #f8e9e9);
+  --_mvxq7y9-3-7-0: var(--dt-colors-border-critical-default, #f6d6d5);
+  --_mvxq7yb-3-7-0: var(--dt-colors-text-critical-default, #bb0731);
+  --_mvxq7yf-3-7-0: var(--dt-colors-text-critical-default, #bb0731);
+  --_mvxq7yg-3-7-0: var(--dt-colors-border-critical-accent, #bb0731);
+  --_mvxq7yh-3-7-0: var(--dt-colors-border-critical-default, #f6d6d5);
+  --_mvxq7yi-3-7-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+}
+._mvxq7yp-3-7-0 {
+  --_mvxq7ye-3-7-0: var(--dt-spacings-size-2, 2px);
+}
+._mvxq7ys-3-7-0 {
+  --_mvxq7y4-3-7-0: var(--dt-typography-code-base-default-size, 14px);
+  --_mvxq7y5-3-7-0: var(--dt-typography-code-base-default-family, Roboto Mono,monospace);
+  --_mvxq7ya-3-7-0: 33px;
+  --_mvxq7yd-3-7-0: 0 0 0 var(--dt-spacings-size-16, 16px);
+  --_mvxq7ye-3-7-0: var(--dt-spacings-size-12, 12px);
+  --_mvxq7y6-3-7-0: var(--dt-typography-code-base-default-line-height, 1.4285714286);
+  --_mvxq7yc-3-7-0: var(--dt-spacings-size-16, 16px);
+}
+._mvxq7yt-3-7-0 {
+  --_mvxq7y4-3-7-0: var(--dt-typography-code-small-default-size, 12px);
+  --_mvxq7y5-3-7-0: var(--dt-typography-code-small-default-family, Roboto Mono,monospace);
+  --_mvxq7ya-3-7-0: 27px;
+  --_mvxq7yd-3-7-0: 0 0 0 var(--dt-spacings-size-12, 12px);
+  --_mvxq7ye-3-7-0: var(--dt-spacings-size-6, 6px);
+  --_mvxq7y6-3-7-0: var(--dt-typography-code-small-default-line-height, 1.333333333);
+  --_mvxq7yc-3-7-0: var(--dt-spacings-size-12, 12px);
+}
+._mvxq7yu-3-7-0 {
+  --_mvxq7y0-3-7-0: var(--dt-colors-border-critical-default, #f6d6d5);
+  --_mvxq7y1-3-7-0: var(--dt-colors-border-critical-default-hover, #f5cac9);
+  --_mvxq7y2-3-7-0: var(--dt-colors-border-critical-default-active, #f3bebd);
+}
+._mvxq7yv-3-7-0 {
+  --_mvxq7ye-3-7-0: var(--dt-spacings-size-2, 2px);
+}
+._mvxq7yw-3-7-0 {
+  --_mvxq7ye-3-7-0: var(--dt-spacings-size-2, 2px);
+}
+._mvxq7ym-3-7-0 > div {
   position: relative;
   overflow: visible;
 }
-._mvxq7ym-3-5-2 > div::before {
+._mvxq7ym-3-7-0 > div::before {
   content: '';
   position: absolute;
   inset: -2px;
   z-index: 1;
   border-radius: var(--dt-borders-radius-container-subdued, 6px);
   pointer-events: none;
-  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_mvxq7yg-3-5-2), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--_mvxq7yh-3-5-2);
+  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_mvxq7yg-3-7-0), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--_mvxq7yh-3-7-0);
 }
-._mvxq7yl-3-5-2 .cm-editor {
+._mvxq7yl-3-7-0 .cm-editor {
   background-color: var(--dt-colors-background-surface-default, #fff);
   border-radius: var(--dt-borders-radius-container-subdued, 6px);
   border-width: var(--dt-borders-width-emphasized, 2px);
   border-style: var(--dt-borders-style-default, solid);
-  border-color: var(--_mvxq7y0-3-5-2);
-  width: var(--_mvxq7y3-3-5-2);
+  border-color: var(--_mvxq7y0-3-7-0);
+  width: var(--_mvxq7y3-3-7-0);
 }
-._1jgl8s50-3-5-2 ._mvxq7yl-3-5-2 .cm-editor {
+._1jgl8s50-3-7-0 ._mvxq7yl-3-7-0 .cm-editor {
   border-width: var(--dt-borders-width-default, 1px);
 }
-._mvxq7yl-3-5-2 .cm-editor:hover {
-  border-color: var(--_mvxq7y1-3-5-2);
+._mvxq7yl-3-7-0 .cm-editor:hover {
+  border-color: var(--_mvxq7y1-3-7-0);
 }
-._mvxq7yl-3-5-2 .cm-editor.cm-focused {
-  border-color: var(--_mvxq7yg-3-5-2);
+._mvxq7yl-3-7-0 .cm-editor.cm-focused {
+  border-color: var(--_mvxq7yg-3-7-0);
 }
-._1jgl8s50-3-5-2 ._mvxq7yl-3-5-2 .cm-editor.cm-focused::before {
+._1jgl8s50-3-7-0 ._mvxq7yl-3-7-0 .cm-editor.cm-focused::before {
   content: '';
   position: absolute;
   inset: -2px;
   z-index: 1;
   border-radius: var(--dt-borders-radius-container-subdued, 6px);
   pointer-events: none;
-  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_mvxq7yg-3-5-2);
+  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_mvxq7yg-3-7-0);
 }
-._mvxq7yl-3-5-2 .cm-editor:focus-visible {
+._mvxq7yl-3-7-0 .cm-editor:focus-visible {
   outline: none;
 }
-._mvxq7yl-3-5-2 .cm-editor:active {
-  border-color: var(--_mvxq7y2-3-5-2);
+._mvxq7yl-3-7-0 .cm-editor:active {
+  border-color: var(--_mvxq7y2-3-7-0);
 }
-._mvxq7yl-3-5-2 .cm-scroller {
+._mvxq7yl-3-7-0 .cm-scroller {
   border-top-left-radius: calc(var(--dt-borders-radius-container-default, 9px)/2);
   border-bottom-left-radius: calc(var(--dt-borders-radius-container-default, 9px)/2);
 }
-._mvxq7yl-3-5-2 .cm-scroller:focus-visible {
+._mvxq7yl-3-7-0 .cm-scroller:focus-visible {
   outline: none;
 }
-._mvxq7yl-3-5-2 .cm-highlight {
-  animation: _mvxq7yj-3-5-2 var(--dt-timings-base-default, 300ms) var(--dt-easings-out-back, cubic-bezier(0.4, 1.6, 0.7, 1)),
-  _mvxq7yk-3-5-2 var(--dt-timings-slow-gentle, 800ms);
+._mvxq7yl-3-7-0 .cm-highlight {
+  animation: _mvxq7yj-3-7-0 var(--dt-timings-base-default, 300ms) var(--dt-easings-out-back, cubic-bezier(0.4, 1.6, 0.7, 1)),
+  _mvxq7yk-3-7-0 var(--dt-timings-slow-gentle, 800ms);
   animation-delay: 0s, var(--dt-timings-base-default, 300ms);
   animation-iteration-count: 1;
   border-radius: var(--dt-spacings-size-2, 2px);
 }
-._mvxq7yl-3-5-2 .cm-content, ._mvxq7yl-3-5-2 .cm-gutters {
-  font-size: var(--_mvxq7y4-3-5-2);
-  font-family: var(--_mvxq7y5-3-5-2);
+._mvxq7yl-3-7-0 .cm-content, ._mvxq7yl-3-7-0 .cm-gutters {
+  font-size: var(--_mvxq7y4-3-7-0);
+  font-family: var(--_mvxq7y5-3-7-0);
 }
-._mvxq7yl-3-5-2 .cm-content {
+._mvxq7yl-3-7-0 .cm-content {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   caret-color: var(--dt-colors-text-neutral-default, #2f2f4f);
-  padding-block: var(--_mvxq7ye-3-5-2);
+  padding-block: var(--_mvxq7ye-3-7-0);
 }
-._mvxq7yl-3-5-2 .cm-gutters {
-  color: var(--_mvxq7y7-3-5-2);
-  background-color: var(--_mvxq7y8-3-5-2);
-  border-color: var(--_mvxq7y9-3-5-2);
+._mvxq7yl-3-7-0 .cm-gutters {
+  color: var(--_mvxq7y7-3-7-0);
+  background-color: var(--_mvxq7y8-3-7-0);
+  border-color: var(--_mvxq7y9-3-7-0);
   border-right-width: var(--dt-borders-width-emphasized, 2px);
   border-right-style: var(--dt-borders-style-default, solid);
   text-align: right;
 }
-._1jgl8s50-3-5-2 ._mvxq7yl-3-5-2 .cm-gutters {
+._1jgl8s50-3-7-0 ._mvxq7yl-3-7-0 .cm-gutters {
   border-right-width: var(--dt-borders-width-default, 1px);
 }
-._mvxq7yl-3-5-2 .cm-lineNumbers {
-  min-width: var(--_mvxq7ya-3-5-2);
+._mvxq7yl-3-7-0 .cm-lineNumbers {
+  min-width: var(--_mvxq7ya-3-7-0);
 }
-._mvxq7yl-3-5-2 .cm-placeholder {
+._mvxq7yl-3-7-0 .cm-placeholder {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._mvxq7yl-3-5-2 .cm-focused {
+._mvxq7yl-3-7-0 .cm-focused {
   outline: 0 !important;
 }
-._mvxq7yl-3-5-2 .cm-line {
-  padding-inline: var(--_mvxq7yc-3-5-2);
-  line-height: var(--_mvxq7y6-3-5-2);
-  color: var(--_mvxq7yb-3-5-2);
+._mvxq7yl-3-7-0 .cm-line {
+  padding-inline: var(--_mvxq7yc-3-7-0);
+  line-height: var(--_mvxq7y6-3-7-0);
+  color: var(--_mvxq7yb-3-7-0);
 }
-._mvxq7yl-3-5-2:not(._mvxq7yr-3-5-2):not(._mvxq7yp-3-5-2) .cm-activeLine {
+._mvxq7yl-3-7-0:not(._mvxq7yr-3-7-0):not(._mvxq7yp-3-7-0) .cm-activeLine {
   outline: none;
   box-shadow: 0 calc(var(--dt-borders-width-default, 1px) * -1) 0 var(--dt-colors-border-neutral-default, #dadbe4), 0 var(--dt-borders-width-default, 1px) 0 var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._mvxq7yl-3-5-2:not(._mvxq7yr-3-5-2):not(._mvxq7yp-3-5-2) .cm-activeLineGutter {
+._mvxq7yl-3-7-0:not(._mvxq7yr-3-7-0):not(._mvxq7yp-3-7-0) .cm-activeLineGutter {
   border-block-color: var(--dt-colors-border-neutral-default, #dadbe4);
-  color: var(--_mvxq7yf-3-5-2);
+  color: var(--_mvxq7yf-3-7-0);
 }
-._mvxq7yl-3-5-2 .cm-activeLine, ._mvxq7yl-3-5-2  .cm-activeLineGutter {
+._mvxq7yl-3-7-0 .cm-activeLine, ._mvxq7yl-3-7-0  .cm-activeLineGutter {
   background-color: transparent;
 }
-._mvxq7yl-3-5-2 .tok-keyword, ._mvxq7yl-3-5-2 .tok-heading {
+._mvxq7yl-3-7-0 .tok-keyword, ._mvxq7yl-3-7-0 .tok-heading {
   color: var(--dt-colors-syntax-operators, #8136a9);
 }
-._mvxq7yl-3-5-2 .tok-string {
+._mvxq7yl-3-7-0 .tok-string {
   color: var(--dt-colors-syntax-string, #086467);
 }
-._mvxq7yl-3-5-2 .tok-number {
+._mvxq7yl-3-7-0 .tok-number {
   color: var(--dt-colors-syntax-number, #aa0081);
 }
-._mvxq7yl-3-5-2 .tok-typeName {
+._mvxq7yl-3-7-0 .tok-typeName {
   color: var(--dt-colors-syntax-classname, #2c2d4d);
 }
-._mvxq7yl-3-5-2 .tok-inserted {
+._mvxq7yl-3-7-0 .tok-inserted {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._mvxq7yl-3-5-2 .tok-meta {
+._mvxq7yl-3-7-0 .tok-meta {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._mvxq7yl-3-5-2 .tok-comment {
+._mvxq7yl-3-7-0 .tok-comment {
   color: var(--dt-colors-syntax-comment, #545586);
   font-style: italic;
 }
-._mvxq7yl-3-5-2 .tok-propertyName {
+._mvxq7yl-3-7-0 .tok-propertyName {
   color: var(--dt-colors-syntax-variable, #2754b5);
 }
-._mvxq7yl-3-5-2 .tok-variableName {
+._mvxq7yl-3-7-0 .tok-variableName {
   color: var(--dt-colors-syntax-variable, #2754b5);
 }
-._mvxq7yl-3-5-2 .tok-link {
+._mvxq7yl-3-7-0 .tok-link {
   color: var(--dt-colors-syntax-variable, #2754b5);
 }
-._mvxq7yl-3-5-2 .tok-atom {
+._mvxq7yl-3-7-0 .tok-atom {
   color: var(--dt-colors-syntax-variable, #2754b5);
 }
-._mvxq7yl-3-5-2 .tok-bool {
+._mvxq7yl-3-7-0 .tok-bool {
   color: var(--dt-colors-syntax-boolean, #973f00);
 }
-._mvxq7yl-3-5-2 .cm-diagnostics {
+._mvxq7yl-3-7-0 .cm-diagnostics {
   padding: var(--dt-spacings-size-6, 6px) var(--dt-spacings-size-12, 12px);
 }
-._mvxq7yl-3-5-2 .cm-diagnosticAction {
+._mvxq7yl-3-7-0 .cm-diagnosticAction {
   background-color: transparent;
   border-radius: 0;
   margin: 0;
   padding: 0;
 }
-._mvxq7yl-3-5-2 .cm-lintRange {
+._mvxq7yl-3-7-0 .cm-lintRange {
   background-repeat: repeat-x;
   background-size: 8px 2px;
   background-position: 0 95%;
 }
-._mvxq7yl-3-5-2 .cm-lintPoint-error:after {
+._mvxq7yl-3-7-0 .cm-lintPoint-error:after {
   border-bottom-color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._mvxq7yl-3-5-2 .cm-diagnostic-error {
+._mvxq7yl-3-7-0 .cm-diagnostic-error {
   border-left: 5px solid var(--dt-colors-text-critical-default, #bb0731);
 }
-._mvxq7yl-3-5-2 .cm-lintRange-error {
+._mvxq7yl-3-7-0 .cm-lintRange-error {
   background-image: linear-gradient(
   45deg,
   transparent 65%,
@@ -261,13 +261,13 @@ linear-gradient(
   transparent 50%
 );
 }
-._mvxq7yl-3-5-2 .cm-lintPoint-warning:after {
+._mvxq7yl-3-7-0 .cm-lintPoint-warning:after {
   border-bottom-color: var(--dt-colors-text-warning-default, #855400);
 }
-._mvxq7yl-3-5-2 .cm-diagnostic-warning {
+._mvxq7yl-3-7-0 .cm-diagnostic-warning {
   border-left: 5px solid var(--dt-colors-text-warning-default, #855400);
 }
-._mvxq7yl-3-5-2 .cm-lintRange-warning {
+._mvxq7yl-3-7-0 .cm-lintRange-warning {
   background-image: linear-gradient(
   45deg,
   transparent 65%,
@@ -293,13 +293,13 @@ linear-gradient(
   transparent 50%
 );
 }
-._mvxq7yl-3-5-2 .cm-lintPoint-info:after {
+._mvxq7yl-3-7-0 .cm-lintPoint-info:after {
   border-bottom-color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._mvxq7yl-3-5-2 .cm-diagnostic-info {
+._mvxq7yl-3-7-0 .cm-diagnostic-info {
   border-left: 5px solid var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._mvxq7yl-3-5-2 .cm-lintRange-info {
+._mvxq7yl-3-7-0 .cm-lintRange-info {
   background-image: linear-gradient(
   45deg,
   transparent 65%,
@@ -325,25 +325,25 @@ linear-gradient(
   transparent 50%
 );
 }
-._mvxq7yl-3-5-2 .cmt-keyword {
+._mvxq7yl-3-7-0 .cmt-keyword {
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
 }
-._mvxq7yl-3-5-2 .cm-lineNumbers > .cm-gutterElement {
-  padding: var(--_mvxq7yd-3-5-2);
+._mvxq7yl-3-7-0 .cm-lineNumbers > .cm-gutterElement {
+  padding: var(--_mvxq7yd-3-7-0);
 }
-._mvxq7yl-3-5-2 .cm-gutterElement {
+._mvxq7yl-3-7-0 .cm-gutterElement {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._mvxq7yl-3-5-2:not(._mvxq7yr-3-5-2):not(._mvxq7yo-3-5-2) .cm-gutterElement:hover {
+._mvxq7yl-3-7-0:not(._mvxq7yr-3-7-0):not(._mvxq7yo-3-7-0) .cm-gutterElement:hover {
   color: var(--dt-colors-icon-neutral-subdued-hover, #434465);
 }
-._mvxq7yl-3-5-2:not(._mvxq7yr-3-5-2):not(._mvxq7yo-3-5-2) .cm-gutterElement:active {
+._mvxq7yl-3-7-0:not(._mvxq7yr-3-7-0):not(._mvxq7yo-3-7-0) .cm-gutterElement:active {
   color: var(--dt-colors-icon-neutral-default, #2f2f4f);
 }
-._mvxq7yx-3-5-2 {
+._mvxq7yx-3-7-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   text-align: right;
 }
-._mvxq7yx-3-5-2 span {
+._mvxq7yx-3-7-0 span {
   max-width: calc(500px - var(--dt-spacings-size-32, 32px));
 }

package/editors/base-code-editor/BaseCodeEditor.d.ts

@@ -8,19 +8,14 @@ import type { FormControlStateProps } from '../../core/types/form-control-state.
 import type { MaskingProps } from '../../core/types/masking-props.js';
 import type { StylingProps } from '../../core/types/styling-props.js';
 /**
- * Props used for BaseCodeEditor
+ * Base props shared by both controlled and uncontrolled `BaseCodeEditor` usages.
  * @internal
  **/
-export interface BaseCodeEditorProps extends FormControlStateProps, AriaLabelingProps, StylingProps, DataTestId, MaskingProps, BehaviorTrackingProps {
+export interface BaseCodeEditorBaseProps extends FormControlStateProps, AriaLabelingProps, StylingProps, DataTestId, MaskingProps, BehaviorTrackingProps {
     /**
      * The ID for the DOM element.
      * */
     id?: string;
-    /**
-     * The contents of the editor.
-     * @defaultValue ''
-     */
-    value?: string;
     /**
      * Callback that is called when the value in the editor changes.
      */
@@ -98,6 +93,36 @@ export interface BaseCodeEditorProps extends FormControlStateProps, AriaLabeling
      */
     required?: boolean;
 }
+/**
+ * Props for the `BaseCodeEditor` in controlled usage.
+ * @internal
+ */
+export type BaseCodeEditorControlledProps = {
+    /**
+     * The contents of the editor. Treated as the initial CodeMirror document and
+     * synchronised with the editor on subsequent prop changes.
+     * @defaultValue ''
+     */
+    value?: string;
+    defaultValue?: never;
+};
+/**
+ * Props for the `BaseCodeEditor` in uncontrolled usage.
+ * @internal
+ */
+export type BaseCodeEditorUncontrolledProps = {
+    value?: never;
+    /**
+     * The initial contents of the editor for uncontrolled usage. Used only when the
+     * editor mounts; subsequent changes to this prop are ignored.
+     */
+    defaultValue?: string;
+};
+/**
+ * Props used for BaseCodeEditor.
+ * @internal
+ */
+export type BaseCodeEditorProps = BaseCodeEditorBaseProps & (BaseCodeEditorControlledProps | BaseCodeEditorUncontrolledProps);
 /**
  * public ref type
  * @internal

package/editors/base-code-editor/BaseCodeEditor.js

@@ -54,9 +54,9 @@ var import_sanitize_text = require("./utils/sanitize-text.js");
 var import_sanitize_value = require("./utils/sanitize-value.js");
 var import_useBehavioralTrackingProps = require("../../core/hooks/useBehavioralTrackingProps.js");
 var import_useControllableState = require("../../core/hooks/useControllableState.js");
+var import_useFocusRing = require("../../core/hooks/useFocusRing.js");
 var import_useFormControlState = require("../../core/hooks/useFormControlState.js");
 var import_useMergeRefs = require("../../core/hooks/useMergeRefs.js");
-var import_useFocusRing = require("../../core/styles/useFocusRing.js");
 var import_FormFieldMessageBaseItem = require("../../forms/forms-core/components/form-field-messages/FormFieldMessageBaseItem.js");
 var import_useSyncedFormControlProps = require("../../forms/forms-core/hooks/useSyncedFormControlProps.js");
 var import_InputGroup_css = require("../../layouts/input-group/InputGroup.sty.js");
@@ -92,9 +92,18 @@ const getEditorConfiguration = (intlProps, options) => {
 function useLazyEditorViewRef() {
   const viewRef = (0, import_react.useRef)(null);
   if (viewRef.current === null) {
-    viewRef.current = new import_view.EditorView({
+    const view = new import_view.EditorView({
       state: import_state.EditorState.create()
     });
+    const originalPosAtCoords = view.posAtCoords.bind(view);
+    view.posAtCoords = ((coords, precise) => {
+      try {
+        return originalPosAtCoords(coords, precise);
+      } catch {
+        return null;
+      }
+    });
+    viewRef.current = view;
   }
   return viewRef;
 }
@@ -122,6 +131,7 @@ const BaseCodeEditor = /* @__PURE__ */ (0, import_react.forwardRef)((props, forw
   const {
     controlState,
     value,
+    defaultValue,
     readOnly = false,
     spellCheck = false,
     lineWrap = false,
@@ -167,7 +177,7 @@ const BaseCodeEditor = /* @__PURE__ */ (0, import_react.forwardRef)((props, forw
     propId
   });
   const valueChangeRef = (0, import_react.useRef)(void 0);
-  const valueRef = (0, import_react.useRef)(value ?? "");
+  const valueRef = (0, import_react.useRef)(value ?? defaultValue ?? "");
   const isMarkedDirtyRef = (0, import_react.useRef)(false);
   const prevEditorConfigRef = (0, import_react.useRef)(void 0);
   const prevLangConfigRef = (0, import_react.useRef)(void 0);
@@ -281,8 +291,10 @@ const BaseCodeEditor = /* @__PURE__ */ (0, import_react.forwardRef)((props, forw
     };
     editorView.setState(
       import_state.EditorState.create({
-        // Initial value of the editor
-        doc: value ?? "",
+        // Initial value of the editor. `value` (controlled) takes precedence over
+        // `defaultValue` (uncontrolled initial document). Both are mutually exclusive
+        // at the type level, this guards against a runtime fallback.
+        doc: value ?? defaultValue ?? "",
         extensions: [
           getDomEventHandlers(onFocus, onBlur),
           import_state.Prec.highest(keymapCompartment.of((0, import_key_maps.getKeyMaps)(viewRef))),
@@ -394,6 +406,9 @@ const BaseCodeEditor = /* @__PURE__ */ (0, import_react.forwardRef)((props, forw
     valueChangeRef.current = onChange !== void 0 ? sanitizedOnChange : void 0;
   }, [onChange, sanitizedOnChange]);
   (0, import_react.useEffect)(() => {
+    if (value === void 0) {
+      return;
+    }
     const sanitizedValue = (0, import_sanitize_value.sanitizeValue)(value);
     if (viewRef.current.state.doc.toString() === sanitizedValue) {
       return;

package/editors/base-code-editor/BaseCodeEditor.sty.js

@@ -24,5 +24,5 @@ module.exports = __toCommonJS(BaseCodeEditor_css_exports);
 var import_AppRoot_css_ts_vanilla = require("../../core/components/app-root/AppRoot.css");
 var import_BaseCodeEditor_css_ts_vanilla = require("./BaseCodeEditor.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var autocompletionTypeText = "_mvxq7yx-3-5-2";
-var editorContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_mvxq7yl-3-5-2", variantClassNames: { focusVisible: { true: "_mvxq7ym-3-5-2" }, fullHeight: { true: "_mvxq7yn-3-5-2" }, hasError: { true: "_mvxq7yo-3-5-2" }, lineNumbers: { hidden: "_mvxq7yp-3-5-2", visible: "_mvxq7yq-3-5-2" }, readOnly: { true: "_mvxq7yr-3-5-2" }, size: { "default": "_mvxq7ys-3-5-2", condensed: "_mvxq7yt-3-5-2" } }, defaultVariants: { fullHeight: false, hasError: false, lineNumbers: "visible", readOnly: false, size: "default" }, compoundVariants: [[{ hasError: true, readOnly: false }, "_mvxq7yu-3-5-2"], [{ lineNumbers: "hidden", size: "default" }, "_mvxq7yv-3-5-2"], [{ lineNumbers: "hidden", size: "condensed" }, "_mvxq7yw-3-5-2"]] });
+var autocompletionTypeText = "_mvxq7yx-3-7-0";
+var editorContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_mvxq7yl-3-7-0", variantClassNames: { focusVisible: { true: "_mvxq7ym-3-7-0" }, fullHeight: { true: "_mvxq7yn-3-7-0" }, hasError: { true: "_mvxq7yo-3-7-0" }, lineNumbers: { hidden: "_mvxq7yp-3-7-0", visible: "_mvxq7yq-3-7-0" }, readOnly: { true: "_mvxq7yr-3-7-0" }, size: { "default": "_mvxq7ys-3-7-0", condensed: "_mvxq7yt-3-7-0" } }, defaultVariants: { fullHeight: false, hasError: false, lineNumbers: "visible", readOnly: false, size: "default" }, compoundVariants: [[{ hasError: true, readOnly: false }, "_mvxq7yu-3-7-0"], [{ lineNumbers: "hidden", size: "default" }, "_mvxq7yv-3-7-0"], [{ lineNumbers: "hidden", size: "condensed" }, "_mvxq7yw-3-7-0"]] });

package/editors/base-code-editor/utils/key-maps.js

@@ -65,13 +65,18 @@ const getKeyMaps = (viewRef) => {
       },
       {
         key: "Tab",
-        run: import_indent_with_spaces.indentWithSpaces,
+        run: (target) => {
+          if ((0, import_autocomplete.selectedCompletion)(target.state) !== null) {
+            return (0, import_autocomplete.acceptCompletion)(target);
+          }
+          return (0, import_indent_with_spaces.indentWithSpaces)(target);
+        },
         // SHIFT+TAB fix
         shift: import_commands.indentLess
       },
       {
         key: "Escape",
-        run: (target) => {
+        run: () => {
           viewRef.current.dom.querySelector(".cm-scroller")?.focus();
           return true;
         }