@dynatrace/strato-components 3.4.0 → 3.5.0

package/filters/timeframe-selector/components/presets/Presets.css

@@ -1,11 +1,11 @@
-._14rlfn30-3-4-0 {
+._14rlfn30-3-5-0 {
   justify-content: space-between;
   align-items: center;
   grid: auto / auto-flow;
   grid-template-columns: auto 1fr;
   max-height: var(--dt-spacings-size-20, 20px);
 }
-._14rlfn31-3-4-0 {
+._14rlfn31-3-5-0 {
   position: relative;
   list-style: none;
   cursor: pointer;
@@ -16,45 +16,45 @@
   border-radius: var(--dt-borders-radius-field-default, 6px);
   outline-offset: calc(var(--dt-spacings-size-2, 2px) * -1);
 }
-._14rlfn32-3-4-0 {
+._14rlfn32-3-5-0 {
   background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._14rlfn32-3-4-0:hover {
+._14rlfn32-3-5-0:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._14rlfn32-3-4-0:active {
+._14rlfn32-3-5-0:active {
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._14rlfn33-3-4-0 {
+._14rlfn33-3-5-0 {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._14rlfn33-3-4-0:hover {
+._14rlfn33-3-5-0:hover {
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._14rlfn33-3-4-0:active {
+._14rlfn33-3-5-0:active {
   background-color: var(--dt-colors-background-field-primary-default-active, #c9d1f4);
 }
-._14rlfn34-3-4-0 {
+._14rlfn34-3-5-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._14rlfn36-3-4-0 {
+._14rlfn36-3-5-0 {
   min-width: 0;
 }
-._14rlfn37-3-4-0 {
+._14rlfn37-3-5-0 {
   white-space: nowrap;
   overflow: hidden;
   display: block;
   text-overflow: ellipsis;
 }
-._14rlfn38-3-4-0 {
+._14rlfn38-3-5-0 {
   padding-top: var(--dt-spacings-size-6, 6px);
   padding-bottom: var(--dt-spacings-size-6, 6px);
   padding-left: var(--dt-spacings-size-12, 12px);
   padding-right: var(--dt-spacings-size-12, 12px);
 }
-._14rlfn39-3-4-0::before {
+._14rlfn39-3-5-0::before {
   content: "";
   position: absolute;
   width: 2px;
@@ -62,62 +62,62 @@
   left: 4px;
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
 }
-._14rlfn3a-3-4-0::before {
+._14rlfn3a-3-5-0::before {
   content: "";
 }
-._14rlfn3b-3-4-0::before {
+._14rlfn3b-3-5-0::before {
   background-color: var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._14rlfn3c-3-4-0::before {
+._14rlfn3c-3-5-0::before {
   background-color: var(--dt-colors-border-primary-accent, #464cce);
 }
-._14rlfn3e-3-4-0 {
+._14rlfn3e-3-5-0 {
   white-space: nowrap;
   overflow: hidden;
   display: block;
   text-overflow: ellipsis;
   text-align: right;
 }
-._14rlfn3f-3-4-0 {
+._14rlfn3f-3-5-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._14rlfn3g-3-4-0 {
+._14rlfn3g-3-5-0 {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._14rlfn3h-3-4-0 {
+._14rlfn3h-3-5-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._14rlfn3i-3-4-0 {
+._14rlfn3i-3-5-0 {
   position: absolute;
   width: 2px;
   height: 20px;
   left: 4px;
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
 }
-._14rlfn3j-3-4-0 {
+._14rlfn3j-3-5-0 {
   background-color: var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._14rlfn3k-3-4-0 {
+._14rlfn3k-3-5-0 {
   background-color: var(--dt-colors-border-primary-accent, #464cce);
 }
-._14rlfn3l-3-4-0 {
+._14rlfn3l-3-5-0 {
   position: relative;
   margin: 0;
   padding: 0;
   list-style-type: none;
 }
-._14rlfn3m-3-4-0 {
+._14rlfn3m-3-5-0 {
   padding-top: var(--dt-spacings-size-12, 12px);
   padding-right: var(--dt-spacings-size-12, 12px);
   padding-bottom: var(--dt-spacings-size-4, 4px);
   padding-left: var(--dt-spacings-size-12, 12px);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._14rlfn3n-3-4-0 {
+._14rlfn3n-3-5-0 {
   flex-shrink: 0;
 }
 @media screen and (max-width: 470px) {
-  ._14rlfn3d-3-4-0 {
+  ._14rlfn3d-3-5-0 {
     display: none;
   }
 }

package/filters/timeframe-selector/components/presets/Presets.sty.js

@@ -32,14 +32,14 @@ __export(Presets_css_exports, {
 module.exports = __toCommonJS(Presets_css_exports);
 var import_Presets_css_ts_vanilla = require("./Presets.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var displayValueWrapper = "_14rlfn36-3-4-0";
-var formattedPresetValue = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14rlfn3e-3-4-0", variantClassNames: { state: { rest: "_14rlfn3f-3-4-0", selected: "_14rlfn3g-3-4-0", disabled: "_14rlfn3h-3-4-0" } }, defaultVariants: { state: "rest" }, compoundVariants: [] });
-var indicatorIcon = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14rlfn3i-3-4-0", variantClassNames: { isDisabled: { true: "_14rlfn3j-3-4-0", false: "_14rlfn3k-3-4-0" } }, defaultVariants: {}, compoundVariants: [] });
-var item = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14rlfn31-3-4-0", variantClassNames: { state: { rest: "_14rlfn32-3-4-0", selected: "_14rlfn33-3-4-0", disabled: "_14rlfn34-3-4-0" }, defaultVariants: { state: "rest" } }, defaultVariants: {}, compoundVariants: [] });
-var itemContainer = "_14rlfn30-3-4-0";
-var listContainer = "_14rlfn3l-3-4-0";
-var mediaQuery = "_14rlfn3d-3-4-0";
-var recentHeading = "_14rlfn3m-3-4-0";
-var recentIcon = "_14rlfn3n-3-4-0";
-var timeframeDisplayValue = "_14rlfn37-3-4-0";
-var wrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14rlfn38-3-4-0", variantClassNames: { isSelected: { true: "_14rlfn39-3-4-0", false: "_14rlfn3a-3-4-0" }, isDisabled: { true: "_14rlfn3b-3-4-0", false: "_14rlfn3c-3-4-0" } }, defaultVariants: {}, compoundVariants: [] });
+var displayValueWrapper = "_14rlfn36-3-5-0";
+var formattedPresetValue = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14rlfn3e-3-5-0", variantClassNames: { state: { rest: "_14rlfn3f-3-5-0", selected: "_14rlfn3g-3-5-0", disabled: "_14rlfn3h-3-5-0" } }, defaultVariants: { state: "rest" }, compoundVariants: [] });
+var indicatorIcon = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14rlfn3i-3-5-0", variantClassNames: { isDisabled: { true: "_14rlfn3j-3-5-0", false: "_14rlfn3k-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });
+var item = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14rlfn31-3-5-0", variantClassNames: { state: { rest: "_14rlfn32-3-5-0", selected: "_14rlfn33-3-5-0", disabled: "_14rlfn34-3-5-0" }, defaultVariants: { state: "rest" } }, defaultVariants: {}, compoundVariants: [] });
+var itemContainer = "_14rlfn30-3-5-0";
+var listContainer = "_14rlfn3l-3-5-0";
+var mediaQuery = "_14rlfn3d-3-5-0";
+var recentHeading = "_14rlfn3m-3-5-0";
+var recentIcon = "_14rlfn3n-3-5-0";
+var timeframeDisplayValue = "_14rlfn37-3-5-0";
+var wrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14rlfn38-3-5-0", variantClassNames: { isSelected: { true: "_14rlfn39-3-5-0", false: "_14rlfn3a-3-5-0" }, isDisabled: { true: "_14rlfn3b-3-5-0", false: "_14rlfn3c-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });

package/filters/timeframe-selector/components/trigger/Trigger.css

@@ -1,14 +1,24 @@
-._attccb0-3-4-0 {
+._attccb0-3-5-0 {
   cursor: default;
+}
+:root:not(._1jgl8s50-3-5-0) ._attccb0-3-5-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._attccb1-3-4-0 {
+._attccb1-3-5-0 {
   font-size: 0;
   transition-property: transform;
 }
-._attccb0-3-4-0 ._attccb1-3-4-0 {
+._attccb0-3-5-0 ._attccb1-3-5-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._attccb2-3-4-0 {
+._attccb2-3-5-0 {
   transform: rotate(180deg);
+}
+._1jgl8s50-3-5-0 ._attccb3-3-5-0:hover, ._1jgl8s50-3-5-0 ._attccb3-3-5-0:active {
+  --_bx32h3-3-5-0: var(--dt-colors-background-surface-default, #fff);
+  --_bx32h4-3-5-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-0 ._attccb4-3-5-0:hover, ._1jgl8s50-3-5-0 ._attccb4-3-5-0:active {
+  --_bx32h3-3-5-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+  --_bx32h4-3-5-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);
 }

package/filters/timeframe-selector/components/trigger/Trigger.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren, type ReactNode, type ReactElement } from 'react';
+import { type PropsWithChildren, type ReactElement, type ReactNode } from 'react';
 import { AriaLabelingProps } from '../../../../core/types/a11y-props.js';
 import type { BehaviorTrackingProps } from '../../../../core/types/behavior-tracking-props.js';
 import { DataTestId } from '../../../../core/types/data-props.js';

package/filters/timeframe-selector/components/trigger/Trigger.js

@@ -39,6 +39,7 @@ var import_strato_icons = require("@dynatrace/strato-icons");
 var import_DisplayValue = require("./DisplayValue.js");
 var styles = __toESM(require("./Trigger.sty.js"));
 var import_Button = require("../../../../buttons/button/Button.js");
+var import_is_visual_refresh_enabled = require("../../../../core/utils/is-visual-refresh-enabled.js");
 var import_merge_props = require("../../../../core/utils/merge-props.js");
 var import_useTimeframeSelectorContext = require("../../hooks/useTimeframeSelectorContext.js");
 function isTimeframeSelectorTriggerElement(child) {
@@ -72,8 +73,11 @@ const Trigger = (props) => {
     displayValue: contextDisplayValue,
     details,
     readOnly,
-    showError
+    showError,
+    disabled
   } = (0, import_useTimeframeSelectorContext.useTimeframeSelectorContext)();
+  const isCritical = (0, import_is_visual_refresh_enabled.isVisualRefreshEnabled)() ? showError && !disabled : showError;
+  const color = isCritical ? "critical" : "neutral";
   const displayValue = displayValueSlot ?? contextDisplayValue;
   const placeholderIfEmpty = placeholder ?? contextDisplayValue;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -82,9 +86,12 @@ const Trigger = (props) => {
       ...(0, import_merge_props.mergeProps)(triggerProps, remainingProps),
       "data-testid": dataTestId,
       variant: "emphasized",
-      color: showError ? "critical" : "neutral",
+      color,
       style: consumerStyle,
-      className: (0, import_clsx.default)(consumerClassName, readOnly && styles.readOnly),
+      className: (0, import_clsx.default)(consumerClassName, {
+        [styles.readOnly]: readOnly,
+        [styles.readOnlyColor[color]]: readOnly
+      }),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button.Suffix, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_strato_icons.ChevronDownSmallIcon,

package/filters/timeframe-selector/components/trigger/Trigger.sty.d.ts

@@ -1,3 +1,4 @@
 export declare const readOnly: string;
 export declare const suffix: string;
 export declare const suffixOpen: string;
+export declare const readOnlyColor: Record<"neutral" | "critical", string>;

package/filters/timeframe-selector/components/trigger/Trigger.sty.js

@@ -18,11 +18,15 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var Trigger_css_exports = {};
 __export(Trigger_css_exports, {
   readOnly: () => readOnly,
+  readOnlyColor: () => readOnlyColor,
   suffix: () => suffix,
   suffixOpen: () => suffixOpen
 });
 module.exports = __toCommonJS(Trigger_css_exports);
+var import_AppRoot_css_ts_vanilla = require("../../../../core/components/app-root/AppRoot.css");
+var import_field_css_ts_vanilla = require("../../../../styles/field.css");
 var import_Trigger_css_ts_vanilla = require("./Trigger.css");
-var readOnly = "_attccb0-3-4-0";
-var suffix = "_attccb1-3-4-0";
-var suffixOpen = "_attccb2-3-4-0";
+var readOnly = "_attccb0-3-5-0";
+var readOnlyColor = { neutral: "_attccb3-3-5-0", critical: "_attccb4-3-5-0" };
+var suffix = "_attccb1-3-5-0";
+var suffixOpen = "_attccb2-3-5-0";

package/filters/timeframe-selector/contexts/TimeframeSelectorContext.d.ts

@@ -15,6 +15,8 @@ export interface TimeframeSelectorContextProps {
     readOnly?: boolean;
     /** Whether the trigger should display its error state (combines controlState and FormFieldMessages). */
     showError: boolean;
+    /** Whether the trigger is disabled. */
+    disabled?: boolean;
 }
 /**
  * Timeframe selector context, used to access the (input) value and onChange callback in other components.

package/filters/timeframe-selector/contexts/TimeframeSelectorContext.js

@@ -26,5 +26,6 @@ const TimeframeSelectorContext = (0, import_react.createContext)({
   displayValue: null,
   triggerProps: null,
   hint: "",
-  showError: false
+  showError: false,
+  disabled: false
 });

package/forms/_base-input/BaseInput.css

@@ -1,6 +1,27 @@
-._1a8lqy97-3-4-0 {
-  --_1a8lqy96-3-4-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-  --_yfwka30-3-4-0: var(--_1a8lqy96-3-4-0);
+._1a8lqy90-3-5-0 {
+  --_bx32h5-3-5-0: 1;
+}
+._1a8lqy91-3-5-0 {
+  --_bx32h5-3-5-0: 3;
+}
+._1a8lqy91-3-5-0:hover {
+  --_bx32h5-3-5-0: 4;
+}
+._1a8lqy91-3-5-0:active {
+  --_bx32h5-3-5-0: 4;
+}
+._1a8lqy92-3-5-0 {
+  --_bx32h5-3-5-0: 0;
+}
+._1a8lqy92-3-5-0:hover {
+  --_bx32h5-3-5-0: 0;
+}
+._1a8lqy92-3-5-0:active {
+  --_bx32h5-3-5-0: 0;
+}
+._1a8lqy98-3-5-0 {
+  --_1a8lqy96-3-5-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+  --_yfwka30-3-5-0: var(--_1a8lqy96-3-5-0);
   position: relative;
   display: flex;
   min-width: 0;
@@ -11,64 +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-0);
+  box-shadow: var(--_1a8lqy97-3-5-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));
-  background-color: var(--_1a8lqy96-3-4-0);
 }
-._1a8lqy97-3-4-0:hover {
-  --_1a8lqy96-3-4-0: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
+._1a8lqy98-3-5-0:hover {
+  --_1a8lqy96-3-5-0: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._1a8lqy97-3-4-0:active {
-  --_1a8lqy96-3-4-0: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
+._1a8lqy98-3-5-0:active {
+  --_1a8lqy96-3-5-0: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._1a8lqy91-3-4-0 ._1a8lqy97-3-4-0 {
+._1a8lqy91-3-5-0 ._1a8lqy98-3-5-0 {
   color: var(--dt-colors-text-critical-default, #bb0731);
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1a8lqy91-3-4-0:not(._1a8lqy92-3-4-0) ._1a8lqy97-3-4-0:hover {
+._1a8lqy91-3-5-0:not(._1a8lqy92-3-5-0) ._1a8lqy98-3-5-0:hover {
   background-color: var(--dt-colors-background-field-critical-emphasized-hover, #f6d6d5);
 }
-._1a8lqy91-3-4-0:not(._1a8lqy92-3-4-0) ._1a8lqy97-3-4-0:active {
+._1a8lqy91-3-5-0:not(._1a8lqy92-3-5-0) ._1a8lqy98-3-5-0:active {
   background-color: var(--dt-colors-background-field-critical-emphasized-active, #f5cac9);
 }
-._1a8lqy92-3-4-0 ._1a8lqy97-3-4-0 {
-  color: var(--dt-colors-text-neutral-disabled, #595a7d80);
+._1a8lqy93-3-5-0 ._1a8lqy98-3-5-0:is(:not(:hover, :active), :hover, :active) {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
-  cursor: not-allowed;
 }
-._1a8lqy93-3-4-0 ._1a8lqy97-3-4-0:is(:not(:hover, :active), :hover, :active) {
+:where(:root:not(._1jgl8s50-3-5-0)) ._1a8lqy93-3-5-0._1a8lqy91-3-5-0 ._1a8lqy98-3-5-0:is(:not(:hover, :active), :hover, :active) {
+  background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+}
+._1a8lqy92-3-5-0 ._1a8lqy98-3-5-0 {
+  color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+  cursor: not-allowed;
 }
-._1a8lqy93-3-4-0._1a8lqy91-3-4-0 ._1a8lqy97-3-4-0:is(:not(:hover, :active), :hover, :active) {
-  background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+._1a8lqy95-3-5-0:not(:hover) ._1a8lqy98-3-5-0 {
+  background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
 }
-._1a8lqy95-3-4-0:not(:hover) ._1a8lqy97-3-4-0 {
+._1a8lqy95-3-5-0:is(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-0) ._1a8lqy98-3-5-0:is(:not(:hover, :active), :hover, :active) {
   background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
 }
-._1a8lqy95-3-4-0:not(:hover) ._1a8lqy97-3-4-0:hover {
-  background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
+._1jgl8s50-3-5-0 ._1a8lqy94-3-5-0 ._1a8lqy98-3-5-0,
+    ._1jgl8s50-3-5-0 ._1a8lqy94-3-5-0 ._1a8lqy98-3-5-0:is(:hover, :active),
+    ._1jgl8s50-3-5-0 ._1a8lqy95-3-5-0:not(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-0) ._1a8lqy98-3-5-0:is(:hover, :active),
+    ._1jgl8s50-3-5-0 ._1a8lqy95-3-5-0:not(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-0):is(:hover, :active) ._1a8lqy98-3-5-0 {
+  background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._1a8lqy95-3-4-0:not(:hover) ._1a8lqy97-3-4-0:active {
-  background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
+._1jgl8s50-3-5-0 ._1a8lqy94-3-5-0:not(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-0) ._1a8lqy98-3-5-0,
+    ._1jgl8s50-3-5-0 :where(._1a8lqy95-3-5-0:not(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-0)):hover ._1a8lqy98-3-5-0 {
+  --_1a8lqy97-3-5-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);
 }
-._1a8lqy95-3-4-0:is(._1a8lqy92-3-4-0, ._1a8lqy93-3-4-0) ._1a8lqy97-3-4-0:is(:not(:hover, :active), :hover, :active) {
-  background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
+._1jgl8s50-3-5-0 :is(._1a8lqy94-3-5-0, ._1a8lqy95-3-5-0):not(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-0) ._1a8lqy98-3-5-0:hover {
+  --_1a8lqy97-3-5-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-0 :is(._1a8lqy94-3-5-0, ._1a8lqy95-3-5-0):not(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-0) ._1a8lqy98-3-5-0:active {
+  --_1a8lqy97-3-5-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);
 }
-._1a8lqy98-3-4-0 {
+._1jgl8s50-3-5-0 :where(._1a8lqy94-3-5-0)._1a8lqy91-3-5-0:not(._1a8lqy92-3-5-0) ._1a8lqy98-3-5-0,
+      ._1jgl8s50-3-5-0 :where(._1a8lqy95-3-5-0)._1a8lqy91-3-5-0:not(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-0):hover ._1a8lqy98-3-5-0 {
+  --_1a8lqy97-3-5-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-0 ._1a8lqy91-3-5-0:not(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-0) ._1a8lqy98-3-5-0:hover {
+  --_1a8lqy97-3-5-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-0 ._1a8lqy91-3-5-0:not(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-0) ._1a8lqy98-3-5-0:active {
+  --_1a8lqy97-3-5-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-0 ._1a8lqy94-3-5-0:is(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-0) ._1a8lqy98-3-5-0 {
+  --_1a8lqy97-3-5-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-0 ._1a8lqy94-3-5-0._1a8lqy91-3-5-0:is(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-0) ._1a8lqy98-3-5-0 {
+  --_1a8lqy97-3-5-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-0 {
   padding-right: 0;
   padding-left: 0;
 }
-._1a8lqy99-3-4-0 {
+._1a8lqy9a-3-5-0 {
   padding-right: 0;
 }
-._1a8lqy9a-3-4-0 {
+._1a8lqy9b-3-5-0 {
   padding-right: unset;
 }
-._1a8lqy9b-3-4-0 {
+._1a8lqy9c-3-5-0 {
   padding-left: unset;
 }
-._1a8lqy9c-3-4-0 {
+._1a8lqy9d-3-5-0 {
   display: block;
   text-overflow: ellipsis;
   appearance: none;
@@ -82,96 +130,134 @@
   min-width: 0;
   color: inherit;
 }
-._1a8lqy9c-3-4-0:focus {
+._1a8lqy9d-3-5-0:focus {
   outline: none;
 }
-._1a8lqy9c-3-4-0::placeholder {
+._1a8lqy9d-3-5-0::placeholder {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1a8lqy9c-3-4-0::-webkit-search-cancel-button {
+._1a8lqy9d-3-5-0::-webkit-search-cancel-button {
   -webkit-appearance: none;
 }
-._1a8lqy9c-3-4-0::-ms-reveal {
+._1a8lqy9d-3-5-0::-ms-reveal {
   display: none;
 }
-._1a8lqy91-3-4-0 ._1a8lqy9c-3-4-0:-webkit-autofill:is(:not(:hover, :focus), :hover, :focus), ._1a8lqy91-3-4-0 ._1a8lqy9c-3-4-0::placeholder {
+._1a8lqy91-3-5-0 ._1a8lqy9d-3-5-0:-webkit-autofill:is(:not(:hover, :focus), :hover, :focus), ._1a8lqy91-3-5-0 ._1a8lqy9d-3-5-0::placeholder {
   color: var(--dt-colors-text-critical-default, #bb0731);
   -webkit-text-fill-color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._1a8lqy92-3-4-0 ._1a8lqy9c-3-4-0:-webkit-autofill:is(:not(:hover, :focus), :hover, :focus), ._1a8lqy92-3-4-0 ._1a8lqy9c-3-4-0::placeholder {
+._1a8lqy92-3-5-0 ._1a8lqy9d-3-5-0:-webkit-autofill:is(:not(:hover, :focus), :hover, :focus), ._1a8lqy92-3-5-0 ._1a8lqy9d-3-5-0::placeholder {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   -webkit-text-fill-color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1a8lqy92-3-4-0 ._1a8lqy9c-3-4-0 {
+._1a8lqy92-3-5-0 ._1a8lqy9d-3-5-0 {
   cursor: not-allowed;
 }
-._1a8lqy93-3-4-0 ._1a8lqy9c-3-4-0 {
+._1a8lqy93-3-5-0 ._1a8lqy9d-3-5-0 {
   cursor: default;
 }
-button ._1a8lqy9c-3-4-0 {
+button ._1a8lqy9d-3-5-0 {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._1a8lqy9d-3-4-0 {
+._1a8lqy9e-3-5-0 {
   margin: 0 var(--dt-spacings-size-4, 4px);
   padding: var(--dt-spacings-size-2, 2px) 0;
   width: var(--dt-spacings-size-28, 28px);
 }
-._1a8lqy9d-3-4-0:is(button._1a8lqy9d-3-4-0._1a8lqy9d-3-4-0) {
+._1a8lqy9e-3-5-0:is(button._1a8lqy9e-3-5-0._1a8lqy9e-3-5-0) {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._1a8lqy9e-3-4-0 {
+._1a8lqy9f-3-5-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-4-0:not(._1a8lqy92-3-4-0) ._1a8lqy9e-3-4-0 {
+._1a8lqy91-3-5-0:not(._1a8lqy92-3-5-0) ._1a8lqy9f-3-5-0 {
   background-color: var(--dt-colors-border-critical-default, #f6d6d5);
 }
-._1a8lqy95-3-4-0:not(._1a8lqy92-3-4-0, ._1a8lqy93-3-4-0):hover button {
+._1a8lqy94-3-5-0._1a8lqy93-3-5-0 button:not(:hover, :active) {
+  background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+}
+._1a8lqy94-3-5-0._1a8lqy93-3-5-0._1a8lqy91-3-5-0 button:not(:hover, :active) {
+  background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+}
+._1jgl8s50-3-5-0 ._1a8lqy94-3-5-0._1a8lqy93-3-5-0 button:not(:hover, :active) {
+  background-color: var(--dt-colors-background-surface-default, #fff);
+}
+._1jgl8s50-3-5-0 ._1a8lqy94-3-5-0._1a8lqy93-3-5-0 button {
+  --_bx32h4-3-5-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-0:not(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-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-4-0:not(._1a8lqy92-3-4-0, ._1a8lqy93-3-4-0):hover button:active {
-  background-color: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
-}
-._1a8lqy95-3-4-0:not(._1a8lqy92-3-4-0, ._1a8lqy93-3-4-0):hover button:hover {
+._1a8lqy95-3-5-0:not(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-0):hover button:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._1a8lqy95-3-4-0:not(._1a8lqy92-3-4-0, ._1a8lqy93-3-4-0)._1a8lqy91-3-4-0:hover button {
+._1a8lqy95-3-5-0:not(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-0):hover button:active {
+  background-color: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
+}
+._1a8lqy95-3-5-0:not(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-0)._1a8lqy91-3-5-0:hover button {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1a8lqy95-3-4-0:not(._1a8lqy92-3-4-0, ._1a8lqy93-3-4-0)._1a8lqy91-3-4-0:hover button:active {
+._1a8lqy95-3-5-0:not(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-0)._1a8lqy91-3-5-0:hover button:hover {
+  background-color: var(--dt-colors-background-field-critical-emphasized-hover, #f6d6d5);
+}
+._1a8lqy95-3-5-0:not(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-0)._1a8lqy91-3-5-0:hover button:active {
   background-color: var(--dt-colors-background-field-critical-emphasized-active, #f5cac9);
 }
-._1a8lqy95-3-4-0:not(._1a8lqy92-3-4-0, ._1a8lqy93-3-4-0)._1a8lqy91-3-4-0:hover button:hover {
-  background-color: var(--dt-colors-background-field-critical-emphasized-hover, #f6d6d5);
+._1a8lqy95-3-5-0._1a8lqy93-3-5-0 button:not(:hover, :active) {
+  background-color: transparent;
 }
-._1a8lqy95-3-4-0:not(._1a8lqy92-3-4-0, ._1a8lqy93-3-4-0):hover button:is(:disabled,[aria-disabled=true]) {
+._1a8lqy95-3-5-0:not(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-0):hover button:is(:disabled, [aria-disabled=true]) {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1a8lqy93-3-4-0:not(._1a8lqy95-3-4-0) button:not(:hover, :active) {
-  background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+._1jgl8s50-3-5-0 ._1a8lqy95-3-5-0:not(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-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-0 ._1a8lqy95-3-5-0:not(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-0):hover button:hover {
+  background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
+}
+._1jgl8s50-3-5-0 ._1a8lqy95-3-5-0:not(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-0):hover button:active {
+  background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._1a8lqy93-3-4-0._1a8lqy91-3-4-0:not(._1a8lqy95-3-4-0) button:not(:hover, :active) {
+._1jgl8s50-3-5-0 ._1a8lqy95-3-5-0:not(._1a8lqy92-3-5-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-0 ._1a8lqy95-3-5-0:not(._1a8lqy92-3-5-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-0 ._1a8lqy95-3-5-0:not(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-0)._1a8lqy91-3-5-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);
 }
-._1a8lqy95-3-4-0._1a8lqy93-3-4-0 button:not(:hover, :active) {
-  background-color: transparent;
+._1jgl8s50-3-5-0 ._1a8lqy95-3-5-0:not(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-0)._1a8lqy91-3-5-0:hover button:hover {
+  background-color: var(--dt-colors-background-field-critical-default-hover, #f6d6d5);
+}
+._1jgl8s50-3-5-0 ._1a8lqy95-3-5-0:not(._1a8lqy92-3-5-0, ._1a8lqy93-3-5-0)._1a8lqy91-3-5-0:hover button:active {
+  background-color: var(--dt-colors-background-field-critical-default-active, #f5cac9);
+}
+._1jgl8s50-3-5-0 ._1a8lqy95-3-5-0:not(._1a8lqy92-3-5-0)._1a8lqy91-3-5-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-0 ._1a8lqy95-3-5-0:not(._1a8lqy92-3-5-0)._1a8lqy91-3-5-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);
 }
-._1a8lqy97-3-4-0:has(._1a8lqy9d-3-4-0:hover) {
+._1a8lqy98-3-5-0:has(._1a8lqy9e-3-5-0:hover) {
   background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-._1a8lqy91-3-4-0 ._1a8lqy97-3-4-0:has(._1a8lqy9d-3-4-0:hover):not(._1a8lqy92-3-4-0) {
+:where(:root:not(._1jgl8s50-3-5-0)) ._1a8lqy91-3-5-0 ._1a8lqy98-3-5-0:has(._1a8lqy9e-3-5-0:hover):not(._1a8lqy92-3-5-0) {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1a8lqy97-3-4-0:hover ._1a8lqy9e-3-4-0 {
+._1a8lqy98-3-5-0:hover ._1a8lqy9f-3-5-0 {
   background-color: var(--dt-colors-border-neutral-default-active, #c6c7d5);
 }
-._1a8lqy91-3-4-0 ._1a8lqy97-3-4-0:hover ._1a8lqy9e-3-4-0 {
+._1a8lqy91-3-5-0 ._1a8lqy98-3-5-0:hover ._1a8lqy9f-3-5-0 {
   background-color: var(--dt-colors-border-critical-default-active, #f3bebd);
 }
-._1a8lqy97-3-4-0._1a8lqy9f-3-4-0 div svg {
+._1a8lqy98-3-5-0._1a8lqy9g-3-5-0 div svg {
   fill: currentcolor;
 }

package/forms/_base-input/BaseInput.js

@@ -228,12 +228,10 @@ const BaseInputRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwa
                 {
                   className: (0, import_clsx.default)(
                     styles.container,
-                    {
-                      [styles.isAutoFilled]: isAutoFilled
-                    },
                     import_InputGroup_css.inputGroupClassName,
                     focusClassName,
                     {
+                      [styles.isAutoFilled]: isAutoFilled,
                       [`${styles.containerPadding.none}`]: hasOnClear && hasInnerPrefix,
                       [`${styles.containerPadding.rightNone}`]: hasOnClear && !hasInnerPrefix,
                       [`${styles.containerPadding.leftUnset}`]: hasInnerPrefix,