@bpfdev/oly-ui 1.0.4 → 1.0.6

package/dist/index.d.ts

@@ -1,8 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { SxProps, Theme, ButtonProps } from '@mui/material';
 import * as React$1 from 'react';
-import { ReactNode, ReactElement, CSSProperties } from 'react';
+import React__default, { 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,291 +671,68 @@ 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}.
- */
-declare const DEFAULT_QUEUE_TIME_BREAKDOWN_INFO_POPOVER: ChartWidgetInfoPopoverContent;
-
-interface FalconButtonProps extends ButtonProps {
-    loading?: boolean;
-    iconPlacement?: 'start' | 'end';
-}
-
-declare const FalconButton: ({ loading, disabled, children, size, variant, type, fullWidth, className, ...props }: FalconButtonProps) => react_jsx_runtime.JSX.Element;
-
-interface FalconDIstrictFilterOption {
-    id: string | number;
-    label: string;
-}
-interface FalconDIstrictFilterProps {
-    label?: string;
-    options?: FalconDIstrictFilterOption[];
-    value?: FalconDIstrictFilterOption[];
-    onChange?: (value: FalconDIstrictFilterOption[]) => void;
-}
-
-/** District filter — full implementation can be migrated from apps/docs. */
-declare const FalconDIstrictFilter: ({ label, options, value, onChange, }: FalconDIstrictFilterProps) => react_jsx_runtime.JSX.Element;
-
-interface FalconGrayButtonProps {
-    text: string;
-    Icon?: ReactNode;
-    onClick?: () => void;
-}
-
-declare const FalconGrayButton: ({ text, Icon, onClick, }: FalconGrayButtonProps) => react_jsx_runtime.JSX.Element;
-
-interface FalconPaginationProps {
-    pageNo: number;
-    setPageNo: (n: number) => void;
-    perPage: number;
-    setPerPage: (n: number) => void;
-    totalItems: number;
-    perPageOptions?: number[];
-}
-
-declare const FalconPagination: ({ pageNo, setPageNo, perPage, setPerPage, totalItems, perPageOptions, }: FalconPaginationProps) => react_jsx_runtime.JSX.Element;
-
-interface FalconSelectOption {
-    value: string;
-    label: string;
-}
-interface FalconSelectProps {
-    label: string;
-    value: string;
-    onChange: (value: string) => void;
-    options: string[] | FalconSelectOption[];
-    disabled?: boolean;
-    clearable?: boolean;
-}
-
-declare const FalconSelect: ({ label, value, onChange, options, disabled, clearable, }: FalconSelectProps) => react_jsx_runtime.JSX.Element;
-
-interface FalconSingleSwitchProps {
-    color?: 'success' | 'warning' | 'error' | 'info' | 'primary' | 'secondary' | 'default';
-    setStatus?: (status: boolean) => void;
-    value?: boolean;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
-}
-
-declare const FalconSingleSwitch: ({ color, setStatus, value, onChange, }: FalconSingleSwitchProps) => react_jsx_runtime.JSX.Element;
-
-interface FalconTableProps<T = Record<string, unknown>> {
-    rows: T[];
-    getRowId: (row: T) => string | number;
-    columns: GridColDef[];
-    pageSizeOptions?: number[];
-    initialState?: {
-        pagination?: {
-            paginationModel: {
-                pageSize: number;
-            };
-        };
-    };
-}
-
-declare const FalconTable: <T extends Record<string, unknown>>({ rows, getRowId, columns, pageSizeOptions, }: FalconTableProps<T>) => react_jsx_runtime.JSX.Element;
-
-interface FalconTicketColumsFilterProps {
-    columns?: {
-        id: string;
-        label: string;
-    }[];
-    selected?: string[];
-    onSelectionChange?: (selected: string[]) => void;
-}
-
-/** Column filter UI — full implementation can be migrated from apps/docs. */
-declare const FalconTicketColumsFilter: ({ columns, selected, onSelectionChange, }: FalconTicketColumsFilterProps) => react_jsx_runtime.JSX.Element;
-
-interface FalconTicketFilterProps {
-    children: ReactNode;
-    label?: string;
-    open?: boolean;
-    onOpenChange?: (open: boolean) => void;
-}
-
-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.
+ * The active segment uses a **sliding pill** (animated with **`tabIndicatorTransitionMs`**).
  */
-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;
-}
-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;
+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';
@@ -864,6 +781,22 @@ type KpiTrend = {
 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;
@@ -909,6 +842,8 @@ type KpiStatCardShared = {
     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';
@@ -962,7 +897,569 @@ type KpiStatCardDetailedProps = KpiStatCardShared & {
 };
 type KpiStatCardProps = KpiStatCardInlineProps | KpiStatCardDetailedProps;
 
-declare const KpiStatCard: (props: KpiStatCardProps) => react_jsx_runtime.JSX.Element;
+declare const KpiStatCard: (props: KpiStatCardProps) => react_jsx_runtime.JSX.Element;
+
+interface FalconButtonProps extends ButtonProps {
+    loading?: boolean;
+    iconPlacement?: 'start' | 'end';
+}
+
+declare const FalconButton: ({ loading, disabled, children, size, variant, type, fullWidth, className, ...props }: FalconButtonProps) => react_jsx_runtime.JSX.Element;
+
+interface MonthData {
+    label: string;
+    count: number;
+}
+interface FalconAuditTimelineProps {
+    /**
+     * Title of the component
+     * @default 'Audit Timeline'
+     */
+    title?: string;
+    /**
+     * Months data array
+     */
+    months?: MonthData[];
+    /**
+     * Initial selected month label
+     * @default 'Mar'
+     */
+    initialSelectedMonth?: string;
+    /**
+     * Current year to display
+     * @default 2026
+     */
+    year?: number;
+    /**
+     * Message when no audits are scheduled
+     * @default 'No Audit Scheduled'
+     */
+    emptyStateMessage?: string;
+    /**
+     * Text for the export button
+     * @default 'Export Report'
+     */
+    exportButtonText?: string;
+    /**
+     * Text for the upcoming status button
+     * @default 'Upcoming'
+     */
+    upcomingButtonText?: string;
+    /**
+     * Show/Hide title
+     * @default true
+     */
+    showTitle?: boolean;
+    /**
+     * Show/Hide year selector
+     * @default true
+     */
+    showYearSelector?: boolean;
+    /**
+     * Callback on month change
+     */
+    onMonthChange?: (month: string) => void;
+    /**
+     * Callback for previous year click
+     */
+    onPrevYearClick?: () => void;
+    /**
+     * Callback for next year click
+     */
+    onNextYearClick?: () => void;
+    /**
+     * Callback for export report click
+     */
+    onExportReportClick?: (event: React__default.MouseEvent, date: string) => void;
+    /**
+     * Custom brand font
+     * @default '"Neue Haas Grotesk Display Pro", Arial, sans-serif'
+     */
+    brandFont?: string;
+    /**
+     * Custom inter font
+     * @default '"Inter", Arial, sans-serif'
+     */
+    interFont?: string;
+    /** Header Font Size */
+    headerFontSize?: string;
+    /** Header Font Weight */
+    headerFontWeight?: string | number;
+    /** Month Button Label Font Size */
+    monthFontSize?: string;
+    /** Month Button Label Font Weight */
+    monthFontWeight?: string | number;
+    /** Date Label Font Size */
+    eventDateSize?: string;
+    /** Date Label Font Weight */
+    eventDateWeight?: string | number;
+    /** Card Border Radius */
+    borderRadius?: string;
+    /** Card Border Width */
+    borderWidth?: string;
+    /** Card Border Color */
+    borderColor?: string;
+    /** Card Box Shadow */
+    boxShadow?: string;
+    /** Primary color for selected state */
+    primaryColor?: string;
+    /** Color for completed status dot */
+    completedColor?: string;
+    /** Color for upcoming status dot */
+    upcomingColor?: string;
+    /** Background color for unselected month */
+    inactiveMonthBg?: string;
+    /** Background color for event card */
+    eventCardBg?: string;
+    /** Text color for header */
+    headerColor?: string;
+    /** Custom calendar icon */
+    calendarIcon?: string | React__default.ReactNode;
+    /** Custom chevron left icon */
+    chevronLeftIcon?: string | React__default.ReactNode;
+    /** Custom chevron right icon */
+    chevronRightIcon?: string | React__default.ReactNode;
+    /** Custom export/upload icon */
+    exportIcon?: string | React__default.ReactNode;
+}
+
+declare const FalconAuditTimeline: React__default.FC<FalconAuditTimelineProps>;
+
+interface FalconExportDialogProps {
+    /**
+     * Dialog title
+     * @default 'Export Report'
+     */
+    title?: string;
+    /**
+     * Label for the 'From' date selection box
+     * @default 'From'
+     */
+    fromDateTitle?: string;
+    /**
+     * Initial 'From' date value
+     * @default ''
+     */
+    fromDateValue?: string;
+    /**
+     * Label for the 'To' date selection box
+     * @default 'To'
+     */
+    toDateTitle?: string;
+    /**
+     * Initial 'To' date value
+     * @default ''
+     */
+    toDateValue?: string;
+    /**
+     * Callback function triggered on dialog close
+     */
+    onClose?: () => void;
+    /**
+     * Callback function triggered on export action
+     * @param data - Object containing CSV and PDF selection state
+     */
+    onExport?: (data: {
+        csv: boolean;
+        pdf: boolean;
+    }) => void;
+    /**
+     * Label for the export button
+     * @default 'Export'
+     */
+    exportButtonText?: string;
+    /**
+     * Label for the close button
+     * @default 'Close'
+     */
+    closeButtonText?: string;
+    /**
+     * Initial state for the CSV export checkbox
+     * @default true
+     */
+    initialExportCsv?: boolean;
+    /**
+     * Initial state for the PDF export checkbox
+     * @default false
+     */
+    initialExportPdf?: boolean;
+    /**
+     * Custom calendar icon (Iconify icon name)
+     * @default 'solar:calendar-bold'
+     */
+    calendarIcon?: string;
+    /**
+     * Primary color for export actions and checked states
+     * @default '#401070'
+     */
+    primaryColor?: string;
+    /**
+     * Secondary color for close action
+     * @default '#DFDFE0'
+     */
+    secondaryColor?: string;
+    /**
+     * Text color for the dialog title
+     * @default '#000000'
+     */
+    titleColor?: string;
+    /**
+     * Custom brand font for headers and labels
+     * @default '"Neue Haas Grotesk Display Pro", Arial, sans-serif'
+     */
+    brandFont?: string;
+    /**
+     * Custom font for buttons and main UI text
+     * @default '"Roboto", Arial, sans-serif'
+     */
+    robotoFont?: string;
+    /** Title font size */
+    titleFontSize?: string;
+    /** Title font weight */
+    titleFontWeight?: string | number;
+    /** Label font size (Form labels and check labels) */
+    labelFontSize?: string;
+    /** Label font weight */
+    labelFontWeight?: string | number;
+    /** Value font size (Date values) */
+    valueFontSize?: string;
+    /** Value font weight */
+    valueFontWeight?: string | number;
+    /** Dialog border radius */
+    borderRadius?: string | number;
+    /** Dialog box shadow */
+    boxShadow?: string;
+    /** Export button width */
+    exportButtonWidth?: string | number;
+    /** Export button height */
+    exportButtonHeight?: string | number;
+    /** Close button width */
+    closeButtonWidth?: string | number;
+    /** Close button height */
+    closeButtonHeight?: string | number;
+    /** Date input box width */
+    dateBoxWidth?: string | number;
+    /** Date input box height */
+    dateBoxHeight?: string | number;
+    /** Text for CSV export checkbox */
+    exportCsvText?: string;
+    /** Text for PDF export checkbox */
+    exportPdfText?: string;
+    /** Primary color for calendar (selected day bg, header icons) */
+    calendarPrimaryColor?: string;
+    /** Text color for the selected day in calendar */
+    calendarSelectedTextColor?: string;
+    /** Background color for the calendar picker */
+    calendarBackgroundColor?: string;
+    /** Text color for the months/year header in calendar */
+    calendarHeaderColor?: string;
+    /** Text color for the S/M/T/W/T/F/S day labels */
+    calendarDayLabelColor?: string;
+    /** Text color for dates in the calendar */
+    calendarDateColor?: string;
+    /** Color for the format checkboxes */
+    checkboxColor?: string;
+    /** Hover background color for the main export button */
+    exportButtonHoverBg?: string;
+    /** Hover background color for the main close button */
+    closeButtonHoverBg?: string;
+    /** Background color for the calendar apply button */
+    calendarApplyButtonBg?: string;
+    /** Hover background color for the calendar apply button */
+    calendarApplyButtonHoverBg?: string;
+    /** Background color for the calendar cancel button */
+    calendarCancelButtonBg?: string;
+    /** Hover background color for the calendar cancel button */
+    calendarCancelButtonHoverBg?: string;
+}
+
+declare const FalconExportDialog: React__default.FC<FalconExportDialogProps>;
+
+interface FilterOption {
+    /** Label for the filter dropdown (e.g., 'Region') */
+    label: string;
+    /** Number of selected items by default */
+    selected: number;
+    /** List of selectable stores for this region */
+    stores?: string[];
+}
+interface FalconExportReportDialogProps {
+    /**
+     * Dialog title
+     * @default 'Export Report'
+     */
+    title?: string;
+    /**
+     * Callback function triggered on dialog close
+     */
+    onClose?: () => void;
+    /**
+     * Callback function triggered on export action
+     * @param data - Object containing CSV and PDF selection state
+     */
+    onExport?: (data: {
+        csv: boolean;
+        pdf: boolean;
+    }) => void;
+    /**
+     * Filter options to display in the mini variant
+     * @default DEFAULT_FILTERS
+     */
+    filters?: FilterOption[];
+    /**
+     * Mapping for filter labels to store lists if not provided in filters
+     */
+    filterStoreMapping?: Record<string, string[]>;
+    /**
+     * Label for the export button
+     * @default 'Export'
+     */
+    exportButtonText?: string;
+    /**
+     * Label for the close button
+     * @default 'Close'
+     */
+    closeButtonText?: string;
+    /**
+     * Initial state for the CSV export checkbox
+     * @default true
+     */
+    initialExportCsv?: boolean;
+    /**
+     * Initial state for the PDF export checkbox
+     * @default false
+     */
+    initialExportPdf?: boolean;
+    /**
+     * Primary color for export actions and checked states
+     * @default '#401070'
+     */
+    primaryColor?: string;
+    /**
+     * Secondary color for close action
+     * @default '#DFDFE0'
+     */
+    secondaryColor?: string;
+    /**
+     * Text color for the dialog title
+     * @default '#000000'
+     */
+    titleColor?: string;
+    /**
+     * Custom brand font for headers and labels
+     * @default '"Neue Haas Grotesk Display Pro", Arial, sans-serif'
+     */
+    brandFont?: string;
+    /**
+     * Custom font for buttons and main UI text
+     * @default '"Roboto", Arial, sans-serif'
+     */
+    robotoFont?: string;
+    /** Title font size */
+    titleFontSize?: string;
+    /** Title font weight */
+    titleFontWeight?: string | number;
+    /** Filter title font size (the 'Filter' label) */
+    filterTitleFontSize?: string;
+    /** Filter title font weight */
+    filterTitleFontWeight?: string | number;
+    /** Label font size (Form labels and check labels) */
+    labelFontSize?: string;
+    /** Label font weight */
+    labelFontWeight?: string | number;
+    /** Value font size (Selected count values) */
+    valueFontSize?: string;
+    /** Value font weight */
+    valueFontWeight?: string | number;
+    /** Dialog border radius */
+    borderRadius?: string | number;
+    /** Dialog box shadow */
+    boxShadow?: string;
+    /** Export button width */
+    exportButtonWidth?: string | number;
+    /** Export button height */
+    exportButtonHeight?: string | number;
+    /** Close button width */
+    closeButtonWidth?: string | number;
+    /** Close button height */
+    closeButtonHeight?: string | number;
+    /** Filter dropdown box width */
+    filterBoxWidth?: string | number;
+    /** Filter dropdown box height */
+    filterBoxHeight?: string | number;
+    /** Text for CSV export checkbox */
+    exportCsvText?: string;
+    /** Text for PDF export checkbox */
+    exportPdfText?: string;
+    /** Background color for the regional dropdowns */
+    dropdownBackgroundColor?: string;
+    /** Text color for the stores in the dropdown */
+    dropdownTextColor?: string;
+    /** Font family for items in the dropdown */
+    dropdownItemFontFamily?: string;
+    /** Font size for items in the dropdown */
+    dropdownItemFontSize?: string;
+    /** Hover color for items in the dropdown */
+    dropdownHoverColor?: string;
+    /** Color for all checkboxes */
+    checkboxColor?: string;
+    /** Hover background color for the main export button */
+    exportButtonHoverBg?: string;
+    /** Hover background color for the main close button */
+    closeButtonHoverBg?: string;
+    /** Background color for the dropdown apply button */
+    dropdownApplyButtonBg?: string;
+    /** Hover background color for the dropdown apply button */
+    dropdownApplyButtonHoverBg?: string;
+    /** Background color for the dropdown clear button */
+    dropdownClearButtonBg?: string;
+    /** Hover background color for the dropdown clear button */
+    dropdownClearButtonHoverBg?: string;
+}
+
+declare const FalconExportReportDialog: React__default.FC<FalconExportReportDialogProps>;
+
+interface FalconDIstrictFilterOption {
+    id: string | number;
+    label: string;
+}
+interface FalconDIstrictFilterProps {
+    label?: string;
+    options?: FalconDIstrictFilterOption[];
+    value?: FalconDIstrictFilterOption[];
+    onChange?: (value: FalconDIstrictFilterOption[]) => void;
+}
+
+/** District filter — full implementation can be migrated from apps/docs. */
+declare const FalconDIstrictFilter: ({ label, options, value, onChange, }: FalconDIstrictFilterProps) => react_jsx_runtime.JSX.Element;
+
+interface FalconGrayButtonProps {
+    text: string;
+    Icon?: ReactNode;
+    onClick?: () => void;
+}
+
+declare const FalconGrayButton: ({ text, Icon, onClick, }: FalconGrayButtonProps) => react_jsx_runtime.JSX.Element;
+
+interface FalconPaginationProps {
+    pageNo: number;
+    setPageNo: (n: number) => void;
+    perPage: number;
+    setPerPage: (n: number) => void;
+    totalItems: number;
+    perPageOptions?: number[];
+}
+
+declare const FalconPagination: ({ pageNo, setPageNo, perPage, setPerPage, totalItems, perPageOptions, }: FalconPaginationProps) => react_jsx_runtime.JSX.Element;
+
+interface FalconSelectOption {
+    value: string;
+    label: string;
+}
+interface FalconSelectProps {
+    label: string;
+    value: string;
+    onChange: (value: string) => void;
+    options: string[] | FalconSelectOption[];
+    disabled?: boolean;
+    clearable?: boolean;
+}
+
+declare const FalconSelect: ({ label, value, onChange, options, disabled, clearable, }: FalconSelectProps) => react_jsx_runtime.JSX.Element;
+
+interface FalconSingleSwitchProps {
+    color?: 'success' | 'warning' | 'error' | 'info' | 'primary' | 'secondary' | 'default';
+    setStatus?: (status: boolean) => void;
+    value?: boolean;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
+}
+
+declare const FalconSingleSwitch: ({ color, setStatus, value, onChange, }: FalconSingleSwitchProps) => react_jsx_runtime.JSX.Element;
+
+interface FalconTableProps<T = Record<string, unknown>> {
+    rows: T[];
+    getRowId: (row: T) => string | number;
+    columns: GridColDef[];
+    pageSizeOptions?: number[];
+    initialState?: {
+        pagination?: {
+            paginationModel: {
+                pageSize: number;
+            };
+        };
+    };
+}
+
+declare const FalconTable: <T extends Record<string, unknown>>({ rows, getRowId, columns, pageSizeOptions, }: FalconTableProps<T>) => react_jsx_runtime.JSX.Element;
+
+interface FalconTicketColumsFilterProps {
+    columns?: {
+        id: string;
+        label: string;
+    }[];
+    selected?: string[];
+    onSelectionChange?: (selected: string[]) => void;
+}
+
+/** Column filter UI — full implementation can be migrated from apps/docs. */
+declare const FalconTicketColumsFilter: ({ columns, selected, onSelectionChange, }: FalconTicketColumsFilterProps) => react_jsx_runtime.JSX.Element;
+
+interface FalconTicketFilterProps {
+    children: ReactNode;
+    label?: string;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+
+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;
@@ -972,103 +1469,152 @@ 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 | {
+/** Shared max-width rules for chart cards (WalkinAnalysis-style). */
+type ChartCardMaxWidth = 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 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;
 }
+
 /**
- * Optional `fontSize` overrides (number → px). Omitted keys keep the built-in defaults.
+ * 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).
  */
-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”). */
+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;
-    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.
+     * Optional longer text for the **legend** only (e.g. \`Kids (3-12 years old)\`).
+     * Omit to use \`label\` in the legend as well.
      */
-    legendInfo?: ReactNode;
+    legendLabel?: string;
 }
-interface WalkinAnalysisProps {
+/**
+ * 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 FootfallByAgeGroupsTooltipRenderContext {
+    tooltipProps: TooltipContentProps;
+    rows: FootfallByAgeGroupsRow[];
+    series: FootfallByAgeGroupsSeries[];
+}
+interface FootfallByAgeGroupsProps {
+    /** Card heading — **centered**; \`headerActions\` (if any) sit on the right without shifting it. */
     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;
+    data: FootfallByAgeGroupsRow[];
+    /** Stacked series bottom-to-top (first item is bottom of stack). */
+    series: FootfallByAgeGroupsSeries[];
+    /** Plot height in px. Default: 430 */
+    chartHeight?: number;
     /**
-     * Merged onto **ChartWidgetSegmentedTabs** `rootSx` after `fullWidth` width rules — use for `width`, `maxWidth`, alignment, etc.
+     * 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\`.
      */
-    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>;
+    minWidthPerCategory?: number;
     /**
-     * Card maximum width. Defaults to full width on xs and 640px from sm up.
-     * Use `cardSx` for further layout overrides (it merges after this).
+     * 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.
      */
-    cardMaxWidth?: WalkinAnalysisCardMaxWidth;
+    horizontalScroll?: FootfallByAgeGroupsHorizontalScroll;
     /**
-     * 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.
+     * 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**).
      */
-    pieSize?: WalkinAnalysisPieSize;
-    /** Per-region `fontSize` overrides (numbers are px). */
-    typography?: WalkinAnalysisTypography;
+    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;
     /**
-     * Recharts **`Pie`** animation. Defaults **true** / **400** ms.
-     * There is no horizontal plot scroll on this card (pie layout); only animation applies.
+     * Full custom tooltip renderer. When provided, default tooltip layout is skipped.
      */
-    isChartAnimationActive?: boolean;
-    chartAnimationDuration?: number;
+    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;
 }
 
-/**
- * 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 +1658,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 +1741,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 +1761,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 +1803,11 @@ interface PasserbyConversionRow {
      */
     conversion: number | null;
 }
+interface PasserbyConversionTooltipRenderContext {
+    tooltipProps: TooltipContentProps;
+    rows: PasserbyConversionRow[];
+    showConversionLine: boolean;
+}
 interface PasserbyConversionProps {
     title: string;
     data: PasserbyConversionRow[];
@@ -1318,6 +1878,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 +1891,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 +1907,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 +2075,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 +2126,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 +2141,7 @@ interface WalkinTrafficProps {
     showBarValueLabels?: boolean;
     chartMargin?: WalkinTrafficChartMargin;
     chartColors?: WalkinTrafficChartColors;
+    emptyStatePlaceholderProps?: ChartEmptyStateProps;
     yAxisTickFormatter?: (value: number) => string;
     emptyStateText?: string;
     /**
@@ -1460,7 +2157,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 +2449,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 +2515,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 +2544,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 +2586,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 +2607,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 +2643,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 +2676,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 +2749,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 +2766,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 +2783,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 +2812,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, FalconAuditTimeline, type FalconAuditTimelineProps, FalconButton, type FalconButtonProps, FalconDIstrictFilter, type FalconDIstrictFilterOption, type FalconDIstrictFilterProps, FalconExportDialog, type FalconExportDialogProps, FalconExportReportDialog, type FalconExportReportDialogProps, 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 FilterOption, 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, type MonthData, 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 };