@dynatrace/strato-components 3.11.2 → 3.12.0

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

@@ -1,4 +1,4 @@
-._otmjah0-3-11-2 {
+._otmjah0-3-12-0 {
   position: relative;
   display: flex;
   border-radius: var(--dt-borders-radius-field-default, 6px);
@@ -11,17 +11,17 @@
   cursor: pointer;
   max-width: unset;
 }
-._otmjah0-3-11-2:hover {
+._otmjah0-3-12-0: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-11-2:active {
+._otmjah0-3-12-0: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-11-2:after {
+._otmjah0-3-12-0: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-11-2._otmjah1-3-11-2 {
+._otmjah1-3-12-0._otmjah1-3-12-0 {
   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-11-2._otmjah2-3-11-2 {
+._otmjah2-3-12-0._otmjah2-3-12-0 {
   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-11-2 {
+._otmjah3-3-12-0 {
   cursor: default;
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._otmjah3-3-11-2:hover {
+._otmjah3-3-12-0:hover {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   background-color: inherit;
   text-decoration: none;
 }
-._otmjah4-3-11-2.active {
+._otmjah4-3-12-0.active {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._otmjah4-3-11-2._otmjah3-3-11-2.active {
+._otmjah4-3-12-0._otmjah3-3-12-0.active {
   color: var(--dt-colors-text-primary-disabled, #595a7d80);
 }
-._otmjah4-3-11-2:not(._otmjah3-3-11-2).active:hover {
+._otmjah4-3-12-0:not(._otmjah3-3-12-0).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-11-2:not([role="menuitem"]).active:active {
+._otmjah4-3-12-0: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-11-2._otmjah3-3-11-2._otmjah4-3-11-2:not([role="menuitem"]).active:active {
+._otmjah4-3-12-0._otmjah3-3-12-0._otmjah4-3-12-0:not([role="menuitem"]).active:active {
   color: var(--dt-colors-text-primary-disabled, #595a7d80);
   background-color: inherit;
 }
-._otmjah4-3-11-2.active::after {
+._otmjah4-3-12-0.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-11-2._otmjah3-3-11-2.active::after {
+._otmjah4-3-12-0._otmjah3-3-12-0.active::after {
   background-color: var(--dt-colors-icon-primary-disabled, #595a7d80);
 }
-._otmjah4-3-11-2[role="menuitem"].active::after {
+._otmjah4-3-12-0[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-11-2 a {
+._otmjah4-3-12-0 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-11-2";
-var navItem = _7a468({ defaultClassName: "_otmjah0-3-11-2", variantClassNames: { density: { "default": "_otmjah1-3-11-2", condensed: "_otmjah2-3-11-2" } }, defaultVariants: {}, compoundVariants: [] });
-var navItemSelectionStyle = "_otmjah4-3-11-2";
+var disabled = "_otmjah3-3-12-0";
+var navItem = _7a468({ defaultClassName: "_otmjah0-3-12-0", variantClassNames: { density: { "default": "_otmjah1-3-12-0", condensed: "_otmjah2-3-12-0" } }, defaultVariants: {}, compoundVariants: [] });
+var navItemSelectionStyle = "_otmjah4-3-12-0";
 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-11-2';\nexport var navItem = _7a468({defaultClassName:'_otmjah0-3-11-2',variantClassNames:{density:{'default':'_otmjah1-3-11-2',condensed:'_otmjah2-3-11-2'}},defaultVariants:{},compoundVariants:[]});\nexport var navItemSelectionStyle = '_otmjah4-3-11-2';"],
+  "sourcesContent": ["import './ActionButton.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var disabled = '_otmjah3-3-12-0';\nexport var navItem = _7a468({defaultClassName:'_otmjah0-3-12-0',variantClassNames:{density:{'default':'_otmjah1-3-12-0',condensed:'_otmjah2-3-12-0'}},defaultVariants:{},compoundVariants:[]});\nexport var navItemSelectionStyle = '_otmjah4-3-12-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,WAAW;AACf,IAAI,UAAU,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,SAAQ,EAAC,WAAU,mBAAkB,WAAU,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACtL,IAAI,wBAAwB;",
   "names": []
 }

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

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

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

@@ -134,6 +134,7 @@ const ActionGroupRoot = forwardRef(
                     [actionGroupHiddenItemCSS]: !!isItemOverflowing || !!isNextItemOverflowing
                   }),
                   ...childProps[childIndex + 1],
+                  "aria-hidden": true,
                   key: childKey + 1
                 }
               )

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  Children,\n  cloneElement,\n  forwardRef,\n  Fragment,\n  type HTMLAttributes,\n  isValidElement,\n  type ReactElement,\n  type ReactNode,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\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\n    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    isValidElement(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 (isValidElement(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 (!isValidElement(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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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  Children,\n  cloneElement,\n  forwardRef,\n  Fragment,\n  type HTMLAttributes,\n  isValidElement,\n  type ReactElement,\n  type ReactNode,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\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\n    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    isValidElement(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 (isValidElement(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 (!isValidElement(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                  aria-hidden\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-11-2";
+var actionGroupHiddenItemCSS = "_1d2ks7u0-3-12-0";
 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-11-2';"],
+  "sourcesContent": ["import './ActionGroup.css';\nexport var actionGroupHiddenItemCSS = '_1d2ks7u0-3-12-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,2BAA2B;",
   "names": []
 }

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

@@ -1,13 +1,13 @@
-._bf74pw2-3-11-2 {
+._bf74pw2-3-12-0 {
   position: relative;
 }
-._bf74pw2-3-11-2._bf74pw0-3-11-2:not(._bf74pw1-3-11-2), ._bf74pw2-3-11-2.active:not(._bf74pw1-3-11-2) {
+._bf74pw2-3-12-0._bf74pw0-3-12-0:not(._bf74pw1-3-12-0), ._bf74pw2-3-12-0.active:not(._bf74pw1-3-12-0) {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._bf74pw2-3-11-2._bf74pw0-3-11-2:not(._bf74pw1-3-11-2):hover, ._bf74pw2-3-11-2.active:not(._bf74pw1-3-11-2):hover {
+._bf74pw2-3-12-0._bf74pw0-3-12-0:not(._bf74pw1-3-12-0):hover, ._bf74pw2-3-12-0.active:not(._bf74pw1-3-12-0):hover {
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._bf74pw2-3-11-2._bf74pw0-3-11-2::after, ._bf74pw2-3-11-2.active::after {
+._bf74pw2-3-12-0._bf74pw0-3-12-0::after, ._bf74pw2-3-12-0.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-11-2";
-var isDisabled = "_bf74pw1-3-11-2";
-var isSelected = "_bf74pw0-3-11-2";
+var button = "_bf74pw2-3-12-0";
+var isDisabled = "_bf74pw1-3-12-0";
+var isSelected = "_bf74pw0-3-12-0";
 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-11-2';\nexport var isDisabled = '_bf74pw1-3-11-2';\nexport var isSelected = '_bf74pw0-3-11-2';"],
+  "sourcesContent": ["import './NavItem.css';\nexport var button = '_bf74pw2-3-12-0';\nexport var isDisabled = '_bf74pw1-3-12-0';\nexport var isSelected = '_bf74pw0-3-12-0';"],
   "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-11-2 {
+@keyframes _1dtfpz50-3-12-0 {
   0% {
     opacity: 0;
   }
@@ -6,11 +6,11 @@
     opacity: 1;
   }
 }
-._1dtfpz51-3-11-2 {
+._1dtfpz51-3-12-0 {
   object-fit: contain;
 }
-._1dtfpz52-3-11-2 {
-  animation-name: _1dtfpz50-3-11-2;
+._1dtfpz52-3-12-0 {
+  animation-name: _1dtfpz50-3-12-0;
   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.sty.js

@@ -1,6 +1,6 @@
 import "./AppIcon.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var icon = _7a468({ defaultClassName: "_1dtfpz51-3-11-2", variantClassNames: { fadeIn: { true: "_1dtfpz52-3-11-2" } }, defaultVariants: {}, compoundVariants: [] });
+var icon = _7a468({ defaultClassName: "_1dtfpz51-3-12-0", variantClassNames: { fadeIn: { true: "_1dtfpz52-3-12-0" } }, 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-11-2',variantClassNames:{fadeIn:{true:'_1dtfpz52-3-11-2'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './AppIcon.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var icon = _7a468({defaultClassName:'_1dtfpz51-3-12-0',variantClassNames:{fadeIn:{true:'_1dtfpz52-3-12-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,OAAO,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,QAAO,EAAC,MAAK,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/layouts/container/Container.css

@@ -1,11 +1,11 @@
-._f32lcd0-3-11-2 {
+._f32lcd0-3-12-0 {
   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-11-2);
-  border-color: var(--_6levse2-3-11-2);
-  background-color: var(--_6levse1-3-11-2);
+  color: var(--_6levse0-3-12-0);
+  border-color: var(--_6levse2-3-12-0);
+  background-color: var(--_6levse1-3-12-0);
 }
-._1jgl8s50-3-11-2 ._f32lcd0-3-11-2 {
+._1jgl8s50-3-12-0 ._f32lcd0-3-12-0 {
   border-width: var(--dt-borders-width-default, 1px);
 }

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

@@ -1,7 +1,7 @@
 import "../../core/components/app-root/AppRoot.css";
 import "../../styles/container.css";
 import "./Container.css";
-var containerCSS = "_f32lcd0-3-11-2";
+var containerCSS = "_f32lcd0-3-12-0";
 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 '../../core/components/app-root/AppRoot.css';\nimport '../../styles/container.css';\nimport './Container.css';\nexport var containerCSS = '_f32lcd0-3-11-2';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/container.css';\nimport './Container.css';\nexport var containerCSS = '_f32lcd0-3-12-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,eAAe;",
   "names": []
 }

package/esm/layouts/divider/Divider.css

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

package/esm/layouts/divider/Divider.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/divider/Divider.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { dividerCSS } from './Divider.sty.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { type DataTestId } from '../../core/types/data-props.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { colorUtilsCSS } from '../../core/utils/colorUtils.sty.js';\n\nconst COMPONENT_NAME = 'Divider';\n\n// #region Typings\n\n/** @public\n * Divider component props.\n */\nexport interface DividerProps\n  extends StylingProps,\n    DataTestId,\n    BehaviorTrackingProps {\n  /**\n   * Orientation of the Divider component.\n   * @defaultValue 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical';\n  /**\n   * Control the HTML tag used for rendering the Divider.\n   * @defaultValue 'div'\n   */\n  as?: 'hr' | 'div';\n  /**\n   * Indicate whether the Divider is used inside a Flex component to apply the right styling.\n   * If set to false, make sure to have an explicit width/height style set on a parent HTML tag.\n   * @defaultValue true\n   */\n  flexItem?: boolean;\n  /**\n   * The color of the Divider.\n   * @defaultValue 'neutral'\n   */\n  color?: 'primary' | 'neutral' | 'success' | 'warning' | 'critical';\n  /**\n   * The visual style of the Divider.\n   * @defaultValue 'default'\n   */\n  variant?: 'default' | 'accent';\n}\n// #endregion\n\n/**\n * The `Divider` component visually separates groups of content.\n * @public\n */\nexport const Divider = /* @__PURE__ */ forwardRef<\n  HTMLDivElement | HTMLHRElement,\n  DividerProps\n>((props, ref) => {\n  const {\n    orientation = 'horizontal',\n    flexItem = true,\n    as = 'div',\n    color = 'neutral',\n    variant = 'default',\n    'data-testid': dataTestId,\n    className: consumerClassName,\n    style: consumerStyle,\n    ...remainingProps\n  } = props;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n\n  const DividerTag = as;\n\n  return (\n    <DividerTag\n      role=\"separator\"\n      aria-orientation={orientation === 'vertical' ? orientation : undefined}\n      // @ts-expect-error ref can't be div and hr here\n      ref={ref}\n      data-testid={dataTestId}\n      className={clsx(\n        colorUtilsCSS({ color, variant }),\n        dividerCSS({ orientation, flexItem }),\n        consumerClassName,\n      )}\n      style={consumerStyle}\n      {...restProps}\n      {...behavioralTrackingProps}\n      data-dt-component={COMPONENT_NAME}\n    />\n  );\n});\n\n(Divider as typeof Divider & { displayName: string }).displayName = 'Divider';\n"],
-  "mappings": "AA4EI;AA5EJ,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAE3B,SAAS,kBAAkB;AAC3B,SAAS,kCAAkC;AAI3C,SAAS,qBAAqB;AAE9B,MAAM,iBAAiB;AA4ChB,MAAM,UAA0B,2BAGrC,CAAC,OAAO,QAAQ;AAChB,QAAM;AAAA,IACJ,cAAc;AAAA,IACd,WAAW;AAAA,IACX,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,eAAe;AAAA,IACf,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAE3C,QAAM,aAAa;AAEnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,oBAAkB,gBAAgB,aAAa,cAAc;AAAA,MAE7D;AAAA,MACA,eAAa;AAAA,MACb,WAAW;AAAA,QACT,cAAc,EAAE,OAAO,QAAQ,CAAC;AAAA,QAChC,WAAW,EAAE,aAAa,SAAS,CAAC;AAAA,QACpC;AAAA,MACF;AAAA,MACA,OAAO;AAAA,MACN,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,qBAAmB;AAAA;AAAA,EACrB;AAEJ,CAAC;AAEA,QAAqD,cAAc;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { type AriaAttributes, forwardRef } from 'react';\n\nimport { dividerCSS } from './Divider.sty.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { type DataTestId } from '../../core/types/data-props.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { colorUtilsCSS } from '../../core/utils/colorUtils.sty.js';\n\nconst COMPONENT_NAME = 'Divider';\n\n// #region Typings\n\n/** @public\n * Divider component props.\n */\nexport interface DividerProps\n  extends StylingProps,\n    DataTestId,\n    BehaviorTrackingProps {\n  /**\n   * Orientation of the Divider component.\n   * @defaultValue 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical';\n  /**\n   * Control the HTML tag used for rendering the Divider.\n   * @defaultValue 'div'\n   */\n  as?: 'hr' | 'div';\n  /**\n   * Indicate whether the Divider is used inside a Flex component to apply the right styling.\n   * If set to false, make sure to have an explicit width/height style set on a parent HTML tag.\n   * @defaultValue true\n   */\n  flexItem?: boolean;\n  /**\n   * The color of the Divider.\n   * @defaultValue 'neutral'\n   */\n  color?: 'primary' | 'neutral' | 'success' | 'warning' | 'critical';\n  /**\n   * The visual style of the Divider.\n   * @defaultValue 'default'\n   */\n  variant?: 'default' | 'accent';\n  /**\n   * Hides the Divider from the accessibility tree. Set this to `true` when the\n   * Divider is purely decorative, so screen readers don't announce it as a\n   * separator.\n   */\n  'aria-hidden'?: AriaAttributes['aria-hidden'];\n}\n// #endregion\n\n/**\n * The `Divider` component visually separates groups of content.\n * @public\n */\nexport const Divider = /* @__PURE__ */ forwardRef<\n  HTMLDivElement | HTMLHRElement,\n  DividerProps\n>((props, ref) => {\n  const {\n    orientation = 'horizontal',\n    flexItem = true,\n    as = 'div',\n    color = 'neutral',\n    variant = 'default',\n    'data-testid': dataTestId,\n    className: consumerClassName,\n    style: consumerStyle,\n    ...remainingProps\n  } = props;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n\n  const DividerTag = as;\n\n  return (\n    <DividerTag\n      role=\"separator\"\n      aria-orientation={orientation === 'vertical' ? orientation : undefined}\n      // @ts-expect-error ref can't be div and hr here\n      ref={ref}\n      data-testid={dataTestId}\n      className={clsx(\n        colorUtilsCSS({ color, variant }),\n        dividerCSS({ orientation, flexItem }),\n        consumerClassName,\n      )}\n      style={consumerStyle}\n      {...restProps}\n      {...behavioralTrackingProps}\n      data-dt-component={COMPONENT_NAME}\n    />\n  );\n});\n\n(Divider as typeof Divider & { displayName: string }).displayName = 'Divider';\n"],
+  "mappings": "AAkFI;AAlFJ,OAAO,UAAU;AACjB,SAA8B,kBAAkB;AAEhD,SAAS,kBAAkB;AAC3B,SAAS,kCAAkC;AAI3C,SAAS,qBAAqB;AAE9B,MAAM,iBAAiB;AAkDhB,MAAM,UAA0B,2BAGrC,CAAC,OAAO,QAAQ;AAChB,QAAM;AAAA,IACJ,cAAc;AAAA,IACd,WAAW;AAAA,IACX,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,eAAe;AAAA,IACf,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAE3C,QAAM,aAAa;AAEnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,oBAAkB,gBAAgB,aAAa,cAAc;AAAA,MAE7D;AAAA,MACA,eAAa;AAAA,MACb,WAAW;AAAA,QACT,cAAc,EAAE,OAAO,QAAQ,CAAC;AAAA,QAChC,WAAW,EAAE,aAAa,SAAS,CAAC;AAAA,QACpC;AAAA,MACF;AAAA,MACA,OAAO;AAAA,MACN,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,qBAAmB;AAAA;AAAA,EACrB;AAEJ,CAAC;AAEA,QAAqD,cAAc;",
   "names": []
 }

package/esm/layouts/divider/Divider.sty.js

@@ -1,7 +1,7 @@
 import "../../core/utils/colorUtils.css";
 import "./Divider.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var dividerCSS = _7a468({ defaultClassName: "_1thxv8m0-3-11-2", variantClassNames: { orientation: { horizontal: "_1thxv8m1-3-11-2", vertical: "_1thxv8m2-3-11-2" }, flexItem: { true: "_1thxv8m3-3-11-2", false: "_1thxv8m4-3-11-2" } }, defaultVariants: {}, compoundVariants: [[{ orientation: "horizontal", flexItem: false }, "_1thxv8m5-3-11-2"], [{ orientation: "vertical", flexItem: true }, "_1thxv8m6-3-11-2"]] });
+var dividerCSS = _7a468({ defaultClassName: "_1thxv8m0-3-12-0", variantClassNames: { orientation: { horizontal: "_1thxv8m1-3-12-0", vertical: "_1thxv8m2-3-12-0" }, flexItem: { true: "_1thxv8m3-3-12-0", false: "_1thxv8m4-3-12-0" } }, defaultVariants: {}, compoundVariants: [[{ orientation: "horizontal", flexItem: false }, "_1thxv8m5-3-12-0"], [{ orientation: "vertical", flexItem: true }, "_1thxv8m6-3-12-0"]] });
 export {
   dividerCSS
 };

package/esm/layouts/divider/Divider.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/divider/Divider.css.ts"],
-  "sourcesContent": ["import '../../core/utils/colorUtils.css';\nimport './Divider.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var dividerCSS = _7a468({defaultClassName:'_1thxv8m0-3-11-2',variantClassNames:{orientation:{horizontal:'_1thxv8m1-3-11-2',vertical:'_1thxv8m2-3-11-2'},flexItem:{true:'_1thxv8m3-3-11-2',false:'_1thxv8m4-3-11-2'}},defaultVariants:{},compoundVariants:[[{orientation:'horizontal',flexItem:false},'_1thxv8m5-3-11-2'],[{orientation:'vertical',flexItem:true},'_1thxv8m6-3-11-2']]});"],
+  "sourcesContent": ["import '../../core/utils/colorUtils.css';\nimport './Divider.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var dividerCSS = _7a468({defaultClassName:'_1thxv8m0-3-12-0',variantClassNames:{orientation:{horizontal:'_1thxv8m1-3-12-0',vertical:'_1thxv8m2-3-12-0'},flexItem:{true:'_1thxv8m3-3-12-0',false:'_1thxv8m4-3-12-0'}},defaultVariants:{},compoundVariants:[[{orientation:'horizontal',flexItem:false},'_1thxv8m5-3-12-0'],[{orientation:'vertical',flexItem:true},'_1thxv8m6-3-12-0']]});"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,aAAa,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,aAAY,EAAC,YAAW,oBAAmB,UAAS,mBAAkB,GAAE,UAAS,EAAC,MAAK,oBAAmB,OAAM,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,aAAY,cAAa,UAAS,MAAK,GAAE,kBAAkB,GAAE,CAAC,EAAC,aAAY,YAAW,UAAS,KAAI,GAAE,kBAAkB,CAAC,EAAC,CAAC;",
   "names": []
 }