@cloud-ru/ds-fields 2.2.7-preview-d90ac2be.0 → 2.3.1-preview-0406cbd2.0

package/dist/cjs/components/shared/styles.module.css

@@ -1,202 +1,202 @@
 @charset "UTF-8";
 .materialLayer[data-acrylic-appearance=primary][data-acrylic-level=default]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter, none);
 }
 .materialLayer[data-acrylic-appearance=primary][data-acrylic-level=default] .acrylicBg{
   opacity:var(--sn-acrylic-opacityBackground, 1);
-  background:var(--sn-theme-color-primary-background, var(--sn-brand-color-primary-90, var(--sn-brandRole-color-brandA-90, var(--sn-primitive-color-brandA-90, #edf7f1))));
+  background:var(--sn-theme-color-primary-background, var(--sn-brand-color-primary-90, #edf7f1));
 }
 .materialLayer[data-acrylic-appearance=primary][data-acrylic-level="1Level"]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
 }
 .materialLayer[data-acrylic-appearance=primary][data-acrylic-level="1Level"] .acrylicBg{
   opacity:var(--sn-acrylic-opacityBackground1Level, 1);
-  background:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, var(--sn-brandRole-color-brandA-95, var(--sn-primitive-color-brandA-95, #f5fdf8))));
+  background:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, #f5fdf8));
 }
 .materialLayer[data-acrylic-appearance=primary][data-acrylic-level="2Level"]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
 }
 .materialLayer[data-acrylic-appearance=primary][data-acrylic-level="2Level"] .acrylicBg{
   opacity:var(--sn-acrylic-opacityBackground2Level, 1);
-  background:var(--sn-theme-color-primary-background2Level, var(--sn-brand-color-primary-99, var(--sn-brandRole-color-brandA-99, var(--sn-primitive-color-brandA-99, #fbfffc))));
+  background:var(--sn-theme-color-primary-background2Level, var(--sn-brand-color-primary-99, #fbfffc));
 }
 .materialLayer[data-acrylic-appearance=neutral][data-acrylic-level=default]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter, none);
 }
 .materialLayer[data-acrylic-appearance=neutral][data-acrylic-level=default] .acrylicBg{
   opacity:var(--sn-acrylic-opacityBackground, 1);
-  background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
+  background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
 }
 .materialLayer[data-acrylic-appearance=neutral][data-acrylic-level="1Level"]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
 }
 .materialLayer[data-acrylic-appearance=neutral][data-acrylic-level="1Level"] .acrylicBg{
   opacity:var(--sn-acrylic-opacityBackground1Level, 1);
-  background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+  background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
 }
 .materialLayer[data-acrylic-appearance=neutral][data-acrylic-level="2Level"]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
 }
 .materialLayer[data-acrylic-appearance=neutral][data-acrylic-level="2Level"] .acrylicBg{
   opacity:var(--sn-acrylic-opacityBackground2Level, 1);
-  background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
+  background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-brand-palette-gray-99, #ffffff)));
 }
 .materialLayer[data-acrylic-appearance=red][data-acrylic-level=default]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter, none);
 }
 .materialLayer[data-acrylic-appearance=red][data-acrylic-level=default] .acrylicBg{
   opacity:var(--sn-acrylic-opacityBackground, 1);
-  background:var(--sn-theme-color-red-background, var(--sn-primitive-color-red-90, #fee8e5));
+  background:var(--sn-theme-color-red-background, var(--sn-brand-palette-red-90, #fee8e5));
 }
 .materialLayer[data-acrylic-appearance=red][data-acrylic-level="1Level"]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
 }
 .materialLayer[data-acrylic-appearance=red][data-acrylic-level="1Level"] .acrylicBg{
   opacity:var(--sn-acrylic-opacityBackground1Level, 1);
-  background:var(--sn-theme-color-red-background1Level, var(--sn-primitive-color-red-95, #fef5f1));
+  background:var(--sn-theme-color-red-background1Level, var(--sn-brand-palette-red-95, #fef5f1));
 }
 .materialLayer[data-acrylic-appearance=red][data-acrylic-level="2Level"]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
 }
 .materialLayer[data-acrylic-appearance=red][data-acrylic-level="2Level"] .acrylicBg{
   opacity:var(--sn-acrylic-opacityBackground2Level, 1);
-  background:var(--sn-theme-color-red-background2Level, var(--sn-primitive-color-red-99, #fffaf7));
+  background:var(--sn-theme-color-red-background2Level, var(--sn-brand-palette-red-99, #fffaf7));
 }
 .materialLayer[data-acrylic-appearance=orange][data-acrylic-level=default]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter, none);
 }
 .materialLayer[data-acrylic-appearance=orange][data-acrylic-level=default] .acrylicBg{
   opacity:var(--sn-acrylic-opacityBackground, 1);
-  background:var(--sn-theme-color-orange-background, var(--sn-primitive-color-orange-90, #ffedcf));
+  background:var(--sn-theme-color-orange-background, var(--sn-brand-palette-orange-90, #ffedcf));
 }
 .materialLayer[data-acrylic-appearance=orange][data-acrylic-level="1Level"]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
 }
 .materialLayer[data-acrylic-appearance=orange][data-acrylic-level="1Level"] .acrylicBg{
   opacity:var(--sn-acrylic-opacityBackground1Level, 1);
-  background:var(--sn-theme-color-orange-background1Level, var(--sn-primitive-color-orange-95, #fff6e5));
+  background:var(--sn-theme-color-orange-background1Level, var(--sn-brand-palette-orange-95, #fff6e5));
 }
 .materialLayer[data-acrylic-appearance=orange][data-acrylic-level="2Level"]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
 }
 .materialLayer[data-acrylic-appearance=orange][data-acrylic-level="2Level"] .acrylicBg{
   opacity:var(--sn-acrylic-opacityBackground2Level, 1);
-  background:var(--sn-theme-color-orange-background2Level, var(--sn-primitive-color-orange-99, #fffcf4));
+  background:var(--sn-theme-color-orange-background2Level, var(--sn-brand-palette-orange-99, #fffcf4));
 }
 .materialLayer[data-acrylic-appearance=yellow][data-acrylic-level=default]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter, none);
 }
 .materialLayer[data-acrylic-appearance=yellow][data-acrylic-level=default] .acrylicBg{
   opacity:var(--sn-acrylic-opacityBackground, 1);
-  background:var(--sn-theme-color-yellow-background, var(--sn-primitive-color-yellow-90, #fdf4cc));
+  background:var(--sn-theme-color-yellow-background, var(--sn-brand-palette-yellow-90, #fdf4cc));
 }
 .materialLayer[data-acrylic-appearance=yellow][data-acrylic-level="1Level"]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
 }
 .materialLayer[data-acrylic-appearance=yellow][data-acrylic-level="1Level"] .acrylicBg{
   opacity:var(--sn-acrylic-opacityBackground1Level, 1);
-  background:var(--sn-theme-color-yellow-background1Level, var(--sn-primitive-color-yellow-95, #fffbe6));
+  background:var(--sn-theme-color-yellow-background1Level, var(--sn-brand-palette-yellow-95, #fffbe6));
 }
 .materialLayer[data-acrylic-appearance=yellow][data-acrylic-level="2Level"]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
 }
 .materialLayer[data-acrylic-appearance=yellow][data-acrylic-level="2Level"] .acrylicBg{
   opacity:var(--sn-acrylic-opacityBackground2Level, 1);
-  background:var(--sn-theme-color-yellow-background2Level, var(--sn-primitive-color-yellow-99, #fffef6));
+  background:var(--sn-theme-color-yellow-background2Level, var(--sn-brand-palette-yellow-99, #fffef6));
 }
 .materialLayer[data-acrylic-appearance=green][data-acrylic-level=default]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter, none);
 }
 .materialLayer[data-acrylic-appearance=green][data-acrylic-level=default] .acrylicBg{
   opacity:var(--sn-acrylic-opacityBackground, 1);
-  background:var(--sn-theme-color-green-background, var(--sn-primitive-color-green-90, #e4f5df));
+  background:var(--sn-theme-color-green-background, var(--sn-brand-palette-green-90, #e4f5df));
 }
 .materialLayer[data-acrylic-appearance=green][data-acrylic-level="1Level"]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
 }
 .materialLayer[data-acrylic-appearance=green][data-acrylic-level="1Level"] .acrylicBg{
   opacity:var(--sn-acrylic-opacityBackground1Level, 1);
-  background:var(--sn-theme-color-green-background1Level, var(--sn-primitive-color-green-95, #f1faed));
+  background:var(--sn-theme-color-green-background1Level, var(--sn-brand-palette-green-95, #f1faed));
 }
 .materialLayer[data-acrylic-appearance=green][data-acrylic-level="2Level"]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
 }
 .materialLayer[data-acrylic-appearance=green][data-acrylic-level="2Level"] .acrylicBg{
   opacity:var(--sn-acrylic-opacityBackground2Level, 1);
-  background:var(--sn-theme-color-green-background2Level, var(--sn-primitive-color-green-99, #fcfefa));
+  background:var(--sn-theme-color-green-background2Level, var(--sn-brand-palette-green-99, #fcfefa));
 }
 .materialLayer[data-acrylic-appearance=blue][data-acrylic-level=default]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter, none);
 }
 .materialLayer[data-acrylic-appearance=blue][data-acrylic-level=default] .acrylicBg{
   opacity:var(--sn-acrylic-opacityBackground, 1);
-  background:var(--sn-theme-color-blue-background, var(--sn-primitive-color-blue-90, #e6f4fd));
+  background:var(--sn-theme-color-blue-background, var(--sn-brand-palette-blue-90, #e6f4fd));
 }
 .materialLayer[data-acrylic-appearance=blue][data-acrylic-level="1Level"]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
 }
 .materialLayer[data-acrylic-appearance=blue][data-acrylic-level="1Level"] .acrylicBg{
   opacity:var(--sn-acrylic-opacityBackground1Level, 1);
-  background:var(--sn-theme-color-blue-background1Level, var(--sn-primitive-color-blue-95, #f2f9ff));
+  background:var(--sn-theme-color-blue-background1Level, var(--sn-brand-palette-blue-95, #f2f9ff));
 }
 .materialLayer[data-acrylic-appearance=blue][data-acrylic-level="2Level"]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
 }
 .materialLayer[data-acrylic-appearance=blue][data-acrylic-level="2Level"] .acrylicBg{
   opacity:var(--sn-acrylic-opacityBackground2Level, 1);
-  background:var(--sn-theme-color-blue-background2Level, var(--sn-primitive-color-blue-99, #fdfeff));
+  background:var(--sn-theme-color-blue-background2Level, var(--sn-brand-palette-blue-99, #fdfeff));
 }
 .materialLayer[data-acrylic-appearance=violet][data-acrylic-level=default]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter, none);
 }
 .materialLayer[data-acrylic-appearance=violet][data-acrylic-level=default] .acrylicBg{
   opacity:var(--sn-acrylic-opacityBackground, 1);
-  background:var(--sn-theme-color-violet-background, var(--sn-primitive-color-violet-90, #f3edfc));
+  background:var(--sn-theme-color-violet-background, var(--sn-brand-palette-violet-90, #f3edfc));
 }
 .materialLayer[data-acrylic-appearance=violet][data-acrylic-level="1Level"]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
 }
 .materialLayer[data-acrylic-appearance=violet][data-acrylic-level="1Level"] .acrylicBg{
   opacity:var(--sn-acrylic-opacityBackground1Level, 1);
-  background:var(--sn-theme-color-violet-background1Level, var(--sn-primitive-color-violet-95, #f9f5ff));
+  background:var(--sn-theme-color-violet-background1Level, var(--sn-brand-palette-violet-95, #f9f5ff));
 }
 .materialLayer[data-acrylic-appearance=violet][data-acrylic-level="2Level"]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
 }
 .materialLayer[data-acrylic-appearance=violet][data-acrylic-level="2Level"] .acrylicBg{
   opacity:var(--sn-acrylic-opacityBackground2Level, 1);
-  background:var(--sn-theme-color-violet-background2Level, var(--sn-primitive-color-violet-99, #fdfdfd));
+  background:var(--sn-theme-color-violet-background2Level, var(--sn-brand-palette-violet-99, #fdfdfd));
 }
 .materialLayer[data-acrylic-appearance=pink][data-acrylic-level=default]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter, none);
 }
 .materialLayer[data-acrylic-appearance=pink][data-acrylic-level=default] .acrylicBg{
   opacity:var(--sn-acrylic-opacityBackground, 1);
-  background:var(--sn-theme-color-pink-background, var(--sn-primitive-color-pink-90, #fceaf0));
+  background:var(--sn-theme-color-pink-background, var(--sn-brand-palette-pink-90, #fceaf0));
 }
 .materialLayer[data-acrylic-appearance=pink][data-acrylic-level="1Level"]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
 }
 .materialLayer[data-acrylic-appearance=pink][data-acrylic-level="1Level"] .acrylicBg{
   opacity:var(--sn-acrylic-opacityBackground1Level, 1);
-  background:var(--sn-theme-color-pink-background1Level, var(--sn-primitive-color-pink-95, #fff5f7));
+  background:var(--sn-theme-color-pink-background1Level, var(--sn-brand-palette-pink-95, #fff5f7));
 }
 .materialLayer[data-acrylic-appearance=pink][data-acrylic-level="2Level"]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
 }
 .materialLayer[data-acrylic-appearance=pink][data-acrylic-level="2Level"] .acrylicBg{
   opacity:var(--sn-acrylic-opacityBackground2Level, 1);
-  background:var(--sn-theme-color-pink-background2Level, var(--sn-primitive-color-pink-99, #fdfcfc));
+  background:var(--sn-theme-color-pink-background2Level, var(--sn-brand-palette-pink-99, #fdfcfc));
 }
 .materialLayer[data-acrylic-appearance=transparent]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
 }
 .materialLayer[data-acrylic-appearance=transparent] .acrylicBg{
   opacity:var(--sn-acrylic-opacityBackground1Level, 1);
   background:transparent;
 }
 .materialLayer[data-acrylic-appearance=decorTransparent]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
 }
 .materialLayer[data-acrylic-appearance=decorTransparent] .acrylicBg{
   opacity:var(--sn-acrylic-opacityBackground1Level, 1);
@@ -239,24 +239,24 @@
   width:100%;
   height:100%;
   opacity:var(--sn-field-effect-focusedFrame-opacity, var(--sn-brand-effect-opacity-focusedFrame, 0.4));
-  outline:var(--sn-brand-anatomy-focusLine-field-strokeWeight, var(--sn-primitive-strokeWeight-strokeBold, 3px)) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+  outline:var(--sn-brand-anatomy-focusLine-field-strokeWeight, var(--sn-primitive-strokeWeight-strokeBold, 3px)) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
   outline-offset:0;
 }
 
 .fieldWrapper[data-validation-state=error] .focusLayer{
-  outline-color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
+  outline-color:var(--sn-theme-color-red-accent, var(--sn-brand-palette-red-50, #d52e33));
 }
 
 .fieldWrapper[data-validation-state=warning] .focusLayer{
-  outline-color:var(--sn-theme-color-yellow-accent, var(--sn-primitive-color-yellow-55, #f3b917));
+  outline-color:var(--sn-theme-color-yellow-accent, var(--sn-brand-palette-yellow-50, #f3b917));
 }
 
 .fieldWrapper[data-validation-state=warning]{
-  background-color:var(--sn-theme-color-yellow-background, var(--sn-primitive-color-yellow-90, #fdf4cc));
+  background-color:var(--sn-theme-color-yellow-background, var(--sn-brand-palette-yellow-90, #fdf4cc));
 }
 
 .fieldWrapper[data-validation-state=success] .focusLayer{
-  outline-color:var(--sn-theme-color-green-accent, var(--sn-primitive-color-green-55, #41b954));
+  outline-color:var(--sn-theme-color-green-accent, var(--sn-brand-palette-green-50, #41b954));
 }
 
 .fieldInput{
@@ -364,7 +364,7 @@
   background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
 }
 .fieldWrapper .borderStateLayer[data-state=activatedOnBackground]{
-  background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
+  background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
 }
 .fieldWrapper .borderStateLayer[data-state=versionOnColor]{
   background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -389,7 +389,7 @@
     background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
   }
   .fieldWrapper:hover:not([data-disabled], [data-loading]) .borderStateLayer[data-state=activatedOnBackground]{
-    background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
+    background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
   }
   .fieldWrapper:hover:not([data-disabled], [data-loading]) .borderStateLayer[data-state=versionOnColor]{
     background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -416,7 +416,7 @@
   background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
 }
 .fieldWrapper[data-loading] .borderStateLayer[data-state=activatedOnBackground], .fieldWrapper:active:not([data-disabled], [data-loading]) .borderStateLayer[data-state=activatedOnBackground], .fieldWrapper[data-pressed=true]:not([data-disabled], [data-loading]) .borderStateLayer[data-state=activatedOnBackground]{
-  background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
+  background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
 }
 .fieldWrapper[data-loading] .borderStateLayer[data-state=versionOnColor], .fieldWrapper:active:not([data-disabled], [data-loading]) .borderStateLayer[data-state=versionOnColor], .fieldWrapper[data-pressed=true]:not([data-disabled], [data-loading]) .borderStateLayer[data-state=versionOnColor]{
   background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
@@ -446,42 +446,50 @@
   border-radius:var(--sn-field-anatomy-size-s-fieldContainer-borderTopLeftRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-s-fieldContainer-borderTopRightRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-s-fieldContainer-borderBottomRightRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-s-fieldContainer-borderBottomLeftRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px)));
 }
 .fieldWrapper[data-size=s] .fieldContainer{
-  min-height:var(--sn-field-anatomy-size-s-fieldContainer-minHeight, var(--sn-density-size-s, var(--sn-primitive-dimension-48, 48px)));
-  padding:var(--sn-field-anatomy-size-s-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px))) var(--sn-field-anatomy-size-s-fieldContainer-paddingRight, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px))) var(--sn-field-anatomy-size-s-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px))) var(--sn-field-anatomy-size-s-fieldContainer-paddingLeft, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
+  min-height:var(--sn-field-anatomy-size-s-fieldContainer-minHeight, var(--sn-density-size-s, var(--sn-density-scale-100-s, var(--sn-platform-comfort-scale-100-s, var(--sn-primitive-dimension-32, 32px)))));
+  padding:var(--sn-field-anatomy-size-s-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-platform-comfort-spacing-control-container-vertical-s, var(--sn-platform-comfort-scale-025-2xs, var(--sn-primitive-dimension-2, 2px))))) var(--sn-field-anatomy-size-s-fieldContainer-paddingRight, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-platform-comfort-spacing-control-container-horizontal-s, var(--sn-platform-comfort-scale-050-2xs, var(--sn-primitive-dimension-4, 4px))))) var(--sn-field-anatomy-size-s-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-platform-comfort-spacing-control-container-vertical-s, var(--sn-platform-comfort-scale-025-2xs, var(--sn-primitive-dimension-2, 2px))))) var(--sn-field-anatomy-size-s-fieldContainer-paddingLeft, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-platform-comfort-spacing-control-container-horizontal-s, var(--sn-platform-comfort-scale-050-2xs, var(--sn-primitive-dimension-4, 4px)))));
 }
-.fieldWrapper[data-size=s] .inputLine{
-  padding-left:var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
-  padding-right:var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
-  gap:var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-inputLine-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
+.fieldWrapper[data-size=s][data-resizable] .fieldContainer{
+  min-height:var(--sn-field-anatomy-size-s-fieldContainer-multiLine-minHeight, var(--sn-primitive-dimension-56, 56px));
+}
+.fieldWrapper[data-size=s] .inputArea{
+  padding-right:var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-inputWrapper-paddingRight, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
+  padding-left:var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-inputWrapper-paddingLeft, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
+}
+.fieldWrapper[data-size=s] .prefix{
+  padding-left:var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-inputWrapper-paddingLeft, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
+}
+.fieldWrapper[data-size=s] .postfix{
+  padding-right:var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-inputWrapper-paddingRight, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
 }
 .fieldWrapper[data-size=s] .prefix,
 .fieldWrapper[data-size=s] .postfix,
 .fieldWrapper[data-size=s] .fieldInput{
-  font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
   font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
-  line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
-  font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-platform-comfort-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px))));
+  font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-platform-comfort-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px))));
   letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
   paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
 }
 .fieldWrapper[data-size=s] .iconSlot{
-  max-height:var(--sn-field-anatomy-size-s-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  max-height:var(--sn-field-anatomy-size-s-fieldContainer-centeredWrapper-height, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-platform-comfort-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px))));
 }
 .fieldWrapper[data-size=s] .iconSlot svg{
-  max-width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
-  max-height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
+  max-width:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
+  max-height:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
 }
 .fieldWrapper[data-size=s] .clearButtonSlot,
 .fieldWrapper[data-size=s] .postfixButtonsSlot{
-  --sn-button-anatomy-size-s-container-minHeight:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
-  --sn-button-anatomy-size-s-container-iconOnly-minWidth:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
-  max-width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
-  max-height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
+  --sn-button-anatomy-size-s-container-minHeight:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
+  --sn-button-anatomy-size-s-container-iconOnly-minWidth:var(--sn-field-anatomy-size-s-fieldContainer-centeredWrapper-width, var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px))));
+  max-width:var(--sn-field-anatomy-size-s-fieldContainer-centeredWrapper-width, var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px))));
+  max-height:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
 }
 .fieldWrapper[data-size=s] .clearButtonSlot svg,
 .fieldWrapper[data-size=s] .postfixButtonsSlot svg{
-  max-width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
-  max-height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
+  max-width:var(--sn-field-anatomy-size-s-fieldContainer-centeredWrapper-width, var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px))));
+  max-height:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
 }
 .fieldWrapper[data-size=s][data-withbackground=true] .backgroundWrapper{
   border-radius:var(--sn-field-anatomy-size-s-fieldContainer-borderTopLeftRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-s-fieldContainer-borderTopRightRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-s-fieldContainer-borderBottomRightRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-s-fieldContainer-borderBottomLeftRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px)));
@@ -497,7 +505,7 @@
   display:initial;
 }
 .fieldWrapper[data-size=s][data-withbackground=true]:not([data-disabled=true])[data-focusvisible=true] > .backgroundWrapper > .borderStateLayer[data-state=borderOnBackground]{
-  border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+  border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
   border-width:var(--sn-field-anatomy-size-s-fieldContainer-borderBottomWidth, var(--sn-brand-anatomy-line-field-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px)));
 }
 .fieldWrapper[data-size=m] .lineWrapper{
@@ -513,42 +521,50 @@
   border-radius:var(--sn-field-anatomy-size-m-fieldContainer-borderTopLeftRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-m-fieldContainer-borderTopRightRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-m-fieldContainer-borderBottomRightRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-m-fieldContainer-borderBottomLeftRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px)));
 }
 .fieldWrapper[data-size=m] .fieldContainer{
-  min-height:var(--sn-field-anatomy-size-m-fieldContainer-minHeight, var(--sn-density-size-m, var(--sn-primitive-dimension-56, 56px)));
-  padding:var(--sn-field-anatomy-size-m-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px))) var(--sn-field-anatomy-size-m-fieldContainer-paddingRight, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px))) var(--sn-field-anatomy-size-m-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px))) var(--sn-field-anatomy-size-m-fieldContainer-paddingLeft, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
+  min-height:var(--sn-field-anatomy-size-m-fieldContainer-minHeight, var(--sn-density-size-m, var(--sn-density-scale-100-m, var(--sn-platform-comfort-scale-100-m, var(--sn-primitive-dimension-40, 40px)))));
+  padding:var(--sn-field-anatomy-size-m-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-platform-comfort-spacing-control-container-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))) var(--sn-field-anatomy-size-m-fieldContainer-paddingRight, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-platform-comfort-spacing-control-container-horizontal-m, var(--sn-platform-comfort-scale-050-xs, var(--sn-primitive-dimension-8, 8px))))) var(--sn-field-anatomy-size-m-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-platform-comfort-spacing-control-container-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))) var(--sn-field-anatomy-size-m-fieldContainer-paddingLeft, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-platform-comfort-spacing-control-container-horizontal-m, var(--sn-platform-comfort-scale-050-xs, var(--sn-primitive-dimension-8, 8px)))));
+}
+.fieldWrapper[data-size=m][data-resizable] .fieldContainer{
+  min-height:var(--sn-field-anatomy-size-m-fieldContainer-multiLine-minHeight, var(--sn-primitive-dimension-68, 68px));
+}
+.fieldWrapper[data-size=m] .inputArea{
+  padding-right:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-inputWrapper-paddingRight, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-m, var(--sn-platform-comfort-spacing-control-wrapper-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
+  padding-left:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-inputWrapper-paddingLeft, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-m, var(--sn-platform-comfort-spacing-control-wrapper-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
+}
+.fieldWrapper[data-size=m] .prefix{
+  padding-left:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-inputWrapper-paddingLeft, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-m, var(--sn-platform-comfort-spacing-control-wrapper-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
 }
-.fieldWrapper[data-size=m] .inputLine{
-  padding-left:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
-  padding-right:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
-  gap:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-inputLine-gap, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
+.fieldWrapper[data-size=m] .postfix{
+  padding-right:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-inputWrapper-paddingRight, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-m, var(--sn-platform-comfort-spacing-control-wrapper-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
 }
 .fieldWrapper[data-size=m] .prefix,
 .fieldWrapper[data-size=m] .postfix,
 .fieldWrapper[data-size=m] .fieldInput{
-  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
   font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
-  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
-  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-platform-comfort-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px))));
+  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-platform-comfort-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px))));
   letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
   paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
 }
 .fieldWrapper[data-size=m] .iconSlot{
-  max-height:var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  max-height:var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-height, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-platform-comfort-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px))));
 }
 .fieldWrapper[data-size=m] .iconSlot svg{
-  max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
-  max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  max-width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
+  max-height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
 }
 .fieldWrapper[data-size=m] .clearButtonSlot,
 .fieldWrapper[data-size=m] .postfixButtonsSlot{
-  --sn-button-anatomy-size-m-container-minHeight:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
-  --sn-button-anatomy-size-m-container-iconOnly-minWidth:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
-  max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
-  max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  --sn-button-anatomy-size-m-container-minHeight:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
+  --sn-button-anatomy-size-m-container-iconOnly-minWidth:var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-width, var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px))));
+  max-width:var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-width, var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px))));
+  max-height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
 }
 .fieldWrapper[data-size=m] .clearButtonSlot svg,
 .fieldWrapper[data-size=m] .postfixButtonsSlot svg{
-  max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
-  max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  max-width:var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-width, var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px))));
+  max-height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
 }
 .fieldWrapper[data-size=m][data-withbackground=true] .backgroundWrapper{
   border-radius:var(--sn-field-anatomy-size-m-fieldContainer-borderTopLeftRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-m-fieldContainer-borderTopRightRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-m-fieldContainer-borderBottomRightRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-m-fieldContainer-borderBottomLeftRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px)));
@@ -564,7 +580,7 @@
   display:initial;
 }
 .fieldWrapper[data-size=m][data-withbackground=true]:not([data-disabled=true])[data-focusvisible=true] > .backgroundWrapper > .borderStateLayer[data-state=borderOnBackground]{
-  border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+  border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
   border-width:var(--sn-field-anatomy-size-m-fieldContainer-borderBottomWidth, var(--sn-brand-anatomy-line-field-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px)));
 }
 .fieldWrapper[data-size=l] .lineWrapper{
@@ -580,42 +596,50 @@
   border-radius:var(--sn-field-anatomy-size-l-fieldContainer-borderTopLeftRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-l-fieldContainer-borderTopRightRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-l-fieldContainer-borderBottomRightRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-l-fieldContainer-borderBottomLeftRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px)));
 }
 .fieldWrapper[data-size=l] .fieldContainer{
-  min-height:var(--sn-field-anatomy-size-l-fieldContainer-minHeight, var(--sn-density-size-l, var(--sn-primitive-dimension-64, 64px)));
-  padding:var(--sn-field-anatomy-size-l-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px))) var(--sn-field-anatomy-size-l-fieldContainer-paddingRight, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px))) var(--sn-field-anatomy-size-l-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px))) var(--sn-field-anatomy-size-l-fieldContainer-paddingLeft, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
+  min-height:var(--sn-field-anatomy-size-l-fieldContainer-minHeight, var(--sn-density-size-l, var(--sn-density-scale-100-l, var(--sn-platform-comfort-scale-100-l, var(--sn-primitive-dimension-48, 48px)))));
+  padding:var(--sn-field-anatomy-size-l-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-platform-comfort-spacing-control-container-vertical-l, var(--sn-platform-comfort-scale-025-s, var(--sn-primitive-dimension-6, 6px))))) var(--sn-field-anatomy-size-l-fieldContainer-paddingRight, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-platform-comfort-spacing-control-container-horizontal-l, var(--sn-platform-comfort-scale-050-s, var(--sn-primitive-dimension-12, 12px))))) var(--sn-field-anatomy-size-l-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-platform-comfort-spacing-control-container-vertical-l, var(--sn-platform-comfort-scale-025-s, var(--sn-primitive-dimension-6, 6px))))) var(--sn-field-anatomy-size-l-fieldContainer-paddingLeft, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-platform-comfort-spacing-control-container-horizontal-l, var(--sn-platform-comfort-scale-050-s, var(--sn-primitive-dimension-12, 12px)))));
 }
-.fieldWrapper[data-size=l] .inputLine{
-  padding-left:var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
-  padding-right:var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
-  gap:var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-inputLine-gap, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
+.fieldWrapper[data-size=l][data-resizable] .fieldContainer{
+  min-height:var(--sn-field-anatomy-size-l-fieldContainer-multiLine-minHeight, var(--sn-primitive-dimension-88, 88px));
+}
+.fieldWrapper[data-size=l] .inputArea{
+  padding-right:var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-inputWrapper-paddingRight, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-l, var(--sn-platform-comfort-spacing-control-wrapper-vertical-l, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
+  padding-left:var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-inputWrapper-paddingLeft, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-l, var(--sn-platform-comfort-spacing-control-wrapper-vertical-l, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
+}
+.fieldWrapper[data-size=l] .prefix{
+  padding-left:var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-inputWrapper-paddingLeft, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-l, var(--sn-platform-comfort-spacing-control-wrapper-vertical-l, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
+}
+.fieldWrapper[data-size=l] .postfix{
+  padding-right:var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-inputWrapper-paddingRight, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-l, var(--sn-platform-comfort-spacing-control-wrapper-vertical-l, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
 }
 .fieldWrapper[data-size=l] .prefix,
 .fieldWrapper[data-size=l] .postfix,
 .fieldWrapper[data-size=l] .fieldInput{
-  font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
   font-weight:var(--sn-regular-body-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-l, var(--sn-brand-font-fontWeight-light-regular-body-l, var(--sn-primitive-font-fontWeightValue-400, 400))));
-  line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
-  font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
+  line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-platform-comfort-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-28, 28px))));
+  font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-platform-comfort-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-18, 18px))));
   letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
   paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
 }
 .fieldWrapper[data-size=l] .iconSlot{
-  max-height:var(--sn-field-anatomy-size-l-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+  max-height:var(--sn-field-anatomy-size-l-fieldContainer-centeredWrapper-height, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-platform-comfort-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-28, 28px))));
 }
 .fieldWrapper[data-size=l] .iconSlot svg{
-  max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
-  max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  max-width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
+  max-height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
 }
 .fieldWrapper[data-size=l] .clearButtonSlot,
 .fieldWrapper[data-size=l] .postfixButtonsSlot{
-  --sn-button-anatomy-size-m-container-minHeight:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
-  --sn-button-anatomy-size-m-container-iconOnly-minWidth:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
-  max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
-  max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  --sn-button-anatomy-size-m-container-minHeight:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
+  --sn-button-anatomy-size-m-container-iconOnly-minWidth:var(--sn-field-anatomy-size-l-fieldContainer-centeredWrapper-width, var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px))));
+  max-width:var(--sn-field-anatomy-size-l-fieldContainer-centeredWrapper-width, var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px))));
+  max-height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
 }
 .fieldWrapper[data-size=l] .clearButtonSlot svg,
 .fieldWrapper[data-size=l] .postfixButtonsSlot svg{
-  max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
-  max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  max-width:var(--sn-field-anatomy-size-l-fieldContainer-centeredWrapper-width, var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px))));
+  max-height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
 }
 .fieldWrapper[data-size=l][data-withbackground=true] .backgroundWrapper{
   border-radius:var(--sn-field-anatomy-size-l-fieldContainer-borderTopLeftRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-l-fieldContainer-borderTopRightRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-l-fieldContainer-borderBottomRightRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-l-fieldContainer-borderBottomLeftRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px)));
@@ -631,13 +655,16 @@
   display:initial;
 }
 .fieldWrapper[data-size=l][data-withbackground=true]:not([data-disabled=true])[data-focusvisible=true] > .backgroundWrapper > .borderStateLayer[data-state=borderOnBackground]{
-  border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+  border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
   border-width:var(--sn-field-anatomy-size-l-fieldContainer-borderBottomWidth, var(--sn-brand-anatomy-line-field-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px)));
 }
 .fieldWrapper[data-disabled=true]{
   cursor:not-allowed;
   opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
 }
+.fieldWrapper[data-disabled=true] .elementButtonInheritDisabled[data-disabled=true] > *{
+  opacity:1;
+}
 .fieldWrapper[data-readonly=true]:not([data-disabled=true]){
   cursor:default;
 }
@@ -653,13 +680,13 @@
   }
 }
 .fieldWrapper[data-withbackground=true][data-focusvisible=true][data-validation-state=error]:not([data-disabled=true]) > .backgroundWrapper > .borderStateLayer[data-state=borderOnBackground]{
-  border-color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
+  border-color:var(--sn-theme-color-red-accent, var(--sn-brand-palette-red-50, #d52e33));
 }
 .fieldWrapper[data-withbackground=true][data-focusvisible=true][data-validation-state=warning]:not([data-disabled=true]) > .backgroundWrapper > .borderStateLayer[data-state=borderOnBackground]{
-  border-color:var(--sn-theme-color-yellow-accent, var(--sn-primitive-color-yellow-55, #f3b917));
+  border-color:var(--sn-theme-color-yellow-accent, var(--sn-brand-palette-yellow-50, #f3b917));
 }
 .fieldWrapper[data-withbackground=true][data-focusvisible=true][data-validation-state=success]:not([data-disabled=true]) > .backgroundWrapper > .borderStateLayer[data-state=borderOnBackground]{
-  border-color:var(--sn-theme-color-green-accent, var(--sn-primitive-color-green-55, #41b954));
+  border-color:var(--sn-theme-color-green-accent, var(--sn-brand-palette-green-50, #41b954));
 }
 
 .fieldContainer{