@dynatrace/strato-components 3.1.3 → 3.2.0

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 } 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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",
+  "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                  data-dt-name=\"CloseButton\"\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-1-3";
-var FeatureHighlightPointerArrowCSS = "_1t60p5x1-3-1-3";
-var FeatureHighlightScrollContainerCSS = "_1t60p5x0-3-1-3";
+var FeatureHighlightCloseButtonCSS = "_1t60p5x2-3-2-0";
+var FeatureHighlightPointerArrowCSS = "_1t60p5x1-3-2-0";
+var FeatureHighlightScrollContainerCSS = "_1t60p5x0-3-2-0";
 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-1-3';\nexport var FeatureHighlightPointerArrowCSS = '_1t60p5x1-3-1-3';\nexport var FeatureHighlightScrollContainerCSS = '_1t60p5x0-3-1-3';"],
+  "sourcesContent": ["import './FeatureHighlight.css';\nexport var FeatureHighlightCloseButtonCSS = '_1t60p5x2-3-2-0';\nexport var FeatureHighlightPointerArrowCSS = '_1t60p5x1-3-2-0';\nexport var FeatureHighlightScrollContainerCSS = '_1t60p5x0-3-2-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,iCAAiC;AACrC,IAAI,kCAAkC;AACtC,IAAI,qCAAqC;",
   "names": []
 }

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

@@ -1,42 +1,42 @@
-._1qqzg801-3-1-3 {
+._1qqzg801-3-2-0 {
   width: var(--dt-spacings-size-20, 20px);
   min-height: 1lh;
-  color: var(--_1qqzg800-3-1-3);
+  color: var(--_1qqzg800-3-2-0);
   display: flex;
   align-self: flex-start;
   align-items: center;
   flex-shrink: 0;
 }
-._1qqzg802-3-1-3 {
-  --_1qqzg800-3-1-3: var(--dt-colors-icon-success-default, #2d6761);
+._1qqzg802-3-2-0 {
+  --_1qqzg800-3-2-0: var(--dt-colors-icon-success-default, #2d6761);
 }
-._1qqzg803-3-1-3 {
-  --_1qqzg800-3-1-3: var(--dt-colors-icon-primary-default, #464cce);
+._1qqzg803-3-2-0 {
+  --_1qqzg800-3-2-0: var(--dt-colors-icon-primary-default, #464cce);
 }
-._1qqzg804-3-1-3 {
-  --_1qqzg800-3-1-3: var(--dt-colors-icon-neutral-subdued, #595a7d);
+._1qqzg804-3-2-0 {
+  --_1qqzg800-3-2-0: var(--dt-colors-icon-neutral-subdued, #595a7d);
 }
-._1qqzg805-3-1-3 {
-  --_1qqzg800-3-1-3: var(--dt-colors-icon-warning-default, #855400);
+._1qqzg805-3-2-0 {
+  --_1qqzg800-3-2-0: var(--dt-colors-icon-warning-default, #855400);
 }
-._1qqzg806-3-1-3 {
-  --_1qqzg800-3-1-3: var(--dt-colors-icon-critical-default, #bb0731);
+._1qqzg806-3-2-0 {
+  --_1qqzg800-3-2-0: var(--dt-colors-icon-critical-default, #bb0731);
 }
-._1qqzg808-3-1-3 {
+._1qqzg808-3-2-0 {
   width: var(--dt-spacings-size-12, 12px);
 }
-._1qqzg80b-3-1-3 {
-  --_1qqzg800-3-1-3: var(--dt-colors-icon-success-on-accent-default, #f1f4f4);
+._1qqzg80b-3-2-0 {
+  --_1qqzg800-3-2-0: var(--dt-colors-icon-success-on-accent-default, #f1f4f4);
 }
-._1qqzg80c-3-1-3 {
-  --_1qqzg800-3-1-3: var(--dt-colors-icon-primary-on-accent-default, #f4f4fb);
+._1qqzg80c-3-2-0 {
+  --_1qqzg800-3-2-0: var(--dt-colors-icon-primary-on-accent-default, #f4f4fb);
 }
-._1qqzg80d-3-1-3 {
-  --_1qqzg800-3-1-3: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
+._1qqzg80d-3-2-0 {
+  --_1qqzg800-3-2-0: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
 }
-._1qqzg80e-3-1-3 {
-  --_1qqzg800-3-1-3: var(--dt-colors-icon-warning-on-accent-default, #272024);
+._1qqzg80e-3-2-0 {
+  --_1qqzg800-3-2-0: var(--dt-colors-icon-warning-on-accent-default, #272024);
 }
-._1qqzg80f-3-1-3 {
-  --_1qqzg800-3-1-3: var(--dt-colors-icon-critical-on-accent-default, #f9f1f3);
+._1qqzg80f-3-2-0 {
+  --_1qqzg800-3-2-0: 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-1-3", variantClassNames: { status: { ideal: "_1qqzg802-3-1-3", good: "_1qqzg803-3-1-3", neutral: "_1qqzg804-3-1-3", warning: "_1qqzg805-3-1-3", critical: "_1qqzg806-3-1-3" }, visualType: { icon: "_1qqzg807-3-1-3", shape: "_1qqzg808-3-1-3" }, onAccent: { true: "_1qqzg809-3-1-3", false: "_1qqzg80a-3-1-3" } }, defaultVariants: {}, compoundVariants: [[{ status: "ideal", onAccent: true }, "_1qqzg80b-3-1-3"], [{ status: "good", onAccent: true }, "_1qqzg80c-3-1-3"], [{ status: "neutral", onAccent: true }, "_1qqzg80d-3-1-3"], [{ status: "warning", onAccent: true }, "_1qqzg80e-3-1-3"], [{ status: "critical", onAccent: true }, "_1qqzg80f-3-1-3"]] });
+var visual = _7a468({ defaultClassName: "_1qqzg801-3-2-0", variantClassNames: { status: { ideal: "_1qqzg802-3-2-0", good: "_1qqzg803-3-2-0", neutral: "_1qqzg804-3-2-0", warning: "_1qqzg805-3-2-0", critical: "_1qqzg806-3-2-0" }, visualType: { icon: "_1qqzg807-3-2-0", shape: "_1qqzg808-3-2-0" }, onAccent: { true: "_1qqzg809-3-2-0", false: "_1qqzg80a-3-2-0" } }, defaultVariants: {}, compoundVariants: [[{ status: "ideal", onAccent: true }, "_1qqzg80b-3-2-0"], [{ status: "good", onAccent: true }, "_1qqzg80c-3-2-0"], [{ status: "neutral", onAccent: true }, "_1qqzg80d-3-2-0"], [{ status: "warning", onAccent: true }, "_1qqzg80e-3-2-0"], [{ status: "critical", onAccent: true }, "_1qqzg80f-3-2-0"]] });
 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-1-3',variantClassNames:{status:{ideal:'_1qqzg802-3-1-3',good:'_1qqzg803-3-1-3',neutral:'_1qqzg804-3-1-3',warning:'_1qqzg805-3-1-3',critical:'_1qqzg806-3-1-3'},visualType:{icon:'_1qqzg807-3-1-3',shape:'_1qqzg808-3-1-3'},onAccent:{true:'_1qqzg809-3-1-3',false:'_1qqzg80a-3-1-3'}},defaultVariants:{},compoundVariants:[[{status:'ideal',onAccent:true},'_1qqzg80b-3-1-3'],[{status:'good',onAccent:true},'_1qqzg80c-3-1-3'],[{status:'neutral',onAccent:true},'_1qqzg80d-3-1-3'],[{status:'warning',onAccent:true},'_1qqzg80e-3-1-3'],[{status:'critical',onAccent:true},'_1qqzg80f-3-1-3']]});"],
+  "sourcesContent": ["import './styles.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var visual = _7a468({defaultClassName:'_1qqzg801-3-2-0',variantClassNames:{status:{ideal:'_1qqzg802-3-2-0',good:'_1qqzg803-3-2-0',neutral:'_1qqzg804-3-2-0',warning:'_1qqzg805-3-2-0',critical:'_1qqzg806-3-2-0'},visualType:{icon:'_1qqzg807-3-2-0',shape:'_1qqzg808-3-2-0'},onAccent:{true:'_1qqzg809-3-2-0',false:'_1qqzg80a-3-2-0'}},defaultVariants:{},compoundVariants:[[{status:'ideal',onAccent:true},'_1qqzg80b-3-2-0'],[{status:'good',onAccent:true},'_1qqzg80c-3-2-0'],[{status:'neutral',onAccent:true},'_1qqzg80d-3-2-0'],[{status:'warning',onAccent:true},'_1qqzg80e-3-2-0'],[{status:'critical',onAccent:true},'_1qqzg80f-3-2-0']]});"],
   "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

@@ -25,6 +25,9 @@ import {
   AiLoadingIndicator
 } from "./ai-loading-indicator/AiLoadingIndicator.js";
 import { AiResponse } from "./ai-response/AiResponse.js";
+import {
+  ReleasePhaseIndicator
+} from "./release-phase-indicator/ReleasePhaseIndicator.js";
 export {
   Accordion,
   AiLoadingIndicator,
@@ -46,6 +49,7 @@ export {
   Microguide,
   ProgressBar,
   ProgressCircle,
+  ReleasePhaseIndicator,
   Skeleton,
   SkeletonText,
   TerminologyOverlay,

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  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;",
+  "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\nexport {\n  ReleasePhaseIndicator,\n  type ReleasePhaseIndicatorProps,\n  type ReleasePhase,\n} from './release-phase-indicator/ReleasePhaseIndicator.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;AAG3B;AAAA,EACE;AAAA,OAGK;",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-._by0m3w0-3-1-3 {
+._by0m3w0-3-2-0 {
   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-1-3:hover {
+._by0m3w0-3-2-0:hover {
   background-color: transparent;
 }
-._by0m3w0-3-1-3:focus-visible {
+._by0m3w0-3-2-0:focus-visible {
   outline: none;
 }
-._by0m3w1-3-1-3 {
+._by0m3w1-3-2-0 {
   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-1-3:hover {
+._by0m3w1-3-2-0:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._by0m3w1-3-1-3:not(.strato-focus-visible) {
+._by0m3w1-3-2-0:not(.strato-focus-visible) {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._by0m3w4-3-1-3 {
-  color: var(--_by0m3w2-3-1-3, var(--dt-colors-icon-neutral-subdued, #595a7d));
+._by0m3w4-3-2-0 {
+  color: var(--_by0m3w2-3-2-0, 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-1-3:not(.strato-focus-visible) {
+._by0m3w4-3-2-0:not(.strato-focus-visible) {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._by0m3w1-3-1-3:hover ._by0m3w4-3-1-3 {
-  background-color: var(--_by0m3w3-3-1-3, var(--dt-colors-background-field-neutral-default-active, #d0d1dc));
+._by0m3w1-3-2-0:hover ._by0m3w4-3-2-0 {
+  background-color: var(--_by0m3w3-3-2-0, var(--dt-colors-background-field-neutral-default-active, #d0d1dc));
 }
-._by0m3w5-3-1-3:hover {
-  background-color: var(--_by0m3w3-3-1-3, var(--dt-colors-background-field-neutral-default-active, #d0d1dc));
+._by0m3w5-3-2-0:hover {
+  background-color: var(--_by0m3w3-3-2-0, var(--dt-colors-background-field-neutral-default-active, #d0d1dc));
 }
-._by0m3w6-3-1-3 {
-  --_by0m3w2-3-1-3: var(--dt-colors-icon-primary-default, #464cce);
-  --_by0m3w3-3-1-3: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
+._by0m3w6-3-2-0 {
+  --_by0m3w2-3-2-0: var(--dt-colors-icon-primary-default, #464cce);
+  --_by0m3w3-3-2-0: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._by0m3w7-3-1-3 {
-  --_by0m3w2-3-1-3: var(--dt-colors-icon-success-default, #2d6761);
-  --_by0m3w3-3-1-3: var(--dt-colors-background-field-success-default-active, #c7d5d3);
+._by0m3w7-3-2-0 {
+  --_by0m3w2-3-2-0: var(--dt-colors-icon-success-default, #2d6761);
+  --_by0m3w3-3-2-0: var(--dt-colors-background-field-success-default-active, #c7d5d3);
 }
-._by0m3w8-3-1-3 {
-  --_by0m3w2-3-1-3: var(--dt-colors-icon-warning-default, #855400);
-  --_by0m3w3-3-1-3: var(--dt-colors-background-field-warning-default-hover, #f9ebdb);
+._by0m3w8-3-2-0 {
+  --_by0m3w2-3-2-0: var(--dt-colors-icon-warning-default, #855400);
+  --_by0m3w3-3-2-0: var(--dt-colors-background-field-warning-default-hover, #f9ebdb);
 }
-._by0m3w9-3-1-3 {
-  --_by0m3w2-3-1-3: var(--dt-colors-icon-critical-default, #bb0731);
-  --_by0m3w3-3-1-3: var(--dt-colors-background-field-critical-default-hover, #f6d6d5);
+._by0m3w9-3-2-0 {
+  --_by0m3w2-3-2-0: var(--dt-colors-icon-critical-default, #bb0731);
+  --_by0m3w3-3-2-0: var(--dt-colors-background-field-critical-default-hover, #f6d6d5);
 }

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

@@ -1,9 +1,9 @@
 import "./InformationOverlay.css";
-var InformationOverlayTriggerCSS = "_by0m3w0-3-1-3";
-var InformationOverlayTriggerIconCSS = "_by0m3w4-3-1-3";
-var InformationOverlayTriggerIconHoverCSS = "_by0m3w5-3-1-3";
-var InformationOverlayTriggerIconVariantsCSS = { primary: "_by0m3w6-3-1-3", success: "_by0m3w7-3-1-3", warning: "_by0m3w8-3-1-3", critical: "_by0m3w9-3-1-3", neutral: "_by0m3wa-3-1-3", onAccent: "_by0m3wb-3-1-3" };
-var InformationOverlayTriggerTextCSS = "_by0m3w1-3-1-3";
+var InformationOverlayTriggerCSS = "_by0m3w0-3-2-0";
+var InformationOverlayTriggerIconCSS = "_by0m3w4-3-2-0";
+var InformationOverlayTriggerIconHoverCSS = "_by0m3w5-3-2-0";
+var InformationOverlayTriggerIconVariantsCSS = { primary: "_by0m3w6-3-2-0", success: "_by0m3w7-3-2-0", warning: "_by0m3w8-3-2-0", critical: "_by0m3w9-3-2-0", neutral: "_by0m3wa-3-2-0", onAccent: "_by0m3wb-3-2-0" };
+var InformationOverlayTriggerTextCSS = "_by0m3w1-3-2-0";
 export {
   InformationOverlayTriggerCSS,
   InformationOverlayTriggerIconCSS,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/information-overlay/InformationOverlay.css.ts"],
-  "sourcesContent": ["import './InformationOverlay.css';\nexport var InformationOverlayTriggerCSS = '_by0m3w0-3-1-3';\nexport var InformationOverlayTriggerIconCSS = '_by0m3w4-3-1-3';\nexport var InformationOverlayTriggerIconHoverCSS = '_by0m3w5-3-1-3';\nexport var InformationOverlayTriggerIconVariantsCSS = {primary:'_by0m3w6-3-1-3',success:'_by0m3w7-3-1-3',warning:'_by0m3w8-3-1-3',critical:'_by0m3w9-3-1-3',neutral:'_by0m3wa-3-1-3',onAccent:'_by0m3wb-3-1-3'};\nexport var InformationOverlayTriggerTextCSS = '_by0m3w1-3-1-3';"],
+  "sourcesContent": ["import './InformationOverlay.css';\nexport var InformationOverlayTriggerCSS = '_by0m3w0-3-2-0';\nexport var InformationOverlayTriggerIconCSS = '_by0m3w4-3-2-0';\nexport var InformationOverlayTriggerIconHoverCSS = '_by0m3w5-3-2-0';\nexport var InformationOverlayTriggerIconVariantsCSS = {primary:'_by0m3w6-3-2-0',success:'_by0m3w7-3-2-0',warning:'_by0m3w8-3-2-0',critical:'_by0m3w9-3-2-0',neutral:'_by0m3wa-3-2-0',onAccent:'_by0m3wb-3-2-0'};\nexport var InformationOverlayTriggerTextCSS = '_by0m3w1-3-2-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,+BAA+B;AACnC,IAAI,mCAAmC;AACvC,IAAI,wCAAwC;AAC5C,IAAI,2CAA2C,EAAC,SAAQ,kBAAiB,SAAQ,kBAAiB,SAAQ,kBAAiB,UAAS,kBAAiB,SAAQ,kBAAiB,UAAS,iBAAgB;AACvM,IAAI,mCAAmC;",
   "names": []
 }

package/esm/content/keyboard-shortcut/KeyboardShortcut.css

@@ -1,10 +1,10 @@
-._15dzzgi0-3-1-3 {
+._15dzzgi0-3-2-0 {
   background: none;
   border: none;
   box-shadow: none;
   padding: 0;
 }
-._15dzzgi1-3-1-3 {
+._15dzzgi1-3-2-0 {
   display: inline-block;
   font-size: var(--dt-typography-text-small-default-size, 12px);
   font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
@@ -14,10 +14,10 @@
   border: none;
   padding: 0;
 }
-._15dzzgi4-3-1-3 {
+._15dzzgi4-3-2-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._15dzzgi5-3-1-3 {
+._15dzzgi5-3-2-0 {
   padding: 0 calc(var(--dt-spacings-size-4, 4px) - var(--dt-borders-width-default, 1px));
   height: var(--dt-spacings-size-20, 20px);
   line-height: 18px;
@@ -26,40 +26,40 @@
   text-align: center;
   box-sizing: border-box;
 }
-._15dzzgi5-3-1-3:not(:last-of-type) {
+._15dzzgi5-3-2-0:not(:last-of-type) {
   margin-right: var(--dt-spacings-size-2, 2px);
 }
-._15dzzgi6-3-1-3:not(:last-of-type)::after {
+._15dzzgi6-3-2-0:not(:last-of-type)::after {
   content: '+';
   display: inline-block;
   padding: 0 var(--dt-spacings-size-2, 2px);
 }
-._15dzzgi7-3-1-3 {
+._15dzzgi7-3-2-0 {
   color: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
 }
-._15dzzgi8-3-1-3 {
+._15dzzgi8-3-2-0 {
   color: var(--dt-colors-text-neutral-on-accent-disabled, #f3f3f680);
 }
-._15dzzgi9-3-1-3 {
+._15dzzgi9-3-2-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._15dzzgia-3-1-3 {
+._15dzzgia-3-2-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._15dzzgib-3-1-3 {
+._15dzzgib-3-2-0 {
   color: var(--dt-colors-text-neutral-on-accent-disabled, #f3f3f680);
   border: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-on-accent-disabled, #f3f3f633);
 }
-._15dzzgic-3-1-3 {
+._15dzzgic-3-2-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   background: var(--dt-colors-background-surface-default, #fff);
   border: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._15dzzgid-3-1-3 {
+._15dzzgid-3-2-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   border: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._15dzzgie-3-1-3 {
+._15dzzgie-3-2-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   background: var(--dt-colors-background-surface-default, #fff);
   border: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);

package/esm/content/keyboard-shortcut/KeyboardShortcut.sty.js

@@ -1,7 +1,7 @@
 import "./KeyboardShortcut.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var keyboardShortcutKeyCSS = _7a468({ defaultClassName: "_15dzzgi1-3-1-3", variantClassNames: { onAccent: { true: "_15dzzgi2-3-1-3", false: "_15dzzgi3-3-1-3" }, disabled: { true: "_15dzzgi4-3-1-3" }, variant: { "default": "_15dzzgi5-3-1-3", minimal: "_15dzzgi6-3-1-3" } }, defaultVariants: { variant: "default", onAccent: false, disabled: false }, compoundVariants: [[{ variant: "minimal", disabled: false, onAccent: true }, "_15dzzgi7-3-1-3"], [{ variant: "minimal", disabled: true, onAccent: true }, "_15dzzgi8-3-1-3"], [{ variant: "minimal", disabled: false, onAccent: false }, "_15dzzgi9-3-1-3"], [{ variant: "minimal", disabled: true, onAccent: false }, "_15dzzgia-3-1-3"], [{ variant: "default", disabled: true, onAccent: true }, "_15dzzgib-3-1-3"], [{ variant: "default", disabled: false, onAccent: true }, "_15dzzgic-3-1-3"], [{ variant: "default", disabled: true, onAccent: false }, "_15dzzgid-3-1-3"], [{ variant: "default", disabled: false, onAccent: false }, "_15dzzgie-3-1-3"]] });
-var keyboardShortcutKeyWrapperCSS = "_15dzzgi0-3-1-3";
+var keyboardShortcutKeyCSS = _7a468({ defaultClassName: "_15dzzgi1-3-2-0", variantClassNames: { onAccent: { true: "_15dzzgi2-3-2-0", false: "_15dzzgi3-3-2-0" }, disabled: { true: "_15dzzgi4-3-2-0" }, variant: { "default": "_15dzzgi5-3-2-0", minimal: "_15dzzgi6-3-2-0" } }, defaultVariants: { variant: "default", onAccent: false, disabled: false }, compoundVariants: [[{ variant: "minimal", disabled: false, onAccent: true }, "_15dzzgi7-3-2-0"], [{ variant: "minimal", disabled: true, onAccent: true }, "_15dzzgi8-3-2-0"], [{ variant: "minimal", disabled: false, onAccent: false }, "_15dzzgi9-3-2-0"], [{ variant: "minimal", disabled: true, onAccent: false }, "_15dzzgia-3-2-0"], [{ variant: "default", disabled: true, onAccent: true }, "_15dzzgib-3-2-0"], [{ variant: "default", disabled: false, onAccent: true }, "_15dzzgic-3-2-0"], [{ variant: "default", disabled: true, onAccent: false }, "_15dzzgid-3-2-0"], [{ variant: "default", disabled: false, onAccent: false }, "_15dzzgie-3-2-0"]] });
+var keyboardShortcutKeyWrapperCSS = "_15dzzgi0-3-2-0";
 export {
   keyboardShortcutKeyCSS,
   keyboardShortcutKeyWrapperCSS

package/esm/content/keyboard-shortcut/KeyboardShortcut.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/keyboard-shortcut/KeyboardShortcut.css.ts"],
-  "sourcesContent": ["import './KeyboardShortcut.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var keyboardShortcutKeyCSS = _7a468({defaultClassName:'_15dzzgi1-3-1-3',variantClassNames:{onAccent:{true:'_15dzzgi2-3-1-3',false:'_15dzzgi3-3-1-3'},disabled:{true:'_15dzzgi4-3-1-3'},variant:{'default':'_15dzzgi5-3-1-3',minimal:'_15dzzgi6-3-1-3'}},defaultVariants:{variant:'default',onAccent:false,disabled:false},compoundVariants:[[{variant:'minimal',disabled:false,onAccent:true},'_15dzzgi7-3-1-3'],[{variant:'minimal',disabled:true,onAccent:true},'_15dzzgi8-3-1-3'],[{variant:'minimal',disabled:false,onAccent:false},'_15dzzgi9-3-1-3'],[{variant:'minimal',disabled:true,onAccent:false},'_15dzzgia-3-1-3'],[{variant:'default',disabled:true,onAccent:true},'_15dzzgib-3-1-3'],[{variant:'default',disabled:false,onAccent:true},'_15dzzgic-3-1-3'],[{variant:'default',disabled:true,onAccent:false},'_15dzzgid-3-1-3'],[{variant:'default',disabled:false,onAccent:false},'_15dzzgie-3-1-3']]});\nexport var keyboardShortcutKeyWrapperCSS = '_15dzzgi0-3-1-3';"],
+  "sourcesContent": ["import './KeyboardShortcut.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var keyboardShortcutKeyCSS = _7a468({defaultClassName:'_15dzzgi1-3-2-0',variantClassNames:{onAccent:{true:'_15dzzgi2-3-2-0',false:'_15dzzgi3-3-2-0'},disabled:{true:'_15dzzgi4-3-2-0'},variant:{'default':'_15dzzgi5-3-2-0',minimal:'_15dzzgi6-3-2-0'}},defaultVariants:{variant:'default',onAccent:false,disabled:false},compoundVariants:[[{variant:'minimal',disabled:false,onAccent:true},'_15dzzgi7-3-2-0'],[{variant:'minimal',disabled:true,onAccent:true},'_15dzzgi8-3-2-0'],[{variant:'minimal',disabled:false,onAccent:false},'_15dzzgi9-3-2-0'],[{variant:'minimal',disabled:true,onAccent:false},'_15dzzgia-3-2-0'],[{variant:'default',disabled:true,onAccent:true},'_15dzzgib-3-2-0'],[{variant:'default',disabled:false,onAccent:true},'_15dzzgic-3-2-0'],[{variant:'default',disabled:true,onAccent:false},'_15dzzgid-3-2-0'],[{variant:'default',disabled:false,onAccent:false},'_15dzzgie-3-2-0']]});\nexport var keyboardShortcutKeyWrapperCSS = '_15dzzgi0-3-2-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,yBAAyB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,GAAE,SAAQ,EAAC,WAAU,mBAAkB,SAAQ,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,SAAQ,WAAU,UAAS,OAAM,UAAS,MAAK,GAAE,kBAAiB,CAAC,CAAC,EAAC,SAAQ,WAAU,UAAS,OAAM,UAAS,KAAI,GAAE,iBAAiB,GAAE,CAAC,EAAC,SAAQ,WAAU,UAAS,MAAK,UAAS,KAAI,GAAE,iBAAiB,GAAE,CAAC,EAAC,SAAQ,WAAU,UAAS,OAAM,UAAS,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,SAAQ,WAAU,UAAS,MAAK,UAAS,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,SAAQ,WAAU,UAAS,MAAK,UAAS,KAAI,GAAE,iBAAiB,GAAE,CAAC,EAAC,SAAQ,WAAU,UAAS,OAAM,UAAS,KAAI,GAAE,iBAAiB,GAAE,CAAC,EAAC,SAAQ,WAAU,UAAS,MAAK,UAAS,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,SAAQ,WAAU,UAAS,OAAM,UAAS,MAAK,GAAE,iBAAiB,CAAC,EAAC,CAAC;AACr3B,IAAI,gCAAgC;",
   "names": []
 }

package/esm/content/markdown/Markdown.css

@@ -1,10 +1,10 @@
-._14dgpdh0-3-1-3 {
+._14dgpdh0-3-2-0 {
   word-break: normal;
   overflow-wrap: anywhere;
 }
-._14dgpdh0-3-1-3 > :first-child {
+._14dgpdh0-3-2-0 > :first-child {
   margin-top: 0;
 }
-._14dgpdh0-3-1-3 > :last-child {
+._14dgpdh0-3-2-0 > :last-child {
   margin-bottom: 0;
 }

package/esm/content/markdown/Markdown.sty.js

@@ -1,5 +1,5 @@
 import "./Markdown.css";
-var MarkdownWrapperCSS = "_14dgpdh0-3-1-3";
+var MarkdownWrapperCSS = "_14dgpdh0-3-2-0";
 export {
   MarkdownWrapperCSS
 };

package/esm/content/markdown/Markdown.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/markdown/Markdown.css.ts"],
-  "sourcesContent": ["import './Markdown.css';\nexport var MarkdownWrapperCSS = '_14dgpdh0-3-1-3';"],
+  "sourcesContent": ["import './Markdown.css';\nexport var MarkdownWrapperCSS = '_14dgpdh0-3-2-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,qBAAqB;",
   "names": []
 }