@dynatrace/strato-components 3.0.1 → 3.1.1

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

@@ -1,4 +1,4 @@
-._otmjah0-3-0-1 {
+._otmjah0-3-1-1 {
   position: relative;
   display: flex;
   border-radius: var(--dt-borders-radius-field-default, 6px);
@@ -11,17 +11,17 @@
   cursor: pointer;
   max-width: unset;
 }
-._otmjah0-3-0-1:hover {
+._otmjah0-3-1-1: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-0-1:active {
+._otmjah0-3-1-1: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-0-1:after {
+._otmjah0-3-1-1: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-0-1._otmjah1-3-0-1 {
+._otmjah1-3-1-1._otmjah1-3-1-1 {
   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-0-1._otmjah2-3-0-1 {
+._otmjah2-3-1-1._otmjah2-3-1-1 {
   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-0-1 {
+._otmjah3-3-1-1 {
   cursor: default;
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._otmjah3-3-0-1:hover {
+._otmjah3-3-1-1:hover {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   background-color: inherit;
   text-decoration: none;
 }
-._otmjah4-3-0-1.active {
+._otmjah4-3-1-1.active {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._otmjah4-3-0-1._otmjah3-3-0-1.active {
+._otmjah4-3-1-1._otmjah3-3-1-1.active {
   color: var(--dt-colors-text-primary-disabled, #595a7d80);
 }
-._otmjah4-3-0-1:not(._otmjah3-3-0-1).active:hover {
+._otmjah4-3-1-1:not(._otmjah3-3-1-1).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-0-1:not([role="menuitem"]).active:active {
+._otmjah4-3-1-1: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-0-1._otmjah3-3-0-1._otmjah4-3-0-1:not([role="menuitem"]).active:active {
+._otmjah4-3-1-1._otmjah3-3-1-1._otmjah4-3-1-1:not([role="menuitem"]).active:active {
   color: var(--dt-colors-text-primary-disabled, #595a7d80);
   background-color: inherit;
 }
-._otmjah4-3-0-1.active::after {
+._otmjah4-3-1-1.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-0-1._otmjah3-3-0-1.active::after {
+._otmjah4-3-1-1._otmjah3-3-1-1.active::after {
   background-color: var(--dt-colors-icon-primary-disabled, #595a7d80);
 }
-._otmjah4-3-0-1[role="menuitem"].active::after {
+._otmjah4-3-1-1[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-0-1 a {
+._otmjah4-3-1-1 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-0-1";
-var navItem = _7a468({ defaultClassName: "_otmjah0-3-0-1", variantClassNames: { density: { "default": "_otmjah1-3-0-1", condensed: "_otmjah2-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
-var navItemSelectionStyle = "_otmjah4-3-0-1";
+var disabled = "_otmjah3-3-1-1";
+var navItem = _7a468({ defaultClassName: "_otmjah0-3-1-1", variantClassNames: { density: { "default": "_otmjah1-3-1-1", condensed: "_otmjah2-3-1-1" } }, defaultVariants: {}, compoundVariants: [] });
+var navItemSelectionStyle = "_otmjah4-3-1-1";
 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-0-1';\nexport var navItem = _7a468({defaultClassName:'_otmjah0-3-0-1',variantClassNames:{density:{'default':'_otmjah1-3-0-1',condensed:'_otmjah2-3-0-1'}},defaultVariants:{},compoundVariants:[]});\nexport var navItemSelectionStyle = '_otmjah4-3-0-1';"],
+  "sourcesContent": ["import './ActionButton.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var disabled = '_otmjah3-3-1-1';\nexport var navItem = _7a468({defaultClassName:'_otmjah0-3-1-1',variantClassNames:{density:{'default':'_otmjah1-3-1-1',condensed:'_otmjah2-3-1-1'}},defaultVariants:{},compoundVariants:[]});\nexport var navItemSelectionStyle = '_otmjah4-3-1-1';"],
   "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-0-1 {
+._1d2ks7u0-3-1-1 {
   position: absolute;
   visibility: hidden;
   z-index: -1;

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

@@ -2,14 +2,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { createElement } from "react";
 import clsx from "clsx";
 import {
+  Children,
+  cloneElement,
   forwardRef,
+  Fragment,
   useEffect,
   useMemo,
   useRef,
-  useState,
-  Children,
-  cloneElement,
-  Fragment
+  useState
 } from "react";
 import { isElement } from "react-is";
 import { ActionButton } from "./ActionButton.js";
@@ -26,6 +26,7 @@ import { useRovingFocus } from "../../../core/hooks/useRovingFocus.js";
 import { mergeProps as _mergeProps } from "../../../core/utils/merge-props.js";
 import { Divider } from "../../divider/Divider.js";
 import { Flex } from "../../flex/Flex.js";
+const COMPONENT_NAME = "ActionGroup";
 function itemIsPinned(child) {
   return isElement(child) && typeof child.props === "object" && child.props !== null && "pin" in child.props && child.props.pin === true;
 }
@@ -207,6 +208,7 @@ const ActionGroupRoot = forwardRef(
         className: consumerClassName,
         style: { minWidth: !collapsible ? 0 : void 0, ...consumerStyle },
         ...restProps,
+        "data-dt-component": COMPONENT_NAME,
         children: /* @__PURE__ */ jsxs(
           ActionGroupContext.Provider,
           {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/app-header/action-group/ActionGroup.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  Children,\n  cloneElement,\n  Fragment,\n} from 'react';\nimport { isElement } from 'react-is';\n\n\nimport { ActionButton } from './ActionButton.js';\nimport { actionGroupHiddenItemCSS } from './ActionGroup.sty.js';\nimport { CollapsedActionGroup } from './CollapsedActionGroup.js';\nimport { ACTION_GROUP_GAP } from './constants.js';\nimport { ActionGroupContext } from './contexts/ActionGroupContext.js';\nimport { Group } from './Group.js';\nimport { NavItem } from './NavItem.js';\nimport { useContainerSize } from '../../../core/hooks/useContainerSize.js';\nimport { useMeasureChildren } from '../../../core/hooks/useMeasureChildren.js';\nimport { useMergeRefs } from '../../../core/hooks/useMergeRefs.js';\nimport { useRovingFocus } from '../../../core/hooks/useRovingFocus.js';\nimport { DataTestId } from '../../../core/types/data-props.js';\nimport { StylingProps } from '../../../core/types/styling-props.js';\nimport { WithChildren } from '../../../core/types/with-children.js';\nimport { mergeProps as _mergeProps } from '../../../core/utils/merge-props.js';\nimport { Divider } from '../../divider/Divider.js';\nimport { Flex, FlexOwnProps } from '../../flex/Flex.js';\n\n// #region Typings\n/** @internal */\nexport interface ActionGroupProps\n  extends FlexOwnProps,\n    HTMLAttributes<HTMLElement>,\n    WithChildren,\n    StylingProps,\n    DataTestId {\n  /**\n   * Whether or not the ActionGroup is collapsible.\n   * @defaultValue true\n   */\n  collapsible?: boolean;\n  /**\n   * Whether the items in the ActionGroup should have a roving focus applied.\n   * @defaultValue true\n   */\n  rovingFocus?: boolean;\n  /**\n   * Whether to collapse starting from the beginning or end of the ActionGroup.\n   * @defaultValue start\n   */\n  collapseFrom?: 'start' | 'end';\n  /**\n   * Icon used for the trigger that opens/closes the overlay when the ActionGroup is collapsed.\n   */\n  triggerIcon?: ReactElement;\n  /**\n   * Influences the spacings. Condensed is more compact.\n   */\n  density?: 'default' | 'condensed';\n  /**\n   * Handler called when the collapsed state changes.\n   */\n  onCollapsedChange?: (isCollapsed: boolean) => void;\n  /**\n   * Handler called when at least one item is moved into the menu.\n   */\n  onOverflowChange?: (isCollapsed: boolean) => void;\n}\n\ntype SlotsType = {\n  items: ReactNode[];\n  menuItems: ReactNode[];\n};\n// #endregion\n\nfunction itemIsPinned(child: ReactNode): boolean {\n  return (\n    isElement(child) &&\n    typeof child.props === 'object' &&\n    child.props !== null &&\n    'pin' in child.props &&\n    child.props.pin === true\n  );\n}\n\nconst ActionGroupRoot = forwardRef<HTMLDivElement, ActionGroupProps>(\n  (props, forwardedRef) => {\n    const {\n      collapsible = true,\n      collapseFrom = 'start',\n      children,\n      rovingFocus = true,\n      triggerIcon,\n      density = 'default',\n      onCollapsedChange,\n      onOverflowChange,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      ...restProps\n    }: ActionGroupProps = props;\n    const _containerRef = useRef<HTMLDivElement | null>(null);\n\n    const { containerRef, measurements, childProps } = useMeasureChildren();\n\n    // Sorted array of child nodes, including dividers (but not the menu trigger). Needed to access\n    // the child node corresponding to the index of the childProps returned from the useMeasureChildren hook.\n    const measuredChildren = useRef<\n      Array<ReactNode | { props?: { pin: boolean } }>\n    >([]);\n    const { width } = useContainerSize(_containerRef);\n    // We need to round up the width, otherwise we might run into an endless loop\n    // with the ActionGroup constantly collapsing / expanding.\n    const containerWidth = Math.round(width);\n\n    const menuItems = useRef(new Map<string, boolean>());\n    // Number of items that are pinned. Used to adjust when the onCollapsedChange callback is triggered.\n    const pinnedItemsCount = useRef(0);\n\n    const [isCollapsed, setIsCollapsed] = useState(false);\n    const [isOverflowing, setIsOverflowing] = useState(false);\n\n    const totalChildrenWidth = useMemo(() => {\n      // Get total width of children.\n      let childWidths = Object.values(measurements).reduce(\n        (acc, value) => (acc += value?.width || 0),\n        0,\n      );\n      // We also have to include the gaps the flex container is adding.\n      childWidths += (childProps.length - 1) * ACTION_GROUP_GAP;\n\n      return childWidths;\n    }, [childProps, measurements]);\n\n    const slots = useMemo(() => {\n      const slots: SlotsType = { items: [], menuItems: [] };\n\n      // Using React.Children.toArray and not React.Children.forEach to get the correct index for each child.\n      // If an item is conditionally rendered in the ActionGroup, it would still be iterated over using forEach,\n      // even if it ends up not being rendered in the DOM.\n      // Converting the children to an array already removes children that will not be rendered.\n      const childrenArray = Children.toArray(children);\n\n      // As soon as we have sufficient data from the measurement hook,\n      // determine visible and hidden action group items.\n      if (\n        collapsible &&\n        containerWidth > 0 &&\n        childProps.length > 0 &&\n        Object.keys(measurements).length === childProps.length\n      ) {\n        const childKeys = childProps.map((props) => props['data-id']);\n\n        // Index of the next child to remove if there is not enough space.\n        // Currently collapsing the actions starting on the start.\n        let childIndex = collapseFrom === 'start' ? 0 : childProps.length - 1;\n        // Clear all entries so that action group items will show up again when expanding the container.\n        menuItems.current.clear();\n\n        let childWidths = totalChildrenWidth;\n        while (\n          childWidths > containerWidth &&\n          ((collapseFrom === 'end' && childIndex >= 0) ||\n            (collapseFrom === 'start' && childIndex < childProps.length))\n        ) {\n          const childNode =\n            measuredChildren.current[\n              // The childProps array also includes props for the menu trigger, which is not included in the\n              // measured children array. If collapsing from the end, the index needs to be shifted back by 1.\n              childIndex + (isOverflowing && collapseFrom === 'end' ? -1 : 0)\n            ];\n\n          // If an item is pinned, we don't push it into the menu.\n          if (isElement(childNode) && itemIsPinned(childNode)) {\n            // Intentionally left empty\n          } else {\n            let childKeyIndex = childIndex;\n            if (isOverflowing) {\n              // If an item is already overflowing, we need to shift the index by 1 to not\n              // include the menu trigger in the calculation since it will never be hidden.\n              const collapseFromOffset = collapseFrom === 'start' ? 1 : -1;\n              childKeyIndex = childKeyIndex + collapseFromOffset;\n            }\n            const key = childKeys[childKeyIndex];\n            if (key && measurements[key] !== undefined) {\n              // Add item to the list of items rendered in the menu.\n              menuItems.current.set(key, true);\n              // Subtract freed up space and check again, if there's sufficient space to render the remaining children.\n              childWidths -= (measurements[key]?.width || 0) + ACTION_GROUP_GAP;\n            }\n          }\n\n          childIndex += collapseFrom === 'start' ? 1 : -1;\n        }\n      }\n\n      let groupCount = 0;\n      let pinnedItems = 0;\n      measuredChildren.current = [];\n\n      for (const [index, child] of childrenArray.entries()) {\n        if (!isElement(child)) {\n          continue;\n        }\n\n        // The key applied to the children so react is not removing the nodes when adding the menu trigger.\n        // This would cause the mutation observer of the measurement hook to trigger and mess up the calculations.\n        // Applying a consistent child key resolves that issue.\n        const childKey = index + groupCount;\n        // The index of the child used to apply the correct childProps returned from the measurement hook.\n        // If collapsing from the end and an overflow is already happening, we need to shift by 1 to account\n        // for the menu trigger that is then also included in the childProps array.\n        const childIndex =\n          childKey + (isOverflowing && collapseFrom === 'start' ? 1 : 0);\n\n        const isItemOverflowing = menuItems.current.get(\n          childProps[childIndex]?.['data-id'] || '',\n        );\n\n        const clonedChild = cloneElement(\n          child,\n          _mergeProps(child.props ?? {}, childProps[childIndex], {\n            key: childKey,\n            className: clsx(props.className, {\n              [actionGroupHiddenItemCSS]: isItemOverflowing,\n            }),\n          }),\n        );\n\n        // TODO: If the item before the group is not also a group, we should also add a divider there.\n        // Add a divider for each group rendered in the ActionGroup (except the last one).\n        if (child.type === Group) {\n          // If the item after the divider is overflowing, the divider needs to be hidden.\n          const isNextItemOverflowing = menuItems.current.get(\n            childProps[childIndex + 2]?.['data-id'] || '',\n          );\n          measuredChildren.current.push(clonedChild);\n\n          slots.items.push(\n            <Fragment key={`fragment-${childKey}`}>\n              {clonedChild}\n              {index !== childrenArray.length - 1 && (\n                <Divider\n                  orientation=\"vertical\"\n                  flexItem={false}\n                  style={{\n                    height: 20,\n                  }}\n                  className={clsx({\n                    [actionGroupHiddenItemCSS]:\n                      !!isItemOverflowing || !!isNextItemOverflowing,\n                  })}\n                  {...childProps[childIndex + 1]}\n                  key={childKey + 1}\n                />\n              )}\n            </Fragment>,\n          );\n\n          if (itemIsPinned(child)) {\n            measuredChildren.current.push({ props: { pin: true } });\n            pinnedItems += 1;\n          } else {\n            measuredChildren.current.push({});\n          }\n\n          groupCount += 1;\n        } else {\n          measuredChildren.current.push(clonedChild);\n          slots.items.push(clonedChild);\n\n          if (itemIsPinned(child)) {\n            pinnedItems += 1;\n          }\n        }\n\n        if (isItemOverflowing) {\n          slots.menuItems.push(child);\n        }\n      }\n\n      pinnedItemsCount.current = pinnedItems;\n\n      setIsOverflowing(slots.menuItems.length > 0);\n      setIsCollapsed(\n        slots.menuItems.length + pinnedItemsCount.current ===\n          slots.items.length,\n      );\n\n      return slots;\n      // Excluding state 'isOverflowing' to prevent an additional re-render.\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [\n      measurements,\n      childProps,\n      children,\n      collapseFrom,\n      collapsible,\n      totalChildrenWidth,\n      containerWidth,\n    ]);\n\n    const { containerRef: rovingContainerRef } = useRovingFocus<HTMLDivElement>(\n      {\n        // FIXME: Follow-up for detecting the initial index already, when it is initially undefined based on\n        // either tab-index attributes or the first focusable element. This will solve the problem for\n        // everyone and will not overcomplicate the logic. ADES-2260\n        initialIndex: undefined,\n        direction: 'horizontal',\n        focusableChildrenSelector:\n          ':scope a, :scope button, :scope [type=\"button\"]',\n      },\n    );\n\n    const rootRef = useMergeRefs([\n      forwardedRef,\n      ...(rovingFocus ? [rovingContainerRef] : []),\n    ]);\n    const collapsibleRootRef = useMergeRefs([\n      rootRef,\n      containerRef,\n      _containerRef,\n    ]);\n\n    // Trigger onOverflowChange callback whenever the isOverflowing state changes.\n    useEffect(() => {\n      onOverflowChange?.(isOverflowing);\n    }, [isOverflowing, onOverflowChange]);\n\n    // Trigger onCollapsedChange callback whenever the isCollapsed state changes.\n    useEffect(() => {\n      onCollapsedChange?.(isCollapsed);\n    }, [isCollapsed, onCollapsedChange]);\n\n    return (\n      <Flex\n        data-actiongroup\n        alignItems=\"center\"\n        data-testid={dataTestId}\n        ref={collapsible ? collapsibleRootRef : rootRef}\n        gap={ACTION_GROUP_GAP}\n        className={consumerClassName}\n        style={{ minWidth: !collapsible ? 0 : undefined, ...consumerStyle }}\n        {...restProps}\n      >\n        <ActionGroupContext.Provider\n          value={{\n            isCollapsed: false,\n          }}\n        >\n          {collapseFrom === 'start' && slots?.menuItems.length > 0 && (\n            <CollapsedActionGroup\n              triggerIcon={triggerIcon}\n              childProps={childProps[0]}\n              density={density}\n            >\n              {slots?.menuItems}\n            </CollapsedActionGroup>\n          )}\n          {slots?.items}\n          {collapseFrom === 'end' && slots?.menuItems.length > 0 && (\n            <CollapsedActionGroup\n              triggerIcon={triggerIcon}\n              childProps={childProps[childProps.length - 1]}\n              density={density}\n            >\n              {slots?.menuItems}\n            </CollapsedActionGroup>\n          )}\n        </ActionGroupContext.Provider>\n      </Flex>\n    );\n  },\n);\n\n(\n  ActionGroupRoot as typeof ActionGroupRoot & { displayName: string }\n).displayName = 'ActionGroup';\n\n/**\n * The `ActionGroup` groups related actions in a container. It takes care of\n * collapsing the actions into an overlay if there is insufficient space for\n * rendering all the actions next to each other. It also applies a roving focus\n * to the actions.\n * @internal\n */\nexport const ActionGroup = Object.assign(ActionGroupRoot, {\n  ActionButton,\n  Group,\n  NavItem,\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  Children,\n  cloneElement,\n  forwardRef,\n  Fragment,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { isElement } from 'react-is';\n\nimport { ActionButton } from './ActionButton.js';\nimport { actionGroupHiddenItemCSS } from './ActionGroup.sty.js';\nimport { CollapsedActionGroup } from './CollapsedActionGroup.js';\nimport { ACTION_GROUP_GAP } from './constants.js';\nimport { ActionGroupContext } from './contexts/ActionGroupContext.js';\nimport { Group } from './Group.js';\nimport { NavItem } from './NavItem.js';\nimport { useContainerSize } from '../../../core/hooks/useContainerSize.js';\nimport { useMeasureChildren } from '../../../core/hooks/useMeasureChildren.js';\nimport { useMergeRefs } from '../../../core/hooks/useMergeRefs.js';\nimport { useRovingFocus } from '../../../core/hooks/useRovingFocus.js';\nimport { DataTestId } from '../../../core/types/data-props.js';\nimport { StylingProps } from '../../../core/types/styling-props.js';\nimport { WithChildren } from '../../../core/types/with-children.js';\nimport { mergeProps as _mergeProps } from '../../../core/utils/merge-props.js';\nimport { Divider } from '../../divider/Divider.js';\nimport { Flex, FlexOwnProps } from '../../flex/Flex.js';\n\nconst COMPONENT_NAME = 'ActionGroup';\n\n// #region Typings\n/** @internal */\nexport interface ActionGroupProps\n  extends FlexOwnProps,\n    HTMLAttributes<HTMLElement>,\n    WithChildren,\n    StylingProps,\n    DataTestId {\n  /**\n   * Whether or not the ActionGroup is collapsible.\n   * @defaultValue true\n   */\n  collapsible?: boolean;\n  /**\n   * Whether the items in the ActionGroup should have a roving focus applied.\n   * @defaultValue true\n   */\n  rovingFocus?: boolean;\n  /**\n   * Whether to collapse starting from the beginning or end of the ActionGroup.\n   * @defaultValue start\n   */\n  collapseFrom?: 'start' | 'end';\n  /**\n   * Icon used for the trigger that opens/closes the overlay when the ActionGroup is collapsed.\n   */\n  triggerIcon?: ReactElement;\n  /**\n   * Influences the spacings. Condensed is more compact.\n   */\n  density?: 'default' | 'condensed';\n  /**\n   * Handler called when the collapsed state changes.\n   */\n  onCollapsedChange?: (isCollapsed: boolean) => void;\n  /**\n   * Handler called when at least one item is moved into the menu.\n   */\n  onOverflowChange?: (isCollapsed: boolean) => void;\n}\n\ntype SlotsType = {\n  items: ReactNode[];\n  menuItems: ReactNode[];\n};\n// #endregion\n\nfunction itemIsPinned(child: ReactNode): boolean {\n  return (\n    isElement(child) &&\n    typeof child.props === 'object' &&\n    child.props !== null &&\n    'pin' in child.props &&\n    child.props.pin === true\n  );\n}\n\nconst ActionGroupRoot = forwardRef<HTMLDivElement, ActionGroupProps>(\n  (props, forwardedRef) => {\n    const {\n      collapsible = true,\n      collapseFrom = 'start',\n      children,\n      rovingFocus = true,\n      triggerIcon,\n      density = 'default',\n      onCollapsedChange,\n      onOverflowChange,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      ...restProps\n    }: ActionGroupProps = props;\n    const _containerRef = useRef<HTMLDivElement | null>(null);\n\n    const { containerRef, measurements, childProps } = useMeasureChildren();\n\n    // Sorted array of child nodes, including dividers (but not the menu trigger). Needed to access\n    // the child node corresponding to the index of the childProps returned from the useMeasureChildren hook.\n    const measuredChildren = useRef<\n      Array<ReactNode | { props?: { pin: boolean } }>\n    >([]);\n    const { width } = useContainerSize(_containerRef);\n    // We need to round up the width, otherwise we might run into an endless loop\n    // with the ActionGroup constantly collapsing / expanding.\n    const containerWidth = Math.round(width);\n\n    const menuItems = useRef(new Map<string, boolean>());\n    // Number of items that are pinned. Used to adjust when the onCollapsedChange callback is triggered.\n    const pinnedItemsCount = useRef(0);\n\n    const [isCollapsed, setIsCollapsed] = useState(false);\n    const [isOverflowing, setIsOverflowing] = useState(false);\n\n    const totalChildrenWidth = useMemo(() => {\n      // Get total width of children.\n      let childWidths = Object.values(measurements).reduce(\n        (acc, value) => (acc += value?.width || 0),\n        0,\n      );\n      // We also have to include the gaps the flex container is adding.\n      childWidths += (childProps.length - 1) * ACTION_GROUP_GAP;\n\n      return childWidths;\n    }, [childProps, measurements]);\n\n    const slots = useMemo(() => {\n      const slots: SlotsType = { items: [], menuItems: [] };\n\n      // Using React.Children.toArray and not React.Children.forEach to get the correct index for each child.\n      // If an item is conditionally rendered in the ActionGroup, it would still be iterated over using forEach,\n      // even if it ends up not being rendered in the DOM.\n      // Converting the children to an array already removes children that will not be rendered.\n      const childrenArray = Children.toArray(children);\n\n      // As soon as we have sufficient data from the measurement hook,\n      // determine visible and hidden action group items.\n      if (\n        collapsible &&\n        containerWidth > 0 &&\n        childProps.length > 0 &&\n        Object.keys(measurements).length === childProps.length\n      ) {\n        const childKeys = childProps.map((props) => props['data-id']);\n\n        // Index of the next child to remove if there is not enough space.\n        // Currently collapsing the actions starting on the start.\n        let childIndex = collapseFrom === 'start' ? 0 : childProps.length - 1;\n        // Clear all entries so that action group items will show up again when expanding the container.\n        menuItems.current.clear();\n\n        let childWidths = totalChildrenWidth;\n        while (\n          childWidths > containerWidth &&\n          ((collapseFrom === 'end' && childIndex >= 0) ||\n            (collapseFrom === 'start' && childIndex < childProps.length))\n        ) {\n          const childNode =\n            measuredChildren.current[\n              // The childProps array also includes props for the menu trigger, which is not included in the\n              // measured children array. If collapsing from the end, the index needs to be shifted back by 1.\n              childIndex + (isOverflowing && collapseFrom === 'end' ? -1 : 0)\n            ];\n\n          // If an item is pinned, we don't push it into the menu.\n          if (isElement(childNode) && itemIsPinned(childNode)) {\n            // Intentionally left empty\n          } else {\n            let childKeyIndex = childIndex;\n            if (isOverflowing) {\n              // If an item is already overflowing, we need to shift the index by 1 to not\n              // include the menu trigger in the calculation since it will never be hidden.\n              const collapseFromOffset = collapseFrom === 'start' ? 1 : -1;\n              childKeyIndex = childKeyIndex + collapseFromOffset;\n            }\n            const key = childKeys[childKeyIndex];\n            if (key && measurements[key] !== undefined) {\n              // Add item to the list of items rendered in the menu.\n              menuItems.current.set(key, true);\n              // Subtract freed up space and check again, if there's sufficient space to render the remaining children.\n              childWidths -= (measurements[key]?.width || 0) + ACTION_GROUP_GAP;\n            }\n          }\n\n          childIndex += collapseFrom === 'start' ? 1 : -1;\n        }\n      }\n\n      let groupCount = 0;\n      let pinnedItems = 0;\n      measuredChildren.current = [];\n\n      for (const [index, child] of childrenArray.entries()) {\n        if (!isElement(child)) {\n          continue;\n        }\n\n        // The key applied to the children so react is not removing the nodes when adding the menu trigger.\n        // This would cause the mutation observer of the measurement hook to trigger and mess up the calculations.\n        // Applying a consistent child key resolves that issue.\n        const childKey = index + groupCount;\n        // The index of the child used to apply the correct childProps returned from the measurement hook.\n        // If collapsing from the end and an overflow is already happening, we need to shift by 1 to account\n        // for the menu trigger that is then also included in the childProps array.\n        const childIndex =\n          childKey + (isOverflowing && collapseFrom === 'start' ? 1 : 0);\n\n        const isItemOverflowing = menuItems.current.get(\n          childProps[childIndex]?.['data-id'] || '',\n        );\n\n        const clonedChild = cloneElement(\n          child,\n          _mergeProps(child.props ?? {}, childProps[childIndex], {\n            key: childKey,\n            className: clsx(props.className, {\n              [actionGroupHiddenItemCSS]: isItemOverflowing,\n            }),\n          }),\n        );\n\n        // TODO: If the item before the group is not also a group, we should also add a divider there.\n        // Add a divider for each group rendered in the ActionGroup (except the last one).\n        if (child.type === Group) {\n          // If the item after the divider is overflowing, the divider needs to be hidden.\n          const isNextItemOverflowing = menuItems.current.get(\n            childProps[childIndex + 2]?.['data-id'] || '',\n          );\n          measuredChildren.current.push(clonedChild);\n\n          slots.items.push(\n            <Fragment key={`fragment-${childKey}`}>\n              {clonedChild}\n              {index !== childrenArray.length - 1 && (\n                <Divider\n                  orientation=\"vertical\"\n                  flexItem={false}\n                  style={{\n                    height: 20,\n                  }}\n                  className={clsx({\n                    [actionGroupHiddenItemCSS]:\n                      !!isItemOverflowing || !!isNextItemOverflowing,\n                  })}\n                  {...childProps[childIndex + 1]}\n                  key={childKey + 1}\n                />\n              )}\n            </Fragment>,\n          );\n\n          if (itemIsPinned(child)) {\n            measuredChildren.current.push({ props: { pin: true } });\n            pinnedItems += 1;\n          } else {\n            measuredChildren.current.push({});\n          }\n\n          groupCount += 1;\n        } else {\n          measuredChildren.current.push(clonedChild);\n          slots.items.push(clonedChild);\n\n          if (itemIsPinned(child)) {\n            pinnedItems += 1;\n          }\n        }\n\n        if (isItemOverflowing) {\n          slots.menuItems.push(child);\n        }\n      }\n\n      pinnedItemsCount.current = pinnedItems;\n\n      setIsOverflowing(slots.menuItems.length > 0);\n      setIsCollapsed(\n        slots.menuItems.length + pinnedItemsCount.current ===\n          slots.items.length,\n      );\n\n      return slots;\n      // Excluding state 'isOverflowing' to prevent an additional re-render.\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [\n      measurements,\n      childProps,\n      children,\n      collapseFrom,\n      collapsible,\n      totalChildrenWidth,\n      containerWidth,\n    ]);\n\n    const { containerRef: rovingContainerRef } = useRovingFocus<HTMLDivElement>(\n      {\n        // FIXME: Follow-up for detecting the initial index already, when it is initially undefined based on\n        // either tab-index attributes or the first focusable element. This will solve the problem for\n        // everyone and will not overcomplicate the logic. ADES-2260\n        initialIndex: undefined,\n        direction: 'horizontal',\n        focusableChildrenSelector:\n          ':scope a, :scope button, :scope [type=\"button\"]',\n      },\n    );\n\n    const rootRef = useMergeRefs([\n      forwardedRef,\n      ...(rovingFocus ? [rovingContainerRef] : []),\n    ]);\n    const collapsibleRootRef = useMergeRefs([\n      rootRef,\n      containerRef,\n      _containerRef,\n    ]);\n\n    // Trigger onOverflowChange callback whenever the isOverflowing state changes.\n    useEffect(() => {\n      onOverflowChange?.(isOverflowing);\n    }, [isOverflowing, onOverflowChange]);\n\n    // Trigger onCollapsedChange callback whenever the isCollapsed state changes.\n    useEffect(() => {\n      onCollapsedChange?.(isCollapsed);\n    }, [isCollapsed, onCollapsedChange]);\n\n    return (\n      <Flex\n        data-actiongroup\n        alignItems=\"center\"\n        data-testid={dataTestId}\n        ref={collapsible ? collapsibleRootRef : rootRef}\n        gap={ACTION_GROUP_GAP}\n        className={consumerClassName}\n        style={{ minWidth: !collapsible ? 0 : undefined, ...consumerStyle }}\n        {...restProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <ActionGroupContext.Provider\n          value={{\n            isCollapsed: false,\n          }}\n        >\n          {collapseFrom === 'start' && slots?.menuItems.length > 0 && (\n            <CollapsedActionGroup\n              triggerIcon={triggerIcon}\n              childProps={childProps[0]}\n              density={density}\n            >\n              {slots?.menuItems}\n            </CollapsedActionGroup>\n          )}\n          {slots?.items}\n          {collapseFrom === 'end' && slots?.menuItems.length > 0 && (\n            <CollapsedActionGroup\n              triggerIcon={triggerIcon}\n              childProps={childProps[childProps.length - 1]}\n              density={density}\n            >\n              {slots?.menuItems}\n            </CollapsedActionGroup>\n          )}\n        </ActionGroupContext.Provider>\n      </Flex>\n    );\n  },\n);\n\n(\n  ActionGroupRoot as typeof ActionGroupRoot & { displayName: string }\n).displayName = 'ActionGroup';\n\n/**\n * The `ActionGroup` groups related actions in a container. It takes care of\n * collapsing the actions into an overlay if there is insufficient space for\n * rendering all the actions next to each other. It also applies a roving focus\n * to the actions.\n * @internal\n */\nexport const ActionGroup = Object.assign(ActionGroupRoot, {\n  ActionButton,\n  Group,\n  NavItem,\n});\n"],
+  "mappings": "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",
   "names": ["slots", "props"]
 }

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

@@ -1,5 +1,5 @@
 import "./ActionGroup.css";
-var actionGroupHiddenItemCSS = "_1d2ks7u0-3-0-1";
+var actionGroupHiddenItemCSS = "_1d2ks7u0-3-1-1";
 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-0-1';"],
+  "sourcesContent": ["import './ActionGroup.css';\nexport var actionGroupHiddenItemCSS = '_1d2ks7u0-3-1-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,2BAA2B;",
   "names": []
 }

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

@@ -1,13 +1,13 @@
-._bf74pw2-3-0-1 {
+._bf74pw2-3-1-1 {
   position: relative;
 }
-._bf74pw2-3-0-1._bf74pw0-3-0-1:not(._bf74pw1-3-0-1), ._bf74pw2-3-0-1.active:not(._bf74pw1-3-0-1) {
+._bf74pw2-3-1-1._bf74pw0-3-1-1:not(._bf74pw1-3-1-1), ._bf74pw2-3-1-1.active:not(._bf74pw1-3-1-1) {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._bf74pw2-3-0-1._bf74pw0-3-0-1:not(._bf74pw1-3-0-1):hover, ._bf74pw2-3-0-1.active:not(._bf74pw1-3-0-1):hover {
+._bf74pw2-3-1-1._bf74pw0-3-1-1:not(._bf74pw1-3-1-1):hover, ._bf74pw2-3-1-1.active:not(._bf74pw1-3-1-1):hover {
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._bf74pw2-3-0-1._bf74pw0-3-0-1::after, ._bf74pw2-3-0-1.active::after {
+._bf74pw2-3-1-1._bf74pw0-3-1-1::after, ._bf74pw2-3-1-1.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-0-1";
-var isDisabled = "_bf74pw1-3-0-1";
-var isSelected = "_bf74pw0-3-0-1";
+var button = "_bf74pw2-3-1-1";
+var isDisabled = "_bf74pw1-3-1-1";
+var isSelected = "_bf74pw0-3-1-1";
 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-0-1';\nexport var isDisabled = '_bf74pw1-3-0-1';\nexport var isSelected = '_bf74pw0-3-0-1';"],
+  "sourcesContent": ["import './NavItem.css';\nexport var button = '_bf74pw2-3-1-1';\nexport var isDisabled = '_bf74pw1-3-1-1';\nexport var isSelected = '_bf74pw0-3-1-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,SAAS;AACb,IAAI,aAAa;AACjB,IAAI,aAAa;",
   "names": []
 }

package/esm/layouts/app-header/app-icon/AppIcon.css

@@ -1,4 +1,4 @@
-@keyframes _1dtfpz50-3-0-1 {
+@keyframes _1dtfpz50-3-1-1 {
   0% {
     opacity: 0;
   }
@@ -6,11 +6,11 @@
     opacity: 1;
   }
 }
-._1dtfpz51-3-0-1 {
+._1dtfpz51-3-1-1 {
   object-fit: contain;
 }
-._1dtfpz52-3-0-1 {
-  animation-name: _1dtfpz50-3-0-1;
+._1dtfpz52-3-1-1 {
+  animation-name: _1dtfpz50-3-1-1;
   animation-duration: var(--dt-animations-fade-in-duration-slow, 350ms);
   animation-timing-function: var(--dt-animations-fade-in-easing, cubic-bezier(0.5, 0, 1, 1));
 }

package/esm/layouts/app-header/app-icon/AppIcon.js

@@ -1,17 +1,18 @@
 import { jsx } from "react/jsx-runtime";
 import {
-  useQuery,
   QueryClient,
-  QueryClientProvider
+  QueryClientProvider,
+  useQuery
 } from "@tanstack/react-query";
 import clsx from "clsx";
-import { useMemo, useState, useEffect } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { getAppId, getAppVersion } from "@dynatrace-sdk/app-environment";
 import * as styles from "./AppIcon.sty.js";
 import { FallbackIcon } from "./FallbackIcon.js";
 import { fetchIcon } from "./icon-utils.js";
 import { Skeleton } from "../../../content/skeleton/Skeleton.js";
 import { isProduction } from "../../../core/utils/is-node-environment.js";
+const COMPONENT_NAME = "AppIcon";
 const AppIconRoot = (props) => {
   const [fadeIn, setFadeIn] = useState(false);
   const sdkAppId = useMemo(getAppId, []);
@@ -57,7 +58,8 @@ const AppIconRoot = (props) => {
       alt,
       className: clsx(styles.icon({ fadeIn }), consumerClassName),
       style: consumerStyle,
-      ...remainingProps
+      ...remainingProps,
+      "data-dt-component": COMPONENT_NAME
     }
   );
 };
@@ -65,7 +67,7 @@ const appIconQueryClient = new QueryClient();
 const AppIcon = (props) => {
   return /* @__PURE__ */ jsx(QueryClientProvider, { client: appIconQueryClient, children: /* @__PURE__ */ jsx(AppIconRoot, { ...props }) });
 };
-AppIcon.displayName = "AppHeader.AppIcon";
+AppIcon.displayName = "AppIcon";
 export {
   AppIcon
 };

package/esm/layouts/app-header/app-icon/AppIcon.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/app-header/app-icon/AppIcon.tsx"],
-  "sourcesContent": ["import {\n  useQuery,\n  QueryClient,\n  QueryClientProvider,\n} from '@tanstack/react-query';\nimport clsx from 'clsx';\nimport { useMemo, useState, useEffect } from 'react';\n\nimport { getAppId, getAppVersion } from '@dynatrace-sdk/app-environment';\n\nimport * as styles from './AppIcon.sty.js';\nimport { FallbackIcon } from './FallbackIcon.js';\nimport { fetchIcon } from './icon-utils.js';\nimport { Skeleton } from '../../../content/skeleton/Skeleton.js';\nimport { AriaLabelingProps } from '../../../core/types/a11y-props.js';\nimport { DataTestId } from '../../../core/types/data-props.js';\nimport { StylingProps } from '../../../core/types/styling-props.js';\nimport { WithChildren } from '../../../core/types/with-children.js';\nimport { isProduction } from '../../../core/utils/is-node-environment.js';\n\n// #region Typings\n/**\n * Accepted properties for the AppIcon.\n * @public\n */\nexport interface AppIconProps\n  extends AriaLabelingProps,\n    WithChildren,\n    StylingProps,\n    DataTestId {\n  /**\n   * The path to the app icon. If not specified, the icon from the app registry is retrieved automatically.\n   */\n  src?: string;\n  /**\n   * The alternative text representation for the image when it's not loaded. If not specified, the app name is used.\n   */\n  alt?: string;\n}\n// #endregion\n\nconst AppIconRoot = (props: AppIconProps) => {\n  const [fadeIn, setFadeIn] = useState(false);\n\n  const sdkAppId = useMemo(getAppId, []);\n  const sdkAppVersion = useMemo(getAppVersion, []);\n  const {\n    src = `/platform/app-engine/registry/v1/app-icons/${sdkAppId}?appVersion=${encodeURIComponent(\n      sdkAppVersion,\n    )}`,\n    alt,\n    children,\n    className: consumerClassName,\n    style: consumerStyle = {},\n    'data-testid': dataTestId,\n    ...remainingProps\n  }: AppIconProps = props;\n  const {\n    data: iconSrc,\n    isLoading,\n    isError,\n  } = useQuery({\n    queryKey: ['app-icon', src],\n    queryFn: () => fetchIcon(src),\n    retry: isProduction() ? undefined : false,\n  });\n\n  useEffect(() => {\n    if (isLoading) {\n      setFadeIn(isLoading);\n    }\n  }, [isLoading]);\n\n  if (isLoading) {\n    return <Skeleton width={20} height={20} />;\n  }\n\n  if (isError) {\n    return <FallbackIcon size={20} />;\n  }\n\n  return (\n    <img\n      src={iconSrc}\n      data-testid={dataTestId}\n      width={20}\n      height={20}\n      alt={alt}\n      className={clsx(styles.icon({ fadeIn }), consumerClassName)}\n      style={consumerStyle}\n      {...remainingProps}\n    />\n  );\n};\n\nconst appIconQueryClient = new QueryClient();\n\n/**\n * The `AppIcon` component renders the icon used for the app on the platform.\n * You can also provide a link to an icon to render that icon instead.\n * @public\n */\nexport const AppIcon = (props: AppIconProps) => {\n  return (\n    <QueryClientProvider client={appIconQueryClient}>\n      <AppIconRoot {...props} />\n    </QueryClientProvider>\n  );\n};\n\nAppIcon.displayName = 'AppHeader.AppIcon';\n"],
-  "mappings": "AA0EW;AA1EX;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,OAAO,UAAU;AACjB,SAAS,SAAS,UAAU,iBAAiB;AAE7C,SAAS,UAAU,qBAAqB;AAExC,YAAY,YAAY;AACxB,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AAKzB,SAAS,oBAAoB;AAuB7B,MAAM,cAAc,CAAC,UAAwB;AAC3C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAE1C,QAAM,WAAW,QAAQ,UAAU,CAAC,CAAC;AACrC,QAAM,gBAAgB,QAAQ,eAAe,CAAC,CAAC;AAC/C,QAAM;AAAA,IACJ,MAAM,8CAA8C,QAAQ,eAAe;AAAA,MACzE;AAAA,IACF,CAAC;AAAA,IACD;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO,gBAAgB,CAAC;AAAA,IACxB,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAkB;AAClB,QAAM;AAAA,IACJ,MAAM;AAAA,IACN;AAAA,IACA;AAAA,EACF,IAAI,SAAS;AAAA,IACX,UAAU,CAAC,YAAY,GAAG;AAAA,IAC1B,SAAS,MAAM,UAAU,GAAG;AAAA,IAC5B,OAAO,aAAa,IAAI,SAAY;AAAA,EACtC,CAAC;AAED,YAAU,MAAM;AACd,QAAI,WAAW;AACb,gBAAU,SAAS;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,MAAI,WAAW;AACb,WAAO,oBAAC,YAAS,OAAO,IAAI,QAAQ,IAAI;AAAA,EAC1C;AAEA,MAAI,SAAS;AACX,WAAO,oBAAC,gBAAa,MAAM,IAAI;AAAA,EACjC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,eAAa;AAAA,MACb,OAAO;AAAA,MACP,QAAQ;AAAA,MACR;AAAA,MACA,WAAW,KAAK,OAAO,KAAK,EAAE,OAAO,CAAC,GAAG,iBAAiB;AAAA,MAC1D,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,MAAM,qBAAqB,IAAI,YAAY;AAOpC,MAAM,UAAU,CAAC,UAAwB;AAC9C,SACE,oBAAC,uBAAoB,QAAQ,oBAC3B,8BAAC,eAAa,GAAG,OAAO,GAC1B;AAEJ;AAEA,QAAQ,cAAc;",
+  "sourcesContent": ["import {\n  QueryClient,\n  QueryClientProvider,\n  useQuery,\n} from '@tanstack/react-query';\nimport clsx from 'clsx';\nimport { useEffect, useMemo, useState } from 'react';\n\nimport { getAppId, getAppVersion } from '@dynatrace-sdk/app-environment';\n\nimport * as styles from './AppIcon.sty.js';\nimport { FallbackIcon } from './FallbackIcon.js';\nimport { fetchIcon } from './icon-utils.js';\nimport { Skeleton } from '../../../content/skeleton/Skeleton.js';\nimport { AriaLabelingProps } from '../../../core/types/a11y-props.js';\nimport { DataTestId } from '../../../core/types/data-props.js';\nimport { StylingProps } from '../../../core/types/styling-props.js';\nimport { WithChildren } from '../../../core/types/with-children.js';\nimport { isProduction } from '../../../core/utils/is-node-environment.js';\n\nconst COMPONENT_NAME = 'AppIcon';\n\n// #region Typings\n/**\n * Accepted properties for the AppIcon.\n * @public\n */\nexport interface AppIconProps\n  extends AriaLabelingProps,\n    WithChildren,\n    StylingProps,\n    DataTestId {\n  /**\n   * The path to the app icon. If not specified, the icon from the app registry is retrieved automatically.\n   */\n  src?: string;\n  /**\n   * The alternative text representation for the image when it's not loaded. If not specified, the app name is used.\n   */\n  alt?: string;\n}\n// #endregion\n\nconst AppIconRoot = (props: AppIconProps) => {\n  const [fadeIn, setFadeIn] = useState(false);\n\n  const sdkAppId = useMemo(getAppId, []);\n  const sdkAppVersion = useMemo(getAppVersion, []);\n  const {\n    src = `/platform/app-engine/registry/v1/app-icons/${sdkAppId}?appVersion=${encodeURIComponent(\n      sdkAppVersion,\n    )}`,\n    alt,\n    children,\n    className: consumerClassName,\n    style: consumerStyle = {},\n    'data-testid': dataTestId,\n    ...remainingProps\n  }: AppIconProps = props;\n  const {\n    data: iconSrc,\n    isLoading,\n    isError,\n  } = useQuery({\n    queryKey: ['app-icon', src],\n    queryFn: () => fetchIcon(src),\n    retry: isProduction() ? undefined : false,\n  });\n\n  useEffect(() => {\n    if (isLoading) {\n      setFadeIn(isLoading);\n    }\n  }, [isLoading]);\n\n  if (isLoading) {\n    return <Skeleton width={20} height={20} />;\n  }\n\n  if (isError) {\n    return <FallbackIcon size={20} />;\n  }\n\n  return (\n    <img\n      src={iconSrc}\n      data-testid={dataTestId}\n      width={20}\n      height={20}\n      alt={alt}\n      className={clsx(styles.icon({ fadeIn }), consumerClassName)}\n      style={consumerStyle}\n      {...remainingProps}\n      data-dt-component={COMPONENT_NAME}\n    />\n  );\n};\n\nconst appIconQueryClient = new QueryClient();\n\n/**\n * The `AppIcon` component renders the icon used for the app on the platform.\n * You can also provide a link to an icon to render that icon instead.\n * @public\n */\nexport const AppIcon = (props: AppIconProps) => {\n  return (\n    <QueryClientProvider client={appIconQueryClient}>\n      <AppIconRoot {...props} />\n    </QueryClientProvider>\n  );\n};\n\nAppIcon.displayName = 'AppIcon';\n"],
+  "mappings": "AA4EW;AA5EX;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,OAAO,UAAU;AACjB,SAAS,WAAW,SAAS,gBAAgB;AAE7C,SAAS,UAAU,qBAAqB;AAExC,YAAY,YAAY;AACxB,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AAKzB,SAAS,oBAAoB;AAE7B,MAAM,iBAAiB;AAuBvB,MAAM,cAAc,CAAC,UAAwB;AAC3C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAE1C,QAAM,WAAW,QAAQ,UAAU,CAAC,CAAC;AACrC,QAAM,gBAAgB,QAAQ,eAAe,CAAC,CAAC;AAC/C,QAAM;AAAA,IACJ,MAAM,8CAA8C,QAAQ,eAAe;AAAA,MACzE;AAAA,IACF,CAAC;AAAA,IACD;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO,gBAAgB,CAAC;AAAA,IACxB,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAkB;AAClB,QAAM;AAAA,IACJ,MAAM;AAAA,IACN;AAAA,IACA;AAAA,EACF,IAAI,SAAS;AAAA,IACX,UAAU,CAAC,YAAY,GAAG;AAAA,IAC1B,SAAS,MAAM,UAAU,GAAG;AAAA,IAC5B,OAAO,aAAa,IAAI,SAAY;AAAA,EACtC,CAAC;AAED,YAAU,MAAM;AACd,QAAI,WAAW;AACb,gBAAU,SAAS;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,MAAI,WAAW;AACb,WAAO,oBAAC,YAAS,OAAO,IAAI,QAAQ,IAAI;AAAA,EAC1C;AAEA,MAAI,SAAS;AACX,WAAO,oBAAC,gBAAa,MAAM,IAAI;AAAA,EACjC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,eAAa;AAAA,MACb,OAAO;AAAA,MACP,QAAQ;AAAA,MACR;AAAA,MACA,WAAW,KAAK,OAAO,KAAK,EAAE,OAAO,CAAC,GAAG,iBAAiB;AAAA,MAC1D,OAAO;AAAA,MACN,GAAG;AAAA,MACJ,qBAAmB;AAAA;AAAA,EACrB;AAEJ;AAEA,MAAM,qBAAqB,IAAI,YAAY;AAOpC,MAAM,UAAU,CAAC,UAAwB;AAC9C,SACE,oBAAC,uBAAoB,QAAQ,oBAC3B,8BAAC,eAAa,GAAG,OAAO,GAC1B;AAEJ;AAEA,QAAQ,cAAc;",
   "names": []
 }

package/esm/layouts/app-header/app-icon/AppIcon.sty.js

@@ -1,6 +1,6 @@
 import "./AppIcon.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var icon = _7a468({ defaultClassName: "_1dtfpz51-3-0-1", variantClassNames: { fadeIn: { true: "_1dtfpz52-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
+var icon = _7a468({ defaultClassName: "_1dtfpz51-3-1-1", variantClassNames: { fadeIn: { true: "_1dtfpz52-3-1-1" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   icon
 };

package/esm/layouts/app-header/app-icon/AppIcon.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/app-header/app-icon/AppIcon.css.ts"],
-  "sourcesContent": ["import './AppIcon.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var icon = _7a468({defaultClassName:'_1dtfpz51-3-0-1',variantClassNames:{fadeIn:{true:'_1dtfpz52-3-0-1'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './AppIcon.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var icon = _7a468({defaultClassName:'_1dtfpz51-3-1-1',variantClassNames:{fadeIn:{true:'_1dtfpz52-3-1-1'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,OAAO,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,QAAO,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/layouts/container/Container.css

@@ -1,8 +1,8 @@
-._f32lcd0-3-0-1 {
+._f32lcd0-3-1-1 {
   border-style: var(--dt-borders-style-default, solid);
   border-width: var(--dt-borders-width-emphasized, 2px);
   border-radius: var(--dt-borders-radius-container-default, 9px);
-  color: var(--_6levse0-3-0-1);
-  border-color: var(--_6levse2-3-0-1);
-  background-color: var(--_6levse1-3-0-1);
+  color: var(--_6levse0-3-1-1);
+  border-color: var(--_6levse2-3-1-1);
+  background-color: var(--_6levse1-3-1-1);
 }

package/esm/layouts/container/Container.js

@@ -14,6 +14,7 @@ import {
 import {
   getSpacingSprinkles
 } from "../../styles/getSpacingSprinkles.js";
+const COMPONENT_NAME = "Container";
 const ContainerColoringContext = createContext({
   variant: "default",
   color: "neutral",
@@ -33,6 +34,7 @@ const Container = /* @__PURE__ */ forwardRef(
     "data-testid": dataTestId,
     "data-dtrum-mask": dataDtrumMask,
     "data-dtrum-allow": dataDtrumAllow,
+    "data-dt-component": dataDtComponent = COMPONENT_NAME,
     ...remainingProps
   }, ref) => {
     const [spacingClasses, sprinkleRestProps] = getSpacingSprinkles(
@@ -63,6 +65,7 @@ const Container = /* @__PURE__ */ forwardRef(
         "data-dtrum-mask": dataDtrumMask,
         "data-dtrum-allow": dataDtrumAllow,
         ...sizeRestProps,
+        "data-dt-component": dataDtComponent,
         children
       }
     ) });

package/esm/layouts/container/Container.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/container/Container.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  createContext,\n  forwardRef,\n  useContext,\n  useMemo,\n  type ElementType,\n  type ReactElement,\n} from 'react';\n\nimport { containerCSS } from './Container.sty.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { PolymorphicComponentProps } from '../../core/types/polymorph.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\nimport { containerColorsCSS } from '../../styles/container.sty.js';\nimport {\n  getLayoutSizeStyles,\n  type LayoutSizeProps,\n} from '../../styles/getLayoutSizeStyles.js';\nimport {\n  getSpacingSprinkles,\n  type SpacingProps,\n} from '../../styles/getSpacingSprinkles.js';\n\n/** @internal */\nexport type ContainerColoring = {\n  /**\n   * The visual style of the container.\n   * @defaultValue 'default'\n   */\n  variant: 'minimal' | 'default' | 'emphasized' | 'accent';\n  /**\n   * The color of the container. This should be chosen based on the context\n   * the container is used in.\n   * @defaultValue 'neutral'\n   */\n  color: 'primary' | 'neutral' | 'success' | 'warning' | 'critical';\n\n  default: boolean;\n};\n\nconst ContainerColoringContext = createContext<ContainerColoring>({\n  variant: 'default',\n  color: 'neutral',\n  default: true,\n});\n\n/**\n * Context used for passing down color and variant information for accent inheritance\n * @internal\n */\nexport const useContainerColoring = () => {\n  return useContext(ContainerColoringContext);\n};\n\n/**\n * Accepted properties for Container\n * @public\n */\nexport interface ContainerOwnProps\n  extends WithChildren,\n    DataTestId,\n    StylingProps,\n    SpacingProps,\n    LayoutSizeProps,\n    MaskingProps {\n  /**\n   * The visual style of the container.\n   * @defaultValue 'default'\n   */\n  variant?: 'minimal' | 'default' | 'emphasized' | 'accent';\n  /**\n   * The color of the container. This should be chosen based on the context\n   * the container is used in.\n   * @defaultValue 'neutral'\n   */\n  color?: 'primary' | 'neutral' | 'success' | 'warning' | 'critical';\n}\n\n/**\n * Merge own props with others inherited from the underlying element type\n * @public\n */\nexport type ContainerProps<E extends ElementType> = PolymorphicComponentProps<\n  E,\n  ContainerOwnProps\n>;\n\n/**\n * Containers can be used to group content that is related. Additionally, they emphasize and highlight your grouped content.\n * @public\n */\nexport const Container: <E extends ElementType = 'div'>(\n  props: ContainerProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n  <E extends ElementType>(\n    {\n      as,\n      children,\n      variant = 'default',\n      color = 'neutral',\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    }: ContainerProps<E>,\n    ref: typeof remainingProps.ref,\n  ) => {\n    const [spacingClasses, sprinkleRestProps] = getSpacingSprinkles(\n      remainingProps,\n      { padding: 16 },\n    );\n\n    const [sizeStyles, sizeRestProps] = getLayoutSizeStyles(sprinkleRestProps);\n\n    // Make the component polymorphic\n    const Component = as || 'div';\n\n    const context = useMemo(\n      () => ({ color, variant, default: false }),\n      [color, variant],\n    );\n\n    return (\n      <ContainerColoringContext.Provider value={context}>\n        <Component\n          ref={ref}\n          className={clsx(\n            containerColorsCSS({ color, variant }),\n            containerCSS,\n            spacingClasses,\n            consumerClassName,\n          )}\n          style={{\n            ...sizeStyles,\n            ...consumerStyle,\n          }}\n          data-testid={dataTestId}\n          data-dtrum-mask={dataDtrumMask}\n          data-dtrum-allow={dataDtrumAllow}\n          {...sizeRestProps}\n        >\n          {children}\n        </Component>\n      </ContainerColoringContext.Provider>\n    );\n  },\n);\n\n(Container as typeof Container & { displayName: string }).displayName =\n  'Container';\n"],
-  "mappings": "AAiIQ;AAjIR,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAEP,SAAS,oBAAoB;AAM7B,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,OAEK;AACP;AAAA,EACE;AAAA,OAEK;AAmBP,MAAM,2BAA2B,cAAiC;AAAA,EAChE,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AACX,CAAC;AAMM,MAAM,uBAAuB,MAAM;AACxC,SAAO,WAAW,wBAAwB;AAC5C;AAuCO,MAAM,YAE8B;AAAA,EACzC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,CAAC,gBAAgB,iBAAiB,IAAI;AAAA,MAC1C;AAAA,MACA,EAAE,SAAS,GAAG;AAAA,IAChB;AAEA,UAAM,CAAC,YAAY,aAAa,IAAI,oBAAoB,iBAAiB;AAGzE,UAAM,YAAY,MAAM;AAExB,UAAM,UAAU;AAAA,MACd,OAAO,EAAE,OAAO,SAAS,SAAS,MAAM;AAAA,MACxC,CAAC,OAAO,OAAO;AAAA,IACjB;AAEA,WACE,oBAAC,yBAAyB,UAAzB,EAAkC,OAAO,SACxC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT,mBAAmB,EAAE,OAAO,QAAQ,CAAC;AAAA,UACrC;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,OAAO;AAAA,UACL,GAAG;AAAA,UACH,GAAG;AAAA,QACL;AAAA,QACA,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QACjB,GAAG;AAAA,QAEH;AAAA;AAAA,IACH,GACF;AAAA,EAEJ;AACF;AAEC,UAAyD,cACxD;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  createContext,\n  type ElementType,\n  forwardRef,\n  type ReactElement,\n  useContext,\n  useMemo,\n} from 'react';\n\nimport { containerCSS } from './Container.sty.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { PolymorphicComponentProps } from '../../core/types/polymorph.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\nimport { containerColorsCSS } from '../../styles/container.sty.js';\nimport {\n  getLayoutSizeStyles,\n  type LayoutSizeProps,\n} from '../../styles/getLayoutSizeStyles.js';\nimport {\n  getSpacingSprinkles,\n  type SpacingProps,\n} from '../../styles/getSpacingSprinkles.js';\n\nconst COMPONENT_NAME = 'Container';\n\n/** @internal */\nexport type ContainerColoring = {\n  /**\n   * The visual style of the container.\n   * @defaultValue 'default'\n   */\n  variant: 'minimal' | 'default' | 'emphasized' | 'accent';\n  /**\n   * The color of the container. This should be chosen based on the context\n   * the container is used in.\n   * @defaultValue 'neutral'\n   */\n  color: 'primary' | 'neutral' | 'success' | 'warning' | 'critical';\n\n  default: boolean;\n};\n\nconst ContainerColoringContext = createContext<ContainerColoring>({\n  variant: 'default',\n  color: 'neutral',\n  default: true,\n});\n\n/**\n * Context used for passing down color and variant information for accent inheritance\n * @internal\n */\nexport const useContainerColoring = () => {\n  return useContext(ContainerColoringContext);\n};\n\n/**\n * Accepted properties for Container\n * @public\n */\nexport interface ContainerOwnProps\n  extends WithChildren,\n    DataTestId,\n    StylingProps,\n    SpacingProps,\n    LayoutSizeProps,\n    MaskingProps {\n  /**\n   * The visual style of the container.\n   * @defaultValue 'default'\n   */\n  variant?: 'minimal' | 'default' | 'emphasized' | 'accent';\n  /**\n   * The color of the container. This should be chosen based on the context\n   * the container is used in.\n   * @defaultValue 'neutral'\n   */\n  color?: 'primary' | 'neutral' | 'success' | 'warning' | 'critical';\n}\n\n/**\n * Merge own props with others inherited from the underlying element type\n * @public\n */\nexport type ContainerProps<E extends ElementType> = PolymorphicComponentProps<\n  E,\n  ContainerOwnProps\n>;\n\n/**\n * Containers can be used to group content that is related. Additionally, they emphasize and highlight your grouped content.\n * @public\n */\nexport const Container: <E extends ElementType = 'div'>(\n  props: ContainerProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n  <E extends ElementType>(\n    {\n      as,\n      children,\n      variant = 'default',\n      color = 'neutral',\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      'data-dt-component': dataDtComponent = COMPONENT_NAME,\n      ...remainingProps\n    }: ContainerProps<E>,\n    ref: typeof remainingProps.ref,\n  ) => {\n    const [spacingClasses, sprinkleRestProps] = getSpacingSprinkles(\n      remainingProps,\n      { padding: 16 },\n    );\n\n    const [sizeStyles, sizeRestProps] = getLayoutSizeStyles(sprinkleRestProps);\n\n    // Make the component polymorphic\n    const Component = as || 'div';\n\n    const context = useMemo(\n      () => ({ color, variant, default: false }),\n      [color, variant],\n    );\n\n    return (\n      <ContainerColoringContext.Provider value={context}>\n        <Component\n          ref={ref}\n          className={clsx(\n            containerColorsCSS({ color, variant }),\n            containerCSS,\n            spacingClasses,\n            consumerClassName,\n          )}\n          style={{\n            ...sizeStyles,\n            ...consumerStyle,\n          }}\n          data-testid={dataTestId}\n          data-dtrum-mask={dataDtrumMask}\n          data-dtrum-allow={dataDtrumAllow}\n          {...sizeRestProps}\n          data-dt-component={dataDtComponent}\n        >\n          {children}\n        </Component>\n      </ContainerColoringContext.Provider>\n    );\n  },\n);\n\n(Container as typeof Container & { displayName: string }).displayName =\n  'Container';\n"],
+  "mappings": "AAoIQ;AApIR,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EAEA;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,oBAAoB;AAM7B,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,OAEK;AACP;AAAA,EACE;AAAA,OAEK;AAEP,MAAM,iBAAiB;AAmBvB,MAAM,2BAA2B,cAAiC;AAAA,EAChE,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AACX,CAAC;AAMM,MAAM,uBAAuB,MAAM;AACxC,SAAO,WAAW,wBAAwB;AAC5C;AAuCO,MAAM,YAE8B;AAAA,EACzC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,qBAAqB,kBAAkB;AAAA,IACvC,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,CAAC,gBAAgB,iBAAiB,IAAI;AAAA,MAC1C;AAAA,MACA,EAAE,SAAS,GAAG;AAAA,IAChB;AAEA,UAAM,CAAC,YAAY,aAAa,IAAI,oBAAoB,iBAAiB;AAGzE,UAAM,YAAY,MAAM;AAExB,UAAM,UAAU;AAAA,MACd,OAAO,EAAE,OAAO,SAAS,SAAS,MAAM;AAAA,MACxC,CAAC,OAAO,OAAO;AAAA,IACjB;AAEA,WACE,oBAAC,yBAAyB,UAAzB,EAAkC,OAAO,SACxC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT,mBAAmB,EAAE,OAAO,QAAQ,CAAC;AAAA,UACrC;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,OAAO;AAAA,UACL,GAAG;AAAA,UACH,GAAG;AAAA,QACL;AAAA,QACA,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QACjB,GAAG;AAAA,QACJ,qBAAmB;AAAA,QAElB;AAAA;AAAA,IACH,GACF;AAAA,EAEJ;AACF;AAEC,UAAyD,cACxD;",
   "names": []
 }

package/esm/layouts/container/Container.sty.js

@@ -1,6 +1,6 @@
 import "../../styles/container.css";
 import "./Container.css";
-var containerCSS = "_f32lcd0-3-0-1";
+var containerCSS = "_f32lcd0-3-1-1";
 export {
   containerCSS
 };

package/esm/layouts/container/Container.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/container/Container.css.ts"],
-  "sourcesContent": ["import '../../styles/container.css';\nimport './Container.css';\nexport var containerCSS = '_f32lcd0-3-0-1';"],
+  "sourcesContent": ["import '../../styles/container.css';\nimport './Container.css';\nexport var containerCSS = '_f32lcd0-3-1-1';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,eAAe;",
   "names": []
 }

package/esm/layouts/divider/Divider.css

@@ -1,21 +1,21 @@
-._1thxv8m0-3-0-1 {
+._1thxv8m0-3-1-1 {
   border: none;
   margin: 0;
   overflow-wrap: break-word;
-  background-color: var(--_k096v42-3-0-1);
+  background-color: var(--_k096v42-3-1-1);
 }
-._1thxv8m1-3-0-1 {
+._1thxv8m1-3-1-1 {
   width: 100%;
   height: var(--dt-borders-width-default, 1px);
 }
-._1thxv8m2-3-0-1 {
+._1thxv8m2-3-1-1 {
   width: var(--dt-borders-width-default, 1px);
   height: 100%;
 }
-._1thxv8m5-3-0-1 {
+._1thxv8m5-3-1-1 {
   flex-shrink: 0;
 }
-._1thxv8m6-3-0-1 {
+._1thxv8m6-3-1-1 {
   flex-shrink: 0;
   width: var(--dt-borders-width-default, 1px);
   height: auto;

package/esm/layouts/divider/Divider.js

@@ -3,6 +3,7 @@ import clsx from "clsx";
 import { forwardRef } from "react";
 import { dividerCSS } from "./Divider.sty.js";
 import { colorUtilsCSS } from "../../core/utils/colorUtils.sty.js";
+const COMPONENT_NAME = "Divider";
 const Divider = /* @__PURE__ */ forwardRef((props, ref) => {
   const {
     orientation = "horizontal",
@@ -29,7 +30,8 @@ const Divider = /* @__PURE__ */ forwardRef((props, ref) => {
         consumerClassName
       ),
       style: consumerStyle,
-      ...remainingProps
+      ...remainingProps,
+      "data-dt-component": COMPONENT_NAME
     }
   );
 });