@dynatrace/strato-components 3.5.2 → 3.7.0

package/esm/forms/_base-input/BaseInput.css

@@ -1,27 +1,27 @@
-._1a8lqy90-3-5-2 {
-  --_bx32h5-3-5-2: 1;
+._1a8lqy90-3-7-0 {
+  --_bx32h5-3-7-0: 1;
 }
-._1a8lqy91-3-5-2 {
-  --_bx32h5-3-5-2: 3;
+._1a8lqy91-3-7-0 {
+  --_bx32h5-3-7-0: 3;
 }
-._1a8lqy91-3-5-2:hover {
-  --_bx32h5-3-5-2: 4;
+._1a8lqy91-3-7-0:hover {
+  --_bx32h5-3-7-0: 4;
 }
-._1a8lqy91-3-5-2:active {
-  --_bx32h5-3-5-2: 4;
+._1a8lqy91-3-7-0:active {
+  --_bx32h5-3-7-0: 4;
 }
-._1a8lqy92-3-5-2 {
-  --_bx32h5-3-5-2: 0;
+._1a8lqy92-3-7-0 {
+  --_bx32h5-3-7-0: 0;
 }
-._1a8lqy92-3-5-2:hover {
-  --_bx32h5-3-5-2: 0;
+._1a8lqy92-3-7-0:hover {
+  --_bx32h5-3-7-0: 0;
 }
-._1a8lqy92-3-5-2:active {
-  --_bx32h5-3-5-2: 0;
+._1a8lqy92-3-7-0:active {
+  --_bx32h5-3-7-0: 0;
 }
-._1a8lqy98-3-5-2 {
-  --_1a8lqy96-3-5-2: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-  --_yfwka30-3-5-2: var(--_1a8lqy96-3-5-2);
+._1a8lqy98-3-7-0 {
+  --_1a8lqy96-3-7-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+  --_yfwka30-3-7-0: var(--_1a8lqy96-3-7-0);
   position: relative;
   display: flex;
   min-width: 0;
@@ -32,91 +32,91 @@
   padding-right: var(--dt-spacings-size-12, 12px);
   border-radius: var(--dt-borders-radius-field-default, 6px);
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
-  background-color: var(--_1a8lqy96-3-5-2);
-  box-shadow: var(--_1a8lqy97-3-5-2);
+  background-color: var(--_1a8lqy96-3-7-0);
+  box-shadow: var(--_1a8lqy97-3-7-0);
   transition-property: background-color, box-shadow, border-color;
   transition-duration: var(--dt-timings-fast-quick, 150ms);
   transition-timing-function: var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1)), var(--dt-easings-decelerate, cubic-bezier(0, 0, 0.2, 1));
 }
-._1a8lqy98-3-5-2:hover {
-  --_1a8lqy96-3-5-2: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
+._1a8lqy98-3-7-0:hover {
+  --_1a8lqy96-3-7-0: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._1a8lqy98-3-5-2:active {
-  --_1a8lqy96-3-5-2: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
+._1a8lqy98-3-7-0:active {
+  --_1a8lqy96-3-7-0: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._1a8lqy91-3-5-2 ._1a8lqy98-3-5-2 {
+._1a8lqy91-3-7-0 ._1a8lqy98-3-7-0 {
   color: var(--dt-colors-text-critical-default, #bb0731);
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1a8lqy91-3-5-2:not(._1a8lqy92-3-5-2) ._1a8lqy98-3-5-2:hover {
+._1a8lqy91-3-7-0:not(._1a8lqy92-3-7-0) ._1a8lqy98-3-7-0:hover {
   background-color: var(--dt-colors-background-field-critical-emphasized-hover, #f6d6d5);
 }
-._1a8lqy91-3-5-2:not(._1a8lqy92-3-5-2) ._1a8lqy98-3-5-2:active {
+._1a8lqy91-3-7-0:not(._1a8lqy92-3-7-0) ._1a8lqy98-3-7-0:active {
   background-color: var(--dt-colors-background-field-critical-emphasized-active, #f5cac9);
 }
-._1a8lqy93-3-5-2 ._1a8lqy98-3-5-2:is(:not(:hover, :active), :hover, :active) {
+._1a8lqy93-3-7-0 ._1a8lqy98-3-7-0:is(:not(:hover, :active), :hover, :active) {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-:where(:root:not(._1jgl8s50-3-5-2)) ._1a8lqy93-3-5-2._1a8lqy91-3-5-2 ._1a8lqy98-3-5-2:is(:not(:hover, :active), :hover, :active) {
+:where(:root:not(._1jgl8s50-3-7-0)) ._1a8lqy93-3-7-0._1a8lqy91-3-7-0 ._1a8lqy98-3-7-0:is(:not(:hover, :active), :hover, :active) {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1a8lqy92-3-5-2 ._1a8lqy98-3-5-2 {
+._1a8lqy92-3-7-0 ._1a8lqy98-3-7-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   cursor: not-allowed;
 }
-._1a8lqy95-3-5-2:not(:hover) ._1a8lqy98-3-5-2 {
+._1a8lqy95-3-7-0:not(:hover) ._1a8lqy98-3-7-0 {
   background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
 }
-._1a8lqy95-3-5-2:is(._1a8lqy92-3-5-2, ._1a8lqy93-3-5-2) ._1a8lqy98-3-5-2:is(:not(:hover, :active), :hover, :active) {
+._1a8lqy95-3-7-0:is(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0) ._1a8lqy98-3-7-0:is(:not(:hover, :active), :hover, :active) {
   background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
 }
-._1jgl8s50-3-5-2 ._1a8lqy94-3-5-2 ._1a8lqy98-3-5-2,
-    ._1jgl8s50-3-5-2 ._1a8lqy94-3-5-2 ._1a8lqy98-3-5-2:is(:hover, :active),
-    ._1jgl8s50-3-5-2 ._1a8lqy95-3-5-2:not(._1a8lqy92-3-5-2, ._1a8lqy93-3-5-2) ._1a8lqy98-3-5-2:is(:hover, :active),
-    ._1jgl8s50-3-5-2 ._1a8lqy95-3-5-2:not(._1a8lqy92-3-5-2, ._1a8lqy93-3-5-2):is(:hover, :active) ._1a8lqy98-3-5-2 {
+._1jgl8s50-3-7-0 ._1a8lqy94-3-7-0 ._1a8lqy98-3-7-0,
+    ._1jgl8s50-3-7-0 ._1a8lqy94-3-7-0 ._1a8lqy98-3-7-0:is(:hover, :active),
+    ._1jgl8s50-3-7-0 ._1a8lqy95-3-7-0:not(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0) ._1a8lqy98-3-7-0:is(:hover, :active),
+    ._1jgl8s50-3-7-0 ._1a8lqy95-3-7-0:not(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0):is(:hover, :active) ._1a8lqy98-3-7-0 {
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._1jgl8s50-3-5-2 ._1a8lqy94-3-5-2:not(._1a8lqy92-3-5-2, ._1a8lqy93-3-5-2) ._1a8lqy98-3-5-2,
-    ._1jgl8s50-3-5-2 :where(._1a8lqy95-3-5-2:not(._1a8lqy92-3-5-2, ._1a8lqy93-3-5-2)):hover ._1a8lqy98-3-5-2 {
-  --_1a8lqy97-3-5-2: var(--dt-box-shadows-field-neutral-emphasized-rest, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #fff);
+._1jgl8s50-3-7-0 ._1a8lqy94-3-7-0:not(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0) ._1a8lqy98-3-7-0,
+    ._1jgl8s50-3-7-0 :where(._1a8lqy95-3-7-0:not(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0)):hover ._1a8lqy98-3-7-0 {
+  --_1a8lqy97-3-7-0: var(--dt-box-shadows-field-neutral-emphasized-rest, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #fff);
 }
-._1jgl8s50-3-5-2 :is(._1a8lqy94-3-5-2, ._1a8lqy95-3-5-2):not(._1a8lqy92-3-5-2, ._1a8lqy93-3-5-2) ._1a8lqy98-3-5-2:hover {
-  --_1a8lqy97-3-5-2: var(--dt-box-shadows-field-neutral-emphasized-hover, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #dadbe4);
+._1jgl8s50-3-7-0 :is(._1a8lqy94-3-7-0, ._1a8lqy95-3-7-0):not(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0) ._1a8lqy98-3-7-0:hover {
+  --_1a8lqy97-3-7-0: var(--dt-box-shadows-field-neutral-emphasized-hover, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #dadbe4);
 }
-._1jgl8s50-3-5-2 :is(._1a8lqy94-3-5-2, ._1a8lqy95-3-5-2):not(._1a8lqy92-3-5-2, ._1a8lqy93-3-5-2) ._1a8lqy98-3-5-2:active {
-  --_1a8lqy97-3-5-2: var(--dt-box-shadows-field-neutral-emphasized-active, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #d0d1dc);
+._1jgl8s50-3-7-0 :is(._1a8lqy94-3-7-0, ._1a8lqy95-3-7-0):not(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0) ._1a8lqy98-3-7-0:active {
+  --_1a8lqy97-3-7-0: var(--dt-box-shadows-field-neutral-emphasized-active, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #d0d1dc);
 }
-._1jgl8s50-3-5-2 :where(._1a8lqy94-3-5-2)._1a8lqy91-3-5-2:not(._1a8lqy92-3-5-2) ._1a8lqy98-3-5-2,
-      ._1jgl8s50-3-5-2 :where(._1a8lqy95-3-5-2)._1a8lqy91-3-5-2:not(._1a8lqy92-3-5-2, ._1a8lqy93-3-5-2):hover ._1a8lqy98-3-5-2 {
-  --_1a8lqy97-3-5-2: var(--dt-box-shadows-field-critical-emphasized-rest, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f8e1e1);
+._1jgl8s50-3-7-0 :where(._1a8lqy94-3-7-0)._1a8lqy91-3-7-0:not(._1a8lqy92-3-7-0) ._1a8lqy98-3-7-0,
+      ._1jgl8s50-3-7-0 :where(._1a8lqy95-3-7-0)._1a8lqy91-3-7-0:not(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0):hover ._1a8lqy98-3-7-0 {
+  --_1a8lqy97-3-7-0: var(--dt-box-shadows-field-critical-emphasized-rest, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f8e1e1);
 }
-._1jgl8s50-3-5-2 ._1a8lqy91-3-5-2:not(._1a8lqy92-3-5-2, ._1a8lqy93-3-5-2) ._1a8lqy98-3-5-2:hover {
-  --_1a8lqy97-3-5-2: var(--dt-box-shadows-field-critical-emphasized-hover, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f6d6d5);
+._1jgl8s50-3-7-0 ._1a8lqy91-3-7-0:not(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0) ._1a8lqy98-3-7-0:hover {
+  --_1a8lqy97-3-7-0: var(--dt-box-shadows-field-critical-emphasized-hover, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f6d6d5);
 }
-._1jgl8s50-3-5-2 ._1a8lqy91-3-5-2:not(._1a8lqy92-3-5-2, ._1a8lqy93-3-5-2) ._1a8lqy98-3-5-2:active {
-  --_1a8lqy97-3-5-2: var(--dt-box-shadows-field-critical-emphasized-active, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f5cac9);
+._1jgl8s50-3-7-0 ._1a8lqy91-3-7-0:not(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0) ._1a8lqy98-3-7-0:active {
+  --_1a8lqy97-3-7-0: var(--dt-box-shadows-field-critical-emphasized-active, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f5cac9);
 }
-._1jgl8s50-3-5-2 ._1a8lqy94-3-5-2:is(._1a8lqy92-3-5-2, ._1a8lqy93-3-5-2) ._1a8lqy98-3-5-2 {
-  --_1a8lqy97-3-5-2: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+._1jgl8s50-3-7-0 ._1a8lqy94-3-7-0:is(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0) ._1a8lqy98-3-7-0 {
+  --_1a8lqy97-3-7-0: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
 }
-._1jgl8s50-3-5-2 ._1a8lqy94-3-5-2._1a8lqy91-3-5-2:is(._1a8lqy92-3-5-2, ._1a8lqy93-3-5-2) ._1a8lqy98-3-5-2 {
-  --_1a8lqy97-3-5-2: var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+._1jgl8s50-3-7-0 ._1a8lqy94-3-7-0._1a8lqy91-3-7-0:is(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0) ._1a8lqy98-3-7-0 {
+  --_1a8lqy97-3-7-0: var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
 }
-._1a8lqy99-3-5-2 {
+._1a8lqy99-3-7-0 {
   padding-right: 0;
   padding-left: 0;
 }
-._1a8lqy9a-3-5-2 {
+._1a8lqy9a-3-7-0 {
   padding-right: 0;
 }
-._1a8lqy9b-3-5-2 {
+._1a8lqy9b-3-7-0 {
   padding-right: unset;
 }
-._1a8lqy9c-3-5-2 {
+._1a8lqy9c-3-7-0 {
   padding-left: unset;
 }
-._1a8lqy9d-3-5-2 {
+._1a8lqy9d-3-7-0 {
   display: block;
   text-overflow: ellipsis;
   appearance: none;
@@ -130,134 +130,134 @@
   min-width: 0;
   color: inherit;
 }
-._1a8lqy9d-3-5-2:focus {
+._1a8lqy9d-3-7-0:focus {
   outline: none;
 }
-._1a8lqy9d-3-5-2::placeholder {
+._1a8lqy9d-3-7-0::placeholder {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1a8lqy9d-3-5-2::-webkit-search-cancel-button {
+._1a8lqy9d-3-7-0::-webkit-search-cancel-button {
   -webkit-appearance: none;
 }
-._1a8lqy9d-3-5-2::-ms-reveal {
+._1a8lqy9d-3-7-0::-ms-reveal {
   display: none;
 }
-._1a8lqy91-3-5-2 ._1a8lqy9d-3-5-2:-webkit-autofill:is(:not(:hover, :focus), :hover, :focus), ._1a8lqy91-3-5-2 ._1a8lqy9d-3-5-2::placeholder {
+._1a8lqy91-3-7-0 ._1a8lqy9d-3-7-0:-webkit-autofill:is(:not(:hover, :focus), :hover, :focus), ._1a8lqy91-3-7-0 ._1a8lqy9d-3-7-0::placeholder {
   color: var(--dt-colors-text-critical-default, #bb0731);
   -webkit-text-fill-color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._1a8lqy92-3-5-2 ._1a8lqy9d-3-5-2:-webkit-autofill:is(:not(:hover, :focus), :hover, :focus), ._1a8lqy92-3-5-2 ._1a8lqy9d-3-5-2::placeholder {
+._1a8lqy92-3-7-0 ._1a8lqy9d-3-7-0:-webkit-autofill:is(:not(:hover, :focus), :hover, :focus), ._1a8lqy92-3-7-0 ._1a8lqy9d-3-7-0::placeholder {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   -webkit-text-fill-color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1a8lqy92-3-5-2 ._1a8lqy9d-3-5-2 {
+._1a8lqy92-3-7-0 ._1a8lqy9d-3-7-0 {
   cursor: not-allowed;
 }
-._1a8lqy93-3-5-2 ._1a8lqy9d-3-5-2 {
+._1a8lqy93-3-7-0 ._1a8lqy9d-3-7-0 {
   cursor: default;
 }
-button ._1a8lqy9d-3-5-2 {
+button ._1a8lqy9d-3-7-0 {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._1a8lqy9e-3-5-2 {
+._1a8lqy9e-3-7-0 {
   margin: 0 var(--dt-spacings-size-4, 4px);
   padding: var(--dt-spacings-size-2, 2px) 0;
   width: var(--dt-spacings-size-28, 28px);
 }
-._1a8lqy9e-3-5-2:is(button._1a8lqy9e-3-5-2._1a8lqy9e-3-5-2) {
+._1a8lqy9e-3-7-0:is(button._1a8lqy9e-3-7-0._1a8lqy9e-3-7-0) {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._1a8lqy9f-3-5-2 {
+._1a8lqy9f-3-7-0 {
   margin-top: var(--dt-spacings-size-6, 6px);
   margin-bottom: var(--dt-spacings-size-6, 6px);
   background-color: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1a8lqy91-3-5-2:not(._1a8lqy92-3-5-2) ._1a8lqy9f-3-5-2 {
+._1a8lqy91-3-7-0:not(._1a8lqy92-3-7-0) ._1a8lqy9f-3-7-0 {
   background-color: var(--dt-colors-border-critical-default, #f6d6d5);
 }
-._1a8lqy94-3-5-2._1a8lqy93-3-5-2 button:not(:hover, :active) {
+._1a8lqy94-3-7-0._1a8lqy93-3-7-0 button:not(:hover, :active) {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1a8lqy94-3-5-2._1a8lqy93-3-5-2._1a8lqy91-3-5-2 button:not(:hover, :active) {
+._1a8lqy94-3-7-0._1a8lqy93-3-7-0._1a8lqy91-3-7-0 button:not(:hover, :active) {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1jgl8s50-3-5-2 ._1a8lqy94-3-5-2._1a8lqy93-3-5-2 button:not(:hover, :active) {
+._1jgl8s50-3-7-0 ._1a8lqy94-3-7-0._1a8lqy93-3-7-0 button:not(:hover, :active) {
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._1jgl8s50-3-5-2 ._1a8lqy94-3-5-2._1a8lqy93-3-5-2 button {
-  --_bx32h4-3-5-2: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+._1jgl8s50-3-7-0 ._1a8lqy94-3-7-0._1a8lqy93-3-7-0 button {
+  --_bx32h4-3-7-0: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
 }
-._1a8lqy95-3-5-2:not(._1a8lqy92-3-5-2, ._1a8lqy93-3-5-2):hover button {
+._1a8lqy95-3-7-0:not(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0):hover button {
   transition-property: background-color, box-shadow, border-color;
   transition-duration: var(--dt-timings-fast-quick, 150ms);
   transition-timing-function: var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1)), var(--dt-easings-decelerate, cubic-bezier(0, 0, 0.2, 1));
   background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-._1a8lqy95-3-5-2:not(._1a8lqy92-3-5-2, ._1a8lqy93-3-5-2):hover button:hover {
+._1a8lqy95-3-7-0:not(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0):hover button:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._1a8lqy95-3-5-2:not(._1a8lqy92-3-5-2, ._1a8lqy93-3-5-2):hover button:active {
+._1a8lqy95-3-7-0:not(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0):hover button:active {
   background-color: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._1a8lqy95-3-5-2:not(._1a8lqy92-3-5-2, ._1a8lqy93-3-5-2)._1a8lqy91-3-5-2:hover button {
+._1a8lqy95-3-7-0:not(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0)._1a8lqy91-3-7-0:hover button {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1a8lqy95-3-5-2:not(._1a8lqy92-3-5-2, ._1a8lqy93-3-5-2)._1a8lqy91-3-5-2:hover button:hover {
+._1a8lqy95-3-7-0:not(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0)._1a8lqy91-3-7-0:hover button:hover {
   background-color: var(--dt-colors-background-field-critical-emphasized-hover, #f6d6d5);
 }
-._1a8lqy95-3-5-2:not(._1a8lqy92-3-5-2, ._1a8lqy93-3-5-2)._1a8lqy91-3-5-2:hover button:active {
+._1a8lqy95-3-7-0:not(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0)._1a8lqy91-3-7-0:hover button:active {
   background-color: var(--dt-colors-background-field-critical-emphasized-active, #f5cac9);
 }
-._1a8lqy95-3-5-2._1a8lqy93-3-5-2 button:not(:hover, :active) {
+._1a8lqy95-3-7-0._1a8lqy93-3-7-0 button:not(:hover, :active) {
   background-color: transparent;
 }
-._1a8lqy95-3-5-2:not(._1a8lqy92-3-5-2, ._1a8lqy93-3-5-2):hover button:is(:disabled, [aria-disabled=true]) {
+._1a8lqy95-3-7-0:not(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0):hover button:is(:disabled, [aria-disabled=true]) {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1jgl8s50-3-5-2 ._1a8lqy95-3-5-2:not(._1a8lqy92-3-5-2, ._1a8lqy93-3-5-2):hover button {
+._1jgl8s50-3-7-0 ._1a8lqy95-3-7-0:not(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0):hover button {
   background-color: var(--dt-colors-background-surface-default, #fff);
   box-shadow: var(--dt-box-shadows-field-neutral-emphasized-rest, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #fff);
 }
-._1jgl8s50-3-5-2 ._1a8lqy95-3-5-2:not(._1a8lqy92-3-5-2, ._1a8lqy93-3-5-2):hover button:hover {
+._1jgl8s50-3-7-0 ._1a8lqy95-3-7-0:not(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0):hover button:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1jgl8s50-3-5-2 ._1a8lqy95-3-5-2:not(._1a8lqy92-3-5-2, ._1a8lqy93-3-5-2):hover button:active {
+._1jgl8s50-3-7-0 ._1a8lqy95-3-7-0:not(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0):hover button:active {
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._1jgl8s50-3-5-2 ._1a8lqy95-3-5-2:not(._1a8lqy92-3-5-2) button:hover {
+._1jgl8s50-3-7-0 ._1a8lqy95-3-7-0:not(._1a8lqy92-3-7-0) button:hover {
   box-shadow: var(--dt-box-shadows-field-neutral-emphasized-hover, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #dadbe4);
 }
-._1jgl8s50-3-5-2 ._1a8lqy95-3-5-2:not(._1a8lqy92-3-5-2) button:active {
+._1jgl8s50-3-7-0 ._1a8lqy95-3-7-0:not(._1a8lqy92-3-7-0) button:active {
   box-shadow: var(--dt-box-shadows-field-neutral-emphasized-active, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #d0d1dc);
 }
-._1jgl8s50-3-5-2 ._1a8lqy95-3-5-2:not(._1a8lqy92-3-5-2, ._1a8lqy93-3-5-2)._1a8lqy91-3-5-2:hover button {
+._1jgl8s50-3-7-0 ._1a8lqy95-3-7-0:not(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0)._1a8lqy91-3-7-0:hover button {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
   box-shadow: var(--dt-box-shadows-field-critical-emphasized-rest, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f8e1e1);
 }
-._1jgl8s50-3-5-2 ._1a8lqy95-3-5-2:not(._1a8lqy92-3-5-2, ._1a8lqy93-3-5-2)._1a8lqy91-3-5-2:hover button:hover {
+._1jgl8s50-3-7-0 ._1a8lqy95-3-7-0:not(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0)._1a8lqy91-3-7-0:hover button:hover {
   background-color: var(--dt-colors-background-field-critical-default-hover, #f6d6d5);
 }
-._1jgl8s50-3-5-2 ._1a8lqy95-3-5-2:not(._1a8lqy92-3-5-2, ._1a8lqy93-3-5-2)._1a8lqy91-3-5-2:hover button:active {
+._1jgl8s50-3-7-0 ._1a8lqy95-3-7-0:not(._1a8lqy92-3-7-0, ._1a8lqy93-3-7-0)._1a8lqy91-3-7-0:hover button:active {
   background-color: var(--dt-colors-background-field-critical-default-active, #f5cac9);
 }
-._1jgl8s50-3-5-2 ._1a8lqy95-3-5-2:not(._1a8lqy92-3-5-2)._1a8lqy91-3-5-2 button:hover {
+._1jgl8s50-3-7-0 ._1a8lqy95-3-7-0:not(._1a8lqy92-3-7-0)._1a8lqy91-3-7-0 button:hover {
   box-shadow: var(--dt-box-shadows-field-critical-emphasized-hover, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f6d6d5);
 }
-._1jgl8s50-3-5-2 ._1a8lqy95-3-5-2:not(._1a8lqy92-3-5-2)._1a8lqy91-3-5-2 button:active {
+._1jgl8s50-3-7-0 ._1a8lqy95-3-7-0:not(._1a8lqy92-3-7-0)._1a8lqy91-3-7-0 button:active {
   box-shadow: var(--dt-box-shadows-field-critical-emphasized-active, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f5cac9);
 }
-._1a8lqy98-3-5-2:has(._1a8lqy9e-3-5-2:hover) {
+._1a8lqy98-3-7-0:has(._1a8lqy9e-3-7-0:hover) {
   background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-:where(:root:not(._1jgl8s50-3-5-2)) ._1a8lqy91-3-5-2 ._1a8lqy98-3-5-2:has(._1a8lqy9e-3-5-2:hover):not(._1a8lqy92-3-5-2) {
+:where(:root:not(._1jgl8s50-3-7-0)) ._1a8lqy91-3-7-0 ._1a8lqy98-3-7-0:has(._1a8lqy9e-3-7-0:hover):not(._1a8lqy92-3-7-0) {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1a8lqy98-3-5-2:hover ._1a8lqy9f-3-5-2 {
+._1a8lqy98-3-7-0:hover ._1a8lqy9f-3-7-0 {
   background-color: var(--dt-colors-border-neutral-default-active, #c6c7d5);
 }
-._1a8lqy91-3-5-2 ._1a8lqy98-3-5-2:hover ._1a8lqy9f-3-5-2 {
+._1a8lqy91-3-7-0 ._1a8lqy98-3-7-0:hover ._1a8lqy9f-3-7-0 {
   background-color: var(--dt-colors-border-critical-default-active, #f3bebd);
 }
-._1a8lqy98-3-5-2._1a8lqy9g-3-5-2 div svg {
+._1a8lqy98-3-7-0._1a8lqy9g-3-7-0 div svg {
   fill: currentcolor;
 }

package/esm/forms/_base-input/BaseInput.js

@@ -9,15 +9,17 @@ import {
   useRef
 } from "react";
 import { useIntl } from "react-intl";
-import { XmarkIcon } from "@dynatrace/strato-icons";
 import * as styles from "./BaseInput.sty.js";
 import { BaseInputButton } from "./BaseInputButton.js";
-import { BaseInputPrefix, BaseInputSuffix } from "./BaseInputContent.js";
+import {
+  BaseInputPrefix,
+  BaseInputReservedSuffix,
+  BaseInputSuffix
+} from "./BaseInputContent.js";
 import { BaseInputContext } from "./contexts/BaseInputContext.js";
-import { Button } from "../../buttons/button/Button.js";
+import { useFocusRing } from "../../core/hooks/useFocusRing.js";
 import { useFormControlState } from "../../core/hooks/useFormControlState.js";
 import { useSplitProps } from "../../core/hooks/useSplitProps.js";
-import { useFocusRing } from "../../core/styles/useFocusRing.js";
 import { isSlot } from "../../core/utils/is-slot.js";
 import { mergeProps as _mergeProps } from "../../core/utils/merge-props.js";
 import { Divider } from "../../layouts/divider/Divider.js";
@@ -32,12 +34,14 @@ import { FormFieldMessagesAction } from "../forms-core/state/formfield-messages-
 import { useAutofillEvent } from "../hooks/useAutofillEvent.js";
 import { useInputHint } from "../hooks/useInputHint.js";
 import { getPlaceholderMessage } from "./baseInputMessages.js";
+import { ClearButton } from "./ClearButton.js";
 function getSlots(children) {
   const validSlots = Children.toArray(children).filter(
     isValidElement
   );
   let prefix = { buttons: [], rest: [], props: {} };
   let suffix = { buttons: [], rest: [], props: {} };
+  let reservedSuffix = { buttons: [], rest: [], props: {} };
   for (const slot of validSlots) {
     const buttons = [];
     const rest = [];
@@ -56,8 +60,11 @@ function getSlots(children) {
     if (slot.type === BaseInputSuffix) {
       suffix = { buttons, rest, props: slotProps };
     }
+    if (slot.type === BaseInputReservedSuffix) {
+      reservedSuffix = { buttons, rest, props: slotProps };
+    }
   }
-  return { prefix, suffix };
+  return { prefix, suffix, reservedSuffix };
 }
 const BaseInputRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
   const intl = useIntl();
@@ -82,6 +89,7 @@ const BaseInputRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     "aria-details": ariaDetailsProp,
     className: consumerClassName,
     style: consumerStyle,
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
     onClear,
     type,
     placeholder = defaultPlaceholder,
@@ -113,8 +121,6 @@ const BaseInputRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
   const { isAutoFilled, onAnimationStart } = useAutofillEvent();
   const inputRef = useRef(null);
   const wrapperRef = useRef(null);
-  const hasOnClear = onClear !== void 0;
-  const showClearButton = hasOnClear && inputValue !== "";
   const { focusProps, focusClassName } = useFocusRing({
     color: hasError && !(disabled || ariaDisabled) ? "critical" : "neutral",
     ignoreModality: true,
@@ -166,6 +172,9 @@ const BaseInputRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
   const slots = useMemo(() => getSlots(children), [children]);
   const hasInnerPrefix = slots.prefix.rest.length > 0;
   const hasInnerSuffix = slots.suffix.rest.length > 0;
+  const hasInnerReservedSuffix = slots.reservedSuffix.rest.length > 0;
+  const hasOnClear = onClear !== void 0;
+  const showClearButton = hasOnClear && inputValue !== "" && !hasInnerReservedSuffix;
   const {
     matchedProps: dataAttributesProps,
     remainingProps: remainingInputProps
@@ -207,8 +216,8 @@ const BaseInputRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
                     focusClassName,
                     {
                       [styles.isAutoFilled]: isAutoFilled,
-                      [`${styles.containerPadding.none}`]: hasOnClear && hasInnerPrefix,
-                      [`${styles.containerPadding.rightNone}`]: hasOnClear && !hasInnerPrefix,
+                      [`${styles.containerPadding.none}`]: hasInnerReservedSuffix && hasInnerPrefix,
+                      [`${styles.containerPadding.rightNone}`]: hasInnerReservedSuffix && !hasInnerPrefix,
                       [`${styles.containerPadding.leftUnset}`]: hasInnerPrefix,
                       [`${styles.containerPadding.rightUnset}`]: hasInnerSuffix
                     }
@@ -246,20 +255,25 @@ const BaseInputRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
                       }
                     ),
                     hasInnerSuffix && /* @__PURE__ */ jsx(BaseInputSuffix, { ...slots.suffix.props, children: slots.suffix.rest }),
-                    !readOnly && /* @__PURE__ */ jsxs(Fragment, { children: [
-                      hasInnerSuffix && showClearButton && /* @__PURE__ */ jsx(Divider, { orientation: "vertical", className: styles.divider }),
-                      showClearButton && /* @__PURE__ */ jsx(
-                        Button,
+                    !readOnly && /* @__PURE__ */ jsx(Fragment, { children: hasInnerReservedSuffix ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      hasInnerSuffix && /* @__PURE__ */ jsx(
+                        Divider,
+                        {
+                          orientation: "vertical",
+                          className: styles.divider
+                        }
+                      ),
+                      slots.reservedSuffix.rest
+                    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                      hasInnerSuffix && showClearButton && /* @__PURE__ */ jsx(
+                        Divider,
                         {
-                          onClick: onClear,
-                          className: styles.clearIconButton,
-                          color: hasError ? "critical" : "neutral",
-                          disabled: disabledOrAriaDisabled,
-                          "data-dt-name": "ClearAll",
-                          children: /* @__PURE__ */ jsx(XmarkIcon, {})
+                          orientation: "vertical",
+                          className: styles.divider
                         }
-                      )
-                    ] })
+                      ),
+                      showClearButton && /* @__PURE__ */ jsx(ClearButton, { onClear })
+                    ] }) })
                   ]
                 }
               ),
@@ -283,6 +297,7 @@ const BaseInputRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
 const BaseInput = Object.assign(BaseInputRoot, {
   Prefix: BaseInputPrefix,
   Suffix: BaseInputSuffix,
+  ReservedSuffix: BaseInputReservedSuffix,
   Button: BaseInputButton
 });
 BaseInput.displayName = "BaseInput";

package/esm/forms/_base-input/BaseInput.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/_base-input/BaseInput.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  Children,\n  forwardRef,\n  isValidElement,\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { XmarkIcon } from '@dynatrace/strato-icons';\n\nimport type { BaseInputProps } from './base-input.types.js';\nimport * as styles from './BaseInput.sty.js';\nimport { BaseInputButton } from './BaseInputButton.js';\nimport { BaseInputPrefix, BaseInputSuffix } from './BaseInputContent.js';\nimport { BaseInputContext } from './contexts/BaseInputContext.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useFormControlState } from '../../core/hooks/useFormControlState.js';\nimport { useSplitProps } from '../../core/hooks/useSplitProps.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport { Divider } from '../../layouts/divider/Divider.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { inputGroupClassName } from '../../layouts/input-group/InputGroup.sty.js';\nimport { InputGroup } from '../../layouts/input-group/InputGroup.js';\nimport { InternalBaseItem as BaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useFormFieldValidation } from '../forms-core/hooks/useFormFieldValidation.js';\nimport { useSyncedFormControlProps } from '../forms-core/hooks/useSyncedFormControlProps.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { useAutofillEvent } from '../hooks/useAutofillEvent.js';\nimport { useInputHint } from '../hooks/useInputHint.js';\nimport type { FormControlRef } from '../shared-types.js';\nimport { getPlaceholderMessage } from './baseInputMessages.js';\n\ntype SlotContent = {\n  buttons: ReactElement[];\n  rest: ReactNode[];\n  props: Record<string, unknown>;\n};\n\nfunction getSlots(children: ReactNode) {\n  const validSlots = Children.toArray(children).filter(\n    isValidElement<PropsWithChildren>,\n  );\n\n  let prefix: SlotContent = { buttons: [], rest: [], props: {} };\n  let suffix: SlotContent = { buttons: [], rest: [], props: {} };\n\n  for (const slot of validSlots) {\n    const buttons: SlotContent['buttons'] = [];\n    const rest: SlotContent['rest'] = [];\n\n    const slotChildren = Children.toArray(slot.props.children);\n\n    for (const child of slotChildren) {\n      if (isSlot(child, BaseInputButton)) {\n        buttons.push(child);\n      } else {\n        rest.push(child);\n      }\n    }\n\n    const { children: _children, ...slotProps } = slot.props;\n\n    if (slot.type === BaseInputPrefix) {\n      prefix = { buttons, rest, props: slotProps };\n    }\n    if (slot.type === BaseInputSuffix) {\n      suffix = { buttons, rest, props: slotProps };\n    }\n  }\n\n  return { prefix, suffix };\n}\n\nconst BaseInputRoot = /* @__PURE__ */ forwardRef<\n  FormControlRef<HTMLDivElement>,\n  BaseInputProps\n>((props, forwardedRef) => {\n  const intl = useIntl();\n\n  const defaultPlaceholder = intl.formatMessage(\n    getPlaceholderMessage(props.type),\n  );\n\n  const {\n    children,\n    id: propId,\n    disabled: propDisabled,\n    required: propRequired,\n    'aria-disabled': ariaDisabledProp,\n    variant = 'default',\n    controlState,\n    readOnly: propReadOnly,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-label': ariaLabelProp,\n    'aria-labelledby': ariaLabelledByProp,\n    'aria-describedby': ariaDescribedByProp,\n    'aria-details': ariaDetailsProp,\n    className: consumerClassName,\n    style: consumerStyle,\n    onClear,\n    type,\n    placeholder = defaultPlaceholder,\n    value,\n    pattern,\n    max,\n    min,\n    step,\n    maxLength,\n    minLength,\n    ...remainingProps\n  } = props;\n\n  // assures that always an empty string is set\n  const inputValue = value ?? '';\n\n  const { disabled, required, id, ariaDisabled, readOnly } =\n    useSyncedFormControlProps({\n      propDisabled,\n      propRequired,\n      propId,\n      propAriaDisabled: ariaDisabledProp,\n      propReadOnly,\n    });\n\n  const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n  const [hasFormControlError, hint] = useFormControlState(controlState);\n  // _useInputHint will be replaced with new validation concept. APPDEV-8298\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  const { inputProps, hintProps } = useInputHint({\n    hint,\n    hasError: hasFormControlError,\n  });\n\n  const { state, dispatch } = useFormFieldMessagesContext();\n\n  const hasError = hasFormControlError || state.showError;\n\n  const { isAutoFilled, onAnimationStart } = useAutofillEvent();\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n\n  const hasOnClear = onClear !== undefined;\n  const showClearButton = hasOnClear && inputValue !== '';\n\n  const { focusProps, focusClassName } = useFocusRing({\n    color: hasError && !(disabled || ariaDisabled) ? 'critical' : 'neutral',\n    ignoreModality: true,\n    disabled,\n  });\n\n  const { onChange, onBlur, onInvalid, ariaProps } = useFormFieldValidation(\n    inputRef,\n    {\n      required,\n      pattern,\n      max,\n      min,\n      step,\n      maxLength,\n      minLength,\n      type,\n      value: inputValue as string,\n    },\n    {\n      'aria-label': ariaLabelProp,\n      'aria-labelledby': ariaLabelledByProp,\n      'aria-describedby': ariaDescribedByProp,\n      'aria-details': ariaDetailsProp,\n    },\n  );\n  const eventListener = { onChange, onBlur, onInvalid };\n\n  useImperativeHandle(\n    forwardedRef,\n    (): FormControlRef<HTMLDivElement> => ({\n      element: wrapperRef.current,\n      inputRef: inputRef.current,\n      focus() {\n        inputRef.current?.focus();\n      },\n      validate() {\n        inputRef.current?.checkValidity();\n        dispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      },\n    }),\n    [dispatch],\n  );\n\n  const context = useMemo(\n    () => ({ variant, hasError, disabled, ariaDisabled }),\n    [variant, hasError, disabled, ariaDisabled],\n  );\n  const slots = useMemo(() => getSlots(children), [children]);\n  const hasInnerPrefix = slots.prefix.rest.length > 0;\n  const hasInnerSuffix = slots.suffix.rest.length > 0;\n\n  const {\n    matchedProps: dataAttributesProps,\n    remainingProps: remainingInputProps,\n  } = useSplitProps(remainingProps, [(key: string) => key.startsWith('data-')]);\n\n  return (\n    <Flex\n      gap={4}\n      flexDirection=\"column\"\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      ref={wrapperRef}\n      className={consumerClassName}\n      style={consumerStyle}\n      {...dataAttributesProps}\n    >\n      <InputGroup\n        style={{\n          gridAutoColumns: `${'auto '.repeat(\n            slots.prefix.buttons.length,\n          )}1fr${' auto'.repeat(slots.suffix.buttons.length)}`,\n        }}\n        className={clsx(styles.wrapper, styles.variant[variant], {\n          [styles.hasError]: hasError,\n          [styles.disabled]: disabledOrAriaDisabled,\n          [styles.readOnly]: readOnly,\n        })}\n      >\n        <BaseInputContext.Provider value={context}>\n          {slots.prefix.buttons}\n          <div\n            className={clsx(\n              styles.container,\n              inputGroupClassName,\n              focusClassName,\n              {\n                [styles.isAutoFilled]: isAutoFilled,\n                [`${styles.containerPadding.none}`]:\n                  hasOnClear && hasInnerPrefix,\n                [`${styles.containerPadding.rightNone}`]:\n                  hasOnClear && !hasInnerPrefix,\n                [`${styles.containerPadding.leftUnset}`]: hasInnerPrefix,\n                [`${styles.containerPadding.rightUnset}`]: hasInnerSuffix,\n              },\n            )}\n            onClick={() => inputRef.current?.focus()} // clicking on the icons should focus the input\n          >\n            {hasInnerPrefix && (\n              <BaseInputPrefix {...slots.prefix.props}>\n                {slots.prefix.rest}\n              </BaseInputPrefix>\n            )}\n\n            <input\n              id={id}\n              ref={inputRef}\n              required={required}\n              disabled={!!disabled}\n              aria-disabled={ariaDisabled}\n              onAnimationStart={onAnimationStart}\n              readOnly={readOnly}\n              className={styles.input}\n              placeholder={placeholder}\n              type={type}\n              value={inputValue}\n              pattern={pattern}\n              max={max}\n              min={min}\n              step={step}\n              maxLength={maxLength}\n              minLength={minLength}\n              {..._mergeProps(\n                remainingInputProps,\n                focusProps,\n                controlState\n                  ? { 'aria-label': ariaLabelProp, ...inputProps }\n                  : ariaProps,\n                !controlState ? eventListener : {}, // escape hatch to not interfere with the old implementation\n              )}\n            />\n            {hasInnerSuffix && (\n              <BaseInputSuffix {...slots.suffix.props}>\n                {slots.suffix.rest}\n              </BaseInputSuffix>\n            )}\n            {!readOnly && (\n              <>\n                {hasInnerSuffix && showClearButton && (\n                  <Divider orientation=\"vertical\" className={styles.divider} />\n                )}\n                {showClearButton && (\n                  <Button\n                    onClick={onClear}\n                    className={styles.clearIconButton}\n                    color={hasError ? 'critical' : 'neutral'}\n                    disabled={disabledOrAriaDisabled}\n                    data-dt-name=\"ClearAll\"\n                  >\n                    <XmarkIcon />\n                  </Button>\n                )}\n              </>\n            )}\n          </div>\n          {slots.suffix.buttons}\n        </BaseInputContext.Provider>\n      </InputGroup>\n      {controlState && hint && (\n        <BaseItem\n          variant={hasError ? 'error' : 'hint'}\n          disabled={disabledOrAriaDisabled}\n          {...hintProps}\n        >\n          {hint}\n        </BaseItem>\n      )}\n    </Flex>\n  );\n});\n\n/**\n * Base component used internally for our input components.\n * @internal\n */\nexport const BaseInput = Object.assign(BaseInputRoot, {\n  Prefix: BaseInputPrefix,\n  Suffix: BaseInputSuffix,\n  Button: BaseInputButton,\n});\n\n(BaseInput as typeof BaseInput & { displayName: string }).displayName =\n  'BaseInput';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  Children,\n  forwardRef,\n  isValidElement,\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport type { BaseInputProps } from './base-input.types.js';\nimport * as styles from './BaseInput.sty.js';\nimport { BaseInputButton } from './BaseInputButton.js';\nimport {\n  BaseInputPrefix,\n  BaseInputReservedSuffix,\n  BaseInputSuffix,\n} from './BaseInputContent.js';\nimport { BaseInputContext } from './contexts/BaseInputContext.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport { useFormControlState } from '../../core/hooks/useFormControlState.js';\nimport { useSplitProps } from '../../core/hooks/useSplitProps.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport { Divider } from '../../layouts/divider/Divider.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { inputGroupClassName } from '../../layouts/input-group/InputGroup.sty.js';\nimport { InputGroup } from '../../layouts/input-group/InputGroup.js';\nimport { InternalBaseItem as BaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useFormFieldValidation } from '../forms-core/hooks/useFormFieldValidation.js';\nimport { useSyncedFormControlProps } from '../forms-core/hooks/useSyncedFormControlProps.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { useAutofillEvent } from '../hooks/useAutofillEvent.js';\nimport { useInputHint } from '../hooks/useInputHint.js';\nimport type { FormControlRef } from '../shared-types.js';\nimport { getPlaceholderMessage } from './baseInputMessages.js';\nimport { ClearButton } from './ClearButton.js';\n\ntype SlotContent = {\n  buttons: ReactElement[];\n  rest: ReactNode[];\n  props: Record<string, unknown>;\n};\n\nfunction getSlots(children: ReactNode) {\n  const validSlots = Children.toArray(children).filter(\n    isValidElement<PropsWithChildren>,\n  );\n\n  let prefix: SlotContent = { buttons: [], rest: [], props: {} };\n  let suffix: SlotContent = { buttons: [], rest: [], props: {} };\n  let reservedSuffix: SlotContent = { buttons: [], rest: [], props: {} };\n\n  for (const slot of validSlots) {\n    const buttons: SlotContent['buttons'] = [];\n    const rest: SlotContent['rest'] = [];\n\n    const slotChildren = Children.toArray(slot.props.children);\n\n    for (const child of slotChildren) {\n      if (isSlot(child, BaseInputButton)) {\n        buttons.push(child);\n      } else {\n        rest.push(child);\n      }\n    }\n\n    const { children: _children, ...slotProps } = slot.props;\n\n    if (slot.type === BaseInputPrefix) {\n      prefix = { buttons, rest, props: slotProps };\n    }\n    if (slot.type === BaseInputSuffix) {\n      suffix = { buttons, rest, props: slotProps };\n    }\n    if (slot.type === BaseInputReservedSuffix) {\n      reservedSuffix = { buttons, rest, props: slotProps };\n    }\n  }\n\n  return { prefix, suffix, reservedSuffix };\n}\n\nconst BaseInputRoot = /* @__PURE__ */ forwardRef<\n  FormControlRef<HTMLDivElement>,\n  BaseInputProps\n>((props, forwardedRef) => {\n  const intl = useIntl();\n\n  const defaultPlaceholder = intl.formatMessage(\n    getPlaceholderMessage(props.type),\n  );\n\n  const {\n    children,\n    id: propId,\n    disabled: propDisabled,\n    required: propRequired,\n    'aria-disabled': ariaDisabledProp,\n    variant = 'default',\n    controlState,\n    readOnly: propReadOnly,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-label': ariaLabelProp,\n    'aria-labelledby': ariaLabelledByProp,\n    'aria-describedby': ariaDescribedByProp,\n    'aria-details': ariaDetailsProp,\n    className: consumerClassName,\n    style: consumerStyle,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    onClear,\n    type,\n    placeholder = defaultPlaceholder,\n    value,\n    pattern,\n    max,\n    min,\n    step,\n    maxLength,\n    minLength,\n    ...remainingProps\n  } = props;\n\n  // assures that always an empty string is set\n  const inputValue = value ?? '';\n\n  const { disabled, required, id, ariaDisabled, readOnly } =\n    useSyncedFormControlProps({\n      propDisabled,\n      propRequired,\n      propId,\n      propAriaDisabled: ariaDisabledProp,\n      propReadOnly,\n    });\n\n  const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n  const [hasFormControlError, hint] = useFormControlState(controlState);\n  // _useInputHint will be replaced with new validation concept. APPDEV-8298\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  const { inputProps, hintProps } = useInputHint({\n    hint,\n    hasError: hasFormControlError,\n  });\n\n  const { state, dispatch } = useFormFieldMessagesContext();\n\n  const hasError = hasFormControlError || state.showError;\n\n  const { isAutoFilled, onAnimationStart } = useAutofillEvent();\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n\n  const { focusProps, focusClassName } = useFocusRing({\n    color: hasError && !(disabled || ariaDisabled) ? 'critical' : 'neutral',\n    ignoreModality: true,\n    disabled,\n  });\n\n  const { onChange, onBlur, onInvalid, ariaProps } = useFormFieldValidation(\n    inputRef,\n    {\n      required,\n      pattern,\n      max,\n      min,\n      step,\n      maxLength,\n      minLength,\n      type,\n      value: inputValue as string,\n    },\n    {\n      'aria-label': ariaLabelProp,\n      'aria-labelledby': ariaLabelledByProp,\n      'aria-describedby': ariaDescribedByProp,\n      'aria-details': ariaDetailsProp,\n    },\n  );\n  const eventListener = { onChange, onBlur, onInvalid };\n\n  useImperativeHandle(\n    forwardedRef,\n    (): FormControlRef<HTMLDivElement> => ({\n      element: wrapperRef.current,\n      inputRef: inputRef.current,\n      focus() {\n        inputRef.current?.focus();\n      },\n      validate() {\n        inputRef.current?.checkValidity();\n        dispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      },\n    }),\n    [dispatch],\n  );\n\n  const context = useMemo(\n    () => ({ variant, hasError, disabled, ariaDisabled }),\n    [variant, hasError, disabled, ariaDisabled],\n  );\n  const slots = useMemo(() => getSlots(children), [children]);\n  const hasInnerPrefix = slots.prefix.rest.length > 0;\n  const hasInnerSuffix = slots.suffix.rest.length > 0;\n  const hasInnerReservedSuffix = slots.reservedSuffix.rest.length > 0;\n  const hasOnClear = onClear !== undefined;\n  const showClearButton =\n    hasOnClear && inputValue !== '' && !hasInnerReservedSuffix;\n\n  const {\n    matchedProps: dataAttributesProps,\n    remainingProps: remainingInputProps,\n  } = useSplitProps(remainingProps, [(key: string) => key.startsWith('data-')]);\n\n  return (\n    <Flex\n      gap={4}\n      flexDirection=\"column\"\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      ref={wrapperRef}\n      className={consumerClassName}\n      style={consumerStyle}\n      {...dataAttributesProps}\n    >\n      <InputGroup\n        style={{\n          gridAutoColumns: `${'auto '.repeat(\n            slots.prefix.buttons.length,\n          )}1fr${' auto'.repeat(slots.suffix.buttons.length)}`,\n        }}\n        className={clsx(styles.wrapper, styles.variant[variant], {\n          [styles.hasError]: hasError,\n          [styles.disabled]: disabledOrAriaDisabled,\n          [styles.readOnly]: readOnly,\n        })}\n      >\n        <BaseInputContext.Provider value={context}>\n          {slots.prefix.buttons}\n          <div\n            className={clsx(\n              styles.container,\n              inputGroupClassName,\n              focusClassName,\n              {\n                [styles.isAutoFilled]: isAutoFilled,\n                [`${styles.containerPadding.none}`]:\n                  hasInnerReservedSuffix && hasInnerPrefix,\n                [`${styles.containerPadding.rightNone}`]:\n                  hasInnerReservedSuffix && !hasInnerPrefix,\n                [`${styles.containerPadding.leftUnset}`]: hasInnerPrefix,\n                [`${styles.containerPadding.rightUnset}`]: hasInnerSuffix,\n              },\n            )}\n            onClick={() => inputRef.current?.focus()} // clicking on the icons should focus the input\n          >\n            {hasInnerPrefix && (\n              <BaseInputPrefix {...slots.prefix.props}>\n                {slots.prefix.rest}\n              </BaseInputPrefix>\n            )}\n\n            <input\n              id={id}\n              ref={inputRef}\n              required={required}\n              disabled={!!disabled}\n              aria-disabled={ariaDisabled}\n              onAnimationStart={onAnimationStart}\n              readOnly={readOnly}\n              className={styles.input}\n              placeholder={placeholder}\n              type={type}\n              value={inputValue}\n              pattern={pattern}\n              max={max}\n              min={min}\n              step={step}\n              maxLength={maxLength}\n              minLength={minLength}\n              {..._mergeProps(\n                remainingInputProps,\n                focusProps,\n                controlState\n                  ? { 'aria-label': ariaLabelProp, ...inputProps }\n                  : ariaProps,\n                !controlState ? eventListener : {}, // escape hatch to not interfere with the old implementation\n              )}\n            />\n            {hasInnerSuffix && (\n              <BaseInputSuffix {...slots.suffix.props}>\n                {slots.suffix.rest}\n              </BaseInputSuffix>\n            )}\n            {!readOnly && (\n              <>\n                {hasInnerReservedSuffix ? (\n                  <>\n                    {hasInnerSuffix && (\n                      <Divider\n                        orientation=\"vertical\"\n                        className={styles.divider}\n                      />\n                    )}\n                    {slots.reservedSuffix.rest}\n                  </>\n                ) : (\n                  <>\n                    {hasInnerSuffix && showClearButton && (\n                      <Divider\n                        orientation=\"vertical\"\n                        className={styles.divider}\n                      />\n                    )}\n                    {showClearButton && <ClearButton onClear={onClear} />}\n                  </>\n                )}\n              </>\n            )}\n          </div>\n          {slots.suffix.buttons}\n        </BaseInputContext.Provider>\n      </InputGroup>\n      {controlState && hint && (\n        <BaseItem\n          variant={hasError ? 'error' : 'hint'}\n          disabled={disabledOrAriaDisabled}\n          {...hintProps}\n        >\n          {hint}\n        </BaseItem>\n      )}\n    </Flex>\n  );\n});\n\n/**\n * Base component used internally for our input components.\n * @internal\n */\nexport const BaseInput = Object.assign(BaseInputRoot, {\n  Prefix: BaseInputPrefix,\n  Suffix: BaseInputSuffix,\n  ReservedSuffix: BaseInputReservedSuffix,\n  Button: BaseInputButton,\n});\n\n(BaseInput as typeof BaseInput & { displayName: string }).displayName =\n  'BaseInput';\n"],
+  "mappings": "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",
   "names": []
 }