@bpfdev/oly-ui 1.0.4 → 1.0.5

package/dist/index.d.mts

@@ -3,6 +3,7 @@ import { SxProps, Theme, ButtonProps } from '@mui/material';
 import * as React$1 from 'react';
 import { ReactNode, ReactElement, CSSProperties } from 'react';
 import { SxProps as SxProps$1, Theme as Theme$1 } from '@mui/material/styles';
+import { TooltipContentProps } from 'recharts';
 import { GridColDef } from '@mui/x-data-grid';
 
 interface AddCommentInputProps {
@@ -101,35 +102,6 @@ interface ButtonWithIconProps extends ButtonProps {
 
 declare const ButtonWithIcon: ({ size, variant, children, icon, ...props }: ButtonWithIconProps) => react_jsx_runtime.JSX.Element;
 
-/** Style props actually used by the header filter (trigger + list popper only; no search / checkboxes / apply row). */
-type WidgetHeaderFilterStyleProps = Pick<FalconMultiSelectStyleProps, 'triggerBg' | 'triggerColor' | 'triggerMinWidth' | 'triggerBorderRadius' | 'triggerSx' | 'popperWidth' | 'popperBorderColor' | 'popperBorderColorDark' | 'popperBg' | 'popperBgDark' | 'popperColor' | 'popperColorDark'> & {
-    /**
-     * When `true` (default), the dropdown panel tracks the trigger width.
-     * When `false`, the panel uses `popperWidth`, or **300** if `popperWidth` is omitted.
-     */
-    popperMatchTrigger?: boolean;
-    /** Merged into the dropdown `Paper` after base styles (e.g. `minWidth`, `maxWidth`, padding). */
-    popperSx?: SxProps<Theme>;
-};
-/** Props for the widget header filter: two-line trigger + simple option list. */
-type WidgetHeaderFilterProps = {
-    /** First line of the trigger (full string), e.g. **Select gender** or **Region**. */
-    label: string;
-    list: FalconMultiSelectOption[];
-    data: FalconMultiSelectOption[];
-    setData: (value: FalconMultiSelectOption[]) => void;
-} & Partial<WidgetHeaderFilterStyleProps>;
-/** Alias for toolbar props that include this filter. */
-type WidgetHeaderMultiSelectConfig = WidgetHeaderFilterProps;
-
-/**
- * Widget header filter styled like the provided mock:
- * two-line trigger + simple dropdown list.
- */
-declare const WidgetHeaderFilter: ({ label, list, data, setData, triggerBg, triggerColor, triggerMinWidth, triggerBorderRadius, triggerSx, popperMatchTrigger, popperWidth, popperSx, popperBorderColor, popperBorderColorDark, popperBg, popperBgDark, popperColor, popperColorDark, }: WidgetHeaderFilterProps) => react_jsx_runtime.JSX.Element;
-
-declare const ChartWidgetHeaderSeparator: () => react_jsx_runtime.JSX.Element;
-
 interface ChartWidgetInfoPopoverContent {
     title: string;
     description: string;
@@ -170,6 +142,110 @@ interface ChartWidgetInfoButtonProps {
 
 declare const ChartWidgetInfoButton: ({ onClick, ariaLabel, sx, iconColor, buttonBg, buttonHoverBg, iconSize: iconSizeProp, buttonSize: buttonSizeProp, popover, popoverWidth: popoverWidthProp, density, }: ChartWidgetInfoButtonProps) => react_jsx_runtime.JSX.Element;
 
+declare const ChartWidgetHeaderSeparator: () => react_jsx_runtime.JSX.Element;
+
+type ChartEmptyStateProps = {
+    /** Min-height of the container. Defaults to 300. */
+    minHeight?: number | string;
+    /** Iconify icon name. Set to null to hide. Defaults to 'mdi:chart-box-outline'. */
+    icon?: string | null;
+    /** Size of the icon in pixels. Defaults to 40. */
+    iconSize?: number;
+    /** Color of the icon. Defaults to '#9CA3AF'. */
+    iconColor?: string;
+    /** Primary message. Set to null to hide. Defaults to 'No Data Available'. */
+    title?: string | null;
+    /** Secondary message. Set to null to hide. Defaults to "There's no data to display in this chart yet". */
+    subtitle?: string | null;
+    /** Vertical gap between elements. Defaults to 1. */
+    gap?: number;
+    /** Custom MUI sx styles for the outermost Box container. */
+    containerSx?: SxProps$1<Theme$1>;
+    /** Custom MUI sx styles for the title Typography. */
+    titleSx?: SxProps$1<Theme$1>;
+    /** Custom MUI sx styles for the subtitle Typography. */
+    subtitleSx?: SxProps$1<Theme$1>;
+    /** Font weight for the title. Defaults to 700. */
+    titleWeight?: number | string;
+    /** Font weight for the subtitle. Defaults to 400. */
+    subtitleWeight?: number | string;
+    /** Layout orientation. Defaults to 'column'. */
+    direction?: 'column' | 'row';
+};
+
+/**
+ * A reusable empty state / placeholder component specifically for charts.
+ */
+declare function ChartEmptyState({ minHeight, icon, iconSize, iconColor, title, subtitle, gap, containerSx, titleSx, subtitleSx, titleWeight, subtitleWeight, direction, }: ChartEmptyStateProps): React$1.ReactElement;
+
+/** Style props actually used by the header filter (trigger + list popper only; no search / checkboxes / apply row). */
+type WidgetHeaderFilterStyleProps = Pick<FalconMultiSelectStyleProps, 'triggerBg' | 'triggerColor' | 'triggerMinWidth' | 'triggerBorderRadius' | 'triggerSx' | 'popperWidth' | 'popperBorderColor' | 'popperBorderColorDark' | 'popperBg' | 'popperBgDark' | 'popperColor' | 'popperColorDark'> & {
+    /**
+     * When `true` (default), the dropdown panel tracks the trigger width.
+     * When `false`, the panel uses `popperWidth`, or **300** if `popperWidth` is omitted.
+     */
+    popperMatchTrigger?: boolean;
+    /** Merged into the dropdown `Paper` after base styles (e.g. `minWidth`, `maxWidth`, padding). */
+    popperSx?: SxProps<Theme>;
+};
+/** Props for the widget header filter: two-line trigger + simple option list. */
+type WidgetHeaderFilterProps = {
+    /** First line of the trigger (full string), e.g. **Select gender** or **Region**. */
+    label: string;
+    list: FalconMultiSelectOption[];
+    /** Optional grouped options for `multiSelect` mode (renders section headers like the design mock). */
+    groupedList?: ReadonlyArray<{
+        title: string;
+        options: FalconMultiSelectOption[];
+    }>;
+    data: FalconMultiSelectOption[];
+    setData: (value: FalconMultiSelectOption[]) => void;
+    /** Enables checkbox-based multi select with search + Apply/Cancel row. */
+    multiSelect?: boolean;
+    /** Search field placeholder for `multiSelect` mode. @default 'Search' */
+    searchPlaceholder?: string;
+    /** Apply button label for `multiSelect` mode. @default 'Apply' */
+    applyLabel?: string;
+    /** Cancel button label for `multiSelect` mode. @default 'Cancel' */
+    cancelLabel?: string;
+    /** Checkbox unchecked color for `multiSelect` mode. @default '#5B5B69' */
+    checkboxColor?: string;
+    /** Checkbox checked color for `multiSelect` mode. @default '#6750A4' */
+    checkboxCheckedColor?: string;
+    /** Section header background for grouped rows. @default 'rgba(0,0,0,0.03)' */
+    groupHeaderBg?: string;
+    /** Section header text color. @default '#111827' */
+    groupHeaderColor?: string;
+    /** Section header font size. @default 14 */
+    groupHeaderFontSize?: number;
+    /** Row text color in options list. @default '#111827' */
+    optionTextColor?: string;
+    /** Search icon color. @default '#49454F' */
+    searchIconColor?: string;
+    /** Search input text color. @default '#111827' */
+    searchTextColor?: string;
+    /** Search placeholder color. @default '#6B7280' */
+    searchPlaceholderColor?: string;
+    /** Apply button background color. @default '#6750A4' */
+    applyBg?: string;
+    /** Apply button text color. @default '#FFFFFF' */
+    applyColor?: string;
+    /** Cancel button background color. @default 'transparent' */
+    cancelBg?: string;
+    /** Cancel button text color. @default '#374151' */
+    cancelColor?: string;
+    /** Cancel button border color. @default '#9CA3AF' */
+    cancelBorderColor?: string;
+} & Partial<WidgetHeaderFilterStyleProps>;
+/** Alias for toolbar props that include this filter. */
+type WidgetHeaderMultiSelectConfig = WidgetHeaderFilterProps;
+
+/**
+ * Widget header filter styled like the provided mock:
+ * two-line trigger + simple dropdown list.
+ */
+declare const WidgetHeaderFilter: ({ label, list, groupedList, data, setData, triggerBg, triggerColor, triggerMinWidth, triggerBorderRadius, triggerSx, popperMatchTrigger, popperWidth, popperSx, popperBorderColor, popperBorderColorDark, popperBg, popperBgDark, popperColor, popperColorDark, multiSelect, searchPlaceholder, applyLabel, cancelLabel, checkboxColor, checkboxCheckedColor, groupHeaderBg, groupHeaderColor, groupHeaderFontSize, optionTextColor, searchIconColor, searchTextColor, searchPlaceholderColor, applyBg, applyColor, cancelBg, cancelColor, cancelBorderColor, }: WidgetHeaderFilterProps) => react_jsx_runtime.JSX.Element;
+
 /** One slice inside a row’s bar (e.g. age band). Widths are proportional to `value` within the row. */
 interface RankedBarListSegment {
     id: string;
@@ -179,6 +255,22 @@ interface RankedBarListSegment {
     /** Segment fill; stacks left → right inside the row’s filled width. */
     color: string;
 }
+/** Optional `sx` for the card title, inner list column headers, and each data row’s typographies. */
+interface RankedBarListCustomization {
+    /** Merged onto the card **title** `Typography` (`h2`) after built-in styles. */
+    titleSx?: SxProps$1<Theme$1>;
+    /** Merged onto both **list** column header `Typography` nodes (label + value header). */
+    listHeaderSx?: SxProps$1<Theme$1>;
+    /** Merged onto each row’s **label** `Typography`. */
+    rowTypographySx?: SxProps$1<Theme$1>;
+    /** Merged onto each row’s **numeric value** `Typography`. */
+    valueTypographySx?: SxProps$1<Theme$1>;
+    /**
+     * When set, overrides the top-level **`showSortControl`** prop for the list header sort icon
+     * next to **`listHeaderLabel`**. Use **`false`** to hide it when wiring styles through **`customization`** only.
+     */
+    showSortControl?: boolean;
+}
 interface RankedBarListItem {
     id: string;
     /** Row label (e.g. camera id). */
@@ -191,6 +283,10 @@ interface RankedBarListItem {
      */
     segments?: RankedBarListSegment[];
 }
+interface RankedBarListSegmentTooltipRenderContext {
+    segment: RankedBarListSegment;
+    row: RankedBarListItem;
+}
 interface RankedBarListProps {
     /** Card title (e.g. “No. of Alerts Generated by Cameras”). */
     title: string;
@@ -209,7 +305,10 @@ interface RankedBarListProps {
     listHeaderLabel?: string;
     /** Right column header above numeric values. */
     valueColumnHeader?: string;
-    /** Show sort icon next to `listHeaderLabel`. */
+    /**
+     * Show sort icon next to `listHeaderLabel` (default **true**).
+     * Override per render via **`customization.showSortControl`** when that property is set.
+     */
     showSortControl?: boolean;
     /** Called when the sort icon is clicked. */
     onSortClick?: () => void;
@@ -225,6 +324,11 @@ interface RankedBarListProps {
      * Tooltip for a stacked segment. Default: **label**, **" : "**, and **value** (e.g. Teens (13-21 years) : 38).
      */
     formatSegmentTooltip?: (segment: RankedBarListSegment, row: RankedBarListItem) => string;
+    /**
+     * Full custom renderer for stacked segment tooltips.
+     * When provided, `formatSegmentTooltip` and default card layout are bypassed.
+     */
+    renderSegmentTooltip?: (context: RankedBarListSegmentTooltipRenderContext) => ReactNode;
     /**
      * MUI **`sx`** merged onto the segment tooltip **card** (white panel: border, shadow, rounded corners; stacked bars only).
      * The Popper wrapper stays transparent; style the panel here.
@@ -249,6 +353,7 @@ interface RankedBarListProps {
         md?: number | string;
     };
     cardSx?: SxProps$1<Theme$1>;
+    emptyStatePlaceholderProps?: ChartEmptyStateProps;
     /** Copy when `items` is empty. Default **No data**. */
     emptyStateText?: string;
     /**
@@ -262,76 +367,15 @@ interface RankedBarListProps {
      * Set **`false`** to preserve manual scroll position.
      */
     scrollListToTopOnItemsChange?: boolean;
+    /** Targeted `sx` for list headers and row text without deep nested selectors. */
+    customization?: RankedBarListCustomization;
 }
 
 /**
  * Ranked list widget: title row, optional header actions, scrollable list of labels with
  * horizontal bars sized by numeric value (highest value = full bar width).
  */
-declare const RankedBarList: ({ title, items, sortByValueDescending, maxValue: maxValueProp, listHeaderLabel, valueColumnHeader, showSortControl, onSortClick, headerActions, barColor, barTrackColor, barHeight, formatSegmentTooltip, segmentTooltipSx, listMaxHeight, fullWidth, fillHeight, cardMaxWidth, cardSx, emptyStateText, isBarWidthAnimationActive, scrollListToTopOnItemsChange, }: RankedBarListProps) => react_jsx_runtime.JSX.Element;
-
-/** How tab segments use horizontal space inside the pill track. */
-type ChartWidgetSegmentedTabLayout = 'intrinsic' | 'equalWidth';
-interface ChartWidgetSegmentedTab {
-    id: string;
-    label: string;
-}
-interface ChartWidgetSegmentedTabsProps {
-    tabs: ChartWidgetSegmentedTab[];
-    activeTabId: string;
-    onTabChange: (tabId: string) => void;
-    /** @default 'Scope' */
-    ariaLabel?: string;
-    /**
-     * When true (default), the track stretches to the parent width.
-     * When false, the pill track is only as wide as the tabs (`fit-content`).
-     */
-    fullWidth?: boolean;
-    /** Tab label `fontSize` (number → px). Default **14**. */
-    tabFontSize?: number | string;
-    rootSx?: SxProps$1<Theme$1>;
-    /** Pill track background. @default `#ECECEC` */
-    trackBackgroundColor?: string;
-    /** Selected segment background. @default `#fff` */
-    activeTabBackground?: string;
-    /** Selected segment text color. @default `#2a2a2a` */
-    activeTabColor?: string;
-    /** Unselected segment text color. @default `#2a2a2a` */
-    inactiveTabColor?: string;
-    /**
-     * Selected segment box shadow. @default light elevation. Use **`'none'`** for flat violet pills.
-     */
-    activeTabBoxShadow?: string;
-    /**
-     * **`intrinsic`** (default): tabs size to their labels and sit at the **start** of the track (empty space
-     * may appear on the right when **`fullWidth`** is true). **`equalWidth`**: each tab grows so segments **fill**
-     * the track — typical for full-width dashboard bars.
-     */
-    tabLayout?: ChartWidgetSegmentedTabLayout;
-    /** Selected tab `fontWeight`. @default **700** */
-    activeTabFontWeight?: number;
-    /** Unselected tab `fontWeight`. @default **600** */
-    inactiveTabFontWeight?: number;
-    /**
-     * Duration (ms) for the sliding selection pill when switching tabs.
-     * @default 260
-     */
-    tabIndicatorTransitionMs?: number;
-}
-
-/**
- * Pill-style segmented control for chart cards (e.g. Walk-in scope tabs, billing analytics).
- *
- * **Defaults** match the classic walk-in look: grey track, **white** selected pill, dark text, light shadow.
- * Override **`trackBackgroundColor`**, **`activeTabBackground`**, **`activeTabColor`**, **`inactiveTabColor`**, and
- * **`activeTabBoxShadow`** for other themes (e.g. violet selected pill + white text, **`activeTabBoxShadow: 'none'`**).
- *
- * Use **`tabLayout="equalWidth"`** when the track is full width and each tab should grow to **fill** the bar;
- * default **`intrinsic`** keeps label-sized pills aligned to the **start** (walk-in style).
- *
- * The active segment uses a **sliding pill** (animated with **`tabIndicatorTransitionMs`**).
- */
-declare const ChartWidgetSegmentedTabs: ({ tabs, activeTabId, onTabChange, ariaLabel, fullWidth, tabFontSize, rootSx, trackBackgroundColor, activeTabBackground, activeTabColor, inactiveTabColor, activeTabBoxShadow, tabLayout, activeTabFontWeight, inactiveTabFontWeight, tabIndicatorTransitionMs, }: ChartWidgetSegmentedTabsProps) => react_jsx_runtime.JSX.Element;
+declare const RankedBarList: ({ title, items, sortByValueDescending, maxValue: maxValueProp, listHeaderLabel, valueColumnHeader, showSortControl: showSortControlProp, onSortClick, headerActions, barColor, barTrackColor, barHeight, formatSegmentTooltip, renderSegmentTooltip, segmentTooltipSx, listMaxHeight, fullWidth, fillHeight, cardMaxWidth, cardSx, emptyStatePlaceholderProps, isBarWidthAnimationActive, scrollListToTopOnItemsChange, customization, }: RankedBarListProps) => react_jsx_runtime.JSX.Element;
 
 /** Partial **ChartWidgetInfoButton** props (popover always comes from **`infoPopover`** on **TimePeriodFilter**). */
 type TimePeriodFilterInfoButtonPresentation = Partial<Omit<ChartWidgetInfoButtonProps, 'popover'>>;
@@ -393,6 +437,8 @@ type QueueTimeBreakdownCustomization = {
     rootCard?: {
         sx?: SxProps$1<Theme$1>;
         elevation?: number;
+        /** Merged into the outer shell `CardContent` (padding, gaps). */
+        cardContentSx?: SxProps$1<Theme$1>;
     };
     periodFilter?: TimePeriodFilterTheme;
     header?: {
@@ -404,9 +450,26 @@ type QueueTimeBreakdownCustomization = {
         ruleColor?: string;
         labelPercentSx?: SxProps$1<Theme$1>;
         labelRangeSx?: SxProps$1<Theme$1>;
+        /**
+         * Merged into the flex row under each bar (segment percent + range labels).
+         * Prefer this over targeting `.MuiBox-root:nth-of-type(...)` on the card root.
+         */
+        labelRowContainerSx?: SxProps$1<Theme$1>;
         tooltip?: QueueTimeRechartsTooltipTheme;
     };
+    /**
+     * First grid column: headline + stacked bars + data-comparison block.
+     * Lets hosts adjust spacing without coupling to internal DOM order.
+     */
+    leftColumn?: {
+        /** Outer `Stack` (`gap={1}`) wrapping the header block and bar list. */
+        columnStackSx?: SxProps$1<Theme$1>;
+        /** `Stack` that wraps the mapped `QueueTimeBreakdownStackedBar` list. */
+        barRowsStackSx?: SxProps$1<Theme$1>;
+    };
     dataComparison?: {
+        /** “Data comparison” title line above the donut comparison card. */
+        titleSx?: SxProps$1<Theme$1>;
         cardSx?: SxProps$1<Theme$1>;
         dividerSx?: SxProps$1<Theme$1>;
     };
@@ -442,6 +505,65 @@ type QueueTimeBreakdownCustomization = {
     };
 };
 
+type QueueTimeAreaSeriesPoint = {
+    name: string;
+    data: number[];
+};
+type QueueTimeBreakdownAreaProps = {
+    series: QueueTimeAreaSeriesPoint[];
+    xAxis: string[];
+    renderTooltip?: (context: QueueTimeBreakdownAreaTooltipRenderContext) => ReactNode;
+};
+type QueueTimeBreakdownAreaTooltipRenderContext = {
+    tooltipProps: TooltipContentProps;
+    chartData: Record<string, string | number>[];
+    series: QueueTimeAreaSeriesPoint[];
+    xAxis: string[];
+};
+declare const QueueTimeBreakdownArea: ({ series, xAxis, renderTooltip, }: QueueTimeBreakdownAreaProps) => React$1.ReactElement;
+
+declare function getQueueTimeBreakdownAreaXAxisData(type: QueueTimeChartFilter): string[];
+declare function getQueueTimeBreakdownAreaSeriesData(type: QueueTimeChartFilter): QueueTimeAreaSeriesPoint[];
+
+type QueueTimeBreakdownDonutProps = {
+    chartFilter: QueueTimeChartFilter;
+    averageData: number[];
+    LabelName: string;
+    labels?: readonly string[];
+    renderTooltip?: (context: QueueTimeBreakdownDonutTooltipRenderContext) => ReactNode;
+};
+type PieDatum = {
+    name: string;
+    value: number;
+};
+type QueueTimeBreakdownDonutTooltipRenderContext = {
+    tooltipProps: TooltipContentProps;
+    pieData: PieDatum[];
+    total: number;
+    chartFilter: QueueTimeChartFilter;
+    labelName: string;
+};
+declare function QueueTimeBreakdownDonut({ chartFilter, averageData, LabelName, labels, renderTooltip, }: QueueTimeBreakdownDonutProps): React$1.ReactElement;
+
+type QueueTimeBreakdownStackedBarProps = {
+    row: QueueTimeBreakdownBarRow;
+    /** One entry per segment: percent line + range line (aligned under each slice). */
+    legendRows: readonly QueueBucketLegendItem[];
+    renderTooltip?: (context: QueueTimeBreakdownStackedBarTooltipRenderContext) => ReactNode;
+};
+type QueueTimeBreakdownStackedBarTooltipRenderContext = {
+    row: QueueTimeBreakdownBarRow;
+    segmentIndex: number;
+    percent: number;
+    count: number;
+    color: string;
+};
+/**
+ * Custom horizontal 100% stacked bar — slim pill with rounded ends.
+ * Segments are individually hoverable with MUI tooltips.
+ */
+declare function QueueTimeBreakdownStackedBar({ row, legendRows, renderTooltip, }: QueueTimeBreakdownStackedBarProps): React$1.ReactElement;
+
 /**
  * Header illustration for the queue breakdown card.
  * Default GIF path (place under app **`public`** or override with **`headerImageSrc`**).
@@ -497,6 +619,24 @@ type QueueTimeBreakdownProps = {
      * **`ChartWidgetInfoButton`**. Standalone **`TimePeriodFilter`** does not inject popover copy implicitly.
      */
     infoPopover?: ChartWidgetInfoPopoverContent | null;
+    /**
+     * Info popover shown beside the headline subtitle ("Avg. Queue Time Breakdown...").
+     * Defaults to the same content used by `infoPopover` when omitted.
+     * Pass `null` to hide the subtitle info button.
+     */
+    headlineInfoPopover?: ChartWidgetInfoPopoverContent | null;
+    /**
+     * Full custom tooltip renderer for the area chart.
+     */
+    renderAreaTooltip?: QueueTimeBreakdownAreaProps['renderTooltip'];
+    /**
+     * Full custom tooltip renderer for both donut charts.
+     */
+    renderDonutTooltip?: QueueTimeBreakdownDonutProps['renderTooltip'];
+    /**
+     * Full custom tooltip renderer for each stacked bar row.
+     */
+    renderStackedBarTooltip?: QueueTimeBreakdownStackedBarProps['renderTooltip'];
     /** Visual / layout overrides for all sub-widgets (tooltips, palette, D/W/M/Y control, etc.). */
     customization?: QueueTimeBreakdownCustomization;
 };
@@ -531,37 +671,233 @@ type TimePeriodFilterProps = {
  */
 declare function TimePeriodFilter({ selectedFilter, onFilterChange, infoPopover, infoButtonProps, sx, }: TimePeriodFilterProps): React$1.ReactElement;
 
+/** How tab segments use horizontal space inside the pill track. */
+type ChartWidgetSegmentedTabLayout = 'intrinsic' | 'equalWidth';
+interface ChartWidgetSegmentedTab {
+    id: string;
+    label: string;
+}
+interface ChartWidgetSegmentedTabsProps {
+    tabs: ChartWidgetSegmentedTab[];
+    activeTabId: string;
+    onTabChange: (tabId: string) => void;
+    /** @default 'Scope' */
+    ariaLabel?: string;
+    /**
+     * When true (default), the track stretches to the parent width.
+     * When false, the pill track is only as wide as the tabs (`fit-content`).
+     */
+    fullWidth?: boolean;
+    /** Tab label `fontSize` (number → px). Default **14**. */
+    tabFontSize?: number | string;
+    rootSx?: SxProps$1<Theme$1>;
+    /** Pill track background. @default `#ECECEC` */
+    trackBackgroundColor?: string;
+    /** Selected segment background. @default `#fff` */
+    activeTabBackground?: string;
+    /** Selected segment text color. @default `#2a2a2a` */
+    activeTabColor?: string;
+    /** Unselected segment text color. @default `#2a2a2a` */
+    inactiveTabColor?: string;
+    /**
+     * Selected segment box shadow. @default light elevation. Use **`'none'`** for flat violet pills.
+     */
+    activeTabBoxShadow?: string;
+    /**
+     * **`intrinsic`** (default): tabs size to their labels and sit at the **start** of the track (empty space
+     * may appear on the right when **`fullWidth`** is true). **`equalWidth`**: each tab grows so segments **fill**
+     * the track — typical for full-width dashboard bars.
+     */
+    tabLayout?: ChartWidgetSegmentedTabLayout;
+    /** Selected tab `fontWeight`. @default **700** */
+    activeTabFontWeight?: number;
+    /** Unselected tab `fontWeight`. @default **600** */
+    inactiveTabFontWeight?: number;
+    /**
+     * Duration (ms) for the sliding selection pill when switching tabs.
+     * @default 260
+     */
+    tabIndicatorTransitionMs?: number;
+}
+
 /**
- * Ready-made **`ChartWidgetInfoPopoverContent`** for **TimePeriodFilter** (D / W / M / Y) when you want
- * generic help — **not** tied to **QueueTimeBreakdown** or any other specific card.
+ * Pill-style segmented control for chart cards (e.g. Walk-in scope tabs, billing analytics).
  *
- * **Use this when:** you show the period control next to charts or KPIs on any page and need a short
- * explanation of what the control does and why it matters, without duplicating copy in your app.
+ * **Defaults** match the classic walk-in look: grey track, **white** selected pill, dark text, light shadow.
+ * Override **`trackBackgroundColor`**, **`activeTabBackground`**, **`activeTabColor`**, **`inactiveTabColor`**, and
+ * **`activeTabBoxShadow`** for other themes (e.g. violet selected pill + white text, **`activeTabBoxShadow: 'none'`**).
  *
- * **What it contains (for authors / Storybook):**
- * - **`title`:** “Time period” — names the control.
- * - **`description`:** Explains that switching day / week / month / year changes grouping or how the time axis is labelled.
- * - **`helpTitle`:** “How does it help?”
- * - **`helpBullets`:** (1) Align the view with your reporting window; (2) Keep period in sync with other controls on the page.
+ * Use **`tabLayout="equalWidth"`** when the track is full width and each tab should grow to **fill** the bar;
+ * default **`intrinsic`** keeps label-sized pills aligned to the **start** (walk-in style).
  *
- * Pass as **`infoPopover={TIME_PERIOD_FILTER_INFO_POPOVER}`** on **TimePeriodFilter**, or use your own
- * **`ChartWidgetInfoPopoverContent`** if you need product-specific wording.
- */
-declare const TIME_PERIOD_FILTER_INFO_POPOVER: ChartWidgetInfoPopoverContent;
-/**
- * Info copy aligned with the **QueueTimeBreakdown** composite card (header next to D/W/M/Y).
- * **QueueTimeBreakdown** uses this when **`infoPopover`** is omitted on the card.
- * Use **`TIME_PERIOD_FILTER_INFO_POPOVER`** instead when the filter is not on that card.
- */
-declare const TIME_PERIOD_FILTER_INFO_POPOVER_BREAKDOWN: ChartWidgetInfoPopoverContent;
-/** @deprecated Use {@link TIME_PERIOD_FILTER_INFO_POPOVER}. */
-declare const CHART_PERIOD_FILTER_INFO_POPOVER: ChartWidgetInfoPopoverContent;
-/** @deprecated Use {@link TIME_PERIOD_FILTER_INFO_POPOVER_BREAKDOWN}. */
-declare const QUEUE_TIME_BREAKDOWN_INFO_POPOVER: ChartWidgetInfoPopoverContent;
-/**
- * @deprecated Use {@link TIME_PERIOD_FILTER_INFO_POPOVER_BREAKDOWN}.
+ * The active segment uses a **sliding pill** (animated with **`tabIndicatorTransitionMs`**).
  */
-declare const DEFAULT_QUEUE_TIME_BREAKDOWN_INFO_POPOVER: ChartWidgetInfoPopoverContent;
+declare const ChartWidgetSegmentedTabs: ({ tabs, activeTabId, onTabChange, ariaLabel, fullWidth, tabFontSize, rootSx, trackBackgroundColor, activeTabBackground, activeTabColor, inactiveTabColor, activeTabBoxShadow, tabLayout, activeTabFontWeight, inactiveTabFontWeight, tabIndicatorTransitionMs, }: ChartWidgetSegmentedTabsProps) => react_jsx_runtime.JSX.Element;
+
+/** How the trend / baseline row is laid out under the main value. */
+type KpiTrendLayout = 'row' | 'stacked';
+type KpiTrend = {
+    /**
+     * **row** (default) — one line: optional %, direction arrow, comparison (caption style).
+     * **stacked** — comparison on its **own line** below the value (e.g. schedule cards: value `4 - 5pm`,
+     * line below `yesterday is 3 - 4pm` in **comparisonColor**). No %/arrow row.
+     */
+    layout?: KpiTrendLayout;
+    /**
+     * Change vs baseline, e.g. `"82%"`. Only used when **`layout`** is **`row`** (or omitted).
+     */
+    percentLabel?: string;
+    /**
+     * Baseline / comparison copy (required for **`row`**).
+     * For **`stacked`**, omit when using **`comparisonPrefix`** + **`comparisonHighlight`** (split line).
+     */
+    comparisonText?: string | ReactNode;
+    /**
+     * **Stacked only:** static copy before the API window (muted). Pair with **`comparisonHighlight`**.
+     * Example: `"yesterday is "` (include trailing space if needed).
+     */
+    comparisonPrefix?: string;
+    /**
+     * **Stacked only:** dynamic value from the API (accent color — default violet). Pair with **`comparisonPrefix`**.
+     * Example: `"3 - 4pm"`.
+     */
+    comparisonHighlight?: string;
+    /**
+     * Arrow + tint for **`layout: 'row'`**. Ignored when **`layout: 'stacked'`** (pass a dummy if required by callers).
+     */
+    direction: 'up' | 'down';
+    /**
+     * **Stacked:** color for **`comparisonHighlight`** only (split mode), or entire line if you pass a single **`comparisonText`** (default line color is **muted** unless **`comparisonColor`** is set).
+     * @default `#5E35B1` for the highlight segment in split mode.
+     */
+    comparisonColor?: string;
+    /**
+     * **Stacked split:** color for **`comparisonPrefix`** (muted segment). CSS string or MUI palette path.
+     * @default \`text.secondary\` (theme)
+     */
+    comparisonPrefixColor?: string;
+};
+/** Where the optional info button sits in the detailed layout. */
+type KpiStatCardInfoPlacement = 'title' | 'value';
+/** Shape of the decorative icon backdrop (top-right). */
+type KpiStatCardIconBackdropShape = 'rounded' | 'round';
+/** Optional `sx` hooks for the title and primary metric lines (inline + detailed). */
+interface KpiStatCardCustomization {
+    /** Merged onto the **title** `Typography` after built-in styles. */
+    labelTypographySx?: SxProps$1<Theme$1>;
+    /** Merged onto the **value** `Typography` after built-in styles. */
+    valueTypographySx?: SxProps$1<Theme$1>;
+    /**
+     * Merged onto the **trend comparison** line when **`trend.layout`** is **`row`** (caption next to % / arrow).
+     */
+    trendComparisonTypographySx?: SxProps$1<Theme$1>;
+    /**
+     * Merged onto **stacked** trend UI (`trend.layout: 'stacked'`): split prefix/highlight **Typography** nodes,
+     * a single **`comparisonText`** line, or the rich **`comparisonText`** `Box`.
+     */
+    stackedComparisonTypographySx?: SxProps$1<Theme$1>;
+}
+type KpiStatCardShared = {
+    /** Iconify icon id, e.g. `mdi:store` */
+    icon: string;
+    /** Icon color (CSS). */
+    iconColor?: string;
+    /** Icon size in px. */
+    iconSize?: number;
+    title: string;
+    value: string | number;
+    /**
+     * When \`value\` is a finite **number**, animate changes with an internal ease-out tween (no extra
+     * dependencies). Set \`false\` to show a static formatted number. Ignored for strings and non-finite numbers.
+     * @default true
+     */
+    animateValue?: boolean;
+    /**
+     * Duration for **`animateValue`** (ms).
+     * @default 1000
+     */
+    valueAnimationDurationMs?: number;
+    /**
+     * Passed to **`Number.prototype.toLocaleString`** as grouping (thousands separators).
+     * @default true
+     */
+    valueAnimationUseGrouping?: boolean;
+    /**
+     * BCP 47 locale for **`toLocaleString`** when animating; omit for the runtime default locale.
+     */
+    valueAnimationLocale?: string;
+    /**
+     * Large primary metric color (inline + detailed).
+     * @default '#000000'
+     */
+    metricColor?: string;
+    /**
+     * Minimum height of the root `Paper` (px).
+     * @default Inline **96**; detailed **118**.
+     */
+    cardMinHeightPx?: number;
+    /**
+     * Maximum height of the root `Paper` (px). When set, the card uses `overflow: auto` so content can scroll.
+     */
+    cardMaxHeightPx?: number;
+    /** Extra root `Paper` styles — merges last; use to override borders, shadows, width, etc. */
+    sx?: SxProps$1<Theme$1>;
+    /** Targeted typography `sx` without fragile parent selectors. */
+    customization?: KpiStatCardCustomization;
+};
+type KpiStatCardInlineProps = KpiStatCardShared & {
+    variant: 'inline';
+};
+type KpiStatCardDetailedProps = KpiStatCardShared & {
+    variant: 'detailed';
+    trend: KpiTrend;
+    /**
+     * Popover for **ChartWidgetInfoButton** (same shape as other chart widgets).
+     * Placement is controlled by **`infoPlacement`**.
+     */
+    infoPopover?: ChartWidgetInfoPopoverContent;
+    /**
+     * Where to show **ChartWidgetInfoButton** when **`infoPopover`** is set.
+     * @default 'value'
+     */
+    infoPlacement?: KpiStatCardInfoPlacement;
+    /** Background of the decorative icon container (top-right) */
+    iconBackdropColor?: string;
+    /**
+     * **rounded** — rounded rectangle (squircle). **round** — circle.
+     * @default 'rounded'
+     */
+    iconBackdropShape?: KpiStatCardIconBackdropShape;
+    /** Color for trend % + arrow (defaults by direction) */
+    trendColor?: string;
+    /** Optional slot above title (e.g. filter) */
+    slotHeader?: ReactNode;
+    /**
+     * Title line color (CSS or MUI palette path e.g. \`text.secondary\`).
+     * @default \`text.secondary\`
+     */
+    titleColor?: string;
+    /** Card width in px. @default 247 */
+    cardWidthPx?: number;
+    /** Root padding in px. @default 12 */
+    cardPaddingPx?: number;
+    /** Vertical gap between title / value / trend blocks (px). @default 8 */
+    blockGapPx?: number;
+    /** Decorative icon badge width and height (px). @default 48 */
+    iconBackdropSizePx?: number;
+    /** Row trend: font size for % and comparison text (px). @default 12 */
+    rowTrendFontSizePx?: number;
+    /** Row trend: direction arrow icon size (px). @default 16 */
+    rowTrendIconSizePx?: number;
+    /**
+     * Row trend: comparison string color (CSS or palette key).
+     * @default \`text.secondary\`
+     */
+    rowTrendComparisonColor?: string;
+};
+type KpiStatCardProps = KpiStatCardInlineProps | KpiStatCardDetailedProps;
+
+declare const KpiStatCard: (props: KpiStatCardProps) => react_jsx_runtime.JSX.Element;
 
 interface FalconButtonProps extends ButtonProps {
     loading?: boolean;
@@ -664,6 +1000,62 @@ interface FalconTicketFilterProps {
 
 declare const FalconTicketFilter: ({ children, label, open: controlledOpen, onOpenChange, }: FalconTicketFilterProps) => react_jsx_runtime.JSX.Element;
 
+/**
+ * Ready-made **`ChartWidgetInfoPopoverContent`** for **TimePeriodFilter** (D / W / M / Y) when you want
+ * generic help — **not** tied to **QueueTimeBreakdown** or any other specific card.
+ *
+ * **Use this when:** you show the period control next to charts or KPIs on any page and need a short
+ * explanation of what the control does and why it matters, without duplicating copy in your app.
+ *
+ * **What it contains (for authors / Storybook):**
+ * - **`title`:** “Time period” — names the control.
+ * - **`description`:** Explains that switching day / week / month / year changes grouping or how the time axis is labelled.
+ * - **`helpTitle`:** “How does it help?”
+ * - **`helpBullets`:** (1) Align the view with your reporting window; (2) Keep period in sync with other controls on the page.
+ *
+ * Pass as **`infoPopover={TIME_PERIOD_FILTER_INFO_POPOVER}`** on **TimePeriodFilter**, or use your own
+ * **`ChartWidgetInfoPopoverContent`** if you need product-specific wording.
+ */
+declare const TIME_PERIOD_FILTER_INFO_POPOVER: ChartWidgetInfoPopoverContent;
+/**
+ * Info copy aligned with the **QueueTimeBreakdown** composite card (header next to D/W/M/Y).
+ * **QueueTimeBreakdown** uses this when **`infoPopover`** is omitted on the card.
+ * Use **`TIME_PERIOD_FILTER_INFO_POPOVER`** instead when the filter is not on that card.
+ */
+declare const TIME_PERIOD_FILTER_INFO_POPOVER_BREAKDOWN: ChartWidgetInfoPopoverContent;
+/** @deprecated Use {@link TIME_PERIOD_FILTER_INFO_POPOVER}. */
+declare const CHART_PERIOD_FILTER_INFO_POPOVER: ChartWidgetInfoPopoverContent;
+/** @deprecated Use {@link TIME_PERIOD_FILTER_INFO_POPOVER_BREAKDOWN}. */
+declare const QUEUE_TIME_BREAKDOWN_INFO_POPOVER: ChartWidgetInfoPopoverContent;
+/**
+ * @deprecated Use {@link TIME_PERIOD_FILTER_INFO_POPOVER_BREAKDOWN}.
+ */
+declare const DEFAULT_QUEUE_TIME_BREAKDOWN_INFO_POPOVER: ChartWidgetInfoPopoverContent;
+
+interface HeatMapLegendItem {
+    label: string;
+    color: string;
+}
+interface HeatMapChartLegendProps {
+    title: string;
+    items: HeatMapLegendItem[];
+    gradientId: string;
+    gradientStops: {
+        offset: string;
+        color: string;
+    }[];
+}
+
+declare const HeatMapChartLegend: ({ title, items, gradientId, gradientStops, }: HeatMapChartLegendProps) => react_jsx_runtime.JSX.Element;
+
+interface ProgressBarNumberProps {
+    number: number;
+    progress: 0 | 50 | 100;
+    numColor: string;
+}
+
+declare const ProgressBarNumber: ({ number, progress, numColor, }: ProgressBarNumberProps) => react_jsx_runtime.JSX.Element;
+
 /** Shared max-width rules for chart cards (WalkinAnalysis-style). */
 type ChartCardMaxWidth = number | string | {
     xs?: number | string;
@@ -727,6 +1119,11 @@ interface FootfallByAgeGroupsSeries {
 type FootfallByAgeGroupsRow = {
     name: string;
 } & Record<string, string | number>;
+interface FootfallByAgeGroupsTooltipRenderContext {
+    tooltipProps: TooltipContentProps;
+    rows: FootfallByAgeGroupsRow[];
+    series: FootfallByAgeGroupsSeries[];
+}
 interface FootfallByAgeGroupsProps {
     /** Card heading — **centered**; \`headerActions\` (if any) sit on the right without shifting it. */
     title: string;
@@ -785,290 +1182,26 @@ interface FootfallByAgeGroupsProps {
     tooltipOverallLabel?: string;
     /** Merge over default tooltip inline styles. */
     tooltipStyles?: FootfallByAgeGroupsTooltipStyles;
+    /**
+     * Full custom tooltip renderer. When provided, default tooltip layout is skipped.
+     */
+    renderTooltip?: (context: FootfallByAgeGroupsTooltipRenderContext) => ReactNode;
     /** Color key legend above the plot (from \`series\`). Default: \`true\`. */
     showLegend?: boolean;
     /** Recharts \`BarChart\` margin; partial merge with defaults. */
     chartMargin?: FootfallByAgeGroupsChartMargin;
     /** Grid / axis / bar-top label colors. */
     chartColors?: FootfallByAgeGroupsChartColors;
+    emptyStatePlaceholderProps?: ChartEmptyStateProps;
     /** Opacity for non-hovered stacks while another bar is hovered. Default: \`0.35\` */
     dimmedStackOpacity?: number;
     /** Recharts \`stackId\` for stacked \`Bar\`s. Default: \`footfall-by-age-groups\` */
-    barStackId?: string;
-    /** Copy when \`data\` is empty. Default: \`No data\` */
-    emptyStateText?: string;
-}
-
-declare function FootfallByAgeGroups({ title, data, series, chartHeight, minWidthPerCategory, horizontalScroll: horizontalScrollProp, maxBarSize: maxBarSizeProp, cardMaxWidth, cardSx, titleRowSx, titleSx, dividerSx, legendRowSx, legendItemSx, legendSwatchSx, legendLabelSx, chartScrollAreaSx, stackSx, emptyStateSx, emptyStateTextSx, headerActions, tooltipCategoryLabel, tooltipOverallLabel, tooltipStyles, showLegend, chartMargin: chartMarginProp, chartColors: chartColorsProp, dimmedStackOpacity, barStackId, emptyStateText, }: FootfallByAgeGroupsProps): react_jsx_runtime.JSX.Element;
-
-interface HeatMapLegendItem {
-    label: string;
-    color: string;
-}
-interface HeatMapChartLegendProps {
-    title: string;
-    items: HeatMapLegendItem[];
-    gradientId: string;
-    gradientStops: {
-        offset: string;
-        color: string;
-    }[];
-}
-
-declare const HeatMapChartLegend: ({ title, items, gradientId, gradientStops, }: HeatMapChartLegendProps) => react_jsx_runtime.JSX.Element;
-
-/** How the trend / baseline row is laid out under the main value. */
-type KpiTrendLayout = 'row' | 'stacked';
-type KpiTrend = {
-    /**
-     * **row** (default) — one line: optional %, direction arrow, comparison (caption style).
-     * **stacked** — comparison on its **own line** below the value (e.g. schedule cards: value `4 - 5pm`,
-     * line below `yesterday is 3 - 4pm` in **comparisonColor**). No %/arrow row.
-     */
-    layout?: KpiTrendLayout;
-    /**
-     * Change vs baseline, e.g. `"82%"`. Only used when **`layout`** is **`row`** (or omitted).
-     */
-    percentLabel?: string;
-    /**
-     * Baseline / comparison copy (required for **`row`**).
-     * For **`stacked`**, omit when using **`comparisonPrefix`** + **`comparisonHighlight`** (split line).
-     */
-    comparisonText?: string | ReactNode;
-    /**
-     * **Stacked only:** static copy before the API window (muted). Pair with **`comparisonHighlight`**.
-     * Example: `"yesterday is "` (include trailing space if needed).
-     */
-    comparisonPrefix?: string;
-    /**
-     * **Stacked only:** dynamic value from the API (accent color — default violet). Pair with **`comparisonPrefix`**.
-     * Example: `"3 - 4pm"`.
-     */
-    comparisonHighlight?: string;
-    /**
-     * Arrow + tint for **`layout: 'row'`**. Ignored when **`layout: 'stacked'`** (pass a dummy if required by callers).
-     */
-    direction: 'up' | 'down';
-    /**
-     * **Stacked:** color for **`comparisonHighlight`** only (split mode), or entire line if you pass a single **`comparisonText`** (default line color is **muted** unless **`comparisonColor`** is set).
-     * @default `#5E35B1` for the highlight segment in split mode.
-     */
-    comparisonColor?: string;
-    /**
-     * **Stacked split:** color for **`comparisonPrefix`** (muted segment). CSS string or MUI palette path.
-     * @default \`text.secondary\` (theme)
-     */
-    comparisonPrefixColor?: string;
-};
-/** Where the optional info button sits in the detailed layout. */
-type KpiStatCardInfoPlacement = 'title' | 'value';
-/** Shape of the decorative icon backdrop (top-right). */
-type KpiStatCardIconBackdropShape = 'rounded' | 'round';
-type KpiStatCardShared = {
-    /** Iconify icon id, e.g. `mdi:store` */
-    icon: string;
-    /** Icon color (CSS). */
-    iconColor?: string;
-    /** Icon size in px. */
-    iconSize?: number;
-    title: string;
-    value: string | number;
-    /**
-     * When \`value\` is a finite **number**, animate changes with an internal ease-out tween (no extra
-     * dependencies). Set \`false\` to show a static formatted number. Ignored for strings and non-finite numbers.
-     * @default true
-     */
-    animateValue?: boolean;
-    /**
-     * Duration for **`animateValue`** (ms).
-     * @default 1000
-     */
-    valueAnimationDurationMs?: number;
-    /**
-     * Passed to **`Number.prototype.toLocaleString`** as grouping (thousands separators).
-     * @default true
-     */
-    valueAnimationUseGrouping?: boolean;
-    /**
-     * BCP 47 locale for **`toLocaleString`** when animating; omit for the runtime default locale.
-     */
-    valueAnimationLocale?: string;
-    /**
-     * Large primary metric color (inline + detailed).
-     * @default '#000000'
-     */
-    metricColor?: string;
-    /**
-     * Minimum height of the root `Paper` (px).
-     * @default Inline **96**; detailed **118**.
-     */
-    cardMinHeightPx?: number;
-    /**
-     * Maximum height of the root `Paper` (px). When set, the card uses `overflow: auto` so content can scroll.
-     */
-    cardMaxHeightPx?: number;
-    /** Extra root `Paper` styles — merges last; use to override borders, shadows, width, etc. */
-    sx?: SxProps$1<Theme$1>;
-};
-type KpiStatCardInlineProps = KpiStatCardShared & {
-    variant: 'inline';
-};
-type KpiStatCardDetailedProps = KpiStatCardShared & {
-    variant: 'detailed';
-    trend: KpiTrend;
-    /**
-     * Popover for **ChartWidgetInfoButton** (same shape as other chart widgets).
-     * Placement is controlled by **`infoPlacement`**.
-     */
-    infoPopover?: ChartWidgetInfoPopoverContent;
-    /**
-     * Where to show **ChartWidgetInfoButton** when **`infoPopover`** is set.
-     * @default 'value'
-     */
-    infoPlacement?: KpiStatCardInfoPlacement;
-    /** Background of the decorative icon container (top-right) */
-    iconBackdropColor?: string;
-    /**
-     * **rounded** — rounded rectangle (squircle). **round** — circle.
-     * @default 'rounded'
-     */
-    iconBackdropShape?: KpiStatCardIconBackdropShape;
-    /** Color for trend % + arrow (defaults by direction) */
-    trendColor?: string;
-    /** Optional slot above title (e.g. filter) */
-    slotHeader?: ReactNode;
-    /**
-     * Title line color (CSS or MUI palette path e.g. \`text.secondary\`).
-     * @default \`text.secondary\`
-     */
-    titleColor?: string;
-    /** Card width in px. @default 247 */
-    cardWidthPx?: number;
-    /** Root padding in px. @default 12 */
-    cardPaddingPx?: number;
-    /** Vertical gap between title / value / trend blocks (px). @default 8 */
-    blockGapPx?: number;
-    /** Decorative icon badge width and height (px). @default 48 */
-    iconBackdropSizePx?: number;
-    /** Row trend: font size for % and comparison text (px). @default 12 */
-    rowTrendFontSizePx?: number;
-    /** Row trend: direction arrow icon size (px). @default 16 */
-    rowTrendIconSizePx?: number;
-    /**
-     * Row trend: comparison string color (CSS or palette key).
-     * @default \`text.secondary\`
-     */
-    rowTrendComparisonColor?: string;
-};
-type KpiStatCardProps = KpiStatCardInlineProps | KpiStatCardDetailedProps;
-
-declare const KpiStatCard: (props: KpiStatCardProps) => react_jsx_runtime.JSX.Element;
-
-interface ProgressBarNumberProps {
-    number: number;
-    progress: 0 | 50 | 100;
-    numColor: string;
-}
-
-declare const ProgressBarNumber: ({ number, progress, numColor, }: ProgressBarNumberProps) => react_jsx_runtime.JSX.Element;
-
-/** Pie diameter: fixed px, or per-breakpoint (`xs` / `sm` / `md` match MUI breakpoints). */
-type WalkinAnalysisPieSize = number | {
-    xs?: number;
-    sm?: number;
-    md?: number;
-};
-/**
- * Card `max-width`: a number is pixels on all breakpoints; a string is any CSS length;
- * an object sets `maxWidth` per breakpoint (numbers become px). Omitted keys use `100%` (xs) and `640` (sm).
- */
-type WalkinAnalysisCardMaxWidth = number | string | {
-    xs?: number | string;
-    sm?: number | string;
-    md?: number | string;
-};
-/** Same shape as `ChartWidgetSegmentedTab`; rendered with `ChartWidgetSegmentedTabs` inside WalkinAnalysis. */
-interface WalkinAnalysisTab {
-    id: string;
-    label: string;
-}
-/**
- * Optional `fontSize` overrides (number → px). Omitted keys keep the built-in defaults.
- */
-interface WalkinAnalysisTypography {
-    title?: number | string;
-    tabs?: number | string;
-    piePercent?: number | string;
-    legendLabel?: number | string;
-    legendValue?: number | string;
-    tooltipTitle?: number | string;
-    tooltipValue?: number | string;
-    emptyState?: number | string;
-}
-interface WalkinAnalysisSlice {
-    id: string;
-    /** Legend title and accessible pie summary (e.g. “Individual Walk-ins”). */
-    label: string;
-    count: number;
-    /** Segment fill in the pie and legend swatch color. */
-    color: string;
-    /** Legend title text color (default `#424242`). */
-    legendLabelColor?: string;
-    /** Legend count / percentage line color (default `#333`). */
-    legendValueColor?: string;
-    /** Fill for the percentage label inside the pie slice (default `#fff`). */
-    segmentPercentColor?: string;
-    /**
-     * Optional control after the legend count line — e.g. **`<ChartWidgetInfoButton popover={…} />`**
-     * from `@bpfdev/oly-ui` so legend info matches the header info pattern.
-     */
-    legendInfo?: ReactNode;
-}
-interface WalkinAnalysisProps {
-    title: string;
-    tabs: WalkinAnalysisTab[];
-    activeTabId: string;
-    onTabChange: (tabId: string) => void;
-    /**
-     * Omit or `true`: scope tabs span the card width (default — forwarded as **ChartWidgetSegmentedTabs** `fullWidth`).
-     * `false`: pill track only as wide as the labels.
-     */
-    segmentedTabsFullWidth?: boolean;
-    /**
-     * Merged onto **ChartWidgetSegmentedTabs** `rootSx` after `fullWidth` width rules — use for `width`, `maxWidth`, alignment, etc.
-     */
-    segmentedTabsSx?: SxProps$1<Theme$1>;
-    /** Each item’s `label`, `count`, and `color` drive pie segments and legend; optional colors override legend / in-slice % text. */
-    slices: WalkinAnalysisSlice[];
-    /** Right side of the title row: compose `WidgetHeaderFilter`, `ChartWidgetHeaderSeparator`, `ChartWidgetInfoButton`, or custom nodes. */
-    headerActions?: ReactNode;
-    cardSx?: SxProps$1<Theme$1>;
-    /**
-     * Card maximum width. Defaults to full width on xs and 640px from sm up.
-     * Use `cardSx` for further layout overrides (it merges after this).
-     */
-    cardMaxWidth?: WalkinAnalysisCardMaxWidth;
-    /**
-     * Pie diameter (px). Use a number for the same size on all screens.
-     * Use an object to set sizes at `xs`, `sm`, and `md` (unset keys use 180, 220, 260).
-     * Omit for built-in responsive sizing across breakpoints.
-     */
-    pieSize?: WalkinAnalysisPieSize;
-    /** Per-region `fontSize` overrides (numbers are px). */
-    typography?: WalkinAnalysisTypography;
-    /**
-     * Recharts **`Pie`** animation. Defaults **true** / **400** ms.
-     * There is no horizontal plot scroll on this card (pie layout); only animation applies.
-     */
-    isChartAnimationActive?: boolean;
-    chartAnimationDuration?: number;
+    barStackId?: string;
+    /** Copy when \`data\` is empty. Default: \`No data\` */
+    emptyStateText?: string;
 }
 
-/**
- * Walk-in style analysis card: title row (optional `headerActions`), tabs, Recharts pie, legend.
- * Pie and legend are driven by `slices` (`label`, `count`, `color`, optional legend / segment % colors).
- */
-declare const WalkinAnalysis: ({ title, tabs, activeTabId, onTabChange, segmentedTabsFullWidth, segmentedTabsSx, slices, headerActions, cardSx, cardMaxWidth, pieSize, typography, isChartAnimationActive, chartAnimationDuration, }: WalkinAnalysisProps) => react_jsx_runtime.JSX.Element;
+declare function FootfallByAgeGroups({ title, data, series, chartHeight, minWidthPerCategory, horizontalScroll: horizontalScrollProp, maxBarSize: maxBarSizeProp, cardMaxWidth, cardSx, titleRowSx, titleSx, dividerSx, legendRowSx, legendItemSx, legendSwatchSx, legendLabelSx, chartScrollAreaSx, stackSx, emptyStateSx, headerActions, tooltipCategoryLabel, tooltipOverallLabel, tooltipStyles, renderTooltip, showLegend, chartMargin: chartMarginProp, chartColors: chartColorsProp, emptyStatePlaceholderProps, dimmedStackOpacity, barStackId, }: FootfallByAgeGroupsProps): react_jsx_runtime.JSX.Element;
 
 /** Optional inline styles merged over tooltip defaults (undefined keys keep defaults). */
 interface FootfallByGenderTooltipStyles {
@@ -1112,6 +1245,10 @@ interface FootfallByGenderRow {
     male: number;
     female: number;
 }
+interface FootfallByGenderTooltipRenderContext {
+    tooltipProps: TooltipContentProps;
+    rows: FootfallByGenderRow[];
+}
 interface FootfallByGenderProps {
     /** Card heading — **centered**; \`headerActions\` (if any) sit on the right without shifting it. */
     title: string;
@@ -1191,10 +1328,15 @@ interface FootfallByGenderProps {
     tooltipOverallLabel?: string;
     /** Merge over default tooltip inline styles. */
     tooltipStyles?: FootfallByGenderTooltipStyles;
+    /**
+     * Full custom tooltip renderer. When provided, default tooltip layout is skipped.
+     */
+    renderTooltip?: (context: FootfallByGenderTooltipRenderContext) => ReactNode;
     /** Recharts \`BarChart\` margin; partial merge after defaults (your values override). */
     chartMargin?: FootfallByGenderChartMargin;
     /** Grid / axis / bar-top label colors. */
     chartColors?: FootfallByGenderChartColors;
+    emptyStatePlaceholderProps?: ChartEmptyStateProps;
     /**
      * Y-axis tick formatter. Default: compact \`k\` suffix for thousands.
      */
@@ -1206,7 +1348,7 @@ interface FootfallByGenderProps {
 /**
  * Grouped bar chart: two series (male / female) per category, with hover dimming and a custom tooltip.
  */
-declare function FootfallByGender({ title, data, seriesLabels: seriesLabelsProp, seriesColors: seriesColorsProp, chartHeight, minWidthPerCategory, horizontalScroll: horizontalScrollProp, maxBarSize: maxBarSizeProp, barGap, showLegend, showBarValueLabels, dimmedBarOpacity, hoveredBarOpacity, cardMaxWidth, cardSx, titleRowSx, titleSx, dividerSx, legendOverlaySx, legendItemSx, legendSwatchSx, legendLabelSx, chartViewportSx, chartScrollAreaSx, stackSx, emptyStateSx, emptyStateTextSx, headerActions, tooltipCategoryLabel, tooltipOverallLabel, tooltipStyles, chartMargin: chartMarginProp, chartColors: chartColorsProp, yAxisTickFormatter, emptyStateText, }: FootfallByGenderProps): react_jsx_runtime.JSX.Element;
+declare function FootfallByGender({ title, data, seriesLabels: seriesLabelsProp, seriesColors: seriesColorsProp, chartHeight, minWidthPerCategory, horizontalScroll: horizontalScrollProp, maxBarSize: maxBarSizeProp, barGap, showLegend, showBarValueLabels, dimmedBarOpacity, hoveredBarOpacity, cardMaxWidth, cardSx, titleRowSx, titleSx, dividerSx, legendOverlaySx, legendItemSx, legendSwatchSx, legendLabelSx, chartViewportSx, chartScrollAreaSx, stackSx, emptyStateSx, headerActions, tooltipCategoryLabel, tooltipOverallLabel, tooltipStyles, renderTooltip, chartMargin: chartMarginProp, chartColors: chartColorsProp, emptyStatePlaceholderProps, yAxisTickFormatter, }: FootfallByGenderProps): react_jsx_runtime.JSX.Element;
 
 interface PasserbyConversionTooltipStyles {
     container?: CSSProperties;
@@ -1248,6 +1390,11 @@ interface PasserbyConversionRow {
      */
     conversion: number | null;
 }
+interface PasserbyConversionTooltipRenderContext {
+    tooltipProps: TooltipContentProps;
+    rows: PasserbyConversionRow[];
+    showConversionLine: boolean;
+}
 interface PasserbyConversionProps {
     title: string;
     data: PasserbyConversionRow[];
@@ -1318,6 +1465,10 @@ interface PasserbyConversionProps {
     /** Tick formatter for the right (conversion) Y-axis. */
     conversionAxisTickFormatter?: (value: number) => string;
     tooltipStyles?: PasserbyConversionTooltipStyles;
+    /**
+     * Full custom tooltip renderer. When provided, default tooltip layout is skipped.
+     */
+    renderTooltip?: (context: PasserbyConversionTooltipRenderContext) => ReactNode;
     showLegend?: boolean;
     /**
      * When `true` and at least one row has a finite `conversion`, render the line and right axis.
@@ -1327,6 +1478,7 @@ interface PasserbyConversionProps {
     showBarValueLabels?: boolean;
     chartMargin?: PasserbyConversionChartMargin;
     chartColors?: PasserbyConversionChartColors;
+    emptyStatePlaceholderProps?: ChartEmptyStateProps;
     emptyStateText?: string;
     /**
      * When `true`, Recharts animates bars and the conversion line on first draw and when values change.
@@ -1342,7 +1494,129 @@ interface PasserbyConversionProps {
     scrollChartToEndOnDataChange?: boolean;
 }
 
-declare function PasserbyConversion({ title, data, timeSlots, fillMissingTimeSlots, chartHeight, passerbySeriesName, walkInsSeriesName, conversionSeriesName, lineType, minWidthPerCategory, horizontalScroll: horizontalScrollProp, maxBarSize: maxBarSizeProp, barGap, cardMaxWidth, cardSx, titleRowSx, titleSx, dividerSx, legendRowSx, legendItemSx, legendSwatchSx, legendLabelSx, chartScrollAreaSx, stackSx, emptyStateSx, emptyStateTextSx, headerActions, tooltipTimeLabel, tooltipOverallLabel, tooltipWalkInsLabel, tooltipPasserbyLabel, tooltipConversionLabel, formatTooltipConversion, conversionAxisLabel, yAxisTickFormatter, conversionAxisTickFormatter, tooltipStyles, showLegend, showConversionLine: showConversionLineProp, showBarValueLabels, chartMargin: chartMarginProp, chartColors: chartColorsProp, emptyStateText, isChartAnimationActive, chartAnimationDuration, scrollChartToEndOnDataChange, }: PasserbyConversionProps): react_jsx_runtime.JSX.Element;
+declare function PasserbyConversion({ title, data, timeSlots, fillMissingTimeSlots, chartHeight, passerbySeriesName, walkInsSeriesName, conversionSeriesName, lineType, minWidthPerCategory, horizontalScroll: horizontalScrollProp, maxBarSize: maxBarSizeProp, barGap, cardMaxWidth, cardSx, titleRowSx, titleSx, dividerSx, legendRowSx, legendItemSx, legendSwatchSx, legendLabelSx, chartScrollAreaSx, stackSx, emptyStateSx, headerActions, tooltipTimeLabel, tooltipOverallLabel, tooltipWalkInsLabel, tooltipPasserbyLabel, tooltipConversionLabel, formatTooltipConversion, conversionAxisLabel, yAxisTickFormatter, conversionAxisTickFormatter, tooltipStyles, renderTooltip, showLegend, showConversionLine: showConversionLineProp, showBarValueLabels, chartMargin: chartMarginProp, chartColors: chartColorsProp, emptyStatePlaceholderProps, isChartAnimationActive, chartAnimationDuration, scrollChartToEndOnDataChange, }: PasserbyConversionProps): react_jsx_runtime.JSX.Element;
+
+/** Pie diameter: fixed px, or per-breakpoint (`xs` / `sm` / `md` match MUI breakpoints). */
+type WalkinAnalysisPieSize = number | {
+    xs?: number;
+    sm?: number;
+    md?: number;
+};
+/**
+ * Card `max-width`: a number is pixels on all breakpoints; a string is any CSS length;
+ * an object sets `maxWidth` per breakpoint (numbers become px). Omitted keys use `100%` (xs) and `640` (sm).
+ */
+type WalkinAnalysisCardMaxWidth = number | string | {
+    xs?: number | string;
+    sm?: number | string;
+    md?: number | string;
+};
+/** Same shape as `ChartWidgetSegmentedTab`; rendered with `ChartWidgetSegmentedTabs` inside WalkinAnalysis. */
+interface WalkinAnalysisTab {
+    id: string;
+    label: string;
+}
+/** Optional `sx` for title row layout, title text, legend column layout, and legend typographies. */
+interface WalkinAnalysisCustomization {
+    /** Merged onto the **title row** `Stack` (title + `headerActions`) after built-in styles. */
+    titleRowStackSx?: SxProps$1<Theme$1>;
+    /** Merged onto the card **title** `Typography` after built-in styles. */
+    titleSx?: SxProps$1<Theme$1>;
+    /** Merged onto the **legend column** `Stack` (list of slice rows) after built-in styles. */
+    legendColumnStackSx?: SxProps$1<Theme$1>;
+    /** Merged onto each legend **label** and **count** `Typography` after built-in styles. */
+    legendTypographySx?: SxProps$1<Theme$1>;
+}
+/**
+ * Optional `fontSize` overrides (number → px). Omitted keys keep the built-in defaults.
+ */
+interface WalkinAnalysisTypography {
+    title?: number | string;
+    tabs?: number | string;
+    piePercent?: number | string;
+    legendLabel?: number | string;
+    legendValue?: number | string;
+    tooltipTitle?: number | string;
+    tooltipValue?: number | string;
+    emptyState?: number | string;
+}
+interface WalkinAnalysisSlice {
+    id: string;
+    /** Legend title and accessible pie summary (e.g. “Individual Walk-ins”). */
+    label: string;
+    count: number;
+    /** Segment fill in the pie and legend swatch color. */
+    color: string;
+    /** Legend title text color (default **`#0f172a`**, lifestyle section title). */
+    legendLabelColor?: string;
+    /** Legend count / percentage line color (default **`#64748B`**). */
+    legendValueColor?: string;
+    /** Fill for the percentage label inside the pie slice (default `#fff`). */
+    segmentPercentColor?: string;
+    /**
+     * Optional control after the legend count line — e.g. **`<ChartWidgetInfoButton popover={…} />`**
+     * from `@bpfdev/oly-ui` so legend info matches the header info pattern.
+     */
+    legendInfo?: ReactNode;
+}
+interface WalkinAnalysisProps {
+    title: string;
+    tabs: WalkinAnalysisTab[];
+    activeTabId: string;
+    onTabChange: (tabId: string) => void;
+    /**
+     * Omit or `true`: scope tabs span the card width (default — forwarded as **ChartWidgetSegmentedTabs** `fullWidth`).
+     * `false`: pill track only as wide as the labels.
+     */
+    segmentedTabsFullWidth?: boolean;
+    /**
+     * Merged onto **ChartWidgetSegmentedTabs** `rootSx` after `fullWidth` width rules — use for `width`, `maxWidth`, alignment, etc.
+     */
+    segmentedTabsSx?: SxProps$1<Theme$1>;
+    /** Each item’s `label`, `count`, and `color` drive pie segments and legend; optional colors override legend / in-slice % text. */
+    slices: WalkinAnalysisSlice[];
+    /** Right side of the title row: compose `WidgetHeaderFilter`, `ChartWidgetHeaderSeparator`, `ChartWidgetInfoButton`, or custom nodes. */
+    headerActions?: ReactNode;
+    cardSx?: SxProps$1<Theme$1>;
+    /**
+     * Card maximum width. Defaults to full width on xs and 640px from sm up.
+     * Use `cardSx` for further layout overrides (it merges after this).
+     */
+    cardMaxWidth?: WalkinAnalysisCardMaxWidth;
+    /**
+     * Pie diameter (px). Use a number for the same size on all screens.
+     * Use an object to set sizes at `xs`, `sm`, and `md` (unset keys use 180, 220, 260).
+     * Omit for built-in responsive sizing across breakpoints.
+     */
+    pieSize?: WalkinAnalysisPieSize;
+    /** Per-region `fontSize` overrides (numbers are px). */
+    typography?: WalkinAnalysisTypography;
+    /** Targeted `sx` for title row, legend column, and typographies (avoid brittle `cardSx` descendant selectors). */
+    customization?: WalkinAnalysisCustomization;
+    emptyStatePlaceholderProps?: ChartEmptyStateProps;
+    /**
+     * Recharts **`Pie`** animation. Defaults **true** / **400** ms.
+     * There is no horizontal plot scroll on this card (pie layout); only animation applies.
+     */
+    isChartAnimationActive?: boolean;
+    chartAnimationDuration?: number;
+    /**
+     * Full custom tooltip renderer. When provided, default tooltip layout is skipped.
+     */
+    renderTooltip?: (context: WalkinAnalysisTooltipRenderContext) => ReactNode;
+}
+interface WalkinAnalysisTooltipRenderContext {
+    tooltipProps: TooltipContentProps;
+    slices: WalkinAnalysisSlice[];
+    total: number;
+    activeTabId: string;
+}
+
+/**
+ * Walk-in style analysis card: title row (optional `headerActions`), tabs, Recharts pie, legend.
+ * Pie and legend are driven by `slices` (`label`, `count`, `color`, optional legend / segment % colors).
+ */
+declare const WalkinAnalysis: ({ title, tabs, activeTabId, onTabChange, segmentedTabsFullWidth, segmentedTabsSx, slices, headerActions, cardSx, cardMaxWidth, pieSize, typography, customization, emptyStatePlaceholderProps, renderTooltip, isChartAnimationActive, chartAnimationDuration, }: WalkinAnalysisProps) => react_jsx_runtime.JSX.Element;
 
 interface WalkinTrafficTooltipStyles {
     /** Outer flex wrapper (arrow + card). */
@@ -1388,6 +1662,11 @@ interface WalkinTrafficRow {
     /** Footfall growth % vs last year for this slot; drives **FF Growth%** row and direction icon. */
     ffGrowthPercent?: number | null;
 }
+interface WalkinTrafficTooltipRenderContext {
+    tooltipProps: TooltipContentProps;
+    rows: WalkinTrafficRow[];
+    showTrendLine: boolean;
+}
 interface WalkinTrafficProps {
     title: string;
     data: WalkinTrafficRow[];
@@ -1434,6 +1713,10 @@ interface WalkinTrafficProps {
     /** @deprecated Use **`tooltipTimeLabel`** instead. */
     tooltipHourLabel?: string;
     tooltipStyles?: WalkinTrafficTooltipStyles;
+    /**
+     * Full custom tooltip renderer. When provided, default tooltip layout is skipped.
+     */
+    renderTooltip?: (context: WalkinTrafficTooltipRenderContext) => ReactNode;
     showLegend?: boolean;
     /**
      * When `true` and at least one row has a finite `trend`, render the line.
@@ -1445,6 +1728,7 @@ interface WalkinTrafficProps {
     showBarValueLabels?: boolean;
     chartMargin?: WalkinTrafficChartMargin;
     chartColors?: WalkinTrafficChartColors;
+    emptyStatePlaceholderProps?: ChartEmptyStateProps;
     yAxisTickFormatter?: (value: number) => string;
     emptyStateText?: string;
     /**
@@ -1460,7 +1744,190 @@ interface WalkinTrafficProps {
     scrollChartToEndOnDataChange?: boolean;
 }
 
-declare function WalkinTraffic({ title, data, chartHeight, barSeriesName, lineSeriesName, lineType, minWidthPerCategory, horizontalScroll: horizontalScrollProp, maxBarSize: maxBarSizeProp, cardMaxWidth, cardSx, titleRowSx, titleSx, dividerSx, legendRowSx, legendItemSx, legendSwatchSx, legendLabelSx, chartScrollAreaSx, stackSx, emptyStateSx, emptyStateTextSx, headerActions, tooltipTitle, tooltipTimeLabel, tooltipCurrentYearLabel, tooltipLastYearLabel, tooltipGrowthLabel, tooltipFooterNote: tooltipFooterNoteProp, tooltipHourLabel, tooltipStyles, showLegend, showTrendLine: showTrendLineProp, showLineInLegend, showBarValueLabels, chartMargin: chartMarginProp, chartColors: chartColorsProp, yAxisTickFormatter, emptyStateText, isChartAnimationActive, chartAnimationDuration, scrollChartToEndOnDataChange, }: WalkinTrafficProps): react_jsx_runtime.JSX.Element;
+declare function WalkinTraffic({ title, data, chartHeight, barSeriesName, lineSeriesName, lineType, minWidthPerCategory, horizontalScroll: horizontalScrollProp, maxBarSize: maxBarSizeProp, cardMaxWidth, cardSx, titleRowSx, titleSx, dividerSx, legendRowSx, legendItemSx, legendSwatchSx, legendLabelSx, chartScrollAreaSx, stackSx, emptyStateSx, headerActions, tooltipTitle, tooltipTimeLabel, tooltipCurrentYearLabel, tooltipLastYearLabel, tooltipGrowthLabel, tooltipFooterNote: tooltipFooterNoteProp, tooltipHourLabel, tooltipStyles, renderTooltip, showLegend, showTrendLine: showTrendLineProp, showLineInLegend, showBarValueLabels, chartMargin: chartMarginProp, chartColors: chartColorsProp, emptyStatePlaceholderProps, yAxisTickFormatter, isChartAnimationActive, chartAnimationDuration, scrollChartToEndOnDataChange, }: WalkinTrafficProps): react_jsx_runtime.JSX.Element;
+
+/** Primary line + tooltip fill (violet). */
+declare const BILLING_COUNTER_LINE_PRIMARY: "#7C3AED";
+/** Default pill track behind segmented tabs. */
+declare const BILLING_COUNTER_TABS_TRACK_BG: "#E8E8E8";
+
+type BillingCounterChartMargin = {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+};
+/**
+ * Simple panel tooltip: thin **grey bar** on top, then white body. Each line uses **muted prefix**
+ * (**Date:** / **Total:**) + **bold dark value** (same pattern as the earlier two-row design).
+ */
+type BillingCounterAnalyticsTooltipTheme = {
+    borderColor?: string;
+    borderRadiusPx?: number;
+    boxShadow?: string;
+    /** Grey strip at the top (no text). @default **#E5E7EB** */
+    topBarBackground?: string;
+    /** Height of the grey strip in px. @default **8** */
+    topBarHeightPx?: number;
+    bodyBackground?: string;
+    /** **Date:** / **Total:** label colour. @default **#6B7280** */
+    prefixColor?: string;
+    /** Date string and numeric value colour. @default **#111827** */
+    valueColor?: string;
+    /**
+     * When set without **prefixColor** / **valueColor**, both prefix and value use this single colour
+     * (legacy / compact override).
+     */
+    textColor?: string;
+    fontSizePx?: number;
+    /** Space between the two text lines in px. @default **6** */
+    lineGapPx?: number;
+    dateLabelPrefix?: string;
+    totalLabelPrefix?: string;
+    /** **Date:** / **Total:** — default **400** */
+    prefixFontWeight?: number;
+    /** Time label and numeric value — default **700** */
+    valueFontWeight?: number;
+    bodyStyle?: CSSProperties;
+};
+/**
+ * Optional layout / theme overrides for **BillingCounterAnalytics** and its children.
+ * Pass via **`customization`** on the component or **BillingCounterAnalyticsCustomizationProvider**.
+ */
+type BillingCounterAnalyticsCustomization = {
+    rootCard?: {
+        sx?: SxProps$1<Theme$1>;
+        elevation?: number;
+    };
+    header?: {
+        titleSx?: SxProps$1<Theme$1>;
+    };
+    /** Merged into **ChartWidgetSegmentedTabs** alongside billing defaults. */
+    segmentedTabs?: {
+        trackBackgroundColor?: string;
+        activeTabBackground?: string;
+        activeTabColor?: string;
+        inactiveTabColor?: string;
+        activeTabBoxShadow?: string;
+        rootSx?: SxProps$1<Theme$1>;
+        tabFontSize?: number | string;
+        fullWidth?: boolean;
+        /** Segmented tab flex layout; billing defaults to **equalWidth** (tabs fill the track). */
+        tabLayout?: ChartWidgetSegmentedTabLayout;
+        activeTabFontWeight?: number;
+        inactiveTabFontWeight?: number;
+    };
+    lineChart?: {
+        heightPx?: number;
+        lineColor?: string;
+        lineStrokeWidth?: number;
+        gridStroke?: string;
+        gridStrokeDasharray?: string;
+        margin?: BillingCounterChartMargin;
+        xAxisTickFill?: string;
+        yAxisTickFill?: string;
+        yAxisWidth?: number;
+        tooltip?: BillingCounterAnalyticsTooltipTheme;
+        cursorStroke?: string;
+        cursorStrokeDasharray?: string;
+        /**
+         * Line path: **`linear`** = straight segments (sharp corners). **`monotone`** = smooth curve.
+         * @default **`linear`**
+         */
+        lineType?: 'linear' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter' | 'natural';
+    };
+};
+
+declare const DEFAULT_BILLING_COUNTER_ANALYTICS_INFO_POPOVER: ChartWidgetInfoPopoverContent;
+
+type BillingCounterAnalyticsPoint = {
+    /** X-axis tick (e.g. Jan 12, Today). */
+    label: string;
+    value: number;
+};
+type BillingCounterAnalyticsTooltipRenderContext = {
+    tooltipProps: TooltipContentProps;
+    data: BillingCounterAnalyticsPoint[];
+    activeTabId: string;
+};
+type BillingCounterAnalyticsProps = {
+    /** Card title (left side of the header row). */
+    title?: string;
+    tabs: ChartWidgetSegmentedTab[];
+    activeTabId: string;
+    onTabChange: (tabId: string) => void;
+    /**
+     * Series for the active tab only. Ignored when **`seriesByTabId`** is set.
+     */
+    data?: BillingCounterAnalyticsPoint[];
+    /**
+     * All tab series keyed by **`tabs[].id`**. When set, overrides **`data`**.
+     */
+    seriesByTabId?: Record<string, BillingCounterAnalyticsPoint[]>;
+    /** Y-axis domain. @default `[0, 100]` */
+    yAxisDomain?: [number, number];
+    /** Y-axis tick values. @default `[20, 40, 60, 80, 100]` */
+    yAxisTicks?: number[];
+    /**
+     * Header info popover. Defaults to built-in copy; **`null`** hides separator + info button.
+     */
+    infoPopover?: ChartWidgetInfoPopoverContent | null;
+    /**
+     * Full custom tooltip renderer. When provided, default tooltip layout is skipped.
+     */
+    renderTooltip?: (context: BillingCounterAnalyticsTooltipRenderContext) => ReactNode;
+    emptyStatePlaceholderProps?: ChartEmptyStateProps;
+    customization?: BillingCounterAnalyticsCustomization;
+};
+
+declare const billingCounterDefaultTabs: ChartWidgetSegmentedTab[];
+/** Demo datasets aligned with **billingCounterDefaultTabs** ids. */
+declare const billingCounterMockSeriesByTabId: Record<string, BillingCounterAnalyticsPoint[]>;
+
+/**
+ * Billing counter analytics card: title row (optional info), pill tabs, Recharts line chart with violet styling.
+ */
+declare function BillingCounterAnalytics({ title, tabs, activeTabId, onTabChange, data, seriesByTabId, yAxisDomain, yAxisTicks, infoPopover, renderTooltip, emptyStatePlaceholderProps, customization, }: BillingCounterAnalyticsProps): React$1.ReactElement;
+
+type BillingCounterAnalyticsCustomizationProviderProps = {
+    value: BillingCounterAnalyticsCustomization;
+    children: React$1.ReactNode;
+};
+declare function BillingCounterAnalyticsCustomizationProvider({ value, children, }: BillingCounterAnalyticsCustomizationProviderProps): React$1.ReactElement;
+declare function useBillingCounterAnalyticsCustomization(): BillingCounterAnalyticsCustomization;
+
+/**
+ * Shared queue-time visualization palette (stacked bar, donut, area).
+ * Four violet shades, light → dark (segment index order) — pill bar / donut / area.
+ */
+declare const QUEUE_CHART_COLORS: readonly ["#E9E5FF", "#C4B5FD", "#8B5CF6", "#6D28D9"];
+/** Thin horizontal stacked bar height (px); pill radius uses half of this. */
+declare const QUEUE_STACKED_BAR_THICKNESS_PX = 8;
+
+type QueueTimeBreakdownCustomizationProviderProps = {
+    value: QueueTimeBreakdownCustomization;
+    children: React$1.ReactNode;
+};
+declare function QueueTimeBreakdownCustomizationProvider({ value, children, }: QueueTimeBreakdownCustomizationProviderProps): React$1.ReactElement;
+declare function useQueueTimeBreakdownCustomization(): QueueTimeBreakdownCustomization;
+
+declare function mergeCss(a: CSSProperties, b?: CSSProperties): CSSProperties;
+declare function mergeSx(...parts: Array<SxProps$1<Theme$1> | undefined>): SxProps$1<Theme$1> | undefined;
+declare function mergeRechartsTooltipStyles(overrides?: QueueTimeRechartsTooltipTheme): {
+    contentStyle: CSSProperties;
+    itemStyle: CSSProperties;
+    labelStyle: CSSProperties;
+    wrapperStyle: CSSProperties;
+};
+declare function mergeAreaTooltipStyles(overrides?: QueueTimeAreaTooltipTheme): Required<QueueTimeAreaTooltipTheme>;
+
+/** Demo data for Storybook / prototyping. */
+declare function generateMockPerformanceData(): QueueTimeBreakdownBarRow[];
+
+/**
+ * Queue time breakdown dashboard widget: stacked bars, queue buckets, donut comparison, area chart (Recharts).
+ */
+declare function QueueTimeBreakdown({ data, Donut_data, donutYesterdayData, headerImageSrc, headlineTotal, headlineSubtitle, dataComparisonTitle, queueBucketLegend, title, infoPopover, headlineInfoPopover, renderAreaTooltip, renderDonutTooltip, renderStackedBarTooltip, customization, }: QueueTimeBreakdownProps): React$1.ReactElement;
 
 /**
  * Treemap data helpers for FootFallHeatMap.
@@ -1569,10 +2036,38 @@ declare function metricForNode(node: unknown, sortBy: 'walkins' | 'dwell'): numb
 /** Read optional `zone_kpi_strip` / `zoneKpiStrip` from a hierarchy or flat API node. */
 declare function parseZoneKpiStripFromRaw(node: Record<string, unknown>): ZoneKpiStripPayload | undefined;
 declare function hashColor(seed: string): string;
-declare function buildTreemapNodes({ container, sortBy, pathKey, }: {
+/**
+ * Optional treemap tile fill: **vivid** HSL tuning from **`hashColor(seed)`**, or a full **`tileColorFromSeed`** override.
+ * Pass **`treemap.tileColors`** on **`FootFallHeatMapView`**, or use **`createTreemapTileColorResolver`** inside **`tree.buildNodes`**.
+ */
+type FootFallHeatMapTreemapColorCustomization = {
+    /** Replace the built-in vivid / hash pipeline entirely. */
+    tileColorFromSeed?: (seed: string) => string;
+    /** Multiply base saturation after conversion to HSL. @default **1.48** */
+    saturationBoost?: number;
+    /** Added after boost; result is clamped to **1**. @default **0.1** */
+    saturationFloor?: number;
+    /** Clamp lightness lower bound (**0–1**). @default **0.38** */
+    lightnessClampMin?: number;
+    /** Clamp lightness upper bound (**0–1**). @default **0.55** */
+    lightnessClampMax?: number;
+    /** Scale base lightness from hash before clamp. @default **0.96** */
+    lightnessScale?: number;
+    /** Offset after scale. @default **0.02** */
+    lightnessOffset?: number;
+};
+/**
+ * - **`undefined` / `null`** → **`hashColor`** only.
+ * - **`{ tileColorFromSeed }`** → use that resolver.
+ * - **Any other object** (including **`{}`**) → vivid HSL pipeline with defaults merged from **`customization`**.
+ */
+declare function createTreemapTileColorResolver(customization?: FootFallHeatMapTreemapColorCustomization | null): (seed: string) => string;
+declare function buildTreemapNodes({ container, sortBy, pathKey, tileColorFromSeed, }: {
     container: Record<string, unknown>;
     sortBy: 'walkins' | 'dwell';
     pathKey: string;
+    /** When set, used for `color`; otherwise **`hashColor(\`${pathKey}/${name}\`)`**. */
+    tileColorFromSeed?: (seed: string) => string;
 }): TreemapNode[];
 declare function getNestedList(payload: TreemapNode & {
     children?: TreemapNode[];
@@ -1607,6 +2102,20 @@ type FootFallHeatMapIcons = {
     /** Iconify id for the title-row info button. */
     headerInfo?: string;
 };
+/**
+ * Optional `sx` for visitor/dwell **metric chips** inside each treemap `foreignObject` tile
+ * (replaces brittle `& foreignObject > .MuiStack-root …` overrides on a parent wrapper).
+ */
+type FootFallHeatMapTileMetricsCustomization = {
+    /** Merged onto the **row** `Stack` that wraps both metric pills (below title / %). */
+    metricsRowStackSx?: SxProps$1<Theme$1>;
+    /** Merged onto each **pill** `Stack` (visitors + dwell) after built-in chip styles. */
+    metricPillStackSx?: SxProps$1<Theme$1>;
+    /** Merged onto the **numeric Typography** inside each pill after built-in styles. */
+    metricPillValueTypographySx?: SxProps$1<Theme$1>;
+    /** Merged onto the **icon circle `Box`** inside each pill after built-in styles. */
+    metricPillIconBoxSx?: SxProps$1<Theme$1>;
+};
 type FootFallHeatMapTreemapLayout = {
     /** Pixel height when a breadcrumb strip is visible above the chart. */
     heightWithBreadcrumb?: number;
@@ -1622,6 +2131,13 @@ type FootFallHeatMapTreemapLayout = {
     fill?: string;
     /** MUI `sx` merged onto the blank terminal-details body below the KPI strip. */
     leafDetailsBodySx?: SxProps$1<Theme$1>;
+    /** Per-tile visitor/dwell metric chip styling (merged on real `Stack` / `Typography` / `Box` nodes). */
+    tileMetrics?: FootFallHeatMapTileMetricsCustomization;
+    /**
+     * Treemap tile **fill** tuning: vivid HSL pipeline from **`hashColor(seed)`**, or a full **`tileColorFromSeed`** override.
+     * Wired into default **`buildTreemapNodes`** and passed as **`options.tileColorFromSeed`** to **`tree.buildNodes`**.
+     */
+    tileColors?: FootFallHeatMapTreemapColorCustomization;
 };
 type FootFallHeatMapTreeOptions = {
     /** Starting hierarchy level shown in treemap for hierarchical payloads. */
@@ -1657,6 +2173,8 @@ type FootFallHeatMapTreeOptions = {
      */
     buildNodes?: (initialData: ZoneAnalyticsHierarchy | ZoneAnalyticsFlatItem[] | null, options: {
         sortBy: 'walkins' | 'dwell';
+        /** From **`treemap.tileColors`** — use for tile `color` fields (same resolver as built-in tree). */
+        tileColorFromSeed?: (seed: string) => string;
     }) => TreemapNode[];
 };
 /** KPI numbers used for the summary row and passed to `summaryCards`. */
@@ -1676,6 +2194,17 @@ type FootFallHeatMapKpiSummaryCardItem = {
     /** Per-card icon color; falls back to `statCardIconColor`. */
     iconColor?: string;
 };
+type FootFallHeatMapKpiStripSegmentTooltipRenderContext = {
+    segment: {
+        id: string;
+        label: string;
+        value: number;
+        color?: string;
+    };
+    segmentIndex: number;
+    itemLabel: string;
+    itemValue: number;
+};
 /**
  * Optional styling for the zone KPI block: summary stat cards, outer panel, segmented bar, and tooltips.
  * Segment colors cycle by index when the palette is shorter than the number of segments.
@@ -1701,6 +2230,11 @@ type FootFallHeatMapKpiStripPresentation = {
     segmentValueSx?: SxProps$1<Theme$1>;
     /** Merged onto the segment tooltip card (popover). */
     segmentTooltipCardSx?: SxProps$1<Theme$1>;
+    /**
+     * Full custom renderer for segmented bar tooltips.
+     * When provided, default tooltip card layout is skipped.
+     */
+    renderSegmentTooltip?: (context: FootFallHeatMapKpiStripSegmentTooltipRenderContext) => ReactNode;
     /**
      * Build any number of summary KPI cards from live zone metrics. When the returned array is **non-empty**,
      * it replaces the default “No. of Stores” / “Overall Visitors” pair. Return `[]` to hide all summary cards.
@@ -1729,222 +2263,19 @@ type FootFallHeatMapViewProps = {
      * panel; `statCardSx` / `statCardIconColor`; segment row + tooltip styling.
      */
     kpiStrip?: FootFallHeatMapKpiStripPresentation;
+    emptyStatePlaceholderProps?: ChartEmptyStateProps;
 };
 
 /**
  * In-store zone treemap with drill-down and leaf KPIs. Pass `initialData` from your API or mocks.
  */
-declare function FootFallHeatMapView({ initialData, isLoading, isFetching, error, title, infoTooltip, brandLabel, icons: iconsProp, iconSize: iconSizeProp, iconColor: iconColorProp, headerInfoIconSize, treemap: treemapProp, tree: treeProp, kpiStrip: kpiStripPresentation, }: FootFallHeatMapViewProps): react_jsx_runtime.JSX.Element;
+declare function FootFallHeatMapView({ initialData, isLoading, isFetching, error, title, infoTooltip, brandLabel, icons: iconsProp, iconSize: iconSizeProp, iconColor: iconColorProp, headerInfoIconSize, treemap: treemapProp, tree: treeProp, kpiStrip: kpiStripPresentation, emptyStatePlaceholderProps, }: FootFallHeatMapViewProps): react_jsx_runtime.JSX.Element;
 
 /** Zone KPI grid using MUI layout. */
 declare const ZoneWiseKpiCards: ({ metrics }: {
     metrics: ZoneAnalyticsMetrics;
 }) => react_jsx_runtime.JSX.Element;
 
-/**
- * Shared queue-time visualization palette (stacked bar, donut, area).
- * Four violet shades, light → dark (segment index order) — pill bar / donut / area.
- */
-declare const QUEUE_CHART_COLORS: readonly ["#E9E5FF", "#C4B5FD", "#8B5CF6", "#6D28D9"];
-/** Thin horizontal stacked bar height (px); pill radius uses half of this. */
-declare const QUEUE_STACKED_BAR_THICKNESS_PX = 8;
-
-type QueueTimeBreakdownCustomizationProviderProps = {
-    value: QueueTimeBreakdownCustomization;
-    children: React$1.ReactNode;
-};
-declare function QueueTimeBreakdownCustomizationProvider({ value, children, }: QueueTimeBreakdownCustomizationProviderProps): React$1.ReactElement;
-declare function useQueueTimeBreakdownCustomization(): QueueTimeBreakdownCustomization;
-
-declare function mergeCss(a: CSSProperties, b?: CSSProperties): CSSProperties;
-declare function mergeSx(...parts: Array<SxProps$1<Theme$1> | undefined>): SxProps$1<Theme$1> | undefined;
-declare function mergeRechartsTooltipStyles(overrides?: QueueTimeRechartsTooltipTheme): {
-    contentStyle: CSSProperties;
-    itemStyle: CSSProperties;
-    labelStyle: CSSProperties;
-    wrapperStyle: CSSProperties;
-};
-declare function mergeAreaTooltipStyles(overrides?: QueueTimeAreaTooltipTheme): Required<QueueTimeAreaTooltipTheme>;
-
-/** Demo data for Storybook / prototyping. */
-declare function generateMockPerformanceData(): QueueTimeBreakdownBarRow[];
-
-/**
- * Queue time breakdown dashboard widget: stacked bars, queue buckets, donut comparison, area chart (Recharts).
- */
-declare function QueueTimeBreakdown({ data, Donut_data, donutYesterdayData, headerImageSrc, headlineTotal, headlineSubtitle, dataComparisonTitle, queueBucketLegend, title, infoPopover, customization, }: QueueTimeBreakdownProps): React$1.ReactElement;
-
-type QueueTimeBreakdownDonutProps = {
-    chartFilter: QueueTimeChartFilter;
-    averageData: number[];
-    LabelName: string;
-    labels?: readonly string[];
-};
-declare function QueueTimeBreakdownDonut({ chartFilter, averageData, LabelName, labels, }: QueueTimeBreakdownDonutProps): React$1.ReactElement;
-
-type QueueTimeBreakdownStackedBarProps = {
-    row: QueueTimeBreakdownBarRow;
-    /** One entry per segment: percent line + range line (aligned under each slice). */
-    legendRows: readonly QueueBucketLegendItem[];
-};
-/**
- * Horizontal 100% stacked bar (Recharts) — slim pill, framed by two rules; labels use the same flex widths as data.
- */
-declare function QueueTimeBreakdownStackedBar({ row, legendRows, }: QueueTimeBreakdownStackedBarProps): React$1.ReactElement;
-
-type QueueTimeAreaSeriesPoint = {
-    name: string;
-    data: number[];
-};
-type QueueTimeBreakdownAreaProps = {
-    series: QueueTimeAreaSeriesPoint[];
-    xAxis: string[];
-};
-declare const QueueTimeBreakdownArea: ({ series, xAxis, }: QueueTimeBreakdownAreaProps) => React$1.ReactElement;
-
-declare function getQueueTimeBreakdownAreaXAxisData(type: QueueTimeChartFilter): string[];
-declare function getQueueTimeBreakdownAreaSeriesData(type: QueueTimeChartFilter): QueueTimeAreaSeriesPoint[];
-
-/** Primary line + tooltip fill (violet). */
-declare const BILLING_COUNTER_LINE_PRIMARY: "#7C3AED";
-/** Default pill track behind segmented tabs. */
-declare const BILLING_COUNTER_TABS_TRACK_BG: "#E8E8E8";
-
-type BillingCounterChartMargin = {
-    top?: number;
-    right?: number;
-    bottom?: number;
-    left?: number;
-};
-/**
- * Simple panel tooltip: thin **grey bar** on top, then white body. Each line uses **muted prefix**
- * (**Date:** / **Total:**) + **bold dark value** (same pattern as the earlier two-row design).
- */
-type BillingCounterAnalyticsTooltipTheme = {
-    borderColor?: string;
-    borderRadiusPx?: number;
-    boxShadow?: string;
-    /** Grey strip at the top (no text). @default **#E5E7EB** */
-    topBarBackground?: string;
-    /** Height of the grey strip in px. @default **8** */
-    topBarHeightPx?: number;
-    bodyBackground?: string;
-    /** **Date:** / **Total:** label colour. @default **#6B7280** */
-    prefixColor?: string;
-    /** Date string and numeric value colour. @default **#111827** */
-    valueColor?: string;
-    /**
-     * When set without **prefixColor** / **valueColor**, both prefix and value use this single colour
-     * (legacy / compact override).
-     */
-    textColor?: string;
-    fontSizePx?: number;
-    /** Space between the two text lines in px. @default **6** */
-    lineGapPx?: number;
-    dateLabelPrefix?: string;
-    totalLabelPrefix?: string;
-    /** **Date:** / **Total:** — default **400** */
-    prefixFontWeight?: number;
-    /** Time label and numeric value — default **700** */
-    valueFontWeight?: number;
-    bodyStyle?: CSSProperties;
-};
-/**
- * Optional layout / theme overrides for **BillingCounterAnalytics** and its children.
- * Pass via **`customization`** on the component or **BillingCounterAnalyticsCustomizationProvider**.
- */
-type BillingCounterAnalyticsCustomization = {
-    rootCard?: {
-        sx?: SxProps$1<Theme$1>;
-        elevation?: number;
-    };
-    header?: {
-        titleSx?: SxProps$1<Theme$1>;
-    };
-    /** Merged into **ChartWidgetSegmentedTabs** alongside billing defaults. */
-    segmentedTabs?: {
-        trackBackgroundColor?: string;
-        activeTabBackground?: string;
-        activeTabColor?: string;
-        inactiveTabColor?: string;
-        activeTabBoxShadow?: string;
-        rootSx?: SxProps$1<Theme$1>;
-        tabFontSize?: number | string;
-        fullWidth?: boolean;
-        /** Segmented tab flex layout; billing defaults to **equalWidth** (tabs fill the track). */
-        tabLayout?: ChartWidgetSegmentedTabLayout;
-        activeTabFontWeight?: number;
-        inactiveTabFontWeight?: number;
-    };
-    lineChart?: {
-        heightPx?: number;
-        lineColor?: string;
-        lineStrokeWidth?: number;
-        gridStroke?: string;
-        gridStrokeDasharray?: string;
-        margin?: BillingCounterChartMargin;
-        xAxisTickFill?: string;
-        yAxisTickFill?: string;
-        yAxisWidth?: number;
-        tooltip?: BillingCounterAnalyticsTooltipTheme;
-        cursorStroke?: string;
-        cursorStrokeDasharray?: string;
-        /**
-         * Line path: **`linear`** = straight segments (sharp corners). **`monotone`** = smooth curve.
-         * @default **`linear`**
-         */
-        lineType?: 'linear' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter' | 'natural';
-    };
-};
-
-declare const DEFAULT_BILLING_COUNTER_ANALYTICS_INFO_POPOVER: ChartWidgetInfoPopoverContent;
-
-type BillingCounterAnalyticsPoint = {
-    /** X-axis tick (e.g. Jan 12, Today). */
-    label: string;
-    value: number;
-};
-type BillingCounterAnalyticsProps = {
-    /** Card title (left side of the header row). */
-    title?: string;
-    tabs: ChartWidgetSegmentedTab[];
-    activeTabId: string;
-    onTabChange: (tabId: string) => void;
-    /**
-     * Series for the active tab only. Ignored when **`seriesByTabId`** is set.
-     */
-    data?: BillingCounterAnalyticsPoint[];
-    /**
-     * All tab series keyed by **`tabs[].id`**. When set, overrides **`data`**.
-     */
-    seriesByTabId?: Record<string, BillingCounterAnalyticsPoint[]>;
-    /** Y-axis domain. @default `[0, 100]` */
-    yAxisDomain?: [number, number];
-    /** Y-axis tick values. @default `[20, 40, 60, 80, 100]` */
-    yAxisTicks?: number[];
-    /**
-     * Header info popover. Defaults to built-in copy; **`null`** hides separator + info button.
-     */
-    infoPopover?: ChartWidgetInfoPopoverContent | null;
-    customization?: BillingCounterAnalyticsCustomization;
-};
-
-declare const billingCounterDefaultTabs: ChartWidgetSegmentedTab[];
-/** Demo datasets aligned with **billingCounterDefaultTabs** ids. */
-declare const billingCounterMockSeriesByTabId: Record<string, BillingCounterAnalyticsPoint[]>;
-
-/**
- * Billing counter analytics card: title row (optional info), pill tabs, Recharts line chart with violet styling.
- */
-declare function BillingCounterAnalytics({ title, tabs, activeTabId, onTabChange, data, seriesByTabId, yAxisDomain, yAxisTicks, infoPopover, customization, }: BillingCounterAnalyticsProps): React$1.ReactElement;
-
-type BillingCounterAnalyticsCustomizationProviderProps = {
-    value: BillingCounterAnalyticsCustomization;
-    children: React$1.ReactNode;
-};
-declare function BillingCounterAnalyticsCustomizationProvider({ value, children, }: BillingCounterAnalyticsCustomizationProviderProps): React$1.ReactElement;
-declare function useBillingCounterAnalyticsCustomization(): BillingCounterAnalyticsCustomization;
-
 type PeakBillingHoursChartMargin = {
     top?: number;
     right?: number;
@@ -2005,6 +2336,11 @@ type PeakBillingHoursPoint = {
     /** Bar height; **0** omits the value label and draws a flat bar. */
     value: number;
 };
+type PeakBillingHoursTooltipRenderContext = {
+    tooltipProps: TooltipContentProps;
+    data: PeakBillingHoursPoint[];
+    activeTabId: string;
+};
 type PeakBillingHoursProps = {
     title?: string;
     /** Shown after the title (e.g. **(Last 7 days)**). */
@@ -2017,6 +2353,11 @@ type PeakBillingHoursProps = {
     yAxisDomain?: [number, number];
     yAxisTicks?: number[];
     infoPopover?: ChartWidgetInfoPopoverContent | null;
+    /**
+     * Full custom tooltip renderer. When provided, default tooltip layout is skipped.
+     */
+    renderTooltip?: (context: PeakBillingHoursTooltipRenderContext) => ReactNode;
+    emptyStatePlaceholderProps?: ChartEmptyStateProps;
     customization?: PeakBillingHoursCustomization;
 };
 
@@ -2029,7 +2370,7 @@ declare const peakBillingHoursMockSeriesByTabId: Record<string, PeakBillingHours
  * Peak billing hours card: title + subtitle, info control, violet segmented tabs (intrinsic),
  * vertical bar chart with square tops, value labels, and panel tooltip.
  */
-declare function PeakBillingHours({ title, subtitle, tabs, activeTabId, onTabChange, data, seriesByTabId, yAxisDomain, yAxisTicks, infoPopover, customization, }: PeakBillingHoursProps): React$1.ReactElement;
+declare function PeakBillingHours({ title, subtitle, tabs, activeTabId, onTabChange, data, seriesByTabId, yAxisDomain, yAxisTicks, infoPopover, renderTooltip, emptyStatePlaceholderProps, customization, }: PeakBillingHoursProps): React$1.ReactElement;
 
 type PeakBillingHoursCustomizationProviderProps = {
     value: PeakBillingHoursCustomization;
@@ -2058,4 +2399,4 @@ interface FalconThemeProviderProps {
 
 declare const FalconThemeProvider: ({ children, mode: modeProp, settings, }: FalconThemeProviderProps) => react_jsx_runtime.JSX.Element;
 
-export { AddCommentInput, type AddCommentInputProps, AdvancedFiltersDialog, type AdvancedFiltersDialogProps, BILLING_COUNTER_LINE_PRIMARY, BILLING_COUNTER_TABS_TRACK_BG, BillingCounterAnalytics, type BillingCounterAnalyticsCustomization, BillingCounterAnalyticsCustomizationProvider, type BillingCounterAnalyticsPoint, type BillingCounterAnalyticsProps, type BillingCounterAnalyticsTooltipTheme, type BillingCounterChartMargin, ButtonWithIcon, type ButtonWithIconProps, CHART_PERIOD_FILTER_INFO_POPOVER, ChartWidgetHeaderSeparator, ChartWidgetInfoButton, type ChartWidgetInfoButtonProps, type ChartWidgetInfoPopoverContent, RankedBarList as ChartWidgetRankedBarList, type RankedBarListItem as ChartWidgetRankedBarListItem, type RankedBarListProps as ChartWidgetRankedBarListProps, type RankedBarListSegment as ChartWidgetRankedBarSegment, type ChartWidgetSegmentedTab, type ChartWidgetSegmentedTabLayout, ChartWidgetSegmentedTabs, type ChartWidgetSegmentedTabsProps, DEFAULT_BILLING_COUNTER_ANALYTICS_INFO_POPOVER, DEFAULT_FOOTFALL_TILE_ICONS, DEFAULT_PEAK_BILLING_HOURS_INFO_POPOVER, DEFAULT_QUEUE_TIME_BREAKDOWN_INFO_POPOVER, FalconButton, type FalconButtonProps, FalconDIstrictFilter, type FalconDIstrictFilterOption, type FalconDIstrictFilterProps, FalconGrayButton, type FalconGrayButtonProps, FalconMultiSelect, type FalconMultiSelectOption, type FalconMultiSelectProps, type FalconMultiSelectStyleProps, FalconPagination, type FalconPaginationProps, FalconSelect, type FalconSelectOption, type FalconSelectProps, FalconSingleSwitch, type FalconSingleSwitchProps, FalconTable, type FalconTableProps, type FalconThemeDirection, type FalconThemeMode, FalconThemeProvider, type FalconThemeProviderProps, type FalconThemeSettings, FalconTicketColumsFilter, type FalconTicketColumsFilterProps, FalconTicketFilter, type FalconTicketFilterProps, type FootFallHeatMapIconColor, type FootFallHeatMapIconSize, type FootFallHeatMapIconSizeContext, type FootFallHeatMapIcons, type FootFallHeatMapKpiStripPresentation, type FootFallHeatMapKpiSummaryCardItem, type FootFallHeatMapSummaryKpis, type FootFallHeatMapTileIconRole, type FootFallHeatMapTreeOptions, type FootFallHeatMapTreemapLayout, FootFallHeatMapView, type FootFallHeatMapViewProps, FootfallByAgeGroups, type ChartCardMaxWidth as FootfallByAgeGroupsCardMaxWidth, type FootfallByAgeGroupsChartColors, type FootfallByAgeGroupsChartMargin, type FootfallByAgeGroupsHorizontalScroll, type FootfallByAgeGroupsProps, type FootfallByAgeGroupsRow, type FootfallByAgeGroupsSeries, type FootfallByAgeGroupsTooltipStyles, FootfallByGender, type ChartCardMaxWidth as FootfallByGenderCardMaxWidth, type FootfallByGenderChartColors, type FootfallByGenderChartMargin, type FootfallByGenderHorizontalScroll, type FootfallByGenderProps, type FootfallByGenderRow, type FootfallByGenderTooltipStyles, HeatMapChartLegend, type HeatMapChartLegendProps, type HeatMapLegendItem, KpiStatCard, type KpiStatCardDetailedProps, type KpiStatCardIconBackdropShape, type KpiStatCardInfoPlacement, type KpiStatCardInlineProps, type KpiStatCardProps, type KpiTrend, type KpiTrendLayout, PasserbyConversion, type ChartCardMaxWidth as PasserbyConversionCardMaxWidth, type PasserbyConversionChartColors, type PasserbyConversionChartMargin, type PasserbyConversionHorizontalScroll, type PasserbyConversionProps, type PasserbyConversionRow, type PasserbyConversionTooltipStyles, PeakBillingHours, type PeakBillingHoursChartMargin, type PeakBillingHoursCustomization, PeakBillingHoursCustomizationProvider, type PeakBillingHoursPoint, type PeakBillingHoursProps, ProgressBarNumber, type ProgressBarNumberProps, QUEUE_CHART_COLORS, QUEUE_STACKED_BAR_THICKNESS_PX, QUEUE_TIME_BREAKDOWN_DEFAULT_HEADER_IMAGE_SRC, QUEUE_TIME_BREAKDOWN_INFO_POPOVER, type QueueBucketLegendItem, type QueueTimeAreaSeriesPoint, type QueueTimeAreaTooltipTheme, QueueTimeBreakdown, QueueTimeBreakdownArea, type QueueTimeBreakdownAreaProps, type QueueTimeBreakdownBarRow, type QueueTimeBreakdownCustomization, QueueTimeBreakdownCustomizationProvider, QueueTimeBreakdownDonut, type QueueTimeBreakdownDonutProps, type QueueTimeBreakdownProps, QueueTimeBreakdownStackedBar, type QueueTimeBreakdownStackedBarProps, type QueueTimeChartFilter, TimePeriodFilter as QueueTimePeriodFilter, type QueueTimePeriodFilterInfoButtonPresentation, type TimePeriodFilterProps as QueueTimePeriodFilterProps, type QueueTimePeriodFilterTheme, type QueueTimeRechartsTooltipTheme, type QueueTimeStackedSeriesItem, RankedBarList, type RankedBarListItem, type RankedBarListProps, type RankedBarListSegment, TIME_PERIOD_FILTER_INFO_POPOVER, TIME_PERIOD_FILTER_INFO_POPOVER_BREAKDOWN, TimePeriodFilter, type TimePeriodFilterInfoButtonPresentation, type TimePeriodFilterProps, type TimePeriodFilterTheme, type TreemapNode, WalkinAnalysis, type WalkinAnalysisCardMaxWidth, type WalkinAnalysisPieSize, type WalkinAnalysisProps, type WalkinAnalysisSlice, type WalkinAnalysisTab, type WalkinAnalysisTypography, WalkinTraffic, WalkinTraffic as WalkinTrafficByHour, type ChartCardMaxWidth as WalkinTrafficByHourCardMaxWidth, type WalkinTrafficChartColors as WalkinTrafficByHourChartColors, type WalkinTrafficChartMargin as WalkinTrafficByHourChartMargin, type WalkinTrafficHorizontalScroll as WalkinTrafficByHourHorizontalScroll, type WalkinTrafficProps as WalkinTrafficByHourProps, type WalkinTrafficRow as WalkinTrafficByHourRow, type WalkinTrafficTooltipStyles as WalkinTrafficByHourTooltipStyles, type ChartCardMaxWidth as WalkinTrafficCardMaxWidth, type WalkinTrafficChartColors, type WalkinTrafficChartMargin, type WalkinTrafficHorizontalScroll, type WalkinTrafficProps, type WalkinTrafficRow, type WalkinTrafficTooltipStyles, WidgetHeaderFilter, type WidgetHeaderFilterProps, type WidgetHeaderFilterStyleProps, type WidgetHeaderMultiSelectConfig, type ZoneAnalyticsFlatItem, type ZoneAnalyticsHierarchy, type ZoneAnalyticsMetrics, type ZoneKpiStripPayload, ZoneWiseKpiCards, billingCounterDefaultTabs, billingCounterMockSeriesByTabId, buildTreemapNodes, generateMockPerformanceData, getChildContainer, getNestedList, getQueueTimeBreakdownAreaSeriesData, getQueueTimeBreakdownAreaXAxisData, hashColor, isPlainObject, mergeAreaTooltipStyles, mergeCss, mergeRechartsTooltipStyles, mergeSx, metricForNode, parseMinutes, parseZoneKpiStripFromRaw, peakBillingHoursDefaultTabs, peakBillingHoursMockSeriesByTabId, peakBillingHoursVisitsMock, preprocessData, skipSingleBranchLevels, toRechartsTreemapData, useBillingCounterAnalyticsCustomization, usePeakBillingHoursCustomization, useQueueTimeBreakdownCustomization };
+export { AddCommentInput, type AddCommentInputProps, AdvancedFiltersDialog, type AdvancedFiltersDialogProps, BILLING_COUNTER_LINE_PRIMARY, BILLING_COUNTER_TABS_TRACK_BG, BillingCounterAnalytics, type BillingCounterAnalyticsCustomization, BillingCounterAnalyticsCustomizationProvider, type BillingCounterAnalyticsPoint, type BillingCounterAnalyticsProps, type BillingCounterAnalyticsTooltipRenderContext, type BillingCounterAnalyticsTooltipTheme, type BillingCounterChartMargin, ButtonWithIcon, type ButtonWithIconProps, CHART_PERIOD_FILTER_INFO_POPOVER, ChartEmptyState, type ChartEmptyStateProps, ChartWidgetHeaderSeparator, ChartWidgetInfoButton, type ChartWidgetInfoButtonProps, type ChartWidgetInfoPopoverContent, RankedBarList as ChartWidgetRankedBarList, type RankedBarListItem as ChartWidgetRankedBarListItem, type RankedBarListProps as ChartWidgetRankedBarListProps, type RankedBarListSegment as ChartWidgetRankedBarSegment, type ChartWidgetSegmentedTab, type ChartWidgetSegmentedTabLayout, ChartWidgetSegmentedTabs, type ChartWidgetSegmentedTabsProps, DEFAULT_BILLING_COUNTER_ANALYTICS_INFO_POPOVER, DEFAULT_FOOTFALL_TILE_ICONS, DEFAULT_PEAK_BILLING_HOURS_INFO_POPOVER, DEFAULT_QUEUE_TIME_BREAKDOWN_INFO_POPOVER, FalconButton, type FalconButtonProps, FalconDIstrictFilter, type FalconDIstrictFilterOption, type FalconDIstrictFilterProps, FalconGrayButton, type FalconGrayButtonProps, FalconMultiSelect, type FalconMultiSelectOption, type FalconMultiSelectProps, type FalconMultiSelectStyleProps, FalconPagination, type FalconPaginationProps, FalconSelect, type FalconSelectOption, type FalconSelectProps, FalconSingleSwitch, type FalconSingleSwitchProps, FalconTable, type FalconTableProps, type FalconThemeDirection, type FalconThemeMode, FalconThemeProvider, type FalconThemeProviderProps, type FalconThemeSettings, FalconTicketColumsFilter, type FalconTicketColumsFilterProps, FalconTicketFilter, type FalconTicketFilterProps, type FootFallHeatMapIconColor, type FootFallHeatMapIconSize, type FootFallHeatMapIconSizeContext, type FootFallHeatMapIcons, type FootFallHeatMapKpiStripPresentation, type FootFallHeatMapKpiStripSegmentTooltipRenderContext, type FootFallHeatMapKpiSummaryCardItem, type FootFallHeatMapSummaryKpis, type FootFallHeatMapTileIconRole, type FootFallHeatMapTileMetricsCustomization, type FootFallHeatMapTreeOptions, type FootFallHeatMapTreemapColorCustomization, type FootFallHeatMapTreemapLayout, FootFallHeatMapView, type FootFallHeatMapViewProps, FootfallByAgeGroups, type ChartCardMaxWidth as FootfallByAgeGroupsCardMaxWidth, type FootfallByAgeGroupsChartColors, type FootfallByAgeGroupsChartMargin, type FootfallByAgeGroupsHorizontalScroll, type FootfallByAgeGroupsProps, type FootfallByAgeGroupsRow, type FootfallByAgeGroupsSeries, type FootfallByAgeGroupsTooltipRenderContext, type FootfallByAgeGroupsTooltipStyles, FootfallByGender, type ChartCardMaxWidth as FootfallByGenderCardMaxWidth, type FootfallByGenderChartColors, type FootfallByGenderChartMargin, type FootfallByGenderHorizontalScroll, type FootfallByGenderProps, type FootfallByGenderRow, type FootfallByGenderTooltipRenderContext, type FootfallByGenderTooltipStyles, HeatMapChartLegend, type HeatMapChartLegendProps, type HeatMapLegendItem, KpiStatCard, type KpiStatCardCustomization, type KpiStatCardDetailedProps, type KpiStatCardIconBackdropShape, type KpiStatCardInfoPlacement, type KpiStatCardInlineProps, type KpiStatCardProps, type KpiTrend, type KpiTrendLayout, PasserbyConversion, type ChartCardMaxWidth as PasserbyConversionCardMaxWidth, type PasserbyConversionChartColors, type PasserbyConversionChartMargin, type PasserbyConversionHorizontalScroll, type PasserbyConversionProps, type PasserbyConversionRow, type PasserbyConversionTooltipRenderContext, type PasserbyConversionTooltipStyles, PeakBillingHours, type PeakBillingHoursChartMargin, type PeakBillingHoursCustomization, PeakBillingHoursCustomizationProvider, type PeakBillingHoursPoint, type PeakBillingHoursProps, type PeakBillingHoursTooltipRenderContext, ProgressBarNumber, type ProgressBarNumberProps, QUEUE_CHART_COLORS, QUEUE_STACKED_BAR_THICKNESS_PX, QUEUE_TIME_BREAKDOWN_DEFAULT_HEADER_IMAGE_SRC, QUEUE_TIME_BREAKDOWN_INFO_POPOVER, type QueueBucketLegendItem, type QueueTimeAreaSeriesPoint, type QueueTimeAreaTooltipTheme, QueueTimeBreakdown, QueueTimeBreakdownArea, type QueueTimeBreakdownAreaProps, type QueueTimeBreakdownAreaTooltipRenderContext, type QueueTimeBreakdownBarRow, type QueueTimeBreakdownCustomization, QueueTimeBreakdownCustomizationProvider, QueueTimeBreakdownDonut, type QueueTimeBreakdownDonutProps, type QueueTimeBreakdownDonutTooltipRenderContext, type QueueTimeBreakdownProps, QueueTimeBreakdownStackedBar, type QueueTimeBreakdownStackedBarProps, type QueueTimeBreakdownStackedBarTooltipRenderContext, type QueueTimeChartFilter, TimePeriodFilter as QueueTimePeriodFilter, type QueueTimePeriodFilterInfoButtonPresentation, type TimePeriodFilterProps as QueueTimePeriodFilterProps, type QueueTimePeriodFilterTheme, type QueueTimeRechartsTooltipTheme, type QueueTimeStackedSeriesItem, RankedBarList, type RankedBarListCustomization, type RankedBarListItem, type RankedBarListProps, type RankedBarListSegment, type RankedBarListSegmentTooltipRenderContext, TIME_PERIOD_FILTER_INFO_POPOVER, TIME_PERIOD_FILTER_INFO_POPOVER_BREAKDOWN, TimePeriodFilter, type TimePeriodFilterInfoButtonPresentation, type TimePeriodFilterProps, type TimePeriodFilterTheme, type TreemapNode, WalkinAnalysis, type WalkinAnalysisCardMaxWidth, type WalkinAnalysisCustomization, type WalkinAnalysisPieSize, type WalkinAnalysisProps, type WalkinAnalysisSlice, type WalkinAnalysisTab, type WalkinAnalysisTooltipRenderContext, type WalkinAnalysisTypography, WalkinTraffic, WalkinTraffic as WalkinTrafficByHour, type ChartCardMaxWidth as WalkinTrafficByHourCardMaxWidth, type WalkinTrafficChartColors as WalkinTrafficByHourChartColors, type WalkinTrafficChartMargin as WalkinTrafficByHourChartMargin, type WalkinTrafficHorizontalScroll as WalkinTrafficByHourHorizontalScroll, type WalkinTrafficProps as WalkinTrafficByHourProps, type WalkinTrafficRow as WalkinTrafficByHourRow, type WalkinTrafficTooltipStyles as WalkinTrafficByHourTooltipStyles, type ChartCardMaxWidth as WalkinTrafficCardMaxWidth, type WalkinTrafficChartColors, type WalkinTrafficChartMargin, type WalkinTrafficHorizontalScroll, type WalkinTrafficProps, type WalkinTrafficRow, type WalkinTrafficTooltipRenderContext, type WalkinTrafficTooltipStyles, WidgetHeaderFilter, type WidgetHeaderFilterProps, type WidgetHeaderFilterStyleProps, type WidgetHeaderMultiSelectConfig, type ZoneAnalyticsFlatItem, type ZoneAnalyticsHierarchy, type ZoneAnalyticsMetrics, type ZoneKpiStripPayload, ZoneWiseKpiCards, billingCounterDefaultTabs, billingCounterMockSeriesByTabId, buildTreemapNodes, createTreemapTileColorResolver, generateMockPerformanceData, getChildContainer, getNestedList, getQueueTimeBreakdownAreaSeriesData, getQueueTimeBreakdownAreaXAxisData, hashColor, isPlainObject, mergeAreaTooltipStyles, mergeCss, mergeRechartsTooltipStyles, mergeSx, metricForNode, parseMinutes, parseZoneKpiStripFromRaw, peakBillingHoursDefaultTabs, peakBillingHoursMockSeriesByTabId, peakBillingHoursVisitsMock, preprocessData, skipSingleBranchLevels, toRechartsTreemapData, useBillingCounterAnalyticsCustomization, usePeakBillingHoursCustomization, useQueueTimeBreakdownCustomization };