@grafana/components 0.0.21 → 0.0.23

package/dist/cjs/index.cjs

@@ -735,13 +735,16 @@ const getStyles$2 = (index) => {
 const defaultContentFormatter$1 = ({
   value,
   colorClassName
-}) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: colorClassName, children: [
-    value.toFixed(1),
-    "%"
-  ] }),
-  " of total usage"
-] });
+}) => {
+  const valueString = value < 0.1 ? "< 0.1" : `${value.toFixed(1)}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: colorClassName, children: [
+      valueString,
+      "%"
+    ] }),
+    " of total usage"
+  ] });
+};
 const StackedChartSegmentTooltip = ({
   trigger,
   placement = "top",
@@ -845,25 +848,7 @@ const StackedChartNoData = ({
   ] });
 };
 
-class StackedChartErrorBoundary extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { hasError: false };
-  }
-  static getDerivedStateFromError() {
-    return { hasError: true };
-  }
-  componentDidCatch(error, errorInfo) {
-    console.error("StackedChart rendering error:", error, errorInfo);
-  }
-  render() {
-    if (this.state.hasError) {
-      return /* @__PURE__ */ jsxRuntime.jsx(StackedChartNoData, { height: this.props.height });
-    }
-    return this.props.children;
-  }
-}
-const StackedChartInner = ({
+const StackedChart = ({
   categories,
   highlightedCategoryId: initialHighlightedCategoryId,
   isSkeleton = false,
@@ -939,7 +924,6 @@ const StackedChartInner = ({
   const content = /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.container, children: sortedCategoryIds.map((categoryId, categoryIndex) => {
     const category = categories[categoryId];
     const ref = React.useRef(null);
-    if (categoryId === initialHighlightedCategoryId) highlightedSegmentRef = ref;
     const segmentState = (() => {
       switch (true) {
         /**
@@ -993,6 +977,10 @@ const StackedChartInner = ({
       },
       categoryId
     );
+    if (categoryId === initialHighlightedCategoryId) highlightedSegmentRef = ref;
+    if (!ref.current) {
+      console.log(categoryId, "ref is unset", ref);
+    }
     return initialHighlightedCategoryId ? segment : /* @__PURE__ */ jsxRuntime.jsx(
       StackedChartSegmentTooltip,
       {
@@ -1015,9 +1003,6 @@ const StackedChartInner = ({
     }
   ) : content;
 };
-const StackedChart = (props) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(StackedChartErrorBoundary, { height: props.height || STACKED_CHART_DEFAULT_HEIGHT, children: /* @__PURE__ */ jsxRuntime.jsx(StackedChartInner, { ...props }) });
-};
 
 exports.ColorMode = ColorMode;
 exports.ColorModeChangeHandler = ColorModeChangeHandler;

package/dist/cjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../node_modules/@grafana/runtime/dist/esm/services/appEvents.mjs","../../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","../../src/components/GenericSkeleton/GenericSkeleton.styles.ts","../../src/components/GenericSkeleton/GenericSkeleton.tsx","../../src/components/StackedChart/shared.styles.ts","../../src/components/StackedChartSegment/StackedChartSegment.styles.ts","../../src/components/StackedChartSegment/StackedChartSegment.tsx","../../src/components/StackedChart/StackedChart.styles.ts","../../src/components/StackedChartSegmentTooltip/StackedChartSegmentTooltip.styles.ts","../../src/components/StackedChartSegmentTooltip/StackedChartSegmentTooltip.tsx","../../src/components/StackedChartSkeleton/StackedChartSkeleton.styles.ts","../../src/components/StackedChart/common.ts","../../src/components/StackedChartSkeleton/StackedChartSkeleton.tsx","../../src/components/StackedChartNoData/StackedChartNoData.styles.ts","../../src/components/StackedChartNoData/StackedChartNoData.tsx","../../src/components/StackedChart/StackedChart.tsx"],"sourcesContent":["import { BusEventBase, BusEventWithPayload } from '@grafana/data';\n\nclass RefreshEvent extends BusEventBase {\n}\nRefreshEvent.type = \"refresh\";\nclass ThemeChangedEvent extends BusEventWithPayload {\n}\nThemeChangedEvent.type = \"theme-changed\";\nclass TimeRangeUpdatedEvent extends BusEventWithPayload {\n}\nTimeRangeUpdatedEvent.type = \"time-range-updated\";\nclass CopyPanelEvent extends BusEventWithPayload {\n}\nCopyPanelEvent.type = \"copy-panel\";\nlet singletonInstance;\nfunction setAppEvents(instance) {\n  singletonInstance = instance;\n}\nfunction getAppEvents() {\n  return singletonInstance;\n}\n\nexport { CopyPanelEvent, RefreshEvent, ThemeChangedEvent, TimeRangeUpdatedEvent, getAppEvents, setAppEvents };\n//# sourceMappingURL=appEvents.mjs.map\n","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.secondary;\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    }),\n  };\n};\n","import {\n  forwardRef,\n  cloneElement,\n  useCallback,\n  useId,\n  useRef,\n  useState,\n  useLayoutEffect,\n  JSX,\n} 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  useRole,\n  useInteractions,\n  useTransitionStyles,\n  FloatingPortal,\n} from '@floating-ui/react';\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  /**\n   * Virtual element to anchor the popover to instead of the trigger\n   */\n  virtualElement?: React.RefObject<Element>;\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      virtualElement,\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 = window.setTimeout(() => {\n            setDelayedOpen(open);\n          }, transitionDuration + hideDelay);\n        } else {\n          setDelayedOpen(open);\n        }\n      },\n      middleware,\n      whileElementsMounted: autoUpdate,\n    });\n\n    useLayoutEffect(() => {\n      if (virtualElement && virtualElement.current !== null) {\n        const domRect = virtualElement.current.getBoundingClientRect();\n\n        refs.setPositionReference({\n          getBoundingClientRect: () => {\n            if (virtualElement.current !== null)\n              return virtualElement.current.getBoundingClientRect();\n            return domRect;\n          },\n          contextElement: virtualElement.current,\n        });\n      }\n    }, [refs, virtualElement]);\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      useRole(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          <FloatingPortal root={document.getElementById('grafana-portal-container')}>\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          </FloatingPortal>\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  const background = legacy.colors.background.primary;\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,\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,\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  hideDelay?: number;\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  hideDelay,\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          hideDelay={hideDelay}\n        />\n      ) : (\n        badgeContent\n      )}\n    </>\n  );\n};\n","import { css, keyframes } 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      'skeleton-gradient-background-color': legacy.palette.whiteBaseOpacity12,\n    },\n    light: {\n      'skeleton-gradient-background-color': legacy.palette.blackBaseOpacity12,\n    },\n  };\n};\n\nconst shimmer = keyframes({\n  '0%': {\n    transform: 'translateX(-100%);',\n  },\n  '100%': {\n    transform: 'translateX(100%);',\n  },\n});\n\nexport const getStyles = (animationDuration: number) => {\n  return css({\n    display: 'flex',\n    width: '100%',\n    height: '100%',\n    background: 'transparent',\n    position: 'relative',\n    overflow: 'hidden',\n    borderRadius: '5px',\n    '&::before': {\n      content: \"''\",\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      width: '100%',\n      height: '100%',\n      animation: `${shimmer} ${animationDuration}s ease-in-out infinite`,\n      transform: 'translateX(-100%)',\n      background:\n        'linear-gradient(90deg, transparent, var(--skeleton-gradient-background-color), transparent)',\n    },\n  });\n};\n","import { GlobalCSSVariables } from '@grafana/design-tokens';\nimport { cssVariables, getStyles } from './GenericSkeleton.styles';\n\nexport interface GenericSkeletonProps {\n  /**\n   * Duration of animation in seconds\n   */\n  animationDuration?: number;\n}\n\nexport const GenericSkeleton = ({ animationDuration = 2 }: GenericSkeletonProps) => {\n  const styles = getStyles(animationDuration);\n\n  return (\n    <>\n      <GlobalCSSVariables variables={cssVariables()} defaultColorMode={null} />\n      <div className={styles} />\n    </>\n  );\n};\n","/**\n * Apply a filter to rotate the hue by 10 degrees per index\n */\nexport const filterHueRotate = (index: number) => ({\n  filter: `hue-rotate(${index * 10}deg)`,\n});\n","import { css } from '@emotion/css';\nimport { getDesignTokens } from '@grafana/design-tokens';\nimport { StackedChartSegmentProps } from './types';\nimport { filterHueRotate } from '../StackedChart/shared.styles';\n\nexport const diagonalStripedBackground = ({\n  stripeColor,\n  stripeWidth = 2,\n  gapWidth = 6,\n}: {\n  stripeColor: string;\n  stripeWidth?: number;\n  gapWidth?: number;\n}) => {\n  return `repeating-linear-gradient(\n    -45deg,\n    ${stripeColor},\n    ${stripeColor} ${stripeWidth}px,\n    transparent ${stripeWidth}px,\n    transparent ${gapWidth}px)`;\n};\n\nexport const getSegmentStyles = () =>\n  css({\n    display: 'flex',\n    height: '100%',\n  });\n\nexport const getStyles = <T extends string>({\n  index,\n  state = 'default',\n}: Pick<StackedChartSegmentProps<T>, 'index' | 'state'>) => {\n  const { legacy } = getDesignTokens({ valueType: 'css' });\n  const hasColor = ['color', 'active'].includes(state);\n\n  const backgroundImage = diagonalStripedBackground({\n    stripeColor:\n      state === 'dimmed' ? legacy.colors.secondary.shade : legacy.colors.secondary.transparent,\n  });\n\n  return css({\n    cursor: hasColor ? 'pointer' : undefined,\n    borderRadius: legacy.borderRadius.sm,\n    transitionDuration: '0.2s',\n    transitionTimingFunction: 'ease-in-out',\n    transitionProperty: 'background, filter, box-shadow',\n    background: hasColor ? legacy.colors.primary.main : legacy.colors.secondary.transparent,\n    backgroundImage,\n    opacity: state === 'dimmed' ? 0.4 : undefined,\n    boxShadow: state === 'active' ? legacy.boxShadows.z1 : 'none',\n    ...(hasColor ? filterHueRotate(index) : {}),\n  });\n};\n","import clsx from 'clsx';\nimport React from 'react';\nimport { StackedChartSegmentProps } from './types';\nimport { getStyles, getSegmentStyles } from './StackedChartSegment.styles';\n\nconst _StackedChartSegment = <T extends string>(\n  {\n    categoryId,\n    state = 'default',\n    index,\n    value,\n    total = 100,\n    minValue = 4,\n    onMouseOver,\n    onMouseOut,\n  }: StackedChartSegmentProps<T>,\n  ref: React.ForwardedRef<HTMLDivElement>,\n) => {\n  const width = `${Math.max((value / total) * 100, minValue)}%`;\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(getStyles({ state, index }), getSegmentStyles())}\n      onMouseOver={onMouseOver && onMouseOver({ ref, categoryId })}\n      onMouseOut={onMouseOut && onMouseOut({ ref, categoryId })}\n      style={{ width }}\n    />\n  );\n};\n\n_StackedChartSegment.displayName = 'StackedChartSegment';\n\nexport const StackedChartSegment = React.forwardRef(_StackedChartSegment);\n","import { css } from '@emotion/css';\nimport { getDesignTokens } from '@grafana/design-tokens';\n\nexport const getStyles = ({ height }: { height: number }) => {\n  const {\n    primitives: { spacing },\n  } = getDesignTokens({ valueType: 'css' });\n\n  return {\n    container: css({\n      display: 'flex',\n      width: '100%',\n      height,\n      gap: spacing.xxs,\n    }),\n  };\n};\n\nexport const diagonalStripedBackground = ({\n  stripeColor,\n  stripeWidth = 2,\n  gapWidth = 6,\n}: {\n  stripeColor: string;\n  stripeWidth?: number;\n  gapWidth?: number;\n}) => {\n  return `repeating-linear-gradient(\n    -45deg,\n    ${stripeColor},\n    ${stripeColor} ${stripeWidth}px,\n    transparent ${stripeWidth}px,\n    transparent ${gapWidth}px)`;\n};\n","import { css } from '@emotion/css';\nimport { getDesignTokens } from '@grafana/design-tokens';\nimport { filterHueRotate } from '../StackedChart/shared.styles';\n\nexport const getStyles = (index: number) => {\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    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.primary,\n      borderRadius: legacy.borderRadius.md,\n      padding: `${spacing.sm} ${spacing.md}`,\n    }),\n    title: css({\n      fontFamily: typography.fontFamily.ui,\n      fontSize: typography.fontSize.ui.sm,\n      fontWeight: typography.fontWeight.medium,\n      // TODO: this should come from a token!\n      lineHeight: '16px',\n      color: legacy.colors.text.primary,\n      whiteSpace: 'nowrap',\n    }),\n    value: css({\n      // TODO: this should come from a token!\n      lineHeight: '16px',\n      color: legacy.colors.text.secondary,\n    }),\n    color: css({\n      color: legacy.colors.primary.main,\n      fill: 'currentColor',\n      ...filterHueRotate(index),\n    }),\n  };\n};\n","import { StackedChartSegmentProps } from '../StackedChartSegment/types';\nimport { Popover, PopoverProps } from '../Popover';\nimport { getStyles } from './StackedChartSegmentTooltip.styles';\n\nexport type StackedChartTooltipContentFormatter = (\n  args: {\n    colorClassName: string;\n  } & Required<Pick<StackedChartSegmentProps<string>, 'value' | 'total' | 'index'>>,\n) => React.ReactElement;\n\nexport interface StackedChartSegmentTooltipProps<T extends string>\n  extends Pick<StackedChartSegmentProps<T>, 'title' | 'value' | 'total' | 'index'>,\n    Omit<PopoverProps, 'children'> {\n  formatContent?: StackedChartTooltipContentFormatter;\n}\n\n/**\n * The default content formatter assumes a percentage value, but you can create\n * your own formatter using the provided arguments of total and index. The\n * colorClassName allows you to set the colour of some text or an icon to the\n * same colour as the equivalent chart segment.\n */\nconst defaultContentFormatter: StackedChartTooltipContentFormatter = ({\n  value,\n  colorClassName,\n}) => (\n  <>\n    <span className={colorClassName}>{value.toFixed(1)}%</span> of total usage\n  </>\n);\n\nexport const StackedChartSegmentTooltip = <T extends string>({\n  trigger,\n  placement = 'top',\n  hideDelay,\n  title,\n  value,\n  total = 100,\n  index,\n  formatContent = defaultContentFormatter,\n  virtualElement,\n}: StackedChartSegmentTooltipProps<T>) => {\n  const styles = getStyles(index);\n\n  return (\n    <Popover\n      trigger={trigger}\n      placement={placement}\n      hideDelay={hideDelay}\n      virtualElement={virtualElement}\n    >\n      <div className={styles.wrapper}>\n        <div className={styles.content}>\n          <div className={styles.section}>\n            <div className={styles.title}>{title}</div>\n            <div className={styles.value}>\n              {formatContent({ value, total, index, colorClassName: styles.color })}\n            </div>\n          </div>\n        </div>\n      </div>\n    </Popover>\n  );\n};\n","import { css } from '@emotion/css';\n\nexport const getStyles = (height: number) => {\n  return css({\n    width: '100%',\n    height: `${height}px`,\n    borderRadius: '4px',\n    overflow: 'hidden',\n  });\n};\n","export const STACKED_CHART_DEFAULT_HEIGHT = 24;\n","import { getStyles } from './StackedChartSkeleton.styles';\nimport { GenericSkeleton } from '../GenericSkeleton';\nimport { STACKED_CHART_DEFAULT_HEIGHT } from '../StackedChart/common';\n\nexport interface StackedChartSkeletonProps {\n  /**\n   * Height to render the stacked chart skeleton, in pixels\n   */\n  height?: number;\n}\n\nexport const StackedChartSkeleton = ({\n  height = STACKED_CHART_DEFAULT_HEIGHT,\n}: StackedChartSkeletonProps) => {\n  const styles = getStyles(height);\n\n  return (\n    <div className={styles}>\n      <GenericSkeleton />\n    </div>\n  );\n};\n","import { css } from '@emotion/css';\nimport { getDesignTokens, CSSVariables } from '@grafana/design-tokens';\n\nexport const cssVariables = (): CSSVariables => {\n  const { legacy } = getDesignTokens({ valueType: 'css' });\n\n  return {\n    dark: {\n      'stacked-chart-no-data-background-color': legacy.palette.blackBaseOpacity15,\n    },\n    light: {\n      'stacked-chart-no-data-background-color': legacy.palette.blackBaseOpacity4,\n    },\n  };\n};\n\nexport const getStyles = (height: number) => {\n  const {\n    legacy,\n    primitives: { typography, spacing },\n  } = getDesignTokens({ valueType: 'css' });\n\n  return {\n    container: css({\n      display: 'flex',\n      flex: 1,\n      width: '100%',\n      height: `${height}px`,\n      alignItems: 'center',\n      justifyContent: 'center',\n      gap: spacing.sm,\n      borderRadius: legacy.borderRadius.md,\n      color: legacy.colors.text.secondary,\n      fontFamily: typography.fontFamily.ui,\n      fontSize: typography.fontSize.ui.sm,\n      paddingTop: spacing.xxs,\n      background: 'var(--stacked-chart-no-data-background-color)',\n    }),\n    label: css({\n      fontWeight: typography.fontWeight.medium,\n      textTransform: 'lowercase',\n    }),\n  };\n};\n","import { GlobalCSSVariables } from '@grafana/design-tokens';\nimport { Icon } from '@grafana/ui';\nimport { cssVariables, getStyles } from './StackedChartNoData.styles';\nimport { STACKED_CHART_DEFAULT_HEIGHT } from '../StackedChart/common';\n\nexport type StackedChartNoDataMessageFormatter = (args: {\n  period: string;\n  className: string;\n}) => React.ReactElement;\n\nexport interface StackedChartNoDataProps {\n  /**\n   * Height to render the stacked chart skeleton, in pixels\n   */\n  height?: number;\n\n  /**\n   * Period for which this chart has no data, as a preformatted string\n   */\n  period?: string;\n\n  /**\n   * Optional formatter for content message\n   */\n  formatMessage?: StackedChartNoDataMessageFormatter;\n}\n\n/**\n * The default content formatter assumes a percentage value, but you can create\n * your own formatter using the provided arguments of total and index. The\n * colorClassName allows you to set the colour of some text or an icon to the\n * same colour as the equivalent chart segment.\n */\nconst defaultContentFormatter: StackedChartNoDataMessageFormatter = ({ period, className }) => (\n  <>\n    No data for <span className={className}>{period}</span>\n  </>\n);\n\nexport const StackedChartNoData = ({\n  height = STACKED_CHART_DEFAULT_HEIGHT,\n  period = 'current',\n  formatMessage = defaultContentFormatter,\n}: StackedChartNoDataProps) => {\n  const styles = getStyles(height);\n\n  return (\n    <>\n      <GlobalCSSVariables variables={cssVariables()} defaultColorMode={null} />\n      <div className={styles.container}>\n        <Icon name=\"exclamation-triangle\" size=\"sm\" />\n        <span>{formatMessage({ period, className: styles.label })}</span>\n      </div>\n    </>\n  );\n};\n","import { Component, useMemo, useRef, useState } from 'react';\nimport { StackedChartSegment } from '../StackedChartSegment';\nimport { getStyles } from './StackedChart.styles';\nimport { StackedChartSegmentState, SegmentMouseEventHandler } from '../StackedChartSegment/types';\nimport { StackedChartSegmentTooltip } from '../StackedChartSegmentTooltip';\nimport { StackedChartSkeleton } from '../StackedChartSkeleton';\nimport { StackedChartNoData, StackedChartNoDataProps } from '../StackedChartNoData';\nimport { STACKED_CHART_DEFAULT_HEIGHT } from './common';\n\nclass StackedChartErrorBoundary extends Component<\n  { children: React.ReactNode; height: number },\n  { hasError: boolean }\n> {\n  constructor(props: { children: React.ReactNode; height: number }) {\n    super(props);\n    this.state = { hasError: false };\n  }\n\n  static getDerivedStateFromError() {\n    return { hasError: true };\n  }\n\n  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {\n    console.error('StackedChart rendering error:', error, errorInfo);\n  }\n\n  render() {\n    if (this.state.hasError) {\n      return <StackedChartNoData height={this.props.height} />;\n    }\n\n    return this.props.children;\n  }\n}\n\nexport interface StackedChartCategory {\n  title: string;\n  value: number;\n}\n\nexport type StackedChartCategories<T extends string> = Record<T, StackedChartCategory>;\n\nexport type StackedChartSortOrder = 'largest-first' | 'smallest-first' | 'natural';\n\ntype MouseEventHandler = ({\n  categoryId,\n  ref,\n}: {\n  categoryId: string;\n  ref: React.ForwardedRef<HTMLDivElement>;\n}) => void;\n\nexport interface CommonStackedChartProps<T extends string> {\n  /**\n   * How should category segments be sorted?\n   */\n  sortOrder?: StackedChartSortOrder;\n\n  /**\n   * Height to render the stacked chart, in pixels\n   */\n  height?: number;\n\n  /**\n   * initial category ID to highlight; if omitted then all segments will render\n   * in colour and highlight based on mouseover events.\n   */\n  highlightedCategoryId?: T;\n\n  /**\n   * Should the whole StackedChart be dimmed, i.e. with a highlighted category\n   * not in color, all other categories faded out?\n   */\n  isDimmed?: boolean;\n\n  /**\n   * Event handler for whenever a segment gets a mouseover event\n   */\n  onSegmentMouseOver?: MouseEventHandler;\n\n  /**\n   * Event handler for whenever a segment gets a mouseout event\n   */\n  onSegmentMouseOut?: MouseEventHandler;\n\n  /**\n   * String representing the period for which the chart is displaying data\n   */\n  period?: string;\n\n  formatNoDataMessage?: StackedChartNoDataProps['formatMessage'];\n}\n\nexport interface SkeletonStackedChartProps<T extends string> extends CommonStackedChartProps<T> {\n  isSkeleton: true;\n\n  /**\n   * Array of StackedChartCategory to build the chart from\n   */\n  categories?: StackedChartCategories<T>;\n}\n\nexport interface LoadedStackedChartProps<T extends string> extends CommonStackedChartProps<T> {\n  isSkeleton?: false;\n\n  /**\n   * Array of StackedChartCategory to build the chart from\n   */\n  categories: StackedChartCategories<T>;\n}\n\nexport type StackedChartProps<T extends string> =\n  | SkeletonStackedChartProps<T>\n  | LoadedStackedChartProps<T>;\n\nconst StackedChartInner = <T extends string>({\n  categories,\n  highlightedCategoryId: initialHighlightedCategoryId,\n  isSkeleton = false,\n  isDimmed = false,\n  sortOrder = 'largest-first',\n  height = STACKED_CHART_DEFAULT_HEIGHT,\n  onSegmentMouseOver,\n  onSegmentMouseOut,\n  period = 'current',\n  formatNoDataMessage,\n}: StackedChartProps<T>) => {\n  if (isSkeleton || !categories) return <StackedChartSkeleton height={height} />;\n\n  let highlightedSegmentRef = useRef<HTMLDivElement>(null);\n  const [highlightedCategoryId, setHighlightedCategoryId] = useState<string | undefined>(\n    /**\n     * Using a type assertion here ultimately because you can’t pass a generic\n     * type argument to the type of props in React.forwardRef (it is inferred as\n     * of type string).\n     *\n     * See: https://stackoverflow.com/questions/51884498/using-react-forwardref-with-typescript-generic-jsx-arguments\n     */\n    initialHighlightedCategoryId as string,\n  );\n  const [isHovered, setHovered] = useState<boolean>(false);\n  const timer = useRef<number | undefined>(undefined);\n\n  const sortedCategoryIds = useMemo(() => {\n    let categoryIds: T[] = [];\n\n    for (const categoryId in categories) {\n      categoryIds.push(categoryId);\n    }\n\n    switch (sortOrder) {\n      case 'largest-first':\n        return categoryIds.sort((a, b) => categories[b].value - categories[a].value);\n      case 'smallest-first':\n        return categoryIds.sort((a, b) => categories[a].value - categories[b].value);\n      default:\n        return categoryIds;\n    }\n  }, [categories, sortOrder]);\n\n  /**\n   * Determine what the total value is for all category valeus combined\n   */\n  const total = useMemo(\n    () =>\n      Math.round(\n        Object.entries<StackedChartCategory>(categories).reduce(\n          (sum, [, category]) => sum + category.value,\n          0,\n        ),\n      ),\n    [categories],\n  );\n\n  const styles = getStyles({ height });\n\n  const onMouseOver: SegmentMouseEventHandler =\n    ({ ref, categoryId }) =>\n    () => {\n      clearTimeout(timer.current);\n      setHovered(true);\n\n      /**\n       * Only update the highlighted category ID if an initial category wasn’t\n       * supplied\n       */\n      if (!initialHighlightedCategoryId) {\n        setHighlightedCategoryId(categoryId);\n      }\n\n      if (onSegmentMouseOver) onSegmentMouseOver({ ref, categoryId });\n    };\n\n  const onMouseOut: SegmentMouseEventHandler =\n    ({ ref, categoryId }) =>\n    () => {\n      /**\n       * TODO: rather than use a timeout, maybe use the parent element being\n       * moused over (event bubbling?) to validate whether the mouse has left\n       * the entire chart vs an individual segment?\n       */\n      timer.current = window.setTimeout(() => {\n        setHovered(false);\n        /**\n         * Only clear the highlighted category if an initial category wasn’t\n         * supplied\n         */\n        if (!initialHighlightedCategoryId) {\n          setHighlightedCategoryId(undefined);\n        }\n      }, 50);\n\n      if (onSegmentMouseOut) onSegmentMouseOut({ ref, categoryId });\n    };\n\n  /**\n   * If the initial highlighted category isn’t within the provided set of\n   * categories, fall back to displaying the No Data component\n   */\n  if (\n    initialHighlightedCategoryId &&\n    sortedCategoryIds.indexOf(initialHighlightedCategoryId) === -1\n  )\n    return (\n      <StackedChartNoData height={height} period={period} formatMessage={formatNoDataMessage} />\n    );\n\n  const highlightedCategory: (StackedChartCategory & { index: number }) | undefined =\n    initialHighlightedCategoryId\n      ? {\n          ...categories[initialHighlightedCategoryId],\n          index: sortedCategoryIds.indexOf(initialHighlightedCategoryId),\n        }\n      : undefined;\n\n  /**\n   * This shouldn’t use Object.entries but rather a sorted list of category IDs,\n   * derived by the sortOrder prop\n   */\n\n  const content = (\n    <div className={styles.container}>\n      {sortedCategoryIds.map((categoryId, categoryIndex) => {\n        const category = categories[categoryId];\n        const ref = useRef<HTMLDivElement>(null);\n        if (categoryId === initialHighlightedCategoryId) highlightedSegmentRef = ref;\n\n        const segmentState = ((): StackedChartSegmentState => {\n          switch (true) {\n            /**\n             * If no initial highlighted category was set, and a category is\n             * moused over, use the _active_ state for that category rather\n             * than the color state; this adds a drop shadow to the segment.\n             * Also, if an initial highlighted category _was_ set, and it\n             * receives a hover event, also set it to active.\n             */\n            case !initialHighlightedCategoryId && highlightedCategoryId === categoryId && !isDimmed:\n            case initialHighlightedCategoryId === categoryId && isHovered && !isDimmed:\n              return 'active';\n\n            /**\n             * - no initial highlighted category ID was passed _and_ there is\n             *   no highlightedCategoryId (i.e. all segments in colour)\n             * - the highlighted category is this category (but the chart\n             *   isn’t dimmed)\n             * - the initial highlighted category is this category (but the\n             *   chart isn’t dimmed)\n             */\n            case !initialHighlightedCategoryId && !highlightedCategoryId && !isDimmed:\n            case initialHighlightedCategoryId === categoryId && !isDimmed:\n              return 'color';\n\n            /**\n             * Has an initial highlighted category, but is dimmed (i.e. all\n             * segments excepted the highlighted category)\n             */\n            case Boolean(initialHighlightedCategoryId) &&\n              initialHighlightedCategoryId !== categoryId &&\n              isDimmed:\n            case !initialHighlightedCategoryId && !highlightedCategoryId && isDimmed:\n            case highlightedCategoryId !== categoryId && isDimmed:\n              return 'dimmed';\n\n            /**\n             * In any other case, the segment should be the default grey\n             */\n            default:\n              return 'default';\n          }\n        })();\n\n        const segment = (\n          <StackedChartSegment\n            key={categoryId}\n            ref={ref}\n            categoryId={categoryId}\n            index={categoryIndex}\n            title={category.title}\n            value={category.value}\n            total={total}\n            state={segmentState}\n            onMouseOver={onMouseOver}\n            onMouseOut={onMouseOut}\n          />\n        );\n\n        /**\n         * Only wrap the segment in a tooltip if no initially highlighted\n         * category ID was supplied.\n         */\n        return initialHighlightedCategoryId ? (\n          segment\n        ) : (\n          <StackedChartSegmentTooltip\n            key={categoryId}\n            title={category.title}\n            value={category.value}\n            index={categoryIndex}\n            hideDelay={0}\n            trigger={segment}\n          />\n        );\n      })}\n    </div>\n  );\n\n  /**\n   * If an initial highlight category was provided, wrap the entire chart inside\n   * a tooltip using the props for the highlighted segment to drive the tooltip\n   * content.\n   */\n  return initialHighlightedCategoryId && highlightedCategory ? (\n    <StackedChartSegmentTooltip\n      hideDelay={0}\n      trigger={content}\n      virtualElement={highlightedSegmentRef}\n      {...highlightedCategory}\n    />\n  ) : (\n    content\n  );\n};\n\nexport const StackedChart = <T extends string>(props: StackedChartProps<T>) => {\n  return (\n    <StackedChartErrorBoundary height={props.height || STACKED_CHART_DEFAULT_HEIGHT}>\n      <StackedChartInner {...props} />\n    </StackedChartErrorBoundary>\n  );\n};\n"],"names":["BusEventBase","BusEventWithPayload","createContext","useState","useEffect","jsx","useContext","isLight","newColorMode","getStyles","getDesignTokens","css","flip","shift","offset","arrow","forwardRef","useRef","useId","useFloating","autoUpdate","useLayoutEffect","useInteractions","useDismiss","useHover","safePolygon","useFocus","useRole","useTransitionStyles","useCallback","jsxs","Fragment","cloneElement","FloatingPortal","FloatingArrow","Icon","cssVariables","cx","GlobalCSSVariables","keyframes","clsx","React","defaultContentFormatter","Component","useMemo"],"mappings":"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","x_google_ignoreList":[0]}
+{"version":3,"file":"index.cjs","sources":["../../node_modules/@grafana/runtime/dist/esm/services/appEvents.mjs","../../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","../../src/components/GenericSkeleton/GenericSkeleton.styles.ts","../../src/components/GenericSkeleton/GenericSkeleton.tsx","../../src/components/StackedChart/shared.styles.ts","../../src/components/StackedChartSegment/StackedChartSegment.styles.ts","../../src/components/StackedChartSegment/StackedChartSegment.tsx","../../src/components/StackedChart/StackedChart.styles.ts","../../src/components/StackedChartSegmentTooltip/StackedChartSegmentTooltip.styles.ts","../../src/components/StackedChartSegmentTooltip/StackedChartSegmentTooltip.tsx","../../src/components/StackedChartSkeleton/StackedChartSkeleton.styles.ts","../../src/components/StackedChart/common.ts","../../src/components/StackedChartSkeleton/StackedChartSkeleton.tsx","../../src/components/StackedChartNoData/StackedChartNoData.styles.ts","../../src/components/StackedChartNoData/StackedChartNoData.tsx","../../src/components/StackedChart/StackedChart.tsx"],"sourcesContent":["import { BusEventBase, BusEventWithPayload } from '@grafana/data';\n\nclass RefreshEvent extends BusEventBase {\n}\nRefreshEvent.type = \"refresh\";\nclass ThemeChangedEvent extends BusEventWithPayload {\n}\nThemeChangedEvent.type = \"theme-changed\";\nclass TimeRangeUpdatedEvent extends BusEventWithPayload {\n}\nTimeRangeUpdatedEvent.type = \"time-range-updated\";\nclass CopyPanelEvent extends BusEventWithPayload {\n}\nCopyPanelEvent.type = \"copy-panel\";\nlet singletonInstance;\nfunction setAppEvents(instance) {\n  singletonInstance = instance;\n}\nfunction getAppEvents() {\n  return singletonInstance;\n}\n\nexport { CopyPanelEvent, RefreshEvent, ThemeChangedEvent, TimeRangeUpdatedEvent, getAppEvents, setAppEvents };\n//# sourceMappingURL=appEvents.mjs.map\n","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.secondary;\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    }),\n  };\n};\n","import {\n  forwardRef,\n  cloneElement,\n  useCallback,\n  useId,\n  useRef,\n  useState,\n  useLayoutEffect,\n  JSX,\n} 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  useRole,\n  useInteractions,\n  useTransitionStyles,\n  FloatingPortal,\n} from '@floating-ui/react';\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  /**\n   * Virtual element to anchor the popover to instead of the trigger\n   */\n  virtualElement?: React.RefObject<Element>;\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      virtualElement,\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 = window.setTimeout(() => {\n            setDelayedOpen(open);\n          }, transitionDuration + hideDelay);\n        } else {\n          setDelayedOpen(open);\n        }\n      },\n      middleware,\n      whileElementsMounted: autoUpdate,\n    });\n\n    useLayoutEffect(() => {\n      if (virtualElement && virtualElement.current !== null) {\n        const domRect = virtualElement.current.getBoundingClientRect();\n\n        refs.setPositionReference({\n          getBoundingClientRect: () => {\n            if (virtualElement.current !== null)\n              return virtualElement.current.getBoundingClientRect();\n            return domRect;\n          },\n          contextElement: virtualElement.current,\n        });\n      }\n    }, [refs, virtualElement]);\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      useRole(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          <FloatingPortal root={document.getElementById('grafana-portal-container')}>\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          </FloatingPortal>\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  const background = legacy.colors.background.primary;\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,\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,\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  hideDelay?: number;\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  hideDelay,\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          hideDelay={hideDelay}\n        />\n      ) : (\n        badgeContent\n      )}\n    </>\n  );\n};\n","import { css, keyframes } 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      'skeleton-gradient-background-color': legacy.palette.whiteBaseOpacity12,\n    },\n    light: {\n      'skeleton-gradient-background-color': legacy.palette.blackBaseOpacity12,\n    },\n  };\n};\n\nconst shimmer = keyframes({\n  '0%': {\n    transform: 'translateX(-100%);',\n  },\n  '100%': {\n    transform: 'translateX(100%);',\n  },\n});\n\nexport const getStyles = (animationDuration: number) => {\n  return css({\n    display: 'flex',\n    width: '100%',\n    height: '100%',\n    background: 'transparent',\n    position: 'relative',\n    overflow: 'hidden',\n    borderRadius: '5px',\n    '&::before': {\n      content: \"''\",\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      width: '100%',\n      height: '100%',\n      animation: `${shimmer} ${animationDuration}s ease-in-out infinite`,\n      transform: 'translateX(-100%)',\n      background:\n        'linear-gradient(90deg, transparent, var(--skeleton-gradient-background-color), transparent)',\n    },\n  });\n};\n","import { GlobalCSSVariables } from '@grafana/design-tokens';\nimport { cssVariables, getStyles } from './GenericSkeleton.styles';\n\nexport interface GenericSkeletonProps {\n  /**\n   * Duration of animation in seconds\n   */\n  animationDuration?: number;\n}\n\nexport const GenericSkeleton = ({ animationDuration = 2 }: GenericSkeletonProps) => {\n  const styles = getStyles(animationDuration);\n\n  return (\n    <>\n      <GlobalCSSVariables variables={cssVariables()} defaultColorMode={null} />\n      <div className={styles} />\n    </>\n  );\n};\n","/**\n * Apply a filter to rotate the hue by 10 degrees per index\n */\nexport const filterHueRotate = (index: number) => ({\n  filter: `hue-rotate(${index * 10}deg)`,\n});\n","import { css } from '@emotion/css';\nimport { getDesignTokens } from '@grafana/design-tokens';\nimport { StackedChartSegmentProps } from './types';\nimport { filterHueRotate } from '../StackedChart/shared.styles';\n\nexport const diagonalStripedBackground = ({\n  stripeColor,\n  stripeWidth = 2,\n  gapWidth = 6,\n}: {\n  stripeColor: string;\n  stripeWidth?: number;\n  gapWidth?: number;\n}) => {\n  return `repeating-linear-gradient(\n    -45deg,\n    ${stripeColor},\n    ${stripeColor} ${stripeWidth}px,\n    transparent ${stripeWidth}px,\n    transparent ${gapWidth}px)`;\n};\n\nexport const getSegmentStyles = () =>\n  css({\n    display: 'flex',\n    height: '100%',\n  });\n\nexport const getStyles = <T extends string>({\n  index,\n  state = 'default',\n}: Pick<StackedChartSegmentProps<T>, 'index' | 'state'>) => {\n  const { legacy } = getDesignTokens({ valueType: 'css' });\n  const hasColor = ['color', 'active'].includes(state);\n\n  const backgroundImage = diagonalStripedBackground({\n    stripeColor:\n      state === 'dimmed' ? legacy.colors.secondary.shade : legacy.colors.secondary.transparent,\n  });\n\n  return css({\n    cursor: hasColor ? 'pointer' : undefined,\n    borderRadius: legacy.borderRadius.sm,\n    transitionDuration: '0.2s',\n    transitionTimingFunction: 'ease-in-out',\n    transitionProperty: 'background, filter, box-shadow',\n    background: hasColor ? legacy.colors.primary.main : legacy.colors.secondary.transparent,\n    backgroundImage,\n    opacity: state === 'dimmed' ? 0.4 : undefined,\n    boxShadow: state === 'active' ? legacy.boxShadows.z1 : 'none',\n    ...(hasColor ? filterHueRotate(index) : {}),\n  });\n};\n","import clsx from 'clsx';\nimport React from 'react';\nimport { StackedChartSegmentProps } from './types';\nimport { getStyles, getSegmentStyles } from './StackedChartSegment.styles';\n\nconst _StackedChartSegment = <T extends string>(\n  {\n    categoryId,\n    state = 'default',\n    index,\n    value,\n    total = 100,\n    minValue = 4,\n    onMouseOver,\n    onMouseOut,\n  }: StackedChartSegmentProps<T>,\n  ref: React.ForwardedRef<HTMLDivElement>,\n) => {\n  const width = `${Math.max((value / total) * 100, minValue)}%`;\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(getStyles({ state, index }), getSegmentStyles())}\n      onMouseOver={onMouseOver && onMouseOver({ ref, categoryId })}\n      onMouseOut={onMouseOut && onMouseOut({ ref, categoryId })}\n      style={{ width }}\n    />\n  );\n};\n\n_StackedChartSegment.displayName = 'StackedChartSegment';\n\nexport const StackedChartSegment = React.forwardRef(_StackedChartSegment);\n","import { css } from '@emotion/css';\nimport { getDesignTokens } from '@grafana/design-tokens';\n\nexport const getStyles = ({ height }: { height: number }) => {\n  const {\n    primitives: { spacing },\n  } = getDesignTokens({ valueType: 'css' });\n\n  return {\n    container: css({\n      display: 'flex',\n      width: '100%',\n      height,\n      gap: spacing.xxs,\n    }),\n  };\n};\n\nexport const diagonalStripedBackground = ({\n  stripeColor,\n  stripeWidth = 2,\n  gapWidth = 6,\n}: {\n  stripeColor: string;\n  stripeWidth?: number;\n  gapWidth?: number;\n}) => {\n  return `repeating-linear-gradient(\n    -45deg,\n    ${stripeColor},\n    ${stripeColor} ${stripeWidth}px,\n    transparent ${stripeWidth}px,\n    transparent ${gapWidth}px)`;\n};\n","import { css } from '@emotion/css';\nimport { getDesignTokens } from '@grafana/design-tokens';\nimport { filterHueRotate } from '../StackedChart/shared.styles';\n\nexport const getStyles = (index: number) => {\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    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.primary,\n      borderRadius: legacy.borderRadius.md,\n      padding: `${spacing.sm} ${spacing.md}`,\n    }),\n    title: css({\n      fontFamily: typography.fontFamily.ui,\n      fontSize: typography.fontSize.ui.sm,\n      fontWeight: typography.fontWeight.medium,\n      // TODO: this should come from a token!\n      lineHeight: '16px',\n      color: legacy.colors.text.primary,\n      whiteSpace: 'nowrap',\n    }),\n    value: css({\n      // TODO: this should come from a token!\n      lineHeight: '16px',\n      color: legacy.colors.text.secondary,\n    }),\n    color: css({\n      color: legacy.colors.primary.main,\n      fill: 'currentColor',\n      ...filterHueRotate(index),\n    }),\n  };\n};\n","import { StackedChartSegmentProps } from '../StackedChartSegment/types';\nimport { Popover, PopoverProps } from '../Popover';\nimport { getStyles } from './StackedChartSegmentTooltip.styles';\n\nexport type StackedChartTooltipContentFormatter = (\n  args: {\n    colorClassName: string;\n  } & Required<Pick<StackedChartSegmentProps<string>, 'value' | 'total' | 'index'>>,\n) => React.ReactElement;\n\nexport interface StackedChartSegmentTooltipProps<T extends string>\n  extends Pick<StackedChartSegmentProps<T>, 'title' | 'value' | 'total' | 'index'>,\n    Omit<PopoverProps, 'children'> {\n  formatContent?: StackedChartTooltipContentFormatter;\n}\n\n/**\n * The default content formatter assumes a percentage value, but you can create\n * your own formatter using the provided arguments of total and index. The\n * colorClassName allows you to set the colour of some text or an icon to the\n * same colour as the equivalent chart segment.\n */\nconst defaultContentFormatter: StackedChartTooltipContentFormatter = ({\n  value,\n  colorClassName,\n}) => {\n  const valueString = value < 0.1 ? '< 0.1' : `${value.toFixed(1)}`;\n\n  return (\n    <>\n      <span className={colorClassName}>{valueString}%</span> of total usage\n    </>\n  );\n};\n\nexport const StackedChartSegmentTooltip = <T extends string>({\n  trigger,\n  placement = 'top',\n  hideDelay,\n  title,\n  value,\n  total = 100,\n  index,\n  formatContent = defaultContentFormatter,\n  virtualElement,\n}: StackedChartSegmentTooltipProps<T>) => {\n  const styles = getStyles(index);\n\n  return (\n    <Popover\n      trigger={trigger}\n      placement={placement}\n      hideDelay={hideDelay}\n      virtualElement={virtualElement}\n    >\n      <div className={styles.wrapper}>\n        <div className={styles.content}>\n          <div className={styles.section}>\n            <div className={styles.title}>{title}</div>\n            <div className={styles.value}>\n              {formatContent({ value, total, index, colorClassName: styles.color })}\n            </div>\n          </div>\n        </div>\n      </div>\n    </Popover>\n  );\n};\n","import { css } from '@emotion/css';\n\nexport const getStyles = (height: number) => {\n  return css({\n    width: '100%',\n    height: `${height}px`,\n    borderRadius: '4px',\n    overflow: 'hidden',\n  });\n};\n","export const STACKED_CHART_DEFAULT_HEIGHT = 24;\n","import { getStyles } from './StackedChartSkeleton.styles';\nimport { GenericSkeleton } from '../GenericSkeleton';\nimport { STACKED_CHART_DEFAULT_HEIGHT } from '../StackedChart/common';\n\nexport interface StackedChartSkeletonProps {\n  /**\n   * Height to render the stacked chart skeleton, in pixels\n   */\n  height?: number;\n}\n\nexport const StackedChartSkeleton = ({\n  height = STACKED_CHART_DEFAULT_HEIGHT,\n}: StackedChartSkeletonProps) => {\n  const styles = getStyles(height);\n\n  return (\n    <div className={styles}>\n      <GenericSkeleton />\n    </div>\n  );\n};\n","import { css } from '@emotion/css';\nimport { getDesignTokens, CSSVariables } from '@grafana/design-tokens';\n\nexport const cssVariables = (): CSSVariables => {\n  const { legacy } = getDesignTokens({ valueType: 'css' });\n\n  return {\n    dark: {\n      'stacked-chart-no-data-background-color': legacy.palette.blackBaseOpacity15,\n    },\n    light: {\n      'stacked-chart-no-data-background-color': legacy.palette.blackBaseOpacity4,\n    },\n  };\n};\n\nexport const getStyles = (height: number) => {\n  const {\n    legacy,\n    primitives: { typography, spacing },\n  } = getDesignTokens({ valueType: 'css' });\n\n  return {\n    container: css({\n      display: 'flex',\n      flex: 1,\n      width: '100%',\n      height: `${height}px`,\n      alignItems: 'center',\n      justifyContent: 'center',\n      gap: spacing.sm,\n      borderRadius: legacy.borderRadius.md,\n      color: legacy.colors.text.secondary,\n      fontFamily: typography.fontFamily.ui,\n      fontSize: typography.fontSize.ui.sm,\n      paddingTop: spacing.xxs,\n      background: 'var(--stacked-chart-no-data-background-color)',\n    }),\n    label: css({\n      fontWeight: typography.fontWeight.medium,\n      textTransform: 'lowercase',\n    }),\n  };\n};\n","import { GlobalCSSVariables } from '@grafana/design-tokens';\nimport { Icon } from '@grafana/ui';\nimport { cssVariables, getStyles } from './StackedChartNoData.styles';\nimport { STACKED_CHART_DEFAULT_HEIGHT } from '../StackedChart/common';\n\nexport type StackedChartNoDataMessageFormatter = (args: {\n  period: string;\n  className: string;\n}) => React.ReactElement;\n\nexport interface StackedChartNoDataProps {\n  /**\n   * Height to render the stacked chart skeleton, in pixels\n   */\n  height?: number;\n\n  /**\n   * Period for which this chart has no data, as a preformatted string\n   */\n  period?: string;\n\n  /**\n   * Optional formatter for content message\n   */\n  formatMessage?: StackedChartNoDataMessageFormatter;\n}\n\n/**\n * The default content formatter assumes a percentage value, but you can create\n * your own formatter using the provided arguments of total and index. The\n * colorClassName allows you to set the colour of some text or an icon to the\n * same colour as the equivalent chart segment.\n */\nconst defaultContentFormatter: StackedChartNoDataMessageFormatter = ({ period, className }) => (\n  <>\n    No data for <span className={className}>{period}</span>\n  </>\n);\n\nexport const StackedChartNoData = ({\n  height = STACKED_CHART_DEFAULT_HEIGHT,\n  period = 'current',\n  formatMessage = defaultContentFormatter,\n}: StackedChartNoDataProps) => {\n  const styles = getStyles(height);\n\n  return (\n    <>\n      <GlobalCSSVariables variables={cssVariables()} defaultColorMode={null} />\n      <div className={styles.container}>\n        <Icon name=\"exclamation-triangle\" size=\"sm\" />\n        <span>{formatMessage({ period, className: styles.label })}</span>\n      </div>\n    </>\n  );\n};\n","import { useMemo, useRef, useState } from 'react';\nimport { StackedChartSegment } from '../StackedChartSegment';\nimport { getStyles } from './StackedChart.styles';\nimport { StackedChartSegmentState, SegmentMouseEventHandler } from '../StackedChartSegment/types';\nimport { StackedChartSegmentTooltip } from '../StackedChartSegmentTooltip';\nimport { StackedChartSkeleton } from '../StackedChartSkeleton';\nimport { StackedChartNoData, StackedChartNoDataProps } from '../StackedChartNoData';\nimport { STACKED_CHART_DEFAULT_HEIGHT } from './common';\n\nexport interface StackedChartCategory {\n  title: string;\n  value: number;\n}\n\nexport type StackedChartCategories<T extends string> = Record<T, StackedChartCategory>;\n\nexport type StackedChartSortOrder = 'largest-first' | 'smallest-first' | 'natural';\n\ntype MouseEventHandler = ({\n  categoryId,\n  ref,\n}: {\n  categoryId: string;\n  ref: React.ForwardedRef<HTMLDivElement>;\n}) => void;\n\nexport interface SkeletonStackedChartProps<T extends string> {\n  /**\n   * How should category segments be sorted?\n   */\n  sortOrder?: StackedChartSortOrder;\n\n  /**\n   * Height to render the stacked chart, in pixels\n   */\n  height?: number;\n\n  /**\n   * initial category ID to highlight; if omitted then all segments will render\n   * in colour and highlight based on mouseover events.\n   */\n  highlightedCategoryId?: T;\n\n  /**\n   * Should the whole StackedChart be dimmed, i.e. with a highlighted category\n   * not in color, all other categories faded out?\n   */\n  isDimmed?: boolean;\n\n  /**\n   * Event handler for whenever a segment gets a mouseover event\n   */\n  onSegmentMouseOver?: MouseEventHandler;\n\n  /**\n   * Event handler for whenever a segment gets a mouseout event\n   */\n  onSegmentMouseOut?: MouseEventHandler;\n\n  /**\n   * String representing the period for which the chart is displaying data\n   */\n  period?: string;\n\n  formatNoDataMessage?: StackedChartNoDataProps['formatMessage'];\n\n  /**\n   * Is the StackedChart explicitly in a loading state?\n   */\n  isSkeleton?: boolean;\n\n  /**\n   * Array of StackedChartCategory to build the chart from\n   */\n  categories?: StackedChartCategories<T>;\n}\n\nexport type StackedChartProps<T extends string> = SkeletonStackedChartProps<T>;\n\nexport const StackedChart = <T extends string>({\n  categories,\n  highlightedCategoryId: initialHighlightedCategoryId,\n  isSkeleton = false,\n  isDimmed = false,\n  sortOrder = 'largest-first',\n  height = STACKED_CHART_DEFAULT_HEIGHT,\n  onSegmentMouseOver,\n  onSegmentMouseOut,\n  period = 'current',\n  formatNoDataMessage,\n}: StackedChartProps<T>) => {\n  if (isSkeleton || !categories) return <StackedChartSkeleton height={height} />;\n\n  let highlightedSegmentRef = useRef<HTMLDivElement>(null);\n  const [highlightedCategoryId, setHighlightedCategoryId] = useState<string | undefined>(\n    /**\n     * Using a type assertion here ultimately because you can’t pass a generic\n     * type argument to the type of props in React.forwardRef (it is inferred as\n     * of type string).\n     *\n     * See: https://stackoverflow.com/questions/51884498/using-react-forwardref-with-typescript-generic-jsx-arguments\n     */\n    initialHighlightedCategoryId as string,\n  );\n  const [isHovered, setHovered] = useState<boolean>(false);\n  const timer = useRef<number | undefined>(undefined);\n\n  const sortedCategoryIds = useMemo(() => {\n    let categoryIds: T[] = [];\n\n    for (const categoryId in categories) {\n      categoryIds.push(categoryId);\n    }\n\n    switch (sortOrder) {\n      case 'largest-first':\n        return categoryIds.sort((a, b) => categories[b].value - categories[a].value);\n      case 'smallest-first':\n        return categoryIds.sort((a, b) => categories[a].value - categories[b].value);\n      default:\n        return categoryIds;\n    }\n  }, [categories, sortOrder]);\n\n  /**\n   * Determine what the total value is for all category valeus combined\n   */\n  const total = useMemo(\n    () =>\n      Math.round(\n        Object.entries<StackedChartCategory>(categories).reduce(\n          (sum, [, category]) => sum + category.value,\n          0,\n        ),\n      ),\n    [categories],\n  );\n\n  const styles = getStyles({ height });\n\n  const onMouseOver: SegmentMouseEventHandler =\n    ({ ref, categoryId }) =>\n    () => {\n      clearTimeout(timer.current);\n      setHovered(true);\n\n      /**\n       * Only update the highlighted category ID if an initial category wasn’t\n       * supplied\n       */\n      if (!initialHighlightedCategoryId) {\n        setHighlightedCategoryId(categoryId);\n      }\n\n      if (onSegmentMouseOver) onSegmentMouseOver({ ref, categoryId });\n    };\n\n  const onMouseOut: SegmentMouseEventHandler =\n    ({ ref, categoryId }) =>\n    () => {\n      /**\n       * TODO: rather than use a timeout, maybe use the parent element being\n       * moused over (event bubbling?) to validate whether the mouse has left\n       * the entire chart vs an individual segment?\n       */\n      timer.current = window.setTimeout(() => {\n        setHovered(false);\n        /**\n         * Only clear the highlighted category if an initial category wasn’t\n         * supplied\n         */\n        if (!initialHighlightedCategoryId) {\n          setHighlightedCategoryId(undefined);\n        }\n      }, 50);\n\n      if (onSegmentMouseOut) onSegmentMouseOut({ ref, categoryId });\n    };\n\n  /**\n   * If the initial highlighted category isn’t within the provided set of\n   * categories, fall back to displaying the No Data component\n   */\n  if (\n    initialHighlightedCategoryId &&\n    sortedCategoryIds.indexOf(initialHighlightedCategoryId) === -1\n  )\n    return (\n      <StackedChartNoData height={height} period={period} formatMessage={formatNoDataMessage} />\n    );\n\n  const highlightedCategory: (StackedChartCategory & { index: number }) | undefined =\n    initialHighlightedCategoryId\n      ? {\n          ...categories[initialHighlightedCategoryId],\n          index: sortedCategoryIds.indexOf(initialHighlightedCategoryId),\n        }\n      : undefined;\n\n  /**\n   * This shouldn’t use Object.entries but rather a sorted list of category IDs,\n   * derived by the sortOrder prop\n   */\n\n  const content = (\n    <div className={styles.container}>\n      {sortedCategoryIds.map((categoryId, categoryIndex) => {\n        const category = categories[categoryId];\n        const ref = useRef<HTMLDivElement>(null);\n\n        const segmentState = ((): StackedChartSegmentState => {\n          switch (true) {\n            /**\n             * If no initial highlighted category was set, and a category is\n             * moused over, use the _active_ state for that category rather\n             * than the color state; this adds a drop shadow to the segment.\n             * Also, if an initial highlighted category _was_ set, and it\n             * receives a hover event, also set it to active.\n             */\n            case !initialHighlightedCategoryId && highlightedCategoryId === categoryId && !isDimmed:\n            case initialHighlightedCategoryId === categoryId && isHovered && !isDimmed:\n              return 'active';\n\n            /**\n             * - no initial highlighted category ID was passed _and_ there is\n             *   no highlightedCategoryId (i.e. all segments in colour)\n             * - the highlighted category is this category (but the chart\n             *   isn’t dimmed)\n             * - the initial highlighted category is this category (but the\n             *   chart isn’t dimmed)\n             */\n            case !initialHighlightedCategoryId && !highlightedCategoryId && !isDimmed:\n            case initialHighlightedCategoryId === categoryId && !isDimmed:\n              return 'color';\n\n            /**\n             * Has an initial highlighted category, but is dimmed (i.e. all\n             * segments excepted the highlighted category)\n             */\n            case Boolean(initialHighlightedCategoryId) &&\n              initialHighlightedCategoryId !== categoryId &&\n              isDimmed:\n            case !initialHighlightedCategoryId && !highlightedCategoryId && isDimmed:\n            case highlightedCategoryId !== categoryId && isDimmed:\n              return 'dimmed';\n\n            /**\n             * In any other case, the segment should be the default grey\n             */\n            default:\n              return 'default';\n          }\n        })();\n\n        const segment = (\n          <StackedChartSegment\n            key={categoryId}\n            ref={ref}\n            categoryId={categoryId}\n            index={categoryIndex}\n            title={category.title}\n            value={category.value}\n            total={total}\n            state={segmentState}\n            onMouseOver={onMouseOver}\n            onMouseOut={onMouseOut}\n          />\n        );\n\n        if (categoryId === initialHighlightedCategoryId) highlightedSegmentRef = ref;\n        if (!ref.current) {\n          console.log(categoryId, 'ref is unset', ref);\n        }\n\n        /**\n         * Only wrap the segment in a tooltip if no initially highlighted\n         * category ID was supplied.\n         */\n        return initialHighlightedCategoryId ? (\n          segment\n        ) : (\n          <StackedChartSegmentTooltip\n            key={categoryId}\n            title={category.title}\n            value={category.value}\n            index={categoryIndex}\n            hideDelay={0}\n            trigger={segment}\n          />\n        );\n      })}\n    </div>\n  );\n\n  /**\n   * If an initial highlight category was provided, wrap the entire chart inside\n   * a tooltip using the props for the highlighted segment to drive the tooltip\n   * content.\n   */\n  return initialHighlightedCategoryId && highlightedCategory ? (\n    <StackedChartSegmentTooltip\n      hideDelay={0}\n      trigger={content}\n      virtualElement={highlightedSegmentRef}\n      {...highlightedCategory}\n    />\n  ) : (\n    content\n  );\n};\n"],"names":["BusEventBase","BusEventWithPayload","createContext","useState","useEffect","jsx","useContext","isLight","newColorMode","getStyles","getDesignTokens","css","flip","shift","offset","arrow","forwardRef","useRef","useId","useFloating","autoUpdate","useLayoutEffect","useInteractions","useDismiss","useHover","safePolygon","useFocus","useRole","useTransitionStyles","useCallback","jsxs","Fragment","cloneElement","FloatingPortal","FloatingArrow","Icon","cssVariables","cx","GlobalCSSVariables","keyframes","clsx","React","defaultContentFormatter","useMemo"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAEA,MAAM,YAAY,SAASA,iBAAY,CAAC;AACxC;AACA,YAAY,CAAC,IAAI,GAAG,SAAS;AAC7B,MAAM,iBAAiB,SAASC,wBAAmB,CAAC;AACpD;AACA,iBAAiB,CAAC,IAAI,GAAG,eAAe;AACxC,MAAM,qBAAqB,SAASA,wBAAmB,CAAC;AACxD;AACA,qBAAqB,CAAC,IAAI,GAAG,oBAAoB;AACjD,MAAM,cAAc,SAASA,wBAAmB,CAAC;AACjD;AACA,cAAc,CAAC,IAAI,GAAG,YAAY;;ACIlC,MAAM,gBAAA,GAAmBC,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,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,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;AAEzB,EAAA,OAAO,YAAA;AACT;;ACtCO,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,kBAAAH,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,MAAMI,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,SAAA;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;AAAA,KAClC;AAAA,GACH;AACF,CAAA;;AC+CA,MAAM,cAAA,GAAiB,CAAA;AAEvB,MAAM,gBAAgB,CAAC;AAAA,EACrB,SAAA;AAAA,EACA;AACF,CAAA,KAGM;AAjFN,EAAA,IAAA,EAAA;AAkFE,EAAA,MAAM,mBAAA,GAAsB,mBAAA;AAC5B,EAAA,MAAM,QAAQC,UAAA,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,WAAA,EAAO,CAAA,GAAI,CAACA,WAAA,EAAM,EAAG,KAAK,CAAA;AAKhF,EAAA,OAAO;AAAA,IACLC,aAAO,cAAc,CAAA;AAAA,IACrB,GAAG,UAAA;AAAA,IACHC,WAAA,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,GAAA;AAAA,IACZ;AAAA,KAEF,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,GAAIf,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,SAASM,WAAA,EAAU;AAEzB,IAAA,MAAM,EAAE,OAAA,EAAS,IAAA,EAAM,cAAA,KAAmBU,iBAAA,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,MAAA,CAAO,UAAA,CAAW,MAAM;AAC3C,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,IAAAC,qBAAA,CAAgB,MAAM;AACpB,MAAA,IAAI,cAAA,IAAkB,cAAA,CAAe,OAAA,KAAY,IAAA,EAAM;AACrD,QAAA,MAAM,OAAA,GAAU,cAAA,CAAe,OAAA,CAAQ,qBAAA,EAAsB;AAE7D,QAAA,IAAA,CAAK,oBAAA,CAAqB;AAAA,UACxB,uBAAuB,MAAM;AAC3B,YAAA,IAAI,eAAe,OAAA,KAAY,IAAA;AAC7B,cAAA,OAAO,cAAA,CAAe,QAAQ,qBAAA,EAAsB;AACtD,YAAA,OAAO,OAAA;AAAA,UACT,CAAA;AAAA,UACA,gBAAgB,cAAA,CAAe;AAAA,SAChC,CAAA;AAAA,MACH;AAAA,IACF,CAAA,EAAG,CAAC,IAAA,EAAM,cAAc,CAAC,CAAA;AAEzB,IAAA,MAAM,EAAE,iBAAA,EAAmB,gBAAA,EAAiB,GAAIC,qBAAA,CAAgB;AAAA,MAC9DC,iBAAW,OAAO,CAAA;AAAA,MAClBC,eAAS,OAAA,EAAS;AAAA,QAChB,WAAA,EAAa,aAAA,GAAgBC,iBAAA,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,eAAS,OAAO,CAAA;AAAA,MAChBC,cAAQ,OAAO;AAAA,KAChB,CAAA;AAED,IAAA,MAAM,EAAE,MAAA,EAAQ,gBAAA,EAAiB,GAAIC,0BAAoB,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,MAAA,qBACjB3B,cAAA,CAAC4B,oBAAA,EAAA,EAAe,IAAA,EAAM,SAAS,cAAA,CAAe,0BAA0B,CAAA,EACtE,QAAA,kBAAA5B,cAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAK,KAAK,WAAA,EAAa,KAAA,EAAO,cAAA,EAAiB,GAAG,gBAAA,EAAiB,EACtE,QAAA,kBAAAyB,eAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,gBAAA,EAAkB,SAAA,EAAW,MAAA,CAAO,MAAA,EAC9C,QAAA,EAAA;AAAA,wBAAAzB,cAAA,CAAC6B,uBAAc,SAAA,EAAW,MAAA,CAAO,KAAA,EAAO,GAAA,EAAK,UAAU,OAAA,EAAkB,CAAA;AAAA,wBACzE7B,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;;AC3Of,MAAMI,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;AAExC,EAAA,MAAM,UAAA,GAAa,MAAA,CAAO,MAAA,CAAO,UAAA,CAAW,OAAA;AAE5C,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;AAAA,MACA,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;AAAA,MACA,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,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;;AC5CO,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,SAASF,WAAA,EAAU;AAEzB,EAAA,uBACEJ,cAAA,CAAC,WAAQ,OAAA,EAAkB,SAAA,EAAsB,WAC/C,QAAA,kBAAAyB,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,OAAA,EACpB,QAAA,EAAA;AAAA,IAAA,KAAA,oBAASzB,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,SAAU,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,oBACjDyB,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,wBAAAzB,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,YAAA,EAAe,QAAA,EAAA,YAAA,EAAa,CAAA;AAAA,wBACnDyB,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,KAAA,EACrB,QAAA,EAAA;AAAA,0BAAAzB,cAAA,CAAC8B,WAAK,IAAA,EAAM,WAAA,EAAa,MAAK,IAAA,EAAK,SAAA,EAAW,OAAO,IAAA,EAAM,CAAA;AAAA,0BAC3D9B,cAAA,CAAC,MAAA,EAAA,EAAM,QAAA,EAAA,OAAA,IAAW,KAAA,EAAM;AAAA,SAAA,EAC1B;AAAA,OAAA,EACF,CAAA;AAAA,sBACAyB,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,OAAA,EACrB,QAAA,EAAA;AAAA,wBAAAzB,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,YAAA,EAAe,QAAA,EAAA,aAAA,EAAc,CAAA;AAAA,wBACpDyB,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,KAAA,EACrB,QAAA,EAAA;AAAA,0BAAAzB,cAAA,CAAC8B,WAAK,IAAA,EAAM,YAAA,EAAc,MAAK,IAAA,EAAK,SAAA,EAAW,OAAO,IAAA,EAAM,CAAA;AAAA,0BAC5D9B,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+B,iBAAe,MAAoB;AAC9C,EAAA,MAAM,EAAE,MAAA,EAAO,GAAI1B,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,MAAA;AAAA,MAClC,UAAA,EAAY;AAAA,KACb,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;;AClHA,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;AAYA,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,IAAA;AAAA,EACV;AACF,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,mBACJmB,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAO,SAAA,EACrB,QAAA,EAAA;AAAA,oBAAAzB,cAAA,CAAC,KAAA,EAAA,EAAI,WAAW,MAAA,CAAO,gBAAA,EACrB,yCAAC8B,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,wBAAAzB,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,MAAA,CAAO,gBAAA,EACtB,QAAA,kBAAAA,cAAA;AAAA,UAAC8B,OAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAM,eAAe,SAAS,CAAA;AAAA,YAC9B,SAAA,EAAWE,MAAA,CAAG,MAAA,CAAO,SAAA,EAAW,kBAAkB;AAAA;AAAA,SACpD,EACF,CAAA;AAAA,QACC,aAAA,IAAiB,eAAA,oBAAmBhC,cAAA,CAAA0B,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,oBAAA1B,cAAA,CAACiC,+BAAA,EAAA,EAAmB,SAAA,EAAWF,cAAA,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,SAAA;AAAA,QACA;AAAA;AAAA,KACF,GAEA;AAAA,GAAA,EAEJ,CAAA;AAEJ;;ACxFO,MAAM+B,iBAAe,MAAoB;AAC9C,EAAA,MAAM,EAAE,MAAA,EAAO,GAAI1B,6BAAgB,EAAE,SAAA,EAAW,OAAO,CAAA;AAEvD,EAAA,OAAO;AAAA,IACL,IAAA,EAAM;AAAA,MACJ,oCAAA,EAAsC,OAAO,OAAA,CAAQ;AAAA,KACvD;AAAA,IACA,KAAA,EAAO;AAAA,MACL,oCAAA,EAAsC,OAAO,OAAA,CAAQ;AAAA;AACvD,GACF;AACF,CAAA;AAEA,MAAM,UAAU6B,aAAA,CAAU;AAAA,EACxB,IAAA,EAAM;AAAA,IACJ,SAAA,EAAW;AAAA,GACb;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,SAAA,EAAW;AAAA;AAEf,CAAC,CAAA;AAEM,MAAM9B,WAAA,GAAY,CAAC,iBAAA,KAA8B;AACtD,EAAA,OAAOE,OAAA,CAAI;AAAA,IACT,OAAA,EAAS,MAAA;AAAA,IACT,KAAA,EAAO,MAAA;AAAA,IACP,MAAA,EAAQ,MAAA;AAAA,IACR,UAAA,EAAY,aAAA;AAAA,IACZ,QAAA,EAAU,UAAA;AAAA,IACV,QAAA,EAAU,QAAA;AAAA,IACV,YAAA,EAAc,KAAA;AAAA,IACd,WAAA,EAAa;AAAA,MACX,OAAA,EAAS,IAAA;AAAA,MACT,QAAA,EAAU,UAAA;AAAA,MACV,GAAA,EAAK,CAAA;AAAA,MACL,IAAA,EAAM,CAAA;AAAA,MACN,KAAA,EAAO,MAAA;AAAA,MACP,MAAA,EAAQ,MAAA;AAAA,MACR,SAAA,EAAW,CAAA,EAAG,OAAO,CAAA,CAAA,EAAI,iBAAiB,CAAA,sBAAA,CAAA;AAAA,MAC1C,SAAA,EAAW,mBAAA;AAAA,MACX,UAAA,EACE;AAAA;AACJ,GACD,CAAA;AACH,CAAA;;ACrCO,MAAM,eAAA,GAAkB,CAAC,EAAE,iBAAA,GAAoB,GAAE,KAA4B;AAClF,EAAA,MAAM,MAAA,GAASF,YAAU,iBAAiB,CAAA;AAE1C,EAAA,uBACEqB,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA1B,cAAA,CAACiC,+BAAA,EAAA,EAAmB,SAAA,EAAWF,cAAA,EAAa,EAAG,kBAAkB,IAAA,EAAM,CAAA;AAAA,oBACvE/B,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,EAAQ;AAAA,GAAA,EAC1B,CAAA;AAEJ;;AChBO,MAAM,eAAA,GAAkB,CAAC,KAAA,MAAmB;AAAA,EACjD,MAAA,EAAQ,CAAA,WAAA,EAAc,KAAA,GAAQ,EAAE,CAAA,IAAA;AAClC,CAAA,CAAA;;ACAO,MAAM,4BAA4B,CAAC;AAAA,EACxC,WAAA;AAAA,EACA,WAAA,GAAc,CAAA;AAAA,EACd,QAAA,GAAW;AACb,CAAA,KAIM;AACJ,EAAA,OAAO,CAAA;AAAA;AAAA,IAAA,EAEH,WAAW,CAAA;AAAA,IAAA,EACX,WAAW,IAAI,WAAW,CAAA;AAAA,gBAAA,EACd,WAAW,CAAA;AAAA,gBAAA,EACX,QAAQ,CAAA,GAAA,CAAA;AAC1B,CAAA;AAEO,MAAM,gBAAA,GAAmB,MAC9BM,OAAA,CAAI;AAAA,EACF,OAAA,EAAS,MAAA;AAAA,EACT,MAAA,EAAQ;AACV,CAAC,CAAA;AAEI,MAAMF,cAAY,CAAmB;AAAA,EAC1C,KAAA;AAAA,EACA,KAAA,GAAQ;AACV,CAAA,KAA4D;AAC1D,EAAA,MAAM,EAAE,MAAA,EAAO,GAAIC,6BAAgB,EAAE,SAAA,EAAW,OAAO,CAAA;AACvD,EAAA,MAAM,WAAW,CAAC,OAAA,EAAS,QAAQ,CAAA,CAAE,SAAS,KAAK,CAAA;AAEnD,EAAA,MAAM,kBAAkB,yBAAA,CAA0B;AAAA,IAChD,WAAA,EACE,UAAU,QAAA,GAAW,MAAA,CAAO,OAAO,SAAA,CAAU,KAAA,GAAQ,MAAA,CAAO,MAAA,CAAO,SAAA,CAAU;AAAA,GAChF,CAAA;AAED,EAAA,OAAOC,OAAA,CAAI;AAAA,IACT,MAAA,EAAQ,WAAW,SAAA,GAAY,MAAA;AAAA,IAC/B,YAAA,EAAc,OAAO,YAAA,CAAa,EAAA;AAAA,IAClC,kBAAA,EAAoB,MAAA;AAAA,IACpB,wBAAA,EAA0B,aAAA;AAAA,IAC1B,kBAAA,EAAoB,gCAAA;AAAA,IACpB,UAAA,EAAY,WAAW,MAAA,CAAO,MAAA,CAAO,QAAQ,IAAA,GAAO,MAAA,CAAO,OAAO,SAAA,CAAU,WAAA;AAAA,IAC5E,eAAA;AAAA,IACA,OAAA,EAAS,KAAA,KAAU,QAAA,GAAW,GAAA,GAAM,MAAA;AAAA,IACpC,SAAA,EAAW,KAAA,KAAU,QAAA,GAAW,MAAA,CAAO,WAAW,EAAA,GAAK,MAAA;AAAA,IACvD,GAAI,QAAA,GAAW,eAAA,CAAgB,KAAK,IAAI;AAAC,GAC1C,CAAA;AACH,CAAA;;AC/CA,MAAM,uBAAuB,CAC3B;AAAA,EACE,UAAA;AAAA,EACA,KAAA,GAAQ,SAAA;AAAA,EACR,KAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA,GAAQ,GAAA;AAAA,EACR,QAAA,GAAW,CAAA;AAAA,EACX,WAAA;AAAA,EACA;AACF,CAAA,EACA,GAAA,KACG;AACH,EAAA,MAAM,KAAA,GAAQ,GAAG,IAAA,CAAK,GAAA,CAAK,QAAQ,KAAA,GAAS,GAAA,EAAK,QAAQ,CAAC,CAAA,CAAA,CAAA;AAE1D,EAAA,uBACEN,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAWmC,sBAAK/B,WAAA,CAAU,EAAE,OAAO,KAAA,EAAO,CAAA,EAAG,gBAAA,EAAkB,CAAA;AAAA,MAC/D,aAAa,WAAA,IAAe,WAAA,CAAY,EAAE,GAAA,EAAK,YAAY,CAAA;AAAA,MAC3D,YAAY,UAAA,IAAc,UAAA,CAAW,EAAE,GAAA,EAAK,YAAY,CAAA;AAAA,MACxD,KAAA,EAAO,EAAE,KAAA;AAAM;AAAA,GACjB;AAEJ,CAAA;AAEA,oBAAA,CAAqB,WAAA,GAAc,qBAAA;AAE5B,MAAM,mBAAA,GAAsBgC,sBAAA,CAAM,UAAA,CAAW,oBAAoB;;AC9BjE,MAAMhC,WAAA,GAAY,CAAC,EAAE,MAAA,EAAO,KAA0B;AAC3D,EAAA,MAAM;AAAA,IACJ,UAAA,EAAY,EAAE,OAAA;AAAQ,GACxB,GAAIC,4BAAA,CAAgB,EAAE,SAAA,EAAW,OAAO,CAAA;AAExC,EAAA,OAAO;AAAA,IACL,WAAWC,OAAA,CAAI;AAAA,MACb,OAAA,EAAS,MAAA;AAAA,MACT,KAAA,EAAO,MAAA;AAAA,MACP,MAAA;AAAA,MACA,KAAK,OAAA,CAAQ;AAAA,KACd;AAAA,GACH;AACF,CAAA;;ACZO,MAAMF,WAAA,GAAY,CAAC,KAAA,KAAkB;AAC1C,EAAA,MAAM;AAAA,IACJ,MAAA;AAAA,IACA,UAAA,EAAY,EAAE,OAAA,EAAS,UAAA;AAAW,GACpC,GAAIC,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,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,OAAA;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,OAAOA,OAAA,CAAI;AAAA,MACT,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;AAAA,MAElC,UAAA,EAAY,MAAA;AAAA,MACZ,KAAA,EAAO,MAAA,CAAO,MAAA,CAAO,IAAA,CAAK,OAAA;AAAA,MAC1B,UAAA,EAAY;AAAA,KACb,CAAA;AAAA,IACD,OAAOA,OAAA,CAAI;AAAA;AAAA,MAET,UAAA,EAAY,MAAA;AAAA,MACZ,KAAA,EAAO,MAAA,CAAO,MAAA,CAAO,IAAA,CAAK;AAAA,KAC3B,CAAA;AAAA,IACD,OAAOA,OAAA,CAAI;AAAA,MACT,KAAA,EAAO,MAAA,CAAO,MAAA,CAAO,OAAA,CAAQ,IAAA;AAAA,MAC7B,IAAA,EAAM,cAAA;AAAA,MACN,GAAG,gBAAgB,KAAK;AAAA,KACzB;AAAA,GACH;AACF,CAAA;;AC5BA,MAAM+B,4BAA+D,CAAC;AAAA,EACpE,KAAA;AAAA,EACA;AACF,CAAA,KAAM;AACJ,EAAA,MAAM,WAAA,GAAc,QAAQ,GAAA,GAAM,OAAA,GAAU,GAAG,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAC,CAAA,CAAA;AAE/D,EAAA,uBACEZ,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAD,eAAA,CAAC,MAAA,EAAA,EAAK,WAAW,cAAA,EAAiB,QAAA,EAAA;AAAA,MAAA,WAAA;AAAA,MAAY;AAAA,KAAA,EAAC,CAAA;AAAA,IAAO;AAAA,GAAA,EACxD,CAAA;AAEJ,CAAA;AAEO,MAAM,6BAA6B,CAAmB;AAAA,EAC3D,OAAA;AAAA,EACA,SAAA,GAAY,KAAA;AAAA,EACZ,SAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA,GAAQ,GAAA;AAAA,EACR,KAAA;AAAA,EACA,aAAA,GAAgBY,yBAAA;AAAA,EAChB;AACF,CAAA,KAA0C;AACxC,EAAA,MAAM,MAAA,GAASjC,YAAU,KAAK,CAAA;AAE9B,EAAA,uBACEJ,cAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,OAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA;AAAA,MACA,cAAA;AAAA,MAEA,QAAA,kBAAAA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,SACrB,QAAA,kBAAAA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,OAAA,EACrB,QAAA,kBAAAyB,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAO,OAAA,EACrB,QAAA,EAAA;AAAA,wBAAAzB,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,KAAA,EAAQ,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,wBACrCA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,OACpB,QAAA,EAAA,aAAA,CAAc,EAAE,KAAA,EAAO,KAAA,EAAO,KAAA,EAAO,cAAA,EAAgB,MAAA,CAAO,KAAA,EAAO,CAAA,EACtE;AAAA,OAAA,EACF,GACF,CAAA,EACF;AAAA;AAAA,GACF;AAEJ;;ACjEO,MAAMI,WAAA,GAAY,CAAC,MAAA,KAAmB;AAC3C,EAAA,OAAOE,OAAA,CAAI;AAAA,IACT,KAAA,EAAO,MAAA;AAAA,IACP,MAAA,EAAQ,GAAG,MAAM,CAAA,EAAA,CAAA;AAAA,IACjB,YAAA,EAAc,KAAA;AAAA,IACd,QAAA,EAAU;AAAA,GACX,CAAA;AACH,CAAA;;ACTO,MAAM,4BAAA,GAA+B,EAAA;;ACWrC,MAAM,uBAAuB,CAAC;AAAA,EACnC,MAAA,GAAS;AACX,CAAA,KAAiC;AAC/B,EAAA,MAAM,MAAA,GAASF,YAAU,MAAM,CAAA;AAE/B,EAAA,sCACG,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,EACd,QAAA,kBAAAJ,cAAA,CAAC,mBAAgB,CAAA,EACnB,CAAA;AAEJ;;AClBO,MAAM,eAAe,MAAoB;AAC9C,EAAA,MAAM,EAAE,MAAA,EAAO,GAAIK,6BAAgB,EAAE,SAAA,EAAW,OAAO,CAAA;AAEvD,EAAA,OAAO;AAAA,IACL,IAAA,EAAM;AAAA,MACJ,wCAAA,EAA0C,OAAO,OAAA,CAAQ;AAAA,KAC3D;AAAA,IACA,KAAA,EAAO;AAAA,MACL,wCAAA,EAA0C,OAAO,OAAA,CAAQ;AAAA;AAC3D,GACF;AACF,CAAA;AAEO,MAAM,SAAA,GAAY,CAAC,MAAA,KAAmB;AAC3C,EAAA,MAAM;AAAA,IACJ,MAAA;AAAA,IACA,UAAA,EAAY,EAAE,UAAA,EAAY,OAAA;AAAQ,GACpC,GAAIA,4BAAA,CAAgB,EAAE,SAAA,EAAW,OAAO,CAAA;AAExC,EAAA,OAAO;AAAA,IACL,WAAWC,OAAA,CAAI;AAAA,MACb,OAAA,EAAS,MAAA;AAAA,MACT,IAAA,EAAM,CAAA;AAAA,MACN,KAAA,EAAO,MAAA;AAAA,MACP,MAAA,EAAQ,GAAG,MAAM,CAAA,EAAA,CAAA;AAAA,MACjB,UAAA,EAAY,QAAA;AAAA,MACZ,cAAA,EAAgB,QAAA;AAAA,MAChB,KAAK,OAAA,CAAQ,EAAA;AAAA,MACb,YAAA,EAAc,OAAO,YAAA,CAAa,EAAA;AAAA,MAClC,KAAA,EAAO,MAAA,CAAO,MAAA,CAAO,IAAA,CAAK,SAAA;AAAA,MAC1B,UAAA,EAAY,WAAW,UAAA,CAAW,EAAA;AAAA,MAClC,QAAA,EAAU,UAAA,CAAW,QAAA,CAAS,EAAA,CAAG,EAAA;AAAA,MACjC,YAAY,OAAA,CAAQ,GAAA;AAAA,MACpB,UAAA,EAAY;AAAA,KACb,CAAA;AAAA,IACD,OAAOA,OAAA,CAAI;AAAA,MACT,UAAA,EAAY,WAAW,UAAA,CAAW,MAAA;AAAA,MAClC,aAAA,EAAe;AAAA,KAChB;AAAA,GACH;AACF,CAAA;;ACVA,MAAM,0BAA8D,CAAC,EAAE,MAAA,EAAQ,SAAA,uBAC7EmB,eAAA,CAAAC,mBAAA,EAAA,EAAE,QAAA,EAAA;AAAA,EAAA,cAAA;AAAA,kBACY1B,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAuB,QAAA,EAAA,MAAA,EAAO;AAAA,CAAA,EAClD,CAAA;AAGK,MAAM,qBAAqB,CAAC;AAAA,EACjC,MAAA,GAAS,4BAAA;AAAA,EACT,MAAA,GAAS,SAAA;AAAA,EACT,aAAA,GAAgB;AAClB,CAAA,KAA+B;AAC7B,EAAA,MAAM,MAAA,GAAS,UAAU,MAAM,CAAA;AAE/B,EAAA,uBACEyB,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA1B,cAAA,CAACiC,+BAAA,EAAA,EAAmB,SAAA,EAAW,YAAA,EAAa,EAAG,kBAAkB,IAAA,EAAM,CAAA;AAAA,oBACvER,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,SAAA,EACrB,QAAA,EAAA;AAAA,sBAAAzB,cAAA,CAAC8B,OAAA,EAAA,EAAK,IAAA,EAAK,sBAAA,EAAuB,IAAA,EAAK,IAAA,EAAK,CAAA;AAAA,sBAC5C9B,cAAA,CAAC,UAAM,QAAA,EAAA,aAAA,CAAc,EAAE,QAAQ,SAAA,EAAW,MAAA,CAAO,KAAA,EAAO,CAAA,EAAE;AAAA,KAAA,EAC5D;AAAA,GAAA,EACF,CAAA;AAEJ;;ACwBO,MAAM,eAAe,CAAmB;AAAA,EAC7C,UAAA;AAAA,EACA,qBAAA,EAAuB,4BAAA;AAAA,EACvB,UAAA,GAAa,KAAA;AAAA,EACb,QAAA,GAAW,KAAA;AAAA,EACX,SAAA,GAAY,eAAA;AAAA,EACZ,MAAA,GAAS,4BAAA;AAAA,EACT,kBAAA;AAAA,EACA,iBAAA;AAAA,EACA,MAAA,GAAS,SAAA;AAAA,EACT;AACF,CAAA,KAA4B;AAC1B,EAAA,IAAI,cAAc,CAAC,UAAA,EAAY,uBAAOA,cAAA,CAAC,wBAAqB,MAAA,EAAgB,CAAA;AAE5E,EAAA,IAAI,qBAAA,GAAwBY,aAAuB,IAAI,CAAA;AACvD,EAAA,MAAM,CAAC,qBAAA,EAAuB,wBAAwB,CAAA,GAAId,cAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQxD;AAAA,GACF;AACA,EAAA,MAAM,CAAC,SAAA,EAAW,UAAU,CAAA,GAAIA,eAAkB,KAAK,CAAA;AACvD,EAAA,MAAM,KAAA,GAAQc,aAA2B,MAAS,CAAA;AAElD,EAAA,MAAM,iBAAA,GAAoB0B,cAAQ,MAAM;AACtC,IAAA,IAAI,cAAmB,EAAC;AAExB,IAAA,KAAA,MAAW,cAAc,UAAA,EAAY;AACnC,MAAA,WAAA,CAAY,KAAK,UAAU,CAAA;AAAA,IAC7B;AAEA,IAAA,QAAQ,SAAA;AAAW,MACjB,KAAK,eAAA;AACH,QAAA,OAAO,WAAA,CAAY,IAAA,CAAK,CAAC,CAAA,EAAG,CAAA,KAAM,UAAA,CAAW,CAAC,CAAA,CAAE,KAAA,GAAQ,UAAA,CAAW,CAAC,CAAA,CAAE,KAAK,CAAA;AAAA,MAC7E,KAAK,gBAAA;AACH,QAAA,OAAO,WAAA,CAAY,IAAA,CAAK,CAAC,CAAA,EAAG,CAAA,KAAM,UAAA,CAAW,CAAC,CAAA,CAAE,KAAA,GAAQ,UAAA,CAAW,CAAC,CAAA,CAAE,KAAK,CAAA;AAAA,MAC7E;AACE,QAAA,OAAO,WAAA;AAAA;AACX,EACF,CAAA,EAAG,CAAC,UAAA,EAAY,SAAS,CAAC,CAAA;AAK1B,EAAA,MAAM,KAAA,GAAQA,aAAA;AAAA,IACZ,MACE,IAAA,CAAK,KAAA;AAAA,MACH,MAAA,CAAO,OAAA,CAA8B,UAAU,CAAA,CAAE,MAAA;AAAA,QAC/C,CAAC,GAAA,EAAK,GAAG,QAAQ,CAAA,KAAM,MAAM,QAAA,CAAS,KAAA;AAAA,QACtC;AAAA;AACF,KACF;AAAA,IACF,CAAC,UAAU;AAAA,GACb;AAEA,EAAA,MAAM,MAAA,GAASlC,WAAA,CAAU,EAAE,MAAA,EAAQ,CAAA;AAEnC,EAAA,MAAM,cACJ,CAAC,EAAE,GAAA,EAAK,UAAA,OACR,MAAM;AACJ,IAAA,YAAA,CAAa,MAAM,OAAO,CAAA;AAC1B,IAAA,UAAA,CAAW,IAAI,CAAA;AAMf,IAAA,IAAI,CAAC,4BAAA,EAA8B;AACjC,MAAA,wBAAA,CAAyB,UAAU,CAAA;AAAA,IACrC;AAEA,IAAA,IAAI,kBAAA,EAAoB,kBAAA,CAAmB,EAAE,GAAA,EAAK,YAAY,CAAA;AAAA,EAChE,CAAA;AAEF,EAAA,MAAM,aACJ,CAAC,EAAE,GAAA,EAAK,UAAA,OACR,MAAM;AAMJ,IAAA,KAAA,CAAM,OAAA,GAAU,MAAA,CAAO,UAAA,CAAW,MAAM;AACtC,MAAA,UAAA,CAAW,KAAK,CAAA;AAKhB,MAAA,IAAI,CAAC,4BAAA,EAA8B;AACjC,QAAA,wBAAA,CAAyB,MAAS,CAAA;AAAA,MACpC;AAAA,IACF,GAAG,EAAE,CAAA;AAEL,IAAA,IAAI,iBAAA,EAAmB,iBAAA,CAAkB,EAAE,GAAA,EAAK,YAAY,CAAA;AAAA,EAC9D,CAAA;AAMF,EAAA,IACE,4BAAA,IACA,iBAAA,CAAkB,OAAA,CAAQ,4BAA4B,CAAA,KAAM,EAAA;AAE5D,IAAA,uBACEJ,cAAA,CAAC,kBAAA,EAAA,EAAmB,MAAA,EAAgB,MAAA,EAAgB,eAAe,mBAAA,EAAqB,CAAA;AAG5F,EAAA,MAAM,sBACJ,4BAAA,GACI;AAAA,IACE,GAAG,WAAW,4BAA4B,CAAA;AAAA,IAC1C,KAAA,EAAO,iBAAA,CAAkB,OAAA,CAAQ,4BAA4B;AAAA,GAC/D,GACA,MAAA;AAON,EAAA,MAAM,OAAA,mBACJA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,WACpB,QAAA,EAAA,iBAAA,CAAkB,GAAA,CAAI,CAAC,UAAA,EAAY,aAAA,KAAkB;AACpD,IAAA,MAAM,QAAA,GAAW,WAAW,UAAU,CAAA;AACtC,IAAA,MAAM,GAAA,GAAMY,aAAuB,IAAI,CAAA;AAEvC,IAAA,MAAM,gBAAgB,MAAgC;AACpD,MAAA,QAAQ,IAAA;AAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAQZ,MAAK,CAAC,4BAAA,IAAgC,qBAAA,KAA0B,cAAc,CAAC,QAAA;AAAA,QAC/E,MAAK,4BAAA,KAAiC,UAAA,IAAc,SAAA,IAAa,CAAC,QAAA;AAChE,UAAA,OAAO,QAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAUT,MAAK,CAAC,4BAAA,IAAgC,CAAC,yBAAyB,CAAC,QAAA;AAAA,QACjE,MAAK,4BAAA,KAAiC,UAAA,IAAc,CAAC,QAAA;AACnD,UAAA,OAAO,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMT,MAAK,OAAA,CAAQ,4BAA4B,CAAA,IACvC,iCAAiC,UAAA,IACjC,QAAA;AAAA,QACF,MAAK,CAAC,4BAAA,IAAgC,CAAC,qBAAA,IAAyB,QAAA;AAAA,QAChE,MAAK,0BAA0B,UAAA,IAAc,QAAA;AAC3C,UAAA,OAAO,QAAA;AAAA;AAAA;AAAA;AAAA,QAKT;AACE,UAAA,OAAO,SAAA;AAAA;AACX,IACF,CAAA,GAAG;AAEH,IAAA,MAAM,OAAA,mBACJZ,cAAA;AAAA,MAAC,mBAAA;AAAA,MAAA;AAAA,QAEC,GAAA;AAAA,QACA,UAAA;AAAA,QACA,KAAA,EAAO,aAAA;AAAA,QACP,OAAO,QAAA,CAAS,KAAA;AAAA,QAChB,OAAO,QAAA,CAAS,KAAA;AAAA,QAChB,KAAA;AAAA,QACA,KAAA,EAAO,YAAA;AAAA,QACP,WAAA;AAAA,QACA;AAAA,OAAA;AAAA,MATK;AAAA,KAUP;AAGF,IAAA,IAAI,UAAA,KAAe,8BAA8B,qBAAA,GAAwB,GAAA;AACzE,IAAA,IAAI,CAAC,IAAI,OAAA,EAAS;AAChB,MAAA,OAAA,CAAQ,GAAA,CAAI,UAAA,EAAY,cAAA,EAAgB,GAAG,CAAA;AAAA,IAC7C;AAMA,IAAA,OAAO,+BACL,OAAA,mBAEAA,cAAA;AAAA,MAAC,0BAAA;AAAA,MAAA;AAAA,QAEC,OAAO,QAAA,CAAS,KAAA;AAAA,QAChB,OAAO,QAAA,CAAS,KAAA;AAAA,QAChB,KAAA,EAAO,aAAA;AAAA,QACP,SAAA,EAAW,CAAA;AAAA,QACX,OAAA,EAAS;AAAA,OAAA;AAAA,MALJ;AAAA,KAMP;AAAA,EAEJ,CAAC,CAAA,EACH,CAAA;AAQF,EAAA,OAAO,gCAAgC,mBAAA,mBACrCA,cAAA;AAAA,IAAC,0BAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,CAAA;AAAA,MACX,OAAA,EAAS,OAAA;AAAA,MACT,cAAA,EAAgB,qBAAA;AAAA,MACf,GAAG;AAAA;AAAA,GACN,GAEA,OAAA;AAEJ;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}

package/dist/cjs/index.d.cts

@@ -147,7 +147,7 @@ type MouseEventHandler = ({ categoryId, ref, }: {
     categoryId: string;
     ref: React.ForwardedRef<HTMLDivElement>;
 }) => void;
-interface CommonStackedChartProps<T extends string> {
+interface SkeletonStackedChartProps<T extends string> {
     /**
      * How should category segments be sorted?
      */
@@ -179,23 +179,17 @@ interface CommonStackedChartProps<T extends string> {
      */
     period?: string;
     formatNoDataMessage?: StackedChartNoDataProps['formatMessage'];
-}
-interface SkeletonStackedChartProps<T extends string> extends CommonStackedChartProps<T> {
-    isSkeleton: true;
     /**
-     * Array of StackedChartCategory to build the chart from
+     * Is the StackedChart explicitly in a loading state?
      */
-    categories?: StackedChartCategories<T>;
-}
-interface LoadedStackedChartProps<T extends string> extends CommonStackedChartProps<T> {
-    isSkeleton?: false;
+    isSkeleton?: boolean;
     /**
      * Array of StackedChartCategory to build the chart from
      */
-    categories: StackedChartCategories<T>;
+    categories?: StackedChartCategories<T>;
 }
-type StackedChartProps<T extends string> = SkeletonStackedChartProps<T> | LoadedStackedChartProps<T>;
-declare const StackedChart: <T extends string>(props: StackedChartProps<T>) => react_jsx_runtime.JSX.Element;
+type StackedChartProps<T extends string> = SkeletonStackedChartProps<T>;
+declare const StackedChart: <T extends string>({ categories, highlightedCategoryId: initialHighlightedCategoryId, isSkeleton, isDimmed, sortOrder, height, onSegmentMouseOver, onSegmentMouseOut, period, formatNoDataMessage, }: StackedChartProps<T>) => react_jsx_runtime.JSX.Element;
 
 /**
  * A segment can be in one of four states:
@@ -318,4 +312,4 @@ interface FormatNumberOptions {
 declare const formatNumber: (value: number | string | "loading", options?: FormatNumberOptions) => string;
 
 export { ColorMode, ColorModeChangeHandler, ColorModeProvider, ComparisonBadge, ComparisonTooltip, GenericSkeleton, Popover, StackedChart, StackedChartNoData, StackedChartSegment, StackedChartSegmentTooltip, StackedChartSkeleton, calculateComparison, formatNumber, useColorMode, useColorModeChange };
-export type { ColorModeChangeProps, ColorModeContextType, ColorModeProviderProps, ColorModeWrapper, CommonStackedChartProps, ComparisonResult, ComparisonTooltipProps, FormatNumberOptions, GenericSkeletonProps, LoadedStackedChartProps, PopoverProps, SkeletonStackedChartProps, StackedChartCategories, StackedChartCategory, StackedChartNoDataMessageFormatter, StackedChartNoDataProps, StackedChartProps, StackedChartSegmentTooltipProps, StackedChartSkeletonProps, StackedChartSortOrder, StackedChartTooltipContentFormatter };
+export type { ColorModeChangeProps, ColorModeContextType, ColorModeProviderProps, ColorModeWrapper, ComparisonResult, ComparisonTooltipProps, FormatNumberOptions, GenericSkeletonProps, PopoverProps, SkeletonStackedChartProps, StackedChartCategories, StackedChartCategory, StackedChartNoDataMessageFormatter, StackedChartNoDataProps, StackedChartProps, StackedChartSegmentTooltipProps, StackedChartSkeletonProps, StackedChartSortOrder, StackedChartTooltipContentFormatter };

package/dist/esm/components/StackedChart/StackedChart.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { Component, useRef, useState, useMemo } from 'react';
+import { useRef, useState, useMemo } from 'react';
 import { StackedChartSegment } from '../StackedChartSegment/StackedChartSegment.js';
 import { getStyles } from './StackedChart.styles.js';
 import { StackedChartSegmentTooltip } from '../StackedChartSegmentTooltip/StackedChartSegmentTooltip.js';
@@ -7,25 +7,7 @@ import { StackedChartSkeleton } from '../StackedChartSkeleton/StackedChartSkelet
 import { StackedChartNoData } from '../StackedChartNoData/StackedChartNoData.js';
 import { STACKED_CHART_DEFAULT_HEIGHT } from './common.js';
 
-class StackedChartErrorBoundary extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { hasError: false };
-  }
-  static getDerivedStateFromError() {
-    return { hasError: true };
-  }
-  componentDidCatch(error, errorInfo) {
-    console.error("StackedChart rendering error:", error, errorInfo);
-  }
-  render() {
-    if (this.state.hasError) {
-      return /* @__PURE__ */ jsx(StackedChartNoData, { height: this.props.height });
-    }
-    return this.props.children;
-  }
-}
-const StackedChartInner = ({
+const StackedChart = ({
   categories,
   highlightedCategoryId: initialHighlightedCategoryId,
   isSkeleton = false,
@@ -101,7 +83,6 @@ const StackedChartInner = ({
   const content = /* @__PURE__ */ jsx("div", { className: styles.container, children: sortedCategoryIds.map((categoryId, categoryIndex) => {
     const category = categories[categoryId];
     const ref = useRef(null);
-    if (categoryId === initialHighlightedCategoryId) highlightedSegmentRef = ref;
     const segmentState = (() => {
       switch (true) {
         /**
@@ -155,6 +136,10 @@ const StackedChartInner = ({
       },
       categoryId
     );
+    if (categoryId === initialHighlightedCategoryId) highlightedSegmentRef = ref;
+    if (!ref.current) {
+      console.log(categoryId, "ref is unset", ref);
+    }
     return initialHighlightedCategoryId ? segment : /* @__PURE__ */ jsx(
       StackedChartSegmentTooltip,
       {
@@ -177,9 +162,6 @@ const StackedChartInner = ({
     }
   ) : content;
 };
-const StackedChart = (props) => {
-  return /* @__PURE__ */ jsx(StackedChartErrorBoundary, { height: props.height || STACKED_CHART_DEFAULT_HEIGHT, children: /* @__PURE__ */ jsx(StackedChartInner, { ...props }) });
-};
 
 export { StackedChart };
 //# sourceMappingURL=StackedChart.js.map

package/dist/esm/components/StackedChart/StackedChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"StackedChart.js","sources":["../../../../src/components/StackedChart/StackedChart.tsx"],"sourcesContent":["import { Component, useMemo, useRef, useState } from 'react';\nimport { StackedChartSegment } from '../StackedChartSegment';\nimport { getStyles } from './StackedChart.styles';\nimport { StackedChartSegmentState, SegmentMouseEventHandler } from '../StackedChartSegment/types';\nimport { StackedChartSegmentTooltip } from '../StackedChartSegmentTooltip';\nimport { StackedChartSkeleton } from '../StackedChartSkeleton';\nimport { StackedChartNoData, StackedChartNoDataProps } from '../StackedChartNoData';\nimport { STACKED_CHART_DEFAULT_HEIGHT } from './common';\n\nclass StackedChartErrorBoundary extends Component<\n  { children: React.ReactNode; height: number },\n  { hasError: boolean }\n> {\n  constructor(props: { children: React.ReactNode; height: number }) {\n    super(props);\n    this.state = { hasError: false };\n  }\n\n  static getDerivedStateFromError() {\n    return { hasError: true };\n  }\n\n  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {\n    console.error('StackedChart rendering error:', error, errorInfo);\n  }\n\n  render() {\n    if (this.state.hasError) {\n      return <StackedChartNoData height={this.props.height} />;\n    }\n\n    return this.props.children;\n  }\n}\n\nexport interface StackedChartCategory {\n  title: string;\n  value: number;\n}\n\nexport type StackedChartCategories<T extends string> = Record<T, StackedChartCategory>;\n\nexport type StackedChartSortOrder = 'largest-first' | 'smallest-first' | 'natural';\n\ntype MouseEventHandler = ({\n  categoryId,\n  ref,\n}: {\n  categoryId: string;\n  ref: React.ForwardedRef<HTMLDivElement>;\n}) => void;\n\nexport interface CommonStackedChartProps<T extends string> {\n  /**\n   * How should category segments be sorted?\n   */\n  sortOrder?: StackedChartSortOrder;\n\n  /**\n   * Height to render the stacked chart, in pixels\n   */\n  height?: number;\n\n  /**\n   * initial category ID to highlight; if omitted then all segments will render\n   * in colour and highlight based on mouseover events.\n   */\n  highlightedCategoryId?: T;\n\n  /**\n   * Should the whole StackedChart be dimmed, i.e. with a highlighted category\n   * not in color, all other categories faded out?\n   */\n  isDimmed?: boolean;\n\n  /**\n   * Event handler for whenever a segment gets a mouseover event\n   */\n  onSegmentMouseOver?: MouseEventHandler;\n\n  /**\n   * Event handler for whenever a segment gets a mouseout event\n   */\n  onSegmentMouseOut?: MouseEventHandler;\n\n  /**\n   * String representing the period for which the chart is displaying data\n   */\n  period?: string;\n\n  formatNoDataMessage?: StackedChartNoDataProps['formatMessage'];\n}\n\nexport interface SkeletonStackedChartProps<T extends string> extends CommonStackedChartProps<T> {\n  isSkeleton: true;\n\n  /**\n   * Array of StackedChartCategory to build the chart from\n   */\n  categories?: StackedChartCategories<T>;\n}\n\nexport interface LoadedStackedChartProps<T extends string> extends CommonStackedChartProps<T> {\n  isSkeleton?: false;\n\n  /**\n   * Array of StackedChartCategory to build the chart from\n   */\n  categories: StackedChartCategories<T>;\n}\n\nexport type StackedChartProps<T extends string> =\n  | SkeletonStackedChartProps<T>\n  | LoadedStackedChartProps<T>;\n\nconst StackedChartInner = <T extends string>({\n  categories,\n  highlightedCategoryId: initialHighlightedCategoryId,\n  isSkeleton = false,\n  isDimmed = false,\n  sortOrder = 'largest-first',\n  height = STACKED_CHART_DEFAULT_HEIGHT,\n  onSegmentMouseOver,\n  onSegmentMouseOut,\n  period = 'current',\n  formatNoDataMessage,\n}: StackedChartProps<T>) => {\n  if (isSkeleton || !categories) return <StackedChartSkeleton height={height} />;\n\n  let highlightedSegmentRef = useRef<HTMLDivElement>(null);\n  const [highlightedCategoryId, setHighlightedCategoryId] = useState<string | undefined>(\n    /**\n     * Using a type assertion here ultimately because you can’t pass a generic\n     * type argument to the type of props in React.forwardRef (it is inferred as\n     * of type string).\n     *\n     * See: https://stackoverflow.com/questions/51884498/using-react-forwardref-with-typescript-generic-jsx-arguments\n     */\n    initialHighlightedCategoryId as string,\n  );\n  const [isHovered, setHovered] = useState<boolean>(false);\n  const timer = useRef<number | undefined>(undefined);\n\n  const sortedCategoryIds = useMemo(() => {\n    let categoryIds: T[] = [];\n\n    for (const categoryId in categories) {\n      categoryIds.push(categoryId);\n    }\n\n    switch (sortOrder) {\n      case 'largest-first':\n        return categoryIds.sort((a, b) => categories[b].value - categories[a].value);\n      case 'smallest-first':\n        return categoryIds.sort((a, b) => categories[a].value - categories[b].value);\n      default:\n        return categoryIds;\n    }\n  }, [categories, sortOrder]);\n\n  /**\n   * Determine what the total value is for all category valeus combined\n   */\n  const total = useMemo(\n    () =>\n      Math.round(\n        Object.entries<StackedChartCategory>(categories).reduce(\n          (sum, [, category]) => sum + category.value,\n          0,\n        ),\n      ),\n    [categories],\n  );\n\n  const styles = getStyles({ height });\n\n  const onMouseOver: SegmentMouseEventHandler =\n    ({ ref, categoryId }) =>\n    () => {\n      clearTimeout(timer.current);\n      setHovered(true);\n\n      /**\n       * Only update the highlighted category ID if an initial category wasn’t\n       * supplied\n       */\n      if (!initialHighlightedCategoryId) {\n        setHighlightedCategoryId(categoryId);\n      }\n\n      if (onSegmentMouseOver) onSegmentMouseOver({ ref, categoryId });\n    };\n\n  const onMouseOut: SegmentMouseEventHandler =\n    ({ ref, categoryId }) =>\n    () => {\n      /**\n       * TODO: rather than use a timeout, maybe use the parent element being\n       * moused over (event bubbling?) to validate whether the mouse has left\n       * the entire chart vs an individual segment?\n       */\n      timer.current = window.setTimeout(() => {\n        setHovered(false);\n        /**\n         * Only clear the highlighted category if an initial category wasn’t\n         * supplied\n         */\n        if (!initialHighlightedCategoryId) {\n          setHighlightedCategoryId(undefined);\n        }\n      }, 50);\n\n      if (onSegmentMouseOut) onSegmentMouseOut({ ref, categoryId });\n    };\n\n  /**\n   * If the initial highlighted category isn’t within the provided set of\n   * categories, fall back to displaying the No Data component\n   */\n  if (\n    initialHighlightedCategoryId &&\n    sortedCategoryIds.indexOf(initialHighlightedCategoryId) === -1\n  )\n    return (\n      <StackedChartNoData height={height} period={period} formatMessage={formatNoDataMessage} />\n    );\n\n  const highlightedCategory: (StackedChartCategory & { index: number }) | undefined =\n    initialHighlightedCategoryId\n      ? {\n          ...categories[initialHighlightedCategoryId],\n          index: sortedCategoryIds.indexOf(initialHighlightedCategoryId),\n        }\n      : undefined;\n\n  /**\n   * This shouldn’t use Object.entries but rather a sorted list of category IDs,\n   * derived by the sortOrder prop\n   */\n\n  const content = (\n    <div className={styles.container}>\n      {sortedCategoryIds.map((categoryId, categoryIndex) => {\n        const category = categories[categoryId];\n        const ref = useRef<HTMLDivElement>(null);\n        if (categoryId === initialHighlightedCategoryId) highlightedSegmentRef = ref;\n\n        const segmentState = ((): StackedChartSegmentState => {\n          switch (true) {\n            /**\n             * If no initial highlighted category was set, and a category is\n             * moused over, use the _active_ state for that category rather\n             * than the color state; this adds a drop shadow to the segment.\n             * Also, if an initial highlighted category _was_ set, and it\n             * receives a hover event, also set it to active.\n             */\n            case !initialHighlightedCategoryId && highlightedCategoryId === categoryId && !isDimmed:\n            case initialHighlightedCategoryId === categoryId && isHovered && !isDimmed:\n              return 'active';\n\n            /**\n             * - no initial highlighted category ID was passed _and_ there is\n             *   no highlightedCategoryId (i.e. all segments in colour)\n             * - the highlighted category is this category (but the chart\n             *   isn’t dimmed)\n             * - the initial highlighted category is this category (but the\n             *   chart isn’t dimmed)\n             */\n            case !initialHighlightedCategoryId && !highlightedCategoryId && !isDimmed:\n            case initialHighlightedCategoryId === categoryId && !isDimmed:\n              return 'color';\n\n            /**\n             * Has an initial highlighted category, but is dimmed (i.e. all\n             * segments excepted the highlighted category)\n             */\n            case Boolean(initialHighlightedCategoryId) &&\n              initialHighlightedCategoryId !== categoryId &&\n              isDimmed:\n            case !initialHighlightedCategoryId && !highlightedCategoryId && isDimmed:\n            case highlightedCategoryId !== categoryId && isDimmed:\n              return 'dimmed';\n\n            /**\n             * In any other case, the segment should be the default grey\n             */\n            default:\n              return 'default';\n          }\n        })();\n\n        const segment = (\n          <StackedChartSegment\n            key={categoryId}\n            ref={ref}\n            categoryId={categoryId}\n            index={categoryIndex}\n            title={category.title}\n            value={category.value}\n            total={total}\n            state={segmentState}\n            onMouseOver={onMouseOver}\n            onMouseOut={onMouseOut}\n          />\n        );\n\n        /**\n         * Only wrap the segment in a tooltip if no initially highlighted\n         * category ID was supplied.\n         */\n        return initialHighlightedCategoryId ? (\n          segment\n        ) : (\n          <StackedChartSegmentTooltip\n            key={categoryId}\n            title={category.title}\n            value={category.value}\n            index={categoryIndex}\n            hideDelay={0}\n            trigger={segment}\n          />\n        );\n      })}\n    </div>\n  );\n\n  /**\n   * If an initial highlight category was provided, wrap the entire chart inside\n   * a tooltip using the props for the highlighted segment to drive the tooltip\n   * content.\n   */\n  return initialHighlightedCategoryId && highlightedCategory ? (\n    <StackedChartSegmentTooltip\n      hideDelay={0}\n      trigger={content}\n      virtualElement={highlightedSegmentRef}\n      {...highlightedCategory}\n    />\n  ) : (\n    content\n  );\n};\n\nexport const StackedChart = <T extends string>(props: StackedChartProps<T>) => {\n  return (\n    <StackedChartErrorBoundary height={props.height || STACKED_CHART_DEFAULT_HEIGHT}>\n      <StackedChartInner {...props} />\n    </StackedChartErrorBoundary>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"StackedChart.js","sources":["../../../../src/components/StackedChart/StackedChart.tsx"],"sourcesContent":["import { useMemo, useRef, useState } from 'react';\nimport { StackedChartSegment } from '../StackedChartSegment';\nimport { getStyles } from './StackedChart.styles';\nimport { StackedChartSegmentState, SegmentMouseEventHandler } from '../StackedChartSegment/types';\nimport { StackedChartSegmentTooltip } from '../StackedChartSegmentTooltip';\nimport { StackedChartSkeleton } from '../StackedChartSkeleton';\nimport { StackedChartNoData, StackedChartNoDataProps } from '../StackedChartNoData';\nimport { STACKED_CHART_DEFAULT_HEIGHT } from './common';\n\nexport interface StackedChartCategory {\n  title: string;\n  value: number;\n}\n\nexport type StackedChartCategories<T extends string> = Record<T, StackedChartCategory>;\n\nexport type StackedChartSortOrder = 'largest-first' | 'smallest-first' | 'natural';\n\ntype MouseEventHandler = ({\n  categoryId,\n  ref,\n}: {\n  categoryId: string;\n  ref: React.ForwardedRef<HTMLDivElement>;\n}) => void;\n\nexport interface SkeletonStackedChartProps<T extends string> {\n  /**\n   * How should category segments be sorted?\n   */\n  sortOrder?: StackedChartSortOrder;\n\n  /**\n   * Height to render the stacked chart, in pixels\n   */\n  height?: number;\n\n  /**\n   * initial category ID to highlight; if omitted then all segments will render\n   * in colour and highlight based on mouseover events.\n   */\n  highlightedCategoryId?: T;\n\n  /**\n   * Should the whole StackedChart be dimmed, i.e. with a highlighted category\n   * not in color, all other categories faded out?\n   */\n  isDimmed?: boolean;\n\n  /**\n   * Event handler for whenever a segment gets a mouseover event\n   */\n  onSegmentMouseOver?: MouseEventHandler;\n\n  /**\n   * Event handler for whenever a segment gets a mouseout event\n   */\n  onSegmentMouseOut?: MouseEventHandler;\n\n  /**\n   * String representing the period for which the chart is displaying data\n   */\n  period?: string;\n\n  formatNoDataMessage?: StackedChartNoDataProps['formatMessage'];\n\n  /**\n   * Is the StackedChart explicitly in a loading state?\n   */\n  isSkeleton?: boolean;\n\n  /**\n   * Array of StackedChartCategory to build the chart from\n   */\n  categories?: StackedChartCategories<T>;\n}\n\nexport type StackedChartProps<T extends string> = SkeletonStackedChartProps<T>;\n\nexport const StackedChart = <T extends string>({\n  categories,\n  highlightedCategoryId: initialHighlightedCategoryId,\n  isSkeleton = false,\n  isDimmed = false,\n  sortOrder = 'largest-first',\n  height = STACKED_CHART_DEFAULT_HEIGHT,\n  onSegmentMouseOver,\n  onSegmentMouseOut,\n  period = 'current',\n  formatNoDataMessage,\n}: StackedChartProps<T>) => {\n  if (isSkeleton || !categories) return <StackedChartSkeleton height={height} />;\n\n  let highlightedSegmentRef = useRef<HTMLDivElement>(null);\n  const [highlightedCategoryId, setHighlightedCategoryId] = useState<string | undefined>(\n    /**\n     * Using a type assertion here ultimately because you can’t pass a generic\n     * type argument to the type of props in React.forwardRef (it is inferred as\n     * of type string).\n     *\n     * See: https://stackoverflow.com/questions/51884498/using-react-forwardref-with-typescript-generic-jsx-arguments\n     */\n    initialHighlightedCategoryId as string,\n  );\n  const [isHovered, setHovered] = useState<boolean>(false);\n  const timer = useRef<number | undefined>(undefined);\n\n  const sortedCategoryIds = useMemo(() => {\n    let categoryIds: T[] = [];\n\n    for (const categoryId in categories) {\n      categoryIds.push(categoryId);\n    }\n\n    switch (sortOrder) {\n      case 'largest-first':\n        return categoryIds.sort((a, b) => categories[b].value - categories[a].value);\n      case 'smallest-first':\n        return categoryIds.sort((a, b) => categories[a].value - categories[b].value);\n      default:\n        return categoryIds;\n    }\n  }, [categories, sortOrder]);\n\n  /**\n   * Determine what the total value is for all category valeus combined\n   */\n  const total = useMemo(\n    () =>\n      Math.round(\n        Object.entries<StackedChartCategory>(categories).reduce(\n          (sum, [, category]) => sum + category.value,\n          0,\n        ),\n      ),\n    [categories],\n  );\n\n  const styles = getStyles({ height });\n\n  const onMouseOver: SegmentMouseEventHandler =\n    ({ ref, categoryId }) =>\n    () => {\n      clearTimeout(timer.current);\n      setHovered(true);\n\n      /**\n       * Only update the highlighted category ID if an initial category wasn’t\n       * supplied\n       */\n      if (!initialHighlightedCategoryId) {\n        setHighlightedCategoryId(categoryId);\n      }\n\n      if (onSegmentMouseOver) onSegmentMouseOver({ ref, categoryId });\n    };\n\n  const onMouseOut: SegmentMouseEventHandler =\n    ({ ref, categoryId }) =>\n    () => {\n      /**\n       * TODO: rather than use a timeout, maybe use the parent element being\n       * moused over (event bubbling?) to validate whether the mouse has left\n       * the entire chart vs an individual segment?\n       */\n      timer.current = window.setTimeout(() => {\n        setHovered(false);\n        /**\n         * Only clear the highlighted category if an initial category wasn’t\n         * supplied\n         */\n        if (!initialHighlightedCategoryId) {\n          setHighlightedCategoryId(undefined);\n        }\n      }, 50);\n\n      if (onSegmentMouseOut) onSegmentMouseOut({ ref, categoryId });\n    };\n\n  /**\n   * If the initial highlighted category isn’t within the provided set of\n   * categories, fall back to displaying the No Data component\n   */\n  if (\n    initialHighlightedCategoryId &&\n    sortedCategoryIds.indexOf(initialHighlightedCategoryId) === -1\n  )\n    return (\n      <StackedChartNoData height={height} period={period} formatMessage={formatNoDataMessage} />\n    );\n\n  const highlightedCategory: (StackedChartCategory & { index: number }) | undefined =\n    initialHighlightedCategoryId\n      ? {\n          ...categories[initialHighlightedCategoryId],\n          index: sortedCategoryIds.indexOf(initialHighlightedCategoryId),\n        }\n      : undefined;\n\n  /**\n   * This shouldn’t use Object.entries but rather a sorted list of category IDs,\n   * derived by the sortOrder prop\n   */\n\n  const content = (\n    <div className={styles.container}>\n      {sortedCategoryIds.map((categoryId, categoryIndex) => {\n        const category = categories[categoryId];\n        const ref = useRef<HTMLDivElement>(null);\n\n        const segmentState = ((): StackedChartSegmentState => {\n          switch (true) {\n            /**\n             * If no initial highlighted category was set, and a category is\n             * moused over, use the _active_ state for that category rather\n             * than the color state; this adds a drop shadow to the segment.\n             * Also, if an initial highlighted category _was_ set, and it\n             * receives a hover event, also set it to active.\n             */\n            case !initialHighlightedCategoryId && highlightedCategoryId === categoryId && !isDimmed:\n            case initialHighlightedCategoryId === categoryId && isHovered && !isDimmed:\n              return 'active';\n\n            /**\n             * - no initial highlighted category ID was passed _and_ there is\n             *   no highlightedCategoryId (i.e. all segments in colour)\n             * - the highlighted category is this category (but the chart\n             *   isn’t dimmed)\n             * - the initial highlighted category is this category (but the\n             *   chart isn’t dimmed)\n             */\n            case !initialHighlightedCategoryId && !highlightedCategoryId && !isDimmed:\n            case initialHighlightedCategoryId === categoryId && !isDimmed:\n              return 'color';\n\n            /**\n             * Has an initial highlighted category, but is dimmed (i.e. all\n             * segments excepted the highlighted category)\n             */\n            case Boolean(initialHighlightedCategoryId) &&\n              initialHighlightedCategoryId !== categoryId &&\n              isDimmed:\n            case !initialHighlightedCategoryId && !highlightedCategoryId && isDimmed:\n            case highlightedCategoryId !== categoryId && isDimmed:\n              return 'dimmed';\n\n            /**\n             * In any other case, the segment should be the default grey\n             */\n            default:\n              return 'default';\n          }\n        })();\n\n        const segment = (\n          <StackedChartSegment\n            key={categoryId}\n            ref={ref}\n            categoryId={categoryId}\n            index={categoryIndex}\n            title={category.title}\n            value={category.value}\n            total={total}\n            state={segmentState}\n            onMouseOver={onMouseOver}\n            onMouseOut={onMouseOut}\n          />\n        );\n\n        if (categoryId === initialHighlightedCategoryId) highlightedSegmentRef = ref;\n        if (!ref.current) {\n          console.log(categoryId, 'ref is unset', ref);\n        }\n\n        /**\n         * Only wrap the segment in a tooltip if no initially highlighted\n         * category ID was supplied.\n         */\n        return initialHighlightedCategoryId ? (\n          segment\n        ) : (\n          <StackedChartSegmentTooltip\n            key={categoryId}\n            title={category.title}\n            value={category.value}\n            index={categoryIndex}\n            hideDelay={0}\n            trigger={segment}\n          />\n        );\n      })}\n    </div>\n  );\n\n  /**\n   * If an initial highlight category was provided, wrap the entire chart inside\n   * a tooltip using the props for the highlighted segment to drive the tooltip\n   * content.\n   */\n  return initialHighlightedCategoryId && highlightedCategory ? (\n    <StackedChartSegmentTooltip\n      hideDelay={0}\n      trigger={content}\n      virtualElement={highlightedSegmentRef}\n      {...highlightedCategory}\n    />\n  ) : (\n    content\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/components/StackedChartSegmentTooltip/StackedChartSegmentTooltip.js

@@ -5,13 +5,16 @@ import { getStyles } from './StackedChartSegmentTooltip.styles.js';
 const defaultContentFormatter$1 = ({
   value,
   colorClassName
-}) => /* @__PURE__ */ jsxs(Fragment, { children: [
-  /* @__PURE__ */ jsxs("span", { className: colorClassName, children: [
-    value.toFixed(1),
-    "%"
-  ] }),
-  " of total usage"
-] });
+}) => {
+  const valueString = value < 0.1 ? "< 0.1" : `${value.toFixed(1)}`;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("span", { className: colorClassName, children: [
+      valueString,
+      "%"
+    ] }),
+    " of total usage"
+  ] });
+};
 const StackedChartSegmentTooltip = ({
   trigger,
   placement = "top",

package/dist/esm/components/StackedChartSegmentTooltip/StackedChartSegmentTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"StackedChartSegmentTooltip.js","sources":["../../../../src/components/StackedChartSegmentTooltip/StackedChartSegmentTooltip.tsx"],"sourcesContent":["import { StackedChartSegmentProps } from '../StackedChartSegment/types';\nimport { Popover, PopoverProps } from '../Popover';\nimport { getStyles } from './StackedChartSegmentTooltip.styles';\n\nexport type StackedChartTooltipContentFormatter = (\n  args: {\n    colorClassName: string;\n  } & Required<Pick<StackedChartSegmentProps<string>, 'value' | 'total' | 'index'>>,\n) => React.ReactElement;\n\nexport interface StackedChartSegmentTooltipProps<T extends string>\n  extends Pick<StackedChartSegmentProps<T>, 'title' | 'value' | 'total' | 'index'>,\n    Omit<PopoverProps, 'children'> {\n  formatContent?: StackedChartTooltipContentFormatter;\n}\n\n/**\n * The default content formatter assumes a percentage value, but you can create\n * your own formatter using the provided arguments of total and index. The\n * colorClassName allows you to set the colour of some text or an icon to the\n * same colour as the equivalent chart segment.\n */\nconst defaultContentFormatter: StackedChartTooltipContentFormatter = ({\n  value,\n  colorClassName,\n}) => (\n  <>\n    <span className={colorClassName}>{value.toFixed(1)}%</span> of total usage\n  </>\n);\n\nexport const StackedChartSegmentTooltip = <T extends string>({\n  trigger,\n  placement = 'top',\n  hideDelay,\n  title,\n  value,\n  total = 100,\n  index,\n  formatContent = defaultContentFormatter,\n  virtualElement,\n}: StackedChartSegmentTooltipProps<T>) => {\n  const styles = getStyles(index);\n\n  return (\n    <Popover\n      trigger={trigger}\n      placement={placement}\n      hideDelay={hideDelay}\n      virtualElement={virtualElement}\n    >\n      <div className={styles.wrapper}>\n        <div className={styles.content}>\n          <div className={styles.section}>\n            <div className={styles.title}>{title}</div>\n            <div className={styles.value}>\n              {formatContent({ value, total, index, colorClassName: styles.color })}\n            </div>\n          </div>\n        </div>\n      </div>\n    </Popover>\n  );\n};\n"],"names":["defaultContentFormatter"],"mappings":";;;;AAsBA,MAAMA,4BAA+D,CAAC;AAAA,EACpE,KAAA;AAAA,EACA;AACF,CAAA,qBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,kBAAA,IAAA,CAAC,MAAA,EAAA,EAAK,WAAW,cAAA,EAAiB,QAAA,EAAA;AAAA,IAAA,KAAA,CAAM,QAAQ,CAAC,CAAA;AAAA,IAAE;AAAA,GAAA,EAAC,CAAA;AAAA,EAAO;AAAA,CAAA,EAC7D,CAAA;AAGK,MAAM,6BAA6B,CAAmB;AAAA,EAC3D,OAAA;AAAA,EACA,SAAA,GAAY,KAAA;AAAA,EACZ,SAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA,GAAQ,GAAA;AAAA,EACR,KAAA;AAAA,EACA,aAAA,GAAgBA,yBAAA;AAAA,EAChB;AACF,CAAA,KAA0C;AACxC,EAAA,MAAM,MAAA,GAAS,UAAU,KAAK,CAAA;AAE9B,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,OAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA;AAAA,MACA,cAAA;AAAA,MAEA,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,SACrB,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,OAAA,EACrB,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAO,OAAA,EACrB,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,KAAA,EAAQ,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,wBACrC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,OACpB,QAAA,EAAA,aAAA,CAAc,EAAE,KAAA,EAAO,KAAA,EAAO,KAAA,EAAO,cAAA,EAAgB,MAAA,CAAO,KAAA,EAAO,CAAA,EACtE;AAAA,OAAA,EACF,GACF,CAAA,EACF;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"StackedChartSegmentTooltip.js","sources":["../../../../src/components/StackedChartSegmentTooltip/StackedChartSegmentTooltip.tsx"],"sourcesContent":["import { StackedChartSegmentProps } from '../StackedChartSegment/types';\nimport { Popover, PopoverProps } from '../Popover';\nimport { getStyles } from './StackedChartSegmentTooltip.styles';\n\nexport type StackedChartTooltipContentFormatter = (\n  args: {\n    colorClassName: string;\n  } & Required<Pick<StackedChartSegmentProps<string>, 'value' | 'total' | 'index'>>,\n) => React.ReactElement;\n\nexport interface StackedChartSegmentTooltipProps<T extends string>\n  extends Pick<StackedChartSegmentProps<T>, 'title' | 'value' | 'total' | 'index'>,\n    Omit<PopoverProps, 'children'> {\n  formatContent?: StackedChartTooltipContentFormatter;\n}\n\n/**\n * The default content formatter assumes a percentage value, but you can create\n * your own formatter using the provided arguments of total and index. The\n * colorClassName allows you to set the colour of some text or an icon to the\n * same colour as the equivalent chart segment.\n */\nconst defaultContentFormatter: StackedChartTooltipContentFormatter = ({\n  value,\n  colorClassName,\n}) => {\n  const valueString = value < 0.1 ? '< 0.1' : `${value.toFixed(1)}`;\n\n  return (\n    <>\n      <span className={colorClassName}>{valueString}%</span> of total usage\n    </>\n  );\n};\n\nexport const StackedChartSegmentTooltip = <T extends string>({\n  trigger,\n  placement = 'top',\n  hideDelay,\n  title,\n  value,\n  total = 100,\n  index,\n  formatContent = defaultContentFormatter,\n  virtualElement,\n}: StackedChartSegmentTooltipProps<T>) => {\n  const styles = getStyles(index);\n\n  return (\n    <Popover\n      trigger={trigger}\n      placement={placement}\n      hideDelay={hideDelay}\n      virtualElement={virtualElement}\n    >\n      <div className={styles.wrapper}>\n        <div className={styles.content}>\n          <div className={styles.section}>\n            <div className={styles.title}>{title}</div>\n            <div className={styles.value}>\n              {formatContent({ value, total, index, colorClassName: styles.color })}\n            </div>\n          </div>\n        </div>\n      </div>\n    </Popover>\n  );\n};\n"],"names":["defaultContentFormatter"],"mappings":";;;;AAsBA,MAAMA,4BAA+D,CAAC;AAAA,EACpE,KAAA;AAAA,EACA;AACF,CAAA,KAAM;AACJ,EAAA,MAAM,WAAA,GAAc,QAAQ,GAAA,GAAM,OAAA,GAAU,GAAG,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAC,CAAA,CAAA;AAE/D,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,MAAA,EAAA,EAAK,WAAW,cAAA,EAAiB,QAAA,EAAA;AAAA,MAAA,WAAA;AAAA,MAAY;AAAA,KAAA,EAAC,CAAA;AAAA,IAAO;AAAA,GAAA,EACxD,CAAA;AAEJ,CAAA;AAEO,MAAM,6BAA6B,CAAmB;AAAA,EAC3D,OAAA;AAAA,EACA,SAAA,GAAY,KAAA;AAAA,EACZ,SAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA,GAAQ,GAAA;AAAA,EACR,KAAA;AAAA,EACA,aAAA,GAAgBA,yBAAA;AAAA,EAChB;AACF,CAAA,KAA0C;AACxC,EAAA,MAAM,MAAA,GAAS,UAAU,KAAK,CAAA;AAE9B,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,OAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA;AAAA,MACA,cAAA;AAAA,MAEA,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,SACrB,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,OAAA,EACrB,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAO,OAAA,EACrB,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,KAAA,EAAQ,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,wBACrC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,OACpB,QAAA,EAAA,aAAA,CAAc,EAAE,KAAA,EAAO,KAAA,EAAO,KAAA,EAAO,cAAA,EAAgB,MAAA,CAAO,KAAA,EAAO,CAAA,EACtE;AAAA,OAAA,EACF,GACF,CAAA,EACF;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/esm/index.d.ts

@@ -147,7 +147,7 @@ type MouseEventHandler = ({ categoryId, ref, }: {
     categoryId: string;
     ref: React.ForwardedRef<HTMLDivElement>;
 }) => void;
-interface CommonStackedChartProps<T extends string> {
+interface SkeletonStackedChartProps<T extends string> {
     /**
      * How should category segments be sorted?
      */
@@ -179,23 +179,17 @@ interface CommonStackedChartProps<T extends string> {
      */
     period?: string;
     formatNoDataMessage?: StackedChartNoDataProps['formatMessage'];
-}
-interface SkeletonStackedChartProps<T extends string> extends CommonStackedChartProps<T> {
-    isSkeleton: true;
     /**
-     * Array of StackedChartCategory to build the chart from
+     * Is the StackedChart explicitly in a loading state?
      */
-    categories?: StackedChartCategories<T>;
-}
-interface LoadedStackedChartProps<T extends string> extends CommonStackedChartProps<T> {
-    isSkeleton?: false;
+    isSkeleton?: boolean;
     /**
      * Array of StackedChartCategory to build the chart from
      */
-    categories: StackedChartCategories<T>;
+    categories?: StackedChartCategories<T>;
 }
-type StackedChartProps<T extends string> = SkeletonStackedChartProps<T> | LoadedStackedChartProps<T>;
-declare const StackedChart: <T extends string>(props: StackedChartProps<T>) => react_jsx_runtime.JSX.Element;
+type StackedChartProps<T extends string> = SkeletonStackedChartProps<T>;
+declare const StackedChart: <T extends string>({ categories, highlightedCategoryId: initialHighlightedCategoryId, isSkeleton, isDimmed, sortOrder, height, onSegmentMouseOver, onSegmentMouseOut, period, formatNoDataMessage, }: StackedChartProps<T>) => react_jsx_runtime.JSX.Element;
 
 /**
  * A segment can be in one of four states:
@@ -318,4 +312,4 @@ interface FormatNumberOptions {
 declare const formatNumber: (value: number | string | "loading", options?: FormatNumberOptions) => string;
 
 export { ColorMode, ColorModeChangeHandler, ColorModeProvider, ComparisonBadge, ComparisonTooltip, GenericSkeleton, Popover, StackedChart, StackedChartNoData, StackedChartSegment, StackedChartSegmentTooltip, StackedChartSkeleton, calculateComparison, formatNumber, useColorMode, useColorModeChange };
-export type { ColorModeChangeProps, ColorModeContextType, ColorModeProviderProps, ColorModeWrapper, CommonStackedChartProps, ComparisonResult, ComparisonTooltipProps, FormatNumberOptions, GenericSkeletonProps, LoadedStackedChartProps, PopoverProps, SkeletonStackedChartProps, StackedChartCategories, StackedChartCategory, StackedChartNoDataMessageFormatter, StackedChartNoDataProps, StackedChartProps, StackedChartSegmentTooltipProps, StackedChartSkeletonProps, StackedChartSortOrder, StackedChartTooltipContentFormatter };
+export type { ColorModeChangeProps, ColorModeContextType, ColorModeProviderProps, ColorModeWrapper, ComparisonResult, ComparisonTooltipProps, FormatNumberOptions, GenericSkeletonProps, PopoverProps, SkeletonStackedChartProps, StackedChartCategories, StackedChartCategory, StackedChartNoDataMessageFormatter, StackedChartNoDataProps, StackedChartProps, StackedChartSegmentTooltipProps, StackedChartSkeletonProps, StackedChartSortOrder, StackedChartTooltipContentFormatter };

package/package.json

@@ -2,7 +2,7 @@
   "author": "Grafana Labs",
   "name": "@grafana/components",
   "license": "Apache-2.0",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "description": "Product Design Engineering Components for Grafana",
   "repository": {
     "type": "git",