@dynatrace/strato-components 3.3.0 → 3.3.2

package/esm/forms/text-area/TextArea.sty.js

@@ -1,8 +1,8 @@
 import "./TextArea.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var container = _7a468({ defaultClassName: "_44rwcl1-3-3-0", variantClassNames: { contentWidth: { true: "_44rwcl2-3-3-0" }, resize: { none: "_44rwcl3-3-3-0", both: "_44rwcl4-3-3-0", horizontal: "_44rwcl5-3-3-0", vertical: "_44rwcl6-3-3-0" } }, defaultVariants: {}, compoundVariants: [] });
-var resizeIcon = _7a468({ defaultClassName: "_44rwclb-3-3-0", variantClassNames: { error: { true: "_44rwclc-3-3-0" }, disabled: { true: "_44rwcld-3-3-0" } }, defaultVariants: {}, compoundVariants: [[{ error: true, disabled: true }, "_44rwcle-3-3-0"]] });
-var textArea = _7a468({ defaultClassName: "_44rwcl7-3-3-0", variantClassNames: { disabled: { true: "_44rwcl8-3-3-0" }, error: { true: "_44rwcl9-3-3-0" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, error: true }, "_44rwcla-3-3-0"]] });
+var container = _7a468({ defaultClassName: "_44rwcl1-3-3-2", variantClassNames: { contentWidth: { true: "_44rwcl2-3-3-2" }, resize: { none: "_44rwcl3-3-3-2", both: "_44rwcl4-3-3-2", horizontal: "_44rwcl5-3-3-2", vertical: "_44rwcl6-3-3-2" } }, defaultVariants: {}, compoundVariants: [] });
+var resizeIcon = _7a468({ defaultClassName: "_44rwclb-3-3-2", variantClassNames: { error: { true: "_44rwclc-3-3-2" }, disabled: { true: "_44rwcld-3-3-2" } }, defaultVariants: {}, compoundVariants: [[{ error: true, disabled: true }, "_44rwcle-3-3-2"]] });
+var textArea = _7a468({ defaultClassName: "_44rwcl7-3-3-2", variantClassNames: { disabled: { true: "_44rwcl8-3-3-2" }, error: { true: "_44rwcl9-3-3-2" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, error: true }, "_44rwcla-3-3-2"]] });
 export {
   container,
   resizeIcon,

package/esm/forms/text-area/TextArea.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/text-area/TextArea.css.ts"],
-  "sourcesContent": ["import './TextArea.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var container = _7a468({defaultClassName:'_44rwcl1-3-3-0',variantClassNames:{contentWidth:{true:'_44rwcl2-3-3-0'},resize:{none:'_44rwcl3-3-3-0',both:'_44rwcl4-3-3-0',horizontal:'_44rwcl5-3-3-0',vertical:'_44rwcl6-3-3-0'}},defaultVariants:{},compoundVariants:[]});\nexport var resizeIcon = _7a468({defaultClassName:'_44rwclb-3-3-0',variantClassNames:{error:{true:'_44rwclc-3-3-0'},disabled:{true:'_44rwcld-3-3-0'}},defaultVariants:{},compoundVariants:[[{error:true,disabled:true},'_44rwcle-3-3-0']]});\nexport var textArea = _7a468({defaultClassName:'_44rwcl7-3-3-0',variantClassNames:{disabled:{true:'_44rwcl8-3-3-0'},error:{true:'_44rwcl9-3-3-0'}},defaultVariants:{},compoundVariants:[[{disabled:true,error:true},'_44rwcla-3-3-0']]});"],
+  "sourcesContent": ["import './TextArea.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var container = _7a468({defaultClassName:'_44rwcl1-3-3-2',variantClassNames:{contentWidth:{true:'_44rwcl2-3-3-2'},resize:{none:'_44rwcl3-3-3-2',both:'_44rwcl4-3-3-2',horizontal:'_44rwcl5-3-3-2',vertical:'_44rwcl6-3-3-2'}},defaultVariants:{},compoundVariants:[]});\nexport var resizeIcon = _7a468({defaultClassName:'_44rwclb-3-3-2',variantClassNames:{error:{true:'_44rwclc-3-3-2'},disabled:{true:'_44rwcld-3-3-2'}},defaultVariants:{},compoundVariants:[[{error:true,disabled:true},'_44rwcle-3-3-2']]});\nexport var textArea = _7a468({defaultClassName:'_44rwcl7-3-3-2',variantClassNames:{disabled:{true:'_44rwcl8-3-3-2'},error:{true:'_44rwcl9-3-3-2'}},defaultVariants:{},compoundVariants:[[{disabled:true,error:true},'_44rwcla-3-3-2']]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,YAAY,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,cAAa,EAAC,MAAK,iBAAgB,GAAE,QAAO,EAAC,MAAK,kBAAiB,MAAK,kBAAiB,YAAW,kBAAiB,UAAS,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACrQ,IAAI,aAAa,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,OAAM,EAAC,MAAK,iBAAgB,GAAE,UAAS,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,OAAM,MAAK,UAAS,KAAI,GAAE,gBAAgB,CAAC,EAAC,CAAC;AAClO,IAAI,WAAW,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,UAAS,EAAC,MAAK,iBAAgB,GAAE,OAAM,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,UAAS,MAAK,OAAM,KAAI,GAAE,gBAAgB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/forms/toggle-button-group/Item.js

@@ -12,6 +12,7 @@ import { Prefix } from "./Prefix.js";
 import * as styles from "./styles.sty.js";
 import { Suffix } from "./Suffix.js";
 import { VisuallyHidden } from "../../core/components/visually-hidden/VisuallyHidden.js";
+import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
 import { useId } from "../../core/hooks/useId.js";
 import { useSlots } from "../../core/hooks/useSlots.js";
 import { focusRingStatic } from "../../core/styles/focusRingStatic.sty.js";
@@ -38,6 +39,11 @@ const Item = forwardRef(
       value,
       ...remainingProps
     } = props;
+    const [behavioralTrackingProps, restProps] = useBehavioralTrackingProps(remainingProps);
+    const {
+      "data-dt-name": dataDtName = "Toggle",
+      ...remainingBehavioralTrackingProps
+    } = behavioralTrackingProps;
     const {
       name,
       isRequired,
@@ -178,8 +184,9 @@ const Item = forwardRef(
           consumerClassName
         ),
         style: consumerStyle,
-        ...remainingProps,
-        "data-dt-name": "Toggle",
+        "data-dt-name": dataDtName,
+        ...remainingBehavioralTrackingProps,
+        ...restProps,
         children: [
           /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(
             "input",

package/esm/forms/toggle-button-group/Item.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/toggle-button-group/Item.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type ChangeEvent,\n  forwardRef,\n  type PropsWithChildren,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { useToggleButtonGroupContext } from './hooks/useToggleButtonGroupContext.js';\nimport { Prefix } from './Prefix.js';\nimport * as styles from './styles.sty.js';\nimport { Suffix } from './Suffix.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useSlots } from '../../core/hooks/useSlots.js';\nimport { focusRingStatic } from '../../core/styles/focusRingStatic.sty.js';\nimport { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { DOMProps } from '../../core/types/dom.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { isDev } from '../../core/utils/is-node-environment.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { Tooltip } from '../../overlays/tooltip/Tooltip.js';\nimport { fieldColors as fieldColorsCSS } from '../../styles/field.sty.js';\nimport { Text } from '../../typography/text/Text.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useFormFieldValidation } from '../forms-core/hooks/useFormFieldValidation.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport type { FormControlRef } from '../shared-types.js';\n\n//#region Typings\n/**\n * Accepted properties for the ToggleButtonGroup Item.\n * @public\n */\nexport type ToggleButtonGroupItemProps = FormControlProps<string, never> &\n  PropsWithChildren &\n  DOMProps &\n  AriaLabelingProps &\n  StylingProps &\n  DataTestId & {\n    /** When a tooltip is provided, text is shown on hover. */\n    tooltip?: string;\n\n    /**\n     * Zero or more items in a group can be checked.\n     * @defaultValue false\n     * @deprecated unused, will be removed\n     */\n    checked?: boolean;\n\n    /**\n     * Indicates if the mover is currently over the item.\n     * @defaultValue false\n     * @deprecated unused, will be removed\n     */\n    hovered?: boolean;\n  };\n//#endregion\n\n/**\n * ToggleButtonGroup Item component.\n * @public\n */\nexport const Item = forwardRef<FormControlRef, ToggleButtonGroupItemProps>(\n  (props, forwardedRef) => {\n    const fallbackId = useId();\n    const {\n      id = fallbackId,\n      disabled: propDisabled,\n      tooltip,\n      children,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      value,\n      ...remainingProps\n    } = props;\n\n    const {\n      name,\n      isRequired,\n      hasError,\n      isDisabled: disabledContext,\n      ariaDisabled,\n      selectedValue,\n      onChange,\n    } = useToggleButtonGroupContext();\n\n    const labelRef = useRef<HTMLLabelElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    const isDisabled = disabledContext || propDisabled;\n    const checked = selectedValue === value;\n\n    const color = hasError ? 'critical' : 'neutral';\n\n    const { dispatch: messagesContextDispatch } = useFormFieldMessagesContext();\n\n    const {\n      onChange: validationOnChange,\n      onInvalid: validationOnInvalid,\n      onBlur: validationOnBlur,\n      ariaProps,\n    } = useFormFieldValidation(inputRef, { isRequired });\n\n    /** Register every single input to the form error context to ensure proper validation. */\n    useEffect(() => {\n      messagesContextDispatch?.({\n        type: FormFieldMessagesAction.ADDFORMCONTROLID,\n        payload: { controlId: id },\n      });\n\n      return () =>\n        messagesContextDispatch?.({\n          type: FormFieldMessagesAction.REMOVEFORMCONTROLID,\n          payload: { controlId: id },\n        });\n    }, [id, messagesContextDispatch]);\n\n    const [slots, freeform] = useSlots(children, {\n      prefix: Prefix,\n      suffix: Suffix,\n    });\n\n    useImperativeHandle(forwardedRef, (): FormControlRef<HTMLLabelElement> => {\n      return {\n        element: labelRef.current,\n        inputRef: inputRef.current,\n        focus() {\n          inputRef.current?.focus();\n        },\n        validate() {\n          inputRef.current?.checkValidity();\n        },\n      };\n    });\n\n    const scrollTabIntoView = useCallback(\n      (behavior: 'smooth' | 'instant') => {\n        if (!checked || !labelRef.current) {\n          return;\n        }\n\n        const parent = labelRef.current.parentElement;\n        if (!parent) {\n          return;\n        }\n\n        const parentRect = parent.getBoundingClientRect();\n        const targetRect = labelRef.current.getBoundingClientRect();\n\n        const currentLeft = parent.scrollLeft;\n        const deltaLeft = targetRect.left - parentRect.left;\n        const deltaRight = targetRect.right - parentRect.right;\n\n        let nextLeft = currentLeft;\n        if (deltaLeft < 0) {\n          nextLeft += deltaLeft;\n        } else if (deltaRight > 0) {\n          nextLeft += deltaRight;\n        }\n\n        parent.scrollTo?.({ left: nextLeft, behavior: behavior });\n      },\n      [checked],\n    );\n\n    const handleChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        if (value !== undefined) {\n          onChange?.(value, e);\n        }\n\n        validationOnChange?.();\n      },\n      [value, onChange, validationOnChange],\n    );\n\n    useEffect(() => {\n      if (checked && labelRef.current) {\n        scrollTabIntoView('instant');\n      }\n      // Instantly scrolls to the checked item only on the first render.\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    useEffect(() => {\n      const parent = labelRef.current?.parentElement;\n      if (!parent) {\n        return;\n      }\n\n      let prevWidth = parent.offsetWidth;\n      let debounceTimer: number | undefined;\n\n      const resizeObserver = new window.ResizeObserver((entries) => {\n        for (const entry of entries) {\n          if (entry.target === parent && parent.offsetWidth !== prevWidth) {\n            prevWidth = parent.offsetWidth;\n            window.clearTimeout(debounceTimer);\n            debounceTimer = window.setTimeout(() => {\n              scrollTabIntoView('smooth');\n            }, 300);\n          }\n        }\n      });\n      resizeObserver.observe(parent);\n\n      scrollTabIntoView('smooth');\n\n      return () => {\n        resizeObserver.disconnect();\n        window.clearTimeout(debounceTimer);\n      };\n    }, [checked, scrollTabIntoView]);\n\n    if (isDev() && tooltip === undefined && freeform.length === 0) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        'A text to indicate the value is required. It can be provided by a tooltip.',\n      );\n    }\n\n    const toggleItem = (\n      <label\n        data-testid={dataTestId}\n        htmlFor={id}\n        ref={labelRef}\n        className={clsx(\n          styles.item,\n          fieldColorsCSS({\n            variant: 'emphasized',\n            color,\n            disabled: isDisabled || ariaDisabled,\n          }),\n          {\n            [styles.checked]: checked,\n            [styles.disabled]: isDisabled || ariaDisabled,\n          },\n          focusRingStatic({\n            when: 'focus-within-visible',\n            disabled: isDisabled || ariaDisabled,\n            color: color,\n          }),\n          consumerClassName,\n        )}\n        style={consumerStyle}\n        {...remainingProps}\n        data-dt-name=\"Toggle\"\n      >\n        <VisuallyHidden>\n          <input\n            id={id}\n            type=\"radio\"\n            ref={inputRef}\n            name={name}\n            value={value}\n            disabled={isDisabled}\n            aria-disabled={ariaDisabled}\n            aria-label={tooltip}\n            checked={checked}\n            onChange={handleChange}\n            required={isRequired}\n            onInvalid={validationOnInvalid}\n            {..._mergeProps(remainingProps, {\n              ...ariaProps,\n              onBlur: validationOnBlur,\n            })}\n          />\n        </VisuallyHidden>\n\n        {slots.prefix}\n        {freeform.length > 0 && (\n          <Flex flexDirection=\"column\" gap={0} className={styles.textContainer}>\n            <Text\n              as=\"span\"\n              textStyle={checked ? 'base-emphasized' : 'base'}\n              className={styles.text}\n            >\n              {freeform}\n            </Text>\n            {/** Visually hidden text to prevent layout shift when the item is checked and the text becomes emphasized */}\n            <Text\n              as=\"span\"\n              textStyle=\"base-emphasized\"\n              className={clsx(styles.hidden, styles.text)}\n              aria-hidden\n            >\n              {freeform}\n            </Text>\n          </Flex>\n        )}\n        {slots.suffix}\n      </label>\n    );\n\n    return tooltip ? (\n      <Tooltip text={tooltip}>{toggleItem}</Tooltip>\n    ) : (\n      toggleItem\n    );\n  },\n);\n\n(Item as typeof Item & { displayName: string }).displayName =\n  'ToggleButtonGroup.Item';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type ChangeEvent,\n  forwardRef,\n  type PropsWithChildren,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { useToggleButtonGroupContext } from './hooks/useToggleButtonGroupContext.js';\nimport { Prefix } from './Prefix.js';\nimport * as styles from './styles.sty.js';\nimport { Suffix } from './Suffix.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useSlots } from '../../core/hooks/useSlots.js';\nimport { focusRingStatic } from '../../core/styles/focusRingStatic.sty.js';\nimport { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { DOMProps } from '../../core/types/dom.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { isDev } from '../../core/utils/is-node-environment.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { Tooltip } from '../../overlays/tooltip/Tooltip.js';\nimport { fieldColors as fieldColorsCSS } from '../../styles/field.sty.js';\nimport { Text } from '../../typography/text/Text.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useFormFieldValidation } from '../forms-core/hooks/useFormFieldValidation.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport type { FormControlRef } from '../shared-types.js';\n\n//#region Typings\n/**\n * Accepted properties for the ToggleButtonGroup Item.\n * @public\n */\nexport type ToggleButtonGroupItemProps = FormControlProps<string, never> &\n  PropsWithChildren &\n  DOMProps &\n  AriaLabelingProps &\n  StylingProps &\n  DataTestId & {\n    /** When a tooltip is provided, text is shown on hover. */\n    tooltip?: string;\n\n    /**\n     * Zero or more items in a group can be checked.\n     * @defaultValue false\n     * @deprecated unused, will be removed\n     */\n    checked?: boolean;\n\n    /**\n     * Indicates if the mover is currently over the item.\n     * @defaultValue false\n     * @deprecated unused, will be removed\n     */\n    hovered?: boolean;\n  };\n//#endregion\n\n/**\n * ToggleButtonGroup Item component.\n * @public\n */\nexport const Item = forwardRef<FormControlRef, ToggleButtonGroupItemProps>(\n  (props, forwardedRef) => {\n    const fallbackId = useId();\n    const {\n      id = fallbackId,\n      disabled: propDisabled,\n      tooltip,\n      children,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      value,\n      ...remainingProps\n    } = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n    const {\n      'data-dt-name': dataDtName = 'Toggle',\n      ...remainingBehavioralTrackingProps\n    } = behavioralTrackingProps;\n\n    const {\n      name,\n      isRequired,\n      hasError,\n      isDisabled: disabledContext,\n      ariaDisabled,\n      selectedValue,\n      onChange,\n    } = useToggleButtonGroupContext();\n\n    const labelRef = useRef<HTMLLabelElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    const isDisabled = disabledContext || propDisabled;\n    const checked = selectedValue === value;\n\n    const color = hasError ? 'critical' : 'neutral';\n\n    const { dispatch: messagesContextDispatch } = useFormFieldMessagesContext();\n\n    const {\n      onChange: validationOnChange,\n      onInvalid: validationOnInvalid,\n      onBlur: validationOnBlur,\n      ariaProps,\n    } = useFormFieldValidation(inputRef, { isRequired });\n\n    /** Register every single input to the form error context to ensure proper validation. */\n    useEffect(() => {\n      messagesContextDispatch?.({\n        type: FormFieldMessagesAction.ADDFORMCONTROLID,\n        payload: { controlId: id },\n      });\n\n      return () =>\n        messagesContextDispatch?.({\n          type: FormFieldMessagesAction.REMOVEFORMCONTROLID,\n          payload: { controlId: id },\n        });\n    }, [id, messagesContextDispatch]);\n\n    const [slots, freeform] = useSlots(children, {\n      prefix: Prefix,\n      suffix: Suffix,\n    });\n\n    useImperativeHandle(forwardedRef, (): FormControlRef<HTMLLabelElement> => {\n      return {\n        element: labelRef.current,\n        inputRef: inputRef.current,\n        focus() {\n          inputRef.current?.focus();\n        },\n        validate() {\n          inputRef.current?.checkValidity();\n        },\n      };\n    });\n\n    const scrollTabIntoView = useCallback(\n      (behavior: 'smooth' | 'instant') => {\n        if (!checked || !labelRef.current) {\n          return;\n        }\n\n        const parent = labelRef.current.parentElement;\n        if (!parent) {\n          return;\n        }\n\n        const parentRect = parent.getBoundingClientRect();\n        const targetRect = labelRef.current.getBoundingClientRect();\n\n        const currentLeft = parent.scrollLeft;\n        const deltaLeft = targetRect.left - parentRect.left;\n        const deltaRight = targetRect.right - parentRect.right;\n\n        let nextLeft = currentLeft;\n        if (deltaLeft < 0) {\n          nextLeft += deltaLeft;\n        } else if (deltaRight > 0) {\n          nextLeft += deltaRight;\n        }\n\n        parent.scrollTo?.({ left: nextLeft, behavior: behavior });\n      },\n      [checked],\n    );\n\n    const handleChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        if (value !== undefined) {\n          onChange?.(value, e);\n        }\n\n        validationOnChange?.();\n      },\n      [value, onChange, validationOnChange],\n    );\n\n    useEffect(() => {\n      if (checked && labelRef.current) {\n        scrollTabIntoView('instant');\n      }\n      // Instantly scrolls to the checked item only on the first render.\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    useEffect(() => {\n      const parent = labelRef.current?.parentElement;\n      if (!parent) {\n        return;\n      }\n\n      let prevWidth = parent.offsetWidth;\n      let debounceTimer: number | undefined;\n\n      const resizeObserver = new window.ResizeObserver((entries) => {\n        for (const entry of entries) {\n          if (entry.target === parent && parent.offsetWidth !== prevWidth) {\n            prevWidth = parent.offsetWidth;\n            window.clearTimeout(debounceTimer);\n            debounceTimer = window.setTimeout(() => {\n              scrollTabIntoView('smooth');\n            }, 300);\n          }\n        }\n      });\n      resizeObserver.observe(parent);\n\n      scrollTabIntoView('smooth');\n\n      return () => {\n        resizeObserver.disconnect();\n        window.clearTimeout(debounceTimer);\n      };\n    }, [checked, scrollTabIntoView]);\n\n    if (isDev() && tooltip === undefined && freeform.length === 0) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        'A text to indicate the value is required. It can be provided by a tooltip.',\n      );\n    }\n\n    const toggleItem = (\n      <label\n        data-testid={dataTestId}\n        htmlFor={id}\n        ref={labelRef}\n        className={clsx(\n          styles.item,\n          fieldColorsCSS({\n            variant: 'emphasized',\n            color,\n            disabled: isDisabled || ariaDisabled,\n          }),\n          {\n            [styles.checked]: checked,\n            [styles.disabled]: isDisabled || ariaDisabled,\n          },\n          focusRingStatic({\n            when: 'focus-within-visible',\n            disabled: isDisabled || ariaDisabled,\n            color: color,\n          }),\n          consumerClassName,\n        )}\n        style={consumerStyle}\n        data-dt-name={dataDtName}\n        {...remainingBehavioralTrackingProps}\n        {...restProps}\n      >\n        <VisuallyHidden>\n          <input\n            id={id}\n            type=\"radio\"\n            ref={inputRef}\n            name={name}\n            value={value}\n            disabled={isDisabled}\n            aria-disabled={ariaDisabled}\n            aria-label={tooltip}\n            checked={checked}\n            onChange={handleChange}\n            required={isRequired}\n            onInvalid={validationOnInvalid}\n            {..._mergeProps(remainingProps, {\n              ...ariaProps,\n              onBlur: validationOnBlur,\n            })}\n          />\n        </VisuallyHidden>\n\n        {slots.prefix}\n        {freeform.length > 0 && (\n          <Flex flexDirection=\"column\" gap={0} className={styles.textContainer}>\n            <Text\n              as=\"span\"\n              textStyle={checked ? 'base-emphasized' : 'base'}\n              className={styles.text}\n            >\n              {freeform}\n            </Text>\n            {/** Visually hidden text to prevent layout shift when the item is checked and the text becomes emphasized */}\n            <Text\n              as=\"span\"\n              textStyle=\"base-emphasized\"\n              className={clsx(styles.hidden, styles.text)}\n              aria-hidden\n            >\n              {freeform}\n            </Text>\n          </Flex>\n        )}\n        {slots.suffix}\n      </label>\n    );\n\n    return tooltip ? (\n      <Tooltip text={tooltip}>{toggleItem}</Tooltip>\n    ) : (\n      toggleItem\n    );\n  },\n);\n\n(Item as typeof Item & { displayName: string }).displayName =\n  'ToggleButtonGroup.Item';\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/forms/toggle-button-group/styles.css

@@ -1,14 +1,14 @@
-._w5wkeh0-3-3-0 {
+._w5wkeh0-3-3-2 {
   box-shadow: var(--dt-box-shadows-surface-flat-rest, 0px 0px 0px 1px #2d2e4e0d) inset;
 }
-._w5wkeh3-3-3-0 {
+._w5wkeh3-3-3-2 {
   cursor: not-allowed;
 }
-._w5wkeh4-3-3-0 {
+._w5wkeh4-3-3-2 {
   visibility: hidden;
   height: 0;
 }
-._w5wkeh5-3-3-0 {
+._w5wkeh5-3-3-2 {
   position: relative;
   z-index: var(--dt-elevations-default, 1);
   display: inline-flex;
@@ -17,27 +17,27 @@
   font-family: var(--dt-typography-text-base-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-base-default-size, 14px);
   font-weight: var(--dt-typography-text-base-default-weight, 400);
-  background: var(--_bx32h2-3-3-0);
-  color: var(--_bx32h0-3-3-0);
+  background: var(--_bx32h2-3-3-2);
+  color: var(--_bx32h0-3-3-2);
   max-width: calc(100% - var(--dt-spacings-size-2, 2px));
   overflow: hidden;
   flex-wrap: nowrap;
 }
-._w5wkeh6-3-3-0 {
+._w5wkeh6-3-3-2 {
   margin-top: var(--dt-spacings-size-4, 4px);
   margin-bottom: var(--dt-spacings-size-4, 4px);
   background-color: var(--dt-colors-border-neutral-default-active, #c6c7d5);
 }
-._w5wkeh1-3-3-0:not(._w5wkeh3-3-3-0) ._w5wkeh6-3-3-0 {
+._w5wkeh1-3-3-2:not(._w5wkeh3-3-3-2) ._w5wkeh6-3-3-2 {
   background-color: var(--dt-colors-border-critical-default-active, #f3bebd);
 }
-._w5wkeh7-3-3-0 {
+._w5wkeh7-3-3-2 {
   width: 100%;
 }
-._w5wkeh8-3-3-0 {
+._w5wkeh8-3-3-2 {
   width: fit-content;
 }
-._w5wkeh9-3-3-0 {
+._w5wkeh9-3-3-2 {
   min-width: 0;
   width: 100%;
   overflow-x: auto;
@@ -45,30 +45,30 @@
   scrollbar-width: none;
   scroll-behavior: smooth;
 }
-._w5wkeh9-3-3-0::-webkit-scrollbar {
+._w5wkeh9-3-3-2::-webkit-scrollbar {
   display: none;
 }
-._w5wkeha-3-3-0 {
+._w5wkeha-3-3-2 {
   -webkit-mask: linear-gradient(to right, transparent var(--dt-spacings-size-32, 32px), #fff var(--dt-spacings-size-56, 56px),#fff calc(100% - var(--dt-spacings-size-56, 56px)), transparent calc(100% - var(--dt-spacings-size-32, 32px)));
   mask: linear-gradient(to right, transparent var(--dt-spacings-size-32, 32px), #fff var(--dt-spacings-size-56, 56px),#fff calc(100% - var(--dt-spacings-size-56, 56px)), transparent calc(100% - var(--dt-spacings-size-32, 32px)));
   -webkit-mask-repeat: no-repeat;
 }
-._w5wkehb-3-3-0 {
+._w5wkehb-3-3-2 {
   -webkit-mask: linear-gradient(to right, transparent var(--dt-spacings-size-32, 32px), #fff var(--dt-spacings-size-56, 56px));
   mask: linear-gradient(to right, transparent var(--dt-spacings-size-32, 32px), #fff var(--dt-spacings-size-56, 56px));
   -webkit-mask-repeat: no-repeat;
 }
-._w5wkehc-3-3-0 {
+._w5wkehc-3-3-2 {
   -webkit-mask: linear-gradient(to right, #fff calc(100% - var(--dt-spacings-size-56, 56px)), transparent calc(100% - var(--dt-spacings-size-32, 32px)));
   mask: linear-gradient(to right, #fff calc(100% - var(--dt-spacings-size-56, 56px)), transparent calc(100% - var(--dt-spacings-size-32, 32px)));
   -webkit-mask-repeat: no-repeat;
 }
-._w5wkehd-3-3-0 {
+._w5wkehd-3-3-2 {
   position: absolute;
   top: 0;
   z-index: var(--dt-elevations-overlay, 20);
 }
-._w5wkehe-3-3-0 {
+._w5wkehe-3-3-2 {
   justify-content: center;
   min-width: fit-content;
   width: 100%;
@@ -78,27 +78,27 @@
   padding: var(--dt-spacings-size-4, 4px) var(--dt-spacings-size-6, 6px);
   text-wrap: nowrap;
   border-radius: calc(var(--dt-borders-radius-field-default, 6px) - var(--dt-spacings-size-2, 2px));
-  background: var(--_bx32h3-3-3-0);
-  color: var(--_bx32h0-3-3-0);
+  background: var(--_bx32h3-3-3-2);
+  color: var(--_bx32h0-3-3-2);
   font-size: var(--dt-typography-text-base-emphasized-size, 14px);
   line-height: var(--dt-typography-text-base-emphasized-line-height, 1.4285714286);
   cursor: pointer;
   scroll-margin: var(--dt-spacings-size-64, 64px);
 }
-._w5wkehe-3-3-0._w5wkeh2-3-3-0 {
+._w5wkehe-3-3-2._w5wkeh2-3-3-2 {
   cursor: not-allowed;
   background-color: transparent;
 }
-._w5wkehe-3-3-0._w5wkeh0-3-3-0 {
+._w5wkehe-3-3-2._w5wkeh0-3-3-2 {
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._w5wkehe-3-3-0:first-child {
+._w5wkehe-3-3-2:first-child {
   margin-left: 1px;
 }
-._w5wkehe-3-3-0:last-child {
+._w5wkehe-3-3-2:last-child {
   margin-right: 1px;
 }
-._w5wkehf-3-3-0 {
+._w5wkehf-3-3-2 {
   padding-left: var(--dt-spacings-size-4, 4px);
   padding-right: var(--dt-spacings-size-4, 4px);
   overflow: hidden;
@@ -106,7 +106,7 @@
   white-space: nowrap;
   max-width: 100%;
 }
-._w5wkehg-3-3-0 {
+._w5wkehg-3-3-2 {
   min-width: 0;
   align-items: center;
 }

package/esm/forms/toggle-button-group/styles.sty.js

@@ -1,19 +1,19 @@
 import "../../styles/field.css";
 import "./styles.css";
-var checked = "_w5wkeh0-3-3-0";
-var container = "_w5wkeh5-3-3-0";
-var containerWidths = { full: "_w5wkeh7-3-3-0", content: "_w5wkeh8-3-3-0" };
-var disabled = "_w5wkeh2-3-3-0";
-var disabledGroup = "_w5wkeh3-3-3-0";
-var divider = "_w5wkeh6-3-3-0";
-var error = "_w5wkeh1-3-3-0";
-var hidden = "_w5wkeh4-3-3-0";
-var item = "_w5wkehe-3-3-0";
-var scrollButton = "_w5wkehd-3-3-0";
-var scrollContainer = "_w5wkeh9-3-3-0";
-var scrollVariants = { both: "_w5wkeha-3-3-0", left: "_w5wkehb-3-3-0", right: "_w5wkehc-3-3-0" };
-var text = "_w5wkehf-3-3-0";
-var textContainer = "_w5wkehg-3-3-0";
+var checked = "_w5wkeh0-3-3-2";
+var container = "_w5wkeh5-3-3-2";
+var containerWidths = { full: "_w5wkeh7-3-3-2", content: "_w5wkeh8-3-3-2" };
+var disabled = "_w5wkeh2-3-3-2";
+var disabledGroup = "_w5wkeh3-3-3-2";
+var divider = "_w5wkeh6-3-3-2";
+var error = "_w5wkeh1-3-3-2";
+var hidden = "_w5wkeh4-3-3-2";
+var item = "_w5wkehe-3-3-2";
+var scrollButton = "_w5wkehd-3-3-2";
+var scrollContainer = "_w5wkeh9-3-3-2";
+var scrollVariants = { both: "_w5wkeha-3-3-2", left: "_w5wkehb-3-3-2", right: "_w5wkehc-3-3-2" };
+var text = "_w5wkehf-3-3-2";
+var textContainer = "_w5wkehg-3-3-2";
 export {
   checked,
   container,

package/esm/forms/toggle-button-group/styles.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/toggle-button-group/styles.css.ts"],
-  "sourcesContent": ["import '../../styles/field.css';\nimport './styles.css';\nexport var checked = '_w5wkeh0-3-3-0';\nexport var container = '_w5wkeh5-3-3-0';\nexport var containerWidths = {full:'_w5wkeh7-3-3-0',content:'_w5wkeh8-3-3-0'};\nexport var disabled = '_w5wkeh2-3-3-0';\nexport var disabledGroup = '_w5wkeh3-3-3-0';\nexport var divider = '_w5wkeh6-3-3-0';\nexport var error = '_w5wkeh1-3-3-0';\nexport var hidden = '_w5wkeh4-3-3-0';\nexport var item = '_w5wkehe-3-3-0';\nexport var scrollButton = '_w5wkehd-3-3-0';\nexport var scrollContainer = '_w5wkeh9-3-3-0';\nexport var scrollVariants = {both:'_w5wkeha-3-3-0',left:'_w5wkehb-3-3-0',right:'_w5wkehc-3-3-0'};\nexport var text = '_w5wkehf-3-3-0';\nexport var textContainer = '_w5wkehg-3-3-0';"],
+  "sourcesContent": ["import '../../styles/field.css';\nimport './styles.css';\nexport var checked = '_w5wkeh0-3-3-2';\nexport var container = '_w5wkeh5-3-3-2';\nexport var containerWidths = {full:'_w5wkeh7-3-3-2',content:'_w5wkeh8-3-3-2'};\nexport var disabled = '_w5wkeh2-3-3-2';\nexport var disabledGroup = '_w5wkeh3-3-3-2';\nexport var divider = '_w5wkeh6-3-3-2';\nexport var error = '_w5wkeh1-3-3-2';\nexport var hidden = '_w5wkeh4-3-3-2';\nexport var item = '_w5wkehe-3-3-2';\nexport var scrollButton = '_w5wkehd-3-3-2';\nexport var scrollContainer = '_w5wkeh9-3-3-2';\nexport var scrollVariants = {both:'_w5wkeha-3-3-2',left:'_w5wkehb-3-3-2',right:'_w5wkehc-3-3-2'};\nexport var text = '_w5wkehf-3-3-2';\nexport var textContainer = '_w5wkehg-3-3-2';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,UAAU;AACd,IAAI,YAAY;AAChB,IAAI,kBAAkB,EAAC,MAAK,kBAAiB,SAAQ,iBAAgB;AACrE,IAAI,WAAW;AACf,IAAI,gBAAgB;AACpB,IAAI,UAAU;AACd,IAAI,QAAQ;AACZ,IAAI,SAAS;AACb,IAAI,OAAO;AACX,IAAI,eAAe;AACnB,IAAI,kBAAkB;AACtB,IAAI,iBAAiB,EAAC,MAAK,kBAAiB,MAAK,kBAAiB,OAAM,iBAAgB;AACxF,IAAI,OAAO;AACX,IAAI,gBAAgB;",
   "names": []
 }

package/esm/layouts/app-header/AppHeader.css

@@ -1,4 +1,4 @@
-._8j2khp0-3-3-0 {
+._8j2khp0-3-3-2 {
   position: relative;
   display: flex;
   align-items: center;

package/esm/layouts/app-header/AppHeader.sty.js

@@ -1,5 +1,5 @@
 import "./AppHeader.css";
-var header = "_8j2khp0-3-3-0";
+var header = "_8j2khp0-3-3-2";
 export {
   header
 };

package/esm/layouts/app-header/AppHeader.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/app-header/AppHeader.css.ts"],
-  "sourcesContent": ["import './AppHeader.css';\nexport var header = '_8j2khp0-3-3-0';"],
+  "sourcesContent": ["import './AppHeader.css';\nexport var header = '_8j2khp0-3-3-2';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,SAAS;",
   "names": []
 }

package/esm/layouts/app-header/Navigation.css

@@ -1,13 +1,13 @@
-._swz1ff2-3-3-0 {
+._swz1ff2-3-3-2 {
   position: relative;
 }
-._swz1ff2-3-3-0:is(._swz1ff0-3-3-0,.active):not(._swz1ff1-3-3-0) {
+._swz1ff2-3-3-2:is(._swz1ff0-3-3-2,.active):not(._swz1ff1-3-3-2) {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._swz1ff2-3-3-0:is(._swz1ff0-3-3-0,.active):not(._swz1ff1-3-3-0):hover {
+._swz1ff2-3-3-2:is(._swz1ff0-3-3-2,.active):not(._swz1ff1-3-3-2):hover {
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._swz1ff2-3-3-0:is(._swz1ff0-3-3-0,.active)::after {
+._swz1ff2-3-3-2:is(._swz1ff0-3-3-2,.active)::after {
   content: "";
   position: absolute;
   width: 20px;
@@ -19,16 +19,16 @@
   transform: translateX(-50%) translateY(calc(var(--dt-spacings-size-2, 2px) * -1));
   transition: width var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1)), opacity var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1)), transform var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1));
 }
-._swz1ff3-3-3-0 {
+._swz1ff3-3-3-2 {
   position: relative;
 }
-._swz1ff3-3-3-0:is(._swz1ff0-3-3-0,.active):not(._swz1ff1-3-3-0) {
+._swz1ff3-3-3-2:is(._swz1ff0-3-3-2,.active):not(._swz1ff1-3-3-2) {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._swz1ff3-3-3-0:is(._swz1ff0-3-3-0,.active):not(._swz1ff1-3-3-0):hover {
+._swz1ff3-3-3-2:is(._swz1ff0-3-3-2,.active):not(._swz1ff1-3-3-2):hover {
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._swz1ff3-3-3-0:is(._swz1ff0-3-3-0,.active)::after {
+._swz1ff3-3-3-2:is(._swz1ff0-3-3-2,.active)::after {
   content: "";
   position: absolute;
   width: var(--dt-spacings-size-2, 2px);
@@ -39,6 +39,6 @@
   transform: translate(4px);
   transition: width var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1)), opacity var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1)), transform var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1));
 }
-._swz1ff4-3-3-0 {
+._swz1ff4-3-3-2 {
   min-width: max-content;
 }

package/esm/layouts/app-header/Navigation.sty.js

@@ -1,9 +1,9 @@
 import "./Navigation.css";
-var button = "_swz1ff2-3-3-0";
-var inlineNav = "_swz1ff4-3-3-0";
-var isDisabled = "_swz1ff1-3-3-0";
-var isSelected = "_swz1ff0-3-3-0";
-var menuLink = "_swz1ff3-3-3-0";
+var button = "_swz1ff2-3-3-2";
+var inlineNav = "_swz1ff4-3-3-2";
+var isDisabled = "_swz1ff1-3-3-2";
+var isSelected = "_swz1ff0-3-3-2";
+var menuLink = "_swz1ff3-3-3-2";
 export {
   button,
   inlineNav,

package/esm/layouts/app-header/Navigation.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/app-header/Navigation.css.ts"],
-  "sourcesContent": ["import './Navigation.css';\nexport var button = '_swz1ff2-3-3-0';\nexport var inlineNav = '_swz1ff4-3-3-0';\nexport var isDisabled = '_swz1ff1-3-3-0';\nexport var isSelected = '_swz1ff0-3-3-0';\nexport var menuLink = '_swz1ff3-3-3-0';"],
+  "sourcesContent": ["import './Navigation.css';\nexport var button = '_swz1ff2-3-3-2';\nexport var inlineNav = '_swz1ff4-3-3-2';\nexport var isDisabled = '_swz1ff1-3-3-2';\nexport var isSelected = '_swz1ff0-3-3-2';\nexport var menuLink = '_swz1ff3-3-3-2';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,SAAS;AACb,IAAI,YAAY;AAChB,IAAI,aAAa;AACjB,IAAI,aAAa;AACjB,IAAI,WAAW;",
   "names": []
 }

package/esm/layouts/app-header/action-group/ActionButton.css

@@ -1,4 +1,4 @@
-._otmjah0-3-3-0 {
+._otmjah0-3-3-2 {
   position: relative;
   display: flex;
   border-radius: var(--dt-borders-radius-field-default, 6px);
@@ -11,17 +11,17 @@
   cursor: pointer;
   max-width: unset;
 }
-._otmjah0-3-3-0:hover {
+._otmjah0-3-3-2:hover {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
   text-decoration: none;
 }
-._otmjah0-3-3-0:active {
+._otmjah0-3-3-2:active {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
   text-decoration: none;
 }
-._otmjah0-3-3-0:after {
+._otmjah0-3-3-2:after {
   content: " ";
   width: 16px;
   height: 2px;
@@ -34,50 +34,50 @@
   transform: translateX(-50%) translateY(var(--dt-spacings-size-0, 0));
   transition: width var(--dt-animations-slide-out-duration-fast, 150ms) var(--dt-animations-slide-out-easing, cubic-bezier(0.8, 0, 0.5, 1)), opacity var(--dt-animations-slide-out-duration-fast, 150ms) var(--dt-animations-slide-out-easing, cubic-bezier(0.8, 0, 0.5, 1)), transform var(--dt-animations-slide-out-duration-fast, 150ms) var(--dt-animations-slide-out-easing, cubic-bezier(0.8, 0, 0.5, 1));
 }
-._otmjah1-3-3-0._otmjah1-3-3-0 {
+._otmjah1-3-3-2._otmjah1-3-3-2 {
   gap: var(--dt-spacings-size-8, 8px);
   padding-top: var(--dt-spacings-size-6, 6px);
   padding-bottom: var(--dt-spacings-size-6, 6px);
   padding-left: var(--dt-spacings-size-8, 8px);
   padding-right: var(--dt-spacings-size-8, 8px);
 }
-._otmjah2-3-3-0._otmjah2-3-3-0 {
+._otmjah2-3-3-2._otmjah2-3-3-2 {
   gap: var(--dt-spacings-size-6, 6px);
   padding-top: var(--dt-spacings-size-2, 2px);
   padding-bottom: var(--dt-spacings-size-2, 2px);
   padding-left: var(--dt-spacings-size-4, 4px);
   padding-right: var(--dt-spacings-size-4, 4px);
 }
-._otmjah3-3-3-0 {
+._otmjah3-3-3-2 {
   cursor: default;
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._otmjah3-3-3-0:hover {
+._otmjah3-3-3-2:hover {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   background-color: inherit;
   text-decoration: none;
 }
-._otmjah4-3-3-0.active {
+._otmjah4-3-3-2.active {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._otmjah4-3-3-0._otmjah3-3-3-0.active {
+._otmjah4-3-3-2._otmjah3-3-3-2.active {
   color: var(--dt-colors-text-primary-disabled, #595a7d80);
 }
-._otmjah4-3-3-0:not(._otmjah3-3-3-0).active:hover {
+._otmjah4-3-3-2:not(._otmjah3-3-3-2).active:hover {
   color: var(--dt-colors-text-primary-default, #464cce);
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
   text-decoration: none;
 }
-._otmjah4-3-3-0:not([role="menuitem"]).active:active {
+._otmjah4-3-3-2:not([role="menuitem"]).active:active {
   color: var(--dt-colors-text-primary-default, #464cce);
   background-color: var(--dt-colors-background-field-primary-default-active, #c9d1f4);
   text-decoration: none;
 }
-._otmjah4-3-3-0._otmjah3-3-3-0._otmjah4-3-3-0:not([role="menuitem"]).active:active {
+._otmjah4-3-3-2._otmjah3-3-3-2._otmjah4-3-3-2:not([role="menuitem"]).active:active {
   color: var(--dt-colors-text-primary-disabled, #595a7d80);
   background-color: inherit;
 }
-._otmjah4-3-3-0.active::after {
+._otmjah4-3-3-2.active::after {
   content: " ";
   width: 20px;
   height: 2px;
@@ -90,10 +90,10 @@
   transform: translateX(-50%) translateY(calc(var(--dt-spacings-size-2, 2px) * -1));
   transition: width var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1)), opacity var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1)), transform var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1));
 }
-._otmjah4-3-3-0._otmjah3-3-3-0.active::after {
+._otmjah4-3-3-2._otmjah3-3-3-2.active::after {
   background-color: var(--dt-colors-icon-primary-disabled, #595a7d80);
 }
-._otmjah4-3-3-0[role="menuitem"].active::after {
+._otmjah4-3-3-2[role="menuitem"].active::after {
   display: block;
   height: calc(100% - 2 * var(--dt-spacings-size-6, 6px));
   width: var(--dt-spacings-size-2, 2px);
@@ -102,7 +102,7 @@
   transform: translate(4px);
   bottom: unset;
 }
-._otmjah4-3-3-0 a {
+._otmjah4-3-3-2 a {
   font-family: var(--dt-typography-text-base-emphasized-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
   font-size: var(--dt-typography-text-base-emphasized-size, 14px);

package/esm/layouts/app-header/action-group/ActionButton.sty.js

@@ -1,8 +1,8 @@
 import "./ActionButton.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var disabled = "_otmjah3-3-3-0";
-var navItem = _7a468({ defaultClassName: "_otmjah0-3-3-0", variantClassNames: { density: { "default": "_otmjah1-3-3-0", condensed: "_otmjah2-3-3-0" } }, defaultVariants: {}, compoundVariants: [] });
-var navItemSelectionStyle = "_otmjah4-3-3-0";
+var disabled = "_otmjah3-3-3-2";
+var navItem = _7a468({ defaultClassName: "_otmjah0-3-3-2", variantClassNames: { density: { "default": "_otmjah1-3-3-2", condensed: "_otmjah2-3-3-2" } }, defaultVariants: {}, compoundVariants: [] });
+var navItemSelectionStyle = "_otmjah4-3-3-2";
 export {
   disabled,
   navItem,

package/esm/layouts/app-header/action-group/ActionButton.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/app-header/action-group/ActionButton.css.ts"],
-  "sourcesContent": ["import './ActionButton.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var disabled = '_otmjah3-3-3-0';\nexport var navItem = _7a468({defaultClassName:'_otmjah0-3-3-0',variantClassNames:{density:{'default':'_otmjah1-3-3-0',condensed:'_otmjah2-3-3-0'}},defaultVariants:{},compoundVariants:[]});\nexport var navItemSelectionStyle = '_otmjah4-3-3-0';"],
+  "sourcesContent": ["import './ActionButton.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var disabled = '_otmjah3-3-3-2';\nexport var navItem = _7a468({defaultClassName:'_otmjah0-3-3-2',variantClassNames:{density:{'default':'_otmjah1-3-3-2',condensed:'_otmjah2-3-3-2'}},defaultVariants:{},compoundVariants:[]});\nexport var navItemSelectionStyle = '_otmjah4-3-3-2';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,WAAW;AACf,IAAI,UAAU,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,SAAQ,EAAC,WAAU,kBAAiB,WAAU,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACnL,IAAI,wBAAwB;",
   "names": []
 }

package/esm/layouts/app-header/action-group/ActionGroup.css

@@ -1,4 +1,4 @@
-._1d2ks7u0-3-3-0 {
+._1d2ks7u0-3-3-2 {
   position: absolute;
   visibility: hidden;
   z-index: -1;

package/esm/layouts/app-header/action-group/ActionGroup.sty.js

@@ -1,5 +1,5 @@
 import "./ActionGroup.css";
-var actionGroupHiddenItemCSS = "_1d2ks7u0-3-3-0";
+var actionGroupHiddenItemCSS = "_1d2ks7u0-3-3-2";
 export {
   actionGroupHiddenItemCSS
 };

package/esm/layouts/app-header/action-group/ActionGroup.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/app-header/action-group/ActionGroup.css.ts"],
-  "sourcesContent": ["import './ActionGroup.css';\nexport var actionGroupHiddenItemCSS = '_1d2ks7u0-3-3-0';"],
+  "sourcesContent": ["import './ActionGroup.css';\nexport var actionGroupHiddenItemCSS = '_1d2ks7u0-3-3-2';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,2BAA2B;",
   "names": []
 }

package/esm/layouts/app-header/action-group/NavItem.css

@@ -1,13 +1,13 @@
-._bf74pw2-3-3-0 {
+._bf74pw2-3-3-2 {
   position: relative;
 }
-._bf74pw2-3-3-0._bf74pw0-3-3-0:not(._bf74pw1-3-3-0), ._bf74pw2-3-3-0.active:not(._bf74pw1-3-3-0) {
+._bf74pw2-3-3-2._bf74pw0-3-3-2:not(._bf74pw1-3-3-2), ._bf74pw2-3-3-2.active:not(._bf74pw1-3-3-2) {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._bf74pw2-3-3-0._bf74pw0-3-3-0:not(._bf74pw1-3-3-0):hover, ._bf74pw2-3-3-0.active:not(._bf74pw1-3-3-0):hover {
+._bf74pw2-3-3-2._bf74pw0-3-3-2:not(._bf74pw1-3-3-2):hover, ._bf74pw2-3-3-2.active:not(._bf74pw1-3-3-2):hover {
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._bf74pw2-3-3-0._bf74pw0-3-3-0::after, ._bf74pw2-3-3-0.active::after {
+._bf74pw2-3-3-2._bf74pw0-3-3-2::after, ._bf74pw2-3-3-2.active::after {
   content: "";
   position: absolute;
   width: 20px;

package/esm/layouts/app-header/action-group/NavItem.sty.js

@@ -1,7 +1,7 @@
 import "./NavItem.css";
-var button = "_bf74pw2-3-3-0";
-var isDisabled = "_bf74pw1-3-3-0";
-var isSelected = "_bf74pw0-3-3-0";
+var button = "_bf74pw2-3-3-2";
+var isDisabled = "_bf74pw1-3-3-2";
+var isSelected = "_bf74pw0-3-3-2";
 export {
   button,
   isDisabled,

package/esm/layouts/app-header/action-group/NavItem.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/app-header/action-group/NavItem.css.ts"],
-  "sourcesContent": ["import './NavItem.css';\nexport var button = '_bf74pw2-3-3-0';\nexport var isDisabled = '_bf74pw1-3-3-0';\nexport var isSelected = '_bf74pw0-3-3-0';"],
+  "sourcesContent": ["import './NavItem.css';\nexport var button = '_bf74pw2-3-3-2';\nexport var isDisabled = '_bf74pw1-3-3-2';\nexport var isSelected = '_bf74pw0-3-3-2';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,SAAS;AACb,IAAI,aAAa;AACjB,IAAI,aAAa;",
   "names": []
 }