@dynatrace/strato-components 3.1.1 → 3.2.0

package/esm/core/utils/colorUtils.css

@@ -1,75 +1,75 @@
-._k096v44-3-1-1 {
-  --_k096v40-3-1-1: var(--dt-colors-text-critical-default, #bb0731);
-  --_k096v41-3-1-1: var(--dt-colors-icon-critical-default, #bb0731);
-  --_k096v42-3-1-1: var(--dt-colors-border-critical-default, #f6d6d5);
+._k096v44-3-2-0 {
+  --_k096v40-3-2-0: var(--dt-colors-text-critical-default, #bb0731);
+  --_k096v41-3-2-0: var(--dt-colors-icon-critical-default, #bb0731);
+  --_k096v42-3-2-0: var(--dt-colors-border-critical-default, #f6d6d5);
 }
-._k096v45-3-1-1 {
-  --_k096v40-3-1-1: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_k096v41-3-1-1: var(--dt-colors-icon-neutral-default, #2f2f4f);
-  --_k096v42-3-1-1: var(--dt-colors-border-neutral-default, #dadbe4);
+._k096v45-3-2-0 {
+  --_k096v40-3-2-0: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_k096v41-3-2-0: var(--dt-colors-icon-neutral-default, #2f2f4f);
+  --_k096v42-3-2-0: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._k096v46-3-1-1 {
-  --_k096v40-3-1-1: var(--dt-colors-text-primary-default, #464cce);
-  --_k096v41-3-1-1: var(--dt-colors-icon-primary-default, #464cce);
-  --_k096v42-3-1-1: var(--dt-colors-border-primary-default, #d5dbf6);
+._k096v46-3-2-0 {
+  --_k096v40-3-2-0: var(--dt-colors-text-primary-default, #464cce);
+  --_k096v41-3-2-0: var(--dt-colors-icon-primary-default, #464cce);
+  --_k096v42-3-2-0: var(--dt-colors-border-primary-default, #d5dbf6);
 }
-._k096v47-3-1-1 {
-  --_k096v40-3-1-1: var(--dt-colors-text-success-default, #2d6761);
-  --_k096v41-3-1-1: var(--dt-colors-icon-success-default, #2d6761);
-  --_k096v42-3-1-1: var(--dt-colors-border-success-default, #d3dedd);
+._k096v47-3-2-0 {
+  --_k096v40-3-2-0: var(--dt-colors-text-success-default, #2d6761);
+  --_k096v41-3-2-0: var(--dt-colors-icon-success-default, #2d6761);
+  --_k096v42-3-2-0: var(--dt-colors-border-success-default, #d3dedd);
 }
-._k096v48-3-1-1 {
-  --_k096v40-3-1-1: var(--dt-colors-text-warning-default, #855400);
-  --_k096v41-3-1-1: var(--dt-colors-icon-warning-default, #855400);
-  --_k096v42-3-1-1: var(--dt-colors-border-warning-default, #f9ebdb);
+._k096v48-3-2-0 {
+  --_k096v40-3-2-0: var(--dt-colors-text-warning-default, #855400);
+  --_k096v41-3-2-0: var(--dt-colors-icon-warning-default, #855400);
+  --_k096v42-3-2-0: var(--dt-colors-border-warning-default, #f9ebdb);
 }
-._k096v4d-3-1-1 {
-  --_k096v40-3-1-1: var(--dt-colors-text-primary-on-accent-default, #f4f4fb);
-  --_k096v41-3-1-1: var(--dt-colors-icon-primary-on-accent-default, #f4f4fb);
-  --_k096v42-3-1-1: var(--dt-colors-border-primary-accent, #464cce);
+._k096v4d-3-2-0 {
+  --_k096v40-3-2-0: var(--dt-colors-text-primary-on-accent-default, #f4f4fb);
+  --_k096v41-3-2-0: var(--dt-colors-icon-primary-on-accent-default, #f4f4fb);
+  --_k096v42-3-2-0: var(--dt-colors-border-primary-accent, #464cce);
 }
-._k096v4e-3-1-1 {
-  --_k096v40-3-1-1: var(--dt-colors-text-success-on-accent-default, #f1f4f4);
-  --_k096v41-3-1-1: var(--dt-colors-icon-success-on-accent-default, #f1f4f4);
-  --_k096v42-3-1-1: var(--dt-colors-border-success-accent, #2d6761);
+._k096v4e-3-2-0 {
+  --_k096v40-3-2-0: var(--dt-colors-text-success-on-accent-default, #f1f4f4);
+  --_k096v41-3-2-0: var(--dt-colors-icon-success-on-accent-default, #f1f4f4);
+  --_k096v42-3-2-0: var(--dt-colors-border-success-accent, #2d6761);
 }
-._k096v4f-3-1-1 {
-  --_k096v40-3-1-1: var(--dt-colors-text-warning-on-accent-default, #272024);
-  --_k096v41-3-1-1: var(--dt-colors-icon-warning-on-accent-default, #272024);
-  --_k096v42-3-1-1: var(--dt-colors-border-warning-accent, #855400);
+._k096v4f-3-2-0 {
+  --_k096v40-3-2-0: var(--dt-colors-text-warning-on-accent-default, #272024);
+  --_k096v41-3-2-0: var(--dt-colors-icon-warning-on-accent-default, #272024);
+  --_k096v42-3-2-0: var(--dt-colors-border-warning-accent, #855400);
 }
-._k096v4g-3-1-1 {
-  --_k096v40-3-1-1: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
-  --_k096v41-3-1-1: var(--dt-colors-icon-critical-on-accent-default, #f9f1f3);
-  --_k096v42-3-1-1: var(--dt-colors-border-critical-accent, #bb0731);
+._k096v4g-3-2-0 {
+  --_k096v40-3-2-0: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
+  --_k096v41-3-2-0: var(--dt-colors-icon-critical-on-accent-default, #f9f1f3);
+  --_k096v42-3-2-0: var(--dt-colors-border-critical-accent, #bb0731);
 }
-._k096v4h-3-1-1 {
-  --_k096v40-3-1-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_k096v41-3-1-1: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
-  --_k096v42-3-1-1: var(--dt-colors-border-neutral-accent, #595a7d);
+._k096v4h-3-2-0 {
+  --_k096v40-3-2-0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_k096v41-3-2-0: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
+  --_k096v42-3-2-0: var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._k096v4i-3-1-1 {
-  --_k096v40-3-1-1: var(--dt-colors-text-primary-disabled, #595a7d80);
-  --_k096v41-3-1-1: var(--dt-colors-icon-primary-disabled, #595a7d80);
-  --_k096v42-3-1-1: var(--dt-colors-border-primary-disabled, #dadbe480);
+._k096v4i-3-2-0 {
+  --_k096v40-3-2-0: var(--dt-colors-text-primary-disabled, #595a7d80);
+  --_k096v41-3-2-0: var(--dt-colors-icon-primary-disabled, #595a7d80);
+  --_k096v42-3-2-0: var(--dt-colors-border-primary-disabled, #dadbe480);
 }
-._k096v4j-3-1-1 {
-  --_k096v40-3-1-1: var(--dt-colors-text-success-disabled, #595a7d80);
-  --_k096v41-3-1-1: var(--dt-colors-icon-success-disabled, #595a7d80);
-  --_k096v42-3-1-1: var(--dt-colors-border-success-disabled, #dadbe480);
+._k096v4j-3-2-0 {
+  --_k096v40-3-2-0: var(--dt-colors-text-success-disabled, #595a7d80);
+  --_k096v41-3-2-0: var(--dt-colors-icon-success-disabled, #595a7d80);
+  --_k096v42-3-2-0: var(--dt-colors-border-success-disabled, #dadbe480);
 }
-._k096v4k-3-1-1 {
-  --_k096v40-3-1-1: var(--dt-colors-text-warning-disabled, #595a7d80);
-  --_k096v41-3-1-1: var(--dt-colors-icon-warning-disabled, #595a7d80);
-  --_k096v42-3-1-1: var(--dt-colors-border-warning-disabled, #dadbe480);
+._k096v4k-3-2-0 {
+  --_k096v40-3-2-0: var(--dt-colors-text-warning-disabled, #595a7d80);
+  --_k096v41-3-2-0: var(--dt-colors-icon-warning-disabled, #595a7d80);
+  --_k096v42-3-2-0: var(--dt-colors-border-warning-disabled, #dadbe480);
 }
-._k096v4l-3-1-1 {
-  --_k096v40-3-1-1: var(--dt-colors-text-critical-disabled, #595a7d80);
-  --_k096v41-3-1-1: var(--dt-colors-icon-critical-disabled, #595a7d80);
-  --_k096v42-3-1-1: var(--dt-colors-border-critical-disabled, #dadbe480);
+._k096v4l-3-2-0 {
+  --_k096v40-3-2-0: var(--dt-colors-text-critical-disabled, #595a7d80);
+  --_k096v41-3-2-0: var(--dt-colors-icon-critical-disabled, #595a7d80);
+  --_k096v42-3-2-0: var(--dt-colors-border-critical-disabled, #dadbe480);
 }
-._k096v4m-3-1-1 {
-  --_k096v40-3-1-1: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_k096v41-3-1-1: var(--dt-colors-icon-neutral-disabled, #595a7d80);
-  --_k096v42-3-1-1: var(--dt-colors-border-neutral-disabled, #dadbe480);
+._k096v4m-3-2-0 {
+  --_k096v40-3-2-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_k096v41-3-2-0: var(--dt-colors-icon-neutral-disabled, #595a7d80);
+  --_k096v42-3-2-0: var(--dt-colors-border-neutral-disabled, #dadbe480);
 }

package/esm/core/utils/colorUtils.sty.js

@@ -1,7 +1,7 @@
 import "./colorUtils.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var colorUtilsCSS = _7a468({ defaultClassName: "_k096v43-3-1-1", variantClassNames: { color: { critical: "_k096v44-3-1-1", neutral: "_k096v45-3-1-1", primary: "_k096v46-3-1-1", success: "_k096v47-3-1-1", warning: "_k096v48-3-1-1" }, variant: { "default": "_k096v49-3-1-1", accent: "_k096v4a-3-1-1" }, disabled: { true: "_k096v4b-3-1-1", false: "_k096v4c-3-1-1" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "_k096v4d-3-1-1"], [{ color: "success", variant: "accent" }, "_k096v4e-3-1-1"], [{ color: "warning", variant: "accent" }, "_k096v4f-3-1-1"], [{ color: "critical", variant: "accent" }, "_k096v4g-3-1-1"], [{ color: "neutral", variant: "accent" }, "_k096v4h-3-1-1"], [{ color: "primary", disabled: true }, "_k096v4i-3-1-1"], [{ color: "success", disabled: true }, "_k096v4j-3-1-1"], [{ color: "warning", disabled: true }, "_k096v4k-3-1-1"], [{ color: "critical", disabled: true }, "_k096v4l-3-1-1"], [{ color: "neutral", disabled: true }, "_k096v4m-3-1-1"]] });
-var colorUtilsVars = { text: "var(--_k096v40-3-1-1)", icon: "var(--_k096v41-3-1-1)", borderColor: "var(--_k096v42-3-1-1)" };
+var colorUtilsCSS = _7a468({ defaultClassName: "_k096v43-3-2-0", variantClassNames: { color: { critical: "_k096v44-3-2-0", neutral: "_k096v45-3-2-0", primary: "_k096v46-3-2-0", success: "_k096v47-3-2-0", warning: "_k096v48-3-2-0" }, variant: { "default": "_k096v49-3-2-0", accent: "_k096v4a-3-2-0" }, disabled: { true: "_k096v4b-3-2-0", false: "_k096v4c-3-2-0" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "_k096v4d-3-2-0"], [{ color: "success", variant: "accent" }, "_k096v4e-3-2-0"], [{ color: "warning", variant: "accent" }, "_k096v4f-3-2-0"], [{ color: "critical", variant: "accent" }, "_k096v4g-3-2-0"], [{ color: "neutral", variant: "accent" }, "_k096v4h-3-2-0"], [{ color: "primary", disabled: true }, "_k096v4i-3-2-0"], [{ color: "success", disabled: true }, "_k096v4j-3-2-0"], [{ color: "warning", disabled: true }, "_k096v4k-3-2-0"], [{ color: "critical", disabled: true }, "_k096v4l-3-2-0"], [{ color: "neutral", disabled: true }, "_k096v4m-3-2-0"]] });
+var colorUtilsVars = { text: "var(--_k096v40-3-2-0)", icon: "var(--_k096v41-3-2-0)", borderColor: "var(--_k096v42-3-2-0)" };
 export {
   colorUtilsCSS,
   colorUtilsVars

package/esm/core/utils/colorUtils.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/core/utils/colorUtils.css.ts"],
-  "sourcesContent": ["import './colorUtils.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var colorUtilsCSS = _7a468({defaultClassName:'_k096v43-3-1-1',variantClassNames:{color:{critical:'_k096v44-3-1-1',neutral:'_k096v45-3-1-1',primary:'_k096v46-3-1-1',success:'_k096v47-3-1-1',warning:'_k096v48-3-1-1'},variant:{'default':'_k096v49-3-1-1',accent:'_k096v4a-3-1-1'},disabled:{true:'_k096v4b-3-1-1',false:'_k096v4c-3-1-1'}},defaultVariants:{},compoundVariants:[[{color:'primary',variant:'accent'},'_k096v4d-3-1-1'],[{color:'success',variant:'accent'},'_k096v4e-3-1-1'],[{color:'warning',variant:'accent'},'_k096v4f-3-1-1'],[{color:'critical',variant:'accent'},'_k096v4g-3-1-1'],[{color:'neutral',variant:'accent'},'_k096v4h-3-1-1'],[{color:'primary',disabled:true},'_k096v4i-3-1-1'],[{color:'success',disabled:true},'_k096v4j-3-1-1'],[{color:'warning',disabled:true},'_k096v4k-3-1-1'],[{color:'critical',disabled:true},'_k096v4l-3-1-1'],[{color:'neutral',disabled:true},'_k096v4m-3-1-1']]});\nexport var colorUtilsVars = {text:'var(--_k096v40-3-1-1)',icon:'var(--_k096v41-3-1-1)',borderColor:'var(--_k096v42-3-1-1)'};"],
+  "sourcesContent": ["import './colorUtils.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var colorUtilsCSS = _7a468({defaultClassName:'_k096v43-3-2-0',variantClassNames:{color:{critical:'_k096v44-3-2-0',neutral:'_k096v45-3-2-0',primary:'_k096v46-3-2-0',success:'_k096v47-3-2-0',warning:'_k096v48-3-2-0'},variant:{'default':'_k096v49-3-2-0',accent:'_k096v4a-3-2-0'},disabled:{true:'_k096v4b-3-2-0',false:'_k096v4c-3-2-0'}},defaultVariants:{},compoundVariants:[[{color:'primary',variant:'accent'},'_k096v4d-3-2-0'],[{color:'success',variant:'accent'},'_k096v4e-3-2-0'],[{color:'warning',variant:'accent'},'_k096v4f-3-2-0'],[{color:'critical',variant:'accent'},'_k096v4g-3-2-0'],[{color:'neutral',variant:'accent'},'_k096v4h-3-2-0'],[{color:'primary',disabled:true},'_k096v4i-3-2-0'],[{color:'success',disabled:true},'_k096v4j-3-2-0'],[{color:'warning',disabled:true},'_k096v4k-3-2-0'],[{color:'critical',disabled:true},'_k096v4l-3-2-0'],[{color:'neutral',disabled:true},'_k096v4m-3-2-0']]});\nexport var colorUtilsVars = {text:'var(--_k096v40-3-2-0)',icon:'var(--_k096v41-3-2-0)',borderColor:'var(--_k096v42-3-2-0)'};"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,OAAM,EAAC,UAAS,kBAAiB,SAAQ,kBAAiB,SAAQ,kBAAiB,SAAQ,kBAAiB,SAAQ,iBAAgB,GAAE,SAAQ,EAAC,WAAU,kBAAiB,QAAO,iBAAgB,GAAE,UAAS,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,OAAM,WAAU,SAAQ,SAAQ,GAAE,gBAAgB,GAAE,CAAC,EAAC,OAAM,WAAU,SAAQ,SAAQ,GAAE,gBAAgB,GAAE,CAAC,EAAC,OAAM,WAAU,SAAQ,SAAQ,GAAE,gBAAgB,GAAE,CAAC,EAAC,OAAM,YAAW,SAAQ,SAAQ,GAAE,gBAAgB,GAAE,CAAC,EAAC,OAAM,WAAU,SAAQ,SAAQ,GAAE,gBAAgB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,gBAAgB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,gBAAgB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,gBAAgB,GAAE,CAAC,EAAC,OAAM,YAAW,UAAS,KAAI,GAAE,gBAAgB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,gBAAgB,CAAC,EAAC,CAAC;AACl4B,IAAI,iBAAiB,EAAC,MAAK,yBAAwB,MAAK,yBAAwB,aAAY,wBAAuB;",
   "names": []
 }

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

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

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

@@ -24,7 +24,7 @@ import {
   useState
 } from "react";
 import { useIntl } from "react-intl";
-import { editorContainerCSS } from "./BaseCodeEditor.sty.js";
+import * as styles from "./BaseCodeEditor.sty.js";
 import { configureLineWrap } from "./configuration/configure-line-wrap.js";
 import { configurePlaceholder } from "./configuration/configure-placeholder.js";
 import { configureReadOnly } from "./configuration/configure-read-only.js";
@@ -322,7 +322,8 @@ const BaseCodeEditor = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
         singleLine,
         hideLineNumbers,
         gutterConfiguration,
-        required
+        required,
+        size
       }),
       ...getLanguageConfiguration(configuration || {}, {
         messages,
@@ -340,7 +341,9 @@ const BaseCodeEditor = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     messages,
     singleLine,
     hideLineNumbers,
-    gutterConfiguration
+    gutterConfiguration,
+    required,
+    size
   ]);
   useEffect(() => {
     configureReadOnly(readOnly, viewRef, keymapCompartment);
@@ -498,7 +501,7 @@ const BaseCodeEditor = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
       {
         ref: rootRef,
         className: clsx(
-          editorContainerCSS({
+          styles.editorContainer({
             focusVisible: isFocusVisible,
             fullHeight,
             hasError,