@grafana/components 0.0.10 → 0.0.11

package/README.md

@@ -1,3 +1,10 @@
 # Grafana Product Design Engineering Components
 
 ...
+
+### Usage
+
+- Add @grafana/components as a dependency
+- Add `import '@grafana/components/dist/css/components.css';` to your top-level `App.tsx`
+- Also in `App.tsx`, wrap the contents of your app in `<ColorMode
+getAppEvents={getAppEvents} useTheme2={useTheme2}>`

package/dist/cjs/index.cjs

@@ -36,7 +36,10 @@ const useColorMode = () => {
 const getThemeColorMode = (isLight) => {
   return isLight ? "light" : "dark";
 };
-const useColorModeChange = ({ getAppEvents, useTheme2 }) => {
+const useColorModeChange = ({
+  getAppEvents,
+  useTheme2
+}) => {
   const { setColorMode } = useColorMode();
   const appEvents = getAppEvents();
   appEvents.subscribe(runtime.ThemeChangedEvent, ({ payload }) => {
@@ -48,6 +51,7 @@ const useColorModeChange = ({ getAppEvents, useTheme2 }) => {
   const { isLight } = useTheme2();
   const newColorMode = getThemeColorMode(isLight);
   setColorMode(newColorMode);
+  return newColorMode;
 };
 
 const ColorModeChangeHandler = ({ children, getAppEvents, useTheme2 }) => {
@@ -285,8 +289,7 @@ const getStyles = () => {
       gap: spacing.xs,
       background: legacy.colors.background.secondary,
       borderRadius: legacy.borderRadius.md,
-      padding: `${spacing.sm} ${spacing.md}`,
-      minWidth: `80px`
+      padding: `${spacing.sm} ${spacing.md}`
     }),
     sectionTitle: css.css({
       fontFamily: typography.fontFamily.ui,
@@ -417,7 +420,8 @@ const getComparisonBadgeStyles = ({
       alignItems: "center",
       gap: spacing.xxs,
       paddingLeft: spacing.xxs,
-      fontWeight: typography.fontWeight.medium
+      fontWeight: typography.fontWeight.medium,
+      whiteSpace: "nowrap"
     }),
     trendLabel: css.css({
       display: "flex",

package/dist/cjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/components/ColorModeProvider/ColorModeProvider.tsx","../../src/hooks/useColorModeChange.ts","../../src/components/ColorModeChangeHandler/ColorModeChangeHandler.tsx","../../src/components/ColorMode/ColorMode.tsx","../../src/utils/formatters.ts","../../src/utils/comparison.ts","../../src/components/Popover/Popover.styles.ts","../../src/components/Popover/Popover.tsx","../../src/components/ComparisonTooltip/ComparisonTooltip.styles.ts","../../src/components/ComparisonTooltip/ComparisonTooltip.tsx","../../src/components/ComparisonBadge/ComparisonBadge.styles.ts","../../src/components/ComparisonBadge/ComparisonBadge.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useState, ReactNode } from 'react';\nimport { ThemeColorMode } from '@grafana/design-tokens';\n\nimport '@grafana/design-tokens/dist/css/legacy/primitives.css';\nimport '@grafana/design-tokens/dist/css/legacy/colors.light.css';\nimport '@grafana/design-tokens/dist/css/legacy/colors.dark.css';\n\nexport interface ColorModeContextType {\n  colorMode: ThemeColorMode;\n  setColorMode: (colorMode: ThemeColorMode) => void;\n}\n\nexport interface ColorModeProviderProps {\n  children: ReactNode;\n  defaultColorMode?: ThemeColorMode;\n}\n\nconst ColorModeContext = createContext<ColorModeContextType | undefined>(undefined);\n\n/**\n * Provides a shared context for the currently-active theme color mode, and sets\n * the data-color-mode attribute on the document element whenever it changes.\n */\nexport const ColorModeProvider: React.FC<ColorModeProviderProps> = ({\n  children,\n  defaultColorMode = 'light',\n}) => {\n  const [colorMode, setColorMode] = useState<ThemeColorMode>(defaultColorMode);\n\n  useEffect(() => {\n    console.log('ColorModeProvider', { colorMode });\n    document.documentElement.setAttribute('data-color-mode', colorMode);\n  }, [colorMode]);\n\n  return (\n    <ColorModeContext.Provider value={{ colorMode, setColorMode }}>\n      {children}\n    </ColorModeContext.Provider>\n  );\n};\n\n/**\n * Use this to query the active color mode, or to set it, e.g. with an effect\n * hook within a component which explicitly changes the active color mode:\n *\n * useEffect(() => {\n *   setColorMode(colorMode);\n * }, [colorMode]);\n *\n */\nexport const useColorMode = () => {\n  const context = useContext(ColorModeContext);\n\n  if (context === undefined) {\n    throw new Error('useColorMode must be used within a ColorModeProvider');\n  }\n\n  return context;\n};\n","import type { EventBus, GrafanaTheme2 } from '@grafana/data';\nimport { ThemeChangedEvent } from '@grafana/runtime';\nimport type { ThemeColorMode } from '@grafana/design-tokens';\nimport { useColorMode } from '../components/ColorModeProvider/ColorModeProvider';\n\nconst getThemeColorMode = (isLight: boolean): ThemeColorMode => {\n  return isLight ? 'light' : 'dark';\n};\n\nexport interface ColorModeChangeProps {\n  getAppEvents: () => EventBus;\n  useTheme2: () => GrafanaTheme2;\n}\n\n/**\n * This allows us to register an event listener for when the ThemeChangedEvent\n * is fired, and update the currently active color mode accordingly. It will\n * also determine the color mode on initial registration, and update the context\n * provider accordingly.\n */\nexport const useColorModeChange = ({ getAppEvents, useTheme2 }: ColorModeChangeProps) => {\n  const { setColorMode } = useColorMode();\n  const appEvents = getAppEvents();\n\n  appEvents.subscribe<ThemeChangedEvent>(ThemeChangedEvent, ({ payload }) => {\n    const { isLight } = payload;\n    const newColorMode = getThemeColorMode(isLight);\n\n    console.log('ThemeChangedEvent', { colorMode: newColorMode });\n    setColorMode(newColorMode);\n  });\n\n  /**\n   * Longterm the current colorMode should ideally exist outside of useTheme2\n   */\n  const { isLight } = useTheme2();\n  const newColorMode = getThemeColorMode(isLight);\n  setColorMode(newColorMode);\n};\n","import React from 'react';\nimport { useColorModeChange, ColorModeChangeProps } from '../../hooks';\n\nexport type ColorModeWrapper = React.FC<ColorModeChangeProps & { children: React.ReactNode }>;\n\nexport const ColorModeChangeHandler: ColorModeWrapper = ({ children, getAppEvents, useTheme2 }) => {\n  useColorModeChange({ getAppEvents, useTheme2 });\n\n  return children;\n};\n","import { ColorModeWrapper, ColorModeChangeHandler } from '../ColorModeChangeHandler';\nimport { ColorModeProvider } from '../ColorModeProvider';\n\nexport const ColorMode: ColorModeWrapper = ({ children, getAppEvents, useTheme2 }) => {\n  return (\n    <ColorModeProvider>\n      <ColorModeChangeHandler getAppEvents={getAppEvents} useTheme2={useTheme2}>\n        {children}\n      </ColorModeChangeHandler>\n    </ColorModeProvider>\n  );\n};\n","/**\n * Number formatting options\n */\nexport interface FormatNumberOptions {\n  /** Decimal places (default: 2) */\n  decimals?: number;\n  /** Threshold for compact formatting (default: 1000) */\n  compactThreshold?: number;\n  /** Never use compact formatting (for precise displays) */\n  precise?: boolean;\n}\n\n/**\n * Format numbers with optional compact notation (k, m, b)\n * Components handle their own prefixes/suffixes ($ or %)\n *\n * @param value - The number to format (or 'loading' state)\n * @param options - Formatting options\n * @returns Formatted number string (no prefixes/suffixes)\n *\n * @example\n * formatNumber(1234) // \"1.2k\"\n * formatNumber(1234, { precise: true }) // \"1,234.00\"\n * formatNumber(1234, { decimals: 0 }) // \"1k\"\n * formatNumber(999) // \"999.00\"\n */\nexport const formatNumber = (\n  value: number | string | 'loading',\n  options: FormatNumberOptions = {},\n): string => {\n  const { decimals = 2, compactThreshold = 1000, precise = false } = options;\n\n  if (value === 'loading') {\n    return '';\n  }\n\n  const num = typeof value === 'string' ? parseFloat(value) : value;\n  if (isNaN(num)) {\n    return 'N/A';\n  }\n\n  const abs = Math.abs(num);\n\n  // Use compact notation if above threshold and not precise\n  if (!precise && abs >= compactThreshold) {\n    const sign = num < 0 ? '-' : '';\n    const absNum = Math.abs(num);\n    // Always use 1 decimal place for compact notation for consistency\n    if (absNum >= 1000000000) {\n      return `${sign}${(absNum / 1000000000).toFixed(1)}b`;\n    } else if (absNum >= 1000000) {\n      return `${sign}${(absNum / 1000000).toFixed(1)}m`;\n    } else if (absNum >= 1000) {\n      return `${sign}${(absNum / 1000).toFixed(1)}k`;\n    }\n  }\n\n  // Standard formatting with specified decimal places\n  return num.toLocaleString('en-US', {\n    minimumFractionDigits: decimals,\n    maximumFractionDigits: decimals,\n  });\n};\n","/**\n * Shared utility functions for handling comparison calculations across components\n */\n\nimport { formatNumber } from './formatters';\n\nexport interface ComparisonResult {\n  hasComparison: boolean;\n  direction: 'up' | 'down' | 'neutral';\n  percentageChange: number;\n  percentageLabel: string;\n}\n\n/**\n * Calculate comparison metrics between a current value and a baseline value\n * @param current - The current value to compare\n * @param baseline - The baseline value to compare against (optional)\n * @returns ComparisonResult object with calculated metrics\n */\nexport const calculateComparison = (\n  current: number | undefined | null,\n  baseline: number | undefined | null,\n): ComparisonResult => {\n  // If either value is missing, null, undefined, or baseline is 0, return neutral state\n  if (\n    current === undefined ||\n    current === null ||\n    baseline === undefined ||\n    baseline === null ||\n    baseline === 0\n  ) {\n    return {\n      hasComparison: false,\n      direction: 'neutral',\n      percentageChange: 0,\n      percentageLabel: '',\n    };\n  }\n\n  // If values are equal, return neutral state\n  if (current === baseline) {\n    return {\n      hasComparison: true,\n      direction: 'neutral',\n      percentageChange: 0,\n      percentageLabel: '0%',\n    };\n  }\n\n  // Calculate percentage change\n  const percentageChange = Math.abs(((current - baseline) / baseline) * 100);\n  const direction = current > baseline ? 'up' : 'down';\n\n  return {\n    hasComparison: true,\n    direction,\n    percentageChange,\n    percentageLabel: `${formatNumber(percentageChange, {\n      compactThreshold: 10000,\n      decimals: 2,\n    })}%`,\n  };\n};\n","import { css } from '@emotion/css';\nimport { getDesignTokens } from '@grafana/design-tokens';\n\nexport const getStyles = () => {\n  const {\n    legacy,\n    primitives: { spacing, typography },\n  } = getDesignTokens({ valueType: 'css' });\n  const backgroundColor = legacy.colors.background.primary;\n\n  return {\n    arrow: css({\n      fill: backgroundColor,\n    }),\n    shadow: css({\n      filter: `drop-shadow(${legacy.boxShadows.z2})`,\n    }),\n    container: css({\n      backgroundColor,\n      borderRadius: `calc(${legacy.borderRadius.md} + ${spacing.xs})`,\n      padding: spacing.xs,\n      color: legacy.colors.text.primary,\n      fontFamily: typography.fontFamily.ui,\n      fontSize: typography.fontSize.ui.sm,\n      fontWeight: typography.fontWeight.medium,\n    }),\n  };\n};\n","import { forwardRef, cloneElement, useCallback, useId, useRef, useState, JSX } from 'react';\nimport {\n  arrow,\n  autoUpdate,\n  flip,\n  FloatingArrow,\n  offset,\n  Placement,\n  safePolygon,\n  shift,\n  useDismiss,\n  useFloating,\n  useFocus,\n  useHover,\n  useInteractions,\n  useTransitionStyles,\n} from '@floating-ui/react';\nimport { Portal } from '@grafana/ui';\nimport { getStyles } from './Popover.styles';\n\nexport interface PopoverProps {\n  /**\n   * Content used to trigger the Popover being displayed\n   */\n  trigger: JSX.Element;\n\n  /**\n   * Content to render within the Popover\n   */\n  children: JSX.Element;\n  /**\n   * Should the popover be open? Implicitly means the popover visibility is\n   * controlled; if omitted, the popover target will control visibility\n   */\n  isOpen?: boolean;\n\n  /**\n   * Set to true if you want the tooltip to stay long enough so the user can\n   * move mouse over content to select text or click a link\n   */\n  isInteractive?: boolean;\n\n  /**\n   * Placement of the Popover relative to the trigger content\n   */\n  placement?: Placement;\n\n  /**\n   * Transition duration for hide/show effects, in milliseconds\n   */\n  transitionDuration?: number;\n\n  /**\n   * Additional delay before hiding the popover after mouseout, in milliseconds\n   */\n  hideDelay?: number;\n}\n\nconst POPOVER_OFFSET = 8;\n\nconst getMiddleware = ({\n  placement,\n  arrowRef,\n}: {\n  placement?: Placement;\n  arrowRef: React.RefObject<null>;\n}) => {\n  const BOUNDARY_ELEMENT_ID = 'floating-boundary';\n  const _flip = flip({\n    // Ensure we flip to the perpendicular axis if it doesn't fit\n    // on narrow viewports.\n    crossAxis: 'alignment',\n    fallbackAxisSideDirection: 'end',\n    boundary: document.getElementById(BOUNDARY_ELEMENT_ID) ?? undefined,\n  });\n\n  const middleware = placement?.includes('-') ? [_flip, shift()] : [shift(), _flip];\n\n  // the order of middleware is important!\n  // `arrow` should almost always be at the end\n  // see https://floating-ui.com/docs/arrow#order\n  return [\n    offset(POPOVER_OFFSET),\n    ...middleware,\n    arrow({\n      element: arrowRef,\n    }),\n  ];\n};\n\nexport const Popover = forwardRef<HTMLElement, PopoverProps>(\n  (\n    {\n      trigger,\n      children,\n      isOpen: isOpenControlled,\n      isInteractive = false,\n      placement = 'bottom',\n      transitionDuration = 200,\n      hideDelay = 500,\n    },\n    forwardedRef,\n  ) => {\n    const arrowRef = useRef(null);\n    const closeTimer = useRef<number | undefined>(undefined);\n    const popoverId = useId();\n    const [isOpenState, setOpen] = useState(isOpenControlled);\n    const [isDelayedOpen, setDelayedOpen] = useState(isOpenControlled);\n    const isOpen = isOpenControlled ?? isOpenState;\n    const middleware = getMiddleware({ placement, arrowRef });\n    const styles = getStyles();\n\n    const { context, refs, floatingStyles } = useFloating({\n      open: isOpen,\n      placement,\n      onOpenChange: (open) => {\n        setOpen(open);\n        clearTimeout(closeTimer.current);\n\n        if (!open) {\n          closeTimer.current = setTimeout(() => {\n            setDelayedOpen(open);\n          }, transitionDuration + hideDelay);\n        } else {\n          setDelayedOpen(open);\n        }\n      },\n      middleware,\n      whileElementsMounted: autoUpdate,\n    });\n\n    const { getReferenceProps, getFloatingProps } = useInteractions([\n      useDismiss(context),\n      useHover(context, {\n        handleClose: isInteractive ? safePolygon() : undefined,\n        move: false,\n        delay: {\n          open: 0,\n          close: hideDelay,\n        },\n      }),\n      useFocus(context),\n    ]);\n\n    const { styles: transitionStyles } = useTransitionStyles(context, {\n      duration: transitionDuration,\n      initial: ({ side }) => ({\n        opacity: 0,\n        transform:\n          side === 'top' || side === 'bottom'\n            ? `translateY(${POPOVER_OFFSET}px)`\n            : `translateX(${POPOVER_OFFSET}px)`,\n      }),\n      open: ({ side }) => ({\n        opacity: 1,\n        transform: side === 'top' || side === 'bottom' ? `translateY(0)` : `translateX(0)`,\n      }),\n      close: ({ side }) => ({\n        opacity: 0,\n        transform:\n          side === 'top' || side === 'bottom'\n            ? `translateY(${POPOVER_OFFSET}px)`\n            : `translateX(${POPOVER_OFFSET}px)`,\n      }),\n    });\n\n    const handleRef = useCallback(\n      (ref: HTMLElement | null) => {\n        refs.setReference(ref);\n\n        if (typeof forwardedRef === 'function') {\n          forwardedRef(ref);\n        } else if (forwardedRef) {\n          forwardedRef.current = ref;\n        }\n      },\n      [forwardedRef, refs],\n    );\n\n    return (\n      <>\n        {/* element to trigger displaying the popover */}\n        {cloneElement(trigger, {\n          ref: handleRef,\n          tabIndex: 0,\n          'aria-describedby': isOpen ? popoverId : undefined,\n          ...getReferenceProps(),\n        })}\n        {/* content to render inside the popover when open */}\n        {(isDelayedOpen || isOpen) && (\n          <Portal>\n            <div ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()}>\n              <div style={transitionStyles} className={styles.shadow}>\n                <FloatingArrow className={styles.arrow} ref={arrowRef} context={context} />\n                <div id={popoverId} role=\"tooltip\" className={styles.container}>\n                  {children}\n                </div>\n              </div>\n            </div>\n          </Portal>\n        )}\n      </>\n    );\n  },\n);\n\nPopover.displayName = 'Popover';\n","import { css } from '@emotion/css';\nimport { getDesignTokens } from '@grafana/design-tokens';\n\nexport const getStyles = () => {\n  const {\n    legacy,\n    primitives: { spacing, typography },\n  } = getDesignTokens({ valueType: 'css' });\n\n  return {\n    wrapper: css({\n      display: 'flex',\n      flexDirection: 'column',\n      gap: spacing.xs,\n    }),\n    heading: css({\n      padding: `${spacing.sm} ${spacing.md}`,\n      fontFamily: typography.fontFamily.ui,\n      fontSize: typography.fontSize.ui.sm,\n      fontWeight: typography.fontWeight.bold,\n      color: legacy.colors.text.primary,\n      background: legacy.colors.background.secondary,\n      borderRadius: legacy.borderRadius.md,\n    }),\n    content: css({\n      display: 'flex',\n      gap: spacing.xs,\n    }),\n    section: css({\n      display: 'flex',\n      flex: 1,\n      flexDirection: 'column',\n      justifyContent: 'flex-end',\n      gap: spacing.xs,\n      background: legacy.colors.background.secondary,\n      borderRadius: legacy.borderRadius.md,\n      padding: `${spacing.sm} ${spacing.md}`,\n      minWidth: `80px`,\n    }),\n    sectionTitle: css({\n      fontFamily: typography.fontFamily.ui,\n      fontSize: typography.fontSize.ui.sm,\n      fontWeight: typography.fontWeight.medium,\n      color: legacy.colors.text.primary,\n      whiteSpace: 'nowrap',\n    }),\n    value: css({\n      display: 'flex',\n      alignItems: 'center',\n      gap: spacing.xs,\n      fontFamily: typography.fontFamily.monospace,\n      fontSize: typography.fontSize.monospace.sm,\n      color: legacy.colors.text.secondary,\n    }),\n    icon: css({\n      flexShrink: 0,\n    }),\n  };\n};\n","import { Icon, IconName } from '@grafana/ui';\nimport { Popover, PopoverProps } from '../Popover';\nimport { getStyles } from './ComparisonTooltip.styles';\n\nexport interface ComparisonTooltipProps extends Omit<PopoverProps, 'children'> {\n  current?: string;\n  previous?: string;\n  previousLabel?: string;\n  currentLabel?: string;\n  title?: string;\n  currentIcon?: IconName;\n  previousIcon?: IconName;\n  hideDelay?: number;\n}\n\nexport const ComparisonTooltip = ({\n  trigger,\n  placement = 'top',\n  current,\n  previous,\n  previousLabel,\n  currentLabel = 'Current',\n  title,\n  currentIcon = 'eye',\n  previousIcon = 'clock-nine',\n  hideDelay,\n}: ComparisonTooltipProps) => {\n  const styles = getStyles();\n\n  return (\n    <Popover trigger={trigger} placement={placement} hideDelay={hideDelay}>\n      <div className={styles.wrapper}>\n        {title && <div className={styles.heading}>{title}</div>}\n        <div className={styles.content}>\n          <div className={styles.section}>\n            <div className={styles.sectionTitle}>{currentLabel}</div>\n            <div className={styles.value}>\n              <Icon name={currentIcon} size=\"sm\" className={styles.icon} />\n              <span>{current || 'N/A'}</span>\n            </div>\n          </div>\n          <div className={styles.section}>\n            <div className={styles.sectionTitle}>{previousLabel}</div>\n            <div className={styles.value}>\n              <Icon name={previousIcon} size=\"sm\" className={styles.icon} />\n              <span>{previous || 'N/A'}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </Popover>\n  );\n};\n","import { css } from '@emotion/css';\nimport { CSSVariables, getDesignTokens } from '@grafana/design-tokens';\n\nexport const cssVariables = (): CSSVariables => {\n  const { legacy } = getDesignTokens({ valueType: 'css' });\n\n  return {\n    dark: {\n      'comparison-badge-icon-background-color': legacy.colors.background.secondary,\n      'comparison-badge-icon-highlight-background-color': legacy.palette.whiteBaseOpacity10,\n    },\n    light: {\n      'comparison-badge-icon-background-color': legacy.colors.background.canvas,\n      'comparison-badge-icon-highlight-background-color': legacy.palette.blackBaseOpacity8,\n    },\n  };\n};\n\nconst BADGE_HEIGHT = 28;\nconst TREND_ICON_SIZE = 20;\n\nexport const getComparisonBadgeStyles = ({\n  highlight,\n  direction,\n  tooltip,\n}: {\n  highlight: boolean;\n  direction: string;\n  tooltip?: boolean;\n}) => {\n  const {\n    legacy,\n    primitives: { spacing, typography },\n  } = getDesignTokens({ valueType: 'css' });\n\n  const labelColor = (() => {\n    switch (true) {\n      case highlight:\n      case direction === 'up':\n        return legacy.colors.text.maxContrast;\n      default:\n        return legacy.colors.primary.text;\n    }\n  })();\n\n  return {\n    container: css({\n      boxSizing: 'border-box',\n      background: 'transparent',\n      borderRadius: legacy.borderRadius.pill,\n      border: `1px solid\n        ${highlight ? legacy.colors.border.strong : legacy.colors.border.weak}`,\n      padding: `${spacing.xxs} ${spacing.sm} ${spacing.xxs} ${spacing.xxs}`,\n      textAlign: 'left',\n      display: 'inline-flex',\n      flexDirection: 'row',\n      justifyContent: 'center',\n      alignItems: 'center',\n      fontFamily: typography.fontFamily.ui,\n      fontSize: typography.fontSize.ui.sm,\n      height: `${BADGE_HEIGHT}px`,\n      position: 'relative',\n      transition: 'background 0.2s ease-in-out',\n      ...(tooltip\n        ? {\n            cursor: 'pointer',\n            '&:hover': {\n              background: legacy.colors.background.secondary,\n            },\n          }\n        : {}),\n    }),\n    clockIconWrapper: css({\n      background: highlight\n        ? 'var(--comparison-badge-icon-highlight-background-color)'\n        : 'var(--comparison-badge-icon-background-color)',\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      width: '22px',\n      height: '22px',\n      borderRadius: legacy.borderRadius.pill,\n      color: legacy.colors.text.primary,\n    }),\n    trendLabelContainer: css({\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center',\n      gap: spacing.xxs,\n      paddingLeft: spacing.xxs,\n      fontWeight: typography.fontWeight.medium,\n    }),\n    trendLabel: css({\n      display: 'flex',\n      alignItems: 'center',\n      color: labelColor,\n      lineHeight: `${BADGE_HEIGHT}px`,\n      fontWeight: typography.fontWeight.medium,\n      fontVariantNumeric: 'tabular-nums',\n    }),\n    timeframeLabel: css({\n      color: highlight ? legacy.colors.text.maxContrast : legacy.colors.text.primary,\n      paddingLeft: spacing.xxs,\n      lineHeight: `${BADGE_HEIGHT}px`,\n      fontWeight: typography.fontWeight.normal,\n    }),\n    trendIconWrapper: css({\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      width: '16px',\n      height: '16px',\n    }),\n    trendIcon: css({\n      width: `${TREND_ICON_SIZE}px`,\n      height: `${TREND_ICON_SIZE}px`,\n    }),\n    dash: css({\n      color: legacy.colors.text.secondary,\n    }),\n  };\n};\n","import { cx } from '@emotion/css';\nimport { GlobalCSSVariables } from '@grafana/design-tokens';\nimport { Icon, IconName } from '@grafana/ui';\nimport { calculateComparison } from '../../utils/comparison';\nimport { formatNumber } from '../../utils/formatters';\nimport { ComparisonTooltipProps, ComparisonTooltip } from '../ComparisonTooltip';\nimport { cssVariables, getComparisonBadgeStyles } from './ComparisonBadge.styles';\n\nconst formatCurrency = (value: number | undefined | null): string => {\n  return !!value ? `$${formatNumber(value, { precise: true })}` : 'N/A';\n};\n\nexport interface ComparisonBadgeProps\n  extends Pick<ComparisonTooltipProps, 'currentLabel' | 'previousLabel' | 'placement'> {\n  current?: number | null;\n  previous?: number | null;\n  highlight?: boolean;\n  timeframeLabel?: string;\n  tooltip?: boolean;\n}\n\nconst DIRECTION_ICON: Record<'up' | 'down' | 'neutral', IconName> = {\n  up: 'arrow-up',\n  down: 'arrow-down',\n  neutral: 'minus',\n};\n\nexport const ComparisonBadge = ({\n  current,\n  previous,\n  currentLabel,\n  previousLabel,\n  placement,\n  highlight = false,\n  timeframeLabel,\n  tooltip = true,\n}: ComparisonBadgeProps) => {\n  const { direction, hasComparison, percentageLabel } = calculateComparison(current, previous);\n  const styles = getComparisonBadgeStyles({ highlight, direction, tooltip });\n\n  const directionIconStyle = (() => {\n    switch (true) {\n      case direction == 'neutral':\n        return styles.dash;\n      default:\n        return undefined;\n    }\n  })();\n\n  const badgeContent = (\n    <div className={styles.container}>\n      <div className={styles.clockIconWrapper}>\n        <Icon name=\"clock-nine\" />\n      </div>\n      <div className={styles.trendLabelContainer}>\n        <span className={styles.trendLabel}>\n          <span className={styles.trendIconWrapper}>\n            <Icon\n              name={DIRECTION_ICON[direction]}\n              className={cx(styles.trendIcon, directionIconStyle)}\n            />\n          </span>\n          {hasComparison && percentageLabel && <>{percentageLabel}</>}\n        </span>\n        {timeframeLabel && (\n          <span className={styles.timeframeLabel}>vs {timeframeLabel.toLowerCase()}</span>\n        )}\n      </div>\n    </div>\n  );\n\n  return (\n    <>\n      <GlobalCSSVariables variables={cssVariables()} defaultColorMode={null} />\n      {tooltip ? (\n        <ComparisonTooltip\n          trigger={badgeContent}\n          current={formatCurrency(current)}\n          previous={formatCurrency(previous)}\n          currentLabel={currentLabel}\n          previousLabel={previousLabel}\n          placement={placement}\n        />\n      ) : (\n        badgeContent\n      )}\n    </>\n  );\n};\n"],"names":["createContext","useState","useEffect","jsx","useContext","ThemeChangedEvent","isLight","newColorMode","getStyles","getDesignTokens","css","flip","shift","offset","arrow","forwardRef","useRef","useId","useFloating","autoUpdate","useInteractions","useDismiss","useHover","safePolygon","useFocus","useTransitionStyles","useCallback","jsxs","Fragment","cloneElement","Portal","FloatingArrow","Icon","cx","GlobalCSSVariables"],"mappings":";;;;;;;;;;;;;;;AAiBA,MAAM,gBAAA,GAAmBA,oBAAgD,MAAS,CAAA;AAM3E,MAAM,oBAAsD,CAAC;AAAA,EAClE,QAAA;AAAA,EACA,gBAAA,GAAmB;AACrB,CAAA,KAAM;AACJ,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIC,eAAyB,gBAAgB,CAAA;AAE3E,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,OAAA,CAAQ,GAAA,CAAI,mBAAA,EAAqB,EAAE,SAAA,EAAW,CAAA;AAC9C,IAAA,QAAA,CAAS,eAAA,CAAgB,YAAA,CAAa,iBAAA,EAAmB,SAAS,CAAA;AAAA,EACpE,CAAA,EAAG,CAAC,SAAS,CAAC,CAAA;AAEd,EAAA,uBACEC,cAAA,CAAC,iBAAiB,QAAA,EAAjB,EAA0B,OAAO,EAAE,SAAA,EAAW,YAAA,EAAa,EACzD,QAAA,EACH,CAAA;AAEJ;AAWO,MAAM,eAAe,MAAM;AAChC,EAAA,MAAM,OAAA,GAAUC,iBAAW,gBAAgB,CAAA;AAE3C,EAAA,IAAI,YAAY,MAAA,EAAW;AACzB,IAAA,MAAM,IAAI,MAAM,sDAAsD,CAAA;AAAA,EACxE;AAEA,EAAA,OAAO,OAAA;AACT;;ACrDA,MAAM,iBAAA,GAAoB,CAAC,OAAA,KAAqC;AAC9D,EAAA,OAAO,UAAU,OAAA,GAAU,MAAA;AAC7B,CAAA;AAaO,MAAM,kBAAA,GAAqB,CAAC,EAAE,YAAA,EAAc,WAAU,KAA4B;AACvF,EAAA,MAAM,EAAE,YAAA,EAAa,GAAI,YAAA,EAAa;AACtC,EAAA,MAAM,YAAY,YAAA,EAAa;AAE/B,EAAA,SAAA,CAAU,SAAA,CAA6BC,yBAAA,EAAmB,CAAC,EAAE,SAAQ,KAAM;AACzE,IAAA,MAAM,EAAE,OAAA,EAAAC,QAAAA,EAAQ,GAAI,OAAA;AACpB,IAAA,MAAMC,aAAAA,GAAe,kBAAkBD,QAAO,CAAA;AAE9C,IAAA,OAAA,CAAQ,GAAA,CAAI,mBAAA,EAAqB,EAAE,SAAA,EAAWC,eAAc,CAAA;AAC5D,IAAA,YAAA,CAAaA,aAAY,CAAA;AAAA,EAC3B,CAAC,CAAA;AAKD,EAAA,MAAM,EAAE,OAAA,EAAQ,GAAI,SAAA,EAAU;AAC9B,EAAA,MAAM,YAAA,GAAe,kBAAkB,OAAO,CAAA;AAC9C,EAAA,YAAA,CAAa,YAAY,CAAA;AAC3B;;ACjCO,MAAM,yBAA2C,CAAC,EAAE,QAAA,EAAU,YAAA,EAAc,WAAU,KAAM;AACjG,EAAA,kBAAA,CAAmB,EAAE,YAAA,EAAc,SAAA,EAAW,CAAA;AAE9C,EAAA,OAAO,QAAA;AACT;;ACNO,MAAM,YAA8B,CAAC,EAAE,QAAA,EAAU,YAAA,EAAc,WAAU,KAAM;AACpF,EAAA,sCACG,iBAAA,EAAA,EACC,QAAA,kBAAAJ,cAAA,CAAC,0BAAuB,YAAA,EAA4B,SAAA,EACjD,UACH,CAAA,EACF,CAAA;AAEJ;;ACeO,MAAM,YAAA,GAAe,CAC1B,KAAA,EACA,OAAA,GAA+B,EAAC,KACrB;AACX,EAAA,MAAM,EAAE,QAAA,GAAW,CAAA,EAAG,mBAAmB,GAAA,EAAM,OAAA,GAAU,OAAM,GAAI,OAAA;AAEnE,EAAA,IAAI,UAAU,SAAA,EAAW;AACvB,IAAA,OAAO,EAAA;AAAA,EACT;AAEA,EAAA,MAAM,MAAM,OAAO,KAAA,KAAU,QAAA,GAAW,UAAA,CAAW,KAAK,CAAA,GAAI,KAAA;AAC5D,EAAA,IAAI,KAAA,CAAM,GAAG,CAAA,EAAG;AACd,IAAA,OAAO,KAAA;AAAA,EACT;AAEA,EAAA,MAAM,GAAA,GAAM,IAAA,CAAK,GAAA,CAAI,GAAG,CAAA;AAGxB,EAAA,IAAI,CAAC,OAAA,IAAW,GAAA,IAAO,gBAAA,EAAkB;AACvC,IAAA,MAAM,IAAA,GAAO,GAAA,GAAM,CAAA,GAAI,GAAA,GAAM,EAAA;AAC7B,IAAA,MAAM,MAAA,GAAS,IAAA,CAAK,GAAA,CAAI,GAAG,CAAA;AAE3B,IAAA,IAAI,UAAU,GAAA,EAAY;AACxB,MAAA,OAAO,GAAG,IAAI,CAAA,EAAA,CAAI,SAAS,GAAA,EAAY,OAAA,CAAQ,CAAC,CAAC,CAAA,CAAA,CAAA;AAAA,IACnD,CAAA,MAAA,IAAW,UAAU,GAAA,EAAS;AAC5B,MAAA,OAAO,GAAG,IAAI,CAAA,EAAA,CAAI,SAAS,GAAA,EAAS,OAAA,CAAQ,CAAC,CAAC,CAAA,CAAA,CAAA;AAAA,IAChD,CAAA,MAAA,IAAW,UAAU,GAAA,EAAM;AACzB,MAAA,OAAO,GAAG,IAAI,CAAA,EAAA,CAAI,SAAS,GAAA,EAAM,OAAA,CAAQ,CAAC,CAAC,CAAA,CAAA,CAAA;AAAA,IAC7C;AAAA,EACF;AAGA,EAAA,OAAO,GAAA,CAAI,eAAe,OAAA,EAAS;AAAA,IACjC,qBAAA,EAAuB,QAAA;AAAA,IACvB,qBAAA,EAAuB;AAAA,GACxB,CAAA;AACH;;AC3CO,MAAM,mBAAA,GAAsB,CACjC,OAAA,EACA,QAAA,KACqB;AAErB,EAAA,IACE,OAAA,KAAY,UACZ,OAAA,KAAY,IAAA,IACZ,aAAa,MAAA,IACb,QAAA,KAAa,IAAA,IACb,QAAA,KAAa,CAAA,EACb;AACA,IAAA,OAAO;AAAA,MACL,aAAA,EAAe,KAAA;AAAA,MACf,SAAA,EAAW,SAAA;AAAA,MACX,gBAAA,EAAkB,CAAA;AAAA,MAClB,eAAA,EAAiB;AAAA,KACnB;AAAA,EACF;AAGA,EAAA,IAAI,YAAY,QAAA,EAAU;AACxB,IAAA,OAAO;AAAA,MACL,aAAA,EAAe,IAAA;AAAA,MACf,SAAA,EAAW,SAAA;AAAA,MACX,gBAAA,EAAkB,CAAA;AAAA,MAClB,eAAA,EAAiB;AAAA,KACnB;AAAA,EACF;AAGA,EAAA,MAAM,mBAAmB,IAAA,CAAK,GAAA,CAAA,CAAM,OAAA,GAAU,QAAA,IAAY,WAAY,GAAG,CAAA;AACzE,EAAA,MAAM,SAAA,GAAY,OAAA,GAAU,QAAA,GAAW,IAAA,GAAO,MAAA;AAE9C,EAAA,OAAO;AAAA,IACL,aAAA,EAAe,IAAA;AAAA,IACf,SAAA;AAAA,IACA,gBAAA;AAAA,IACA,eAAA,EAAiB,CAAA,EAAG,YAAA,CAAa,gBAAA,EAAkB;AAAA,MACjD,gBAAA,EAAkB,GAAA;AAAA,MAClB,QAAA,EAAU;AAAA,KACX,CAAC,CAAA,CAAA;AAAA,GACJ;AACF;;AC3DO,MAAMK,cAAY,MAAM;AAC7B,EAAA,MAAM;AAAA,IACJ,MAAA;AAAA,IACA,UAAA,EAAY,EAAE,OAAA,EAAS,UAAA;AAAW,GACpC,GAAIC,4BAAA,CAAgB,EAAE,SAAA,EAAW,OAAO,CAAA;AACxC,EAAA,MAAM,eAAA,GAAkB,MAAA,CAAO,MAAA,CAAO,UAAA,CAAW,OAAA;AAEjD,EAAA,OAAO;AAAA,IACL,OAAOC,OAAA,CAAI;AAAA,MACT,IAAA,EAAM;AAAA,KACP,CAAA;AAAA,IACD,QAAQA,OAAA,CAAI;AAAA,MACV,MAAA,EAAQ,CAAA,YAAA,EAAe,MAAA,CAAO,UAAA,CAAW,EAAE,CAAA,CAAA;AAAA,KAC5C,CAAA;AAAA,IACD,WAAWA,OAAA,CAAI;AAAA,MACb,eAAA;AAAA,MACA,cAAc,CAAA,KAAA,EAAQ,MAAA,CAAO,aAAa,EAAE,CAAA,GAAA,EAAM,QAAQ,EAAE,CAAA,CAAA,CAAA;AAAA,MAC5D,SAAS,OAAA,CAAQ,EAAA;AAAA,MACjB,KAAA,EAAO,MAAA,CAAO,MAAA,CAAO,IAAA,CAAK,OAAA;AAAA,MAC1B,UAAA,EAAY,WAAW,UAAA,CAAW,EAAA;AAAA,MAClC,QAAA,EAAU,UAAA,CAAW,QAAA,CAAS,EAAA,CAAG,EAAA;AAAA,MACjC,UAAA,EAAY,WAAW,UAAA,CAAW;AAAA,KACnC;AAAA,GACH;AACF,CAAA;;AC+BA,MAAM,cAAA,GAAiB,CAAA;AAEvB,MAAM,gBAAgB,CAAC;AAAA,EACrB,SAAA;AAAA,EACA;AACF,CAAA,KAGM;AAlEN,EAAA,IAAA,EAAA;AAmEE,EAAA,MAAM,mBAAA,GAAsB,mBAAA;AAC5B,EAAA,MAAM,QAAQC,YAAA,CAAK;AAAA;AAAA;AAAA,IAGjB,SAAA,EAAW,WAAA;AAAA,IACX,yBAAA,EAA2B,KAAA;AAAA,IAC3B,QAAA,EAAA,CAAU,EAAA,GAAA,QAAA,CAAS,cAAA,CAAe,mBAAmB,MAA3C,IAAA,GAAA,EAAA,GAAgD;AAAA,GAC3D,CAAA;AAED,EAAA,MAAM,UAAA,GAAA,CAAa,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAW,QAAA,CAAS,GAAA,CAAA,IAAO,CAAC,KAAA,EAAOC,aAAA,EAAO,CAAA,GAAI,CAACA,aAAA,EAAM,EAAG,KAAK,CAAA;AAKhF,EAAA,OAAO;AAAA,IACLC,eAAO,cAAc,CAAA;AAAA,IACrB,GAAG,UAAA;AAAA,IACHC,aAAA,CAAM;AAAA,MACJ,OAAA,EAAS;AAAA,KACV;AAAA,GACH;AACF,CAAA;AAEO,MAAM,OAAA,GAAUC,gBAAA;AAAA,EACrB,CACE;AAAA,IACE,OAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA,EAAQ,gBAAA;AAAA,IACR,aAAA,GAAgB,KAAA;AAAA,IAChB,SAAA,GAAY,QAAA;AAAA,IACZ,kBAAA,GAAqB,GAAA;AAAA,IACrB,SAAA,GAAY;AAAA,KAEd,YAAA,KACG;AACH,IAAA,MAAM,QAAA,GAAWC,aAAO,IAAI,CAAA;AAC5B,IAAA,MAAM,UAAA,GAAaA,aAA2B,MAAS,CAAA;AACvD,IAAA,MAAM,YAAYC,WAAA,EAAM;AACxB,IAAA,MAAM,CAAC,WAAA,EAAa,OAAO,CAAA,GAAIhB,eAAS,gBAAgB,CAAA;AACxD,IAAA,MAAM,CAAC,aAAA,EAAe,cAAc,CAAA,GAAIA,eAAS,gBAAgB,CAAA;AACjE,IAAA,MAAM,SAAS,gBAAA,IAAA,IAAA,GAAA,gBAAA,GAAoB,WAAA;AACnC,IAAA,MAAM,UAAA,GAAa,aAAA,CAAc,EAAE,SAAA,EAAW,UAAU,CAAA;AACxD,IAAA,MAAM,SAASO,WAAA,EAAU;AAEzB,IAAA,MAAM,EAAE,OAAA,EAAS,IAAA,EAAM,cAAA,KAAmBU,mBAAA,CAAY;AAAA,MACpD,IAAA,EAAM,MAAA;AAAA,MACN,SAAA;AAAA,MACA,YAAA,EAAc,CAAC,IAAA,KAAS;AACtB,QAAA,OAAA,CAAQ,IAAI,CAAA;AACZ,QAAA,YAAA,CAAa,WAAW,OAAO,CAAA;AAE/B,QAAA,IAAI,CAAC,IAAA,EAAM;AACT,UAAA,UAAA,CAAW,OAAA,GAAU,WAAW,MAAM;AACpC,YAAA,cAAA,CAAe,IAAI,CAAA;AAAA,UACrB,CAAA,EAAG,qBAAqB,SAAS,CAAA;AAAA,QACnC,CAAA,MAAO;AACL,UAAA,cAAA,CAAe,IAAI,CAAA;AAAA,QACrB;AAAA,MACF,CAAA;AAAA,MACA,UAAA;AAAA,MACA,oBAAA,EAAsBC;AAAA,KACvB,CAAA;AAED,IAAA,MAAM,EAAE,iBAAA,EAAmB,gBAAA,EAAiB,GAAIC,uBAAA,CAAgB;AAAA,MAC9DC,mBAAW,OAAO,CAAA;AAAA,MAClBC,iBAAS,OAAA,EAAS;AAAA,QAChB,WAAA,EAAa,aAAA,GAAgBC,mBAAA,EAAY,GAAI,MAAA;AAAA,QAC7C,IAAA,EAAM,KAAA;AAAA,QACN,KAAA,EAAO;AAAA,UACL,IAAA,EAAM,CAAA;AAAA,UACN,KAAA,EAAO;AAAA;AACT,OACD,CAAA;AAAA,MACDC,iBAAS,OAAO;AAAA,KACjB,CAAA;AAED,IAAA,MAAM,EAAE,MAAA,EAAQ,gBAAA,EAAiB,GAAIC,4BAAoB,OAAA,EAAS;AAAA,MAChE,QAAA,EAAU,kBAAA;AAAA,MACV,OAAA,EAAS,CAAC,EAAE,IAAA,EAAK,MAAO;AAAA,QACtB,OAAA,EAAS,CAAA;AAAA,QACT,SAAA,EACE,SAAS,KAAA,IAAS,IAAA,KAAS,WACvB,CAAA,WAAA,EAAc,cAAc,CAAA,GAAA,CAAA,GAC5B,CAAA,WAAA,EAAc,cAAc,CAAA,GAAA;AAAA,OACpC,CAAA;AAAA,MACA,IAAA,EAAM,CAAC,EAAE,IAAA,EAAK,MAAO;AAAA,QACnB,OAAA,EAAS,CAAA;AAAA,QACT,SAAA,EAAW,IAAA,KAAS,KAAA,IAAS,IAAA,KAAS,WAAW,CAAA,aAAA,CAAA,GAAkB,CAAA,aAAA;AAAA,OACrE,CAAA;AAAA,MACA,KAAA,EAAO,CAAC,EAAE,IAAA,EAAK,MAAO;AAAA,QACpB,OAAA,EAAS,CAAA;AAAA,QACT,SAAA,EACE,SAAS,KAAA,IAAS,IAAA,KAAS,WACvB,CAAA,WAAA,EAAc,cAAc,CAAA,GAAA,CAAA,GAC5B,CAAA,WAAA,EAAc,cAAc,CAAA,GAAA;AAAA,OACpC;AAAA,KACD,CAAA;AAED,IAAA,MAAM,SAAA,GAAYC,iBAAA;AAAA,MAChB,CAAC,GAAA,KAA4B;AAC3B,QAAA,IAAA,CAAK,aAAa,GAAG,CAAA;AAErB,QAAA,IAAI,OAAO,iBAAiB,UAAA,EAAY;AACtC,UAAA,YAAA,CAAa,GAAG,CAAA;AAAA,QAClB,WAAW,YAAA,EAAc;AACvB,UAAA,YAAA,CAAa,OAAA,GAAU,GAAA;AAAA,QACzB;AAAA,MACF,CAAA;AAAA,MACA,CAAC,cAAc,IAAI;AAAA,KACrB;AAEA,IAAA,uBACEC,eAAA,CAAAC,mBAAA,EAAA,EAEG,QAAA,EAAA;AAAA,MAAAC,kBAAA,CAAa,OAAA,EAAS;AAAA,QACrB,GAAA,EAAK,SAAA;AAAA,QACL,QAAA,EAAU,CAAA;AAAA,QACV,kBAAA,EAAoB,SAAS,SAAA,GAAY,MAAA;AAAA,QACzC,GAAG,iBAAA;AAAkB,OACtB,CAAA;AAAA,MAAA,CAEC,aAAA,IAAiB,2BACjB1B,cAAA,CAAC2B,SAAA,EAAA,EACC,yCAAC,KAAA,EAAA,EAAI,GAAA,EAAK,KAAK,WAAA,EAAa,KAAA,EAAO,gBAAiB,GAAG,gBAAA,IACrD,QAAA,kBAAAH,eAAA,CAAC,KAAA,EAAA,EAAI,OAAO,gBAAA,EAAkB,SAAA,EAAW,OAAO,MAAA,EAC9C,QAAA,EAAA;AAAA,wBAAAxB,cAAA,CAAC4B,yBAAc,SAAA,EAAW,MAAA,CAAO,KAAA,EAAO,GAAA,EAAK,UAAU,OAAA,EAAkB,CAAA;AAAA,wBACzE5B,cAAA,CAAC,SAAI,EAAA,EAAI,SAAA,EAAW,MAAK,SAAA,EAAU,SAAA,EAAW,MAAA,CAAO,SAAA,EAClD,QAAA,EACH;AAAA,OAAA,EACF,GACF,CAAA,EACF;AAAA,KAAA,EAEJ,CAAA;AAAA,EAEJ;AACF;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA;;AC3Mf,MAAM,YAAY,MAAM;AAC7B,EAAA,MAAM;AAAA,IACJ,MAAA;AAAA,IACA,UAAA,EAAY,EAAE,OAAA,EAAS,UAAA;AAAW,GACpC,GAAIM,4BAAA,CAAgB,EAAE,SAAA,EAAW,OAAO,CAAA;AAExC,EAAA,OAAO;AAAA,IACL,SAASC,OAAA,CAAI;AAAA,MACX,OAAA,EAAS,MAAA;AAAA,MACT,aAAA,EAAe,QAAA;AAAA,MACf,KAAK,OAAA,CAAQ;AAAA,KACd,CAAA;AAAA,IACD,SAASA,OAAA,CAAI;AAAA,MACX,SAAS,CAAA,EAAG,OAAA,CAAQ,EAAE,CAAA,CAAA,EAAI,QAAQ,EAAE,CAAA,CAAA;AAAA,MACpC,UAAA,EAAY,WAAW,UAAA,CAAW,EAAA;AAAA,MAClC,QAAA,EAAU,UAAA,CAAW,QAAA,CAAS,EAAA,CAAG,EAAA;AAAA,MACjC,UAAA,EAAY,WAAW,UAAA,CAAW,IAAA;AAAA,MAClC,KAAA,EAAO,MAAA,CAAO,MAAA,CAAO,IAAA,CAAK,OAAA;AAAA,MAC1B,UAAA,EAAY,MAAA,CAAO,MAAA,CAAO,UAAA,CAAW,SAAA;AAAA,MACrC,YAAA,EAAc,OAAO,YAAA,CAAa;AAAA,KACnC,CAAA;AAAA,IACD,SAASA,OAAA,CAAI;AAAA,MACX,OAAA,EAAS,MAAA;AAAA,MACT,KAAK,OAAA,CAAQ;AAAA,KACd,CAAA;AAAA,IACD,SAASA,OAAA,CAAI;AAAA,MACX,OAAA,EAAS,MAAA;AAAA,MACT,IAAA,EAAM,CAAA;AAAA,MACN,aAAA,EAAe,QAAA;AAAA,MACf,cAAA,EAAgB,UAAA;AAAA,MAChB,KAAK,OAAA,CAAQ,EAAA;AAAA,MACb,UAAA,EAAY,MAAA,CAAO,MAAA,CAAO,UAAA,CAAW,SAAA;AAAA,MACrC,YAAA,EAAc,OAAO,YAAA,CAAa,EAAA;AAAA,MAClC,SAAS,CAAA,EAAG,OAAA,CAAQ,EAAE,CAAA,CAAA,EAAI,QAAQ,EAAE,CAAA,CAAA;AAAA,MACpC,QAAA,EAAU,CAAA,IAAA;AAAA,KACX,CAAA;AAAA,IACD,cAAcA,OAAA,CAAI;AAAA,MAChB,UAAA,EAAY,WAAW,UAAA,CAAW,EAAA;AAAA,MAClC,QAAA,EAAU,UAAA,CAAW,QAAA,CAAS,EAAA,CAAG,EAAA;AAAA,MACjC,UAAA,EAAY,WAAW,UAAA,CAAW,MAAA;AAAA,MAClC,KAAA,EAAO,MAAA,CAAO,MAAA,CAAO,IAAA,CAAK,OAAA;AAAA,MAC1B,UAAA,EAAY;AAAA,KACb,CAAA;AAAA,IACD,OAAOA,OAAA,CAAI;AAAA,MACT,OAAA,EAAS,MAAA;AAAA,MACT,UAAA,EAAY,QAAA;AAAA,MACZ,KAAK,OAAA,CAAQ,EAAA;AAAA,MACb,UAAA,EAAY,WAAW,UAAA,CAAW,SAAA;AAAA,MAClC,QAAA,EAAU,UAAA,CAAW,QAAA,CAAS,SAAA,CAAU,EAAA;AAAA,MACxC,KAAA,EAAO,MAAA,CAAO,MAAA,CAAO,IAAA,CAAK;AAAA,KAC3B,CAAA;AAAA,IACD,MAAMA,OAAA,CAAI;AAAA,MACR,UAAA,EAAY;AAAA,KACb;AAAA,GACH;AACF,CAAA;;AC3CO,MAAM,oBAAoB,CAAC;AAAA,EAChC,OAAA;AAAA,EACA,SAAA,GAAY,KAAA;AAAA,EACZ,OAAA;AAAA,EACA,QAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA,GAAe,SAAA;AAAA,EACf,KAAA;AAAA,EACA,WAAA,GAAc,KAAA;AAAA,EACd,YAAA,GAAe,YAAA;AAAA,EACf;AACF,CAAA,KAA8B;AAC5B,EAAA,MAAM,SAAS,SAAA,EAAU;AAEzB,EAAA,uBACEP,cAAA,CAAC,WAAQ,OAAA,EAAkB,SAAA,EAAsB,WAC/C,QAAA,kBAAAwB,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,OAAA,EACpB,QAAA,EAAA;AAAA,IAAA,KAAA,oBAASxB,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,SAAU,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,oBACjDwB,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,OAAA,EACrB,QAAA,EAAA;AAAA,sBAAAA,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,OAAA,EACrB,QAAA,EAAA;AAAA,wBAAAxB,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,YAAA,EAAe,QAAA,EAAA,YAAA,EAAa,CAAA;AAAA,wBACnDwB,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,KAAA,EACrB,QAAA,EAAA;AAAA,0BAAAxB,cAAA,CAAC6B,WAAK,IAAA,EAAM,WAAA,EAAa,MAAK,IAAA,EAAK,SAAA,EAAW,OAAO,IAAA,EAAM,CAAA;AAAA,0BAC3D7B,cAAA,CAAC,MAAA,EAAA,EAAM,QAAA,EAAA,OAAA,IAAW,KAAA,EAAM;AAAA,SAAA,EAC1B;AAAA,OAAA,EACF,CAAA;AAAA,sBACAwB,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,OAAA,EACrB,QAAA,EAAA;AAAA,wBAAAxB,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,YAAA,EAAe,QAAA,EAAA,aAAA,EAAc,CAAA;AAAA,wBACpDwB,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,KAAA,EACrB,QAAA,EAAA;AAAA,0BAAAxB,cAAA,CAAC6B,WAAK,IAAA,EAAM,YAAA,EAAc,MAAK,IAAA,EAAK,SAAA,EAAW,OAAO,IAAA,EAAM,CAAA;AAAA,0BAC5D7B,cAAA,CAAC,MAAA,EAAA,EAAM,QAAA,EAAA,QAAA,IAAY,KAAA,EAAM;AAAA,SAAA,EAC3B;AAAA,OAAA,EACF;AAAA,KAAA,EACF;AAAA,GAAA,EACF,CAAA,EACF,CAAA;AAEJ;;ACjDO,MAAM,eAAe,MAAoB;AAC9C,EAAA,MAAM,EAAE,MAAA,EAAO,GAAIM,6BAAgB,EAAE,SAAA,EAAW,OAAO,CAAA;AAEvD,EAAA,OAAO;AAAA,IACL,IAAA,EAAM;AAAA,MACJ,wCAAA,EAA0C,MAAA,CAAO,MAAA,CAAO,UAAA,CAAW,SAAA;AAAA,MACnE,kDAAA,EAAoD,OAAO,OAAA,CAAQ;AAAA,KACrE;AAAA,IACA,KAAA,EAAO;AAAA,MACL,wCAAA,EAA0C,MAAA,CAAO,MAAA,CAAO,UAAA,CAAW,MAAA;AAAA,MACnE,kDAAA,EAAoD,OAAO,OAAA,CAAQ;AAAA;AACrE,GACF;AACF,CAAA;AAEA,MAAM,YAAA,GAAe,EAAA;AACrB,MAAM,eAAA,GAAkB,EAAA;AAEjB,MAAM,2BAA2B,CAAC;AAAA,EACvC,SAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,KAIM;AACJ,EAAA,MAAM;AAAA,IACJ,MAAA;AAAA,IACA,UAAA,EAAY,EAAE,OAAA,EAAS,UAAA;AAAW,GACpC,GAAIA,4BAAA,CAAgB,EAAE,SAAA,EAAW,OAAO,CAAA;AAExC,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,QAAQ,IAAA;AAAM,MACZ,KAAK,SAAA;AAAA,MACL,KAAK,SAAA,KAAc,IAAA;AACjB,QAAA,OAAO,MAAA,CAAO,OAAO,IAAA,CAAK,WAAA;AAAA,MAC5B;AACE,QAAA,OAAO,MAAA,CAAO,OAAO,OAAA,CAAQ,IAAA;AAAA;AACjC,EACF,CAAA,GAAG;AAEH,EAAA,OAAO;AAAA,IACL,WAAWC,OAAA,CAAI;AAAA,MACb,SAAA,EAAW,YAAA;AAAA,MACX,UAAA,EAAY,aAAA;AAAA,MACZ,YAAA,EAAc,OAAO,YAAA,CAAa,IAAA;AAAA,MAClC,MAAA,EAAQ,CAAA;AAAA,QAAA,EACJ,SAAA,GAAY,OAAO,MAAA,CAAO,MAAA,CAAO,SAAS,MAAA,CAAO,MAAA,CAAO,OAAO,IAAI,CAAA,CAAA;AAAA,MACvE,OAAA,EAAS,CAAA,EAAG,OAAA,CAAQ,GAAG,CAAA,CAAA,EAAI,OAAA,CAAQ,EAAE,CAAA,CAAA,EAAI,OAAA,CAAQ,GAAG,CAAA,CAAA,EAAI,OAAA,CAAQ,GAAG,CAAA,CAAA;AAAA,MACnE,SAAA,EAAW,MAAA;AAAA,MACX,OAAA,EAAS,aAAA;AAAA,MACT,aAAA,EAAe,KAAA;AAAA,MACf,cAAA,EAAgB,QAAA;AAAA,MAChB,UAAA,EAAY,QAAA;AAAA,MACZ,UAAA,EAAY,WAAW,UAAA,CAAW,EAAA;AAAA,MAClC,QAAA,EAAU,UAAA,CAAW,QAAA,CAAS,EAAA,CAAG,EAAA;AAAA,MACjC,MAAA,EAAQ,GAAG,YAAY,CAAA,EAAA,CAAA;AAAA,MACvB,QAAA,EAAU,UAAA;AAAA,MACV,UAAA,EAAY,6BAAA;AAAA,MACZ,GAAI,OAAA,GACA;AAAA,QACE,MAAA,EAAQ,SAAA;AAAA,QACR,SAAA,EAAW;AAAA,UACT,UAAA,EAAY,MAAA,CAAO,MAAA,CAAO,UAAA,CAAW;AAAA;AACvC,UAEF;AAAC,KACN,CAAA;AAAA,IACD,kBAAkBA,OAAA,CAAI;AAAA,MACpB,UAAA,EAAY,YACR,yDAAA,GACA,+CAAA;AAAA,MACJ,OAAA,EAAS,MAAA;AAAA,MACT,UAAA,EAAY,QAAA;AAAA,MACZ,cAAA,EAAgB,QAAA;AAAA,MAChB,KAAA,EAAO,MAAA;AAAA,MACP,MAAA,EAAQ,MAAA;AAAA,MACR,YAAA,EAAc,OAAO,YAAA,CAAa,IAAA;AAAA,MAClC,KAAA,EAAO,MAAA,CAAO,MAAA,CAAO,IAAA,CAAK;AAAA,KAC3B,CAAA;AAAA,IACD,qBAAqBA,OAAA,CAAI;AAAA,MACvB,OAAA,EAAS,MAAA;AAAA,MACT,aAAA,EAAe,KAAA;AAAA,MACf,UAAA,EAAY,QAAA;AAAA,MACZ,KAAK,OAAA,CAAQ,GAAA;AAAA,MACb,aAAa,OAAA,CAAQ,GAAA;AAAA,MACrB,UAAA,EAAY,WAAW,UAAA,CAAW;AAAA,KACnC,CAAA;AAAA,IACD,YAAYA,OAAA,CAAI;AAAA,MACd,OAAA,EAAS,MAAA;AAAA,MACT,UAAA,EAAY,QAAA;AAAA,MACZ,KAAA,EAAO,UAAA;AAAA,MACP,UAAA,EAAY,GAAG,YAAY,CAAA,EAAA,CAAA;AAAA,MAC3B,UAAA,EAAY,WAAW,UAAA,CAAW,MAAA;AAAA,MAClC,kBAAA,EAAoB;AAAA,KACrB,CAAA;AAAA,IACD,gBAAgBA,OAAA,CAAI;AAAA,MAClB,KAAA,EAAO,YAAY,MAAA,CAAO,MAAA,CAAO,KAAK,WAAA,GAAc,MAAA,CAAO,OAAO,IAAA,CAAK,OAAA;AAAA,MACvE,aAAa,OAAA,CAAQ,GAAA;AAAA,MACrB,UAAA,EAAY,GAAG,YAAY,CAAA,EAAA,CAAA;AAAA,MAC3B,UAAA,EAAY,WAAW,UAAA,CAAW;AAAA,KACnC,CAAA;AAAA,IACD,kBAAkBA,OAAA,CAAI;AAAA,MACpB,OAAA,EAAS,MAAA;AAAA,MACT,UAAA,EAAY,QAAA;AAAA,MACZ,cAAA,EAAgB,QAAA;AAAA,MAChB,KAAA,EAAO,MAAA;AAAA,MACP,MAAA,EAAQ;AAAA,KACT,CAAA;AAAA,IACD,WAAWA,OAAA,CAAI;AAAA,MACb,KAAA,EAAO,GAAG,eAAe,CAAA,EAAA,CAAA;AAAA,MACzB,MAAA,EAAQ,GAAG,eAAe,CAAA,EAAA;AAAA,KAC3B,CAAA;AAAA,IACD,MAAMA,OAAA,CAAI;AAAA,MACR,KAAA,EAAO,MAAA,CAAO,MAAA,CAAO,IAAA,CAAK;AAAA,KAC3B;AAAA,GACH;AACF,CAAA;;ACjHA,MAAM,cAAA,GAAiB,CAAC,KAAA,KAA6C;AACnE,EAAA,OAAO,CAAC,CAAC,KAAA,GAAQ,CAAA,CAAA,EAAI,YAAA,CAAa,KAAA,EAAO,EAAE,OAAA,EAAS,IAAA,EAAM,CAAC,CAAA,CAAA,GAAK,KAAA;AAClE,CAAA;AAWA,MAAM,cAAA,GAA8D;AAAA,EAClE,EAAA,EAAI,UAAA;AAAA,EACJ,IAAA,EAAM,YAAA;AAAA,EACN,OAAA,EAAS;AACX,CAAA;AAEO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,OAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA,GAAY,KAAA;AAAA,EACZ,cAAA;AAAA,EACA,OAAA,GAAU;AACZ,CAAA,KAA4B;AAC1B,EAAA,MAAM,EAAE,SAAA,EAAW,aAAA,EAAe,iBAAgB,GAAI,mBAAA,CAAoB,SAAS,QAAQ,CAAA;AAC3F,EAAA,MAAM,SAAS,wBAAA,CAAyB,EAAE,SAAA,EAAW,SAAA,EAAW,SAAS,CAAA;AAEzE,EAAA,MAAM,sBAAsB,MAAM;AAChC,IAAA,QAAQ,IAAA;AAAM,MACZ,KAAK,SAAA,IAAa,SAAA;AAChB,QAAA,OAAO,MAAA,CAAO,IAAA;AAAA,MAChB;AACE,QAAA,OAAO,MAAA;AAAA;AACX,EACF,CAAA,GAAG;AAEH,EAAA,MAAM,YAAA,mBACJiB,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAO,SAAA,EACrB,QAAA,EAAA;AAAA,oBAAAxB,cAAA,CAAC,KAAA,EAAA,EAAI,WAAW,MAAA,CAAO,gBAAA,EACrB,yCAAC6B,OAAA,EAAA,EAAK,IAAA,EAAK,cAAa,CAAA,EAC1B,CAAA;AAAA,oBACAL,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,mBAAA,EACrB,QAAA,EAAA;AAAA,sBAAAA,eAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,MAAA,CAAO,UAAA,EACtB,QAAA,EAAA;AAAA,wBAAAxB,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,MAAA,CAAO,gBAAA,EACtB,QAAA,kBAAAA,cAAA;AAAA,UAAC6B,OAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAM,eAAe,SAAS,CAAA;AAAA,YAC9B,SAAA,EAAWC,MAAA,CAAG,MAAA,CAAO,SAAA,EAAW,kBAAkB;AAAA;AAAA,SACpD,EACF,CAAA;AAAA,QACC,aAAA,IAAiB,eAAA,oBAAmB9B,cAAA,CAAAyB,mBAAA,EAAA,EAAG,QAAA,EAAA,eAAA,EAAgB;AAAA,OAAA,EAC1D,CAAA;AAAA,MACC,cAAA,oBACCD,eAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,OAAO,cAAA,EAAgB,QAAA,EAAA;AAAA,QAAA,KAAA;AAAA,QAAI,eAAe,WAAA;AAAY,OAAA,EAAE;AAAA,KAAA,EAE7E;AAAA,GAAA,EACF,CAAA;AAGF,EAAA,uBACEA,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAzB,cAAA,CAAC+B,+BAAA,EAAA,EAAmB,SAAA,EAAW,YAAA,EAAa,EAAG,kBAAkB,IAAA,EAAM,CAAA;AAAA,IACtE,OAAA,mBACC/B,cAAA;AAAA,MAAC,iBAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAS,YAAA;AAAA,QACT,OAAA,EAAS,eAAe,OAAO,CAAA;AAAA,QAC/B,QAAA,EAAU,eAAe,QAAQ,CAAA;AAAA,QACjC,YAAA;AAAA,QACA,aAAA;AAAA,QACA;AAAA;AAAA,KACF,GAEA;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/components/ColorModeProvider/ColorModeProvider.tsx","../../src/hooks/useColorModeChange.ts","../../src/components/ColorModeChangeHandler/ColorModeChangeHandler.tsx","../../src/components/ColorMode/ColorMode.tsx","../../src/utils/formatters.ts","../../src/utils/comparison.ts","../../src/components/Popover/Popover.styles.ts","../../src/components/Popover/Popover.tsx","../../src/components/ComparisonTooltip/ComparisonTooltip.styles.ts","../../src/components/ComparisonTooltip/ComparisonTooltip.tsx","../../src/components/ComparisonBadge/ComparisonBadge.styles.ts","../../src/components/ComparisonBadge/ComparisonBadge.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useState, ReactNode } from 'react';\nimport { ThemeColorMode } from '@grafana/design-tokens';\n\nimport '@grafana/design-tokens/dist/css/legacy/primitives.css';\nimport '@grafana/design-tokens/dist/css/legacy/colors.light.css';\nimport '@grafana/design-tokens/dist/css/legacy/colors.dark.css';\n\nexport interface ColorModeContextType {\n  colorMode: ThemeColorMode;\n  setColorMode: (colorMode: ThemeColorMode) => void;\n}\n\nexport interface ColorModeProviderProps {\n  children: ReactNode;\n  defaultColorMode?: ThemeColorMode;\n}\n\nconst ColorModeContext = createContext<ColorModeContextType | undefined>(undefined);\n\n/**\n * Provides a shared context for the currently-active theme color mode, and sets\n * the data-color-mode attribute on the document element whenever it changes.\n */\nexport const ColorModeProvider: React.FC<ColorModeProviderProps> = ({\n  children,\n  defaultColorMode = 'light',\n}) => {\n  const [colorMode, setColorMode] = useState<ThemeColorMode>(defaultColorMode);\n\n  useEffect(() => {\n    console.log('ColorModeProvider', { colorMode });\n    document.documentElement.setAttribute('data-color-mode', colorMode);\n  }, [colorMode]);\n\n  return (\n    <ColorModeContext.Provider value={{ colorMode, setColorMode }}>\n      {children}\n    </ColorModeContext.Provider>\n  );\n};\n\n/**\n * Use this to query the active color mode, or to set it, e.g. with an effect\n * hook within a component which explicitly changes the active color mode:\n *\n * useEffect(() => {\n *   setColorMode(colorMode);\n * }, [colorMode]);\n *\n */\nexport const useColorMode = () => {\n  const context = useContext(ColorModeContext);\n\n  if (context === undefined) {\n    throw new Error('useColorMode must be used within a ColorModeProvider');\n  }\n\n  return context;\n};\n","import type { EventBus, GrafanaTheme2 } from '@grafana/data';\nimport { ThemeChangedEvent } from '@grafana/runtime';\nimport type { ThemeColorMode } from '@grafana/design-tokens';\nimport { useColorMode } from '../components/ColorModeProvider/ColorModeProvider';\n\nconst getThemeColorMode = (isLight: boolean): ThemeColorMode => {\n  return isLight ? 'light' : 'dark';\n};\n\nexport interface ColorModeChangeProps {\n  getAppEvents: () => EventBus;\n  useTheme2: () => GrafanaTheme2;\n}\n\n/**\n * This allows us to register an event listener for when the ThemeChangedEvent\n * is fired, and update the currently active color mode accordingly. It will\n * also determine the color mode on initial registration, and update the context\n * provider accordingly.\n */\nexport const useColorModeChange = ({\n  getAppEvents,\n  useTheme2,\n}: ColorModeChangeProps): ThemeColorMode => {\n  const { setColorMode } = useColorMode();\n  const appEvents = getAppEvents();\n\n  appEvents.subscribe<ThemeChangedEvent>(ThemeChangedEvent, ({ payload }) => {\n    const { isLight } = payload;\n    const newColorMode = getThemeColorMode(isLight);\n\n    console.log('ThemeChangedEvent', { colorMode: newColorMode });\n    setColorMode(newColorMode);\n  });\n\n  /**\n   * Longterm the current colorMode should ideally exist outside of useTheme2\n   */\n  const { isLight } = useTheme2();\n  const newColorMode = getThemeColorMode(isLight);\n  setColorMode(newColorMode);\n\n  return newColorMode;\n};\n","import React from 'react';\nimport { useColorModeChange, ColorModeChangeProps } from '../../hooks';\n\nexport type ColorModeWrapper = React.FC<ColorModeChangeProps & { children: React.ReactNode }>;\n\nexport const ColorModeChangeHandler: ColorModeWrapper = ({ children, getAppEvents, useTheme2 }) => {\n  useColorModeChange({ getAppEvents, useTheme2 });\n\n  return children;\n};\n","import { ColorModeWrapper, ColorModeChangeHandler } from '../ColorModeChangeHandler';\nimport { ColorModeProvider } from '../ColorModeProvider';\n\nexport const ColorMode: ColorModeWrapper = ({ children, getAppEvents, useTheme2 }) => {\n  return (\n    <ColorModeProvider>\n      <ColorModeChangeHandler getAppEvents={getAppEvents} useTheme2={useTheme2}>\n        {children}\n      </ColorModeChangeHandler>\n    </ColorModeProvider>\n  );\n};\n","/**\n * Number formatting options\n */\nexport interface FormatNumberOptions {\n  /** Decimal places (default: 2) */\n  decimals?: number;\n  /** Threshold for compact formatting (default: 1000) */\n  compactThreshold?: number;\n  /** Never use compact formatting (for precise displays) */\n  precise?: boolean;\n}\n\n/**\n * Format numbers with optional compact notation (k, m, b)\n * Components handle their own prefixes/suffixes ($ or %)\n *\n * @param value - The number to format (or 'loading' state)\n * @param options - Formatting options\n * @returns Formatted number string (no prefixes/suffixes)\n *\n * @example\n * formatNumber(1234) // \"1.2k\"\n * formatNumber(1234, { precise: true }) // \"1,234.00\"\n * formatNumber(1234, { decimals: 0 }) // \"1k\"\n * formatNumber(999) // \"999.00\"\n */\nexport const formatNumber = (\n  value: number | string | 'loading',\n  options: FormatNumberOptions = {},\n): string => {\n  const { decimals = 2, compactThreshold = 1000, precise = false } = options;\n\n  if (value === 'loading') {\n    return '';\n  }\n\n  const num = typeof value === 'string' ? parseFloat(value) : value;\n  if (isNaN(num)) {\n    return 'N/A';\n  }\n\n  const abs = Math.abs(num);\n\n  // Use compact notation if above threshold and not precise\n  if (!precise && abs >= compactThreshold) {\n    const sign = num < 0 ? '-' : '';\n    const absNum = Math.abs(num);\n    // Always use 1 decimal place for compact notation for consistency\n    if (absNum >= 1000000000) {\n      return `${sign}${(absNum / 1000000000).toFixed(1)}b`;\n    } else if (absNum >= 1000000) {\n      return `${sign}${(absNum / 1000000).toFixed(1)}m`;\n    } else if (absNum >= 1000) {\n      return `${sign}${(absNum / 1000).toFixed(1)}k`;\n    }\n  }\n\n  // Standard formatting with specified decimal places\n  return num.toLocaleString('en-US', {\n    minimumFractionDigits: decimals,\n    maximumFractionDigits: decimals,\n  });\n};\n","/**\n * Shared utility functions for handling comparison calculations across components\n */\n\nimport { formatNumber } from './formatters';\n\nexport interface ComparisonResult {\n  hasComparison: boolean;\n  direction: 'up' | 'down' | 'neutral';\n  percentageChange: number;\n  percentageLabel: string;\n}\n\n/**\n * Calculate comparison metrics between a current value and a baseline value\n * @param current - The current value to compare\n * @param baseline - The baseline value to compare against (optional)\n * @returns ComparisonResult object with calculated metrics\n */\nexport const calculateComparison = (\n  current: number | undefined | null,\n  baseline: number | undefined | null,\n): ComparisonResult => {\n  // If either value is missing, null, undefined, or baseline is 0, return neutral state\n  if (\n    current === undefined ||\n    current === null ||\n    baseline === undefined ||\n    baseline === null ||\n    baseline === 0\n  ) {\n    return {\n      hasComparison: false,\n      direction: 'neutral',\n      percentageChange: 0,\n      percentageLabel: '',\n    };\n  }\n\n  // If values are equal, return neutral state\n  if (current === baseline) {\n    return {\n      hasComparison: true,\n      direction: 'neutral',\n      percentageChange: 0,\n      percentageLabel: '0%',\n    };\n  }\n\n  // Calculate percentage change\n  const percentageChange = Math.abs(((current - baseline) / baseline) * 100);\n  const direction = current > baseline ? 'up' : 'down';\n\n  return {\n    hasComparison: true,\n    direction,\n    percentageChange,\n    percentageLabel: `${formatNumber(percentageChange, {\n      compactThreshold: 10000,\n      decimals: 2,\n    })}%`,\n  };\n};\n","import { css } from '@emotion/css';\nimport { getDesignTokens } from '@grafana/design-tokens';\n\nexport const getStyles = () => {\n  const {\n    legacy,\n    primitives: { spacing, typography },\n  } = getDesignTokens({ valueType: 'css' });\n  const backgroundColor = legacy.colors.background.primary;\n\n  return {\n    arrow: css({\n      fill: backgroundColor,\n    }),\n    shadow: css({\n      filter: `drop-shadow(${legacy.boxShadows.z2})`,\n    }),\n    container: css({\n      backgroundColor,\n      borderRadius: `calc(${legacy.borderRadius.md} + ${spacing.xs})`,\n      padding: spacing.xs,\n      color: legacy.colors.text.primary,\n      fontFamily: typography.fontFamily.ui,\n      fontSize: typography.fontSize.ui.sm,\n      fontWeight: typography.fontWeight.medium,\n    }),\n  };\n};\n","import { forwardRef, cloneElement, useCallback, useId, useRef, useState, JSX } from 'react';\nimport {\n  arrow,\n  autoUpdate,\n  flip,\n  FloatingArrow,\n  offset,\n  Placement,\n  safePolygon,\n  shift,\n  useDismiss,\n  useFloating,\n  useFocus,\n  useHover,\n  useInteractions,\n  useTransitionStyles,\n} from '@floating-ui/react';\nimport { Portal } from '@grafana/ui';\nimport { getStyles } from './Popover.styles';\n\nexport interface PopoverProps {\n  /**\n   * Content used to trigger the Popover being displayed\n   */\n  trigger: JSX.Element;\n\n  /**\n   * Content to render within the Popover\n   */\n  children: JSX.Element;\n  /**\n   * Should the popover be open? Implicitly means the popover visibility is\n   * controlled; if omitted, the popover target will control visibility\n   */\n  isOpen?: boolean;\n\n  /**\n   * Set to true if you want the tooltip to stay long enough so the user can\n   * move mouse over content to select text or click a link\n   */\n  isInteractive?: boolean;\n\n  /**\n   * Placement of the Popover relative to the trigger content\n   */\n  placement?: Placement;\n\n  /**\n   * Transition duration for hide/show effects, in milliseconds\n   */\n  transitionDuration?: number;\n\n  /**\n   * Additional delay before hiding the popover after mouseout, in milliseconds\n   */\n  hideDelay?: number;\n}\n\nconst POPOVER_OFFSET = 8;\n\nconst getMiddleware = ({\n  placement,\n  arrowRef,\n}: {\n  placement?: Placement;\n  arrowRef: React.RefObject<null>;\n}) => {\n  const BOUNDARY_ELEMENT_ID = 'floating-boundary';\n  const _flip = flip({\n    // Ensure we flip to the perpendicular axis if it doesn't fit\n    // on narrow viewports.\n    crossAxis: 'alignment',\n    fallbackAxisSideDirection: 'end',\n    boundary: document.getElementById(BOUNDARY_ELEMENT_ID) ?? undefined,\n  });\n\n  const middleware = placement?.includes('-') ? [_flip, shift()] : [shift(), _flip];\n\n  // the order of middleware is important!\n  // `arrow` should almost always be at the end\n  // see https://floating-ui.com/docs/arrow#order\n  return [\n    offset(POPOVER_OFFSET),\n    ...middleware,\n    arrow({\n      element: arrowRef,\n    }),\n  ];\n};\n\nexport const Popover = forwardRef<HTMLElement, PopoverProps>(\n  (\n    {\n      trigger,\n      children,\n      isOpen: isOpenControlled,\n      isInteractive = false,\n      placement = 'bottom',\n      transitionDuration = 200,\n      hideDelay = 500,\n    },\n    forwardedRef,\n  ) => {\n    const arrowRef = useRef(null);\n    const closeTimer = useRef<number | undefined>(undefined);\n    const popoverId = useId();\n    const [isOpenState, setOpen] = useState(isOpenControlled);\n    const [isDelayedOpen, setDelayedOpen] = useState(isOpenControlled);\n    const isOpen = isOpenControlled ?? isOpenState;\n    const middleware = getMiddleware({ placement, arrowRef });\n    const styles = getStyles();\n\n    const { context, refs, floatingStyles } = useFloating({\n      open: isOpen,\n      placement,\n      onOpenChange: (open) => {\n        setOpen(open);\n        clearTimeout(closeTimer.current);\n\n        if (!open) {\n          closeTimer.current = setTimeout(() => {\n            setDelayedOpen(open);\n          }, transitionDuration + hideDelay);\n        } else {\n          setDelayedOpen(open);\n        }\n      },\n      middleware,\n      whileElementsMounted: autoUpdate,\n    });\n\n    const { getReferenceProps, getFloatingProps } = useInteractions([\n      useDismiss(context),\n      useHover(context, {\n        handleClose: isInteractive ? safePolygon() : undefined,\n        move: false,\n        delay: {\n          open: 0,\n          close: hideDelay,\n        },\n      }),\n      useFocus(context),\n    ]);\n\n    const { styles: transitionStyles } = useTransitionStyles(context, {\n      duration: transitionDuration,\n      initial: ({ side }) => ({\n        opacity: 0,\n        transform:\n          side === 'top' || side === 'bottom'\n            ? `translateY(${POPOVER_OFFSET}px)`\n            : `translateX(${POPOVER_OFFSET}px)`,\n      }),\n      open: ({ side }) => ({\n        opacity: 1,\n        transform: side === 'top' || side === 'bottom' ? `translateY(0)` : `translateX(0)`,\n      }),\n      close: ({ side }) => ({\n        opacity: 0,\n        transform:\n          side === 'top' || side === 'bottom'\n            ? `translateY(${POPOVER_OFFSET}px)`\n            : `translateX(${POPOVER_OFFSET}px)`,\n      }),\n    });\n\n    const handleRef = useCallback(\n      (ref: HTMLElement | null) => {\n        refs.setReference(ref);\n\n        if (typeof forwardedRef === 'function') {\n          forwardedRef(ref);\n        } else if (forwardedRef) {\n          forwardedRef.current = ref;\n        }\n      },\n      [forwardedRef, refs],\n    );\n\n    return (\n      <>\n        {/* element to trigger displaying the popover */}\n        {cloneElement(trigger, {\n          ref: handleRef,\n          tabIndex: 0,\n          'aria-describedby': isOpen ? popoverId : undefined,\n          ...getReferenceProps(),\n        })}\n        {/* content to render inside the popover when open */}\n        {(isDelayedOpen || isOpen) && (\n          <Portal>\n            <div ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()}>\n              <div style={transitionStyles} className={styles.shadow}>\n                <FloatingArrow className={styles.arrow} ref={arrowRef} context={context} />\n                <div id={popoverId} role=\"tooltip\" className={styles.container}>\n                  {children}\n                </div>\n              </div>\n            </div>\n          </Portal>\n        )}\n      </>\n    );\n  },\n);\n\nPopover.displayName = 'Popover';\n","import { css } from '@emotion/css';\nimport { getDesignTokens } from '@grafana/design-tokens';\n\nexport const getStyles = () => {\n  const {\n    legacy,\n    primitives: { spacing, typography },\n  } = getDesignTokens({ valueType: 'css' });\n\n  return {\n    wrapper: css({\n      display: 'flex',\n      flexDirection: 'column',\n      gap: spacing.xs,\n    }),\n    heading: css({\n      padding: `${spacing.sm} ${spacing.md}`,\n      fontFamily: typography.fontFamily.ui,\n      fontSize: typography.fontSize.ui.sm,\n      fontWeight: typography.fontWeight.bold,\n      color: legacy.colors.text.primary,\n      background: legacy.colors.background.secondary,\n      borderRadius: legacy.borderRadius.md,\n    }),\n    content: css({\n      display: 'flex',\n      gap: spacing.xs,\n    }),\n    section: css({\n      display: 'flex',\n      flex: 1,\n      flexDirection: 'column',\n      justifyContent: 'flex-end',\n      gap: spacing.xs,\n      background: legacy.colors.background.secondary,\n      borderRadius: legacy.borderRadius.md,\n      padding: `${spacing.sm} ${spacing.md}`,\n    }),\n    sectionTitle: css({\n      fontFamily: typography.fontFamily.ui,\n      fontSize: typography.fontSize.ui.sm,\n      fontWeight: typography.fontWeight.medium,\n      color: legacy.colors.text.primary,\n      whiteSpace: 'nowrap',\n    }),\n    value: css({\n      display: 'flex',\n      alignItems: 'center',\n      gap: spacing.xs,\n      fontFamily: typography.fontFamily.monospace,\n      fontSize: typography.fontSize.monospace.sm,\n      color: legacy.colors.text.secondary,\n    }),\n    icon: css({\n      flexShrink: 0,\n    }),\n  };\n};\n","import { Icon, IconName } from '@grafana/ui';\nimport { Popover, PopoverProps } from '../Popover';\nimport { getStyles } from './ComparisonTooltip.styles';\n\nexport interface ComparisonTooltipProps extends Omit<PopoverProps, 'children'> {\n  current?: string;\n  previous?: string;\n  previousLabel?: string;\n  currentLabel?: string;\n  title?: string;\n  currentIcon?: IconName;\n  previousIcon?: IconName;\n  hideDelay?: number;\n}\n\nexport const ComparisonTooltip = ({\n  trigger,\n  placement = 'top',\n  current,\n  previous,\n  previousLabel,\n  currentLabel = 'Current',\n  title,\n  currentIcon = 'eye',\n  previousIcon = 'clock-nine',\n  hideDelay,\n}: ComparisonTooltipProps) => {\n  const styles = getStyles();\n\n  return (\n    <Popover trigger={trigger} placement={placement} hideDelay={hideDelay}>\n      <div className={styles.wrapper}>\n        {title && <div className={styles.heading}>{title}</div>}\n        <div className={styles.content}>\n          <div className={styles.section}>\n            <div className={styles.sectionTitle}>{currentLabel}</div>\n            <div className={styles.value}>\n              <Icon name={currentIcon} size=\"sm\" className={styles.icon} />\n              <span>{current || 'N/A'}</span>\n            </div>\n          </div>\n          <div className={styles.section}>\n            <div className={styles.sectionTitle}>{previousLabel}</div>\n            <div className={styles.value}>\n              <Icon name={previousIcon} size=\"sm\" className={styles.icon} />\n              <span>{previous || 'N/A'}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </Popover>\n  );\n};\n","import { css } from '@emotion/css';\nimport { CSSVariables, getDesignTokens } from '@grafana/design-tokens';\n\nexport const cssVariables = (): CSSVariables => {\n  const { legacy } = getDesignTokens({ valueType: 'css' });\n\n  return {\n    dark: {\n      'comparison-badge-icon-background-color': legacy.colors.background.secondary,\n      'comparison-badge-icon-highlight-background-color': legacy.palette.whiteBaseOpacity10,\n    },\n    light: {\n      'comparison-badge-icon-background-color': legacy.colors.background.canvas,\n      'comparison-badge-icon-highlight-background-color': legacy.palette.blackBaseOpacity8,\n    },\n  };\n};\n\nconst BADGE_HEIGHT = 28;\nconst TREND_ICON_SIZE = 20;\n\nexport const getComparisonBadgeStyles = ({\n  highlight,\n  direction,\n  tooltip,\n}: {\n  highlight: boolean;\n  direction: string;\n  tooltip?: boolean;\n}) => {\n  const {\n    legacy,\n    primitives: { spacing, typography },\n  } = getDesignTokens({ valueType: 'css' });\n\n  const labelColor = (() => {\n    switch (true) {\n      case highlight:\n      case direction === 'up':\n        return legacy.colors.text.maxContrast;\n      default:\n        return legacy.colors.primary.text;\n    }\n  })();\n\n  return {\n    container: css({\n      boxSizing: 'border-box',\n      background: 'transparent',\n      borderRadius: legacy.borderRadius.pill,\n      border: `1px solid\n        ${highlight ? legacy.colors.border.strong : legacy.colors.border.weak}`,\n      padding: `${spacing.xxs} ${spacing.sm} ${spacing.xxs} ${spacing.xxs}`,\n      textAlign: 'left',\n      display: 'inline-flex',\n      flexDirection: 'row',\n      justifyContent: 'center',\n      alignItems: 'center',\n      fontFamily: typography.fontFamily.ui,\n      fontSize: typography.fontSize.ui.sm,\n      height: `${BADGE_HEIGHT}px`,\n      position: 'relative',\n      transition: 'background 0.2s ease-in-out',\n      ...(tooltip\n        ? {\n            cursor: 'pointer',\n            '&:hover': {\n              background: legacy.colors.background.secondary,\n            },\n          }\n        : {}),\n    }),\n    clockIconWrapper: css({\n      background: highlight\n        ? 'var(--comparison-badge-icon-highlight-background-color)'\n        : 'var(--comparison-badge-icon-background-color)',\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      width: '22px',\n      height: '22px',\n      borderRadius: legacy.borderRadius.pill,\n      color: legacy.colors.text.primary,\n    }),\n    trendLabelContainer: css({\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center',\n      gap: spacing.xxs,\n      paddingLeft: spacing.xxs,\n      fontWeight: typography.fontWeight.medium,\n      whiteSpace: 'nowrap',\n    }),\n    trendLabel: css({\n      display: 'flex',\n      alignItems: 'center',\n      color: labelColor,\n      lineHeight: `${BADGE_HEIGHT}px`,\n      fontWeight: typography.fontWeight.medium,\n      fontVariantNumeric: 'tabular-nums',\n    }),\n    timeframeLabel: css({\n      color: highlight ? legacy.colors.text.maxContrast : legacy.colors.text.primary,\n      paddingLeft: spacing.xxs,\n      lineHeight: `${BADGE_HEIGHT}px`,\n      fontWeight: typography.fontWeight.normal,\n    }),\n    trendIconWrapper: css({\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      width: '16px',\n      height: '16px',\n    }),\n    trendIcon: css({\n      width: `${TREND_ICON_SIZE}px`,\n      height: `${TREND_ICON_SIZE}px`,\n    }),\n    dash: css({\n      color: legacy.colors.text.secondary,\n    }),\n  };\n};\n","import { cx } from '@emotion/css';\nimport { GlobalCSSVariables } from '@grafana/design-tokens';\nimport { Icon, IconName } from '@grafana/ui';\nimport { calculateComparison } from '../../utils/comparison';\nimport { formatNumber } from '../../utils/formatters';\nimport { ComparisonTooltipProps, ComparisonTooltip } from '../ComparisonTooltip';\nimport { cssVariables, getComparisonBadgeStyles } from './ComparisonBadge.styles';\n\nconst formatCurrency = (value: number | undefined | null): string => {\n  return !!value ? `$${formatNumber(value, { precise: true })}` : 'N/A';\n};\n\nexport interface ComparisonBadgeProps\n  extends Pick<ComparisonTooltipProps, 'currentLabel' | 'previousLabel' | 'placement'> {\n  current?: number | null;\n  previous?: number | null;\n  highlight?: boolean;\n  timeframeLabel?: string;\n  tooltip?: boolean;\n}\n\nconst DIRECTION_ICON: Record<'up' | 'down' | 'neutral', IconName> = {\n  up: 'arrow-up',\n  down: 'arrow-down',\n  neutral: 'minus',\n};\n\nexport const ComparisonBadge = ({\n  current,\n  previous,\n  currentLabel,\n  previousLabel,\n  placement,\n  highlight = false,\n  timeframeLabel,\n  tooltip = true,\n}: ComparisonBadgeProps) => {\n  const { direction, hasComparison, percentageLabel } = calculateComparison(current, previous);\n  const styles = getComparisonBadgeStyles({ highlight, direction, tooltip });\n\n  const directionIconStyle = (() => {\n    switch (true) {\n      case direction == 'neutral':\n        return styles.dash;\n      default:\n        return undefined;\n    }\n  })();\n\n  const badgeContent = (\n    <div className={styles.container}>\n      <div className={styles.clockIconWrapper}>\n        <Icon name=\"clock-nine\" />\n      </div>\n      <div className={styles.trendLabelContainer}>\n        <span className={styles.trendLabel}>\n          <span className={styles.trendIconWrapper}>\n            <Icon\n              name={DIRECTION_ICON[direction]}\n              className={cx(styles.trendIcon, directionIconStyle)}\n            />\n          </span>\n          {hasComparison && percentageLabel && <>{percentageLabel}</>}\n        </span>\n        {timeframeLabel && (\n          <span className={styles.timeframeLabel}>vs {timeframeLabel.toLowerCase()}</span>\n        )}\n      </div>\n    </div>\n  );\n\n  return (\n    <>\n      <GlobalCSSVariables variables={cssVariables()} defaultColorMode={null} />\n      {tooltip ? (\n        <ComparisonTooltip\n          trigger={badgeContent}\n          current={formatCurrency(current)}\n          previous={formatCurrency(previous)}\n          currentLabel={currentLabel}\n          previousLabel={previousLabel}\n          placement={placement}\n        />\n      ) : (\n        badgeContent\n      )}\n    </>\n  );\n};\n"],"names":["createContext","useState","useEffect","jsx","useContext","ThemeChangedEvent","isLight","newColorMode","getStyles","getDesignTokens","css","flip","shift","offset","arrow","forwardRef","useRef","useId","useFloating","autoUpdate","useInteractions","useDismiss","useHover","safePolygon","useFocus","useTransitionStyles","useCallback","jsxs","Fragment","cloneElement","Portal","FloatingArrow","Icon","cx","GlobalCSSVariables"],"mappings":"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"}

package/dist/cjs/index.d.cts

@@ -16,7 +16,7 @@ interface ColorModeChangeProps {
  * also determine the color mode on initial registration, and update the context
  * provider accordingly.
  */
-declare const useColorModeChange: ({ getAppEvents, useTheme2 }: ColorModeChangeProps) => void;
+declare const useColorModeChange: ({ getAppEvents, useTheme2, }: ColorModeChangeProps) => ThemeColorMode;
 
 type ColorModeWrapper = React__default.FC<ColorModeChangeProps & {
     children: React__default.ReactNode;

package/dist/esm/components/ComparisonBadge/ComparisonBadge.styles.js

@@ -75,7 +75,8 @@ const getComparisonBadgeStyles = ({
       alignItems: "center",
       gap: spacing.xxs,
       paddingLeft: spacing.xxs,
-      fontWeight: typography.fontWeight.medium
+      fontWeight: typography.fontWeight.medium,
+      whiteSpace: "nowrap"
     }),
     trendLabel: css({
       display: "flex",

package/dist/esm/components/ComparisonBadge/ComparisonBadge.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComparisonBadge.styles.js","sources":["../../../../src/components/ComparisonBadge/ComparisonBadge.styles.ts"],"sourcesContent":["import { css } from '@emotion/css';\nimport { CSSVariables, getDesignTokens } from '@grafana/design-tokens';\n\nexport const cssVariables = (): CSSVariables => {\n  const { legacy } = getDesignTokens({ valueType: 'css' });\n\n  return {\n    dark: {\n      'comparison-badge-icon-background-color': legacy.colors.background.secondary,\n      'comparison-badge-icon-highlight-background-color': legacy.palette.whiteBaseOpacity10,\n    },\n    light: {\n      'comparison-badge-icon-background-color': legacy.colors.background.canvas,\n      'comparison-badge-icon-highlight-background-color': legacy.palette.blackBaseOpacity8,\n    },\n  };\n};\n\nconst BADGE_HEIGHT = 28;\nconst TREND_ICON_SIZE = 20;\n\nexport const getComparisonBadgeStyles = ({\n  highlight,\n  direction,\n  tooltip,\n}: {\n  highlight: boolean;\n  direction: string;\n  tooltip?: boolean;\n}) => {\n  const {\n    legacy,\n    primitives: { spacing, typography },\n  } = getDesignTokens({ valueType: 'css' });\n\n  const labelColor = (() => {\n    switch (true) {\n      case highlight:\n      case direction === 'up':\n        return legacy.colors.text.maxContrast;\n      default:\n        return legacy.colors.primary.text;\n    }\n  })();\n\n  return {\n    container: css({\n      boxSizing: 'border-box',\n      background: 'transparent',\n      borderRadius: legacy.borderRadius.pill,\n      border: `1px solid\n        ${highlight ? legacy.colors.border.strong : legacy.colors.border.weak}`,\n      padding: `${spacing.xxs} ${spacing.sm} ${spacing.xxs} ${spacing.xxs}`,\n      textAlign: 'left',\n      display: 'inline-flex',\n      flexDirection: 'row',\n      justifyContent: 'center',\n      alignItems: 'center',\n      fontFamily: typography.fontFamily.ui,\n      fontSize: typography.fontSize.ui.sm,\n      height: `${BADGE_HEIGHT}px`,\n      position: 'relative',\n      transition: 'background 0.2s ease-in-out',\n      ...(tooltip\n        ? {\n            cursor: 'pointer',\n            '&:hover': {\n              background: legacy.colors.background.secondary,\n            },\n          }\n        : {}),\n    }),\n    clockIconWrapper: css({\n      background: highlight\n        ? 'var(--comparison-badge-icon-highlight-background-color)'\n        : 'var(--comparison-badge-icon-background-color)',\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      width: '22px',\n      height: '22px',\n      borderRadius: legacy.borderRadius.pill,\n      color: legacy.colors.text.primary,\n    }),\n    trendLabelContainer: css({\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center',\n      gap: spacing.xxs,\n      paddingLeft: spacing.xxs,\n      fontWeight: typography.fontWeight.medium,\n    }),\n    trendLabel: css({\n      display: 'flex',\n      alignItems: 'center',\n      color: labelColor,\n      lineHeight: `${BADGE_HEIGHT}px`,\n      fontWeight: typography.fontWeight.medium,\n      fontVariantNumeric: 'tabular-nums',\n    }),\n    timeframeLabel: css({\n      color: highlight ? legacy.colors.text.maxContrast : legacy.colors.text.primary,\n      paddingLeft: spacing.xxs,\n      lineHeight: `${BADGE_HEIGHT}px`,\n      fontWeight: typography.fontWeight.normal,\n    }),\n    trendIconWrapper: css({\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      width: '16px',\n      height: '16px',\n    }),\n    trendIcon: css({\n      width: `${TREND_ICON_SIZE}px`,\n      height: `${TREND_ICON_SIZE}px`,\n    }),\n    dash: css({\n      color: legacy.colors.text.secondary,\n    }),\n  };\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ComparisonBadge.styles.js","sources":["../../../../src/components/ComparisonBadge/ComparisonBadge.styles.ts"],"sourcesContent":["import { css } from '@emotion/css';\nimport { CSSVariables, getDesignTokens } from '@grafana/design-tokens';\n\nexport const cssVariables = (): CSSVariables => {\n  const { legacy } = getDesignTokens({ valueType: 'css' });\n\n  return {\n    dark: {\n      'comparison-badge-icon-background-color': legacy.colors.background.secondary,\n      'comparison-badge-icon-highlight-background-color': legacy.palette.whiteBaseOpacity10,\n    },\n    light: {\n      'comparison-badge-icon-background-color': legacy.colors.background.canvas,\n      'comparison-badge-icon-highlight-background-color': legacy.palette.blackBaseOpacity8,\n    },\n  };\n};\n\nconst BADGE_HEIGHT = 28;\nconst TREND_ICON_SIZE = 20;\n\nexport const getComparisonBadgeStyles = ({\n  highlight,\n  direction,\n  tooltip,\n}: {\n  highlight: boolean;\n  direction: string;\n  tooltip?: boolean;\n}) => {\n  const {\n    legacy,\n    primitives: { spacing, typography },\n  } = getDesignTokens({ valueType: 'css' });\n\n  const labelColor = (() => {\n    switch (true) {\n      case highlight:\n      case direction === 'up':\n        return legacy.colors.text.maxContrast;\n      default:\n        return legacy.colors.primary.text;\n    }\n  })();\n\n  return {\n    container: css({\n      boxSizing: 'border-box',\n      background: 'transparent',\n      borderRadius: legacy.borderRadius.pill,\n      border: `1px solid\n        ${highlight ? legacy.colors.border.strong : legacy.colors.border.weak}`,\n      padding: `${spacing.xxs} ${spacing.sm} ${spacing.xxs} ${spacing.xxs}`,\n      textAlign: 'left',\n      display: 'inline-flex',\n      flexDirection: 'row',\n      justifyContent: 'center',\n      alignItems: 'center',\n      fontFamily: typography.fontFamily.ui,\n      fontSize: typography.fontSize.ui.sm,\n      height: `${BADGE_HEIGHT}px`,\n      position: 'relative',\n      transition: 'background 0.2s ease-in-out',\n      ...(tooltip\n        ? {\n            cursor: 'pointer',\n            '&:hover': {\n              background: legacy.colors.background.secondary,\n            },\n          }\n        : {}),\n    }),\n    clockIconWrapper: css({\n      background: highlight\n        ? 'var(--comparison-badge-icon-highlight-background-color)'\n        : 'var(--comparison-badge-icon-background-color)',\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      width: '22px',\n      height: '22px',\n      borderRadius: legacy.borderRadius.pill,\n      color: legacy.colors.text.primary,\n    }),\n    trendLabelContainer: css({\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center',\n      gap: spacing.xxs,\n      paddingLeft: spacing.xxs,\n      fontWeight: typography.fontWeight.medium,\n      whiteSpace: 'nowrap',\n    }),\n    trendLabel: css({\n      display: 'flex',\n      alignItems: 'center',\n      color: labelColor,\n      lineHeight: `${BADGE_HEIGHT}px`,\n      fontWeight: typography.fontWeight.medium,\n      fontVariantNumeric: 'tabular-nums',\n    }),\n    timeframeLabel: css({\n      color: highlight ? legacy.colors.text.maxContrast : legacy.colors.text.primary,\n      paddingLeft: spacing.xxs,\n      lineHeight: `${BADGE_HEIGHT}px`,\n      fontWeight: typography.fontWeight.normal,\n    }),\n    trendIconWrapper: css({\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      width: '16px',\n      height: '16px',\n    }),\n    trendIcon: css({\n      width: `${TREND_ICON_SIZE}px`,\n      height: `${TREND_ICON_SIZE}px`,\n    }),\n    dash: css({\n      color: legacy.colors.text.secondary,\n    }),\n  };\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/components/ComparisonTooltip/ComparisonTooltip.styles.js

@@ -33,8 +33,7 @@ const getStyles = () => {
       gap: spacing.xs,
       background: legacy.colors.background.secondary,
       borderRadius: legacy.borderRadius.md,
-      padding: `${spacing.sm} ${spacing.md}`,
-      minWidth: `80px`
+      padding: `${spacing.sm} ${spacing.md}`
     }),
     sectionTitle: css({
       fontFamily: typography.fontFamily.ui,

package/dist/esm/components/ComparisonTooltip/ComparisonTooltip.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComparisonTooltip.styles.js","sources":["../../../../src/components/ComparisonTooltip/ComparisonTooltip.styles.ts"],"sourcesContent":["import { css } from '@emotion/css';\nimport { getDesignTokens } from '@grafana/design-tokens';\n\nexport const getStyles = () => {\n  const {\n    legacy,\n    primitives: { spacing, typography },\n  } = getDesignTokens({ valueType: 'css' });\n\n  return {\n    wrapper: css({\n      display: 'flex',\n      flexDirection: 'column',\n      gap: spacing.xs,\n    }),\n    heading: css({\n      padding: `${spacing.sm} ${spacing.md}`,\n      fontFamily: typography.fontFamily.ui,\n      fontSize: typography.fontSize.ui.sm,\n      fontWeight: typography.fontWeight.bold,\n      color: legacy.colors.text.primary,\n      background: legacy.colors.background.secondary,\n      borderRadius: legacy.borderRadius.md,\n    }),\n    content: css({\n      display: 'flex',\n      gap: spacing.xs,\n    }),\n    section: css({\n      display: 'flex',\n      flex: 1,\n      flexDirection: 'column',\n      justifyContent: 'flex-end',\n      gap: spacing.xs,\n      background: legacy.colors.background.secondary,\n      borderRadius: legacy.borderRadius.md,\n      padding: `${spacing.sm} ${spacing.md}`,\n      minWidth: `80px`,\n    }),\n    sectionTitle: css({\n      fontFamily: typography.fontFamily.ui,\n      fontSize: typography.fontSize.ui.sm,\n      fontWeight: typography.fontWeight.medium,\n      color: legacy.colors.text.primary,\n      whiteSpace: 'nowrap',\n    }),\n    value: css({\n      display: 'flex',\n      alignItems: 'center',\n      gap: spacing.xs,\n      fontFamily: typography.fontFamily.monospace,\n      fontSize: typography.fontSize.monospace.sm,\n      color: legacy.colors.text.secondary,\n    }),\n    icon: css({\n      flexShrink: 0,\n    }),\n  };\n};\n"],"names":[],"mappings":";;;AAGO,MAAM,YAAY,MAAM;AAC7B,EAAA,MAAM;AAAA,IACJ,MAAA;AAAA,IACA,UAAA,EAAY,EAAE,OAAA,EAAS,UAAA;AAAW,GACpC,GAAI,eAAA,CAAgB,EAAE,SAAA,EAAW,OAAO,CAAA;AAExC,EAAA,OAAO;AAAA,IACL,SAAS,GAAA,CAAI;AAAA,MACX,OAAA,EAAS,MAAA;AAAA,MACT,aAAA,EAAe,QAAA;AAAA,MACf,KAAK,OAAA,CAAQ;AAAA,KACd,CAAA;AAAA,IACD,SAAS,GAAA,CAAI;AAAA,MACX,SAAS,CAAA,EAAG,OAAA,CAAQ,EAAE,CAAA,CAAA,EAAI,QAAQ,EAAE,CAAA,CAAA;AAAA,MACpC,UAAA,EAAY,WAAW,UAAA,CAAW,EAAA;AAAA,MAClC,QAAA,EAAU,UAAA,CAAW,QAAA,CAAS,EAAA,CAAG,EAAA;AAAA,MACjC,UAAA,EAAY,WAAW,UAAA,CAAW,IAAA;AAAA,MAClC,KAAA,EAAO,MAAA,CAAO,MAAA,CAAO,IAAA,CAAK,OAAA;AAAA,MAC1B,UAAA,EAAY,MAAA,CAAO,MAAA,CAAO,UAAA,CAAW,SAAA;AAAA,MACrC,YAAA,EAAc,OAAO,YAAA,CAAa;AAAA,KACnC,CAAA;AAAA,IACD,SAAS,GAAA,CAAI;AAAA,MACX,OAAA,EAAS,MAAA;AAAA,MACT,KAAK,OAAA,CAAQ;AAAA,KACd,CAAA;AAAA,IACD,SAAS,GAAA,CAAI;AAAA,MACX,OAAA,EAAS,MAAA;AAAA,MACT,IAAA,EAAM,CAAA;AAAA,MACN,aAAA,EAAe,QAAA;AAAA,MACf,cAAA,EAAgB,UAAA;AAAA,MAChB,KAAK,OAAA,CAAQ,EAAA;AAAA,MACb,UAAA,EAAY,MAAA,CAAO,MAAA,CAAO,UAAA,CAAW,SAAA;AAAA,MACrC,YAAA,EAAc,OAAO,YAAA,CAAa,EAAA;AAAA,MAClC,SAAS,CAAA,EAAG,OAAA,CAAQ,EAAE,CAAA,CAAA,EAAI,QAAQ,EAAE,CAAA,CAAA;AAAA,MACpC,QAAA,EAAU,CAAA,IAAA;AAAA,KACX,CAAA;AAAA,IACD,cAAc,GAAA,CAAI;AAAA,MAChB,UAAA,EAAY,WAAW,UAAA,CAAW,EAAA;AAAA,MAClC,QAAA,EAAU,UAAA,CAAW,QAAA,CAAS,EAAA,CAAG,EAAA;AAAA,MACjC,UAAA,EAAY,WAAW,UAAA,CAAW,MAAA;AAAA,MAClC,KAAA,EAAO,MAAA,CAAO,MAAA,CAAO,IAAA,CAAK,OAAA;AAAA,MAC1B,UAAA,EAAY;AAAA,KACb,CAAA;AAAA,IACD,OAAO,GAAA,CAAI;AAAA,MACT,OAAA,EAAS,MAAA;AAAA,MACT,UAAA,EAAY,QAAA;AAAA,MACZ,KAAK,OAAA,CAAQ,EAAA;AAAA,MACb,UAAA,EAAY,WAAW,UAAA,CAAW,SAAA;AAAA,MAClC,QAAA,EAAU,UAAA,CAAW,QAAA,CAAS,SAAA,CAAU,EAAA;AAAA,MACxC,KAAA,EAAO,MAAA,CAAO,MAAA,CAAO,IAAA,CAAK;AAAA,KAC3B,CAAA;AAAA,IACD,MAAM,GAAA,CAAI;AAAA,MACR,UAAA,EAAY;AAAA,KACb;AAAA,GACH;AACF;;;;"}
+{"version":3,"file":"ComparisonTooltip.styles.js","sources":["../../../../src/components/ComparisonTooltip/ComparisonTooltip.styles.ts"],"sourcesContent":["import { css } from '@emotion/css';\nimport { getDesignTokens } from '@grafana/design-tokens';\n\nexport const getStyles = () => {\n  const {\n    legacy,\n    primitives: { spacing, typography },\n  } = getDesignTokens({ valueType: 'css' });\n\n  return {\n    wrapper: css({\n      display: 'flex',\n      flexDirection: 'column',\n      gap: spacing.xs,\n    }),\n    heading: css({\n      padding: `${spacing.sm} ${spacing.md}`,\n      fontFamily: typography.fontFamily.ui,\n      fontSize: typography.fontSize.ui.sm,\n      fontWeight: typography.fontWeight.bold,\n      color: legacy.colors.text.primary,\n      background: legacy.colors.background.secondary,\n      borderRadius: legacy.borderRadius.md,\n    }),\n    content: css({\n      display: 'flex',\n      gap: spacing.xs,\n    }),\n    section: css({\n      display: 'flex',\n      flex: 1,\n      flexDirection: 'column',\n      justifyContent: 'flex-end',\n      gap: spacing.xs,\n      background: legacy.colors.background.secondary,\n      borderRadius: legacy.borderRadius.md,\n      padding: `${spacing.sm} ${spacing.md}`,\n    }),\n    sectionTitle: css({\n      fontFamily: typography.fontFamily.ui,\n      fontSize: typography.fontSize.ui.sm,\n      fontWeight: typography.fontWeight.medium,\n      color: legacy.colors.text.primary,\n      whiteSpace: 'nowrap',\n    }),\n    value: css({\n      display: 'flex',\n      alignItems: 'center',\n      gap: spacing.xs,\n      fontFamily: typography.fontFamily.monospace,\n      fontSize: typography.fontSize.monospace.sm,\n      color: legacy.colors.text.secondary,\n    }),\n    icon: css({\n      flexShrink: 0,\n    }),\n  };\n};\n"],"names":[],"mappings":";;;AAGO,MAAM,YAAY,MAAM;AAC7B,EAAA,MAAM;AAAA,IACJ,MAAA;AAAA,IACA,UAAA,EAAY,EAAE,OAAA,EAAS,UAAA;AAAW,GACpC,GAAI,eAAA,CAAgB,EAAE,SAAA,EAAW,OAAO,CAAA;AAExC,EAAA,OAAO;AAAA,IACL,SAAS,GAAA,CAAI;AAAA,MACX,OAAA,EAAS,MAAA;AAAA,MACT,aAAA,EAAe,QAAA;AAAA,MACf,KAAK,OAAA,CAAQ;AAAA,KACd,CAAA;AAAA,IACD,SAAS,GAAA,CAAI;AAAA,MACX,SAAS,CAAA,EAAG,OAAA,CAAQ,EAAE,CAAA,CAAA,EAAI,QAAQ,EAAE,CAAA,CAAA;AAAA,MACpC,UAAA,EAAY,WAAW,UAAA,CAAW,EAAA;AAAA,MAClC,QAAA,EAAU,UAAA,CAAW,QAAA,CAAS,EAAA,CAAG,EAAA;AAAA,MACjC,UAAA,EAAY,WAAW,UAAA,CAAW,IAAA;AAAA,MAClC,KAAA,EAAO,MAAA,CAAO,MAAA,CAAO,IAAA,CAAK,OAAA;AAAA,MAC1B,UAAA,EAAY,MAAA,CAAO,MAAA,CAAO,UAAA,CAAW,SAAA;AAAA,MACrC,YAAA,EAAc,OAAO,YAAA,CAAa;AAAA,KACnC,CAAA;AAAA,IACD,SAAS,GAAA,CAAI;AAAA,MACX,OAAA,EAAS,MAAA;AAAA,MACT,KAAK,OAAA,CAAQ;AAAA,KACd,CAAA;AAAA,IACD,SAAS,GAAA,CAAI;AAAA,MACX,OAAA,EAAS,MAAA;AAAA,MACT,IAAA,EAAM,CAAA;AAAA,MACN,aAAA,EAAe,QAAA;AAAA,MACf,cAAA,EAAgB,UAAA;AAAA,MAChB,KAAK,OAAA,CAAQ,EAAA;AAAA,MACb,UAAA,EAAY,MAAA,CAAO,MAAA,CAAO,UAAA,CAAW,SAAA;AAAA,MACrC,YAAA,EAAc,OAAO,YAAA,CAAa,EAAA;AAAA,MAClC,SAAS,CAAA,EAAG,OAAA,CAAQ,EAAE,CAAA,CAAA,EAAI,QAAQ,EAAE,CAAA;AAAA,KACrC,CAAA;AAAA,IACD,cAAc,GAAA,CAAI;AAAA,MAChB,UAAA,EAAY,WAAW,UAAA,CAAW,EAAA;AAAA,MAClC,QAAA,EAAU,UAAA,CAAW,QAAA,CAAS,EAAA,CAAG,EAAA;AAAA,MACjC,UAAA,EAAY,WAAW,UAAA,CAAW,MAAA;AAAA,MAClC,KAAA,EAAO,MAAA,CAAO,MAAA,CAAO,IAAA,CAAK,OAAA;AAAA,MAC1B,UAAA,EAAY;AAAA,KACb,CAAA;AAAA,IACD,OAAO,GAAA,CAAI;AAAA,MACT,OAAA,EAAS,MAAA;AAAA,MACT,UAAA,EAAY,QAAA;AAAA,MACZ,KAAK,OAAA,CAAQ,EAAA;AAAA,MACb,UAAA,EAAY,WAAW,UAAA,CAAW,SAAA;AAAA,MAClC,QAAA,EAAU,UAAA,CAAW,QAAA,CAAS,SAAA,CAAU,EAAA;AAAA,MACxC,KAAA,EAAO,MAAA,CAAO,MAAA,CAAO,IAAA,CAAK;AAAA,KAC3B,CAAA;AAAA,IACD,MAAM,GAAA,CAAI;AAAA,MACR,UAAA,EAAY;AAAA,KACb;AAAA,GACH;AACF;;;;"}

package/dist/esm/hooks/useColorModeChange.js

@@ -4,7 +4,10 @@ import { useColorMode } from '../components/ColorModeProvider/ColorModeProvider.
 const getThemeColorMode = (isLight) => {
   return isLight ? "light" : "dark";
 };
-const useColorModeChange = ({ getAppEvents, useTheme2 }) => {
+const useColorModeChange = ({
+  getAppEvents,
+  useTheme2
+}) => {
   const { setColorMode } = useColorMode();
   const appEvents = getAppEvents();
   appEvents.subscribe(ThemeChangedEvent, ({ payload }) => {
@@ -16,6 +19,7 @@ const useColorModeChange = ({ getAppEvents, useTheme2 }) => {
   const { isLight } = useTheme2();
   const newColorMode = getThemeColorMode(isLight);
   setColorMode(newColorMode);
+  return newColorMode;
 };
 
 export { useColorModeChange };

package/dist/esm/hooks/useColorModeChange.js.map

@@ -1 +1 @@
-{"version":3,"file":"useColorModeChange.js","sources":["../../../src/hooks/useColorModeChange.ts"],"sourcesContent":["import type { EventBus, GrafanaTheme2 } from '@grafana/data';\nimport { ThemeChangedEvent } from '@grafana/runtime';\nimport type { ThemeColorMode } from '@grafana/design-tokens';\nimport { useColorMode } from '../components/ColorModeProvider/ColorModeProvider';\n\nconst getThemeColorMode = (isLight: boolean): ThemeColorMode => {\n  return isLight ? 'light' : 'dark';\n};\n\nexport interface ColorModeChangeProps {\n  getAppEvents: () => EventBus;\n  useTheme2: () => GrafanaTheme2;\n}\n\n/**\n * This allows us to register an event listener for when the ThemeChangedEvent\n * is fired, and update the currently active color mode accordingly. It will\n * also determine the color mode on initial registration, and update the context\n * provider accordingly.\n */\nexport const useColorModeChange = ({ getAppEvents, useTheme2 }: ColorModeChangeProps) => {\n  const { setColorMode } = useColorMode();\n  const appEvents = getAppEvents();\n\n  appEvents.subscribe<ThemeChangedEvent>(ThemeChangedEvent, ({ payload }) => {\n    const { isLight } = payload;\n    const newColorMode = getThemeColorMode(isLight);\n\n    console.log('ThemeChangedEvent', { colorMode: newColorMode });\n    setColorMode(newColorMode);\n  });\n\n  /**\n   * Longterm the current colorMode should ideally exist outside of useTheme2\n   */\n  const { isLight } = useTheme2();\n  const newColorMode = getThemeColorMode(isLight);\n  setColorMode(newColorMode);\n};\n"],"names":["isLight","newColorMode"],"mappings":";;;AAKA,MAAM,iBAAA,GAAoB,CAAC,OAAA,KAAqC;AAC9D,EAAA,OAAO,UAAU,OAAA,GAAU,MAAA;AAC7B,CAAA;AAaO,MAAM,kBAAA,GAAqB,CAAC,EAAE,YAAA,EAAc,WAAU,KAA4B;AACvF,EAAA,MAAM,EAAE,YAAA,EAAa,GAAI,YAAA,EAAa;AACtC,EAAA,MAAM,YAAY,YAAA,EAAa;AAE/B,EAAA,SAAA,CAAU,SAAA,CAA6B,iBAAA,EAAmB,CAAC,EAAE,SAAQ,KAAM;AACzE,IAAA,MAAM,EAAE,OAAA,EAAAA,QAAAA,EAAQ,GAAI,OAAA;AACpB,IAAA,MAAMC,aAAAA,GAAe,kBAAkBD,QAAO,CAAA;AAE9C,IAAA,OAAA,CAAQ,GAAA,CAAI,mBAAA,EAAqB,EAAE,SAAA,EAAWC,eAAc,CAAA;AAC5D,IAAA,YAAA,CAAaA,aAAY,CAAA;AAAA,EAC3B,CAAC,CAAA;AAKD,EAAA,MAAM,EAAE,OAAA,EAAQ,GAAI,SAAA,EAAU;AAC9B,EAAA,MAAM,YAAA,GAAe,kBAAkB,OAAO,CAAA;AAC9C,EAAA,YAAA,CAAa,YAAY,CAAA;AAC3B;;;;"}
+{"version":3,"file":"useColorModeChange.js","sources":["../../../src/hooks/useColorModeChange.ts"],"sourcesContent":["import type { EventBus, GrafanaTheme2 } from '@grafana/data';\nimport { ThemeChangedEvent } from '@grafana/runtime';\nimport type { ThemeColorMode } from '@grafana/design-tokens';\nimport { useColorMode } from '../components/ColorModeProvider/ColorModeProvider';\n\nconst getThemeColorMode = (isLight: boolean): ThemeColorMode => {\n  return isLight ? 'light' : 'dark';\n};\n\nexport interface ColorModeChangeProps {\n  getAppEvents: () => EventBus;\n  useTheme2: () => GrafanaTheme2;\n}\n\n/**\n * This allows us to register an event listener for when the ThemeChangedEvent\n * is fired, and update the currently active color mode accordingly. It will\n * also determine the color mode on initial registration, and update the context\n * provider accordingly.\n */\nexport const useColorModeChange = ({\n  getAppEvents,\n  useTheme2,\n}: ColorModeChangeProps): ThemeColorMode => {\n  const { setColorMode } = useColorMode();\n  const appEvents = getAppEvents();\n\n  appEvents.subscribe<ThemeChangedEvent>(ThemeChangedEvent, ({ payload }) => {\n    const { isLight } = payload;\n    const newColorMode = getThemeColorMode(isLight);\n\n    console.log('ThemeChangedEvent', { colorMode: newColorMode });\n    setColorMode(newColorMode);\n  });\n\n  /**\n   * Longterm the current colorMode should ideally exist outside of useTheme2\n   */\n  const { isLight } = useTheme2();\n  const newColorMode = getThemeColorMode(isLight);\n  setColorMode(newColorMode);\n\n  return newColorMode;\n};\n"],"names":["isLight","newColorMode"],"mappings":";;;AAKA,MAAM,iBAAA,GAAoB,CAAC,OAAA,KAAqC;AAC9D,EAAA,OAAO,UAAU,OAAA,GAAU,MAAA;AAC7B,CAAA;AAaO,MAAM,qBAAqB,CAAC;AAAA,EACjC,YAAA;AAAA,EACA;AACF,CAAA,KAA4C;AAC1C,EAAA,MAAM,EAAE,YAAA,EAAa,GAAI,YAAA,EAAa;AACtC,EAAA,MAAM,YAAY,YAAA,EAAa;AAE/B,EAAA,SAAA,CAAU,SAAA,CAA6B,iBAAA,EAAmB,CAAC,EAAE,SAAQ,KAAM;AACzE,IAAA,MAAM,EAAE,OAAA,EAAAA,QAAAA,EAAQ,GAAI,OAAA;AACpB,IAAA,MAAMC,aAAAA,GAAe,kBAAkBD,QAAO,CAAA;AAE9C,IAAA,OAAA,CAAQ,GAAA,CAAI,mBAAA,EAAqB,EAAE,SAAA,EAAWC,eAAc,CAAA;AAC5D,IAAA,YAAA,CAAaA,aAAY,CAAA;AAAA,EAC3B,CAAC,CAAA;AAKD,EAAA,MAAM,EAAE,OAAA,EAAQ,GAAI,SAAA,EAAU;AAC9B,EAAA,MAAM,YAAA,GAAe,kBAAkB,OAAO,CAAA;AAC9C,EAAA,YAAA,CAAa,YAAY,CAAA;AAEzB,EAAA,OAAO,YAAA;AACT;;;;"}

package/dist/esm/index.d.ts

@@ -16,7 +16,7 @@ interface ColorModeChangeProps {
  * also determine the color mode on initial registration, and update the context
  * provider accordingly.
  */
-declare const useColorModeChange: ({ getAppEvents, useTheme2 }: ColorModeChangeProps) => void;
+declare const useColorModeChange: ({ getAppEvents, useTheme2, }: ColorModeChangeProps) => ThemeColorMode;
 
 type ColorModeWrapper = React__default.FC<ColorModeChangeProps & {
     children: React__default.ReactNode;

package/package.json

@@ -2,7 +2,7 @@
   "author": "Grafana Labs",
   "name": "@grafana/components",
   "license": "Apache-2.0",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "Product Design Engineering Components for Grafana",
   "repository": {
     "type": "git",
@@ -47,7 +47,7 @@
     "build:publish": "yarn lint && yarn build && npm publish",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "login": "npm adduser"
+    "npm:login": "npm adduser"
   },
   "publishConfig": {
     "access": "public"