@dynatrace/strato-components 3.11.1 → 3.11.2

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

@@ -4,16 +4,16 @@ import {
   Children,
   useMemo
 } from "react";
-import { isElement } from "react-is";
 import { ChevronDownSmallIcon } from "@dynatrace/strato-icons";
 import { isTimeframeSelectorDisplayValueElement } from "./DisplayValue.js";
 import * as styles from "./Trigger.sty.js";
 import { Button } from "../../../../buttons/button/Button.js";
 import { useVisualRefreshEnabled } from "../../../../core/hooks/useVisualRefreshEnabled.js";
+import { isSlot } from "../../../../core/utils/is-slot.js";
 import { mergeProps as _mergeProps } from "../../../../core/utils/merge-props.js";
 import { useTimeframeSelectorContext } from "../../hooks/useTimeframeSelectorContext.js";
 function isTimeframeSelectorTriggerElement(child) {
-  return isElement(child) && child.type === Trigger;
+  return isSlot(child, Trigger);
 }
 function getDisplayValueSlot(children) {
   let displayValue = null;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/timeframe-selector/components/trigger/Trigger.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  Children,\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n  useMemo,\n} from 'react';\nimport { isElement } from 'react-is';\n\nimport { ChevronDownSmallIcon } from '@dynatrace/strato-icons';\n\nimport { isTimeframeSelectorDisplayValueElement } from './DisplayValue.js';\nimport * as styles from './Trigger.sty.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { useVisualRefreshEnabled } from '../../../../core/hooks/useVisualRefreshEnabled.js';\nimport { AriaLabelingProps } from '../../../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../../../core/types/data-props.js';\nimport { StylingProps } from '../../../../core/types/styling-props.js';\nimport { mergeProps as _mergeProps } from '../../../../core/utils/merge-props.js';\nimport { useTimeframeSelectorContext } from '../../hooks/useTimeframeSelectorContext.js';\n\n/**\n * @public\n */\nexport type TimeframeSelectorTriggerProps = PropsWithChildren &\n  StylingProps &\n  DataTestId &\n  AriaLabelingProps &\n  BehaviorTrackingProps & {\n    /**\n     * The placeholder text displayed in the TimeframeSelector.Trigger.\n     */\n    placeholder?: ReactNode;\n  };\n\n/**\n * Typeguard function that will check if a ReactNode is a TimeframeSelector.Trigger\n * @internal\n */\nexport function isTimeframeSelectorTriggerElement(\n  child: ReactNode,\n): child is ReactElement<TimeframeSelectorTriggerProps> {\n  return isElement(child) && child.type === Trigger;\n}\n\nfunction getDisplayValueSlot(children: ReactNode) {\n  let displayValue: ReactNode[] | null = null;\n\n  Children.forEach(children, (child) => {\n    if (isTimeframeSelectorDisplayValueElement(child)) {\n      displayValue = displayValue || [];\n      displayValue.push(child);\n    }\n  });\n\n  return displayValue;\n}\n\n/**\n * A trigger component to customize a timeframe selector's trigger with custom styling, placeholder, aria labels, and data-testid.\n * If it doesn't have children, the default trigger is used. Otherwise, the `TimeframeSelector.DisplayValue` component can be used within it to define a custom display value within.\n * @public\n */\nexport const Trigger = (props: TimeframeSelectorTriggerProps) => {\n  const {\n    children,\n    placeholder,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    ...remainingProps\n  } = props;\n\n  const displayValueSlot = useMemo(\n    () => getDisplayValueSlot(children),\n    [children],\n  );\n\n  const {\n    triggerProps,\n    displayValue: contextDisplayValue,\n    details,\n    readOnly,\n    showError,\n    disabled,\n  } = useTimeframeSelectorContext();\n\n  const isCritical = useVisualRefreshEnabled()\n    ? showError && !disabled\n    : showError;\n  const color = isCritical ? 'critical' : 'neutral';\n\n  const displayValue = displayValueSlot ?? contextDisplayValue;\n  const placeholderIfEmpty = placeholder ?? contextDisplayValue;\n\n  return (\n    <Button\n      {..._mergeProps(triggerProps, remainingProps)}\n      data-testid={dataTestId}\n      variant=\"emphasized\"\n      color={color}\n      textAlign=\"start\"\n      style={consumerStyle}\n      className={clsx(consumerClassName, {\n        [styles.readOnly]: readOnly,\n        [styles.readOnlyColor[color]]: readOnly,\n      })}\n    >\n      <Button.Suffix>\n        <ChevronDownSmallIcon\n          className={clsx(\n            styles.suffix,\n            triggerProps?.['aria-expanded'] && styles.suffixOpen,\n          )}\n        />\n      </Button.Suffix>\n      {details ? displayValue : placeholderIfEmpty}\n    </Button>\n  );\n};\n\nTrigger.displayName = 'TimeframeSelector.Trigger';\n"],
-  "mappings": "AAkGI,SAaI,KAbJ;AAlGJ,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EAIA;AAAA,OACK;AACP,SAAS,iBAAiB;AAE1B,SAAS,4BAA4B;AAErC,SAAS,8CAA8C;AACvD,YAAY,YAAY;AACxB,SAAS,cAAc;AACvB,SAAS,+BAA+B;AAKxC,SAAS,cAAc,mBAAmB;AAC1C,SAAS,mCAAmC;AAoBrC,SAAS,kCACd,OACsD;AACtD,SAAO,UAAU,KAAK,KAAK,MAAM,SAAS;AAC5C;AAEA,SAAS,oBAAoB,UAAqB;AAChD,MAAI,eAAmC;AAEvC,WAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,QAAI,uCAAuC,KAAK,GAAG;AACjD,qBAAe,gBAAgB,CAAC;AAChC,mBAAa,KAAK,KAAK;AAAA,IACzB;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAOO,MAAM,UAAU,CAAC,UAAyC;AAC/D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,mBAAmB;AAAA,IACvB,MAAM,oBAAoB,QAAQ;AAAA,IAClC,CAAC,QAAQ;AAAA,EACX;AAEA,QAAM;AAAA,IACJ;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,4BAA4B;AAEhC,QAAM,aAAa,wBAAwB,IACvC,aAAa,CAAC,WACd;AACJ,QAAM,QAAQ,aAAa,aAAa;AAExC,QAAM,eAAe,oBAAoB;AACzC,QAAM,qBAAqB,eAAe;AAE1C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG,YAAY,cAAc,cAAc;AAAA,MAC5C,eAAa;AAAA,MACb,SAAQ;AAAA,MACR;AAAA,MACA,WAAU;AAAA,MACV,OAAO;AAAA,MACP,WAAW,KAAK,mBAAmB;AAAA,QACjC,CAAC,OAAO,QAAQ,GAAG;AAAA,QACnB,CAAC,OAAO,cAAc,KAAK,CAAC,GAAG;AAAA,MACjC,CAAC;AAAA,MAED;AAAA,4BAAC,OAAO,QAAP,EACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,OAAO;AAAA,cACP,eAAe,eAAe,KAAK,OAAO;AAAA,YAC5C;AAAA;AAAA,QACF,GACF;AAAA,QACC,UAAU,eAAe;AAAA;AAAA;AAAA,EAC5B;AAEJ;AAEA,QAAQ,cAAc;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  Children,\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n  useMemo,\n} from 'react';\n\nimport { ChevronDownSmallIcon } from '@dynatrace/strato-icons';\n\nimport { isTimeframeSelectorDisplayValueElement } from './DisplayValue.js';\nimport * as styles from './Trigger.sty.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { useVisualRefreshEnabled } from '../../../../core/hooks/useVisualRefreshEnabled.js';\nimport { AriaLabelingProps } from '../../../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../../../core/types/data-props.js';\nimport { StylingProps } from '../../../../core/types/styling-props.js';\nimport { isSlot } from '../../../../core/utils/is-slot.js';\nimport { mergeProps as _mergeProps } from '../../../../core/utils/merge-props.js';\nimport { useTimeframeSelectorContext } from '../../hooks/useTimeframeSelectorContext.js';\n\n/**\n * @public\n */\nexport type TimeframeSelectorTriggerProps = PropsWithChildren &\n  StylingProps &\n  DataTestId &\n  AriaLabelingProps &\n  BehaviorTrackingProps & {\n    /**\n     * The placeholder text displayed in the TimeframeSelector.Trigger.\n     */\n    placeholder?: ReactNode;\n  };\n\n/**\n * Typeguard function that will check if a ReactNode is a TimeframeSelector.Trigger\n * @internal\n */\nexport function isTimeframeSelectorTriggerElement(\n  child: ReactNode,\n): child is ReactElement<TimeframeSelectorTriggerProps> {\n  return isSlot(child, Trigger);\n}\n\nfunction getDisplayValueSlot(children: ReactNode) {\n  let displayValue: ReactNode[] | null = null;\n\n  Children.forEach(children, (child) => {\n    if (isTimeframeSelectorDisplayValueElement(child)) {\n      displayValue = displayValue || [];\n      displayValue.push(child);\n    }\n  });\n\n  return displayValue;\n}\n\n/**\n * A trigger component to customize a timeframe selector's trigger with custom styling, placeholder, aria labels, and data-testid.\n * If it doesn't have children, the default trigger is used. Otherwise, the `TimeframeSelector.DisplayValue` component can be used within it to define a custom display value within.\n * @public\n */\nexport const Trigger = (props: TimeframeSelectorTriggerProps) => {\n  const {\n    children,\n    placeholder,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    ...remainingProps\n  } = props;\n\n  const displayValueSlot = useMemo(\n    () => getDisplayValueSlot(children),\n    [children],\n  );\n\n  const {\n    triggerProps,\n    displayValue: contextDisplayValue,\n    details,\n    readOnly,\n    showError,\n    disabled,\n  } = useTimeframeSelectorContext();\n\n  const isCritical = useVisualRefreshEnabled()\n    ? showError && !disabled\n    : showError;\n  const color = isCritical ? 'critical' : 'neutral';\n\n  const displayValue = displayValueSlot ?? contextDisplayValue;\n  const placeholderIfEmpty = placeholder ?? contextDisplayValue;\n\n  return (\n    <Button\n      {..._mergeProps(triggerProps, remainingProps)}\n      data-testid={dataTestId}\n      variant=\"emphasized\"\n      color={color}\n      textAlign=\"start\"\n      style={consumerStyle}\n      className={clsx(consumerClassName, {\n        [styles.readOnly]: readOnly,\n        [styles.readOnlyColor[color]]: readOnly,\n      })}\n    >\n      <Button.Suffix>\n        <ChevronDownSmallIcon\n          className={clsx(\n            styles.suffix,\n            triggerProps?.['aria-expanded'] && styles.suffixOpen,\n          )}\n        />\n      </Button.Suffix>\n      {details ? displayValue : placeholderIfEmpty}\n    </Button>\n  );\n};\n\nTrigger.displayName = 'TimeframeSelector.Trigger';\n"],
+  "mappings": "AAkGI,SAaI,KAbJ;AAlGJ,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EAIA;AAAA,OACK;AAEP,SAAS,4BAA4B;AAErC,SAAS,8CAA8C;AACvD,YAAY,YAAY;AACxB,SAAS,cAAc;AACvB,SAAS,+BAA+B;AAKxC,SAAS,cAAc;AACvB,SAAS,cAAc,mBAAmB;AAC1C,SAAS,mCAAmC;AAoBrC,SAAS,kCACd,OACsD;AACtD,SAAO,OAAO,OAAO,OAAO;AAC9B;AAEA,SAAS,oBAAoB,UAAqB;AAChD,MAAI,eAAmC;AAEvC,WAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,QAAI,uCAAuC,KAAK,GAAG;AACjD,qBAAe,gBAAgB,CAAC;AAChC,mBAAa,KAAK,KAAK;AAAA,IACzB;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAOO,MAAM,UAAU,CAAC,UAAyC;AAC/D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,mBAAmB;AAAA,IACvB,MAAM,oBAAoB,QAAQ;AAAA,IAClC,CAAC,QAAQ;AAAA,EACX;AAEA,QAAM;AAAA,IACJ;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,4BAA4B;AAEhC,QAAM,aAAa,wBAAwB,IACvC,aAAa,CAAC,WACd;AACJ,QAAM,QAAQ,aAAa,aAAa;AAExC,QAAM,eAAe,oBAAoB;AACzC,QAAM,qBAAqB,eAAe;AAE1C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG,YAAY,cAAc,cAAc;AAAA,MAC5C,eAAa;AAAA,MACb,SAAQ;AAAA,MACR;AAAA,MACA,WAAU;AAAA,MACV,OAAO;AAAA,MACP,WAAW,KAAK,mBAAmB;AAAA,QACjC,CAAC,OAAO,QAAQ,GAAG;AAAA,QACnB,CAAC,OAAO,cAAc,KAAK,CAAC,GAAG;AAAA,MACjC,CAAC;AAAA,MAED;AAAA,4BAAC,OAAO,QAAP,EACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,OAAO;AAAA,cACP,eAAe,eAAe,KAAK,OAAO;AAAA,YAC5C;AAAA;AAAA,QACF,GACF;AAAA,QACC,UAAU,eAAe;AAAA;AAAA;AAAA,EAC5B;AAEJ;AAEA,QAAQ,cAAc;",
   "names": []
 }

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

@@ -1,10 +1,10 @@
 import "../../../../core/components/app-root/AppRoot.css";
 import "../../../../styles/field.css";
 import "./Trigger.css";
-var readOnly = "_attccb0-3-11-1";
-var readOnlyColor = { neutral: "_attccb3-3-11-1", critical: "_attccb4-3-11-1" };
-var suffix = "_attccb1-3-11-1";
-var suffixOpen = "_attccb2-3-11-1";
+var readOnly = "_attccb0-3-11-2";
+var readOnlyColor = { neutral: "_attccb3-3-11-2", critical: "_attccb4-3-11-2" };
+var suffix = "_attccb1-3-11-2";
+var suffixOpen = "_attccb2-3-11-2";
 export {
   readOnly,
   readOnlyColor,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/timeframe-selector/components/trigger/Trigger.css.ts"],
-  "sourcesContent": ["import '../../../../core/components/app-root/AppRoot.css';\nimport '../../../../styles/field.css';\nimport './Trigger.css';\nexport var readOnly = '_attccb0-3-11-1';\nexport var readOnlyColor = {neutral:'_attccb3-3-11-1',critical:'_attccb4-3-11-1'};\nexport var suffix = '_attccb1-3-11-1';\nexport var suffixOpen = '_attccb2-3-11-1';"],
+  "sourcesContent": ["import '../../../../core/components/app-root/AppRoot.css';\nimport '../../../../styles/field.css';\nimport './Trigger.css';\nexport var readOnly = '_attccb0-3-11-2';\nexport var readOnlyColor = {neutral:'_attccb3-3-11-2',critical:'_attccb4-3-11-2'};\nexport var suffix = '_attccb1-3-11-2';\nexport var suffixOpen = '_attccb2-3-11-2';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,WAAW;AACf,IAAI,gBAAgB,EAAC,SAAQ,mBAAkB,UAAS,kBAAiB;AACzE,IAAI,SAAS;AACb,IAAI,aAAa;",
   "names": []
 }

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

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

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

@@ -3,17 +3,17 @@ import "../../styles/field.css";
 import "../../styles/textStyle.css";
 import "../hooks/useAutofillEvent.css";
 import "./BaseInput.css";
-var container = "_1a8lqy98-3-11-1";
-var containerPadding = { none: "_1a8lqy99-3-11-1", rightNone: "_1a8lqy9a-3-11-1", rightUnset: "_1a8lqy9b-3-11-1", leftUnset: "_1a8lqy9c-3-11-1" };
-var disabled = "_1a8lqy92-3-11-1";
-var divider = "_1a8lqy9f-3-11-1";
-var hasError = "_1a8lqy91-3-11-1";
-var input = "_1a8lqy9d-3-11-1 _yfwka33-3-11-1 _da9a8v0-3-11-1 _da9a8v2-3-11-1 _da9a8v3-3-11-1 _da9a8vb-3-11-1";
-var isAutoFilled = "_1a8lqy9g-3-11-1";
-var readOnly = "_1a8lqy93-3-11-1";
-var reservedSuffixButton = "_1a8lqy9e-3-11-1";
-var variant = { "default": "_1a8lqy94-3-11-1", minimal: "_1a8lqy95-3-11-1" };
-var wrapper = "_1a8lqy90-3-11-1";
+var container = "_1a8lqy98-3-11-2";
+var containerPadding = { none: "_1a8lqy99-3-11-2", rightNone: "_1a8lqy9a-3-11-2", rightUnset: "_1a8lqy9b-3-11-2", leftUnset: "_1a8lqy9c-3-11-2" };
+var disabled = "_1a8lqy92-3-11-2";
+var divider = "_1a8lqy9f-3-11-2";
+var hasError = "_1a8lqy91-3-11-2";
+var input = "_1a8lqy9d-3-11-2 _yfwka33-3-11-2 _da9a8v0-3-11-2 _da9a8v2-3-11-2 _da9a8v3-3-11-2 _da9a8vb-3-11-2";
+var isAutoFilled = "_1a8lqy9g-3-11-2";
+var readOnly = "_1a8lqy93-3-11-2";
+var reservedSuffixButton = "_1a8lqy9e-3-11-2";
+var variant = { "default": "_1a8lqy94-3-11-2", minimal: "_1a8lqy95-3-11-2" };
+var wrapper = "_1a8lqy90-3-11-2";
 export {
   container,
   containerPadding,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/_base-input/BaseInput.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport '../../styles/textStyle.css';\nimport '../hooks/useAutofillEvent.css';\nimport './BaseInput.css';\nexport var container = '_1a8lqy98-3-11-1';\nexport var containerPadding = {none:'_1a8lqy99-3-11-1',rightNone:'_1a8lqy9a-3-11-1',rightUnset:'_1a8lqy9b-3-11-1',leftUnset:'_1a8lqy9c-3-11-1'};\nexport var disabled = '_1a8lqy92-3-11-1';\nexport var divider = '_1a8lqy9f-3-11-1';\nexport var hasError = '_1a8lqy91-3-11-1';\nexport var input = '_1a8lqy9d-3-11-1 _yfwka33-3-11-1 _da9a8v0-3-11-1 _da9a8v2-3-11-1 _da9a8v3-3-11-1 _da9a8vb-3-11-1';\nexport var isAutoFilled = '_1a8lqy9g-3-11-1';\nexport var readOnly = '_1a8lqy93-3-11-1';\nexport var reservedSuffixButton = '_1a8lqy9e-3-11-1';\nexport var variant = {'default':'_1a8lqy94-3-11-1',minimal:'_1a8lqy95-3-11-1'};\nexport var wrapper = '_1a8lqy90-3-11-1';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport '../../styles/textStyle.css';\nimport '../hooks/useAutofillEvent.css';\nimport './BaseInput.css';\nexport var container = '_1a8lqy98-3-11-2';\nexport var containerPadding = {none:'_1a8lqy99-3-11-2',rightNone:'_1a8lqy9a-3-11-2',rightUnset:'_1a8lqy9b-3-11-2',leftUnset:'_1a8lqy9c-3-11-2'};\nexport var disabled = '_1a8lqy92-3-11-2';\nexport var divider = '_1a8lqy9f-3-11-2';\nexport var hasError = '_1a8lqy91-3-11-2';\nexport var input = '_1a8lqy9d-3-11-2 _yfwka33-3-11-2 _da9a8v0-3-11-2 _da9a8v2-3-11-2 _da9a8v3-3-11-2 _da9a8vb-3-11-2';\nexport var isAutoFilled = '_1a8lqy9g-3-11-2';\nexport var readOnly = '_1a8lqy93-3-11-2';\nexport var reservedSuffixButton = '_1a8lqy9e-3-11-2';\nexport var variant = {'default':'_1a8lqy94-3-11-2',minimal:'_1a8lqy95-3-11-2'};\nexport var wrapper = '_1a8lqy90-3-11-2';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,YAAY;AAChB,IAAI,mBAAmB,EAAC,MAAK,oBAAmB,WAAU,oBAAmB,YAAW,oBAAmB,WAAU,mBAAkB;AACvI,IAAI,WAAW;AACf,IAAI,UAAU;AACd,IAAI,WAAW;AACf,IAAI,QAAQ;AACZ,IAAI,eAAe;AACnB,IAAI,WAAW;AACf,IAAI,uBAAuB;AAC3B,IAAI,UAAU,EAAC,WAAU,oBAAmB,SAAQ,mBAAkB;AACtE,IAAI,UAAU;",
   "names": []
 }

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

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

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

@@ -4,7 +4,7 @@ import "../../styles/textStyle.css";
 import "../hooks/useAutofillEvent.css";
 import "./BaseInput.css";
 import "./BaseInputContent.css";
-var content = "_o6rxr70-3-11-1 _da9a8v0-3-11-1 _da9a8v2-3-11-1 _da9a8v3-3-11-1 _da9a8vb-3-11-1";
+var content = "_o6rxr70-3-11-2 _da9a8v0-3-11-2 _da9a8v2-3-11-2 _da9a8v3-3-11-2 _da9a8vb-3-11-2";
 export {
   content
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/_base-input/BaseInputContent.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport '../../styles/textStyle.css';\nimport '../hooks/useAutofillEvent.css';\nimport './BaseInput.css';\nimport './BaseInputContent.css';\nexport var content = '_o6rxr70-3-11-1 _da9a8v0-3-11-1 _da9a8v2-3-11-1 _da9a8v3-3-11-1 _da9a8vb-3-11-1';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport '../../styles/textStyle.css';\nimport '../hooks/useAutofillEvent.css';\nimport './BaseInput.css';\nimport './BaseInputContent.css';\nexport var content = '_o6rxr70-3-11-2 _da9a8v0-3-11-2 _da9a8v2-3-11-2 _da9a8v3-3-11-2 _da9a8vb-3-11-2';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,UAAU;",
   "names": []
 }