npm - @cloud-ru/ds-fields - Versions diffs - 1.0.0 - Mend

@cloud-ru/ds-fields 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (314) hide show

package/dist/esm/style.css ADDED Viewed

@@ -0,0 +1,1350 @@
+.trigger{
+  cursor:pointer;
+}
+.swatch{
+  position:relative;
+  flex:0 0 auto;
+  background-color:var(--field-color-swatch-color, transparent);
+  background-image:linear-gradient(45deg, var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843))) 25%, transparent 25%), linear-gradient(-45deg, var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843))) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843))) 75%), linear-gradient(-45deg, transparent 75%, var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843))) 75%);
+  background-position:0 0, 0 4px, 4px -4px, -4px 0;
+  background-size:8px 8px;
+}
+.swatch::after{
+  content:"";
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+  background-color:var(--field-color-swatch-color, transparent);
+}
+.chevron{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}
+.trigger[data-size=s] .swatch{
+  width:var(--sn-colorPicker-anatomy-size-s-previewColor-width, var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px)));
+  height:var(--sn-colorPicker-anatomy-size-s-previewColor-height, var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px)));
+  border-radius:var(--sn-colorPicker-anatomy-size-s-previewColor-borderRadius, var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
+}
+.trigger[data-size=m] .swatch{
+  width:var(--sn-colorPicker-anatomy-size-m-previewColor-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
+  height:var(--sn-colorPicker-anatomy-size-m-previewColor-height, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
+  border-radius:var(--sn-colorPicker-anatomy-size-m-previewColor-borderRadius, var(--sn-density-radius-s, var(--sn-primitive-dimension-16, 16px)));
+}
+.trigger[data-size=l] .swatch{
+  width:var(--sn-colorPicker-anatomy-size-m-previewColor-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
+  height:var(--sn-colorPicker-anatomy-size-m-previewColor-height, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
+  border-radius:var(--sn-colorPicker-anatomy-size-m-previewColor-borderRadius, var(--sn-density-radius-s, var(--sn-primitive-dimension-16, 16px)));
+}
+.sheetTitle{
+  display:inline-flex;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:center;
+}
+.sheetSwatch{
+  position:relative;
+  flex:0 0 auto;
+  width:var(--sn-primitive-dimension-24, 24px);
+  height:var(--sn-primitive-dimension-24, 24px);
+  border-radius:50%;
+  background-color:var(--field-color-swatch-color, transparent);
+  background-image:linear-gradient(45deg, var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843))) 25%, transparent 25%), linear-gradient(-45deg, var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843))) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843))) 75%), linear-gradient(-45deg, transparent 75%, var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843))) 75%);
+  background-position:0 0, 0 4px, 4px -4px, -4px 0;
+  background-size:8px 8px;
+}
+.sheetSwatch::after{
+  content:"";
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+  background-color:var(--field-color-swatch-color, transparent);
+}
+.sheetFooter{
+  display:flex;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  justify-content:space-between;
+}
+.pickerHost{
+  display:contents;
+}
+.trigger{
+  cursor:pointer;
+}
+.trigger[data-disabled=true]{
+  cursor:not-allowed;
+}
+.trigger[data-readonly=true]{
+  cursor:default;
+}
+.rangeInputs{
+  display:inline-flex;
+  flex:1 1 0;
+  align-items:center;
+  min-width:0;
+}
+[data-size=s] .rangeInputs{
+  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)));
+}
+[data-size=m] .rangeInputs{
+  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)));
+}
+[data-size=l] .rangeInputs{
+  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)));
+}
+.rangeInputFrom{
+  flex:0 0 auto;
+  width:calc(var(--field-date-mask-ch, 10) * 1ch);
+  text-align:start;
+}
+@supports (field-sizing: content){
+  .rangeInputFrom{
+    field-sizing:content;
+    width:auto;
+    max-width:calc(var(--field-date-mask-ch, 10) * 1ch);
+  }
+}
+.rangeSeparator{
+  flex-shrink:0;
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}
+.chevron{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+  transition:transform 0.15s ease-in-out;
+}
+.chevron[data-open=true]{
+  transform:rotate(180deg);
+}
+.trigger{
+  cursor:text;
+}
+.trigger[data-disabled=true]{
+  cursor:not-allowed;
+}
+.trigger[data-readonly=true]{
+  cursor:default;
+}
+.readonlyCursor{
+  cursor:pointer;
+}
+.chipsRow{
+  display:flex;
+  flex:1 0 0;
+  flex-wrap:wrap;
+  align-content:center;
+  align-items:center;
+  min-width:0;
+}
+[data-size=s] .chipsRow{
+  gap:var(--sn-tag-anatomy-size-xs-tagRow-gap, var(--sn-density-spacing-control-wrapper-horizontal-xs, var(--sn-primitive-dimension-8, 8px)));
+  padding-top:var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-primitive-dimension-8, 8px)));
+  padding-bottom:var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-primitive-dimension-8, 8px)));
+}
+[data-size=m] .chipsRow{
+  gap:var(--sn-tag-anatomy-size-xs-tagRow-gap, var(--sn-density-spacing-control-wrapper-horizontal-xs, var(--sn-primitive-dimension-8, 8px)));
+  padding-top:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px)));
+  padding-bottom:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px)));
+}
+[data-size=l] .chipsRow{
+  gap:var(--sn-tag-anatomy-size-s-tagRow-gap, var(--sn-primitive-dimension-2, 2px));
+  padding-top:var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-primitive-dimension-8, 8px)));
+  padding-bottom:var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-primitive-dimension-8, 8px)));
+}
+.inputWrapper{
+  position:relative;
+  display:inline-flex;
+  flex:1 1 0;
+  min-width:var(--sn-primitive-dimension-4, 4px);
+}
+.inputPlug{
+  pointer-events:none;
+  position:absolute;
+  top:0;
+  left:0;
+  overflow:hidden;
+  width:-moz-fit-content;
+  width:fit-content;
+  max-width:100%;
+  height:0;
+  white-space:pre;
+}
+[data-size=s] .inputPlug{
+  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-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)));
+  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));
+}
+[data-size=m] .inputPlug{
+  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-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)));
+  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));
+}
+[data-size=l] .inputPlug{
+  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-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)));
+  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));
+}
+.fieldSlider{
+  display:flex;
+  flex-direction:column;
+  gap:0;
+  align-self:stretch;
+  width:100%;
+}
+.sliderWrapper{
+  display:flex;
+  align-items:center;
+  width:100%;
+}
+[data-size=s] .sliderWrapper{
+  padding-right:var(--sn-field-anatomy-size-s-sliderWrapper-lineWrapper-paddingHorizontal, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px)));
+  padding-left:var(--sn-field-anatomy-size-s-sliderWrapper-lineWrapper-paddingHorizontal, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px)));
+}
+[data-size=m] .sliderWrapper{
+  padding-right:var(--sn-field-anatomy-size-m-sliderWrapper-lineWrapper-paddingHorizontal, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px)));
+  padding-left:var(--sn-field-anatomy-size-m-sliderWrapper-lineWrapper-paddingHorizontal, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px)));
+}
+[data-size=l] .sliderWrapper{
+  padding-right:var(--sn-field-anatomy-size-l-sliderWrapper-lineWrapper-paddingHorizontal, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px)));
+  padding-left:var(--sn-field-anatomy-size-l-sliderWrapper-lineWrapper-paddingHorizontal, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px)));
+}
+.slider{
+  width:100%;
+}
+.postfixIcon{
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}
+.copyButton{
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+}
+.stepButtonTrigger{
+  display:flex;
+  align-items:stretch;
+  height:100%;
+}
+.copyButton{
+  display:flex;
+  align-items:center;
+  height:100%;
+}
+.valueArea{
+  display:flex;
+  flex:1 1 auto;
+  align-items:baseline;
+  justify-content:center;
+  min-width:0;
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+  text-align:center;
+}
+[data-size=s] .valueArea{
+  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)));
+}
+[data-size=m] .valueArea{
+  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)));
+}
+[data-size=l] .valueArea{
+  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)));
+}
+.inputWrapper{
+  display:flex;
+  flex:0 0 auto;
+  width:calc((var(--field-stepper-input-ch, 2) + 1) * 1ch);
+  max-width:100%;
+}
+.input{
+  flex:0 0 auto;
+  width:100%;
+  min-width:1ch;
+  text-align:center;
+  -moz-appearance:textfield;
+}
+.input::-webkit-outer-spin-button, .input::-webkit-inner-spin-button{
+  margin:0;
+  -webkit-appearance:none;
+}
+.affix{
+  flex-shrink:0;
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}
+[data-size=s] .affix{
+  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-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)));
+  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));
+}
+[data-size=m] .affix{
+  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-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)));
+  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));
+}
+[data-size=l] .affix{
+  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-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)));
+  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));
+}
+.scrollContainer{
+  flex:1 1 auto;
+  min-width:0;
+  min-height:calc(var(--field-textarea-min-rows, 3) * var(--field-textarea-row-height));
+  max-height:calc(var(--field-textarea-max-rows, 1000) * var(--field-textarea-row-height));
+}
+[data-size=s] .scrollContainer{
+  --field-textarea-row-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+}
+[data-size=m] .scrollContainer{
+  --field-textarea-row-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+}
+[data-size=l] .scrollContainer{
+  --field-textarea-row-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+}
+.scrollContainerResizable{
+  height:calc(var(--field-textarea-min-rows, 3) * var(--field-textarea-row-height));
+}
+.textarea{
+  resize:none;
+  overflow:hidden;
+  width:100%;
+  min-width:0;
+  padding:0;
+  border:none;
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+  background:transparent;
+  outline:none;
+}
+.textarea::-moz-placeholder{
+  color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
+  opacity:1;
+}
+.textarea::placeholder{
+  color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
+  opacity:1;
+}
+.textarea:disabled::-moz-placeholder{
+  visibility:hidden;
+}
+.textarea:disabled::placeholder{
+  visibility:hidden;
+}
+.textarea:-moz-read-only{
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}
+.textarea:read-only{
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}
+[data-size=s] .textarea{
+  min-height:var(--sn-field-anatomy-size-s-fieldContainer-multiLine-minHeight, var(--sn-primitive-dimension-56, 56px));
+  padding-right:calc(var(--sn-field-anatomy-size-s-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px))) + var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px)) + var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px))));
+  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-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)));
+  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));
+}
+[data-size=m] .textarea{
+  min-height:var(--sn-field-anatomy-size-m-fieldContainer-multiLine-minHeight, var(--sn-primitive-dimension-68, 68px));
+  padding-right:calc(var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px))) + var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px)) + var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px))));
+  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-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)));
+  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));
+}
+[data-size=l] .textarea{
+  min-height:var(--sn-field-anatomy-size-l-fieldContainer-multiLine-minHeight, var(--sn-primitive-dimension-88, 88px));
+  padding-right:calc(var(--sn-field-anatomy-size-l-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px))) + var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px)) + var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px))));
+  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-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)));
+  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));
+}
+.contentArea{
+  position:relative;
+}
+[data-size=s] .contentArea{
+  padding-top:var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-primitive-dimension-8, 8px)));
+  padding-bottom:var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-primitive-dimension-8, 8px)));
+}
+[data-size=m] .contentArea{
+  padding-top:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px)));
+  padding-bottom:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px)));
+}
+[data-size=l] .contentArea{
+  padding-top:var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-primitive-dimension-8, 8px)));
+  padding-bottom:var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-primitive-dimension-8, 8px)));
+}
+.postfixColumn{
+  position:absolute;
+  display:grid;
+  grid-template-columns:100%;
+  row-gap:var(--sn-primitive-dimension-2, 2px);
+  place-items:center center;
+}
+[data-size=s] .postfixColumn{
+  top:calc(var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-primitive-dimension-8, 8px))) + (var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px))) - var(--sn-field-anatomy-size-s-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)))) / 2);
+  right:calc(var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px)) + var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px))));
+  grid-auto-rows:var(--sn-field-anatomy-size-s-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  width:var(--sn-field-anatomy-size-s-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+}
+[data-size=m] .postfixColumn{
+  top:calc(var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px))) + (var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px))) - var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)))) / 2);
+  right:calc(var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px)) + var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px))));
+  grid-auto-rows:var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  width:var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+}
+[data-size=l] .postfixColumn{
+  top:calc(var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-primitive-dimension-8, 8px))) + (var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px))) - var(--sn-field-anatomy-size-l-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)))) / 2);
+  right:calc(var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px)) + var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px))));
+  grid-auto-rows:var(--sn-field-anatomy-size-l-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+  width:var(--sn-field-anatomy-size-l-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+}
+.trigger{
+  cursor:text;
+}
+@charset "UTF-8";
+.chevron{
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  justify-content:center;
+}
+.elementWrapper{
+  position:relative;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
+}
+.backgroundStateLayer{
+  pointer-events:none;
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+  visibility:initial;
+}
+.focusLayer{
+  pointer-events:none;
+  position:absolute;
+  inset:0;
+  display:none;
+  border-radius:inherit;
+  outline:var(--sn-brand-anatomy-focusLine-control-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)) 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-offset:calc(0px - var(--sn-brand-anatomy-focusLine-control-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)));
+}
+.buttonContainer{
+  cursor:pointer;
+  position:relative;
+  display:flex;
+  align-items:center;
+  align-self:stretch;
+  justify-content:center;
+  margin:0;
+  padding:0;
+  border:none;
+  background:none;
+}
+.buttonContainer[data-size=s]{
+  min-width:var(--sn-field-anatomy-size-s-buttonField-container-minWidth, var(--sn-density-size-s, var(--sn-primitive-dimension-48, 48px)));
+  border-radius:var(--sn-field-anatomy-size-s-buttonField-container-borderRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px)));
+  padding-left:var(--sn-field-anatomy-size-s-buttonField-container-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
+  padding-right:var(--sn-field-anatomy-size-s-buttonField-container-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
+}
+.buttonContainer[data-size=s][data-variant=before]{
+  border-radius:var(--sn-field-anatomy-size-s-fieldContainer-borderTopLeftRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px))) 0 0 var(--sn-field-anatomy-size-s-fieldContainer-borderBottomLeftRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px)));
+}
+.buttonContainer[data-size=s][data-variant=after]{
+  border-radius:0 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))) 0;
+}
+.buttonContainer[data-size=s] .elementWrapper{
+  gap:var(--sn-field-anatomy-size-s-buttonField-elementWrapper-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
+}
+.buttonContainer[data-size=s] .elementWrapper 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));
+}
+.buttonContainer[data-size=m]{
+  min-width:var(--sn-field-anatomy-size-m-buttonField-container-minWidth, var(--sn-density-size-m, var(--sn-primitive-dimension-56, 56px)));
+  padding-left:var(--sn-field-anatomy-size-m-buttonField-container-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
+  padding-right:var(--sn-field-anatomy-size-m-buttonField-container-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
+  border-radius:var(--sn-field-anatomy-size-m-buttonField-container-borderRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px)));
+}
+.buttonContainer[data-size=m][data-variant=before]{
+  border-radius:var(--sn-field-anatomy-size-m-fieldContainer-borderTopLeftRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px))) 0 0 var(--sn-field-anatomy-size-m-fieldContainer-borderBottomLeftRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px)));
+}
+.buttonContainer[data-size=m][data-variant=after]{
+  border-radius:0 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))) 0;
+}
+.buttonContainer[data-size=m] .elementWrapper{
+  gap:var(--sn-field-anatomy-size-m-buttonField-elementWrapper-gap, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
+}
+.buttonContainer[data-size=m] .elementWrapper 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));
+}
+.buttonContainer[data-size=l]{
+  min-width:var(--sn-field-anatomy-size-l-buttonField-container-minWidth, var(--sn-density-size-l, var(--sn-primitive-dimension-64, 64px)));
+  padding-left:var(--sn-field-anatomy-size-l-buttonField-container-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
+  padding-right:var(--sn-field-anatomy-size-l-buttonField-container-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
+  border-radius:var(--sn-field-anatomy-size-l-buttonField-container-borderRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px)));
+}
+.buttonContainer[data-size=l][data-variant=before]{
+  border-radius:var(--sn-field-anatomy-size-l-fieldContainer-borderTopLeftRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px))) 0 0 var(--sn-field-anatomy-size-l-fieldContainer-borderBottomLeftRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px)));
+}
+.buttonContainer[data-size=l][data-variant=after]{
+  border-radius:0 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))) 0;
+}
+.buttonContainer[data-size=l] .elementWrapper{
+  gap:var(--sn-field-anatomy-size-l-buttonField-elementWrapper-gap, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
+}
+.buttonContainer[data-size=l] .elementWrapper 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));
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true]) .backgroundStateLayer{
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true]) .backgroundStateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+  border-style:solid;
+  border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true]) .backgroundStateLayer[data-state=emptyNeutralOnBackground]{
+  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)));
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true]) .backgroundStateLayer[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))));
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true]) .backgroundStateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true]) .backgroundStateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true]) .backgroundStateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-default-filled, rgba(255, 255, 255, 0.1019607843));
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true]) .backgroundStateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-defaultEmpty-filled, rgba(255, 255, 255, 0));
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true]) .backgroundStateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+@media (hover: hover){
+  .buttonContainer:not([data-loading=true], [data-disabled=true]):hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=borderOnBackground]{
+    border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
+  }
+  .buttonContainer:not([data-loading=true], [data-disabled=true]):hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyNeutralOnBackground]{
+    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)));
+  }
+  .buttonContainer:not([data-loading=true], [data-disabled=true]):hover:not([data-disabled], [data-loading]) .backgroundStateLayer[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))));
+  }
+  .buttonContainer:not([data-loading=true], [data-disabled=true]):hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .buttonContainer:not([data-loading=true], [data-disabled=true]):hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyVersionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .buttonContainer:not([data-loading=true], [data-disabled=true]):hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=inversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .buttonContainer:not([data-loading=true], [data-disabled=true]):hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyInversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .buttonContainer:not([data-loading=true], [data-disabled=true]):hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyDarkOnAccent]{
+    background:var(--sn-theme-color-material-stateLayer-darkOnAccent-hovered-filled, rgba(0, 0, 0, 0.0588235294));
+  }
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true]){
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true])[data-loading] .backgroundStateLayer[data-state=borderOnBackground], .buttonContainer:not([data-loading=true], [data-disabled=true]):active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=borderOnBackground], .buttonContainer:not([data-loading=true], [data-disabled=true])[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true])[data-loading] .backgroundStateLayer[data-state=emptyNeutralOnBackground], .buttonContainer:not([data-loading=true], [data-disabled=true]):active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyNeutralOnBackground], .buttonContainer:not([data-loading=true], [data-disabled=true])[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyNeutralOnBackground]{
+  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)));
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true])[data-loading] .backgroundStateLayer[data-state=activatedOnBackground], .buttonContainer:not([data-loading=true], [data-disabled=true]):active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground], .buttonContainer:not([data-loading=true], [data-disabled=true])[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[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))));
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true])[data-loading] .backgroundStateLayer[data-state=versionOnColor], .buttonContainer:not([data-loading=true], [data-disabled=true]):active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor], .buttonContainer:not([data-loading=true], [data-disabled=true])[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true])[data-loading] .backgroundStateLayer[data-state=emptyVersionOnColor], .buttonContainer:not([data-loading=true], [data-disabled=true]):active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyVersionOnColor], .buttonContainer:not([data-loading=true], [data-disabled=true])[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true])[data-loading] .backgroundStateLayer[data-state=inversionOnColor], .buttonContainer:not([data-loading=true], [data-disabled=true]):active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=inversionOnColor], .buttonContainer:not([data-loading=true], [data-disabled=true])[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true])[data-loading] .backgroundStateLayer[data-state=emptyInversionOnColor], .buttonContainer:not([data-loading=true], [data-disabled=true]):active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyInversionOnColor], .buttonContainer:not([data-loading=true], [data-disabled=true])[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true])[data-loading] .backgroundStateLayer[data-state=emptyDarkOnAccent], .buttonContainer:not([data-loading=true], [data-disabled=true]):active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyDarkOnAccent], .buttonContainer:not([data-loading=true], [data-disabled=true])[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-pressed-filled, rgba(0, 0, 0, 0.1215686275));
+}
+.buttonContainer[data-disabled=true] .elementWrapper{
+  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
+}
+.buttonContainer[data-loading=true], .buttonContainer[data-disabled=true]{
+  cursor:not-allowed;
+}
+.buttonContainer[data-loading=true] .backgroundStateLayer, .buttonContainer[data-disabled=true] .backgroundStateLayer{
+  visibility:hidden;
+}
+.buttonContainer:not([data-disabled=true])[data-loading=true]{
+  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)));
+}
+.buttonContainer:focus-visible{
+  outline:none;
+}
+.buttonContainer:focus-visible .focusLayer{
+  display:block;
+}
+.header{
+  display:flex;
+  align-items:center;
+  align-self:stretch;
+}
+.footer{
+  display:flex;
+  align-items:center;
+  align-self:stretch;
+}
+@charset "UTF-8";
+.materialLayer[data-acrylic-appearance=primary][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.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))));
+}
+.materialLayer[data-acrylic-appearance=primary][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.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))));
+}
+.materialLayer[data-acrylic-appearance=primary][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.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))));
+}
+.materialLayer[data-acrylic-appearance=neutral][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.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)));
+}
+.materialLayer[data-acrylic-appearance=neutral][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.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)));
+}
+.materialLayer[data-acrylic-appearance=neutral][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.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)));
+}
+.materialLayer[data-acrylic-appearance=red][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.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));
+}
+.materialLayer[data-acrylic-appearance=red][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.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));
+}
+.materialLayer[data-acrylic-appearance=red][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.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));
+}
+.materialLayer[data-acrylic-appearance=orange][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.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));
+}
+.materialLayer[data-acrylic-appearance=orange][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.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));
+}
+.materialLayer[data-acrylic-appearance=orange][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.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));
+}
+.materialLayer[data-acrylic-appearance=yellow][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.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));
+}
+.materialLayer[data-acrylic-appearance=yellow][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.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));
+}
+.materialLayer[data-acrylic-appearance=yellow][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.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));
+}
+.materialLayer[data-acrylic-appearance=green][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.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));
+}
+.materialLayer[data-acrylic-appearance=green][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.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));
+}
+.materialLayer[data-acrylic-appearance=green][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.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));
+}
+.materialLayer[data-acrylic-appearance=blue][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.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));
+}
+.materialLayer[data-acrylic-appearance=blue][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.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));
+}
+.materialLayer[data-acrylic-appearance=blue][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.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));
+}
+.materialLayer[data-acrylic-appearance=violet][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.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));
+}
+.materialLayer[data-acrylic-appearance=violet][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.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));
+}
+.materialLayer[data-acrylic-appearance=violet][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.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));
+}
+.materialLayer[data-acrylic-appearance=pink][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.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));
+}
+.materialLayer[data-acrylic-appearance=pink][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.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));
+}
+.materialLayer[data-acrylic-appearance=pink][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.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));
+}
+.materialLayer[data-acrylic-appearance=transparent]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.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));
+}
+.materialLayer[data-acrylic-appearance=decorTransparent] .acrylicBg{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
+}
+.materialLayer{
+  width:100%;
+  height:100%;
+}
+.acrylicBg{
+  pointer-events:none;
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+}
+.borderStateLayer{
+  width:100%;
+  height:100%;
+}
+.lineWrapper{
+  display:flex;
+  align-items:center;
+  align-self:stretch;
+}
+.backgroundWrapper{
+  position:absolute;
+  display:none;
+  width:100%;
+  height:100%;
+}
+.focusLayer{
+  position:absolute;
+  inset:0;
+  display:none;
+  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-offset:0;
+}
+.fieldWrapper[data-validation-state=error] .focusLayer{
+  outline-color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
+}
+.fieldWrapper[data-validation-state=warning] .focusLayer{
+  outline-color:var(--sn-theme-color-yellow-accent, var(--sn-primitive-color-yellow-55, #f3b917));
+}
+.fieldWrapper[data-validation-state=warning]{
+  background-color:var(--sn-theme-color-yellow-background, var(--sn-primitive-color-yellow-90, #fdf4cc));
+}
+.fieldWrapper[data-validation-state=success] .focusLayer{
+  outline-color:var(--sn-theme-color-green-accent, var(--sn-primitive-color-green-55, #41b954));
+}
+.fieldInput{
+  flex:1 1 0;
+  align-self:stretch;
+  min-width:0;
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+.fieldInput::-moz-placeholder{
+  color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
+  opacity:1;
+}
+.fieldInput::placeholder{
+  color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
+  opacity:1;
+}
+.fieldInput:disabled::-moz-placeholder{
+  visibility:hidden;
+}
+.fieldInput:disabled::placeholder{
+  visibility:hidden;
+}
+.clearButtonSlot,
+.postfixButtonsSlot{
+  display:flex;
+  gap:var(--sn-primitive-dimension-2, 2px);
+  align-items:center;
+  justify-content:center;
+}
+.inputLine{
+  display:flex;
+  flex:1 0 0;
+  align-items:center;
+  min-width:0;
+}
+.prefix,
+.postfix{
+  flex-shrink:0;
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}
+.postfix{
+  text-align:right;
+}
+.inputArea{
+  display:flex;
+  flex:1 0 0;
+  align-items:center;
+  min-width:0;
+}
+.iconSlot{
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}
+.contentWrapper{
+  display:flex;
+  align-items:center;
+  align-self:stretch;
+  width:100%;
+}
+.elementWrapperBefore,
+.elementWrapperAfter{
+  position:relative;
+  display:flex;
+  align-items:stretch;
+  align-self:stretch;
+}
+.elementWrapperBefore > *,
+.elementWrapperAfter > *{
+  display:flex;
+  align-items:stretch;
+}
+.fieldWrapper{
+  position:relative;
+  display:flex;
+  flex-direction:column;
+  width:100%;
+}
+.fieldWrapper:has(> .elementWrapperBefore), .fieldWrapper:has(> .elementWrapperAfter){
+  flex-direction:row;
+  align-items:stretch;
+}
+.fieldWrapper .borderStateLayer{
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+}
+.fieldWrapper .borderStateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+  border-style:solid;
+  border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
+}
+.fieldWrapper .borderStateLayer[data-state=emptyNeutralOnBackground]{
+  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))));
+}
+.fieldWrapper .borderStateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
+}
+.fieldWrapper .borderStateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+.fieldWrapper .borderStateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-default-filled, rgba(255, 255, 255, 0.1019607843));
+}
+.fieldWrapper .borderStateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-defaultEmpty-filled, rgba(255, 255, 255, 0));
+}
+.fieldWrapper .borderStateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+@media (hover: hover){
+  .fieldWrapper:hover:not([data-disabled], [data-loading]) .borderStateLayer[data-state=borderOnBackground]{
+    border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
+  }
+  .fieldWrapper:hover:not([data-disabled], [data-loading]) .borderStateLayer[data-state=emptyNeutralOnBackground]{
+    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))));
+  }
+  .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));
+  }
+  .fieldWrapper:hover:not([data-disabled], [data-loading]) .borderStateLayer[data-state=emptyVersionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .fieldWrapper:hover:not([data-disabled], [data-loading]) .borderStateLayer[data-state=inversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .fieldWrapper:hover:not([data-disabled], [data-loading]) .borderStateLayer[data-state=emptyInversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .fieldWrapper:hover:not([data-disabled], [data-loading]) .borderStateLayer[data-state=emptyDarkOnAccent]{
+    background:var(--sn-theme-color-material-stateLayer-darkOnAccent-hovered-filled, rgba(0, 0, 0, 0.0588235294));
+  }
+}
+.fieldWrapper{
+}
+.fieldWrapper[data-loading] .borderStateLayer[data-state=borderOnBackground], .fieldWrapper:active:not([data-disabled], [data-loading]) .borderStateLayer[data-state=borderOnBackground], .fieldWrapper[data-pressed=true]:not([data-disabled], [data-loading]) .borderStateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
+}
+.fieldWrapper[data-loading] .borderStateLayer[data-state=emptyNeutralOnBackground], .fieldWrapper:active:not([data-disabled], [data-loading]) .borderStateLayer[data-state=emptyNeutralOnBackground], .fieldWrapper[data-pressed=true]:not([data-disabled], [data-loading]) .borderStateLayer[data-state=emptyNeutralOnBackground]{
+  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))));
+}
+.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));
+}
+.fieldWrapper[data-loading] .borderStateLayer[data-state=emptyVersionOnColor], .fieldWrapper:active:not([data-disabled], [data-loading]) .borderStateLayer[data-state=emptyVersionOnColor], .fieldWrapper[data-pressed=true]:not([data-disabled], [data-loading]) .borderStateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.fieldWrapper[data-loading] .borderStateLayer[data-state=inversionOnColor], .fieldWrapper:active:not([data-disabled], [data-loading]) .borderStateLayer[data-state=inversionOnColor], .fieldWrapper[data-pressed=true]:not([data-disabled], [data-loading]) .borderStateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.fieldWrapper[data-loading] .borderStateLayer[data-state=emptyInversionOnColor], .fieldWrapper:active:not([data-disabled], [data-loading]) .borderStateLayer[data-state=emptyInversionOnColor], .fieldWrapper[data-pressed=true]:not([data-disabled], [data-loading]) .borderStateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.fieldWrapper[data-loading] .borderStateLayer[data-state=emptyDarkOnAccent], .fieldWrapper:active:not([data-disabled], [data-loading]) .borderStateLayer[data-state=emptyDarkOnAccent], .fieldWrapper[data-pressed=true]:not([data-disabled], [data-loading]) .borderStateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-pressed-filled, rgba(0, 0, 0, 0.1215686275));
+}
+.fieldWrapper[data-size=s] .lineWrapper{
+  display:none;
+  width:0;
+  padding:var(--sn-field-anatomy-size-s-elementWrapper-lineWrapper-padding, var(--sn-brand-anatomy-line-field-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px))) 0;
+}
+.fieldWrapper[data-size=s] .focusLayer{
+  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] .borderStateLayer,
+.fieldWrapper[data-size=s] .materialLayer{
+  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)));
+}
+.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] .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-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)));
+  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)));
+}
+.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));
+}
+.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));
+}
+.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));
+}
+.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)));
+  display:initial;
+}
+.fieldWrapper[data-size=s][data-withbackground=true] .lineWrapper[data-outline=true]{
+  display:initial;
+}
+.fieldWrapper[data-size=s][data-withbackground=true] [data-acrylic-background]{
+  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][data-withbackground=true]:not([data-disabled=true])[data-focusvisible=true] .focusLayer{
+  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-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{
+  display:none;
+  width:0;
+  padding:var(--sn-field-anatomy-size-m-elementWrapper-lineWrapper-padding, var(--sn-brand-anatomy-line-field-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px))) 0;
+}
+.fieldWrapper[data-size=m] .focusLayer{
+  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] .borderStateLayer,
+.fieldWrapper[data-size=m] .materialLayer{
+  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)));
+}
+.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] .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-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)));
+  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)));
+}
+.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));
+}
+.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));
+}
+.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));
+}
+.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)));
+  display:initial;
+}
+.fieldWrapper[data-size=m][data-withbackground=true] .lineWrapper[data-outline=true]{
+  display:initial;
+}
+.fieldWrapper[data-size=m][data-withbackground=true] [data-acrylic-background]{
+  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][data-withbackground=true]:not([data-disabled=true])[data-focusvisible=true] .focusLayer{
+  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-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{
+  display:none;
+  width:0;
+  padding:var(--sn-field-anatomy-size-l-elementWrapper-lineWrapper-padding, var(--sn-brand-anatomy-line-field-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px))) 0;
+}
+.fieldWrapper[data-size=l] .focusLayer{
+  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] .borderStateLayer,
+.fieldWrapper[data-size=l] .materialLayer{
+  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)));
+}
+.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] .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-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)));
+  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)));
+}
+.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));
+}
+.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));
+}
+.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));
+}
+.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)));
+  display:initial;
+}
+.fieldWrapper[data-size=l][data-withbackground=true] .lineWrapper[data-outline=true]{
+  display:initial;
+}
+.fieldWrapper[data-size=l][data-withbackground=true] [data-acrylic-background]{
+  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][data-withbackground=true]:not([data-disabled=true])[data-focusvisible=true] .focusLayer{
+  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-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-readonly=true]:not([data-disabled=true]){
+  cursor:default;
+}
+.fieldWrapper[data-readonly=true]:not([data-disabled=true]) .fieldInput{
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}
+.fieldWrapper[data-readonly=true]:not([data-disabled=true]):active .borderStateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+}
+@media (hover: hover){
+  .fieldWrapper[data-readonly=true]:not([data-disabled=true]):hover .borderStateLayer[data-state=borderOnBackground]{
+    border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+  }
+}
+.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));
+}
+.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));
+}
+.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));
+}
+.fieldContainer{
+  position:relative;
+  display:flex;
+  flex:1 1 auto;
+  flex-direction:column;
+  align-items:flex-start;
+  justify-content:center;
+  min-width:0;
+}