@dynatrace/strato-components 3.7.1 → 3.8.0

package/esm/navigation/breadcrumbs/Breadcrumbs.css

@@ -1,27 +1,27 @@
-._hw98ku0-3-7-1 {
+._hw98ku0-3-8-0 {
   display: flex;
   min-width: 0;
   margin: 0;
   padding: 0;
 }
-._hw98ku1-3-7-1 {
+._hw98ku1-3-8-0 {
   display: flex;
   gap: var(--dt-spacings-size-2, 2px);
   padding-right: var(--dt-spacings-size-2, 2px);
   white-space: nowrap;
 }
-._hw98ku2-3-7-1 {
+._hw98ku2-3-8-0 {
   overflow: hidden;
 }
-._hw98ku3-3-7-1 {
+._hw98ku3-3-8-0 {
   overflow: visible;
 }
-._hw98ku4-3-7-1 {
+._hw98ku4-3-8-0 {
   position: absolute;
   visibility: hidden;
   z-index: -1;
 }
-._hw98ku5-3-7-1 {
+._hw98ku5-3-8-0 {
   cursor: pointer;
   padding: 0;
   background: none;
@@ -32,18 +32,18 @@
   line-height: var(--dt-typography-text-base-emphasized-line-height, 1.4285714286);
   text-decoration: underline;
 }
-._hw98ku6-3-7-1 {
+._hw98ku6-3-8-0 {
   cursor: default;
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   text-decoration: none;
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
   pointer-events: none;
 }
-._hw98ku7-3-7-1 {
+._hw98ku7-3-8-0 {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-._hw98ku8-3-7-1 {
+._hw98ku8-3-8-0 {
   min-width: var(--dt-spacings-size-20, 20px);
   min-height: var(--dt-spacings-size-20, 20px);
   color: var(--dt-colors-icon-neutral-subdued, #595a7d);

package/esm/navigation/breadcrumbs/Breadcrumbs.sty.js

@@ -1,10 +1,10 @@
 import "./Breadcrumbs.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var breadcrumbsContainerCSS = "_hw98ku0-3-7-1";
-var breadcrumbsItemCSS = _7a468({ defaultClassName: "_hw98ku5-3-7-1", variantClassNames: { disabled: { true: "_hw98ku6-3-7-1" }, isLastItem: { true: "_hw98ku7-3-7-1" } }, defaultVariants: { disabled: false, isLastItem: false }, compoundVariants: [] });
-var breadcrumbsItemInvisibleCSS = "_hw98ku4-3-7-1";
-var breadcrumbsListItemCSS = _7a468({ defaultClassName: "_hw98ku1-3-7-1", variantClassNames: { isLastVisible: { true: "_hw98ku2-3-7-1", false: "_hw98ku3-3-7-1" } }, defaultVariants: { isLastVisible: false }, compoundVariants: [] });
-var breadcrumbsSeperatorIconCSS = "_hw98ku8-3-7-1";
+var breadcrumbsContainerCSS = "_hw98ku0-3-8-0";
+var breadcrumbsItemCSS = _7a468({ defaultClassName: "_hw98ku5-3-8-0", variantClassNames: { disabled: { true: "_hw98ku6-3-8-0" }, isLastItem: { true: "_hw98ku7-3-8-0" } }, defaultVariants: { disabled: false, isLastItem: false }, compoundVariants: [] });
+var breadcrumbsItemInvisibleCSS = "_hw98ku4-3-8-0";
+var breadcrumbsListItemCSS = _7a468({ defaultClassName: "_hw98ku1-3-8-0", variantClassNames: { isLastVisible: { true: "_hw98ku2-3-8-0", false: "_hw98ku3-3-8-0" } }, defaultVariants: { isLastVisible: false }, compoundVariants: [] });
+var breadcrumbsSeperatorIconCSS = "_hw98ku8-3-8-0";
 export {
   breadcrumbsContainerCSS,
   breadcrumbsItemCSS,

package/esm/navigation/breadcrumbs/Breadcrumbs.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/breadcrumbs/Breadcrumbs.css.ts"],
-  "sourcesContent": ["import './Breadcrumbs.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var breadcrumbsContainerCSS = '_hw98ku0-3-7-1';\nexport var breadcrumbsItemCSS = _7a468({defaultClassName:'_hw98ku5-3-7-1',variantClassNames:{disabled:{true:'_hw98ku6-3-7-1'},isLastItem:{true:'_hw98ku7-3-7-1'}},defaultVariants:{disabled:false,isLastItem:false},compoundVariants:[]});\nexport var breadcrumbsItemInvisibleCSS = '_hw98ku4-3-7-1';\nexport var breadcrumbsListItemCSS = _7a468({defaultClassName:'_hw98ku1-3-7-1',variantClassNames:{isLastVisible:{true:'_hw98ku2-3-7-1',false:'_hw98ku3-3-7-1'}},defaultVariants:{isLastVisible:false},compoundVariants:[]});\nexport var breadcrumbsSeperatorIconCSS = '_hw98ku8-3-7-1';"],
+  "sourcesContent": ["import './Breadcrumbs.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var breadcrumbsContainerCSS = '_hw98ku0-3-8-0';\nexport var breadcrumbsItemCSS = _7a468({defaultClassName:'_hw98ku5-3-8-0',variantClassNames:{disabled:{true:'_hw98ku6-3-8-0'},isLastItem:{true:'_hw98ku7-3-8-0'}},defaultVariants:{disabled:false,isLastItem:false},compoundVariants:[]});\nexport var breadcrumbsItemInvisibleCSS = '_hw98ku4-3-8-0';\nexport var breadcrumbsListItemCSS = _7a468({defaultClassName:'_hw98ku1-3-8-0',variantClassNames:{isLastVisible:{true:'_hw98ku2-3-8-0',false:'_hw98ku3-3-8-0'}},defaultVariants:{isLastVisible:false},compoundVariants:[]});\nexport var breadcrumbsSeperatorIconCSS = '_hw98ku8-3-8-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,0BAA0B;AAC9B,IAAI,qBAAqB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,UAAS,EAAC,MAAK,iBAAgB,GAAE,YAAW,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,EAAC,UAAS,OAAM,YAAW,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACjO,IAAI,8BAA8B;AAClC,IAAI,yBAAyB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,eAAc,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,EAAC,GAAE,iBAAgB,EAAC,eAAc,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAClN,IAAI,8BAA8B;",
   "names": []
 }

package/esm/navigation/menu/Content.js

@@ -7,6 +7,7 @@ import {
   forwardRef,
   useCallback
 } from "react";
+import { MenuSubLevelProvider } from "./contexts/MenuSubLevelContext.js";
 import { useMenuContext } from "./hooks/useMenuContext.js";
 import * as styles from "./Menu.sty.js";
 import { useOverlayStacking } from "../../core/hooks/useOverlayStacking.js";
@@ -63,7 +64,7 @@ const Content = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
       collisionBoundary,
       "data-dtrum-mask": dataDtrumMask,
       "data-dtrum-allow": dataDtrumAllow,
-      children
+      children: /* @__PURE__ */ jsx(MenuSubLevelProvider, { children })
     }
   ) });
 });

package/esm/navigation/menu/Content.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/menu/Content.tsx"],
-  "sourcesContent": ["import {\n  Content as RadixContent,\n  Portal as RadixPortal,\n} from '@radix-ui/react-dropdown-menu';\nimport {\n  forwardRef,\n  useCallback,\n  type KeyboardEvent as ReactKeyboardEvent,\n} from 'react';\n\nimport { useMenuContext } from './hooks/useMenuContext.js';\nimport * as styles from './Menu.sty.js';\nimport { useOverlayStacking } from '../../core/hooks/useOverlayStacking.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\n\n/**\n * @public\n */\nexport interface MenuContentProps\n  extends WithChildren,\n    MaskingProps,\n    DataTestId {\n  /**\n   * The preferred side where the menu content should be rendered relative to the\n   * trigger element. This value may be ignored if collisions occur.\n   * This prop is ignored within submenus.\n   *\n   * @defaultValue 'bottom'\n   */\n  side?: 'bottom' | 'top' | 'right' | 'left';\n  /**\n   * The horizontal position where the menu content should be rendered relative\n   * to the trigger element. This value may be ignored if collisions occur\n   * or when `side` is set to `'right'` or `'left'`.\n   * This prop is ignored within submenus.\n   *\n   * @defaultValue 'start'\n   */\n  alignment?: 'start' | 'center' | 'end';\n  /**\n   * Event handler called when focus moves to the trigger after closing.\n   * It can be prevented by calling event.preventDefault.\n   */\n  onCloseAutoFocus?: (event: Event) => void;\n  /**\n   * When true, overrides the side and align preferences to prevent collisions\n   * with boundary edges.\n   *\n   * @defaultValue true\n   */\n  avoidCollisions?: boolean;\n  /**\n   * Additional elements can be provided to be included in the boundary check for menu.\n   * By default this is the viewport.\n   */\n  collisionBoundary?: Element | null | Array<Element | null>;\n}\n\nconst SIDE_OFFSET = 4;\ntype InternalMenuContentProps = MenuContentProps & {\n  /** @internal */\n  _onTabKeyPressed: () => void;\n  /** @internal */\n  _sideOffset?: number;\n};\n\n/**\n * The component that pops out when the dropdown menu is open.\n * @public\n */\nexport const Content = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  MenuContentProps\n>((props, forwardedRef) => {\n  const {\n    side = 'bottom',\n    alignment = 'start',\n    onCloseAutoFocus,\n    avoidCollisions = true,\n    _sideOffset = SIDE_OFFSET,\n    _onTabKeyPressed,\n    children,\n    collisionBoundary,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    ...remainingProps\n  } = props as InternalMenuContentProps;\n  const tabKeyHandler = useCallback(\n    (e: ReactKeyboardEvent) => {\n      if (_onTabKeyPressed && e.key === 'Tab') {\n        _onTabKeyPressed();\n      }\n    },\n    [_onTabKeyPressed],\n  );\n  const { style } = useOverlayStacking(undefined, 'overlay');\n  const { setIsOpen } = useMenuContext();\n\n  const handleOnKeyDown = useCallback(\n    (e: ReactKeyboardEvent) => {\n      // Only close menu on escape when it is nested in other overlays (modal, sheet, ...).\n      if (e.key === 'Escape') {\n        setIsOpen(false);\n        e.stopPropagation();\n      }\n    },\n    [setIsOpen],\n  );\n\n  return (\n    <RadixPortal>\n      <RadixContent\n        {...remainingProps}\n        data-testid={dataTestId}\n        ref={forwardedRef}\n        side={side}\n        align={alignment}\n        onKeyUp={tabKeyHandler}\n        onCloseAutoFocus={onCloseAutoFocus}\n        sideOffset={_sideOffset}\n        avoidCollisions={avoidCollisions}\n        className={styles.content}\n        style={{ zIndex: style.zIndex }}\n        onKeyDown={handleOnKeyDown}\n        collisionBoundary={collisionBoundary}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n      >\n        {children}\n      </RadixContent>\n    </RadixPortal>\n  );\n});\n\n(Content as typeof Content & { displayName: string }).displayName =\n  'Menu.Content';\n"],
-  "mappings": "AAkHM;AAlHN;AAAA,EACE,WAAW;AAAA,EACX,UAAU;AAAA,OACL;AACP;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AAEP,SAAS,sBAAsB;AAC/B,YAAY,YAAY;AACxB,SAAS,0BAA0B;AAgDnC,MAAM,cAAc;AAYb,MAAM,UAA0B,2BAGrC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ,OAAO;AAAA,IACP,YAAY;AAAA,IACZ;AAAA,IACA,kBAAkB;AAAA,IAClB,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAA0B;AACzB,UAAI,oBAAoB,EAAE,QAAQ,OAAO;AACvC,yBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB;AAAA,EACnB;AACA,QAAM,EAAE,MAAM,IAAI,mBAAmB,QAAW,SAAS;AACzD,QAAM,EAAE,UAAU,IAAI,eAAe;AAErC,QAAM,kBAAkB;AAAA,IACtB,CAAC,MAA0B;AAEzB,UAAI,EAAE,QAAQ,UAAU;AACtB,kBAAU,KAAK;AACf,UAAE,gBAAgB;AAAA,MACpB;AAAA,IACF;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AAEA,SACE,oBAAC,eACC;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAa;AAAA,MACb,KAAK;AAAA,MACL;AAAA,MACA,OAAO;AAAA,MACP,SAAS;AAAA,MACT;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,MACA,WAAW,OAAO;AAAA,MAClB,OAAO,EAAE,QAAQ,MAAM,OAAO;AAAA,MAC9B,WAAW;AAAA,MACX;AAAA,MACA,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAEjB;AAAA;AAAA,EACH,GACF;AAEJ,CAAC;AAEA,QAAqD,cACpD;",
+  "sourcesContent": ["import {\n  Content as RadixContent,\n  Portal as RadixPortal,\n} from '@radix-ui/react-dropdown-menu';\nimport {\n  forwardRef,\n  useCallback,\n  type KeyboardEvent as ReactKeyboardEvent,\n} from 'react';\n\nimport { MenuSubLevelProvider } from './contexts/MenuSubLevelContext.js';\nimport { useMenuContext } from './hooks/useMenuContext.js';\nimport * as styles from './Menu.sty.js';\nimport { useOverlayStacking } from '../../core/hooks/useOverlayStacking.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\n\n/**\n * @public\n */\nexport interface MenuContentProps\n  extends WithChildren,\n    MaskingProps,\n    DataTestId {\n  /**\n   * The preferred side where the menu content should be rendered relative to the\n   * trigger element. This value may be ignored if collisions occur.\n   * This prop is ignored within submenus.\n   *\n   * @defaultValue 'bottom'\n   */\n  side?: 'bottom' | 'top' | 'right' | 'left';\n  /**\n   * The horizontal position where the menu content should be rendered relative\n   * to the trigger element. This value may be ignored if collisions occur\n   * or when `side` is set to `'right'` or `'left'`.\n   * This prop is ignored within submenus.\n   *\n   * @defaultValue 'start'\n   */\n  alignment?: 'start' | 'center' | 'end';\n  /**\n   * Event handler called when focus moves to the trigger after closing.\n   * It can be prevented by calling event.preventDefault.\n   */\n  onCloseAutoFocus?: (event: Event) => void;\n  /**\n   * When true, overrides the side and align preferences to prevent collisions\n   * with boundary edges.\n   *\n   * @defaultValue true\n   */\n  avoidCollisions?: boolean;\n  /**\n   * Additional elements can be provided to be included in the boundary check for menu.\n   * By default this is the viewport.\n   */\n  collisionBoundary?: Element | null | Array<Element | null>;\n}\n\nconst SIDE_OFFSET = 4;\ntype InternalMenuContentProps = MenuContentProps & {\n  /** @internal */\n  _onTabKeyPressed: () => void;\n  /** @internal */\n  _sideOffset?: number;\n};\n\n/**\n * The component that pops out when the dropdown menu is open.\n * @public\n */\nexport const Content = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  MenuContentProps\n>((props, forwardedRef) => {\n  const {\n    side = 'bottom',\n    alignment = 'start',\n    onCloseAutoFocus,\n    avoidCollisions = true,\n    _sideOffset = SIDE_OFFSET,\n    _onTabKeyPressed,\n    children,\n    collisionBoundary,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    ...remainingProps\n  } = props as InternalMenuContentProps;\n  const tabKeyHandler = useCallback(\n    (e: ReactKeyboardEvent) => {\n      if (_onTabKeyPressed && e.key === 'Tab') {\n        _onTabKeyPressed();\n      }\n    },\n    [_onTabKeyPressed],\n  );\n  const { style } = useOverlayStacking(undefined, 'overlay');\n  const { setIsOpen } = useMenuContext();\n\n  const handleOnKeyDown = useCallback(\n    (e: ReactKeyboardEvent) => {\n      // Only close menu on escape when it is nested in other overlays (modal, sheet, ...).\n      if (e.key === 'Escape') {\n        setIsOpen(false);\n        e.stopPropagation();\n      }\n    },\n    [setIsOpen],\n  );\n\n  return (\n    <RadixPortal>\n      <RadixContent\n        {...remainingProps}\n        data-testid={dataTestId}\n        ref={forwardedRef}\n        side={side}\n        align={alignment}\n        onKeyUp={tabKeyHandler}\n        onCloseAutoFocus={onCloseAutoFocus}\n        sideOffset={_sideOffset}\n        avoidCollisions={avoidCollisions}\n        className={styles.content}\n        style={{ zIndex: style.zIndex }}\n        onKeyDown={handleOnKeyDown}\n        collisionBoundary={collisionBoundary}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n      >\n        <MenuSubLevelProvider>{children}</MenuSubLevelProvider>\n      </RadixContent>\n    </RadixPortal>\n  );\n});\n\n(Content as typeof Content & { displayName: string }).displayName =\n  'Menu.Content';\n"],
+  "mappings": "AAoIQ;AApIR;AAAA,EACE,WAAW;AAAA,EACX,UAAU;AAAA,OACL;AACP;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AAEP,SAAS,4BAA4B;AACrC,SAAS,sBAAsB;AAC/B,YAAY,YAAY;AACxB,SAAS,0BAA0B;AAgDnC,MAAM,cAAc;AAYb,MAAM,UAA0B,2BAGrC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ,OAAO;AAAA,IACP,YAAY;AAAA,IACZ;AAAA,IACA,kBAAkB;AAAA,IAClB,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAA0B;AACzB,UAAI,oBAAoB,EAAE,QAAQ,OAAO;AACvC,yBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB;AAAA,EACnB;AACA,QAAM,EAAE,MAAM,IAAI,mBAAmB,QAAW,SAAS;AACzD,QAAM,EAAE,UAAU,IAAI,eAAe;AAErC,QAAM,kBAAkB;AAAA,IACtB,CAAC,MAA0B;AAEzB,UAAI,EAAE,QAAQ,UAAU;AACtB,kBAAU,KAAK;AACf,UAAE,gBAAgB;AAAA,MACpB;AAAA,IACF;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AAEA,SACE,oBAAC,eACC;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAa;AAAA,MACb,KAAK;AAAA,MACL;AAAA,MACA,OAAO;AAAA,MACP,SAAS;AAAA,MACT;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,MACA,WAAW,OAAO;AAAA,MAClB,OAAO,EAAE,QAAQ,MAAM,OAAO;AAAA,MAC9B,WAAW;AAAA,MACX;AAAA,MACA,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAElB,8BAAC,wBAAsB,UAAS;AAAA;AAAA,EAClC,GACF;AAEJ,CAAC;AAEA,QAAqD,cACpD;",
   "names": []
 }

package/esm/navigation/menu/Item.js

@@ -3,6 +3,7 @@ import { Item as RadixItem } from "@radix-ui/react-dropdown-menu";
 import clsx from "clsx";
 import {
   forwardRef,
+  useEffect,
   useRef,
   useState
 } from "react";
@@ -44,6 +45,13 @@ const Item = /* @__PURE__ */ forwardRef(
     });
     const isTooltipHovered = useRef(false);
     const { isItemHovered, hoverProps } = useIsMenuItemHovered();
+    useEffect(() => {
+      if (!isOpen) {
+        return;
+      }
+      window.addEventListener("scroll", closeTooltip, { capture: true });
+      return () => window.removeEventListener("scroll", closeTooltip, { capture: true });
+    }, [isOpen, closeTooltip]);
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         RadixItem,

package/esm/navigation/menu/Item.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/menu/Item.tsx"],
-  "sourcesContent": ["import { Item as RadixItem } from '@radix-ui/react-dropdown-menu';\nimport clsx from 'clsx';\nimport {\n  type ElementType,\n  forwardRef,\n  type ReactEventHandler,\n  useRef,\n  useState,\n  type ReactElement,\n  type MouseEvent,\n} from 'react';\n\nimport { useIsMenuItemHovered } from './hooks/useIsMenuItemHovered.js';\nimport { getItemSlots } from './item-slots.js';\nimport { MenuItemTooltipWrapper } from './ItemTooltip.js';\nimport * as styles from './Menu.sty.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { PolymorphicComponentProps } from '../../core/types/polymorph.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 { Flex } from '../../layouts/flex/Flex.js';\nimport { useTooltipState } from '../../overlays/hooks/useTooltipState.js';\nimport { textStyle as textStyleCSS } from '../../styles/textStyle.sty.js';\n\n/**\n * @public\n */\nexport interface MenuItemOwnProps\n  extends WithChildren,\n    AriaLabelingProps,\n    StylingProps,\n    DataTestId {\n  /**\n   * Whether the menu item is disabled.\n   * If `true`, it prevents the user from interacting with the item and the item\n   * being focused.\n   */\n  disabled?: boolean;\n  /**\n   * Optional text used for typeahead purposes. By default, the typeahead\n   * behavior will use the `.textContent` of the item. Use this when the content\n   * is complex, or you have non-textual content inside.\n   */\n  textValue?: string;\n  /*\n   * TODO: The onSelect from the Radix MenuItem actually emits a native Event instead of a react synthetic event.\n   * When trying to fix that, our the app toolkits version of typescript ~4.9 bailed due to the type complexity. Right now there is no way\n   * to correct the typing on the event and keep a compatible type version.\n   * This limitiation also tracks through to the `ActionGroup` and `AppHeader`.\n   * APPDEV-8522\n   */\n  /**\n   * Event handler called when the user selects an item (via mouse or keyboard).\n   * Calling `event.preventDefault()` in this handler prevents the dropdown menu\n   * from closing when selecting that item.\n   */\n  onSelect: ReactEventHandler;\n}\n\n/**\n * @public\n */\nexport type MenuItemProps<E extends ElementType> = PolymorphicComponentProps<\n  E,\n  MenuItemOwnProps\n>;\n\n/**\n * The component that contains the dropdown menu Items.\n * @public\n */\nexport const Item: <E extends ElementType = 'div'>(\n  props: MenuItemProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n  <E extends ElementType>(\n    {\n      children,\n      disabled = false,\n      onSelect,\n      as = 'div' as E,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      'aria-details': ariaDetails,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      ...remainingProps\n    }: MenuItemProps<E>,\n    forwardedRef: typeof remainingProps.ref,\n  ) => {\n    const slots = getItemSlots(children);\n    const {\n      isOpen,\n      open: openTooltip,\n      close: closeTooltip,\n    } = useTooltipState({\n      defaultOpen: false,\n    });\n    const [tooltipTriggerRef, setTooltipTriggerRef] =\n      useState<HTMLElement | null>(null);\n    const { focusProps, focusClassName } = useFocusRing({\n      disabled,\n    });\n    const isTooltipHovered = useRef(false);\n    const { isItemHovered, hoverProps } = useIsMenuItemHovered();\n\n    return (\n      <>\n        <RadixItem\n          data-testid={dataTestId}\n          ref={forwardedRef}\n          {..._mergeProps(focusProps, hoverProps, {\n            onClick: (event: MouseEvent) => {\n              if (disabled) {\n                event.stopPropagation();\n                event.preventDefault();\n                return;\n              }\n\n              const nativeEvent = event.nativeEvent;\n              if (\n                nativeEvent.button !== 0 ||\n                nativeEvent.metaKey ||\n                nativeEvent.ctrlKey ||\n                nativeEvent.shiftKey\n              ) {\n                return; // let the browser handle the event\n              }\n\n              onSelect(event);\n            },\n            onFocus: () => slots.tooltip && openTooltip(true),\n            onBlur: () =>\n              slots.tooltip &&\n              // Ensures isTooltipHovered state is set correctly when the tooltip is hovered.\n              // Otherwise, the tooltip would close before the onMouseLeave event of the tooltip triggers\n              // and the isTooltipHovered state would never be set.\n              requestAnimationFrame(() => {\n                if (!isTooltipHovered.current) {\n                  closeTooltip();\n                }\n              }),\n            className: consumerClassName,\n            style: consumerStyle,\n          })}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          aria-describedby={ariaDescribedBy}\n          aria-details={ariaDetails}\n          asChild\n        >\n          <Flex\n            {...remainingProps}\n            className={clsx(\n              textStyleCSS({ textStyle: 'base-emphasized' }),\n              !isItemHovered && focusClassName,\n              styles.item({ disabled }),\n            )}\n            disabled={disabled}\n            // TODO LeMa: role actually belongs on top-level element (check for side effects regarding tests after moving the attribute!)\n            role=\"menuitem\"\n            aria-disabled={disabled}\n            ref={setTooltipTriggerRef}\n            as={as satisfies ElementType}\n          >\n            {slots.prefix}\n            <div className={styles.itemChildren}>{slots.freeform}</div>\n            {slots.suffix}\n          </Flex>\n        </RadixItem>\n        {isOpen && (\n          <MenuItemTooltipWrapper\n            triggerElement={tooltipTriggerRef}\n            onMouseEnter={() => {\n              isTooltipHovered.current = true;\n            }}\n            onMouseLeave={() => {\n              isTooltipHovered.current = false;\n              closeTooltip();\n            }}\n          >\n            {slots.tooltip}\n          </MenuItemTooltipWrapper>\n        )}\n      </>\n    );\n  },\n);\n\n(Item as typeof Item & { displayName: string }).displayName = 'Menu.Item';\n"],
-  "mappings": "AA+GM,mBA2DM,KAfF,YA5CJ;AA/GN,SAAS,QAAQ,iBAAiB;AAClC,OAAO,UAAU;AACjB;AAAA,EAEE;AAAA,EAEA;AAAA,EACA;AAAA,OAGK;AAEP,SAAS,4BAA4B;AACrC,SAAS,oBAAoB;AAC7B,SAAS,8BAA8B;AACvC,YAAY,YAAY;AACxB,SAAS,oBAAoB;AAM7B,SAAS,cAAc,mBAAmB;AAC1C,SAAS,YAAY;AACrB,SAAS,uBAAuB;AAChC,SAAS,aAAa,oBAAoB;AAiDnC,MAAM,OAE8B;AAAA,EACzC,CACE;AAAA,IACE;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,KAAK;AAAA,IACL,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,GAAG;AAAA,EACL,GACA,iBACG;AACH,UAAM,QAAQ,aAAa,QAAQ;AACnC,UAAM;AAAA,MACJ;AAAA,MACA,MAAM;AAAA,MACN,OAAO;AAAA,IACT,IAAI,gBAAgB;AAAA,MAClB,aAAa;AAAA,IACf,CAAC;AACD,UAAM,CAAC,mBAAmB,oBAAoB,IAC5C,SAA6B,IAAI;AACnC,UAAM,EAAE,YAAY,eAAe,IAAI,aAAa;AAAA,MAClD;AAAA,IACF,CAAC;AACD,UAAM,mBAAmB,OAAO,KAAK;AACrC,UAAM,EAAE,eAAe,WAAW,IAAI,qBAAqB;AAE3D,WACE,iCACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,eAAa;AAAA,UACb,KAAK;AAAA,UACJ,GAAG,YAAY,YAAY,YAAY;AAAA,YACtC,SAAS,CAAC,UAAsB;AAC9B,kBAAI,UAAU;AACZ,sBAAM,gBAAgB;AACtB,sBAAM,eAAe;AACrB;AAAA,cACF;AAEA,oBAAM,cAAc,MAAM;AAC1B,kBACE,YAAY,WAAW,KACvB,YAAY,WACZ,YAAY,WACZ,YAAY,UACZ;AACA;AAAA,cACF;AAEA,uBAAS,KAAK;AAAA,YAChB;AAAA,YACA,SAAS,MAAM,MAAM,WAAW,YAAY,IAAI;AAAA,YAChD,QAAQ,MACN,MAAM;AAAA;AAAA;AAAA,YAIN,sBAAsB,MAAM;AAC1B,kBAAI,CAAC,iBAAiB,SAAS;AAC7B,6BAAa;AAAA,cACf;AAAA,YACF,CAAC;AAAA,YACH,WAAW;AAAA,YACX,OAAO;AAAA,UACT,CAAC;AAAA,UACD,cAAY;AAAA,UACZ,mBAAiB;AAAA,UACjB,oBAAkB;AAAA,UAClB,gBAAc;AAAA,UACd,SAAO;AAAA,UAEP;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACJ,WAAW;AAAA,gBACT,aAAa,EAAE,WAAW,kBAAkB,CAAC;AAAA,gBAC7C,CAAC,iBAAiB;AAAA,gBAClB,OAAO,KAAK,EAAE,SAAS,CAAC;AAAA,cAC1B;AAAA,cACA;AAAA,cAEA,MAAK;AAAA,cACL,iBAAe;AAAA,cACf,KAAK;AAAA,cACL;AAAA,cAEC;AAAA,sBAAM;AAAA,gBACP,oBAAC,SAAI,WAAW,OAAO,cAAe,gBAAM,UAAS;AAAA,gBACpD,MAAM;AAAA;AAAA;AAAA,UACT;AAAA;AAAA,MACF;AAAA,MACC,UACC;AAAA,QAAC;AAAA;AAAA,UACC,gBAAgB;AAAA,UAChB,cAAc,MAAM;AAClB,6BAAiB,UAAU;AAAA,UAC7B;AAAA,UACA,cAAc,MAAM;AAClB,6BAAiB,UAAU;AAC3B,yBAAa;AAAA,UACf;AAAA,UAEC,gBAAM;AAAA;AAAA,MACT;AAAA,OAEJ;AAAA,EAEJ;AACF;AAEC,KAA+C,cAAc;",
+  "sourcesContent": ["import { Item as RadixItem } from '@radix-ui/react-dropdown-menu';\nimport clsx from 'clsx';\nimport {\n  type ElementType,\n  forwardRef,\n  type ReactEventHandler,\n  useEffect,\n  useRef,\n  useState,\n  type ReactElement,\n  type MouseEvent,\n} from 'react';\n\nimport { useIsMenuItemHovered } from './hooks/useIsMenuItemHovered.js';\nimport { getItemSlots } from './item-slots.js';\nimport { MenuItemTooltipWrapper } from './ItemTooltip.js';\nimport * as styles from './Menu.sty.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { PolymorphicComponentProps } from '../../core/types/polymorph.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 { Flex } from '../../layouts/flex/Flex.js';\nimport { useTooltipState } from '../../overlays/hooks/useTooltipState.js';\nimport { textStyle as textStyleCSS } from '../../styles/textStyle.sty.js';\n\n/**\n * @public\n */\nexport interface MenuItemOwnProps\n  extends WithChildren,\n    AriaLabelingProps,\n    StylingProps,\n    DataTestId {\n  /**\n   * Whether the menu item is disabled.\n   * If `true`, it prevents the user from interacting with the item and the item\n   * being focused.\n   */\n  disabled?: boolean;\n  /**\n   * Optional text used for typeahead purposes. By default, the typeahead\n   * behavior will use the `.textContent` of the item. Use this when the content\n   * is complex, or you have non-textual content inside.\n   */\n  textValue?: string;\n  /*\n   * TODO: The onSelect from the Radix MenuItem actually emits a native Event instead of a react synthetic event.\n   * When trying to fix that, our the app toolkits version of typescript ~4.9 bailed due to the type complexity. Right now there is no way\n   * to correct the typing on the event and keep a compatible type version.\n   * This limitiation also tracks through to the `ActionGroup` and `AppHeader`.\n   * APPDEV-8522\n   */\n  /**\n   * Event handler called when the user selects an item (via mouse or keyboard).\n   * Calling `event.preventDefault()` in this handler prevents the dropdown menu\n   * from closing when selecting that item.\n   */\n  onSelect: ReactEventHandler;\n}\n\n/**\n * @public\n */\nexport type MenuItemProps<E extends ElementType> = PolymorphicComponentProps<\n  E,\n  MenuItemOwnProps\n>;\n\n/**\n * The component that contains the dropdown menu Items.\n * @public\n */\nexport const Item: <E extends ElementType = 'div'>(\n  props: MenuItemProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n  <E extends ElementType>(\n    {\n      children,\n      disabled = false,\n      onSelect,\n      as = 'div' as E,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      'aria-details': ariaDetails,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      ...remainingProps\n    }: MenuItemProps<E>,\n    forwardedRef: typeof remainingProps.ref,\n  ) => {\n    const slots = getItemSlots(children);\n    const {\n      isOpen,\n      open: openTooltip,\n      close: closeTooltip,\n    } = useTooltipState({\n      defaultOpen: false,\n    });\n    const [tooltipTriggerRef, setTooltipTriggerRef] =\n      useState<HTMLElement | null>(null);\n    const { focusProps, focusClassName } = useFocusRing({\n      disabled,\n    });\n    const isTooltipHovered = useRef(false);\n    const { isItemHovered, hoverProps } = useIsMenuItemHovered();\n\n    useEffect(() => {\n      if (!isOpen) {\n        return;\n      }\n      window.addEventListener('scroll', closeTooltip, { capture: true });\n      return () =>\n        window.removeEventListener('scroll', closeTooltip, { capture: true });\n    }, [isOpen, closeTooltip]);\n\n    return (\n      <>\n        <RadixItem\n          data-testid={dataTestId}\n          ref={forwardedRef}\n          {..._mergeProps(focusProps, hoverProps, {\n            onClick: (event: MouseEvent) => {\n              if (disabled) {\n                event.stopPropagation();\n                event.preventDefault();\n                return;\n              }\n\n              const nativeEvent = event.nativeEvent;\n              if (\n                nativeEvent.button !== 0 ||\n                nativeEvent.metaKey ||\n                nativeEvent.ctrlKey ||\n                nativeEvent.shiftKey\n              ) {\n                return; // let the browser handle the event\n              }\n\n              onSelect(event);\n            },\n            onFocus: () => slots.tooltip && openTooltip(true),\n            onBlur: () =>\n              slots.tooltip &&\n              // Ensures isTooltipHovered state is set correctly when the tooltip is hovered.\n              // Otherwise, the tooltip would close before the onMouseLeave event of the tooltip triggers\n              // and the isTooltipHovered state would never be set.\n              requestAnimationFrame(() => {\n                if (!isTooltipHovered.current) {\n                  closeTooltip();\n                }\n              }),\n            className: consumerClassName,\n            style: consumerStyle,\n          })}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          aria-describedby={ariaDescribedBy}\n          aria-details={ariaDetails}\n          asChild\n        >\n          <Flex\n            {...remainingProps}\n            className={clsx(\n              textStyleCSS({ textStyle: 'base-emphasized' }),\n              !isItemHovered && focusClassName,\n              styles.item({ disabled }),\n            )}\n            disabled={disabled}\n            // TODO LeMa: role actually belongs on top-level element (check for side effects regarding tests after moving the attribute!)\n            role=\"menuitem\"\n            aria-disabled={disabled}\n            ref={setTooltipTriggerRef}\n            as={as satisfies ElementType}\n          >\n            {slots.prefix}\n            <div className={styles.itemChildren}>{slots.freeform}</div>\n            {slots.suffix}\n          </Flex>\n        </RadixItem>\n        {isOpen && (\n          <MenuItemTooltipWrapper\n            triggerElement={tooltipTriggerRef}\n            onMouseEnter={() => {\n              isTooltipHovered.current = true;\n            }}\n            onMouseLeave={() => {\n              isTooltipHovered.current = false;\n              closeTooltip();\n            }}\n          >\n            {slots.tooltip}\n          </MenuItemTooltipWrapper>\n        )}\n      </>\n    );\n  },\n);\n\n(Item as typeof Item & { displayName: string }).displayName = 'Menu.Item';\n"],
+  "mappings": "AAyHM,mBA2DM,KAfF,YA5CJ;AAzHN,SAAS,QAAQ,iBAAiB;AAClC,OAAO,UAAU;AACjB;AAAA,EAEE;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAEP,SAAS,4BAA4B;AACrC,SAAS,oBAAoB;AAC7B,SAAS,8BAA8B;AACvC,YAAY,YAAY;AACxB,SAAS,oBAAoB;AAM7B,SAAS,cAAc,mBAAmB;AAC1C,SAAS,YAAY;AACrB,SAAS,uBAAuB;AAChC,SAAS,aAAa,oBAAoB;AAiDnC,MAAM,OAE8B;AAAA,EACzC,CACE;AAAA,IACE;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,KAAK;AAAA,IACL,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,GAAG;AAAA,EACL,GACA,iBACG;AACH,UAAM,QAAQ,aAAa,QAAQ;AACnC,UAAM;AAAA,MACJ;AAAA,MACA,MAAM;AAAA,MACN,OAAO;AAAA,IACT,IAAI,gBAAgB;AAAA,MAClB,aAAa;AAAA,IACf,CAAC;AACD,UAAM,CAAC,mBAAmB,oBAAoB,IAC5C,SAA6B,IAAI;AACnC,UAAM,EAAE,YAAY,eAAe,IAAI,aAAa;AAAA,MAClD;AAAA,IACF,CAAC;AACD,UAAM,mBAAmB,OAAO,KAAK;AACrC,UAAM,EAAE,eAAe,WAAW,IAAI,qBAAqB;AAE3D,cAAU,MAAM;AACd,UAAI,CAAC,QAAQ;AACX;AAAA,MACF;AACA,aAAO,iBAAiB,UAAU,cAAc,EAAE,SAAS,KAAK,CAAC;AACjE,aAAO,MACL,OAAO,oBAAoB,UAAU,cAAc,EAAE,SAAS,KAAK,CAAC;AAAA,IACxE,GAAG,CAAC,QAAQ,YAAY,CAAC;AAEzB,WACE,iCACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,eAAa;AAAA,UACb,KAAK;AAAA,UACJ,GAAG,YAAY,YAAY,YAAY;AAAA,YACtC,SAAS,CAAC,UAAsB;AAC9B,kBAAI,UAAU;AACZ,sBAAM,gBAAgB;AACtB,sBAAM,eAAe;AACrB;AAAA,cACF;AAEA,oBAAM,cAAc,MAAM;AAC1B,kBACE,YAAY,WAAW,KACvB,YAAY,WACZ,YAAY,WACZ,YAAY,UACZ;AACA;AAAA,cACF;AAEA,uBAAS,KAAK;AAAA,YAChB;AAAA,YACA,SAAS,MAAM,MAAM,WAAW,YAAY,IAAI;AAAA,YAChD,QAAQ,MACN,MAAM;AAAA;AAAA;AAAA,YAIN,sBAAsB,MAAM;AAC1B,kBAAI,CAAC,iBAAiB,SAAS;AAC7B,6BAAa;AAAA,cACf;AAAA,YACF,CAAC;AAAA,YACH,WAAW;AAAA,YACX,OAAO;AAAA,UACT,CAAC;AAAA,UACD,cAAY;AAAA,UACZ,mBAAiB;AAAA,UACjB,oBAAkB;AAAA,UAClB,gBAAc;AAAA,UACd,SAAO;AAAA,UAEP;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACJ,WAAW;AAAA,gBACT,aAAa,EAAE,WAAW,kBAAkB,CAAC;AAAA,gBAC7C,CAAC,iBAAiB;AAAA,gBAClB,OAAO,KAAK,EAAE,SAAS,CAAC;AAAA,cAC1B;AAAA,cACA;AAAA,cAEA,MAAK;AAAA,cACL,iBAAe;AAAA,cACf,KAAK;AAAA,cACL;AAAA,cAEC;AAAA,sBAAM;AAAA,gBACP,oBAAC,SAAI,WAAW,OAAO,cAAe,gBAAM,UAAS;AAAA,gBACpD,MAAM;AAAA;AAAA;AAAA,UACT;AAAA;AAAA,MACF;AAAA,MACC,UACC;AAAA,QAAC;AAAA;AAAA,UACC,gBAAgB;AAAA,UAChB,cAAc,MAAM;AAClB,6BAAiB,UAAU;AAAA,UAC7B;AAAA,UACA,cAAc,MAAM;AAClB,6BAAiB,UAAU;AAC3B,yBAAa;AAAA,UACf;AAAA,UAEC,gBAAM;AAAA;AAAA,MACT;AAAA,OAEJ;AAAA,EAEJ;AACF;AAEC,KAA+C,cAAc;",
   "names": []
 }

package/esm/navigation/menu/Menu.css

@@ -1,11 +1,11 @@
-._1m01arl1-3-7-1 {
+._1m01arl1-3-8-0 {
   background: var(--dt-colors-background-surface-default, #fff);
   border-radius: var(--dt-borders-radius-surface-subdued, 9px);
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
   padding: var(--dt-spacings-size-8, 8px);
   max-width: 500px;
 }
-._1m01arl2-3-7-1 {
+._1m01arl2-3-8-0 {
   box-sizing: border-box;
   font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-small-default-size, 12px);
@@ -18,13 +18,13 @@
   padding-right: var(--dt-spacings-size-12, 12px);
   text-align: left;
 }
-._1m01arl0-3-7-1 ._1m01arl2-3-7-1 {
+._1m01arl0-3-8-0 ._1m01arl2-3-8-0 {
   padding-top: var(--dt-spacings-size-4, 4px);
   padding-left: var(--dt-spacings-size-0, 0);
   padding-right: var(--dt-spacings-size-0, 0);
   padding-bottom: var(--dt-spacings-size-8, 8px);
 }
-._1m01arl3-3-7-1 {
+._1m01arl3-3-8-0 {
   background: var(--dt-colors-background-surface-default, #fff);
   padding: var(--dt-spacings-size-4, 4px);
   border-radius: var(--dt-borders-radius-surface-subdued, 9px);
@@ -34,13 +34,22 @@
   overflow-y: auto;
   max-width: 100dvw;
 }
-._1m01arl3-3-7-1 ._1m01arl4-3-7-1:not(:last-child) {
+._1m01arl4-3-8-0 {
+  background: var(--dt-colors-background-surface-default, #fff);
+  border-radius: var(--dt-borders-radius-surface-subdued, 9px);
+  border-left: 2px solid var(--dt-colors-border-neutral-default, #dadbe4);
+  margin-left: var(--dt-spacings-size-12, 12px);
+  margin-top: var(--dt-spacings-size-2, 2px);
+  margin-bottom: var(--dt-spacings-size-2, 2px);
+  overflow-y: auto;
+}
+._1m01arl3-3-8-0 ._1m01arl5-3-8-0:not(:last-child) {
   width: 100%;
   border-bottom: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
   padding-bottom: var(--dt-spacings-size-4, 4px);
   margin-bottom: var(--dt-spacings-size-4, 4px);
 }
-._1m01arl5-3-7-1 {
+._1m01arl6-3-8-0 {
   display: flex;
   gap: var(--dt-spacings-size-8, 8px);
   background-color: transparent;
@@ -56,35 +65,49 @@
   border-width: 0;
   border-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._1m01arl6-3-7-1 {
+._1m01arl7-3-8-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
   outline: none;
 }
-._1m01arl7-3-7-1:hover, ._1m01arl7-3-7-1[data-state="open"] {
+._1m01arl8-3-8-0:hover, ._1m01arl8-3-8-0[data-state="open"] {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1m01arl7-3-7-1:focus {
+._1m01arl8-3-8-0:focus {
   outline: none;
 }
-._1m01arl7-3-7-1:active {
+._1m01arl8-3-8-0:active {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._1m01arl8-3-7-1 {
+._1m01arl9-3-8-0 {
   width: 100%;
 }
-._1m01arl5-3-7-1 > ._1m01arl8-3-7-1:first-child {
+._1m01arl6-3-8-0 > ._1m01arl9-3-8-0:first-child {
   padding-left: var(--dt-spacings-size-4, 4px);
 }
-._1m01arl5-3-7-1 > ._1m01arl8-3-7-1:last-child:not(:has(svg:last-child)) {
+._1m01arl6-3-8-0 > ._1m01arl9-3-8-0:last-child:not(:has(svg:last-child)) {
   padding-right: var(--dt-spacings-size-4, 4px);
 }
-._1m01arl9-3-7-1 {
+._1m01arla-3-8-0 {
   flex: 1 1 auto;
   overflow: hidden;
 }
-._1m01arl9-3-7-1:first-child {
+._1m01arla-3-8-0:first-child {
   padding-left: var(--dt-spacings-size-4, 4px);
+}
+@media (max-width: 640px) {
+  ._1m01arl3-3-8-0 {
+    max-width: var(--radix-dropdown-menu-content-available-width);
+  }
+  ._1m01arl9-3-8-0 {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  ._1m01arla-3-8-0 {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 }

package/esm/navigation/menu/Menu.sty.js

@@ -1,13 +1,14 @@
 import "./Menu.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var content = "_1m01arl3-3-7-1";
-var group = "_1m01arl4-3-7-1";
-var item = _7a468({ defaultClassName: "_1m01arl5-3-7-1", variantClassNames: { disabled: { true: "_1m01arl6-3-7-1", false: "_1m01arl7-3-7-1" } }, defaultVariants: { disabled: false }, compoundVariants: [] });
-var itemChildren = "_1m01arl8-3-7-1";
-var label = "_1m01arl2-3-7-1";
-var subChildren = "_1m01arl9-3-7-1";
-var tooltip = "_1m01arl0-3-7-1";
-var tooltipWrapper = "_1m01arl1-3-7-1";
+var content = "_1m01arl3-3-8-0";
+var group = "_1m01arl5-3-8-0";
+var item = _7a468({ defaultClassName: "_1m01arl6-3-8-0", variantClassNames: { disabled: { true: "_1m01arl7-3-8-0", false: "_1m01arl8-3-8-0" } }, defaultVariants: { disabled: false }, compoundVariants: [] });
+var itemChildren = "_1m01arl9-3-8-0";
+var label = "_1m01arl2-3-8-0";
+var subChildren = "_1m01arla-3-8-0";
+var subContentMobile = "_1m01arl4-3-8-0";
+var tooltip = "_1m01arl0-3-8-0";
+var tooltipWrapper = "_1m01arl1-3-8-0";
 export {
   content,
   group,
@@ -15,6 +16,7 @@ export {
   itemChildren,
   label,
   subChildren,
+  subContentMobile,
   tooltip,
   tooltipWrapper
 };

package/esm/navigation/menu/Menu.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/menu/Menu.css.ts"],
-  "sourcesContent": ["import './Menu.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var content = '_1m01arl3-3-7-1';\nexport var group = '_1m01arl4-3-7-1';\nexport var item = _7a468({defaultClassName:'_1m01arl5-3-7-1',variantClassNames:{disabled:{true:'_1m01arl6-3-7-1',false:'_1m01arl7-3-7-1'}},defaultVariants:{disabled:false},compoundVariants:[]});\nexport var itemChildren = '_1m01arl8-3-7-1';\nexport var label = '_1m01arl2-3-7-1';\nexport var subChildren = '_1m01arl9-3-7-1';\nexport var tooltip = '_1m01arl0-3-7-1';\nexport var tooltipWrapper = '_1m01arl1-3-7-1';"],
-  "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,UAAU;AACd,IAAI,QAAQ;AACZ,IAAI,OAAO,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,UAAS,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACzL,IAAI,eAAe;AACnB,IAAI,QAAQ;AACZ,IAAI,cAAc;AAClB,IAAI,UAAU;AACd,IAAI,iBAAiB;",
+  "sourcesContent": ["import './Menu.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var content = '_1m01arl3-3-8-0';\nexport var group = '_1m01arl5-3-8-0';\nexport var item = _7a468({defaultClassName:'_1m01arl6-3-8-0',variantClassNames:{disabled:{true:'_1m01arl7-3-8-0',false:'_1m01arl8-3-8-0'}},defaultVariants:{disabled:false},compoundVariants:[]});\nexport var itemChildren = '_1m01arl9-3-8-0';\nexport var label = '_1m01arl2-3-8-0';\nexport var subChildren = '_1m01arla-3-8-0';\nexport var subContentMobile = '_1m01arl4-3-8-0';\nexport var tooltip = '_1m01arl0-3-8-0';\nexport var tooltipWrapper = '_1m01arl1-3-8-0';"],
+  "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,UAAU;AACd,IAAI,QAAQ;AACZ,IAAI,OAAO,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,UAAS,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACzL,IAAI,eAAe;AACnB,IAAI,QAAQ;AACZ,IAAI,cAAc;AAClB,IAAI,mBAAmB;AACvB,IAAI,UAAU;AACd,IAAI,iBAAiB;",
   "names": []
 }

package/esm/navigation/menu/Sub.js

@@ -1,13 +1,17 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Sub as RadixSub } from "@radix-ui/react-dropdown-menu";
 import {
+  useEffect,
+  useLayoutEffect,
   useMemo,
+  useRef,
   Children,
   isValidElement,
   cloneElement
 } from "react";
 import { isElement } from "react-is";
 import { MenuSubContext } from "./contexts/MenuSubContext.js";
+import { useMenuSubLevelCoordinator } from "./contexts/MenuSubLevelContext.js";
 import { useMenuAutoClose } from "./hooks/useMenuAutoClose.js";
 import { SubContent } from "./SubContent.js";
 import { SubTrigger } from "./SubTrigger.js";
@@ -61,6 +65,21 @@ const Sub = (props) => {
     value,
     onChange
   });
+  const coordinator = useMenuSubLevelCoordinator();
+  const subId = useRef(/* @__PURE__ */ Symbol()).current;
+  const updateOpenRef = useRef(updateOpen);
+  updateOpenRef.current = updateOpen;
+  useEffect(() => {
+    coordinator?.register(subId, () => updateOpenRef.current(false));
+    return () => {
+      coordinator?.unregister(subId);
+    };
+  }, [coordinator, subId]);
+  useLayoutEffect(() => {
+    if (open) {
+      coordinator?.notifyOpened(subId);
+    }
+  }, [open, coordinator, subId]);
   const slots = useMemo(
     () => getSubSlots(registerTabHandlers(children, () => updateOpen(false))),
     [children, updateOpen]

package/esm/navigation/menu/Sub.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/menu/Sub.tsx"],
-  "sourcesContent": ["import { Sub as RadixSub } from '@radix-ui/react-dropdown-menu';\nimport {\n  useMemo,\n  type ReactNode,\n  Children,\n  isValidElement,\n  cloneElement,\n} from 'react';\nimport { isElement } from 'react-is';\n\nimport { MenuSubContext } from './contexts/MenuSubContext.js';\nimport { useMenuAutoClose } from './hooks/useMenuAutoClose.js';\nimport { SubContent, type MenuSubContentProps } from './SubContent.js';\nimport { SubTrigger } from './SubTrigger.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\n\n/**\n * @public\n */\nexport interface MenuSubProps extends WithChildren {\n  /**\n   * The open state of the dropdown menu when it is initially rendered. Use when\n   * you do not need to control its open state.\n   */\n  defaultOpen?: boolean;\n  /**\n   * The controlled open state of the dropdown menu. Must be used in conjunction\n   * with onOpenChange.\n   */\n  open?: boolean;\n  /**\n   * Event handler called when the open state of the dropdown menu changes.\n   * @param isOpen - true if the menu has been opened\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n}\n\ntype SubSlots = {\n  trigger: ReactNode | null;\n  content: ReactNode[];\n  freeform: ReactNode[];\n};\n\n/** Iterates over all top-level SubContent nodes and registers tab key handler. */\nfunction registerTabHandlers(\n  children: ReactNode,\n  handleTabKeyPressed: () => void,\n): ReactNode {\n  return Children.map(children, (child: ReactNode) => {\n    return isValidElement<MenuSubContentProps>(child) &&\n      child.type === SubContent\n      ? cloneElement(\n          child,\n          _mergeProps(child.props, {\n            _onTabKeyPressed: handleTabKeyPressed,\n          }),\n          child.props.children,\n        )\n      : child;\n  });\n}\n\n/** Iterates over child nodes to extract specific component slots. */\nfunction getSubSlots(children: ReactNode) {\n  const slots: SubSlots = {\n    trigger: null,\n    content: [],\n    freeform: [],\n  };\n\n  Children.forEach(children, (child) => {\n    if (isElement(child)) {\n      switch (child.type) {\n        case SubTrigger:\n          slots.trigger = child;\n          break;\n        case SubContent:\n          slots.content.push(child);\n          break;\n        default:\n          slots.freeform.push(child);\n      }\n    } else {\n      slots.freeform.push(child);\n    }\n  });\n\n  return slots;\n}\n\n/**\n * @public\n */\nexport const Sub = (props: MenuSubProps) => {\n  const {\n    defaultOpen: defaultValue,\n    open: value,\n    onOpenChange: onChange,\n    children,\n    ...remainingProps\n  } = props;\n  const [open, updateOpen] = useControllableState({\n    defaultValue,\n    value,\n    onChange,\n  });\n  const slots = useMemo(\n    () => getSubSlots(registerTabHandlers(children, () => updateOpen(false))),\n    [children, updateOpen],\n  );\n\n  useMenuAutoClose(open, updateOpen);\n\n  return (\n    <MenuSubContext.Provider\n      value={{\n        isOpen: open ?? false,\n        isDefaultOpen: defaultValue ?? false,\n        setIsOpen: updateOpen,\n      }}\n    >\n      <RadixSub\n        open={open}\n        onOpenChange={(isOpen) => updateOpen(isOpen)}\n        {...remainingProps}\n      >\n        {slots.trigger !== null && slots.trigger}\n        {open && slots.content}\n        {slots.freeform}\n      </RadixSub>\n    </MenuSubContext.Provider>\n  );\n};\n\n(Sub as typeof Sub & { displayName: string }).displayName = 'Menu.Sub';\n"],
-  "mappings": "AAoHI,cAOE,YAPF;AApHJ,SAAS,OAAO,gBAAgB;AAChC;AAAA,EACE;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAiB;AAE1B,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,kBAA4C;AACrD,SAAS,kBAAkB;AAC3B,SAAS,4BAA4B;AAErC,SAAS,cAAc,mBAAmB;AA8B1C,SAAS,oBACP,UACA,qBACW;AACX,SAAO,SAAS,IAAI,UAAU,CAAC,UAAqB;AAClD,WAAO,eAAoC,KAAK,KAC9C,MAAM,SAAS,aACb;AAAA,MACE;AAAA,MACA,YAAY,MAAM,OAAO;AAAA,QACvB,kBAAkB;AAAA,MACpB,CAAC;AAAA,MACD,MAAM,MAAM;AAAA,IACd,IACA;AAAA,EACN,CAAC;AACH;AAGA,SAAS,YAAY,UAAqB;AACxC,QAAM,QAAkB;AAAA,IACtB,SAAS;AAAA,IACT,SAAS,CAAC;AAAA,IACV,UAAU,CAAC;AAAA,EACb;AAEA,WAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,QAAI,UAAU,KAAK,GAAG;AACpB,cAAQ,MAAM,MAAM;AAAA,QAClB,KAAK;AACH,gBAAM,UAAU;AAChB;AAAA,QACF,KAAK;AACH,gBAAM,QAAQ,KAAK,KAAK;AACxB;AAAA,QACF;AACE,gBAAM,SAAS,KAAK,KAAK;AAAA,MAC7B;AAAA,IACF,OAAO;AACL,YAAM,SAAS,KAAK,KAAK;AAAA,IAC3B;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAKO,MAAM,MAAM,CAAC,UAAwB;AAC1C,QAAM;AAAA,IACJ,aAAa;AAAA,IACb,MAAM;AAAA,IACN,cAAc;AAAA,IACd;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,CAAC,MAAM,UAAU,IAAI,qBAAqB;AAAA,IAC9C;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,QAAQ;AAAA,IACZ,MAAM,YAAY,oBAAoB,UAAU,MAAM,WAAW,KAAK,CAAC,CAAC;AAAA,IACxE,CAAC,UAAU,UAAU;AAAA,EACvB;AAEA,mBAAiB,MAAM,UAAU;AAEjC,SACE;AAAA,IAAC,eAAe;AAAA,IAAf;AAAA,MACC,OAAO;AAAA,QACL,QAAQ,QAAQ;AAAA,QAChB,eAAe,gBAAgB;AAAA,QAC/B,WAAW;AAAA,MACb;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,cAAc,CAAC,WAAW,WAAW,MAAM;AAAA,UAC1C,GAAG;AAAA,UAEH;AAAA,kBAAM,YAAY,QAAQ,MAAM;AAAA,YAChC,QAAQ,MAAM;AAAA,YACd,MAAM;AAAA;AAAA;AAAA,MACT;AAAA;AAAA,EACF;AAEJ;AAEC,IAA6C,cAAc;",
+  "sourcesContent": ["import { Sub as RadixSub } from '@radix-ui/react-dropdown-menu';\nimport {\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  type ReactNode,\n  Children,\n  isValidElement,\n  cloneElement,\n} from 'react';\nimport { isElement } from 'react-is';\n\nimport { MenuSubContext } from './contexts/MenuSubContext.js';\nimport { useMenuSubLevelCoordinator } from './contexts/MenuSubLevelContext.js';\nimport { useMenuAutoClose } from './hooks/useMenuAutoClose.js';\nimport { SubContent, type MenuSubContentProps } from './SubContent.js';\nimport { SubTrigger } from './SubTrigger.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\n\n/**\n * @public\n */\nexport interface MenuSubProps extends WithChildren {\n  /**\n   * The open state of the dropdown menu when it is initially rendered. Use when\n   * you do not need to control its open state.\n   */\n  defaultOpen?: boolean;\n  /**\n   * The controlled open state of the dropdown menu. Must be used in conjunction\n   * with onOpenChange.\n   */\n  open?: boolean;\n  /**\n   * Event handler called when the open state of the dropdown menu changes.\n   * @param isOpen - true if the menu has been opened\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n}\n\ntype SubSlots = {\n  trigger: ReactNode | null;\n  content: ReactNode[];\n  freeform: ReactNode[];\n};\n\n/** Iterates over all top-level SubContent nodes and registers tab key handler. */\nfunction registerTabHandlers(\n  children: ReactNode,\n  handleTabKeyPressed: () => void,\n): ReactNode {\n  return Children.map(children, (child: ReactNode) => {\n    return isValidElement<MenuSubContentProps>(child) &&\n      child.type === SubContent\n      ? cloneElement(\n          child,\n          _mergeProps(child.props, {\n            _onTabKeyPressed: handleTabKeyPressed,\n          }),\n          child.props.children,\n        )\n      : child;\n  });\n}\n\n/** Iterates over child nodes to extract specific component slots. */\nfunction getSubSlots(children: ReactNode) {\n  const slots: SubSlots = {\n    trigger: null,\n    content: [],\n    freeform: [],\n  };\n\n  Children.forEach(children, (child) => {\n    if (isElement(child)) {\n      switch (child.type) {\n        case SubTrigger:\n          slots.trigger = child;\n          break;\n        case SubContent:\n          slots.content.push(child);\n          break;\n        default:\n          slots.freeform.push(child);\n      }\n    } else {\n      slots.freeform.push(child);\n    }\n  });\n\n  return slots;\n}\n\n/**\n * @public\n */\nexport const Sub = (props: MenuSubProps) => {\n  const {\n    defaultOpen: defaultValue,\n    open: value,\n    onOpenChange: onChange,\n    children,\n    ...remainingProps\n  } = props;\n  const [open, updateOpen] = useControllableState({\n    defaultValue,\n    value,\n    onChange,\n  });\n\n  const coordinator = useMenuSubLevelCoordinator();\n  const subId = useRef<symbol>(Symbol()).current;\n  const updateOpenRef = useRef(updateOpen);\n  updateOpenRef.current = updateOpen;\n\n  useEffect(() => {\n    coordinator?.register(subId, () => updateOpenRef.current(false));\n    return () => {\n      coordinator?.unregister(subId);\n    };\n  }, [coordinator, subId]);\n\n  useLayoutEffect(() => {\n    if (open) {\n      coordinator?.notifyOpened(subId);\n    }\n  }, [open, coordinator, subId]);\n\n  const slots = useMemo(\n    () => getSubSlots(registerTabHandlers(children, () => updateOpen(false))),\n    [children, updateOpen],\n  );\n\n  useMenuAutoClose(open, updateOpen);\n\n  return (\n    <MenuSubContext.Provider\n      value={{\n        isOpen: open ?? false,\n        isDefaultOpen: defaultValue ?? false,\n        setIsOpen: updateOpen,\n      }}\n    >\n      <RadixSub\n        open={open}\n        onOpenChange={(isOpen) => updateOpen(isOpen)}\n        {...remainingProps}\n      >\n        {slots.trigger !== null && slots.trigger}\n        {open && slots.content}\n        {slots.freeform}\n      </RadixSub>\n    </MenuSubContext.Provider>\n  );\n};\n\n(Sub as typeof Sub & { displayName: string }).displayName = 'Menu.Sub';\n"],
+  "mappings": "AA2II,cAOE,YAPF;AA3IJ,SAAS,OAAO,gBAAgB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAiB;AAE1B,SAAS,sBAAsB;AAC/B,SAAS,kCAAkC;AAC3C,SAAS,wBAAwB;AACjC,SAAS,kBAA4C;AACrD,SAAS,kBAAkB;AAC3B,SAAS,4BAA4B;AAErC,SAAS,cAAc,mBAAmB;AA8B1C,SAAS,oBACP,UACA,qBACW;AACX,SAAO,SAAS,IAAI,UAAU,CAAC,UAAqB;AAClD,WAAO,eAAoC,KAAK,KAC9C,MAAM,SAAS,aACb;AAAA,MACE;AAAA,MACA,YAAY,MAAM,OAAO;AAAA,QACvB,kBAAkB;AAAA,MACpB,CAAC;AAAA,MACD,MAAM,MAAM;AAAA,IACd,IACA;AAAA,EACN,CAAC;AACH;AAGA,SAAS,YAAY,UAAqB;AACxC,QAAM,QAAkB;AAAA,IACtB,SAAS;AAAA,IACT,SAAS,CAAC;AAAA,IACV,UAAU,CAAC;AAAA,EACb;AAEA,WAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,QAAI,UAAU,KAAK,GAAG;AACpB,cAAQ,MAAM,MAAM;AAAA,QAClB,KAAK;AACH,gBAAM,UAAU;AAChB;AAAA,QACF,KAAK;AACH,gBAAM,QAAQ,KAAK,KAAK;AACxB;AAAA,QACF;AACE,gBAAM,SAAS,KAAK,KAAK;AAAA,MAC7B;AAAA,IACF,OAAO;AACL,YAAM,SAAS,KAAK,KAAK;AAAA,IAC3B;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAKO,MAAM,MAAM,CAAC,UAAwB;AAC1C,QAAM;AAAA,IACJ,aAAa;AAAA,IACb,MAAM;AAAA,IACN,cAAc;AAAA,IACd;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,CAAC,MAAM,UAAU,IAAI,qBAAqB;AAAA,IAC9C;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,cAAc,2BAA2B;AAC/C,QAAM,QAAQ,OAAe,uBAAO,CAAC,EAAE;AACvC,QAAM,gBAAgB,OAAO,UAAU;AACvC,gBAAc,UAAU;AAExB,YAAU,MAAM;AACd,iBAAa,SAAS,OAAO,MAAM,cAAc,QAAQ,KAAK,CAAC;AAC/D,WAAO,MAAM;AACX,mBAAa,WAAW,KAAK;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,aAAa,KAAK,CAAC;AAEvB,kBAAgB,MAAM;AACpB,QAAI,MAAM;AACR,mBAAa,aAAa,KAAK;AAAA,IACjC;AAAA,EACF,GAAG,CAAC,MAAM,aAAa,KAAK,CAAC;AAE7B,QAAM,QAAQ;AAAA,IACZ,MAAM,YAAY,oBAAoB,UAAU,MAAM,WAAW,KAAK,CAAC,CAAC;AAAA,IACxE,CAAC,UAAU,UAAU;AAAA,EACvB;AAEA,mBAAiB,MAAM,UAAU;AAEjC,SACE;AAAA,IAAC,eAAe;AAAA,IAAf;AAAA,MACC,OAAO;AAAA,QACL,QAAQ,QAAQ;AAAA,QAChB,eAAe,gBAAgB;AAAA,QAC/B,WAAW;AAAA,MACb;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,cAAc,CAAC,WAAW,WAAW,MAAM;AAAA,UAC1C,GAAG;AAAA,UAEH;AAAA,kBAAM,YAAY,QAAQ,MAAM;AAAA,YAChC,QAAQ,MAAM;AAAA,YACd,MAAM;AAAA;AAAA;AAAA,MACT;AAAA;AAAA,EACF;AAEJ;AAEC,IAA6C,cAAc;",
   "names": []
 }

package/esm/navigation/menu/SubContent.js

@@ -7,8 +7,11 @@ import {
   forwardRef,
   useCallback
 } from "react";
+import Breakpoints from "@dynatrace/strato-design-tokens/breakpoints-js";
+import { MenuSubLevelProvider } from "./contexts/MenuSubLevelContext.js";
 import * as styles from "./Menu.sty.js";
 import { useOverlayStacking } from "../../core/hooks/useOverlayStacking.js";
+import { useBreakpoint } from "../../layouts/hooks/useBreakpoint.js";
 const SUB_CONTENT_SIDE_OFFSET = 0;
 const ALIGN_OFFSET = -4;
 const SubContent = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
@@ -22,6 +25,10 @@ const SubContent = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     [_onTabKeyPressed]
   );
   const { style } = useOverlayStacking(void 0, "overlay");
+  const isMobile = useBreakpoint(`(max-width: ${Breakpoints.Max.Mobile}px)`);
+  if (isMobile) {
+    return /* @__PURE__ */ jsx("div", { ref: forwardedRef, className: styles.subContentMobile, children: /* @__PURE__ */ jsx(MenuSubLevelProvider, { children }) });
+  }
   return /* @__PURE__ */ jsx(RadixPortal, { children: /* @__PURE__ */ jsx(
     RadixSubContent,
     {
@@ -32,7 +39,7 @@ const SubContent = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
       className: styles.content,
       style: { zIndex: style.zIndex },
       collisionPadding: 2,
-      children
+      children: /* @__PURE__ */ jsx(MenuSubLevelProvider, { children })
     }
   ) });
 });

package/esm/navigation/menu/SubContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/menu/SubContent.tsx"],
-  "sourcesContent": ["import {\n  SubContent as RadixSubContent,\n  Portal as RadixPortal,\n} from '@radix-ui/react-dropdown-menu';\nimport {\n  forwardRef,\n  useCallback,\n  type KeyboardEvent as ReactKeyboardEvent,\n} from 'react';\n\n\nimport * as styles from './Menu.sty.js';\nimport { useOverlayStacking } from '../../core/hooks/useOverlayStacking.js';\nimport { WithChildren } from '../../core/types/with-children.js';\n\n/**\n * @public\n */\nexport type MenuSubContentProps = WithChildren;\n\nconst SUB_CONTENT_SIDE_OFFSET = 0; // NOTE: This effectively results in an offset of -4px due to the default behavior of radix-ui sub-menus\n\n/**\n * @internal\n */\nexport const ALIGN_OFFSET = -4;\n\n/**\n * The component that pops out when the dropdown menu is open.\n * @public\n */\nexport const SubContent = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  MenuSubContentProps\n>((props, forwardedRef) => {\n  const { _onTabKeyPressed, children } = props as MenuSubContentProps & {\n    _onTabKeyPressed: () => void;\n  };\n  const tabKeyHandler = useCallback(\n    (e: ReactKeyboardEvent) => {\n      if (_onTabKeyPressed && e.key === 'Tab') {\n        _onTabKeyPressed();\n      }\n    },\n    [_onTabKeyPressed],\n  );\n  const { style } = useOverlayStacking(undefined, 'overlay');\n\n  return (\n    <RadixPortal>\n      <RadixSubContent\n        ref={forwardedRef}\n        sideOffset={SUB_CONTENT_SIDE_OFFSET}\n        alignOffset={ALIGN_OFFSET}\n        onKeyUp={tabKeyHandler}\n        className={styles.content}\n        style={{ zIndex: style.zIndex }}\n        collisionPadding={2}\n      >\n        {children}\n      </RadixSubContent>\n    </RadixPortal>\n  );\n});\n\n(SubContent as typeof SubContent & { displayName: string }).displayName =\n  'Menu.SubContent';\n"],
-  "mappings": "AAkDM;AAlDN;AAAA,EACE,cAAc;AAAA,EACd,UAAU;AAAA,OACL;AACP;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AAGP,YAAY,YAAY;AACxB,SAAS,0BAA0B;AAQnC,MAAM,0BAA0B;AAKzB,MAAM,eAAe;AAMrB,MAAM,aAA6B,2BAGxC,CAAC,OAAO,iBAAiB;AACzB,QAAM,EAAE,kBAAkB,SAAS,IAAI;AAGvC,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAA0B;AACzB,UAAI,oBAAoB,EAAE,QAAQ,OAAO;AACvC,yBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB;AAAA,EACnB;AACA,QAAM,EAAE,MAAM,IAAI,mBAAmB,QAAW,SAAS;AAEzD,SACE,oBAAC,eACC;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,SAAS;AAAA,MACT,WAAW,OAAO;AAAA,MAClB,OAAO,EAAE,QAAQ,MAAM,OAAO;AAAA,MAC9B,kBAAkB;AAAA,MAEjB;AAAA;AAAA,EACH,GACF;AAEJ,CAAC;AAEA,WAA2D,cAC1D;",
+  "sourcesContent": ["import {\n  SubContent as RadixSubContent,\n  Portal as RadixPortal,\n} from '@radix-ui/react-dropdown-menu';\nimport {\n  forwardRef,\n  useCallback,\n  type KeyboardEvent as ReactKeyboardEvent,\n} from 'react';\n\nimport Breakpoints from '@dynatrace/strato-design-tokens/breakpoints-js';\n\nimport { MenuSubLevelProvider } from './contexts/MenuSubLevelContext.js';\nimport * as styles from './Menu.sty.js';\nimport { useOverlayStacking } from '../../core/hooks/useOverlayStacking.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { useBreakpoint } from '../../layouts/hooks/useBreakpoint.js';\n\n/**\n * @public\n */\nexport type MenuSubContentProps = WithChildren;\n\nconst SUB_CONTENT_SIDE_OFFSET = 0; // NOTE: This effectively results in an offset of -4px due to the default behavior of radix-ui sub-menus\n\n/**\n * @internal\n */\nexport const ALIGN_OFFSET = -4;\n\n/**\n * The component that pops out when the dropdown menu is open.\n * @public\n */\nexport const SubContent = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  MenuSubContentProps\n>((props, forwardedRef) => {\n  const { _onTabKeyPressed, children } = props as MenuSubContentProps & {\n    _onTabKeyPressed: () => void;\n  };\n  const tabKeyHandler = useCallback(\n    (e: ReactKeyboardEvent) => {\n      if (_onTabKeyPressed && e.key === 'Tab') {\n        _onTabKeyPressed();\n      }\n    },\n    [_onTabKeyPressed],\n  );\n  const { style } = useOverlayStacking(undefined, 'overlay');\n  const isMobile = useBreakpoint(`(max-width: ${Breakpoints.Max.Mobile}px)`);\n\n  if (isMobile) {\n    return (\n      <div ref={forwardedRef} className={styles.subContentMobile}>\n        <MenuSubLevelProvider>{children}</MenuSubLevelProvider>\n      </div>\n    );\n  }\n\n  return (\n    <RadixPortal>\n      <RadixSubContent\n        ref={forwardedRef}\n        sideOffset={SUB_CONTENT_SIDE_OFFSET}\n        alignOffset={ALIGN_OFFSET}\n        onKeyUp={tabKeyHandler}\n        className={styles.content}\n        style={{ zIndex: style.zIndex }}\n        collisionPadding={2}\n      >\n        <MenuSubLevelProvider>{children}</MenuSubLevelProvider>\n      </RadixSubContent>\n    </RadixPortal>\n  );\n});\n\n(SubContent as typeof SubContent & { displayName: string }).displayName =\n  'Menu.SubContent';\n"],
+  "mappings": "AAuDQ;AAvDR;AAAA,EACE,cAAc;AAAA,EACd,UAAU;AAAA,OACL;AACP;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AAEP,OAAO,iBAAiB;AAExB,SAAS,4BAA4B;AACrC,YAAY,YAAY;AACxB,SAAS,0BAA0B;AAEnC,SAAS,qBAAqB;AAO9B,MAAM,0BAA0B;AAKzB,MAAM,eAAe;AAMrB,MAAM,aAA6B,2BAGxC,CAAC,OAAO,iBAAiB;AACzB,QAAM,EAAE,kBAAkB,SAAS,IAAI;AAGvC,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAA0B;AACzB,UAAI,oBAAoB,EAAE,QAAQ,OAAO;AACvC,yBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB;AAAA,EACnB;AACA,QAAM,EAAE,MAAM,IAAI,mBAAmB,QAAW,SAAS;AACzD,QAAM,WAAW,cAAc,eAAe,YAAY,IAAI,MAAM,KAAK;AAEzE,MAAI,UAAU;AACZ,WACE,oBAAC,SAAI,KAAK,cAAc,WAAW,OAAO,kBACxC,8BAAC,wBAAsB,UAAS,GAClC;AAAA,EAEJ;AAEA,SACE,oBAAC,eACC;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,SAAS;AAAA,MACT,WAAW,OAAO;AAAA,MAClB,OAAO,EAAE,QAAQ,MAAM,OAAO;AAAA,MAC9B,kBAAkB;AAAA,MAElB,8BAAC,wBAAsB,UAAS;AAAA;AAAA,EAClC,GACF;AAEJ,CAAC;AAEA,WAA2D,cAC1D;",
   "names": []
 }

package/esm/navigation/menu/SubTrigger.js

@@ -1,14 +1,20 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { SubTrigger as RadixSubTrigger } from "@radix-ui/react-dropdown-menu";
 import clsx from "clsx";
-import { forwardRef } from "react";
-import { ChevronRightSmallIcon } from "@dynatrace/strato-icons";
+import { forwardRef, useContext } from "react";
+import Breakpoints from "@dynatrace/strato-design-tokens/breakpoints-js";
+import {
+  ChevronDownSmallIcon,
+  ChevronRightSmallIcon
+} from "@dynatrace/strato-icons";
+import { MenuSubContext } from "./contexts/MenuSubContext.js";
 import { useIsMenuItemHovered } from "./hooks/useIsMenuItemHovered.js";
 import { getSubTriggerSlots } from "./item-slots.js";
 import * as styles from "./Menu.sty.js";
 import { useFocusRing } from "../../core/hooks/useFocusRing.js";
 import { mergeProps as _mergeProps } from "../../core/utils/merge-props.js";
 import { Flex } from "../../layouts/flex/Flex.js";
+import { useBreakpoint } from "../../layouts/hooks/useBreakpoint.js";
 import { textStyle as textStyleCSS } from "../../styles/textStyle.sty.js";
 const SubTrigger = /* @__PURE__ */ forwardRef(
   ({
@@ -21,6 +27,8 @@ const SubTrigger = /* @__PURE__ */ forwardRef(
     ...remainingProps
   }, forwardedRef) => {
     const slots = getSubTriggerSlots(children);
+    const { isOpen, setIsOpen } = useContext(MenuSubContext);
+    const isMobile = useBreakpoint(`(max-width: ${Breakpoints.Max.Mobile}px)`);
     const { focusProps, focusClassName } = useFocusRing({
       disabled
     });
@@ -43,11 +51,18 @@ const SubTrigger = /* @__PURE__ */ forwardRef(
         "aria-haspopup": true,
         role: "menuitem",
         asChild: true,
-        children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", children: [
-          slots.prefix,
-          /* @__PURE__ */ jsx("div", { className: styles.subChildren, children: slots.freeform }),
-          /* @__PURE__ */ jsx(ChevronRightSmallIcon, {})
-        ] })
+        children: /* @__PURE__ */ jsxs(
+          Flex,
+          {
+            justifyContent: "space-between",
+            onClick: isMobile && isOpen ? () => setIsOpen(false) : void 0,
+            children: [
+              slots.prefix,
+              /* @__PURE__ */ jsx("div", { className: styles.subChildren, children: slots.freeform }),
+              isMobile && isOpen ? /* @__PURE__ */ jsx(ChevronDownSmallIcon, {}) : /* @__PURE__ */ jsx(ChevronRightSmallIcon, {})
+            ]
+          }
+        )
       }
     );
   }

package/esm/navigation/menu/SubTrigger.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/menu/SubTrigger.tsx"],
-  "sourcesContent": ["import { SubTrigger as RadixSubTrigger } from '@radix-ui/react-dropdown-menu';\nimport clsx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { ChevronRightSmallIcon } from '@dynatrace/strato-icons';\n\nimport { useIsMenuItemHovered } from './hooks/useIsMenuItemHovered.js';\nimport { getSubTriggerSlots } from './item-slots.js';\nimport * as styles from './Menu.sty.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { textStyle as textStyleCSS } from '../../styles/textStyle.sty.js';\n\n/**\n * @public\n */\nexport interface MenuSubTriggerProps extends WithChildren, AriaLabelingProps {\n  /**\n   * Whether the menu trigger item is disabled.\n   * If true, it prevents the user from interacting with the item.\n   */\n  disabled?: boolean;\n\n  /**\n   * Optional text used for typeahead purposes. By default, the typeahead\n   * behavior will use the .textContent of the item. Use this when the content\n   * is complex, or you have non-textual content inside.\n   */\n  textValue?: string;\n}\n\n/**\n * An item that opens a submenu. Used in combination with a `Menu.Sub`.\n * Must not be rendered inside a root Menu.\n * @public\n */\nexport const SubTrigger = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  MenuSubTriggerProps\n>(\n  (\n    {\n      children,\n      disabled,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      'aria-details': ariaDetails,\n      ...remainingProps\n    }: MenuSubTriggerProps,\n    forwardedRef,\n  ) => {\n    const slots = getSubTriggerSlots(children);\n\n    const { focusProps, focusClassName } = useFocusRing({\n      disabled,\n    });\n    const { isItemHovered, hoverProps } = useIsMenuItemHovered();\n\n    return (\n      <RadixSubTrigger\n        ref={forwardedRef}\n        disabled={disabled}\n        className={clsx(\n          textStyleCSS({ textStyle: 'base-emphasized' }),\n          !isItemHovered && focusClassName,\n          styles.item({ disabled: disabled }),\n        )}\n        {..._mergeProps(remainingProps, focusProps, hoverProps)}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedBy}\n        aria-details={ariaDetails}\n        aria-haspopup={true}\n        role=\"menuitem\"\n        asChild\n      >\n        <Flex justifyContent=\"space-between\">\n          {slots.prefix}\n          <div className={styles.subChildren}>{slots.freeform}</div>\n          <ChevronRightSmallIcon />\n        </Flex>\n      </RadixSubTrigger>\n    );\n  },\n);\n\n(SubTrigger as typeof SubTrigger & { displayName: string }).displayName =\n  'Menu.SubTrigger';\n"],
-  "mappings": "AAgFQ,SAEE,KAFF;AAhFR,SAAS,cAAc,uBAAuB;AAC9C,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAE3B,SAAS,6BAA6B;AAEtC,SAAS,4BAA4B;AACrC,SAAS,0BAA0B;AACnC,YAAY,YAAY;AACxB,SAAS,oBAAoB;AAG7B,SAAS,cAAc,mBAAmB;AAC1C,SAAS,YAAY;AACrB,SAAS,aAAa,oBAAoB;AAyBnC,MAAM,aAA6B;AAAA,EAIxC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,gBAAgB;AAAA,IAChB,GAAG;AAAA,EACL,GACA,iBACG;AACH,UAAM,QAAQ,mBAAmB,QAAQ;AAEzC,UAAM,EAAE,YAAY,eAAe,IAAI,aAAa;AAAA,MAClD;AAAA,IACF,CAAC;AACD,UAAM,EAAE,eAAe,WAAW,IAAI,qBAAqB;AAE3D,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA,WAAW;AAAA,UACT,aAAa,EAAE,WAAW,kBAAkB,CAAC;AAAA,UAC7C,CAAC,iBAAiB;AAAA,UAClB,OAAO,KAAK,EAAE,SAAmB,CAAC;AAAA,QACpC;AAAA,QACC,GAAG,YAAY,gBAAgB,YAAY,UAAU;AAAA,QACtD,cAAY;AAAA,QACZ,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,gBAAc;AAAA,QACd,iBAAe;AAAA,QACf,MAAK;AAAA,QACL,SAAO;AAAA,QAEP,+BAAC,QAAK,gBAAe,iBAClB;AAAA,gBAAM;AAAA,UACP,oBAAC,SAAI,WAAW,OAAO,aAAc,gBAAM,UAAS;AAAA,UACpD,oBAAC,yBAAsB;AAAA,WACzB;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEC,WAA2D,cAC1D;",
+  "sourcesContent": ["import { SubTrigger as RadixSubTrigger } from '@radix-ui/react-dropdown-menu';\nimport clsx from 'clsx';\nimport { forwardRef, useContext } from 'react';\n\nimport Breakpoints from '@dynatrace/strato-design-tokens/breakpoints-js';\nimport {\n  ChevronDownSmallIcon,\n  ChevronRightSmallIcon,\n} from '@dynatrace/strato-icons';\n\nimport { MenuSubContext } from './contexts/MenuSubContext.js';\nimport { useIsMenuItemHovered } from './hooks/useIsMenuItemHovered.js';\nimport { getSubTriggerSlots } from './item-slots.js';\nimport * as styles from './Menu.sty.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { useBreakpoint } from '../../layouts/hooks/useBreakpoint.js';\nimport { textStyle as textStyleCSS } from '../../styles/textStyle.sty.js';\n\n/**\n * @public\n */\nexport interface MenuSubTriggerProps extends WithChildren, AriaLabelingProps {\n  /**\n   * Whether the menu trigger item is disabled.\n   * If true, it prevents the user from interacting with the item.\n   */\n  disabled?: boolean;\n\n  /**\n   * Optional text used for typeahead purposes. By default, the typeahead\n   * behavior will use the .textContent of the item. Use this when the content\n   * is complex, or you have non-textual content inside.\n   */\n  textValue?: string;\n}\n\n/**\n * An item that opens a submenu. Used in combination with a `Menu.Sub`.\n * Must not be rendered inside a root Menu.\n * @public\n */\nexport const SubTrigger = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  MenuSubTriggerProps\n>(\n  (\n    {\n      children,\n      disabled,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      'aria-details': ariaDetails,\n      ...remainingProps\n    }: MenuSubTriggerProps,\n    forwardedRef,\n  ) => {\n    const slots = getSubTriggerSlots(children);\n\n    const { isOpen, setIsOpen } = useContext(MenuSubContext);\n    const isMobile = useBreakpoint(`(max-width: ${Breakpoints.Max.Mobile}px)`);\n\n    const { focusProps, focusClassName } = useFocusRing({\n      disabled,\n    });\n    const { isItemHovered, hoverProps } = useIsMenuItemHovered();\n\n    return (\n      <RadixSubTrigger\n        ref={forwardedRef}\n        disabled={disabled}\n        className={clsx(\n          textStyleCSS({ textStyle: 'base-emphasized' }),\n          !isItemHovered && focusClassName,\n          styles.item({ disabled: disabled }),\n        )}\n        {..._mergeProps(remainingProps, focusProps, hoverProps)}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedBy}\n        aria-details={ariaDetails}\n        aria-haspopup={true}\n        role=\"menuitem\"\n        asChild\n      >\n        <Flex\n          justifyContent=\"space-between\"\n          onClick={isMobile && isOpen ? () => setIsOpen(false) : undefined}\n        >\n          {slots.prefix}\n          <div className={styles.subChildren}>{slots.freeform}</div>\n          {isMobile && isOpen ? (\n            <ChevronDownSmallIcon />\n          ) : (\n            <ChevronRightSmallIcon />\n          )}\n        </Flex>\n      </RadixSubTrigger>\n    );\n  },\n);\n\n(SubTrigger as typeof SubTrigger & { displayName: string }).displayName =\n  'Menu.SubTrigger';\n"],
+  "mappings": "AAyFQ,SAKE,KALF;AAzFR,SAAS,cAAc,uBAAuB;AAC9C,OAAO,UAAU;AACjB,SAAS,YAAY,kBAAkB;AAEvC,OAAO,iBAAiB;AACxB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEP,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AACrC,SAAS,0BAA0B;AACnC,YAAY,YAAY;AACxB,SAAS,oBAAoB;AAG7B,SAAS,cAAc,mBAAmB;AAC1C,SAAS,YAAY;AACrB,SAAS,qBAAqB;AAC9B,SAAS,aAAa,oBAAoB;AAyBnC,MAAM,aAA6B;AAAA,EAIxC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,gBAAgB;AAAA,IAChB,GAAG;AAAA,EACL,GACA,iBACG;AACH,UAAM,QAAQ,mBAAmB,QAAQ;AAEzC,UAAM,EAAE,QAAQ,UAAU,IAAI,WAAW,cAAc;AACvD,UAAM,WAAW,cAAc,eAAe,YAAY,IAAI,MAAM,KAAK;AAEzE,UAAM,EAAE,YAAY,eAAe,IAAI,aAAa;AAAA,MAClD;AAAA,IACF,CAAC;AACD,UAAM,EAAE,eAAe,WAAW,IAAI,qBAAqB;AAE3D,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA,WAAW;AAAA,UACT,aAAa,EAAE,WAAW,kBAAkB,CAAC;AAAA,UAC7C,CAAC,iBAAiB;AAAA,UAClB,OAAO,KAAK,EAAE,SAAmB,CAAC;AAAA,QACpC;AAAA,QACC,GAAG,YAAY,gBAAgB,YAAY,UAAU;AAAA,QACtD,cAAY;AAAA,QACZ,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,gBAAc;AAAA,QACd,iBAAe;AAAA,QACf,MAAK;AAAA,QACL,SAAO;AAAA,QAEP;AAAA,UAAC;AAAA;AAAA,YACC,gBAAe;AAAA,YACf,SAAS,YAAY,SAAS,MAAM,UAAU,KAAK,IAAI;AAAA,YAEtD;AAAA,oBAAM;AAAA,cACP,oBAAC,SAAI,WAAW,OAAO,aAAc,gBAAM,UAAS;AAAA,cACnD,YAAY,SACX,oBAAC,wBAAqB,IAEtB,oBAAC,yBAAsB;AAAA;AAAA;AAAA,QAE3B;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEC,WAA2D,cAC1D;",
   "names": []
 }