@bpfdev/oly-ui 1.0.2 → 1.0.4

package/dist/index.d.mts

@@ -1,6 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { SxProps, Theme, ButtonProps } from '@mui/material';
-import { ReactNode, ReactElement } from 'react';
+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 { GridColDef } from '@mui/x-data-grid';
 
 interface AddCommentInputProps {
@@ -99,6 +101,468 @@ 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;
+    /** @default 'How does it help?' */
+    helpTitle?: string;
+    helpBullets: string[];
+}
+interface ChartWidgetInfoButtonProps {
+    /** Fires on each button click (e.g. analytics). */
+    onClick?: () => void;
+    /** @default 'More information' */
+    ariaLabel?: string;
+    sx?: SxProps$1<Theme$1>;
+    /** Info icon colour. @default '#6750A4' */
+    iconColor?: string;
+    /** Circular button background. @default '#EFEFEF' */
+    buttonBg?: string;
+    /** Circular button background on hover. @default '#E5E5E5' */
+    buttonHoverBg?: string;
+    /** Info icon width and height in px. @default 22 */
+    iconSize?: number;
+    /** Circular button diameter (width and height) in px. @default 30 */
+    buttonSize?: number;
+    /**
+     * When set, shows a popover with title, description, and bullet list on **hover** or **click**
+     * (hover uses a short close delay so the pointer can move onto the panel).
+     * Omit to use the button as a plain control with `onClick` only.
+     */
+    popover?: ChartWidgetInfoPopoverContent;
+    /** Popover panel width in pixels. @default 320 (or 240 when `density` is `compact`) */
+    popoverWidth?: number;
+    /**
+     * `compact` uses a smaller circular trigger and a denser, narrower popover (e.g. KPI tiles).
+     * @default 'default'
+     */
+    density?: 'default' | 'compact';
+}
+
+declare const ChartWidgetInfoButton: ({ onClick, ariaLabel, sx, iconColor, buttonBg, buttonHoverBg, iconSize: iconSizeProp, buttonSize: buttonSizeProp, popover, popoverWidth: popoverWidthProp, density, }: ChartWidgetInfoButtonProps) => 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;
+    /** Shown in the segment tooltip (e.g. **Teens (13-21 years)**). */
+    label: string;
+    value: number;
+    /** Segment fill; stacks left → right inside the row’s filled width. */
+    color: string;
+}
+interface RankedBarListItem {
+    id: string;
+    /** Row label (e.g. camera id). */
+    label: string;
+    /** Numeric value; bar width is relative to `maxValue` (or the largest value in `items`). */
+    value: number;
+    /**
+     * Optional stacked breakdown inside the filled bar. Proportions use segment `value` / sum(`segments`).
+     * When omitted, the bar uses a single **`barColor`** fill.
+     */
+    segments?: RankedBarListSegment[];
+}
+interface RankedBarListProps {
+    /** Card title (e.g. “No. of Alerts Generated by Cameras”). */
+    title: string;
+    /** Rows to render; typically pre-sorted high → low. */
+    items: RankedBarListItem[];
+    /**
+     * When true (default), rows are sorted by `value` descending before render.
+     * Set false if `items` order is already final.
+     */
+    sortByValueDescending?: boolean;
+    /**
+     * Bar scale maximum. Defaults to the largest `value` in `items`, or 1 if empty.
+     */
+    maxValue?: number;
+    /** Left column subheader (e.g. “Cameras (High to Low)”). */
+    listHeaderLabel?: string;
+    /** Right column header above numeric values. */
+    valueColumnHeader?: string;
+    /** Show sort icon next to `listHeaderLabel`. */
+    showSortControl?: boolean;
+    /** Called when the sort icon is clicked. */
+    onSortClick?: () => void;
+    /** Right side of the title row (e.g. `ChartWidgetInfoButton`). */
+    headerActions?: ReactNode;
+    /** Filled portion of each bar when a row has no **`segments`**. */
+    barColor?: string;
+    /** Track behind the bar. */
+    barTrackColor?: string;
+    /** Bar thickness in px. Default **7**. */
+    barHeight?: number;
+    /**
+     * Tooltip for a stacked segment. Default: **label**, **" : "**, and **value** (e.g. Teens (13-21 years) : 38).
+     */
+    formatSegmentTooltip?: (segment: RankedBarListSegment, row: RankedBarListItem) => string;
+    /**
+     * 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.
+     */
+    segmentTooltipSx?: SxProps$1<Theme$1>;
+    /** Scrollable list max height. Ignored when `fillHeight` is true (list grows and scrolls inside). */
+    listMaxHeight?: number | string;
+    /**
+     * When true, the card uses the full width of its parent (`maxWidth: 100%`), not the default 640px cap on sm+.
+     */
+    fullWidth?: boolean;
+    /**
+     * When true, the card stretches to the parent’s height (`height: 100%`) and the list area flex-fills
+     * remaining space with `overflow: auto` — use inside a sized container (e.g. dashboard grid cell,
+     * dialog, or `height: 100vh` wrapper). Parent should give a defined height for this to take effect.
+     */
+    fillHeight?: boolean;
+    /** Outer card `maxWidth` (number = px). Defaults to responsive full width / 640px sm+ unless `fullWidth`. */
+    cardMaxWidth?: number | string | {
+        xs?: number | string;
+        sm?: number | string;
+        md?: number | string;
+    };
+    cardSx?: SxProps$1<Theme$1>;
+    /** Copy when `items` is empty. Default **No data**. */
+    emptyStateText?: string;
+    /**
+     * Animate each row’s bar width with CSS when `value` changes (default **true**).
+     * Set **`false`** for very frequent updates.
+     */
+    isBarWidthAnimationActive?: boolean;
+    /**
+     * When the scrollable list is taller than its viewport, reset **scroll to the top** after `items`
+     * changes (e.g. live refresh) so the highest-ranked rows stay in view. Default **true**.
+     * Set **`false`** to preserve manual scroll position.
+     */
+    scrollListToTopOnItemsChange?: boolean;
+}
+
+/**
+ * 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;
+
+/** Partial **ChartWidgetInfoButton** props (popover always comes from **`infoPopover`** on **TimePeriodFilter**). */
+type TimePeriodFilterInfoButtonPresentation = Partial<Omit<ChartWidgetInfoButtonProps, 'popover'>>;
+/** @deprecated Use {@link TimePeriodFilterInfoButtonPresentation}. */
+type QueueTimePeriodFilterInfoButtonPresentation = TimePeriodFilterInfoButtonPresentation;
+/** Partial overrides for Recharts `<Tooltip />` style props (donut / stacked bar). */
+type QueueTimeRechartsTooltipTheme = {
+    contentStyle?: CSSProperties;
+    itemStyle?: CSSProperties;
+    labelStyle?: CSSProperties;
+    wrapperStyle?: CSSProperties;
+};
+/** Partial overrides for the custom area chart tooltip DOM (inline styles). */
+type QueueTimeAreaTooltipTheme = {
+    container?: CSSProperties;
+    header?: CSSProperties;
+    body?: CSSProperties;
+    row?: CSSProperties;
+    dot?: CSSProperties;
+    label?: CSSProperties;
+    value?: CSSProperties;
+};
+/** D / W / M / Y segmented control. */
+type TimePeriodFilterTheme = {
+    /** Wrapper around the toggle + info (default inline-flex). */
+    rootSx?: SxProps$1<Theme$1>;
+    segmentSizePx?: number;
+    borderRadiusPx?: number;
+    fontSizePx?: number;
+    activeBackground?: string;
+    activeColor?: string;
+    inactiveHoverBackground?: string;
+    inactiveColor?: string;
+    trackBackground?: string;
+    borderColor?: string;
+    dividerColor?: string;
+    /** Used by **QueueTimeBreakdown** for the card title next to the period filter. */
+    titleSx?: SxProps$1<Theme$1>;
+    toggleGroupSx?: SxProps$1<Theme$1>;
+    /** Merged into each **D / W / M / Y** **ToggleButton** (after built-in segment styles). */
+    toggleButtonSx?: SxProps$1<Theme$1>;
+    /** Row beside the toggle: separator + **ChartWidgetInfoButton** (when **infoPopover** is not **`null`**). */
+    infoStackSx?: SxProps$1<Theme$1>;
+    /**
+     * Defaults for the info trigger (icon size, colours, density, **ariaLabel**, etc.).
+     * Instance **`infoButtonProps`** on **TimePeriodFilter** overrides the same keys.
+     */
+    infoButtonProps?: TimePeriodFilterInfoButtonPresentation;
+};
+/** @deprecated Use {@link TimePeriodFilterTheme}. */
+type QueueTimePeriodFilterTheme = TimePeriodFilterTheme;
+/**
+ * Optional theme overrides for `QueueTimeBreakdown` and its children.
+ * Pass via `customization` on `QueueTimeBreakdown`, or `QueueTimeBreakdownCustomizationProvider`.
+ */
+type QueueTimeBreakdownCustomization = {
+    /** Replaces default chart palette for stacked bar, donut, and area series. */
+    chartPalette?: readonly string[];
+    rootCard?: {
+        sx?: SxProps$1<Theme$1>;
+        elevation?: number;
+    };
+    periodFilter?: TimePeriodFilterTheme;
+    header?: {
+        headlineSx?: SxProps$1<Theme$1>;
+        subtitleSx?: SxProps$1<Theme$1>;
+    };
+    stackedBar?: {
+        barThicknessPx?: number;
+        ruleColor?: string;
+        labelPercentSx?: SxProps$1<Theme$1>;
+        labelRangeSx?: SxProps$1<Theme$1>;
+        tooltip?: QueueTimeRechartsTooltipTheme;
+    };
+    dataComparison?: {
+        cardSx?: SxProps$1<Theme$1>;
+        dividerSx?: SxProps$1<Theme$1>;
+    };
+    donut?: {
+        innerRadius?: number;
+        outerRadius?: number;
+        paddingAngle?: number;
+        centerLabelSx?: SxProps$1<Theme$1>;
+        /** SVG fill for % label on lighter slices (typically first palette entries). */
+        innerPercentOnLightSliceFill?: string;
+        /** SVG fill for % label on darker slices. */
+        innerPercentOnDarkSliceFill?: string;
+        tooltip?: QueueTimeRechartsTooltipTheme;
+        containerSx?: SxProps$1<Theme$1>;
+        chartHeightPx?: number;
+    };
+    areaChart?: {
+        stackHeightPx?: number;
+        chartHeightPx?: number;
+        margin?: {
+            top?: number;
+            right?: number;
+            bottom?: number;
+            left?: number;
+        };
+        gridStroke?: string;
+        cursorStroke?: string;
+        cursorStrokeWidth?: number;
+        yAxisLabel?: string;
+        areaTooltip?: QueueTimeAreaTooltipTheme;
+        cardSx?: SxProps$1<Theme$1>;
+        cardContentSx?: SxProps$1<Theme$1>;
+    };
+};
+
+/**
+ * Header illustration for the queue breakdown card.
+ * Default GIF path (place under app **`public`** or override with **`headerImageSrc`**).
+ */
+declare const QUEUE_TIME_BREAKDOWN_DEFAULT_HEADER_IMAGE_SRC: "/images/icon/DwellBreakdownIcon.gif";
+/** One series slice for Apex stacked horizontal bars. */
+type QueueTimeStackedSeriesItem = {
+    name: string;
+    data: number[];
+};
+/** One row of stacked-bar data (e.g. per store). */
+type QueueTimeBreakdownBarRow = {
+    name: string;
+    data: QueueTimeStackedSeriesItem[];
+    total: number;
+};
+type QueueTimeChartFilter = 'Day' | 'Week' | 'Month' | 'Year';
+/** Optional legend chip under the stacked bars (percent + label + color). */
+type QueueBucketLegendItem = {
+    percent: string;
+    label: string;
+    color: string;
+};
+type QueueTimeBreakdownProps = {
+    /** Stacked horizontal bar rows. */
+    data: QueueTimeBreakdownBarRow[];
+    /** Donut slice values (e.g. today). */
+    Donut_data: number[];
+    /** Optional second donut; defaults to Donut_data for both sides. */
+    donutYesterdayData?: number[];
+    total_visitor_today?: number;
+    overall_visitor_per_hour?: number;
+    overall_visitor_per_min?: number;
+    top_store?: string;
+    /**
+     * Header illustration URL. Defaults to {@link QUEUE_TIME_BREAKDOWN_DEFAULT_HEADER_IMAGE_SRC}
+     * (same asset as the queue-time dashboard widget). Pass `''` to hide the icon.
+     */
+    headerImageSrc?: string;
+    /** Main KPI number shown next to the icon. */
+    headlineTotal?: string;
+    /** Subtitle under the headline. */
+    headlineSubtitle?: string;
+    /** Row title above the donut comparison card. */
+    dataComparisonTitle?: string;
+    /** Legend under the stacked bars; defaults to four queue buckets. */
+    queueBucketLegend?: QueueBucketLegendItem[];
+    /** Card / widget title. */
+    title?: string;
+    /**
+     * Header info popover (next to D/W/M/Y). When omitted, the widget uses
+     * **`TIME_PERIOD_FILTER_INFO_POPOVER_BREAKDOWN`**. Pass **`null`** to hide the separator and
+     * **`ChartWidgetInfoButton`**. Standalone **`TimePeriodFilter`** does not inject popover copy implicitly.
+     */
+    infoPopover?: ChartWidgetInfoPopoverContent | null;
+    /** Visual / layout overrides for all sub-widgets (tooltips, palette, D/W/M/Y control, etc.). */
+    customization?: QueueTimeBreakdownCustomization;
+};
+
+type TimePeriodFilterProps = {
+    selectedFilter: QueueTimeChartFilter;
+    onFilterChange: React$1.Dispatch<React$1.SetStateAction<QueueTimeChartFilter>>;
+    /**
+     * Info popover beside D/W/M/Y. Pass **`ChartWidgetInfoPopoverContent`** to show separator +
+     * **ChartWidgetInfoButton**. Omit or **`null`** hides them (no implicit copy). For standalone use,
+     * prefer **`TIME_PERIOD_FILTER_INFO_POPOVER`** (neutral D/W/M/Y). **`TIME_PERIOD_FILTER_INFO_POPOVER_BREAKDOWN`**
+     * is for **QueueTimeBreakdown** only — that card injects it when **`infoPopover`** is omitted; do not
+     * use the breakdown preset on **TimePeriodFilter** outside that widget.
+     */
+    infoPopover?: ChartWidgetInfoPopoverContent | null;
+    /**
+     * Presentation for **ChartWidgetInfoButton** (ignored when **infoPopover** is omitted or **`null`**).
+     * Overrides the same fields from **customization.periodFilter.infoButtonProps** when both are set.
+     */
+    infoButtonProps?: Partial<Omit<ChartWidgetInfoButtonProps, 'popover'>>;
+    /** Overrides the same keys from **customization.periodFilter.rootSx** when both are set. */
+    sx?: SxProps$1<Theme$1>;
+};
+/**
+ * Day / Week / Month / Year segmented control — square D/W/M/Y cells, optional info button.
+ * Layout-neutral: no title or page-level alignment; wrap in your own **Stack** / **Box** or pass **sx**.
+ *
+ * Theme **customization.periodFilter** supports colours, **toggleGroupSx**, **toggleButtonSx**,
+ * **infoStackSx**, and **infoButtonProps**; component **infoButtonProps** override theme **infoButtonProps** for overlapping keys.
+ *
+ * Source: **`packages/falcon-ui/src/components/filters/TimePeriodFilter/`** (see **`components/tabs/`** for a similar package layout).
+ */
+declare function TimePeriodFilter({ selectedFilter, onFilterChange, infoPopover, infoButtonProps, sx, }: TimePeriodFilterProps): React$1.ReactElement;
+
+/**
+ * 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 FalconButtonProps extends ButtonProps {
     loading?: boolean;
     iconPlacement?: 'start' | 'end';
@@ -200,6 +664,143 @@ interface FalconTicketFilterProps {
 
 declare const FalconTicketFilter: ({ children, label, open: controlledOpen, onOpenChange, }: FalconTicketFilterProps) => react_jsx_runtime.JSX.Element;
 
+/** Shared max-width rules for chart cards (WalkinAnalysis-style). */
+type ChartCardMaxWidth = number | string | {
+    xs?: number | string;
+    sm?: number | string;
+    md?: number | string;
+};
+
+/** Optional inline styles merged over tooltip defaults (undefined keys keep defaults). */
+interface FootfallByAgeGroupsTooltipStyles {
+    container?: CSSProperties;
+    /** Each horizontal row in the tooltip */
+    sectionRow?: CSSProperties;
+    /** Prefix text like “Time:”, “Overall:” */
+    metaLabel?: CSSProperties;
+    /** Values next to meta labels (e.g. “11am”, total count) */
+    metaValue?: CSSProperties;
+    /** Colored dot before each series name */
+    seriesDot?: CSSProperties;
+    /** Bold series name in tooltip (short \`label\`, e.g. “Kids:”) */
+    seriesName?: CSSProperties;
+    /** Numeric value after series name */
+    seriesValue?: CSSProperties;
+}
+/** Partial Recharts outer margin; omitted sides use built-in defaults. */
+interface FootfallByAgeGroupsChartMargin {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+}
+/** Optional chart chrome colors (stroke / fills). */
+interface FootfallByAgeGroupsChartColors {
+    cartesianGridStroke?: string;
+    xAxisLineStroke?: string;
+    axisTickLineStroke?: string;
+    stackTotalLabelFill?: string;
+}
+
+/**
+ * Horizontal scrolling of the plot when it is wider than the card.
+ * - \`auto\` (default): only when \`minWidthPerCategory\` is positive **and** there are **2+** data rows.
+ * - \`on\`: allow scroll whenever \`minWidthPerCategory\` is positive (including a single bar).
+ * - \`off\`: never; chart width follows the viewport (\`minWidthPerCategory\` still affects nothing for width).
+ */
+type FootfallByAgeGroupsHorizontalScroll = 'auto' | 'on' | 'off';
+interface FootfallByAgeGroupsSeries {
+    /** Must match a numeric field on each row (e.g. \`Kids\`, \`Teens\`). */
+    dataKey: string;
+    /** Short name for **tooltip** rows and \`Bar\` \`name\` (e.g. \`Kids\`). */
+    label: string;
+    color: string;
+    /**
+     * Optional longer text for the **legend** only (e.g. \`Kids (3-12 years old)\`).
+     * Omit to use \`label\` in the legend as well.
+     */
+    legendLabel?: string;
+}
+/**
+ * Each row is one X-axis tick; \`name\` is the label. Other keys match \`series[].dataKey\` with numeric values.
+ */
+type FootfallByAgeGroupsRow = {
+    name: string;
+} & Record<string, string | number>;
+interface FootfallByAgeGroupsProps {
+    /** Card heading — **centered**; \`headerActions\` (if any) sit on the right without shifting it. */
+    title: string;
+    data: FootfallByAgeGroupsRow[];
+    /** Stacked series bottom-to-top (first item is bottom of stack). */
+    series: FootfallByAgeGroupsSeries[];
+    /** Plot height in px. Default: 430 */
+    chartHeight?: number;
+    /**
+     * Minimum pixels reserved per X-axis category so the chart can grow wider than the card and scroll horizontally.
+     * Set `0` to disable (chart stays `100%` wide only). Default: **56**.
+     * Used only when horizontal scrolling is active — see \`horizontalScroll\`.
+     */
+    minWidthPerCategory?: number;
+    /**
+     * When the plot may scroll horizontally. Default \`auto\`: **off** for a single row, **on** for two or more
+     * (if \`minWidthPerCategory\` is positive). Use \`off\` to avoid a scrollbar; \`on\` to always allow it.
+     */
+    horizontalScroll?: FootfallByAgeGroupsHorizontalScroll;
+    /**
+     * Recharts \`maxBarSize\`: caps how thick each vertical bar is when the category band is very wide
+     * (e.g. a single region in a wide scroll area). Default: **36** px, and never wider than the category
+     * width cap (\`minWidthPerCategory\` when positive, else **56**).
+     */
+    maxBarSize?: number;
+    cardMaxWidth?: ChartCardMaxWidth;
+    /** Outer card; merged after defaults (padding, border, width, etc.). */
+    cardSx?: SxProps$1<Theme$1>;
+    /** Wrapper around the centered title row (relative positioning). */
+    titleRowSx?: SxProps$1<Theme$1>;
+    /** Card heading \`Typography\`; merged after default weight/color. */
+    titleSx?: SxProps$1<Theme$1>;
+    /** Under the title row. */
+    dividerSx?: SxProps$1<Theme$1>;
+    /** Legend flex row (when \`showLegend\`). */
+    legendRowSx?: SxProps$1<Theme$1>;
+    /** Each legend item row (swatch + label). */
+    legendItemSx?: SxProps$1<Theme$1>;
+    /** Color swatch \`Box\` in the legend. */
+    legendSwatchSx?: SxProps$1<Theme$1>;
+    /** Legend text \`Typography\`. */
+    legendLabelSx?: SxProps$1<Theme$1>;
+    /** Scrollable chart viewport. */
+    chartScrollAreaSx?: SxProps$1<Theme$1>;
+    /** Outer vertical \`Stack\` (card body). */
+    stackSx?: SxProps$1<Theme$1>;
+    /** Empty state wrapper when \`data\` is empty. */
+    emptyStateSx?: SxProps$1<Theme$1>;
+    /** “No data” \`Typography\`. */
+    emptyStateTextSx?: SxProps$1<Theme$1>;
+    /** Filters / info control — **absolutely positioned** on the right of the title row. */
+    headerActions?: ReactNode;
+    /** Tooltip label before the category value. Default: \`Time\` */
+    tooltipCategoryLabel?: string;
+    /** Tooltip label before the stacked total. Default: \`Overall\` */
+    tooltipOverallLabel?: string;
+    /** Merge over default tooltip inline styles. */
+    tooltipStyles?: FootfallByAgeGroupsTooltipStyles;
+    /** 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;
+    /** 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;
@@ -216,6 +817,153 @@ interface HeatMapChartLegendProps {
 
 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;
@@ -224,6 +972,1072 @@ interface ProgressBarNumberProps {
 
 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;
+}
+
+/**
+ * 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;
+
+/** Optional inline styles merged over tooltip defaults (undefined keys keep defaults). */
+interface FootfallByGenderTooltipStyles {
+    container?: CSSProperties;
+    /** Each horizontal row in the tooltip */
+    sectionRow?: CSSProperties;
+    /** Prefix text like “Time:”, “Overall:” */
+    metaLabel?: CSSProperties;
+    /** Values next to meta labels */
+    metaValue?: CSSProperties;
+    /** Colored dot before each series name */
+    seriesDot?: CSSProperties;
+    /** Bold series name in tooltip */
+    seriesName?: CSSProperties;
+    /** Numeric value after series name */
+    seriesValue?: CSSProperties;
+}
+/** Partial Recharts outer margin; omitted sides use built-in defaults (after label reserve). */
+interface FootfallByGenderChartMargin {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+}
+/** Optional chart chrome colors (grid, axes, bar-top labels). */
+interface FootfallByGenderChartColors {
+    cartesianGridStroke?: string;
+    xAxisLineStroke?: string;
+    axisTickLineStroke?: string;
+    /** `LabelList` fill when `showBarValueLabels` is on */
+    barValueLabelFill?: string;
+}
+/**
+ * Horizontal scrolling of the plot when it is wider than the card.
+ * - `auto` (default): when there are **2+** categories and `minWidthPerCategory` is positive.
+ * - `on` / `off`: force scrollbar on or off.
+ */
+type FootfallByGenderHorizontalScroll = 'auto' | 'on' | 'off';
+interface FootfallByGenderRow {
+    name: string;
+    male: number;
+    female: number;
+}
+interface FootfallByGenderProps {
+    /** Card heading — **centered**; \`headerActions\` (if any) sit on the right without shifting it. */
+    title: string;
+    data: FootfallByGenderRow[];
+    /** Legend / tooltip labels for the two series. Defaults: Male, Female */
+    seriesLabels?: {
+        male: string;
+        female: string;
+    };
+    /** Bar fills. Defaults: #0071C1 (male), #FF7F1E (female) */
+    seriesColors?: {
+        male: string;
+        female: string;
+    };
+    /** Plot area height in px. Default: 430 */
+    chartHeight?: number;
+    /**
+     * Minimum pixels per X-axis category so the chart can grow wider than the card and scroll horizontally.
+     * Set `0` to disable. Default: **72**.
+     */
+    minWidthPerCategory?: number;
+    /** When horizontal scrolling is allowed. Default: `auto`. */
+    horizontalScroll?: FootfallByGenderHorizontalScroll;
+    /** Recharts `maxBarSize` cap per bar in the group. Default: **32**. */
+    maxBarSize?: number;
+    /** Gap between male/female bars in the same category. Default: **0** (flush). */
+    barGap?: number;
+    /** Color key legend at the **top-right of the visible chart area** (pinned; does not scroll with the plot). Default: `true`. */
+    showLegend?: boolean;
+    /**
+     * Numeric labels above each bar. Default: `true`. Set `false` if labels overlap on dense charts; tooltip still shows values.
+     */
+    showBarValueLabels?: boolean;
+    /**
+     * Opacity for bars in non-hovered categories while another is hovered. Default: **0.3**
+     */
+    dimmedBarOpacity?: number;
+    /**
+     * Opacity for the hovered category’s bars. Default: **0.9**
+     */
+    hoveredBarOpacity?: number;
+    /**
+     * Card maximum width. Defaults to full width on xs and 640px from sm up.
+     */
+    cardMaxWidth?: ChartCardMaxWidth;
+    /** Outer card; merged after defaults (padding, border, width, etc.). */
+    cardSx?: SxProps$1<Theme$1>;
+    /** Wrapper around the centered title row (relative positioning). */
+    titleRowSx?: SxProps$1<Theme$1>;
+    /** Card heading \`Typography\`; merged after default weight/color/centering. */
+    titleSx?: SxProps$1<Theme$1>;
+    /** Under the title row. */
+    dividerSx?: SxProps$1<Theme$1>;
+    /** Pinned legend \`ul\` (top-right overlay). */
+    legendOverlaySx?: SxProps$1<Theme$1>;
+    /** Each legend row (swatch + label). */
+    legendItemSx?: SxProps$1<Theme$1>;
+    /** Legend color swatch \`Box\`. */
+    legendSwatchSx?: SxProps$1<Theme$1>;
+    /** Legend text \`Typography\`. */
+    legendLabelSx?: SxProps$1<Theme$1>;
+    /** Outer box around scroll + legend (matches plot height). */
+    chartViewportSx?: SxProps$1<Theme$1>;
+    /** Horizontally scrollable chart area. */
+    chartScrollAreaSx?: SxProps$1<Theme$1>;
+    /** Outer vertical \`Stack\` (card body). */
+    stackSx?: SxProps$1<Theme$1>;
+    /** Empty state wrapper when \`data\` is empty. */
+    emptyStateSx?: SxProps$1<Theme$1>;
+    /** “No data” \`Typography\`. */
+    emptyStateTextSx?: SxProps$1<Theme$1>;
+    /** Filters / info control — **absolutely positioned** on the right of the title row. */
+    headerActions?: ReactNode;
+    /** Tooltip label before the category name (e.g. Region). Default: Region */
+    tooltipCategoryLabel?: string;
+    /** Tooltip label before the combined male + female total. Default: Overall Walk-ins */
+    tooltipOverallLabel?: string;
+    /** Merge over default tooltip inline styles. */
+    tooltipStyles?: FootfallByGenderTooltipStyles;
+    /** Recharts \`BarChart\` margin; partial merge after defaults (your values override). */
+    chartMargin?: FootfallByGenderChartMargin;
+    /** Grid / axis / bar-top label colors. */
+    chartColors?: FootfallByGenderChartColors;
+    /**
+     * Y-axis tick formatter. Default: compact \`k\` suffix for thousands.
+     */
+    yAxisTickFormatter?: (value: number) => string;
+    /** Copy when \`data\` is empty. Default: \`No data\` */
+    emptyStateText?: string;
+}
+
+/**
+ * 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;
+
+interface PasserbyConversionTooltipStyles {
+    container?: CSSProperties;
+    row?: CSSProperties;
+    label?: CSSProperties;
+    value?: CSSProperties;
+    seriesDot?: CSSProperties;
+    seriesName?: CSSProperties;
+    seriesValue?: CSSProperties;
+}
+interface PasserbyConversionChartMargin {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+}
+interface PasserbyConversionChartColors {
+    cartesianGridStroke?: string;
+    xAxisLineStroke?: string;
+    axisTickLineStroke?: string;
+    passerbyBarFill?: string;
+    walkInsBarFill?: string;
+    conversionLineStroke?: string;
+    barValueLabelFill?: string;
+}
+type PasserbyConversionHorizontalScroll = 'auto' | 'on' | 'off';
+interface PasserbyConversionRow {
+    /** X-axis category label (e.g. **11am**, **3pm**). */
+    name: string;
+    /**
+     * Shown in the tooltip **Time** row. Falls back to **`name`** when omitted.
+     */
+    timeSlotLabel?: string;
+    passerby: number;
+    walkIns: number;
+    /**
+     * Conversion rate for the line series (same numeric scale as the right Y-axis, e.g. **0–32** as percent points).
+     * Use **`null`** to break the line at this slot.
+     */
+    conversion: number | null;
+}
+interface PasserbyConversionProps {
+    title: string;
+    data: PasserbyConversionRow[];
+    /**
+     * Optional fixed X-axis slots (e.g. full day series), used to render a stable time axis
+     * even when `data` is partial (API hasn’t returned all slots yet).
+     *
+     * When provided, the component will insert missing slots with:
+     * - `passerby: 0`, `walkIns: 0`
+     * - `conversion: null` (so the line breaks instead of dropping to 0)
+     *
+     * Default: `undefined` (use `data` as-is).
+     */
+    timeSlots?: Array<Pick<PasserbyConversionRow, 'name' | 'timeSlotLabel'>>;
+    /**
+     * When `true` (default) and `timeSlots` is provided, fill missing slots.
+     * Set to `false` to keep `data` as-is while still allowing `timeSlots` to be used elsewhere.
+     */
+    fillMissingTimeSlots?: boolean;
+    /** Plot height in px. Default: **430**. */
+    chartHeight?: number;
+    /** Legend / tooltip name for passerby bars. Default: **Passerby**. */
+    passerbySeriesName?: string;
+    /** Legend / tooltip name for walk-in bars. Default: **Walk-ins**. */
+    walkInsSeriesName?: string;
+    /** Legend / tooltip name for the conversion line. Default: **Conversion**. */
+    conversionSeriesName?: string;
+    /** Recharts `Line` curve. Default: **`natural`**. */
+    lineType?: 'linear' | 'monotone' | 'natural' | 'basis' | 'step';
+    minWidthPerCategory?: number;
+    horizontalScroll?: PasserbyConversionHorizontalScroll;
+    maxBarSize?: number;
+    /**
+     * Recharts **`barGap`**: horizontal gap between the two grouped bars in each category (passerby vs walk-ins).
+     * Default **0** so the bars touch. Use a number (px) or a percent string (e.g. **`"10%"`**).
+     */
+    barGap?: number | string;
+    cardMaxWidth?: ChartCardMaxWidth;
+    cardSx?: SxProps$1<Theme$1>;
+    titleRowSx?: SxProps$1<Theme$1>;
+    titleSx?: SxProps$1<Theme$1>;
+    dividerSx?: SxProps$1<Theme$1>;
+    legendRowSx?: SxProps$1<Theme$1>;
+    legendItemSx?: SxProps$1<Theme$1>;
+    legendSwatchSx?: SxProps$1<Theme$1>;
+    legendLabelSx?: SxProps$1<Theme$1>;
+    chartScrollAreaSx?: SxProps$1<Theme$1>;
+    stackSx?: SxProps$1<Theme$1>;
+    emptyStateSx?: SxProps$1<Theme$1>;
+    emptyStateTextSx?: SxProps$1<Theme$1>;
+    headerActions?: ReactNode;
+    /** Tooltip label before the time value. Default: **Time**. */
+    tooltipTimeLabel?: string;
+    /** Tooltip label for walk-ins + passerby total. Default: **Overall**. */
+    tooltipOverallLabel?: string;
+    /** Tooltip label before walk-in count. Defaults to **`walkInsSeriesName`**. */
+    tooltipWalkInsLabel?: string;
+    /** Tooltip label before passerby count. Defaults to **`passerbySeriesName`**. */
+    tooltipPasserbyLabel?: string;
+    /** Tooltip label before conversion value. Default: **Conversion(%)**. */
+    tooltipConversionLabel?: string;
+    /** Format conversion for the tooltip (receives the raw **`conversion`** number). Default: **`n => \`${Math.round(n)}%\``**. */
+    formatTooltipConversion?: (value: number) => string;
+    /** Optional title on the right (conversion) Y-axis. Omitted when unset. */
+    conversionAxisLabel?: string;
+    /** Tick formatter for the left (count) Y-axis. */
+    yAxisTickFormatter?: (value: number) => string;
+    /** Tick formatter for the right (conversion) Y-axis. */
+    conversionAxisTickFormatter?: (value: number) => string;
+    tooltipStyles?: PasserbyConversionTooltipStyles;
+    showLegend?: boolean;
+    /**
+     * When `true` and at least one row has a finite `conversion`, render the line and right axis.
+     * Default: **true**.
+     */
+    showConversionLine?: boolean;
+    showBarValueLabels?: boolean;
+    chartMargin?: PasserbyConversionChartMargin;
+    chartColors?: PasserbyConversionChartColors;
+    emptyStateText?: string;
+    /**
+     * When `true`, Recharts animates bars and the conversion line on first draw and when values change.
+     * Default **true**. Set **`false`** for very frequent live updates if animation feels heavy.
+     */
+    isChartAnimationActive?: boolean;
+    /** Bar/line animation duration in ms. Default **400**. */
+    chartAnimationDuration?: number;
+    /**
+     * When horizontal scrolling is active, scroll the plot **to the end** after `data` changes so the
+     * latest categories stay in view (live / streaming). Default **true**. Set **`false`** to keep manual scroll position.
+     */
+    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;
+
+interface WalkinTrafficTooltipStyles {
+    /** Outer flex wrapper (arrow + card). */
+    wrapper?: CSSProperties;
+    /** White panel (shadow, radius, padding). */
+    container?: CSSProperties;
+    /** Title row next to the accent dot. */
+    header?: CSSProperties;
+    /** “Overall Walk-in Traffic” text. */
+    headerTitle?: CSSProperties;
+    /** Accent dot before the title. */
+    headerDot?: CSSProperties;
+    row?: CSSProperties;
+    label?: CSSProperties;
+    value?: CSSProperties;
+    /** Italic footnote under the metrics. */
+    footer?: CSSProperties;
+}
+interface WalkinTrafficChartMargin {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+}
+interface WalkinTrafficChartColors {
+    cartesianGridStroke?: string;
+    xAxisLineStroke?: string;
+    axisTickLineStroke?: string;
+    barFill?: string;
+    lineStroke?: string;
+    barValueLabelFill?: string;
+}
+type WalkinTrafficHorizontalScroll = 'auto' | 'on' | 'off';
+interface WalkinTrafficRow {
+    name: string;
+    walkIns: number;
+    /** Optional smooth trend overlay; `null` / omitted breaks the line at this slot. */
+    trend?: number | null;
+    /**
+     * Shown in the tooltip **Time** row (e.g. `2 - 2.59pm`). Falls back to the chart category (`name`) when omitted.
+     */
+    timeSlotLabel?: string;
+    /** Footfall growth % vs last year for this slot; drives **FF Growth%** row and direction icon. */
+    ffGrowthPercent?: number | null;
+}
+interface WalkinTrafficProps {
+    title: string;
+    data: WalkinTrafficRow[];
+    /** Plot height in px. Default: **430**. */
+    chartHeight?: number;
+    /** Legend label and tooltip name for bars. Default: **Walk-ins**. */
+    barSeriesName?: string;
+    /** Legend / tooltip name when the line is listed. Default: **Trend**. */
+    lineSeriesName?: string;
+    /** Recharts `Line` curve. Default: **`natural`**. */
+    lineType?: 'linear' | 'monotone' | 'natural' | 'basis' | 'step';
+    minWidthPerCategory?: number;
+    horizontalScroll?: WalkinTrafficHorizontalScroll;
+    maxBarSize?: number;
+    cardMaxWidth?: ChartCardMaxWidth;
+    cardSx?: SxProps$1<Theme$1>;
+    titleRowSx?: SxProps$1<Theme$1>;
+    titleSx?: SxProps$1<Theme$1>;
+    dividerSx?: SxProps$1<Theme$1>;
+    legendRowSx?: SxProps$1<Theme$1>;
+    legendItemSx?: SxProps$1<Theme$1>;
+    legendSwatchSx?: SxProps$1<Theme$1>;
+    legendLabelSx?: SxProps$1<Theme$1>;
+    chartScrollAreaSx?: SxProps$1<Theme$1>;
+    stackSx?: SxProps$1<Theme$1>;
+    emptyStateSx?: SxProps$1<Theme$1>;
+    emptyStateTextSx?: SxProps$1<Theme$1>;
+    headerActions?: ReactNode;
+    /** Tooltip header (bold, next to accent dot). Default: **Overall Walk-in Traffic**. */
+    tooltipTitle?: string;
+    /** Label before the time range. Default: **Time**. */
+    tooltipTimeLabel?: string;
+    /** Label before current-year bar value. Default: **Current Year Walk-ins**. */
+    tooltipCurrentYearLabel?: string;
+    /** Label before line / last-year value. Default: **Last Year Walk-ins**. */
+    tooltipLastYearLabel?: string;
+    /** Label before growth %. Default: **FF Growth%**. */
+    tooltipGrowthLabel?: string;
+    /**
+     * Italic footnote under the metrics (FF Growth % disclaimer).
+     * When **omitted** (`undefined`), the standard disclaimer is shown. Pass **`null`** or **`''`** for a compact tooltip without the footnote.
+     */
+    tooltipFooterNote?: string | null;
+    /** @deprecated Use **`tooltipTimeLabel`** instead. */
+    tooltipHourLabel?: string;
+    tooltipStyles?: WalkinTrafficTooltipStyles;
+    showLegend?: boolean;
+    /**
+     * When `true` and at least one row has a finite `trend`, render the line.
+     * Default: **true**.
+     */
+    showTrendLine?: boolean;
+    /** Add a second legend item for the line. Default: **false**. */
+    showLineInLegend?: boolean;
+    showBarValueLabels?: boolean;
+    chartMargin?: WalkinTrafficChartMargin;
+    chartColors?: WalkinTrafficChartColors;
+    yAxisTickFormatter?: (value: number) => string;
+    emptyStateText?: string;
+    /**
+     * Recharts animation for bars and trend line. Defaults **true** / **400** ms.
+     * Set **`isChartAnimationActive={false}`** for very frequent updates.
+     */
+    isChartAnimationActive?: boolean;
+    chartAnimationDuration?: number;
+    /**
+     * When horizontal scroll is active, scroll to the **latest** categories after `data` changes.
+     * Default **true**.
+     */
+    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;
+
+/**
+ * Treemap data helpers for FootFallHeatMap.
+ * Recharts expects nested `children`; our tree uses `list` internally.
+ */
+type ZoneAnalyticsHierarchy = {
+    Country?: Record<string, unknown>;
+    Region?: Record<string, unknown>;
+    State?: Record<string, unknown>;
+    City?: Record<string, unknown>;
+};
+type ZoneAnalyticsFlatItem = {
+    category_id: number;
+    category_name: string;
+    percentage: number;
+    visitor_count: number;
+    avg_dwell_time: string;
+    /** Optional; same shape as hierarchy `zone_kpi_strip` when this row should drive the strip alone. */
+    zone_kpi_strip?: Record<string, unknown>;
+};
+type ZoneAnalyticsMetrics = {
+    overall_visits?: number;
+    trend?: {
+        direction?: 'up' | 'down';
+        percentage?: number;
+    };
+    unique_customer_walkins?: number;
+    walkins_trend?: {
+        direction?: 'up' | 'down';
+        percentage?: number;
+    };
+    first_visit_count?: number;
+    first_visit_trend?: {
+        direction?: 'up' | 'down';
+        percentage?: number;
+    };
+    avg_wait_time_per_visitor?: string;
+    wait_time_trend?: {
+        direction?: 'up' | 'down';
+        percentage?: number;
+    };
+    attended_customers?: number;
+    attended_trend?: {
+        direction?: 'up' | 'down';
+        percentage?: number;
+    };
+    unattended_customers?: number;
+    unattended_trend?: {
+        direction?: 'up' | 'down';
+        percentage?: number;
+    };
+    avg_dwell_time?: string;
+    dwell_time_trend?: {
+        direction?: 'up' | 'down';
+        percentage?: number;
+    };
+};
+/** Optional per-zone KPI + 3-segment bar from API (`zone_kpi_strip` on hierarchy nodes). Same layout at every level; values vary by zone. */
+type ZoneKpiStripPayload = {
+    storeCount: number;
+    overallVisitors: number;
+    segments: [
+        {
+            label: string;
+            value: number;
+        },
+        {
+            label: string;
+            value: number;
+        },
+        {
+            label: string;
+            value: number;
+        }
+    ];
+};
+type TreemapNode = {
+    name: string;
+    value: number;
+    originalValue: number;
+    color: string;
+    overallData: {
+        count: number | string;
+        dwell: string;
+    };
+    list: TreemapNode[];
+    /** Set when passing to Recharts Treemap (uses `children` for nesting). */
+    children?: TreemapNode[];
+    leafMetrics?: ZoneAnalyticsMetrics;
+    /** When set, KPI strip + single segmented row use these values for this zone (when it is the active drill context). */
+    zoneKpiStrip?: ZoneKpiStripPayload;
+    _childContainerKey?: string;
+    _raw?: number;
+};
+/** Recharts Treemap reads `children`, not `list`. */
+declare function toRechartsTreemapData(nodes: TreemapNode[]): TreemapNode[];
+declare function preprocessData(data: TreemapNode[]): TreemapNode[];
+declare function skipSingleBranchLevels(nodes: TreemapNode[]): TreemapNode[];
+declare function parseMinutes(avgDwellTime?: string): number;
+declare function isPlainObject(v: unknown): v is Record<string, unknown>;
+declare function getChildContainer(node: unknown): {
+    key: string;
+    container: Record<string, unknown>;
+} | null;
+declare function metricForNode(node: unknown, sortBy: 'walkins' | 'dwell'): number;
+/** 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, }: {
+    container: Record<string, unknown>;
+    sortBy: 'walkins' | 'dwell';
+    pathKey: string;
+}): TreemapNode[];
+declare function getNestedList(payload: TreemapNode & {
+    children?: TreemapNode[];
+}): TreemapNode[] | undefined;
+
+declare const DEFAULT_FOOTFALL_TILE_ICONS: {
+    readonly visitors: "fluent:people-community-16-filled";
+    readonly dwell: "clarity:clock-solid";
+    readonly headerInfo: "mdi:information-outline";
+};
+type FootFallHeatMapTileIconRole = 'visitors' | 'dwell' | 'header';
+type FootFallHeatMapIconSizeContext = {
+    /** Auto baseline from tile geometry (px). */
+    baseIconSize: number;
+    role: FootFallHeatMapTileIconRole;
+    fontSize: number;
+    minDim: number;
+    effectiveDim: number;
+};
+/** Pixel size or scale from `baseIconSize` / geometry. */
+type FootFallHeatMapIconSize = 'auto' | number | ((ctx: FootFallHeatMapIconSizeContext) => number);
+/** `tile` = match tile fill color; otherwise CSS color string or resolver. */
+type FootFallHeatMapIconColor = 'tile' | string | ((ctx: {
+    tileColor: string;
+    role: FootFallHeatMapTileIconRole;
+}) => string);
+type FootFallHeatMapIcons = {
+    /** Iconify id for the visitor count chip in each tile. */
+    visitors?: string;
+    /** Iconify id for the dwell time chip. */
+    dwell?: string;
+    /** Iconify id for the title-row info button. */
+    headerInfo?: string;
+};
+type FootFallHeatMapTreemapLayout = {
+    /** Pixel height when a breadcrumb strip is visible above the chart. */
+    heightWithBreadcrumb?: number;
+    /** Pixel height when there is no breadcrumb. */
+    heightWithoutBreadcrumb?: number;
+    /** Optional pixel height for terminal single-card view (default falls back to `heightWithBreadcrumb`). */
+    terminalSingleCardHeight?: number;
+    /** Optional pixel height for the blank body below terminal details strip (default: derived from treemap height). */
+    leafDetailsBodyHeight?: number;
+    /** Recharts treemap aspect ratio (width/height per sector logic). */
+    aspectRatio?: number;
+    stroke?: string;
+    fill?: string;
+    /** MUI `sx` merged onto the blank terminal-details body below the KPI strip. */
+    leafDetailsBodySx?: SxProps$1<Theme$1>;
+};
+type FootFallHeatMapTreeOptions = {
+    /** Starting hierarchy level shown in treemap for hierarchical payloads. */
+    startFromLevel?: 'Country' | 'Region' | 'State' | 'City';
+    /**
+     * Optional path to a specific hierarchy node to render first.
+     * Example: `'India/North'` or `['India', 'North']`.
+     * When provided, this takes precedence over `startFromLevel`.
+     */
+    startFromPath?: string | string[];
+    /**
+     * `children` (default): render selected node's immediate children.
+     * `self`: render only the selected node tile.
+     */
+    startFromPathMode?: 'children' | 'self';
+    /**
+     * Behavior at terminal node (no deeper hierarchy, or final Stores level).
+     * - `details` (default): compact KPI + segmented detail view (treemap cleared; optional details body below).
+     * - `card`: keep drilling into a single treemap tile when there is no zone KPI strip; when a KPI strip is
+     *   derived for the terminal zone, the duplicate treemap is omitted so only breadcrumb + KPI strip remain.
+     */
+    terminalNodeView?: 'card' | 'details';
+    /** Sort metric when building node weights from API payloads. */
+    sortBy?: 'walkins' | 'dwell';
+    /**
+     * When true, if the root (or a drill level) has exactly one child, the treemap jumps into that child automatically.
+     * Default **false** so **Region → State → City** (and other levels) stay visible instead of skipping straight to cities.
+     */
+    collapseSingleChildLevels?: boolean;
+    /**
+     * Replace default hierarchy/flat parsing. Return root-level `TreemapNode[]`
+     * (each node may nest `list` children).
+     */
+    buildNodes?: (initialData: ZoneAnalyticsHierarchy | ZoneAnalyticsFlatItem[] | null, options: {
+        sortBy: 'walkins' | 'dwell';
+    }) => TreemapNode[];
+};
+/** KPI numbers used for the summary row and passed to `summaryCards`. */
+type FootFallHeatMapSummaryKpis = {
+    storeCount: number;
+    overallVisitors: number;
+};
+/** One summary KPI card above the segmented bar (Iconify icon + title + value). */
+type FootFallHeatMapKpiSummaryCardItem = {
+    id: string;
+    title: string;
+    value: number;
+    /** Iconify id. Default `mdi:chart-box-outline`. */
+    icon?: string;
+    /** Merged after shared `statCardSx`. */
+    sx?: SxProps$1<Theme$1>;
+    /** Per-card icon color; falls back to `statCardIconColor`. */
+    iconColor?: string;
+};
+/**
+ * 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.
+ */
+type FootFallHeatMapKpiStripPresentation = {
+    /** Override segment fills; cycles when fewer entries than segments. */
+    segmentColors?: readonly string[];
+    /** Bar height in px. */
+    barHeight?: number;
+    /** Horizontal padding inside the track in px (inset from rounded caps). */
+    trackInsetPx?: number;
+    /** Track background behind segments. */
+    trackBackgroundColor?: string;
+    /** Merged onto the outer KPI panel (container under the breadcrumb). Applied after built-in layout styles. */
+    kpiContainerSx?: SxProps$1<Theme$1>;
+    /** Merged onto each summary stat card (`Paper`). */
+    statCardSx?: SxProps$1<Theme$1>;
+    /** Icon color for both stat cards. Default `#1565C0`. */
+    statCardIconColor?: string;
+    /** Zone / row title next to the segmented bar. */
+    segmentTitleSx?: SxProps$1<Theme$1>;
+    /** Total value on the right of the segment row. */
+    segmentValueSx?: SxProps$1<Theme$1>;
+    /** Merged onto the segment tooltip card (popover). */
+    segmentTooltipCardSx?: SxProps$1<Theme$1>;
+    /**
+     * 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.
+     */
+    summaryCards?: (kpi: FootFallHeatMapSummaryKpis) => readonly FootFallHeatMapKpiSummaryCardItem[];
+};
+type FootFallHeatMapViewProps = {
+    initialData: ZoneAnalyticsHierarchy | ZoneAnalyticsFlatItem[] | null;
+    isLoading?: boolean;
+    isFetching?: boolean;
+    error?: unknown;
+    title?: string;
+    /** Tooltip on the header info icon. */
+    infoTooltip?: string;
+    /** Shown in the drill breadcrumb after `/` (e.g. store name). */
+    brandLabel?: string;
+    icons?: FootFallHeatMapIcons;
+    iconSize?: FootFallHeatMapIconSize;
+    iconColor?: FootFallHeatMapIconColor;
+    /** Info button icon width/height in px when `iconSize` is `auto` (header role). */
+    headerInfoIconSize?: number;
+    treemap?: FootFallHeatMapTreemapLayout;
+    tree?: FootFallHeatMapTreeOptions;
+    /**
+     * KPI zone UI: optional **`summaryCards(kpi)`** for any number of summary stat cards; segmented bar; outer
+     * panel; `statCardSx` / `statCardIconColor`; segment row + tooltip styling.
+     */
+    kpiStrip?: FootFallHeatMapKpiStripPresentation;
+};
+
+/**
+ * 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;
+
+/** 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;
+    bottom?: number;
+    left?: number;
+};
+type PeakBillingHoursCustomization = {
+    rootCard?: {
+        sx?: SxProps$1<Theme$1>;
+        elevation?: number;
+    };
+    header?: {
+        titleSx?: SxProps$1<Theme$1>;
+        subtitleSx?: SxProps$1<Theme$1>;
+    };
+    segmentedTabs?: {
+        trackBackgroundColor?: string;
+        activeTabBackground?: string;
+        activeTabColor?: string;
+        inactiveTabColor?: string;
+        activeTabBoxShadow?: string;
+        rootSx?: SxProps$1<Theme$1>;
+        tabFontSize?: number | string;
+        fullWidth?: boolean;
+        tabLayout?: ChartWidgetSegmentedTabLayout;
+        activeTabFontWeight?: number;
+        inactiveTabFontWeight?: number;
+    };
+    barChart?: {
+        heightPx?: number;
+        barColor?: string;
+        /** Bar corner radius; **0** = square tops. @default **0** */
+        barRadius?: number;
+        gridStroke?: string;
+        gridStrokeDasharray?: string;
+        margin?: PeakBillingHoursChartMargin;
+        xAxisTickFill?: string;
+        yAxisTickFill?: string;
+        yAxisWidth?: number;
+        barCategoryGap?: number | string;
+        barGap?: number;
+        barValueLabelFill?: string;
+        barValueLabelFontSizePx?: number;
+        tooltip?: BillingCounterAnalyticsTooltipTheme;
+        /**
+         * Full-height hover band behind the active category (**no** dashed vertical lines).
+         * @default light grey fill
+         */
+        hoverBandFill?: string;
+    };
+};
+
+declare const DEFAULT_PEAK_BILLING_HOURS_INFO_POPOVER: ChartWidgetInfoPopoverContent;
+
+type PeakBillingHoursPoint = {
+    /** X-axis category (e.g. **12pm**). */
+    label: string;
+    /** Bar height; **0** omits the value label and draws a flat bar. */
+    value: number;
+};
+type PeakBillingHoursProps = {
+    title?: string;
+    /** Shown after the title (e.g. **(Last 7 days)**). */
+    subtitle?: string;
+    tabs: ChartWidgetSegmentedTab[];
+    activeTabId: string;
+    onTabChange: (tabId: string) => void;
+    data?: PeakBillingHoursPoint[];
+    seriesByTabId?: Record<string, PeakBillingHoursPoint[]>;
+    yAxisDomain?: [number, number];
+    yAxisTicks?: number[];
+    infoPopover?: ChartWidgetInfoPopoverContent | null;
+    customization?: PeakBillingHoursCustomization;
+};
+
+declare const peakBillingHoursDefaultTabs: ChartWidgetSegmentedTab[];
+/** Matches the **Billing Counter Visits** demo (last 7 days style). */
+declare const peakBillingHoursVisitsMock: PeakBillingHoursPoint[];
+declare const peakBillingHoursMockSeriesByTabId: Record<string, PeakBillingHoursPoint[]>;
+
+/**
+ * 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;
+
+type PeakBillingHoursCustomizationProviderProps = {
+    value: PeakBillingHoursCustomization;
+    children: React$1.ReactNode;
+};
+declare function PeakBillingHoursCustomizationProvider({ value, children, }: PeakBillingHoursCustomizationProviderProps): React$1.ReactElement;
+declare function usePeakBillingHoursCustomization(): PeakBillingHoursCustomization;
+
 type FalconThemeMode = 'light' | 'dark';
 type FalconThemeDirection = 'ltr' | 'rtl';
 interface FalconThemeSettings {
@@ -244,4 +2058,4 @@ interface FalconThemeProviderProps {
 
 declare const FalconThemeProvider: ({ children, mode: modeProp, settings, }: FalconThemeProviderProps) => react_jsx_runtime.JSX.Element;
 
-export { AddCommentInput, type AddCommentInputProps, AdvancedFiltersDialog, type AdvancedFiltersDialogProps, ButtonWithIcon, type ButtonWithIconProps, 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, HeatMapChartLegend, type HeatMapChartLegendProps, type HeatMapLegendItem, ProgressBarNumber, type ProgressBarNumberProps };
+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 };