@dynatrace/strato-components 3.0.1 → 3.1.1

package/esm/content/feature-highlight/FeatureHighlight.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/feature-highlight/FeatureHighlight.tsx"],
-  "sourcesContent": ["import { eventListeners } from '@popperjs/core';\nimport { OffsetsFunction } from '@popperjs/core/lib/modifiers/offset';\nimport {\n  forwardRef,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ReactElement,\n  type KeyboardEvent as ReactKeyboardEvent,\n  Children,\n  isValidElement,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useIntl } from 'react-intl';\nimport { usePopper } from 'react-popper';\n\nimport { XmarkIcon } from '@dynatrace/strato-icons';\n\nimport { Actions } from './Actions.js';\nimport {\n  FeatureHighlightCloseButtonCSS,\n  FeatureHighlightPointerArrowCSS,\n  FeatureHighlightScrollContainerCSS,\n} from './FeatureHighlight.sty.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useAriaLabelingProps as _useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useOverlayStacking } from '../../core/hooks/useOverlayStacking.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { isDev } from '../../core/utils/is-node-environment.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { useKeyboardFocusHandling } from '../../overlays/hooks/useKeyboardFocusHandling.js';\nimport {\n  basePlacements,\n  type basePlacementsType,\n} from '../../overlays/types/placement.js';\nimport {\n  observeAnimationDone,\n  observeOverlaySize,\n} from '../../overlays/utils/popper-modifiers.js';\nimport { Content } from '../shared-components/Content.js';\nimport { Title } from '../shared-components/Title.js';\nimport { Visual } from '../shared-components/Visual.js';\n\nconst COMPONENT_NAME = 'FeatureHighlight';\n\n// #region Typings\n\n/**\n * Accepted placement properties for FeatureHighlight\n * @public\n */\nexport type FeatureHighlightPlacement =\n  | 'left-top'\n  | 'left-middle'\n  | 'left-bottom'\n  | 'right-top'\n  | 'right-middle'\n  | 'right-bottom'\n  | 'top-left'\n  | 'top-middle'\n  | 'top-right'\n  | 'bottom-left'\n  | 'bottom-middle'\n  | 'bottom-right';\n\n/**\n * Interface for the FeatureHighlight component.\n * @public\n */\nexport interface FeatureHighlightProps\n  extends WithChildren,\n    AriaLabelingProps,\n    DataTestId,\n    MaskingProps,\n    StylingProps {\n  /**\n   * Whether the FeatureHighlight is currently shown or not. Has to be controlled by the consumer.\n   */\n  open: boolean;\n  /**\n   * The element the popover is referring to (i.e. where the pointer is pointing to).\n   */\n  anchor: HTMLElement | null;\n  /**\n   * Placement of the FeatureHighlight.\n   * @defaultValue 'right-bottom'\n   */\n  placement?: FeatureHighlightPlacement;\n  /**\n   * Callback fired when closing the FeatureHighlight.\n   */\n  onClose: () => void;\n}\n\ntype FeatureHighlightSlots = {\n  title: ReactElement | null;\n  visual: ReactElement | null;\n  content: ReactElement | null;\n  actions: ReactElement | null;\n};\n// #endregion Typings\n\nconst getPreferredPlacement = (\n  placement: FeatureHighlightPlacement,\n): basePlacementsType => {\n  const preferredPlacement = placement.split('-')[0] as basePlacementsType;\n  // check if passed placement is actually a valid value, otherwise return the\n  if (basePlacements.includes(preferredPlacement)) {\n    return preferredPlacement;\n  } else {\n    return basePlacements[1];\n  }\n};\n\n/**\n * FeatureHighlight component\n *\n */\nconst FeatureHighlightRoot = forwardRef<HTMLElement, FeatureHighlightProps>(\n  (props, forwardedRef) => {\n    const {\n      open,\n      anchor,\n      placement = 'right-bottom',\n      onClose,\n      children,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      className: consumerClassName,\n      style: consumerStyle,\n      ...remainingProps\n    } = props;\n    const preferredPlacement = getPreferredPlacement(placement);\n    const [overlayElement, setOverlayElement] = useState<HTMLElement | null>();\n    const [arrowElement, setArrowElement] = useState<HTMLElement | null>();\n    const closeButtonRef = useRef<HTMLButtonElement>(null);\n    const featureHighlightContainer = useRef<HTMLElement | null>(null);\n    const rootRef = useMergeRefs<HTMLElement | null>([\n      setOverlayElement,\n      forwardedRef,\n    ]);\n    const [handleFocusOnKeydown, closedOnKeydown] =\n      useKeyboardFocusHandling(closeButtonRef);\n    const overlayStacking = useOverlayStacking(undefined, 'feature-highlight');\n    const ariaLabelingProps = _useAriaLabelingProps(remainingProps);\n    const forwardProps = useSafeForwardProps(remainingProps, ariaLabelingProps);\n    const intl = useIntl();\n    const slots: FeatureHighlightSlots = {\n      title: null,\n      visual: null,\n      content: null,\n      actions: null,\n    };\n\n    // featureHighlight should be placed at the end of the DOM but before microguide and notifications\n    useLayoutEffect(() => {\n      const toastContainer = document.querySelector('[data-toast-container]');\n      const microguideContainer = document.querySelector(\n        '[data-microguide-container]',\n      );\n      featureHighlightContainer.current = document.createElement('div');\n      featureHighlightContainer.current.setAttribute('aria-live', 'polite');\n      featureHighlightContainer.current.setAttribute(\n        'data-feature-highlight-container',\n        'true',\n      );\n\n      if (microguideContainer && microguideContainer.parentNode) {\n        microguideContainer.parentNode.insertBefore(\n          featureHighlightContainer.current,\n          microguideContainer,\n        );\n      } else if (toastContainer && toastContainer.parentNode) {\n        toastContainer.parentNode.insertBefore(\n          featureHighlightContainer.current,\n          toastContainer,\n        );\n      } else {\n        document.body.appendChild(featureHighlightContainer.current);\n      }\n\n      return () => {\n        featureHighlightContainer.current?.remove();\n      };\n    }, []);\n\n    Children.forEach(children, (child) => {\n      if (isSlot(child, Title)) {\n        slots.title = child;\n      } else if (isSlot(child, Visual)) {\n        slots.visual = child;\n      } else if (isSlot(child, Content)) {\n        slots.content = child;\n      } else if (isSlot(child, Actions)) {\n        slots.actions = child;\n      } else if (isValidElement(child) && isDev()) {\n        // eslint-disable-next-line no-console\n        console.warn(\n          'Only Title, Visual, Content and Actions are valid children of FeatureHighlight.',\n        );\n      } else if (isDev() && child !== null) {\n        // eslint-disable-next-line no-console\n        console.warn('The used child is not supported by FeatureHighlight.');\n      }\n    });\n\n    if (slots.title && ariaLabelingProps['aria-labelledby'] === undefined) {\n      ariaLabelingProps['aria-labelledby'] = 'strato-feature-highlight-title';\n    }\n    if (slots.content && ariaLabelingProps['aria-describedby'] === undefined) {\n      ariaLabelingProps['aria-describedby'] =\n        'strato-feature-highlight-content';\n    }\n\n    // Handle the escape key\n    const closeOnEscape = (e: ReactKeyboardEvent<HTMLDivElement>) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        closedOnKeydown.current = true;\n        onClose();\n      }\n    };\n\n    const offsetModifier = useMemo(\n      () => ({\n        name: 'offset',\n        options: {\n          offset: (({ placement: popperPlacement, popper }) => {\n            let skidding = 0;\n            const spacingToPopperEdge = 24;\n            if (popperPlacement === preferredPlacement) {\n              switch (placement) {\n                case 'right-bottom':\n                case 'left-bottom':\n                  skidding = popper.height / 2 - spacingToPopperEdge;\n                  break;\n                case 'right-top':\n                case 'left-top':\n                  skidding = -(popper.height / 2 - spacingToPopperEdge);\n                  break;\n                case 'top-left':\n                case 'bottom-left':\n                  skidding = -(popper.width / 2 - spacingToPopperEdge);\n                  break;\n                case 'top-right':\n                case 'bottom-right':\n                  skidding = popper.width / 2 - spacingToPopperEdge;\n                  break;\n                default:\n                  skidding = 0;\n              }\n            }\n            return [skidding, 16];\n          }) as OffsetsFunction,\n        },\n      }),\n      [placement, preferredPlacement],\n    );\n\n    const { styles, attributes, update } = usePopper(anchor, overlayElement, {\n      placement: preferredPlacement,\n      modifiers: [\n        offsetModifier,\n        {\n          name: 'flip',\n          options: {\n            fallbackPlacements: [...basePlacements],\n          },\n        },\n        {\n          name: 'arrow',\n          options: {\n            element: arrowElement,\n            padding: 16,\n          },\n        },\n        observeOverlaySize,\n        observeAnimationDone,\n        eventListeners,\n      ],\n    });\n\n    useEffect(() => {\n      // Reposition popper when anchor positions change\n      if (!anchor || !open || !update) {\n        return;\n      }\n\n      let prevRect = anchor.getBoundingClientRect();\n      let positionPollRequestId: number | null = null;\n      let pendingAnimationFrame: number | null = null;\n      let isUpdateScheduled = false;\n\n      const scheduleUpdate = () => {\n        if (isUpdateScheduled) {\n          return;\n        }\n        isUpdateScheduled = true;\n\n        if (pendingAnimationFrame !== null) {\n          cancelAnimationFrame(pendingAnimationFrame);\n        }\n\n        pendingAnimationFrame = requestAnimationFrame(() => {\n          update();\n          isUpdateScheduled = false;\n          pendingAnimationFrame = null;\n        });\n      };\n\n      // Poll position changes\n      const pollForPositionChange = () => {\n        const anchorRect = anchor.getBoundingClientRect();\n        const hasPositionChanged =\n          Math.abs(anchorRect.x - prevRect.x) > 0.5 ||\n          Math.abs(anchorRect.y - prevRect.y) > 0.5 ||\n          Math.abs(anchorRect.width - prevRect.width) > 0.5 ||\n          Math.abs(anchorRect.height - prevRect.height) > 0.5;\n\n        if (hasPositionChanged) {\n          prevRect = anchorRect;\n          scheduleUpdate();\n        }\n        positionPollRequestId = requestAnimationFrame(pollForPositionChange);\n      };\n      positionPollRequestId = requestAnimationFrame(pollForPositionChange);\n\n      return () => {\n        if (positionPollRequestId !== null) {\n          cancelAnimationFrame(positionPollRequestId);\n        }\n        if (pendingAnimationFrame !== null) {\n          cancelAnimationFrame(pendingAnimationFrame);\n        }\n      };\n    }, [anchor, open, update]);\n\n    useEffect(() => {\n      if (open === false) {\n        // handle focus if closed via keyboard\n        handleFocusOnKeydown();\n      }\n    }, [handleFocusOnKeydown, open]);\n\n    return open && anchor\n      ? createPortal(\n          <Flex\n            ref={rootRef}\n            onKeyDown={closeOnEscape}\n            role=\"dialog\"\n            aria-modal=\"false\"\n            data-testid={dataTestId}\n            data-dtrum-mask={dataDtrumMask}\n            data-dtrum-allow={dataDtrumAllow}\n            className={consumerClassName}\n            style={{\n              ...styles.popper,\n              zIndex: overlayStacking.style.zIndex,\n              ...consumerStyle,\n            }}\n            {...attributes.popper}\n            {...forwardProps}\n            {...ariaLabelingProps}\n            data-dt-component={COMPONENT_NAME}\n          >\n            <Flex\n              className={FeatureHighlightScrollContainerCSS}\n              flexDirection=\"column\"\n              gap={0}\n              paddingX={16}\n              paddingTop={8}\n              paddingBottom={8}\n            >\n              <Flex\n                flexDirection=\"row\"\n                justifyContent=\"space-between\"\n                alignItems=\"flex-start\"\n                gap={8}\n                paddingBottom={\n                  slots.content !== null ||\n                  slots.actions !== null ||\n                  slots.visual !== null\n                    ? 8\n                    : 0\n                }\n              >\n                <Flex\n                  flexItem\n                  flexGrow={1}\n                  paddingY={6}\n                  id=\"strato-feature-highlight-title\"\n                >\n                  {slots.title}\n                </Flex>\n                <Button\n                  className={FeatureHighlightCloseButtonCSS}\n                  onClick={() => onClose()}\n                  onKeyDown={() => (closedOnKeydown.current = true)}\n                  ref={closeButtonRef}\n                  aria-label={intl.formatMessage({\n                    defaultMessage: 'Close feature highlight',\n                    id: 'XQHEJyt2t/js0TGr',\n                    description: 'Close the feature highlight.',\n                  })}\n                >\n                  <Button.Prefix>\n                    <XmarkIcon />\n                  </Button.Prefix>\n                </Button>\n              </Flex>\n              {slots.visual && (\n                <Flex\n                  paddingBottom={\n                    slots.content !== null || slots.actions !== null ? 16 : 8\n                  }\n                >\n                  {slots.visual}\n                </Flex>\n              )}\n              {slots.content && (\n                <Flex\n                  paddingBottom={8}\n                  style={{ overflow: 'hidden' }}\n                  id=\"strato-feature-highlight-content\"\n                >\n                  {slots.content}\n                </Flex>\n              )}\n              {slots.actions}\n            </Flex>\n            <div\n              data-popper-arrow\n              ref={setArrowElement}\n              className={FeatureHighlightPointerArrowCSS}\n              style={styles.arrow}\n              {...attributes.arrow}\n            />\n          </Flex>,\n          featureHighlightContainer.current || document.body,\n        )\n      : null;\n  },\n);\n\n(\n  FeatureHighlightRoot as typeof FeatureHighlightRoot & {\n    displayName: string;\n  }\n).displayName = COMPONENT_NAME;\n\n/**\n * The `FeatureHighlight` supports the onboarding of new users, as well as the introduction of new features to existing users.\n * It is positioned next to the specified reference element and has four optional slots: `Title`, `Visual`, `Content` and `Actions`.\n *\n * @public\n */\nexport const FeatureHighlight = Object.assign(FeatureHighlightRoot, {\n  Title,\n  Visual,\n  Content,\n  Actions,\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { eventListeners } from '@popperjs/core';\nimport { OffsetsFunction } from '@popperjs/core/lib/modifiers/offset';\nimport {\n  forwardRef,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ReactElement,\n  type KeyboardEvent as ReactKeyboardEvent,\n  Children,\n  isValidElement,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useIntl } from 'react-intl';\nimport { usePopper } from 'react-popper';\n\nimport { XmarkIcon } from '@dynatrace/strato-icons';\n\nimport { Actions } from './Actions.js';\nimport {\n  FeatureHighlightCloseButtonCSS,\n  FeatureHighlightPointerArrowCSS,\n  FeatureHighlightScrollContainerCSS,\n} from './FeatureHighlight.sty.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useOverlayStacking } from '../../core/hooks/useOverlayStacking.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\nimport { isDev } from '../../core/utils/is-node-environment.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { useKeyboardFocusHandling } from '../../overlays/hooks/useKeyboardFocusHandling.js';\nimport {\n  basePlacements,\n  type basePlacementsType,\n} from '../../overlays/types/placement.js';\nimport {\n  observeAnimationDone,\n  observeOverlaySize,\n} from '../../overlays/utils/popper-modifiers.js';\nimport { Content } from '../shared-components/Content.js';\nimport { Title } from '../shared-components/Title.js';\nimport { Visual } from '../shared-components/Visual.js';\n\nconst COMPONENT_NAME = 'FeatureHighlight';\n\n// #region Typings\n\n/**\n * Accepted placement properties for FeatureHighlight\n * @public\n */\nexport type FeatureHighlightPlacement =\n  | 'left-top'\n  | 'left-middle'\n  | 'left-bottom'\n  | 'right-top'\n  | 'right-middle'\n  | 'right-bottom'\n  | 'top-left'\n  | 'top-middle'\n  | 'top-right'\n  | 'bottom-left'\n  | 'bottom-middle'\n  | 'bottom-right';\n\n/**\n * Interface for the FeatureHighlight component.\n * @public\n */\nexport interface FeatureHighlightProps\n  extends WithChildren,\n    AriaLabelingProps,\n    DataTestId,\n    MaskingProps,\n    StylingProps,\n    BehaviorTrackingProps {\n  /**\n   * Whether the FeatureHighlight is currently shown or not. Has to be controlled by the consumer.\n   */\n  open: boolean;\n  /**\n   * The element the popover is referring to (i.e. where the pointer is pointing to).\n   */\n  anchor: HTMLElement | null;\n  /**\n   * Placement of the FeatureHighlight.\n   * @defaultValue 'right-bottom'\n   */\n  placement?: FeatureHighlightPlacement;\n  /**\n   * Callback fired when closing the FeatureHighlight.\n   */\n  onClose: () => void;\n}\n\ntype FeatureHighlightSlots = {\n  title: ReactElement | null;\n  visual: ReactElement | null;\n  content: ReactElement | null;\n  actions: ReactElement | null;\n};\n// #endregion Typings\n\nconst getPreferredPlacement = (\n  placement: FeatureHighlightPlacement,\n): basePlacementsType => {\n  const preferredPlacement = placement.split('-')[0] as basePlacementsType;\n  // check if passed placement is actually a valid value, otherwise return the\n  if (basePlacements.includes(preferredPlacement)) {\n    return preferredPlacement;\n  } else {\n    return basePlacements[1];\n  }\n};\n\n/**\n * FeatureHighlight component\n *\n */\nconst FeatureHighlightRoot = forwardRef<HTMLElement, FeatureHighlightProps>(\n  (props, forwardedRef) => {\n    const {\n      open,\n      anchor,\n      placement = 'right-bottom',\n      onClose,\n      children,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      className: consumerClassName,\n      style: consumerStyle,\n      ...remainingProps\n    } = props;\n    const preferredPlacement = getPreferredPlacement(placement);\n    const [overlayElement, setOverlayElement] = useState<HTMLElement | null>();\n    const [arrowElement, setArrowElement] = useState<HTMLElement | null>();\n    const closeButtonRef = useRef<HTMLButtonElement>(null);\n    const featureHighlightContainer = useRef<HTMLElement | null>(null);\n    const rootRef = useMergeRefs<HTMLElement | null>([\n      setOverlayElement,\n      forwardedRef,\n    ]);\n    const [handleFocusOnKeydown, closedOnKeydown] =\n      useKeyboardFocusHandling(closeButtonRef);\n    const overlayStacking = useOverlayStacking(undefined, 'feature-highlight');\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n    const ariaLabelingProps = useAriaLabelingProps(restProps);\n    const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);\n    const intl = useIntl();\n    const slots: FeatureHighlightSlots = {\n      title: null,\n      visual: null,\n      content: null,\n      actions: null,\n    };\n\n    // featureHighlight should be placed at the end of the DOM but before microguide and notifications\n    useLayoutEffect(() => {\n      const toastContainer = document.querySelector('[data-toast-container]');\n      const microguideContainer = document.querySelector(\n        '[data-microguide-container]',\n      );\n      featureHighlightContainer.current = document.createElement('div');\n      featureHighlightContainer.current.setAttribute('aria-live', 'polite');\n      featureHighlightContainer.current.setAttribute(\n        'data-feature-highlight-container',\n        'true',\n      );\n\n      if (microguideContainer && microguideContainer.parentNode) {\n        microguideContainer.parentNode.insertBefore(\n          featureHighlightContainer.current,\n          microguideContainer,\n        );\n      } else if (toastContainer && toastContainer.parentNode) {\n        toastContainer.parentNode.insertBefore(\n          featureHighlightContainer.current,\n          toastContainer,\n        );\n      } else {\n        document.body.appendChild(featureHighlightContainer.current);\n      }\n\n      return () => {\n        featureHighlightContainer.current?.remove();\n      };\n    }, []);\n\n    Children.forEach(children, (child) => {\n      if (isSlot(child, Title)) {\n        slots.title = child;\n      } else if (isSlot(child, Visual)) {\n        slots.visual = child;\n      } else if (isSlot(child, Content)) {\n        slots.content = child;\n      } else if (isSlot(child, Actions)) {\n        slots.actions = child;\n      } else if (isValidElement(child) && isDev()) {\n        // eslint-disable-next-line no-console\n        console.warn(\n          'Only Title, Visual, Content and Actions are valid children of FeatureHighlight.',\n        );\n      } else if (isDev() && child !== null) {\n        // eslint-disable-next-line no-console\n        console.warn('The used child is not supported by FeatureHighlight.');\n      }\n    });\n\n    if (slots.title && ariaLabelingProps['aria-labelledby'] === undefined) {\n      ariaLabelingProps['aria-labelledby'] = 'strato-feature-highlight-title';\n    }\n    if (slots.content && ariaLabelingProps['aria-describedby'] === undefined) {\n      ariaLabelingProps['aria-describedby'] =\n        'strato-feature-highlight-content';\n    }\n\n    // Handle the escape key\n    const closeOnEscape = (e: ReactKeyboardEvent<HTMLDivElement>) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        closedOnKeydown.current = true;\n        onClose();\n      }\n    };\n\n    const offsetModifier = useMemo(\n      () => ({\n        name: 'offset',\n        options: {\n          offset: (({ placement: popperPlacement, popper }) => {\n            let skidding = 0;\n            const spacingToPopperEdge = 24;\n            if (popperPlacement === preferredPlacement) {\n              switch (placement) {\n                case 'right-bottom':\n                case 'left-bottom':\n                  skidding = popper.height / 2 - spacingToPopperEdge;\n                  break;\n                case 'right-top':\n                case 'left-top':\n                  skidding = -(popper.height / 2 - spacingToPopperEdge);\n                  break;\n                case 'top-left':\n                case 'bottom-left':\n                  skidding = -(popper.width / 2 - spacingToPopperEdge);\n                  break;\n                case 'top-right':\n                case 'bottom-right':\n                  skidding = popper.width / 2 - spacingToPopperEdge;\n                  break;\n                default:\n                  skidding = 0;\n              }\n            }\n            return [skidding, 16];\n          }) as OffsetsFunction,\n        },\n      }),\n      [placement, preferredPlacement],\n    );\n\n    const { styles, attributes, update } = usePopper(anchor, overlayElement, {\n      placement: preferredPlacement,\n      modifiers: [\n        offsetModifier,\n        {\n          name: 'flip',\n          options: {\n            fallbackPlacements: [...basePlacements],\n          },\n        },\n        {\n          name: 'arrow',\n          options: {\n            element: arrowElement,\n            padding: 16,\n          },\n        },\n        observeOverlaySize,\n        observeAnimationDone,\n        eventListeners,\n      ],\n    });\n\n    useEffect(() => {\n      // Reposition popper when anchor positions change\n      if (!anchor || !open || !update) {\n        return;\n      }\n\n      let prevRect = anchor.getBoundingClientRect();\n      let positionPollRequestId: number | null = null;\n      let pendingAnimationFrame: number | null = null;\n      let isUpdateScheduled = false;\n\n      const scheduleUpdate = () => {\n        if (isUpdateScheduled) {\n          return;\n        }\n        isUpdateScheduled = true;\n\n        if (pendingAnimationFrame !== null) {\n          cancelAnimationFrame(pendingAnimationFrame);\n        }\n\n        pendingAnimationFrame = requestAnimationFrame(() => {\n          update();\n          isUpdateScheduled = false;\n          pendingAnimationFrame = null;\n        });\n      };\n\n      // Poll position changes\n      const pollForPositionChange = () => {\n        const anchorRect = anchor.getBoundingClientRect();\n        const hasPositionChanged =\n          Math.abs(anchorRect.x - prevRect.x) > 0.5 ||\n          Math.abs(anchorRect.y - prevRect.y) > 0.5 ||\n          Math.abs(anchorRect.width - prevRect.width) > 0.5 ||\n          Math.abs(anchorRect.height - prevRect.height) > 0.5;\n\n        if (hasPositionChanged) {\n          prevRect = anchorRect;\n          scheduleUpdate();\n        }\n        positionPollRequestId = requestAnimationFrame(pollForPositionChange);\n      };\n      positionPollRequestId = requestAnimationFrame(pollForPositionChange);\n\n      return () => {\n        if (positionPollRequestId !== null) {\n          cancelAnimationFrame(positionPollRequestId);\n        }\n        if (pendingAnimationFrame !== null) {\n          cancelAnimationFrame(pendingAnimationFrame);\n        }\n      };\n    }, [anchor, open, update]);\n\n    useEffect(() => {\n      if (open === false) {\n        // handle focus if closed via keyboard\n        handleFocusOnKeydown();\n      }\n    }, [handleFocusOnKeydown, open]);\n\n    return open && anchor\n      ? createPortal(\n          <Flex\n            ref={rootRef}\n            onKeyDown={closeOnEscape}\n            role=\"dialog\"\n            aria-modal=\"false\"\n            className={consumerClassName}\n            style={{\n              ...styles.popper,\n              zIndex: overlayStacking.style.zIndex,\n              ...consumerStyle,\n            }}\n            data-testid={dataTestId}\n            data-dtrum-mask={dataDtrumMask}\n            data-dtrum-allow={dataDtrumAllow}\n            {...attributes.popper}\n            {...ariaLabelingProps}\n            {...behavioralTrackingProps}\n            {...forwardProps}\n            data-dt-component={COMPONENT_NAME}\n          >\n            <Flex\n              className={FeatureHighlightScrollContainerCSS}\n              flexDirection=\"column\"\n              gap={0}\n              paddingX={16}\n              paddingTop={8}\n              paddingBottom={8}\n            >\n              <Flex\n                flexDirection=\"row\"\n                justifyContent=\"space-between\"\n                alignItems=\"flex-start\"\n                gap={8}\n                paddingBottom={\n                  slots.content !== null ||\n                  slots.actions !== null ||\n                  slots.visual !== null\n                    ? 8\n                    : 0\n                }\n              >\n                <Flex\n                  flexItem\n                  flexGrow={1}\n                  paddingY={6}\n                  id=\"strato-feature-highlight-title\"\n                >\n                  {slots.title}\n                </Flex>\n                <Button\n                  className={FeatureHighlightCloseButtonCSS}\n                  onClick={() => onClose()}\n                  onKeyDown={() => (closedOnKeydown.current = true)}\n                  ref={closeButtonRef}\n                  aria-label={intl.formatMessage({\n                    defaultMessage: 'Close feature highlight',\n                    id: 'XQHEJyt2t/js0TGr',\n                    description: 'Close the feature highlight.',\n                  })}\n                >\n                  <Button.Prefix>\n                    <XmarkIcon />\n                  </Button.Prefix>\n                </Button>\n              </Flex>\n              {slots.visual && (\n                <Flex\n                  paddingBottom={\n                    slots.content !== null || slots.actions !== null ? 16 : 8\n                  }\n                >\n                  {slots.visual}\n                </Flex>\n              )}\n              {slots.content && (\n                <Flex\n                  paddingBottom={8}\n                  style={{ overflow: 'hidden' }}\n                  id=\"strato-feature-highlight-content\"\n                >\n                  {slots.content}\n                </Flex>\n              )}\n              {slots.actions}\n            </Flex>\n            <div\n              data-popper-arrow\n              ref={setArrowElement}\n              className={FeatureHighlightPointerArrowCSS}\n              style={styles.arrow}\n              {...attributes.arrow}\n            />\n          </Flex>,\n          featureHighlightContainer.current || document.body,\n        )\n      : null;\n  },\n);\n\n(\n  FeatureHighlightRoot as typeof FeatureHighlightRoot & {\n    displayName: string;\n  }\n).displayName = COMPONENT_NAME;\n\n/**\n * The `FeatureHighlight` supports the onboarding of new users, as well as the introduction of new features to existing users.\n * It is positioned next to the specified reference element and has four optional slots: `Title`, `Visual`, `Content` and `Actions`.\n *\n * @public\n */\nexport const FeatureHighlight = Object.assign(FeatureHighlightRoot, {\n  Title,\n  Visual,\n  Content,\n  Actions,\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/content/feature-highlight/FeatureHighlight.sty.js

@@ -1,7 +1,7 @@
 import "./FeatureHighlight.css";
-var FeatureHighlightCloseButtonCSS = "_1t60p5x2-3-0-1";
-var FeatureHighlightPointerArrowCSS = "_1t60p5x1-3-0-1";
-var FeatureHighlightScrollContainerCSS = "_1t60p5x0-3-0-1";
+var FeatureHighlightCloseButtonCSS = "_1t60p5x2-3-1-1";
+var FeatureHighlightPointerArrowCSS = "_1t60p5x1-3-1-1";
+var FeatureHighlightScrollContainerCSS = "_1t60p5x0-3-1-1";
 export {
   FeatureHighlightCloseButtonCSS,
   FeatureHighlightPointerArrowCSS,

package/esm/content/feature-highlight/FeatureHighlight.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/feature-highlight/FeatureHighlight.css.ts"],
-  "sourcesContent": ["import './FeatureHighlight.css';\nexport var FeatureHighlightCloseButtonCSS = '_1t60p5x2-3-0-1';\nexport var FeatureHighlightPointerArrowCSS = '_1t60p5x1-3-0-1';\nexport var FeatureHighlightScrollContainerCSS = '_1t60p5x0-3-0-1';"],
+  "sourcesContent": ["import './FeatureHighlight.css';\nexport var FeatureHighlightCloseButtonCSS = '_1t60p5x2-3-1-1';\nexport var FeatureHighlightPointerArrowCSS = '_1t60p5x1-3-1-1';\nexport var FeatureHighlightScrollContainerCSS = '_1t60p5x0-3-1-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,iCAAiC;AACrC,IAAI,kCAAkC;AACtC,IAAI,qCAAqC;",
   "names": []
 }

package/esm/content/health-indicator/HealthIndicator.js

@@ -5,7 +5,10 @@ import { Label } from "./Label.js";
 import { StatusVisual } from "./StatusVisual.js";
 import * as styles from "./styles.sty.js";
 import { Visual } from "./Visual.js";
+import { useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
+import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
 import { useId } from "../../core/hooks/useId.js";
+import { useSafeForwardProps } from "../../core/hooks/useSafeForwardProps.js";
 import { useSlots } from "../../core/hooks/useSlots.js";
 import { useContainerColoring } from "../../layouts/container/Container.js";
 import { Flex } from "../../layouts/flex/Flex.js";
@@ -14,21 +17,26 @@ const HealthIndicatorRoot = forwardRef(
   (props, forwardedRef) => {
     const {
       children,
+      id,
+      status = "neutral",
+      visual = "shape",
       className: consumerClassName,
       style: consumerStyle,
       "data-dtrum-mask": dataDtrumMask,
       "data-dtrum-allow": dataDtrumAllow,
-      id,
-      status = "neutral",
-      visual = "shape",
-      "aria-labelledby": ariaLabelledBy,
-      "aria-label": ariaLabel,
-      "aria-describedby": ariaDescribedBy,
       "data-testid": dataTestId,
       ...remainingProps
     } = props;
     const containerColoring = useContainerColoring();
     const onAccent = containerColoring.variant === "accent";
+    const [behavioralTrackingProps, restProps] = useBehavioralTrackingProps(remainingProps);
+    const ariaLabelingProps = useAriaLabelingProps(restProps);
+    const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);
+    const {
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      ...remainingAriaLabelingProps
+    } = ariaLabelingProps;
     const labelId = useId();
     const [slots] = useSlots(children, {
       visual: Visual,
@@ -38,19 +46,20 @@ const HealthIndicatorRoot = forwardRef(
     return /* @__PURE__ */ jsxs(
       Flex,
       {
-        alignItems: "flex-start",
-        gap: visual === "icon" ? 8 : 4,
         id,
         ref: forwardedRef,
+        alignItems: "flex-start",
+        gap: visual === "icon" ? 8 : 4,
+        className: consumerClassName,
         style: {
           minWidth: 0,
           ...consumerStyle
         },
-        className: consumerClassName,
+        "data-testid": dataTestId,
         "data-dtrum-mask": dataDtrumMask,
         "data-dtrum-allow": dataDtrumAllow,
-        "data-testid": dataTestId,
-        ...remainingProps,
+        ...behavioralTrackingProps,
+        ...forwardProps,
         "data-dt-component": COMPONENT_NAME,
         children: [
           /* @__PURE__ */ jsx(
@@ -59,6 +68,7 @@ const HealthIndicatorRoot = forwardRef(
               className: styles.visual({ status, onAccent, visualType: visual }),
               "aria-labelledby": ariaLabelledBy ?? (slots.label && !ariaLabel ? labelId : void 0),
               "aria-label": ariaLabel,
+              ...remainingAriaLabelingProps,
               children: !isNil(slots.visual) ? slots.visual : /* @__PURE__ */ jsx(StatusVisual, { status, visual })
             }
           ),

package/esm/content/health-indicator/HealthIndicator.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/health-indicator/HealthIndicator.tsx"],
-  "sourcesContent": ["import { isNil } from 'lodash-es';\nimport { forwardRef, type PropsWithChildren } from 'react';\n\nimport { Label } from './Label.js';\nimport { StatusVisual } from './StatusVisual.js';\nimport * as styles from './styles.sty.js';\nimport { Visual } from './Visual.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useSlots } from '../../core/hooks/useSlots.js';\nimport { AriaDisabledProps, AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { DOMProps } from '../../core/types/dom.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { useContainerColoring } from '../../layouts/container/Container.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\n\n\nconst COMPONENT_NAME = 'HealthIndicator';\n\n// #region Typings\n/**\n * Accepted properties for HealthIndicator\n * @public\n */\nexport interface HealthIndicatorProps\n  extends DOMProps,\n    StylingProps,\n    DataTestId,\n    PropsWithChildren,\n    MaskingProps,\n    AriaLabelingProps,\n    AriaDisabledProps {\n  /**\n   * The status of the component. This should be chosen based on the context\n   * the indicator is used in.\n   * @defaultValue 'neutral'\n   */\n  status?: 'ideal' | 'good' | 'neutral' | 'warning' | 'critical';\n  /**\n   * Configures the visual representation of the component, which is a shape by\n   * default.\n   * @defaultValue 'shape'\n   */\n  visual?: 'shape' | 'icon';\n}\n\n// #endregion\n\nconst HealthIndicatorRoot = forwardRef<HTMLDivElement, HealthIndicatorProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      id,\n      status = 'neutral',\n      visual = 'shape',\n      'aria-labelledby': ariaLabelledBy,\n      'aria-label': ariaLabel,\n      'aria-describedby': ariaDescribedBy,\n      'data-testid': dataTestId,\n      ...remainingProps\n    }: HealthIndicatorProps = props;\n\n    const containerColoring = useContainerColoring();\n    const onAccent = containerColoring.variant === 'accent';\n\n    const labelId = useId();\n    const [slots] = useSlots(children, {\n      visual: Visual,\n      label: Label,\n    });\n\n    const visualContainerHeight = visual === 'icon' ? 10 : 6;\n\n    return (\n      <Flex\n        alignItems=\"flex-start\"\n        gap={visual === 'icon' ? 8 : 4}\n        id={id}\n        ref={forwardedRef}\n        style={{\n          minWidth: 0,\n          ...consumerStyle,\n        }}\n        className={consumerClassName}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        data-testid={dataTestId}\n        {...remainingProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <div\n          className={styles.visual({ status, onAccent, visualType: visual })}\n          aria-labelledby={\n            ariaLabelledBy ?? (slots.label && !ariaLabel ? labelId : undefined)\n          }\n          aria-label={ariaLabel}\n        >\n          {!isNil(slots.visual) ? (\n            slots.visual\n          ) : (\n            <StatusVisual status={status} visual={visual} />\n          )}\n        </div>\n        {!isNil(slots.label) && (\n          <div\n            id={labelId}\n            style={{\n              // Calculate padding-top: (container height for icon (20px) or shape (12px) - 1 line height) / 2\n              paddingTop: `calc(-0.5lh + ${visualContainerHeight}px)`,\n              minWidth: '0',\n            }}\n          >\n            {slots.label}\n          </div>\n        )}\n      </Flex>\n    );\n  },\n);\n\n(\n  HealthIndicatorRoot as typeof HealthIndicatorRoot & { displayName: string }\n).displayName = COMPONENT_NAME;\n\n/**\n * The HealthIndicator helps consumers to visualize the status of a resource.\n * @public\n */\nexport const HealthIndicator = Object.assign(HealthIndicatorRoot, {\n  Visual,\n  Label,\n});\n"],
-  "mappings": "AA+EM,SA0BM,KA1BN;AA/EN,SAAS,aAAa;AACtB,SAAS,kBAA0C;AAEnD,SAAS,aAAa;AACtB,SAAS,oBAAoB;AAC7B,YAAY,YAAY;AACxB,SAAS,cAAc;AACvB,SAAS,aAAa;AACtB,SAAS,gBAAgB;AAMzB,SAAS,4BAA4B;AACrC,SAAS,YAAY;AAGrB,MAAM,iBAAiB;AA+BvB,MAAM,sBAAsB;AAAA,EAC1B,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,MACX,OAAO;AAAA,MACP,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB;AAAA,MACA,SAAS;AAAA,MACT,SAAS;AAAA,MACT,mBAAmB;AAAA,MACnB,cAAc;AAAA,MACd,oBAAoB;AAAA,MACpB,eAAe;AAAA,MACf,GAAG;AAAA,IACL,IAA0B;AAE1B,UAAM,oBAAoB,qBAAqB;AAC/C,UAAM,WAAW,kBAAkB,YAAY;AAE/C,UAAM,UAAU,MAAM;AACtB,UAAM,CAAC,KAAK,IAAI,SAAS,UAAU;AAAA,MACjC,QAAQ;AAAA,MACR,OAAO;AAAA,IACT,CAAC;AAED,UAAM,wBAAwB,WAAW,SAAS,KAAK;AAEvD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,KAAK,WAAW,SAAS,IAAI;AAAA,QAC7B;AAAA,QACA,KAAK;AAAA,QACL,OAAO;AAAA,UACL,UAAU;AAAA,UACV,GAAG;AAAA,QACL;AAAA,QACA,WAAW;AAAA,QACX,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,eAAa;AAAA,QACZ,GAAG;AAAA,QACJ,qBAAmB;AAAA,QAEnB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,OAAO,OAAO,EAAE,QAAQ,UAAU,YAAY,OAAO,CAAC;AAAA,cACjE,mBACE,mBAAmB,MAAM,SAAS,CAAC,YAAY,UAAU;AAAA,cAE3D,cAAY;AAAA,cAEX,WAAC,MAAM,MAAM,MAAM,IAClB,MAAM,SAEN,oBAAC,gBAAa,QAAgB,QAAgB;AAAA;AAAA,UAElD;AAAA,UACC,CAAC,MAAM,MAAM,KAAK,KACjB;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,OAAO;AAAA;AAAA,gBAEL,YAAY,iBAAiB,qBAAqB;AAAA,gBAClD,UAAU;AAAA,cACZ;AAAA,cAEC,gBAAM;AAAA;AAAA,UACT;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAGE,oBACA,cAAc;AAMT,MAAM,kBAAkB,OAAO,OAAO,qBAAqB;AAAA,EAChE;AAAA,EACA;AACF,CAAC;",
+  "sourcesContent": ["import { isNil } from 'lodash-es';\nimport { forwardRef } from 'react';\n\nimport type { HealthIndicatorProps } from './health-indicator-types.js';\nimport { Label } from './Label.js';\nimport { StatusVisual } from './StatusVisual.js';\nimport * as styles from './styles.sty.js';\nimport { Visual } from './Visual.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport { useSlots } from '../../core/hooks/useSlots.js';\nimport { useContainerColoring } from '../../layouts/container/Container.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\n\nconst COMPONENT_NAME = 'HealthIndicator';\n\nconst HealthIndicatorRoot = forwardRef<HTMLDivElement, HealthIndicatorProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      id,\n      status = 'neutral',\n      visual = 'shape',\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      'data-testid': dataTestId,\n      ...remainingProps\n    } = props;\n\n    const containerColoring = useContainerColoring();\n    const onAccent = containerColoring.variant === 'accent';\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n    const ariaLabelingProps = useAriaLabelingProps(restProps);\n    const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);\n    const {\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      ...remainingAriaLabelingProps\n    } = ariaLabelingProps;\n\n    const labelId = useId();\n    const [slots] = useSlots(children, {\n      visual: Visual,\n      label: Label,\n    });\n\n    const visualContainerHeight = visual === 'icon' ? 10 : 6;\n\n    return (\n      <Flex\n        id={id}\n        ref={forwardedRef}\n        alignItems=\"flex-start\"\n        gap={visual === 'icon' ? 8 : 4}\n        className={consumerClassName}\n        style={{\n          minWidth: 0,\n          ...consumerStyle,\n        }}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        {...behavioralTrackingProps}\n        {...forwardProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <div\n          className={styles.visual({ status, onAccent, visualType: visual })}\n          aria-labelledby={\n            ariaLabelledBy ?? (slots.label && !ariaLabel ? labelId : undefined)\n          }\n          aria-label={ariaLabel}\n          {...remainingAriaLabelingProps}\n        >\n          {!isNil(slots.visual) ? (\n            slots.visual\n          ) : (\n            <StatusVisual status={status} visual={visual} />\n          )}\n        </div>\n        {!isNil(slots.label) && (\n          <div\n            id={labelId}\n            style={{\n              // Calculate padding-top: (container height for icon (20px) or shape (12px) - 1 line height) / 2\n              paddingTop: `calc(-0.5lh + ${visualContainerHeight}px)`,\n              minWidth: '0',\n            }}\n          >\n            {slots.label}\n          </div>\n        )}\n      </Flex>\n    );\n  },\n);\n\n(\n  HealthIndicatorRoot as typeof HealthIndicatorRoot & { displayName: string }\n).displayName = COMPONENT_NAME;\n\n/**\n * The HealthIndicator helps consumers to visualize the status of a resource.\n * @public\n */\nexport const HealthIndicator = Object.assign(HealthIndicatorRoot, {\n  Visual,\n  Label,\n});\n"],
+  "mappings": "AAuDM,SA4BM,KA5BN;AAvDN,SAAS,aAAa;AACtB,SAAS,kBAAkB;AAG3B,SAAS,aAAa;AACtB,SAAS,oBAAoB;AAC7B,YAAY,YAAY;AACxB,SAAS,cAAc;AACvB,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C,SAAS,aAAa;AACtB,SAAS,2BAA2B;AACpC,SAAS,gBAAgB;AACzB,SAAS,4BAA4B;AACrC,SAAS,YAAY;AAErB,MAAM,iBAAiB;AAEvB,MAAM,sBAAsB;AAAA,EAC1B,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,SAAS;AAAA,MACT,WAAW;AAAA,MACX,OAAO;AAAA,MACP,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,eAAe;AAAA,MACf,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,oBAAoB,qBAAqB;AAC/C,UAAM,WAAW,kBAAkB,YAAY;AAE/C,UAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAC3C,UAAM,oBAAoB,qBAAqB,SAAS;AACxD,UAAM,eAAe,oBAAoB,WAAW,iBAAiB;AACrE,UAAM;AAAA,MACJ,cAAc;AAAA,MACd,mBAAmB;AAAA,MACnB,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,UAAU,MAAM;AACtB,UAAM,CAAC,KAAK,IAAI,SAAS,UAAU;AAAA,MACjC,QAAQ;AAAA,MACR,OAAO;AAAA,IACT,CAAC;AAED,UAAM,wBAAwB,WAAW,SAAS,KAAK;AAEvD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,KAAK;AAAA,QACL,YAAW;AAAA,QACX,KAAK,WAAW,SAAS,IAAI;AAAA,QAC7B,WAAW;AAAA,QACX,OAAO;AAAA,UACL,UAAU;AAAA,UACV,GAAG;AAAA,QACL;AAAA,QACA,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QACjB,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,qBAAmB;AAAA,QAEnB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,OAAO,OAAO,EAAE,QAAQ,UAAU,YAAY,OAAO,CAAC;AAAA,cACjE,mBACE,mBAAmB,MAAM,SAAS,CAAC,YAAY,UAAU;AAAA,cAE3D,cAAY;AAAA,cACX,GAAG;AAAA,cAEH,WAAC,MAAM,MAAM,MAAM,IAClB,MAAM,SAEN,oBAAC,gBAAa,QAAgB,QAAgB;AAAA;AAAA,UAElD;AAAA,UACC,CAAC,MAAM,MAAM,KAAK,KACjB;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,OAAO;AAAA;AAAA,gBAEL,YAAY,iBAAiB,qBAAqB;AAAA,gBAClD,UAAU;AAAA,cACZ;AAAA,cAEC,gBAAM;AAAA;AAAA,UACT;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAGE,oBACA,cAAc;AAMT,MAAM,kBAAkB,OAAO,OAAO,qBAAqB;AAAA,EAChE;AAAA,EACA;AACF,CAAC;",
   "names": []
 }

package/esm/content/health-indicator/StatusVisual.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/health-indicator/StatusVisual.tsx"],
-  "sourcesContent": ["import {\n  CriticalIcon,\n  InformationIcon,\n  SuccessIcon,\n  UnavailableIcon,\n  WarningIcon,\n} from '@dynatrace/strato-icons';\n\nimport type { HealthIndicatorProps } from './HealthIndicator.js';\nimport {\n  CriticalShape,\n  GoodShape,\n  IdealShape,\n  NeutralShape,\n  WarningShape,\n} from './Shapes.js';\n\n/**\n * The StatusVisual component is a helper component that decides whether an\n * icon or shape is returned.\n * @internal\n */\nexport const StatusVisual = (\n  props: Pick<HealthIndicatorProps, 'status' | 'visual'>,\n) => {\n  const { status, visual } = props;\n\n  switch (status) {\n    case 'ideal':\n      return visual === 'icon' ? <SuccessIcon /> : <IdealShape />;\n    case 'good':\n      return visual === 'icon' ? <InformationIcon /> : <GoodShape />;\n    case 'warning':\n      return visual === 'icon' ? <WarningIcon /> : <WarningShape />;\n    case 'critical':\n      return visual === 'icon' ? <CriticalIcon /> : <CriticalShape />;\n    case 'neutral':\n    default:\n      return visual === 'icon' ? <UnavailableIcon /> : <NeutralShape />;\n  }\n};\n"],
+  "sourcesContent": ["import {\n  CriticalIcon,\n  InformationIcon,\n  SuccessIcon,\n  UnavailableIcon,\n  WarningIcon,\n} from '@dynatrace/strato-icons';\n\nimport type { HealthIndicatorProps } from './health-indicator-types.js';\nimport {\n  CriticalShape,\n  GoodShape,\n  IdealShape,\n  NeutralShape,\n  WarningShape,\n} from './Shapes.js';\n\n/**\n * The StatusVisual component is a helper component that decides whether an\n * icon or shape is returned.\n * @internal\n */\nexport const StatusVisual = (\n  props: Pick<HealthIndicatorProps, 'status' | 'visual'>,\n) => {\n  const { status, visual } = props;\n\n  switch (status) {\n    case 'ideal':\n      return visual === 'icon' ? <SuccessIcon /> : <IdealShape />;\n    case 'good':\n      return visual === 'icon' ? <InformationIcon /> : <GoodShape />;\n    case 'warning':\n      return visual === 'icon' ? <WarningIcon /> : <WarningShape />;\n    case 'critical':\n      return visual === 'icon' ? <CriticalIcon /> : <CriticalShape />;\n    case 'neutral':\n    default:\n      return visual === 'icon' ? <UnavailableIcon /> : <NeutralShape />;\n  }\n};\n"],
   "mappings": "AA6BiC;AA7BjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAOA,MAAM,eAAe,CAC1B,UACG;AACH,QAAM,EAAE,QAAQ,OAAO,IAAI;AAE3B,UAAQ,QAAQ;AAAA,IACd,KAAK;AACH,aAAO,WAAW,SAAS,oBAAC,eAAY,IAAK,oBAAC,cAAW;AAAA,IAC3D,KAAK;AACH,aAAO,WAAW,SAAS,oBAAC,mBAAgB,IAAK,oBAAC,aAAU;AAAA,IAC9D,KAAK;AACH,aAAO,WAAW,SAAS,oBAAC,eAAY,IAAK,oBAAC,gBAAa;AAAA,IAC7D,KAAK;AACH,aAAO,WAAW,SAAS,oBAAC,gBAAa,IAAK,oBAAC,iBAAc;AAAA,IAC/D,KAAK;AAAA,IACL;AACE,aAAO,WAAW,SAAS,oBAAC,mBAAgB,IAAK,oBAAC,gBAAa;AAAA,EACnE;AACF;",
   "names": []
 }

package/esm/content/health-indicator/health-indicator-types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=health-indicator-types.js.map

package/esm/content/health-indicator/health-indicator-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/esm/content/health-indicator/styles.css

@@ -1,42 +1,42 @@
-._1qqzg801-3-0-1 {
+._1qqzg801-3-1-1 {
   width: var(--dt-spacings-size-20, 20px);
   min-height: 1lh;
-  color: var(--_1qqzg800-3-0-1);
+  color: var(--_1qqzg800-3-1-1);
   display: flex;
   align-self: flex-start;
   align-items: center;
   flex-shrink: 0;
 }
-._1qqzg802-3-0-1 {
-  --_1qqzg800-3-0-1: var(--dt-colors-icon-success-default, #2d6761);
+._1qqzg802-3-1-1 {
+  --_1qqzg800-3-1-1: var(--dt-colors-icon-success-default, #2d6761);
 }
-._1qqzg803-3-0-1 {
-  --_1qqzg800-3-0-1: var(--dt-colors-icon-primary-default, #464cce);
+._1qqzg803-3-1-1 {
+  --_1qqzg800-3-1-1: var(--dt-colors-icon-primary-default, #464cce);
 }
-._1qqzg804-3-0-1 {
-  --_1qqzg800-3-0-1: var(--dt-colors-icon-neutral-subdued, #595a7d);
+._1qqzg804-3-1-1 {
+  --_1qqzg800-3-1-1: var(--dt-colors-icon-neutral-subdued, #595a7d);
 }
-._1qqzg805-3-0-1 {
-  --_1qqzg800-3-0-1: var(--dt-colors-icon-warning-default, #855400);
+._1qqzg805-3-1-1 {
+  --_1qqzg800-3-1-1: var(--dt-colors-icon-warning-default, #855400);
 }
-._1qqzg806-3-0-1 {
-  --_1qqzg800-3-0-1: var(--dt-colors-icon-critical-default, #bb0731);
+._1qqzg806-3-1-1 {
+  --_1qqzg800-3-1-1: var(--dt-colors-icon-critical-default, #bb0731);
 }
-._1qqzg808-3-0-1 {
+._1qqzg808-3-1-1 {
   width: var(--dt-spacings-size-12, 12px);
 }
-._1qqzg80b-3-0-1 {
-  --_1qqzg800-3-0-1: var(--dt-colors-icon-success-on-accent-default, #f1f4f4);
+._1qqzg80b-3-1-1 {
+  --_1qqzg800-3-1-1: var(--dt-colors-icon-success-on-accent-default, #f1f4f4);
 }
-._1qqzg80c-3-0-1 {
-  --_1qqzg800-3-0-1: var(--dt-colors-icon-primary-on-accent-default, #f4f4fb);
+._1qqzg80c-3-1-1 {
+  --_1qqzg800-3-1-1: var(--dt-colors-icon-primary-on-accent-default, #f4f4fb);
 }
-._1qqzg80d-3-0-1 {
-  --_1qqzg800-3-0-1: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
+._1qqzg80d-3-1-1 {
+  --_1qqzg800-3-1-1: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
 }
-._1qqzg80e-3-0-1 {
-  --_1qqzg800-3-0-1: var(--dt-colors-icon-warning-on-accent-default, #272024);
+._1qqzg80e-3-1-1 {
+  --_1qqzg800-3-1-1: var(--dt-colors-icon-warning-on-accent-default, #272024);
 }
-._1qqzg80f-3-0-1 {
-  --_1qqzg800-3-0-1: var(--dt-colors-icon-critical-on-accent-default, #f9f1f3);
+._1qqzg80f-3-1-1 {
+  --_1qqzg800-3-1-1: var(--dt-colors-icon-critical-on-accent-default, #f9f1f3);
 }

package/esm/content/health-indicator/styles.sty.js

@@ -1,6 +1,6 @@
 import "./styles.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var visual = _7a468({ defaultClassName: "_1qqzg801-3-0-1", variantClassNames: { status: { ideal: "_1qqzg802-3-0-1", good: "_1qqzg803-3-0-1", neutral: "_1qqzg804-3-0-1", warning: "_1qqzg805-3-0-1", critical: "_1qqzg806-3-0-1" }, visualType: { icon: "_1qqzg807-3-0-1", shape: "_1qqzg808-3-0-1" }, onAccent: { true: "_1qqzg809-3-0-1", false: "_1qqzg80a-3-0-1" } }, defaultVariants: {}, compoundVariants: [[{ status: "ideal", onAccent: true }, "_1qqzg80b-3-0-1"], [{ status: "good", onAccent: true }, "_1qqzg80c-3-0-1"], [{ status: "neutral", onAccent: true }, "_1qqzg80d-3-0-1"], [{ status: "warning", onAccent: true }, "_1qqzg80e-3-0-1"], [{ status: "critical", onAccent: true }, "_1qqzg80f-3-0-1"]] });
+var visual = _7a468({ defaultClassName: "_1qqzg801-3-1-1", variantClassNames: { status: { ideal: "_1qqzg802-3-1-1", good: "_1qqzg803-3-1-1", neutral: "_1qqzg804-3-1-1", warning: "_1qqzg805-3-1-1", critical: "_1qqzg806-3-1-1" }, visualType: { icon: "_1qqzg807-3-1-1", shape: "_1qqzg808-3-1-1" }, onAccent: { true: "_1qqzg809-3-1-1", false: "_1qqzg80a-3-1-1" } }, defaultVariants: {}, compoundVariants: [[{ status: "ideal", onAccent: true }, "_1qqzg80b-3-1-1"], [{ status: "good", onAccent: true }, "_1qqzg80c-3-1-1"], [{ status: "neutral", onAccent: true }, "_1qqzg80d-3-1-1"], [{ status: "warning", onAccent: true }, "_1qqzg80e-3-1-1"], [{ status: "critical", onAccent: true }, "_1qqzg80f-3-1-1"]] });
 export {
   visual
 };

package/esm/content/health-indicator/styles.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/health-indicator/styles.css.ts"],
-  "sourcesContent": ["import './styles.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var visual = _7a468({defaultClassName:'_1qqzg801-3-0-1',variantClassNames:{status:{ideal:'_1qqzg802-3-0-1',good:'_1qqzg803-3-0-1',neutral:'_1qqzg804-3-0-1',warning:'_1qqzg805-3-0-1',critical:'_1qqzg806-3-0-1'},visualType:{icon:'_1qqzg807-3-0-1',shape:'_1qqzg808-3-0-1'},onAccent:{true:'_1qqzg809-3-0-1',false:'_1qqzg80a-3-0-1'}},defaultVariants:{},compoundVariants:[[{status:'ideal',onAccent:true},'_1qqzg80b-3-0-1'],[{status:'good',onAccent:true},'_1qqzg80c-3-0-1'],[{status:'neutral',onAccent:true},'_1qqzg80d-3-0-1'],[{status:'warning',onAccent:true},'_1qqzg80e-3-0-1'],[{status:'critical',onAccent:true},'_1qqzg80f-3-0-1']]});"],
+  "sourcesContent": ["import './styles.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var visual = _7a468({defaultClassName:'_1qqzg801-3-1-1',variantClassNames:{status:{ideal:'_1qqzg802-3-1-1',good:'_1qqzg803-3-1-1',neutral:'_1qqzg804-3-1-1',warning:'_1qqzg805-3-1-1',critical:'_1qqzg806-3-1-1'},visualType:{icon:'_1qqzg807-3-1-1',shape:'_1qqzg808-3-1-1'},onAccent:{true:'_1qqzg809-3-1-1',false:'_1qqzg80a-3-1-1'}},defaultVariants:{},compoundVariants:[[{status:'ideal',onAccent:true},'_1qqzg80b-3-1-1'],[{status:'good',onAccent:true},'_1qqzg80c-3-1-1'],[{status:'neutral',onAccent:true},'_1qqzg80d-3-1-1'],[{status:'warning',onAccent:true},'_1qqzg80e-3-1-1'],[{status:'critical',onAccent:true},'_1qqzg80f-3-1-1']]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,SAAS,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,QAAO,EAAC,OAAM,mBAAkB,MAAK,mBAAkB,SAAQ,mBAAkB,SAAQ,mBAAkB,UAAS,kBAAiB,GAAE,YAAW,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,QAAO,SAAQ,UAAS,KAAI,GAAE,iBAAiB,GAAE,CAAC,EAAC,QAAO,QAAO,UAAS,KAAI,GAAE,iBAAiB,GAAE,CAAC,EAAC,QAAO,WAAU,UAAS,KAAI,GAAE,iBAAiB,GAAE,CAAC,EAAC,QAAO,WAAU,UAAS,KAAI,GAAE,iBAAiB,GAAE,CAAC,EAAC,QAAO,YAAW,UAAS,KAAI,GAAE,iBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/content/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/content/index.ts"],
-  "sourcesContent": ["export { ProgressBar } from './progress/ProgressBar.js';\nexport type { ProgressBarProps } from './progress/ProgressBar.js';\nexport type { ProgressBarIconProps } from './progress/ProgressBarIcon.js';\nexport type { ProgressBarLabelProps } from './progress/ProgressBarLabel.js';\nexport type { ProgressBarValueProps } from './progress/ProgressBarValue.js';\nexport { ProgressCircle } from './progress/ProgressCircle.js';\nexport type { ProgressCircleProps } from './progress/ProgressCircle.js';\nexport { Skeleton } from './skeleton/Skeleton.js';\nexport type { SkeletonProps } from './skeleton/Skeleton.js';\nexport { SkeletonText } from './skeleton/SkeletonText.js';\nexport type { SkeletonTextProps } from './skeleton/SkeletonText.js';\nexport { Accordion } from './accordion/Accordion.js';\nexport type {\n  AccordionControlledProps,\n  AccordionOwnProps,\n  AccordionProps,\n  AccordionUncontrolledProps,\n  OnChangeValue,\n} from './accordion/Accordion.js';\nexport type {\n  SingleExpanded,\n  MultiExpanded,\n} from './accordion/accordion-state.js';\nexport type {\n  AccordionSectionProps,\n  AccordionSectionOwnProps,\n} from './accordion/AccordionSection.js';\nexport { FeatureHighlight } from './feature-highlight/FeatureHighlight.js';\nexport type { InformationContentProps } from './information-overlay/Content.js';\nexport type {\n  InformationOverlayBaseProps,\n  InformationOverlayControlledProps,\n  InformationOverlayProps,\n  InformationOverlayUncontrolledProps,\n} from './information-overlay/InformationOverlay.js';\nexport type { InformationOverlayIconProps } from './information-overlay/InformationOverlayIcon.js';\nexport { InformationOverlay } from './information-overlay/InformationOverlay.js';\nexport type { InformationOverlayTriggerProps } from './information-overlay/Trigger.js';\nexport { Microguide } from './microguide/Microguide.js';\nexport type { MicroguideProps } from './microguide/Microguide.js';\nexport type { ContentProps } from './shared-components/Content.js';\n\nexport type { TitleProps } from './shared-components/Title.js';\nexport type { VisualProps } from './shared-components/Visual.js';\n\nexport type {\n  FeatureHighlightProps,\n  FeatureHighlightPlacement,\n} from './feature-highlight/FeatureHighlight.js';\n\nexport { TerminologyOverlay } from './terminology-overlay/TerminologyOverlay.js';\nexport type { TerminologyDescriptionProps } from './terminology-overlay/Description.js';\nexport type { TerminologyOverlayProps } from './terminology-overlay/TerminologyOverlay.js';\nexport type { TerminologyOverlayTriggerProps } from './terminology-overlay/Trigger.js';\n\nexport { AvatarGroup } from './avatar-group/AvatarGroup.js';\nexport type { AvatarGroupProps } from './avatar-group/AvatarGroup.js';\nexport type {\n  AvatarGroupItemOwnProps,\n  AvatarGroupItemProps,\n} from './avatar-group/Item.js';\nexport { Avatar } from './avatar/Avatar.js';\nexport type { AvatarOwnProps, AvatarProps } from './avatar/Avatar.js';\nexport type { AvatarLabelProps } from './avatar/Label.js';\nexport type { AvatarSubtitleProps } from './avatar/Subtitle.js';\n\n//#region ChipGroup\nexport { ChipGroup } from './chip-group/ChipGroup.js';\nexport type {\n  ChipGroupBaseProps,\n  ChipGroupControlledProps,\n  ChipGroupUncontrolledProps,\n  ChipGroupProps,\n} from './chip-group/ChipGroup.js';\nexport type { ChipGroupControlProps } from './chip-group/Control.js';\nexport { useChipGroupContext } from './chip-group/hooks/useChipGroupContext.js';\nexport type { ChipGroupContextProps } from './chip-group/contexts/ChipGroupContext.js';\n//#endregion\n\n//#region Chip\nexport { Chip } from './chip/Chip.js';\nexport type { ChipContentProps } from './chip/ChipContent.js';\nexport type { ChipDeleteButtonProps } from './chip/ChipDeleteButton.js';\nexport type { ChipKeyProps } from './chip/ChipKey.js';\nexport type { ChipOwnProps, ChipProps } from './chip/types/chip.js';\n//# endregion\n\nexport { CodeSnippet } from './code-snippet/CodeSnippet.js';\nexport type { HighlightLanguage } from './code-snippet/HighlightExtended.js';\nexport type { CodeSnippetProps } from './code-snippet/CodeSnippet.js';\nexport { prismDqlLanguage } from './code-snippet/prism-dql-language.js';\n\nexport { ExpandableText } from './expandable-text/ExpandableText.js';\nexport type {\n  ExpandableTextBaseProps,\n  ExpandableTextControlledProps,\n  ExpandableTextProps,\n  ExpandableTextUncontrolledProps,\n} from './expandable-text/ExpandableText.js';\n\nexport { KeyboardShortcutTooltip } from './keyboard-shortcut-tooltip/KeyboardShortcutTooltip.js';\nexport type { KeyboardShortcutTooltipProps } from './keyboard-shortcut-tooltip/KeyboardShortcutTooltip.js';\nexport { KeyboardShortcut } from './keyboard-shortcut/KeyboardShortcut.js';\nexport type { KeyboardShortcutProps } from './keyboard-shortcut/KeyboardShortcut.js';\n\nexport { Markdown, componentMappings } from './markdown/Markdown.js';\nexport type {\n  MarkdownProps,\n  MarkdownSelection,\n  MarkdownSelectionPoint,\n} from './markdown/Markdown.js';\n\nexport { EmptyState } from './empty-state/EmptyState.js';\nexport type { EmptyStateProps as GenericEmptyStateProps } from './empty-state/EmptyState.js';\nexport type { EmptyStateActionsProps } from './empty-state/slot-components/Actions.js';\nexport type { EmptyStateDetailsProps } from './empty-state/slot-components/Details.js';\nexport type { EmptyStateFooterProps } from './empty-state/slot-components/Footer.js';\nexport type { EmptyStateTitleProps } from './empty-state/slot-components/Title.js';\nexport type { EmptyStateVisualProps } from './empty-state/slot-components/Visual.js';\nexport type { EmptyStateVisualPresetProps } from './empty-state/slot-components/VisualPreset.js';\n// NOTE: possibly have to rename\n\nexport { HealthIndicator } from './health-indicator/HealthIndicator.js';\nexport type { HealthIndicatorProps } from './health-indicator/HealthIndicator.js';\nexport type { HealthIndicatorVisualProps } from './health-indicator/Visual.js';\nexport type { HealthIndicatorLabelProps } from './health-indicator/Label.js';\n\nexport { MessageContainer } from './message-container/MessageContainer.js';\nexport type { MessageContainerProps } from './message-container/MessageContainer.types.js';\nexport type { MessageContainerActionsProps } from './message-container/Actions.js';\nexport type { MessageContainerDescriptionProps } from './message-container/Description.js';\nexport type { MessageContainerPrefixProps } from './message-container/Prefix.js';\nexport type { MessageContainerTitleProps } from './message-container/Title.js';\n\nexport {\n  AiLoadingIndicator,\n  type AiLoadingIndicatorProps,\n} from './ai-loading-indicator/AiLoadingIndicator.js';\nexport { type AiLoadingIndicatorIconProps } from './ai-loading-indicator/AiLoadingIndicatorIcon.js';\n\nexport { AiResponse } from './ai-response/AiResponse.js';\nexport type { AiResponseProps } from './ai-response/AiResponse.js';\n"],
-  "mappings": "AAAA,SAAS,mBAAmB;AAK5B,SAAS,sBAAsB;AAE/B,SAAS,gBAAgB;AAEzB,SAAS,oBAAoB;AAE7B,SAAS,iBAAiB;AAgB1B,SAAS,wBAAwB;AASjC,SAAS,0BAA0B;AAEnC,SAAS,kBAAkB;AAY3B,SAAS,0BAA0B;AAKnC,SAAS,mBAAmB;AAM5B,SAAS,cAAc;AAMvB,SAAS,iBAAiB;AAQ1B,SAAS,2BAA2B;AAKpC,SAAS,YAAY;AAOrB,SAAS,mBAAmB;AAG5B,SAAS,wBAAwB;AAEjC,SAAS,sBAAsB;AAQ/B,SAAS,+BAA+B;AAExC,SAAS,wBAAwB;AAGjC,SAAS,UAAU,yBAAyB;AAO5C,SAAS,kBAAkB;AAU3B,SAAS,uBAAuB;AAKhC,SAAS,wBAAwB;AAOjC;AAAA,EACE;AAAA,OAEK;AAGP,SAAS,kBAAkB;",
+  "sourcesContent": ["export { ProgressBar } from './progress/ProgressBar.js';\nexport type { ProgressBarProps } from './progress/ProgressBar.js';\nexport type { ProgressBarIconProps } from './progress/ProgressBarIcon.js';\nexport type { ProgressBarLabelProps } from './progress/ProgressBarLabel.js';\nexport type { ProgressBarValueProps } from './progress/ProgressBarValue.js';\nexport { ProgressCircle } from './progress/ProgressCircle.js';\nexport type { ProgressCircleProps } from './progress/ProgressCircle.js';\nexport { Skeleton } from './skeleton/Skeleton.js';\nexport type { SkeletonProps } from './skeleton/Skeleton.js';\nexport { SkeletonText } from './skeleton/SkeletonText.js';\nexport type { SkeletonTextProps } from './skeleton/SkeletonText.js';\nexport { Accordion } from './accordion/Accordion.js';\nexport type {\n  AccordionControlledProps,\n  AccordionOwnProps,\n  AccordionProps,\n  AccordionUncontrolledProps,\n  OnChangeValue,\n  SingleExpanded,\n  MultiExpanded,\n} from './accordion/accordion-types.js';\nexport type {\n  AccordionSectionProps,\n  AccordionSectionOwnProps,\n} from './accordion/AccordionSection.js';\nexport { FeatureHighlight } from './feature-highlight/FeatureHighlight.js';\nexport type { InformationContentProps } from './information-overlay/Content.js';\nexport type {\n  InformationOverlayBaseProps,\n  InformationOverlayControlledProps,\n  InformationOverlayProps,\n  InformationOverlayUncontrolledProps,\n} from './information-overlay/InformationOverlay.js';\nexport type { InformationOverlayIconProps } from './information-overlay/InformationOverlayIcon.js';\nexport { InformationOverlay } from './information-overlay/InformationOverlay.js';\nexport type { InformationOverlayTriggerProps } from './information-overlay/Trigger.js';\nexport { Microguide } from './microguide/Microguide.js';\nexport type { MicroguideProps } from './microguide/Microguide.js';\nexport type { ContentProps } from './shared-components/Content.js';\n\nexport type { TitleProps } from './shared-components/Title.js';\nexport type { VisualProps } from './shared-components/Visual.js';\n\nexport type {\n  FeatureHighlightProps,\n  FeatureHighlightPlacement,\n} from './feature-highlight/FeatureHighlight.js';\n\nexport { TerminologyOverlay } from './terminology-overlay/TerminologyOverlay.js';\nexport type { TerminologyDescriptionProps } from './terminology-overlay/Description.js';\nexport type { TerminologyOverlayProps } from './terminology-overlay/TerminologyOverlay.js';\nexport type { TerminologyOverlayTriggerProps } from './terminology-overlay/Trigger.js';\n\nexport { AvatarGroup } from './avatar-group/AvatarGroup.js';\nexport type { AvatarGroupProps } from './avatar-group/AvatarGroup.js';\nexport type {\n  AvatarGroupItemOwnProps,\n  AvatarGroupItemProps,\n} from './avatar-group/Item.js';\nexport { Avatar } from './avatar/Avatar.js';\nexport type { AvatarOwnProps, AvatarProps } from './avatar/Avatar.js';\nexport type { AvatarLabelProps } from './avatar/Label.js';\nexport type { AvatarSubtitleProps } from './avatar/Subtitle.js';\n\n//#region ChipGroup\nexport { ChipGroup } from './chip-group/ChipGroup.js';\nexport type {\n  ChipGroupBaseProps,\n  ChipGroupControlledProps,\n  ChipGroupUncontrolledProps,\n  ChipGroupProps,\n} from './chip-group/ChipGroup.js';\nexport type { ChipGroupControlProps } from './chip-group/Control.js';\nexport { useChipGroupContext } from './chip-group/hooks/useChipGroupContext.js';\nexport type { ChipGroupContextProps } from './chip-group/contexts/ChipGroupContext.js';\n//#endregion\n\n//#region Chip\nexport { Chip } from './chip/Chip.js';\nexport type { ChipContentProps } from './chip/ChipContent.js';\nexport type { ChipDeleteButtonProps } from './chip/ChipDeleteButton.js';\nexport type { ChipKeyProps } from './chip/ChipKey.js';\nexport type { ChipOwnProps, ChipProps } from './chip/types/chip.js';\n//# endregion\n\nexport { CodeSnippet } from './code-snippet/CodeSnippet.js';\nexport type { HighlightLanguage } from './code-snippet/HighlightExtended.js';\nexport type { CodeSnippetProps } from './code-snippet/CodeSnippet.js';\nexport { prismDqlLanguage } from './code-snippet/prism-dql-language.js';\n\nexport { ExpandableText } from './expandable-text/ExpandableText.js';\nexport type {\n  ExpandableTextBaseProps,\n  ExpandableTextControlledProps,\n  ExpandableTextProps,\n  ExpandableTextUncontrolledProps,\n} from './expandable-text/ExpandableText.js';\n\nexport { KeyboardShortcutTooltip } from './keyboard-shortcut-tooltip/KeyboardShortcutTooltip.js';\nexport type { KeyboardShortcutTooltipProps } from './keyboard-shortcut-tooltip/KeyboardShortcutTooltip.js';\nexport { KeyboardShortcut } from './keyboard-shortcut/KeyboardShortcut.js';\nexport type { KeyboardShortcutProps } from './keyboard-shortcut/KeyboardShortcut.js';\n\nexport { Markdown, componentMappings } from './markdown/Markdown.js';\nexport type {\n  MarkdownProps,\n  MarkdownSelection,\n  MarkdownSelectionPoint,\n} from './markdown/markdown-types.js';\n\nexport { EmptyState } from './empty-state/EmptyState.js';\nexport type {\n  EmptyStateProps as GenericEmptyStateProps,\n  EmptyStateVisualPresetProps,\n} from './empty-state/types/empty-state-types.js';\nexport type { EmptyStateActionsProps } from './empty-state/slot-components/Actions.js';\nexport type { EmptyStateDetailsProps } from './empty-state/slot-components/Details.js';\nexport type { EmptyStateFooterProps } from './empty-state/slot-components/Footer.js';\nexport type { EmptyStateTitleProps } from './empty-state/slot-components/Title.js';\nexport type { EmptyStateVisualProps } from './empty-state/slot-components/Visual.js';\n// NOTE: possibly have to rename\n\nexport { HealthIndicator } from './health-indicator/HealthIndicator.js';\nexport type { HealthIndicatorProps } from './health-indicator/health-indicator-types.js';\nexport type { HealthIndicatorVisualProps } from './health-indicator/Visual.js';\nexport type { HealthIndicatorLabelProps } from './health-indicator/Label.js';\n\nexport { MessageContainer } from './message-container/MessageContainer.js';\nexport type { MessageContainerProps } from './message-container/MessageContainer.types.js';\nexport type { MessageContainerActionsProps } from './message-container/Actions.js';\nexport type { MessageContainerDescriptionProps } from './message-container/Description.js';\nexport type { MessageContainerPrefixProps } from './message-container/Prefix.js';\nexport type { MessageContainerTitleProps } from './message-container/Title.js';\n\nexport {\n  AiLoadingIndicator,\n  type AiLoadingIndicatorProps,\n} from './ai-loading-indicator/AiLoadingIndicator.js';\nexport { type AiLoadingIndicatorIconProps } from './ai-loading-indicator/AiLoadingIndicatorIcon.js';\n\nexport { AiResponse } from './ai-response/AiResponse.js';\nexport type { AiResponseProps } from './ai-response/AiResponse.js';\n"],
+  "mappings": "AAAA,SAAS,mBAAmB;AAK5B,SAAS,sBAAsB;AAE/B,SAAS,gBAAgB;AAEzB,SAAS,oBAAoB;AAE7B,SAAS,iBAAiB;AAc1B,SAAS,wBAAwB;AASjC,SAAS,0BAA0B;AAEnC,SAAS,kBAAkB;AAY3B,SAAS,0BAA0B;AAKnC,SAAS,mBAAmB;AAM5B,SAAS,cAAc;AAMvB,SAAS,iBAAiB;AAQ1B,SAAS,2BAA2B;AAKpC,SAAS,YAAY;AAOrB,SAAS,mBAAmB;AAG5B,SAAS,wBAAwB;AAEjC,SAAS,sBAAsB;AAQ/B,SAAS,+BAA+B;AAExC,SAAS,wBAAwB;AAGjC,SAAS,UAAU,yBAAyB;AAO5C,SAAS,kBAAkB;AAY3B,SAAS,uBAAuB;AAKhC,SAAS,wBAAwB;AAOjC;AAAA,EACE;AAAA,OAEK;AAGP,SAAS,kBAAkB;",
   "names": []
 }

package/esm/content/information-overlay/InformationOverlay.css

@@ -1,4 +1,4 @@
-._by0m3w0-3-0-1 {
+._by0m3w0-3-1-1 {
   background-color: transparent;
   padding: var(--dt-spacings-size-0, 0);
   border: var(--dt-spacings-size-0, 0);
@@ -8,13 +8,13 @@
   cursor: pointer;
   max-width: 100%;
 }
-._by0m3w0-3-0-1:hover {
+._by0m3w0-3-1-1:hover {
   background-color: transparent;
 }
-._by0m3w0-3-0-1:focus-visible {
+._by0m3w0-3-1-1:focus-visible {
   outline: none;
 }
-._by0m3w1-3-0-1 {
+._by0m3w1-3-1-1 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   font-family: var(--dt-typography-text-base-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-base-default-size, 14px);
@@ -31,39 +31,39 @@
   padding-right: var(--dt-spacings-size-2, 2px);
   transition: background-color var(--dt-animations-hover-duration-base, 150ms) var(--dt-animations-hover-easing, cubic-bezier(0, 0, 0.2, 1));
 }
-._by0m3w1-3-0-1:hover {
+._by0m3w1-3-1-1:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._by0m3w1-3-0-1:not(.strato-focus-visible) {
+._by0m3w1-3-1-1:not(.strato-focus-visible) {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._by0m3w4-3-0-1 {
-  color: var(--_by0m3w2-3-0-1, var(--dt-colors-icon-neutral-subdued, #595a7d));
+._by0m3w4-3-1-1 {
+  color: var(--_by0m3w2-3-1-1, var(--dt-colors-icon-neutral-subdued, #595a7d));
   flex-shrink: 0;
   transition: background-color var(--dt-animations-hover-duration-base, 150ms) var(--dt-animations-hover-easing, cubic-bezier(0, 0, 0.2, 1));
 }
-._by0m3w4-3-0-1:not(.strato-focus-visible) {
+._by0m3w4-3-1-1:not(.strato-focus-visible) {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._by0m3w1-3-0-1:hover ._by0m3w4-3-0-1 {
-  background-color: var(--_by0m3w3-3-0-1, var(--dt-colors-background-field-neutral-default-active, #d0d1dc));
+._by0m3w1-3-1-1:hover ._by0m3w4-3-1-1 {
+  background-color: var(--_by0m3w3-3-1-1, var(--dt-colors-background-field-neutral-default-active, #d0d1dc));
 }
-._by0m3w5-3-0-1:hover {
-  background-color: var(--_by0m3w3-3-0-1, var(--dt-colors-background-field-neutral-default-active, #d0d1dc));
+._by0m3w5-3-1-1:hover {
+  background-color: var(--_by0m3w3-3-1-1, var(--dt-colors-background-field-neutral-default-active, #d0d1dc));
 }
-._by0m3w6-3-0-1 {
-  --_by0m3w2-3-0-1: var(--dt-colors-icon-primary-default, #464cce);
-  --_by0m3w3-3-0-1: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
+._by0m3w6-3-1-1 {
+  --_by0m3w2-3-1-1: var(--dt-colors-icon-primary-default, #464cce);
+  --_by0m3w3-3-1-1: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._by0m3w7-3-0-1 {
-  --_by0m3w2-3-0-1: var(--dt-colors-icon-success-default, #2d6761);
-  --_by0m3w3-3-0-1: var(--dt-colors-background-field-success-default-active, #c7d5d3);
+._by0m3w7-3-1-1 {
+  --_by0m3w2-3-1-1: var(--dt-colors-icon-success-default, #2d6761);
+  --_by0m3w3-3-1-1: var(--dt-colors-background-field-success-default-active, #c7d5d3);
 }
-._by0m3w8-3-0-1 {
-  --_by0m3w2-3-0-1: var(--dt-colors-icon-warning-default, #855400);
-  --_by0m3w3-3-0-1: var(--dt-colors-background-field-warning-default-hover, #f9ebdb);
+._by0m3w8-3-1-1 {
+  --_by0m3w2-3-1-1: var(--dt-colors-icon-warning-default, #855400);
+  --_by0m3w3-3-1-1: var(--dt-colors-background-field-warning-default-hover, #f9ebdb);
 }
-._by0m3w9-3-0-1 {
-  --_by0m3w2-3-0-1: var(--dt-colors-icon-critical-default, #bb0731);
-  --_by0m3w3-3-0-1: var(--dt-colors-background-field-critical-default-hover, #f6d6d5);
+._by0m3w9-3-1-1 {
+  --_by0m3w2-3-1-1: var(--dt-colors-icon-critical-default, #bb0731);
+  --_by0m3w3-3-1-1: var(--dt-colors-background-field-critical-default-hover, #f6d6d5);
 }

package/esm/content/information-overlay/InformationOverlay.js

@@ -2,18 +2,20 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useMemo } from "react";
 import { Content } from "./Content.js";
 import { InformationOverlayContext } from "./contexts/InformationOverlayContext.js";
+import { COMPONENT_NAME } from "./information-overlay-constants.js";
 import { InformationOverlayIcon } from "./InformationOverlayIcon.js";
 import { Trigger } from "./Trigger.js";
-import { useAriaLabelingProps as _useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
+import { useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
+import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
 import { useControllableState } from "../../core/hooks/useControllableState.js";
 import { useId } from "../../core/hooks/useId.js";
 import { useMergeRefs } from "../../core/hooks/useMergeRefs.js";
+import { useSafeForwardProps } from "../../core/hooks/useSafeForwardProps.js";
 import { useSlots } from "../../core/hooks/useSlots.js";
 import { Flex } from "../../layouts/flex/Flex.js";
 import { useBreakpoint } from "../../layouts/hooks/useBreakpoint.js";
 import { useOverlayWithTrigger } from "../../overlays/hooks/useOverlayWithTrigger.js";
 import { Overlay } from "../../overlays/overlay/Overlay.js";
-const COMPONENT_NAME = "InformationOverlay";
 const InformationOverlayRoot = forwardRef((props, forwardedRef) => {
   const {
     children,
@@ -22,13 +24,17 @@ const InformationOverlayRoot = forwardRef((props, forwardedRef) => {
     onOpenChange,
     color = "neutral",
     placement = "bottom",
+    style: consumerStyle,
+    className: consumerClassName,
     "data-testid": dataTestId,
     "data-dtrum-mask": dataDtrumMask,
     "data-dtrum-allow": dataDtrumAllow,
     ...remainingProps
   } = props;
+  const [behavioralTrackingProps, restProps] = useBehavioralTrackingProps(remainingProps);
+  const ariaLabelingProps = useAriaLabelingProps(restProps);
+  const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);
   const overlayContentId = useId();
-  const ariaLabelingProps = _useAriaLabelingProps(remainingProps);
   const [isOpen, setIsOpen] = useControllableState({
     defaultValue: defaultOpen,
     value: open,
@@ -63,32 +69,42 @@ const InformationOverlayRoot = forwardRef((props, forwardedRef) => {
     trigger: Trigger,
     content: Content
   });
+  const { children: triggerChildren, ...triggerSlotProps } = slots.trigger?.props ?? {};
   const contextProviderValue = useMemo(() => {
     return { color, overlayTriggerProps, id: overlayContentId, isOpen };
   }, [color, isOpen, overlayContentId, overlayTriggerProps]);
+  const triggerProps = slots.trigger?.props ?? {};
   return /* @__PURE__ */ jsxs(InformationOverlayContext.Provider, { value: contextProviderValue, children: [
     /* @__PURE__ */ jsx(
       Trigger,
       {
         ref: rootRef,
-        id: slots.trigger?.props?.id,
-        "aria-label": slots.trigger?.props["aria-label"],
+        id: triggerProps.id,
+        className: triggerProps.className,
+        style: triggerProps.style,
+        "aria-label": triggerProps["aria-label"],
         "aria-describedby": overlayStateIsOpen ? overlayContentId : void 0,
-        "data-dtrum-mask": dataDtrumMask,
-        "data-dtrum-allow": dataDtrumAllow,
-        children: slots.trigger?.props.children
+        "data-testid": triggerProps["data-testid"],
+        "data-dtrum-mask": triggerProps["data-dtrum-mask"] ?? dataDtrumMask,
+        "data-dtrum-allow": triggerProps["data-dtrum-allow"] ?? dataDtrumAllow,
+        ...triggerSlotProps,
+        children: triggerChildren
       }
     ),
     /* @__PURE__ */ jsx(
       Overlay,
       {
         ref: overlayRef,
+        isOpen: overlayStateIsOpen,
+        overlayProps,
+        className: consumerClassName,
+        style: consumerStyle,
         "data-testid": dataTestId,
         "data-dtrum-mask": dataDtrumMask,
         "data-dtrum-allow": dataDtrumAllow,
-        isOpen: overlayStateIsOpen,
-        overlayProps,
         ...ariaLabelingProps,
+        ...behavioralTrackingProps,
+        ...forwardProps,
         "data-dt-component": COMPONENT_NAME,
         children: /* @__PURE__ */ jsx(
           Flex,
@@ -111,7 +127,6 @@ const InformationOverlay = Object.assign(InformationOverlayRoot, {
   Icon: InformationOverlayIcon
 });
 export {
-  COMPONENT_NAME,
   InformationOverlay
 };
 //# sourceMappingURL=InformationOverlay.js.map