@dynatrace/strato-components 3.5.2 → 3.6.0

package/forms/_base-input/BaseInput.css

@@ -1,27 +1,27 @@
-._1a8lqy90-3-5-2 {
-  --_bx32h5-3-5-2: 1;
+._1a8lqy90-3-6-0 {
+  --_bx32h5-3-6-0: 1;
 }
-._1a8lqy91-3-5-2 {
-  --_bx32h5-3-5-2: 3;
+._1a8lqy91-3-6-0 {
+  --_bx32h5-3-6-0: 3;
 }
-._1a8lqy91-3-5-2:hover {
-  --_bx32h5-3-5-2: 4;
+._1a8lqy91-3-6-0:hover {
+  --_bx32h5-3-6-0: 4;
 }
-._1a8lqy91-3-5-2:active {
-  --_bx32h5-3-5-2: 4;
+._1a8lqy91-3-6-0:active {
+  --_bx32h5-3-6-0: 4;
 }
-._1a8lqy92-3-5-2 {
-  --_bx32h5-3-5-2: 0;
+._1a8lqy92-3-6-0 {
+  --_bx32h5-3-6-0: 0;
 }
-._1a8lqy92-3-5-2:hover {
-  --_bx32h5-3-5-2: 0;
+._1a8lqy92-3-6-0:hover {
+  --_bx32h5-3-6-0: 0;
 }
-._1a8lqy92-3-5-2:active {
-  --_bx32h5-3-5-2: 0;
+._1a8lqy92-3-6-0:active {
+  --_bx32h5-3-6-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-6-0 {
+  --_1a8lqy96-3-6-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+  --_yfwka30-3-6-0: var(--_1a8lqy96-3-6-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-6-0);
+  box-shadow: var(--_1a8lqy97-3-6-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-6-0:hover {
+  --_1a8lqy96-3-6-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-6-0:active {
+  --_1a8lqy96-3-6-0: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._1a8lqy91-3-5-2 ._1a8lqy98-3-5-2 {
+._1a8lqy91-3-6-0 ._1a8lqy98-3-6-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-6-0:not(._1a8lqy92-3-6-0) ._1a8lqy98-3-6-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-6-0:not(._1a8lqy92-3-6-0) ._1a8lqy98-3-6-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-6-0 ._1a8lqy98-3-6-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-6-0)) ._1a8lqy93-3-6-0._1a8lqy91-3-6-0 ._1a8lqy98-3-6-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-6-0 ._1a8lqy98-3-6-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-6-0:not(:hover) ._1a8lqy98-3-6-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-6-0:is(._1a8lqy92-3-6-0, ._1a8lqy93-3-6-0) ._1a8lqy98-3-6-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-6-0 ._1a8lqy94-3-6-0 ._1a8lqy98-3-6-0,
+    ._1jgl8s50-3-6-0 ._1a8lqy94-3-6-0 ._1a8lqy98-3-6-0:is(:hover, :active),
+    ._1jgl8s50-3-6-0 ._1a8lqy95-3-6-0:not(._1a8lqy92-3-6-0, ._1a8lqy93-3-6-0) ._1a8lqy98-3-6-0:is(:hover, :active),
+    ._1jgl8s50-3-6-0 ._1a8lqy95-3-6-0:not(._1a8lqy92-3-6-0, ._1a8lqy93-3-6-0):is(:hover, :active) ._1a8lqy98-3-6-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-6-0 ._1a8lqy94-3-6-0:not(._1a8lqy92-3-6-0, ._1a8lqy93-3-6-0) ._1a8lqy98-3-6-0,
+    ._1jgl8s50-3-6-0 :where(._1a8lqy95-3-6-0:not(._1a8lqy92-3-6-0, ._1a8lqy93-3-6-0)):hover ._1a8lqy98-3-6-0 {
+  --_1a8lqy97-3-6-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-6-0 :is(._1a8lqy94-3-6-0, ._1a8lqy95-3-6-0):not(._1a8lqy92-3-6-0, ._1a8lqy93-3-6-0) ._1a8lqy98-3-6-0:hover {
+  --_1a8lqy97-3-6-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-6-0 :is(._1a8lqy94-3-6-0, ._1a8lqy95-3-6-0):not(._1a8lqy92-3-6-0, ._1a8lqy93-3-6-0) ._1a8lqy98-3-6-0:active {
+  --_1a8lqy97-3-6-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-6-0 :where(._1a8lqy94-3-6-0)._1a8lqy91-3-6-0:not(._1a8lqy92-3-6-0) ._1a8lqy98-3-6-0,
+      ._1jgl8s50-3-6-0 :where(._1a8lqy95-3-6-0)._1a8lqy91-3-6-0:not(._1a8lqy92-3-6-0, ._1a8lqy93-3-6-0):hover ._1a8lqy98-3-6-0 {
+  --_1a8lqy97-3-6-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-6-0 ._1a8lqy91-3-6-0:not(._1a8lqy92-3-6-0, ._1a8lqy93-3-6-0) ._1a8lqy98-3-6-0:hover {
+  --_1a8lqy97-3-6-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-6-0 ._1a8lqy91-3-6-0:not(._1a8lqy92-3-6-0, ._1a8lqy93-3-6-0) ._1a8lqy98-3-6-0:active {
+  --_1a8lqy97-3-6-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-6-0 ._1a8lqy94-3-6-0:is(._1a8lqy92-3-6-0, ._1a8lqy93-3-6-0) ._1a8lqy98-3-6-0 {
+  --_1a8lqy97-3-6-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-6-0 ._1a8lqy94-3-6-0._1a8lqy91-3-6-0:is(._1a8lqy92-3-6-0, ._1a8lqy93-3-6-0) ._1a8lqy98-3-6-0 {
+  --_1a8lqy97-3-6-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-6-0 {
   padding-right: 0;
   padding-left: 0;
 }
-._1a8lqy9a-3-5-2 {
+._1a8lqy9a-3-6-0 {
   padding-right: 0;
 }
-._1a8lqy9b-3-5-2 {
+._1a8lqy9b-3-6-0 {
   padding-right: unset;
 }
-._1a8lqy9c-3-5-2 {
+._1a8lqy9c-3-6-0 {
   padding-left: unset;
 }
-._1a8lqy9d-3-5-2 {
+._1a8lqy9d-3-6-0 {
   display: block;
   text-overflow: ellipsis;
   appearance: none;
@@ -130,134 +130,134 @@
   min-width: 0;
   color: inherit;
 }
-._1a8lqy9d-3-5-2:focus {
+._1a8lqy9d-3-6-0:focus {
   outline: none;
 }
-._1a8lqy9d-3-5-2::placeholder {
+._1a8lqy9d-3-6-0::placeholder {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1a8lqy9d-3-5-2::-webkit-search-cancel-button {
+._1a8lqy9d-3-6-0::-webkit-search-cancel-button {
   -webkit-appearance: none;
 }
-._1a8lqy9d-3-5-2::-ms-reveal {
+._1a8lqy9d-3-6-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-6-0 ._1a8lqy9d-3-6-0:-webkit-autofill:is(:not(:hover, :focus), :hover, :focus), ._1a8lqy91-3-6-0 ._1a8lqy9d-3-6-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-6-0 ._1a8lqy9d-3-6-0:-webkit-autofill:is(:not(:hover, :focus), :hover, :focus), ._1a8lqy92-3-6-0 ._1a8lqy9d-3-6-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-6-0 ._1a8lqy9d-3-6-0 {
   cursor: not-allowed;
 }
-._1a8lqy93-3-5-2 ._1a8lqy9d-3-5-2 {
+._1a8lqy93-3-6-0 ._1a8lqy9d-3-6-0 {
   cursor: default;
 }
-button ._1a8lqy9d-3-5-2 {
+button ._1a8lqy9d-3-6-0 {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._1a8lqy9e-3-5-2 {
+._1a8lqy9e-3-6-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-6-0:is(button._1a8lqy9e-3-6-0._1a8lqy9e-3-6-0) {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._1a8lqy9f-3-5-2 {
+._1a8lqy9f-3-6-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-6-0:not(._1a8lqy92-3-6-0) ._1a8lqy9f-3-6-0 {
   background-color: var(--dt-colors-border-critical-default, #f6d6d5);
 }
-._1a8lqy94-3-5-2._1a8lqy93-3-5-2 button:not(:hover, :active) {
+._1a8lqy94-3-6-0._1a8lqy93-3-6-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-6-0._1a8lqy93-3-6-0._1a8lqy91-3-6-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-6-0 ._1a8lqy94-3-6-0._1a8lqy93-3-6-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-6-0 ._1a8lqy94-3-6-0._1a8lqy93-3-6-0 button {
+  --_bx32h4-3-6-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-6-0:not(._1a8lqy92-3-6-0, ._1a8lqy93-3-6-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-6-0:not(._1a8lqy92-3-6-0, ._1a8lqy93-3-6-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-6-0:not(._1a8lqy92-3-6-0, ._1a8lqy93-3-6-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-6-0:not(._1a8lqy92-3-6-0, ._1a8lqy93-3-6-0)._1a8lqy91-3-6-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-6-0:not(._1a8lqy92-3-6-0, ._1a8lqy93-3-6-0)._1a8lqy91-3-6-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-6-0:not(._1a8lqy92-3-6-0, ._1a8lqy93-3-6-0)._1a8lqy91-3-6-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-6-0._1a8lqy93-3-6-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-6-0:not(._1a8lqy92-3-6-0, ._1a8lqy93-3-6-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-6-0 ._1a8lqy95-3-6-0:not(._1a8lqy92-3-6-0, ._1a8lqy93-3-6-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-6-0 ._1a8lqy95-3-6-0:not(._1a8lqy92-3-6-0, ._1a8lqy93-3-6-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-6-0 ._1a8lqy95-3-6-0:not(._1a8lqy92-3-6-0, ._1a8lqy93-3-6-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-6-0 ._1a8lqy95-3-6-0:not(._1a8lqy92-3-6-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-6-0 ._1a8lqy95-3-6-0:not(._1a8lqy92-3-6-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-6-0 ._1a8lqy95-3-6-0:not(._1a8lqy92-3-6-0, ._1a8lqy93-3-6-0)._1a8lqy91-3-6-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-6-0 ._1a8lqy95-3-6-0:not(._1a8lqy92-3-6-0, ._1a8lqy93-3-6-0)._1a8lqy91-3-6-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-6-0 ._1a8lqy95-3-6-0:not(._1a8lqy92-3-6-0, ._1a8lqy93-3-6-0)._1a8lqy91-3-6-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-6-0 ._1a8lqy95-3-6-0:not(._1a8lqy92-3-6-0)._1a8lqy91-3-6-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-6-0 ._1a8lqy95-3-6-0:not(._1a8lqy92-3-6-0)._1a8lqy91-3-6-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-6-0:has(._1a8lqy9e-3-6-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-6-0)) ._1a8lqy91-3-6-0 ._1a8lqy98-3-6-0:has(._1a8lqy9e-3-6-0:hover):not(._1a8lqy92-3-6-0) {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1a8lqy98-3-5-2:hover ._1a8lqy9f-3-5-2 {
+._1a8lqy98-3-6-0:hover ._1a8lqy9f-3-6-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-6-0 ._1a8lqy98-3-6-0:hover ._1a8lqy9f-3-6-0 {
   background-color: var(--dt-colors-border-critical-default-active, #f3bebd);
 }
-._1a8lqy98-3-5-2._1a8lqy9g-3-5-2 div svg {
+._1a8lqy98-3-6-0._1a8lqy9g-3-6-0 div svg {
   fill: currentcolor;
 }

package/forms/_base-input/BaseInput.d.ts

@@ -8,5 +8,6 @@ import type { FormControlRef } from '../shared-types.js';
 export declare const BaseInput: ((props: BaseInputProps & import("react").RefAttributes<FormControlRef<HTMLDivElement>>) => import("react").ReactElement | null) & {
     Prefix: (props: import("./BaseInputContent.js").BaseInputContentProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
     Suffix: (props: import("./BaseInputContent.js").BaseInputContentProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
+    ReservedSuffix: (props: import("./BaseInputContent.js").BaseInputContentProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
     Button: (props: import("./BaseInputButton.js").BaseInputButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement | null;
 };

package/forms/_base-input/BaseInput.js

@@ -34,12 +34,10 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_clsx = __toESM(require("clsx"));
 var import_react = require("react");
 var import_react_intl = require("react-intl");
-var import_strato_icons = require("@dynatrace/strato-icons");
 var styles = __toESM(require("./BaseInput.sty.js"));
 var import_BaseInputButton = require("./BaseInputButton.js");
 var import_BaseInputContent = require("./BaseInputContent.js");
 var import_BaseInputContext = require("./contexts/BaseInputContext.js");
-var import_Button = require("../../buttons/button/Button.js");
 var import_useFormControlState = require("../../core/hooks/useFormControlState.js");
 var import_useSplitProps = require("../../core/hooks/useSplitProps.js");
 var import_useFocusRing = require("../../core/styles/useFocusRing.js");
@@ -57,12 +55,14 @@ var import_formfield_messages_state_reducer = require("../forms-core/state/formf
 var import_useAutofillEvent = require("../hooks/useAutofillEvent.js");
 var import_useInputHint = require("../hooks/useInputHint.js");
 var import_baseInputMessages = require("./baseInputMessages.js");
+var import_ClearButton = require("./ClearButton.js");
 function getSlots(children) {
   const validSlots = import_react.Children.toArray(children).filter(
     import_react.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 = [];
@@ -81,8 +81,11 @@ function getSlots(children) {
     if (slot.type === import_BaseInputContent.BaseInputSuffix) {
       suffix = { buttons, rest, props: slotProps };
     }
+    if (slot.type === import_BaseInputContent.BaseInputReservedSuffix) {
+      reservedSuffix = { buttons, rest, props: slotProps };
+    }
   }
-  return { prefix, suffix };
+  return { prefix, suffix, reservedSuffix };
 }
 const BaseInputRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRef) => {
   const intl = (0, import_react_intl.useIntl)();
@@ -107,6 +110,7 @@ const BaseInputRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwa
     "aria-details": ariaDetailsProp,
     className: consumerClassName,
     style: consumerStyle,
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
     onClear,
     type,
     placeholder = defaultPlaceholder,
@@ -138,8 +142,6 @@ const BaseInputRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwa
   const { isAutoFilled, onAnimationStart } = (0, import_useAutofillEvent.useAutofillEvent)();
   const inputRef = (0, import_react.useRef)(null);
   const wrapperRef = (0, import_react.useRef)(null);
-  const hasOnClear = onClear !== void 0;
-  const showClearButton = hasOnClear && inputValue !== "";
   const { focusProps, focusClassName } = (0, import_useFocusRing.useFocusRing)({
     color: hasError && !(disabled || ariaDisabled) ? "critical" : "neutral",
     ignoreModality: true,
@@ -191,6 +193,9 @@ const BaseInputRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwa
   const slots = (0, import_react.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
@@ -232,8 +237,8 @@ const BaseInputRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwa
                     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
                     }
@@ -271,20 +276,25 @@ const BaseInputRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwa
                       }
                     ),
                     hasInnerSuffix && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_BaseInputContent.BaseInputSuffix, { ...slots.suffix.props, children: slots.suffix.rest }),
-                    !readOnly && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-                      hasInnerSuffix && showClearButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Divider.Divider, { orientation: "vertical", className: styles.divider }),
-                      showClearButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                        import_Button.Button,
+                    !readOnly && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: hasInnerReservedSuffix ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                      hasInnerSuffix && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        import_Divider.Divider,
+                        {
+                          orientation: "vertical",
+                          className: styles.divider
+                        }
+                      ),
+                      slots.reservedSuffix.rest
+                    ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                      hasInnerSuffix && showClearButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        import_Divider.Divider,
                         {
-                          onClick: onClear,
-                          className: styles.clearIconButton,
-                          color: hasError ? "critical" : "neutral",
-                          disabled: disabledOrAriaDisabled,
-                          "data-dt-name": "ClearAll",
-                          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.XmarkIcon, {})
+                          orientation: "vertical",
+                          className: styles.divider
                         }
-                      )
-                    ] })
+                      ),
+                      showClearButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ClearButton.ClearButton, { onClear })
+                    ] }) })
                   ]
                 }
               ),
@@ -308,6 +318,7 @@ const BaseInputRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwa
 const BaseInput = Object.assign(BaseInputRoot, {
   Prefix: import_BaseInputContent.BaseInputPrefix,
   Suffix: import_BaseInputContent.BaseInputSuffix,
+  ReservedSuffix: import_BaseInputContent.BaseInputReservedSuffix,
   Button: import_BaseInputButton.BaseInputButton
 });
 BaseInput.displayName = "BaseInput";

package/forms/_base-input/BaseInput.sty.d.ts

@@ -6,6 +6,6 @@ export declare const variant: Record<"default" | "minimal", string>;
 export declare const container: string;
 export declare const containerPadding: Record<"none" | "rightNone" | "rightUnset" | "leftUnset", string>;
 export declare const input: string;
-export declare const clearIconButton: string;
+export declare const reservedSuffixButton: string;
 export declare const divider: string;
 export declare const isAutoFilled: string;

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

@@ -17,7 +17,6 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var BaseInput_css_exports = {};
 __export(BaseInput_css_exports, {
-  clearIconButton: () => clearIconButton,
   container: () => container,
   containerPadding: () => containerPadding,
   disabled: () => disabled,
@@ -26,6 +25,7 @@ __export(BaseInput_css_exports, {
   input: () => input,
   isAutoFilled: () => isAutoFilled,
   readOnly: () => readOnly,
+  reservedSuffixButton: () => reservedSuffixButton,
   variant: () => variant,
   wrapper: () => wrapper
 });
@@ -35,14 +35,14 @@ var import_field_css_ts_vanilla = require("../../styles/field.css");
 var import_textStyle_css_ts_vanilla = require("../../styles/textStyle.css");
 var import_useAutofillEvent_css_ts_vanilla = require("../hooks/useAutofillEvent.css");
 var import_BaseInput_css_ts_vanilla = require("./BaseInput.css");
-var clearIconButton = "_1a8lqy9e-3-5-2";
-var container = "_1a8lqy98-3-5-2";
-var containerPadding = { none: "_1a8lqy99-3-5-2", rightNone: "_1a8lqy9a-3-5-2", rightUnset: "_1a8lqy9b-3-5-2", leftUnset: "_1a8lqy9c-3-5-2" };
-var disabled = "_1a8lqy92-3-5-2";
-var divider = "_1a8lqy9f-3-5-2";
-var hasError = "_1a8lqy91-3-5-2";
-var input = "_1a8lqy9d-3-5-2 _yfwka33-3-5-2 _da9a8v0-3-5-2 _da9a8v2-3-5-2 _da9a8v3-3-5-2 _da9a8vb-3-5-2";
-var isAutoFilled = "_1a8lqy9g-3-5-2";
-var readOnly = "_1a8lqy93-3-5-2";
-var variant = { "default": "_1a8lqy94-3-5-2", minimal: "_1a8lqy95-3-5-2" };
-var wrapper = "_1a8lqy90-3-5-2";
+var container = "_1a8lqy98-3-6-0";
+var containerPadding = { none: "_1a8lqy99-3-6-0", rightNone: "_1a8lqy9a-3-6-0", rightUnset: "_1a8lqy9b-3-6-0", leftUnset: "_1a8lqy9c-3-6-0" };
+var disabled = "_1a8lqy92-3-6-0";
+var divider = "_1a8lqy9f-3-6-0";
+var hasError = "_1a8lqy91-3-6-0";
+var input = "_1a8lqy9d-3-6-0 _yfwka33-3-6-0 _da9a8v0-3-6-0 _da9a8v2-3-6-0 _da9a8v3-3-6-0 _da9a8vb-3-6-0";
+var isAutoFilled = "_1a8lqy9g-3-6-0";
+var readOnly = "_1a8lqy93-3-6-0";
+var reservedSuffixButton = "_1a8lqy9e-3-6-0";
+var variant = { "default": "_1a8lqy94-3-6-0", minimal: "_1a8lqy95-3-6-0" };
+var wrapper = "_1a8lqy90-3-6-0";

package/forms/_base-input/BaseInputContent.css

@@ -1,27 +1,27 @@
-._o6rxr70-3-5-2 {
+._o6rxr70-3-6-0 {
   white-space: nowrap;
   overflow: hidden;
   color: var(--dt-colors-icon-neutral-subdued, #595a7d);
 }
-._1a8lqy91-3-5-2 ._o6rxr70-3-5-2 {
+._1a8lqy91-3-6-0 ._o6rxr70-3-6-0 {
   color: var(--dt-colors-icon-critical-default, #bb0731);
 }
-._1a8lqy92-3-5-2 ._o6rxr70-3-5-2 {
+._1a8lqy92-3-6-0 ._o6rxr70-3-6-0 {
   color: var(--dt-colors-icon-neutral-disabled, #595a7d80);
 }
-._o6rxr70-3-5-2:has(svg):not(:has(span)) {
+._o6rxr70-3-6-0:has(svg):not(:has(span)) {
   overflow: inherit;
 }
-._o6rxr70-3-5-2 > * {
+._o6rxr70-3-6-0 > * {
   overflow: hidden;
   text-overflow: ellipsis;
   display: inline-block;
 }
-._o6rxr70-3-5-2 svg {
+._o6rxr70-3-6-0 svg {
   box-sizing: content-box;
   align-items: stretch;
   flex-shrink: 0;
 }
-._o6rxr70-3-5-2 svg:first-of-type {
+._o6rxr70-3-6-0 svg:first-of-type {
   align-self: center;
 }

package/forms/_base-input/BaseInputContent.d.ts

@@ -18,3 +18,8 @@ export declare const BaseInputPrefix: (props: BaseInputContentProps & import("re
  * @internal
  */
 export declare const BaseInputSuffix: (props: BaseInputContentProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
+/**
+ * Component used for adding elements to the reserved suffix slot.
+ * @internal
+ */
+export declare const BaseInputReservedSuffix: (props: BaseInputContentProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;

package/forms/_base-input/BaseInputContent.js

@@ -28,6 +28,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var BaseInputContent_exports = {};
 __export(BaseInputContent_exports, {
   BaseInputPrefix: () => BaseInputPrefix,
+  BaseInputReservedSuffix: () => BaseInputReservedSuffix,
   BaseInputSuffix: () => BaseInputSuffix
 });
 module.exports = __toCommonJS(BaseInputContent_exports);
@@ -58,5 +59,6 @@ const BaseInputContent = /* @__PURE__ */ (0, import_react.forwardRef)((props, fo
 });
 const BaseInputPrefix = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRef) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseInputContent, { ref: forwardedRef, ...props }));
 const BaseInputSuffix = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRef) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseInputContent, { ref: forwardedRef, ...props }));
+const BaseInputReservedSuffix = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRef) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseInputContent, { ref: forwardedRef, ...props }));
 BaseInputPrefix.displayName = "Input.Prefix";
 BaseInputSuffix.displayName = "Input.Suffix";

package/forms/_base-input/BaseInputContent.sty.js

@@ -26,4 +26,4 @@ var import_textStyle_css_ts_vanilla = require("../../styles/textStyle.css");
 var import_useAutofillEvent_css_ts_vanilla = require("../hooks/useAutofillEvent.css");
 var import_BaseInput_css_ts_vanilla = require("./BaseInput.css");
 var import_BaseInputContent_css_ts_vanilla = require("./BaseInputContent.css");
-var content = "_o6rxr70-3-5-2 _da9a8v0-3-5-2 _da9a8v2-3-5-2 _da9a8v3-3-5-2 _da9a8vb-3-5-2";
+var content = "_o6rxr70-3-6-0 _da9a8v0-3-6-0 _da9a8v2-3-6-0 _da9a8v3-3-6-0 _da9a8vb-3-6-0";

package/forms/_base-input/ClearButton.d.ts

@@ -0,0 +1,3 @@
+export declare const ClearButton: ({ onClear }: {
+    onClear: VoidFunction;
+}) => import("react/jsx-runtime").JSX.Element;