@bpfdev/oly-ui 1.0.11 → 1.0.13

package/dist/index.mjs

@@ -3901,7 +3901,7 @@ var FalconAuditTimeline = ({
               date: run.date,
               ordinal: run.label ?? getOrdinalStr(idx + 1),
               status: run.status === "done" ? "completed" : "upcoming",
-              onExportClick: onExportReportClick ? (e) => onExportReportClick(e, run.date) : void 0,
+              onExportClick: onExportReportClick ? (e) => onExportReportClick(e, run.date, run) : void 0,
               brandFont,
               interFont,
               completedColor,
@@ -3939,7 +3939,16 @@ var FalconAuditTimeline = ({
               date: `${activeMonth.label} 5`,
               ordinal: getOrdinalStr(precedingEvents + 1),
               status: isFirstActiveMonth ? "completed" : "upcoming",
-              onExportClick: onExportReportClick ? (e) => onExportReportClick(e, `${activeMonth.label} 5`) : void 0,
+              onExportClick: onExportReportClick ? (e) => {
+                const date = `${activeMonth.label} 5`;
+                onExportReportClick(e, date, {
+                  run_number: precedingEvents + 1,
+                  date,
+                  month: activeMonth.label,
+                  year: activeMonth.year,
+                  status: isFirstActiveMonth ? "done" : "scheduled"
+                });
+              } : void 0,
               brandFont,
               interFont,
               completedColor,
@@ -6882,7 +6891,8 @@ function StackTotalLabel({
   width,
   height,
   index,
-  stackTotalFill
+  stackTotalFill,
+  angle = 0
 }) {
   const nx = toNum(x);
   const ny = toNum(y);
@@ -6896,6 +6906,7 @@ function StackTotalLabel({
   const total = rowTotal(row, series);
   const cx = nx + nw / 2;
   const cy = ny - 10;
+  const isHorizontal = angle === 0;
   return /* @__PURE__ */ jsx32(
     "text",
     {
@@ -6904,7 +6915,8 @@ function StackTotalLabel({
       fill: stackTotalFill,
       fontSize: 12,
       fontWeight: 500,
-      textAnchor: "middle",
+      textAnchor: isHorizontal ? "middle" : "start",
+      transform: isHorizontal ? void 0 : `rotate(${angle} ${cx} ${cy})`,
       children: formatBarLabel(total)
     }
   );
@@ -6955,7 +6967,8 @@ function FootfallByAgeGroups({
   barStackId = "footfall-by-age-groups",
   xAxisTickAngle = 0,
   xAxisTickDx = 0,
-  xAxisTickStyle
+  xAxisTickStyle,
+  barValueLabelAngle = 0
 }) {
   const [activeIndex, setActiveIndex] = React11.useState(null);
   const handleMouseEnter = React11.useCallback((_, index) => {
@@ -7298,7 +7311,8 @@ function FootfallByAgeGroups({
                                 ...labelProps,
                                 series,
                                 rows: processedData,
-                                stackTotalFill: chartColors.stackTotalLabelFill
+                                stackTotalFill: chartColors.stackTotalLabelFill,
+                                angle: barValueLabelAngle
                               }
                             )
                           }
@@ -8515,7 +8529,8 @@ function BarTopLabel({
   y,
   width,
   value,
-  fill
+  fill,
+  angle = 0
 }) {
   const nx = toNum3(x);
   const ny = toNum3(y);
@@ -8529,6 +8544,7 @@ function BarTopLabel({
   }
   const cx = nx + nw / 2;
   const cy = ny - 10;
+  const isHorizontal = angle === 0;
   return /* @__PURE__ */ jsx34(
     "text",
     {
@@ -8537,7 +8553,8 @@ function BarTopLabel({
       fill,
       fontSize: 12,
       fontWeight: 500,
-      textAnchor: "middle",
+      textAnchor: isHorizontal ? "middle" : "start",
+      transform: isHorizontal ? void 0 : `rotate(${angle} ${cx} ${cy})`,
       children: formatBarLabel3(n)
     }
   );
@@ -8801,6 +8818,7 @@ function PasserbyConversion({
   showLegend = true,
   showConversionLine: showConversionLineProp,
   showBarValueLabels = true,
+  barValueLabelAngle = 0,
   chartMargin: chartMarginProp,
   yAxisTickDx = -8,
   yAxisTickStyle,
@@ -9277,7 +9295,8 @@ function PasserbyConversion({
                               BarTopLabel,
                               {
                                 ...props,
-                                fill: chartColors.barValueLabelFill
+                                fill: chartColors.barValueLabelFill,
+                                angle: barValueLabelAngle
                               }
                             )
                           }
@@ -9313,7 +9332,8 @@ function PasserbyConversion({
                               BarTopLabel,
                               {
                                 ...props,
-                                fill: chartColors.barValueLabelFill
+                                fill: chartColors.barValueLabelFill,
+                                angle: barValueLabelAngle
                               }
                             )
                           }
@@ -9981,7 +10001,8 @@ function BarTopLabel2({
   y,
   width,
   value,
-  fill
+  fill,
+  angle = 0
 }) {
   const nx = toNum4(x);
   const ny = toNum4(y);
@@ -9995,6 +10016,7 @@ function BarTopLabel2({
   }
   const cx = nx + nw / 2;
   const cy = ny - 10;
+  const isHorizontal = angle === 0;
   return /* @__PURE__ */ jsx36(
     "text",
     {
@@ -10003,7 +10025,8 @@ function BarTopLabel2({
       fill,
       fontSize: 12,
       fontWeight: 500,
-      textAnchor: "middle",
+      textAnchor: isHorizontal ? "middle" : "start",
+      transform: isHorizontal ? void 0 : `rotate(${angle} ${cx} ${cy})`,
       children: formatBarLabel4(n)
     }
   );
@@ -10269,6 +10292,7 @@ function WalkinTraffic({
   showTrendLine: showTrendLineProp,
   showLineInLegend = false,
   showBarValueLabels = true,
+  barValueLabelAngle = 0,
   chartMargin: chartMarginProp,
   yAxisTickDx = -8,
   yAxisTickStyle,
@@ -10661,7 +10685,8 @@ function WalkinTraffic({
                             BarTopLabel2,
                             {
                               ...props,
-                              fill: chartColors.barValueLabelFill
+                              fill: chartColors.barValueLabelFill,
+                              angle: barValueLabelAngle
                             }
                           )
                         }
@@ -12315,168 +12340,1159 @@ function QueueTimeBreakdown({
   ] }) }) }) });
 }
 
-// src/components/widgets/FootFallHeatMap/FootFallHeatMapView.tsx
-import { Icon as Icon13 } from "@iconify/react";
+// src/components/charts/StackedComparisonBarChart/stackedComparisonBarChart.chartTokens.ts
+var STACKED_COMPARISON_DEFAULT_STACK_COLORS = [
+  "#CFE0FB",
+  "#7FB1F0",
+  "#3D7CDF",
+  "#1E2A5E"
+];
+var STACKED_COMPARISON_DEFAULT_COMPARISON_COLOR = "#F47C7C";
+var STACKED_COMPARISON_DEFAULT_LEGEND_STACK_COLOR = "#2563EB";
+var STACKED_COMPARISON_DEFAULT_LEGEND_COMPARISON_COLOR = "#EF4444";
+var STACKED_COMPARISON_DEFAULT_FRAME_BORDER = "#EAECEF";
+
+// src/components/charts/StackedComparisonBarChart/StackedComparisonBarChart.tsx
+import Box31 from "@mui/material/Box";
+import ButtonBase2 from "@mui/material/ButtonBase";
+import Stack25 from "@mui/material/Stack";
+import Typography26 from "@mui/material/Typography";
+import * as React25 from "react";
 import {
-  Box as Box31,
-  Button as Button8,
-  IconButton as IconButton5,
-  Paper as Paper5,
-  Skeleton as Skeleton7,
-  Stack as Stack25,
+  Bar as Bar5,
+  BarChart as BarChart3,
+  CartesianGrid as CartesianGrid7,
+  ResponsiveContainer as ResponsiveContainer5,
   Tooltip as Tooltip12,
-  Typography as Typography26
-} from "@mui/material";
-import * as React24 from "react";
-import { useEffect as useEffect3, useMemo as useMemo19, useState as useState17 } from "react";
-import { ResponsiveContainer as ResponsiveContainer5, Treemap } from "recharts";
-
-// src/components/widgets/FootFallHeatMap/FootFallHeatMapView.types.ts
-var DEFAULT_FOOTFALL_TILE_ICONS = {
-  visitors: "fluent:people-community-16-filled",
-  dwell: "clarity:clock-solid",
-  headerInfo: "mdi:information-outline"
-};
+  XAxis as XAxis7,
+  YAxis as YAxis7
+} from "recharts";
 
-// src/components/widgets/FootFallHeatMap/footfallHeatMapDerivedStrip.ts
-var ZONE_SEGMENT_COLORS = [
-  "#E5735F",
-  "#7EB0C2",
-  "#F4C20D",
-  "#6D6ED7"
-];
-var DEFAULT_SEGMENT_LABELS = [
-  "Walk-by",
-  "Browsing",
-  "Engaged",
-  "Converted"
-];
-function parseVisitorCount(raw) {
-  if (typeof raw === "number" && Number.isFinite(raw)) return raw;
-  if (typeof raw === "string") {
-    const n = Number(String(raw).replace(/[^\d.]/g, ""));
-    return Number.isFinite(n) ? n : 0;
+// src/components/charts/StackedComparisonBarChart/stackedComparisonBarChartCustomization.merge.ts
+function mergeCss7(a, b) {
+  if (!b) {
+    return { ...a };
   }
-  return 0;
+  return { ...a, ...b };
 }
-function defaultFourParts(total) {
-  if (total <= 0) return [0, 0, 0, 0];
-  const a = Math.round(total * 0.38);
-  const b = Math.round(total * 0.32);
-  const c = Math.round(total * 0.2);
-  const d = total - a - b - c;
-  return [a, b, c, d];
+function mergeSx4(...parts) {
+  const flat = parts.filter(Boolean);
+  if (flat.length === 0) {
+    return void 0;
+  }
+  if (flat.length === 1) {
+    return flat[0];
+  }
+  return flat.flat();
 }
-function rowFromExplicitStrip(zoneName, strip) {
-  const id = `zone-strip-${encodeURIComponent(zoneName)}`;
-  const segments = strip.segments.map((s, i) => ({
-    id: `${id}-seg-${i}`,
-    label: s.label,
-    value: s.value,
-    color: ZONE_SEGMENT_COLORS[i]
-  }));
-  const value = strip.segments.reduce((sum, s) => sum + s.value, 0);
-  return { id, label: zoneName, value, segments };
+
+// src/components/charts/StackedComparisonBarChart/StackedComparisonBarChartCustomizationContext.tsx
+import * as React24 from "react";
+import { jsx as jsx45 } from "react/jsx-runtime";
+var StackedComparisonBarChartCustomizationContext = React24.createContext({});
+function StackedComparisonBarChartCustomizationProvider({
+  value,
+  children
+}) {
+  const memo = React24.useMemo(() => value, [value]);
+  return /* @__PURE__ */ jsx45(StackedComparisonBarChartCustomizationContext.Provider, { value: memo, children });
 }
-function rowFromHeuristicLabel(zoneName, total) {
-  const [a, b, c, d] = defaultFourParts(total);
-  const id = `zone-heuristic-${encodeURIComponent(zoneName)}`;
-  const segments = [a, b, c, d].map((value, i) => ({
-    id: `${id}-seg-${i}`,
-    label: DEFAULT_SEGMENT_LABELS[i],
-    value,
-    color: ZONE_SEGMENT_COLORS[i]
-  }));
-  return { id, label: zoneName, value: a + b + c + d, segments };
+function useStackedComparisonBarChartCustomization() {
+  return React24.useContext(StackedComparisonBarChartCustomizationContext);
 }
-function deriveFootfallHeatMapKpiStrip(activeZone, childTiles) {
-  if (activeZone) {
-    const childRowsSource = (activeZone.list ?? []).filter(
-      (n) => parseVisitorCount(n.overallData?.count) > 0
-    );
-    if (childRowsSource.length > 0) {
-      const items = childRowsSource.map(
-        (node) => rowFromHeuristicLabel(
-          node.name,
-          parseVisitorCount(node.overallData?.count)
-        )
-      );
-      const overallVisitorsFromChildren = childRowsSource.reduce(
-        (sum, node) => sum + parseVisitorCount(node.overallData?.count),
-        0
-      );
-      const fallbackVisitors = parseVisitorCount(activeZone.overallData?.count);
-      const overallVisitors3 = overallVisitorsFromChildren > 0 ? overallVisitorsFromChildren : fallbackVisitors;
-      const fromExplicitStoreCount = activeZone.zoneKpiStrip?.storeCount;
-      const storeCount3 = fromExplicitStoreCount && fromExplicitStoreCount > 0 ? fromExplicitStoreCount : childRowsSource.length;
-      return {
-        summaryKpis: {
-          storeCount: storeCount3,
-          overallVisitors: activeZone.zoneKpiStrip?.overallVisitors ?? overallVisitors3
+
+// src/components/charts/StackedComparisonBarChart/StackedComparisonBarChartTooltip.tsx
+import { jsx as jsx46, jsxs as jsxs36 } from "react/jsx-runtime";
+function fmt(n) {
+  return new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 }).format(n);
+}
+function StackedComparisonBarChartTooltip({
+  active,
+  row,
+  buckets,
+  bucketColors,
+  comparisonColor,
+  stackedTotalLabel,
+  comparisonLabel
+}) {
+  const { barChart: bc } = useStackedComparisonBarChartCustomization();
+  const tt = bc?.tooltip;
+  if (!active || !row) {
+    return null;
+  }
+  const borderColor = tt?.borderColor ?? "#E5E7EB";
+  const radius = tt?.borderRadiusPx ?? 10;
+  const shadow = tt?.boxShadow ?? "0 8px 24px rgba(15, 23, 42, 0.12)";
+  const bg = tt?.backgroundColor ?? "#FFFFFF";
+  const pad = tt?.paddingPx ?? 14;
+  const bucketNameColor = tt?.bucketNameColor ?? "#0F172A";
+  const bucketValueColor = tt?.bucketValueColor ?? "#0F172A";
+  const totalStackedLabelColor = tt?.totalStackedLabelColor ?? STACKED_COMPARISON_DEFAULT_LEGEND_STACK_COLOR;
+  const totalStackedValueColor = tt?.totalStackedValueColor ?? "#1D4ED8";
+  const comparisonLabelColor = tt?.comparisonLabelColor ?? STACKED_COMPARISON_DEFAULT_LEGEND_COMPARISON_COLOR;
+  const comparisonValueColor = tt?.comparisonValueColor ?? STACKED_COMPARISON_DEFAULT_LEGEND_COMPARISON_COLOR;
+  const dividerColor = tt?.dividerColor ?? "#E5E7EB";
+  const titleColor = tt?.titleColor ?? "#0F172A";
+  const fs = tt?.fontSizePx ?? 13;
+  const titleFs = tt?.titleFontSizePx ?? 15;
+  const titleText = row.subName ? `${row.name} ${row.subName}` : row.name;
+  const orderedBuckets = [...buckets].reverse();
+  const bodyStyle = mergeCss7(
+    {
+      boxSizing: "border-box",
+      backgroundColor: bg,
+      padding: pad,
+      borderRadius: radius,
+      border: `1px solid ${borderColor}`,
+      boxShadow: shadow,
+      minWidth: tt?.minWidthPx ?? 220,
+      ...tt?.maxWidthPx != null ? { maxWidth: tt.maxWidthPx } : null
+    },
+    tt?.bodyStyle
+  );
+  const rowStyle = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    fontSize: fs,
+    lineHeight: 1.4,
+    margin: "4px 0",
+    fontFamily: "inherit"
+  };
+  const swatch = (color) => ({
+    width: 10,
+    height: 10,
+    borderRadius: "50%",
+    backgroundColor: color,
+    flexShrink: 0,
+    display: "inline-block",
+    marginRight: 8
+  });
+  return /* @__PURE__ */ jsx46("div", { style: { pointerEvents: "none" }, children: /* @__PURE__ */ jsxs36("div", { style: bodyStyle, children: [
+    /* @__PURE__ */ jsx46(
+      "div",
+      {
+        style: {
+          fontSize: titleFs,
+          fontWeight: 700,
+          color: titleColor,
+          marginBottom: 8
         },
-        rankedBarList: {
-          title: `${activeZone.name} store performance`,
-          items,
-          listHeaderLabel: "Store",
-          valueColumnHeader: "Visitors"
+        children: titleText
+      }
+    ),
+    orderedBuckets.map((b, i) => {
+      const originalIndex = buckets.length - 1 - i;
+      const color = b.color ?? bucketColors[originalIndex] ?? "#94A3B8";
+      const v = row.stacked[b.id] ?? 0;
+      return /* @__PURE__ */ jsxs36("div", { style: rowStyle, children: [
+        /* @__PURE__ */ jsxs36(
+          "span",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              color: bucketNameColor,
+              fontWeight: 500
+            },
+            children: [
+              /* @__PURE__ */ jsx46("span", { style: swatch(color), "aria-hidden": true }),
+              b.label
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx46("span", { style: { color: bucketValueColor, fontWeight: 700 }, children: fmt(v) })
+      ] }, b.id);
+    }),
+    /* @__PURE__ */ jsx46(
+      "div",
+      {
+        style: {
+          height: 1,
+          background: dividerColor,
+          margin: "10px 0 8px"
         }
-      };
-    }
-    if (activeZone.zoneKpiStrip) {
-      const zs = activeZone.zoneKpiStrip;
-      return {
-        summaryKpis: {
-          storeCount: zs.storeCount,
-          overallVisitors: zs.overallVisitors
-        },
-        rankedBarList: {
-          title: "Zone breakdown",
-          items: [rowFromExplicitStrip(activeZone.name, zs)],
-          listHeaderLabel: "Zone",
-          valueColumnHeader: "Visitors"
+      }
+    ),
+    /* @__PURE__ */ jsxs36("div", { style: { ...rowStyle, margin: "2px 0" }, children: [
+      /* @__PURE__ */ jsx46("span", { style: { color: totalStackedLabelColor, fontWeight: 700 }, children: stackedTotalLabel }),
+      /* @__PURE__ */ jsx46("span", { style: { color: totalStackedValueColor, fontWeight: 700 }, children: fmt(buckets.reduce((acc, b) => acc + (row.stacked[b.id] ?? 0), 0)) })
+    ] }),
+    /* @__PURE__ */ jsxs36("div", { style: { ...rowStyle, margin: "6px 0 0" }, children: [
+      /* @__PURE__ */ jsxs36(
+        "span",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            color: comparisonLabelColor,
+            fontWeight: 600
+          },
+          children: [
+            /* @__PURE__ */ jsx46("span", { style: swatch(comparisonColor), "aria-hidden": true }),
+            comparisonLabel
+          ]
         }
-      };
+      ),
+      /* @__PURE__ */ jsx46("span", { style: { color: comparisonValueColor, fontWeight: 700 }, children: fmt(row.comparison) })
+    ] })
+  ] }) });
+}
+
+// src/components/charts/StackedComparisonBarChart/StackedComparisonBarChart.tsx
+import { Fragment as Fragment16, jsx as jsx47, jsxs as jsxs37 } from "react/jsx-runtime";
+var DEFAULT_AXIS_TICK_FILL = "#9CA3AF";
+var DEFAULT_GRID_STROKE = "#EEF0F3";
+var STACK_KEY = (id) => `stack__${id}`;
+var COMPARISON_KEY = "__comparison";
+function SortIcon({ color }) {
+  return /* @__PURE__ */ jsxs37(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 14 14",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ jsx47(
+          "path",
+          {
+            d: "M4 2.5V11.5M4 11.5L1.5 9M4 11.5L6.5 9",
+            stroke: color,
+            strokeWidth: "1.4",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx47(
+          "path",
+          {
+            d: "M10 11.5V2.5M10 2.5L7.5 5M10 2.5L12.5 5",
+            stroke: color,
+            strokeWidth: "1.4",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
     }
-    const fromNode = parseVisitorCount(activeZone.overallData?.count);
-    const fromChildren = childTiles.reduce(
-      (s, n) => s + parseVisitorCount(n.overallData?.count),
-      0
-    );
-    const overallVisitors2 = fromNode > 0 ? fromNode : fromChildren;
-    const storeCount2 = childTiles.length;
-    return {
-      summaryKpis: { storeCount: storeCount2, overallVisitors: overallVisitors2 },
-      rankedBarList: {
-        title: "Zone breakdown",
-        items: [rowFromHeuristicLabel(activeZone.name, overallVisitors2)],
-        listHeaderLabel: "Zone",
-        valueColumnHeader: "Visitors"
+  );
+}
+function LegendDot({
+  color,
+  sizePx = 10
+}) {
+  return /* @__PURE__ */ jsx47(
+    Box31,
+    {
+      sx: {
+        width: sizePx,
+        height: sizePx,
+        borderRadius: "50%",
+        bgcolor: color,
+        flexShrink: 0
       }
-    };
-  }
-  if (!childTiles.length) return null;
-  const overallVisitors = childTiles.reduce(
-    (s, n) => s + parseVisitorCount(n.overallData?.count),
-    0
+    }
   );
-  const storeCount = childTiles.length;
-  return {
-    summaryKpis: { storeCount, overallVisitors },
-    rankedBarList: {
-      title: "Footfall overview",
-      items: [rowFromHeuristicLabel("Overview", overallVisitors)],
-      listHeaderLabel: "Scope",
-      valueColumnHeader: "Visitors"
+}
+function MultilineTick(props) {
+  const {
+    x = 0,
+    y = 0,
+    payload,
+    fill = DEFAULT_AXIS_TICK_FILL,
+    fontSize = 12,
+    rowsByName,
+    angle = 0,
+    textAnchor = "middle"
+  } = props;
+  const name = payload?.value ?? "";
+  if (!name) return null;
+  const row = rowsByName ? rowsByName[name] : void 0;
+  const subName = row?.subName;
+  const lines = [];
+  String(name).split("\n").forEach((s) => lines.push(s));
+  if (subName) {
+    String(subName).split("\n").forEach((s) => lines.push(s));
+  }
+  const lineHeight = fontSize * 1.25;
+  const isHorizontal = angle === 0;
+  const anchor = isHorizontal ? "middle" : textAnchor;
+  const dy0 = isHorizontal ? lineHeight : 4;
+  return /* @__PURE__ */ jsx47("g", { transform: `translate(${x},${y})`, children: /* @__PURE__ */ jsx47(
+    "text",
+    {
+      transform: angle !== 0 ? `rotate(${angle})` : void 0,
+      textAnchor: anchor,
+      fontSize,
+      fill,
+      children: lines.map((line, i) => /* @__PURE__ */ jsx47("tspan", { x: 0, dy: i === 0 ? dy0 : lineHeight, children: line }, i))
     }
-  };
+  ) });
 }
-
-// src/components/widgets/FootFallHeatMap/footfallHeatMapTree.ts
-function toRechartsTreemapData(nodes) {
-  return nodes.map((n) => ({
-    ...n,
-    children: n.list?.length ? toRechartsTreemapData(n.list) : void 0
-  }));
+function BarPlot({
+  data,
+  buckets,
+  bucketColors,
+  comparisonColor,
+  rowsByName,
+  yAxisDomain,
+  yAxisTicks,
+  yAxisTickFormatter,
+  stackedTotalLabel,
+  comparisonLabel,
+  renderTooltip,
+  enableHorizontalScroll,
+  chartMinWidth,
+  categoryWidthPx
+}) {
+  const { barChart: bc } = useStackedComparisonBarChartCustomization();
+  const height = bc?.heightPx ?? 360;
+  const stackedSize = bc?.stackedBarSizePx ?? 22;
+  const comparisonSize = bc?.comparisonBarSizePx ?? 18;
+  const barCategoryGap = bc?.barCategoryGapPx ?? 20;
+  const barGap = bc?.barGap ?? 2;
+  const barTopRadius = bc?.barTopRadiusPx ?? 3;
+  const m = {
+    top: bc?.margin?.top ?? 16,
+    right: bc?.margin?.right ?? 8,
+    bottom: bc?.margin?.bottom ?? 28,
+    left: bc?.margin?.left ?? 4
+  };
+  const gridStroke = bc?.gridStroke ?? DEFAULT_GRID_STROKE;
+  const dash = bc?.gridStrokeDasharray ?? "0";
+  const xFill = bc?.xAxisTickFill ?? "#6B7280";
+  const xTickAngle = bc?.xAxisTickAngle ?? 0;
+  const xTickAnchor = bc?.xAxisTickAnchor ?? "end";
+  const xAxisHeight = bc?.xAxisHeight ?? 50;
+  const yFill = bc?.yAxisTickFill ?? DEFAULT_AXIS_TICK_FILL;
+  const yWidth = bc?.yAxisWidth ?? 44;
+  const cursorFill = bc?.cursorFill ?? "rgba(15, 23, 42, 0.04)";
+  const defaultFmt = React25.useCallback(
+    (v) => v >= 1e3 ? `${(v / 1e3).toFixed(v % 1e3 === 0 ? 0 : 1)}k` : `${v}`,
+    []
+  );
+  const tickFmt = yAxisTickFormatter ?? defaultFmt;
+  const resolvedCategoryWidth = categoryWidthPx ?? 90;
+  const innerMinWidth = chartMinWidth ?? resolvedCategoryWidth * Math.max(data.length, 1);
+  const outerSx = enableHorizontalScroll ? {
+    width: "100%",
+    height,
+    mt: 0.5,
+    overflowX: "auto",
+    overflowY: "hidden"
+  } : { width: "100%", height, mt: 0.5 };
+  const innerSx = enableHorizontalScroll ? { width: "100%", height: "100%", minWidth: innerMinWidth } : { width: "100%", height: "100%" };
+  return /* @__PURE__ */ jsx47(Box31, { sx: outerSx, children: /* @__PURE__ */ jsx47(Box31, { sx: innerSx, children: /* @__PURE__ */ jsx47(ResponsiveContainer5, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs37(
+    BarChart3,
+    {
+      data,
+      margin: m,
+      barCategoryGap,
+      barGap,
+      children: [
+        /* @__PURE__ */ jsx47(
+          CartesianGrid7,
+          {
+            strokeDasharray: dash,
+            vertical: false,
+            stroke: gridStroke
+          }
+        ),
+        /* @__PURE__ */ jsx47(
+          XAxis7,
+          {
+            dataKey: "__name",
+            tick: /* @__PURE__ */ jsx47(
+              MultilineTick,
+              {
+                fill: xFill,
+                fontSize: 12,
+                rowsByName,
+                angle: xTickAngle,
+                textAnchor: xTickAnchor
+              }
+            ),
+            tickLine: false,
+            axisLine: { stroke: gridStroke },
+            interval: 0,
+            height: xAxisHeight
+          }
+        ),
+        /* @__PURE__ */ jsx47(
+          YAxis7,
+          {
+            domain: yAxisDomain,
+            ticks: yAxisTicks,
+            tick: { fill: yFill, fontSize: 11 },
+            tickLine: false,
+            axisLine: false,
+            width: yWidth,
+            tickFormatter: tickFmt
+          }
+        ),
+        /* @__PURE__ */ jsx47(
+          Tooltip12,
+          {
+            content: (tooltipProps) => {
+              const label = tooltipProps.label;
+              const labelStr = typeof label === "string" ? label : String(label ?? "");
+              const row = rowsByName[labelStr] ?? null;
+              if (renderTooltip) {
+                const custom = renderTooltip({
+                  tooltipProps,
+                  row,
+                  buckets,
+                  bucketColors,
+                  comparisonColor
+                });
+                return custom == null ? null : /* @__PURE__ */ jsx47(Fragment16, { children: custom });
+              }
+              return /* @__PURE__ */ jsx47(
+                StackedComparisonBarChartTooltip,
+                {
+                  ...tooltipProps,
+                  row,
+                  buckets,
+                  bucketColors,
+                  comparisonColor,
+                  stackedTotalLabel,
+                  comparisonLabel
+                }
+              );
+            },
+            cursor: { fill: cursorFill },
+            allowEscapeViewBox: { x: false, y: true }
+          }
+        ),
+        buckets.map((b, i) => {
+          const color = b.color ?? bucketColors[i] ?? "#94A3B8";
+          const isTop = i === buckets.length - 1;
+          const radius = isTop ? [barTopRadius, barTopRadius, 0, 0] : [0, 0, 0, 0];
+          return /* @__PURE__ */ jsx47(
+            Bar5,
+            {
+              dataKey: STACK_KEY(b.id),
+              name: b.label,
+              stackId: "stacked",
+              fill: color,
+              barSize: stackedSize,
+              isAnimationActive: false,
+              radius
+            },
+            b.id
+          );
+        }),
+        /* @__PURE__ */ jsx47(
+          Bar5,
+          {
+            dataKey: COMPARISON_KEY,
+            name: comparisonLabel,
+            stackId: "comparison",
+            fill: comparisonColor,
+            barSize: comparisonSize,
+            isAnimationActive: false,
+            radius: [barTopRadius, barTopRadius, 0, 0]
+          }
+        )
+      ]
+    }
+  ) }) }) });
+}
+function StackedComparisonBarChart({
+  subHeading,
+  showSortToggle = true,
+  onSortToggle,
+  showSubHeadingDivider = true,
+  showHeaderLegend = true,
+  enableHorizontalScroll = false,
+  chartMinWidth,
+  categoryWidthPx,
+  buckets,
+  data,
+  stackedLegendLabel = "Stacked",
+  comparisonLegendLabel = "Comparison",
+  stackedTotalLabel,
+  yAxisDomain,
+  yAxisTicks,
+  yAxisTickFormatter,
+  renderTooltip,
+  emptyStatePlaceholderProps,
+  customization
+}) {
+  const bucketColors = customization?.barChart?.stackColors ?? STACKED_COMPARISON_DEFAULT_STACK_COLORS;
+  const comparisonColor = customization?.barChart?.comparisonColor ?? STACKED_COMPARISON_DEFAULT_COMPARISON_COLOR;
+  const legendStackDot = customization?.header?.legendStackColor ?? STACKED_COMPARISON_DEFAULT_LEGEND_STACK_COLOR;
+  const legendComparisonDot = customization?.header?.legendComparisonColor ?? STACKED_COMPARISON_DEFAULT_LEGEND_COMPARISON_COLOR;
+  const legendDividerColor = customization?.header?.legendDividerColor ?? "#E5E7EB";
+  const legendDotSize = customization?.header?.legendDotSizePx ?? 10;
+  const frameBorder = customization?.frame?.borderColor ?? STACKED_COMPARISON_DEFAULT_FRAME_BORDER;
+  const frameBg = customization?.frame?.backgroundColor ?? "#FFFFFF";
+  const rowsByName = React25.useMemo(() => {
+    const r = {};
+    for (const row of data) r[row.name] = row;
+    return r;
+  }, [data]);
+  const chartData = React25.useMemo(() => {
+    return data.map((row) => {
+      const d = {
+        __key: row.name,
+        __name: row.name,
+        __subName: row.subName,
+        __row: row,
+        [COMPARISON_KEY]: row.comparison
+      };
+      for (const b of buckets) {
+        d[STACK_KEY(b.id)] = row.stacked[b.id] ?? 0;
+      }
+      return d;
+    });
+  }, [data, buckets]);
+  const subHeadingSx = mergeSx4(
+    {
+      fontWeight: 700,
+      fontSize: "0.95rem",
+      color: "#0f172a"
+    },
+    customization?.header?.subHeadingSx
+  );
+  const frameSx = mergeSx4(
+    {
+      bgcolor: frameBg,
+      border: `1px solid ${frameBorder}`,
+      borderRadius: 2,
+      px: 2,
+      pt: 2,
+      pb: 1.5,
+      width: "100%",
+      boxSizing: "border-box"
+    },
+    customization?.frame?.sx
+  );
+  const subHeadingDividerColor = customization?.frame?.subHeadingDividerColor ?? "#C7C9D9";
+  const subHeadingDividerSx = mergeSx4(
+    {
+      height: "1px",
+      width: "100%",
+      bgcolor: subHeadingDividerColor,
+      mb: 1.5
+    },
+    customization?.frame?.subHeadingDividerSx
+  );
+  const legendSx = mergeSx4({ flexShrink: 0 }, customization?.header?.legendSx);
+  const showSubHeadingRow = Boolean(subHeading) || showSortToggle || showHeaderLegend;
+  const resolvedStackedTotal = stackedTotalLabel ?? `Total ${stackedLegendLabel}`;
+  if (chartData.length === 0) {
+    return /* @__PURE__ */ jsx47(ChartEmptyState, { minHeight: 360, ...emptyStatePlaceholderProps });
+  }
+  return /* @__PURE__ */ jsx47(StackedComparisonBarChartCustomizationProvider, { value: customization ?? {}, children: /* @__PURE__ */ jsxs37(Box31, { sx: frameSx, children: [
+    showSubHeadingRow ? /* @__PURE__ */ jsxs37(
+      Stack25,
+      {
+        direction: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 2,
+        flexWrap: "wrap",
+        sx: { mb: 1 },
+        children: [
+          /* @__PURE__ */ jsxs37(Stack25, { direction: "row", alignItems: "center", spacing: 1, children: [
+            subHeading ? /* @__PURE__ */ jsx47(Typography26, { sx: subHeadingSx, children: subHeading }) : /* @__PURE__ */ jsx47("span", {}),
+            showSortToggle ? /* @__PURE__ */ jsx47(
+              ButtonBase2,
+              {
+                onClick: onSortToggle,
+                disableRipple: !onSortToggle,
+                sx: mergeSx4(
+                  {
+                    width: 26,
+                    height: 26,
+                    borderRadius: 1,
+                    bgcolor: "#EEF2FF",
+                    color: "#5B6DEC",
+                    display: "inline-flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    cursor: onSortToggle ? "pointer" : "default",
+                    "&:hover": onSortToggle ? { bgcolor: "#E0E7FF" } : void 0
+                  },
+                  customization?.header?.sortButtonSx
+                ),
+                "aria-label": "Toggle sort order",
+                children: /* @__PURE__ */ jsx47(SortIcon, { color: "#5B6DEC" })
+              }
+            ) : null
+          ] }),
+          showHeaderLegend ? /* @__PURE__ */ jsxs37(
+            Stack25,
+            {
+              direction: "row",
+              alignItems: "center",
+              spacing: 1.5,
+              sx: legendSx,
+              children: [
+                /* @__PURE__ */ jsxs37(Stack25, { direction: "row", alignItems: "center", spacing: 0.75, children: [
+                  /* @__PURE__ */ jsx47(LegendDot, { color: legendStackDot, sizePx: legendDotSize }),
+                  /* @__PURE__ */ jsx47(
+                    Typography26,
+                    {
+                      sx: mergeSx4(
+                        {
+                          fontWeight: 700,
+                          fontSize: "0.85rem",
+                          color: legendStackDot
+                        },
+                        customization?.header?.legendLabelSx
+                      ),
+                      children: stackedLegendLabel
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx47(
+                  Box31,
+                  {
+                    sx: {
+                      width: "1px",
+                      height: 18,
+                      bgcolor: legendDividerColor
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxs37(Stack25, { direction: "row", alignItems: "center", spacing: 0.75, children: [
+                  /* @__PURE__ */ jsx47(
+                    LegendDot,
+                    {
+                      color: legendComparisonDot,
+                      sizePx: legendDotSize
+                    }
+                  ),
+                  /* @__PURE__ */ jsx47(
+                    Typography26,
+                    {
+                      sx: mergeSx4(
+                        {
+                          fontWeight: 700,
+                          fontSize: "0.85rem",
+                          color: legendComparisonDot
+                        },
+                        customization?.header?.legendLabelSx
+                      ),
+                      children: comparisonLegendLabel
+                    }
+                  )
+                ] })
+              ]
+            }
+          ) : null
+        ]
+      }
+    ) : null,
+    showSubHeadingDivider ? /* @__PURE__ */ jsx47(Box31, { sx: subHeadingDividerSx }) : null,
+    /* @__PURE__ */ jsx47(
+      BarPlot,
+      {
+        data: chartData,
+        buckets,
+        bucketColors,
+        comparisonColor,
+        rowsByName,
+        yAxisDomain,
+        yAxisTicks,
+        yAxisTickFormatter,
+        stackedTotalLabel: resolvedStackedTotal,
+        comparisonLabel: comparisonLegendLabel,
+        renderTooltip,
+        enableHorizontalScroll,
+        chartMinWidth,
+        categoryWidthPx
+      }
+    )
+  ] }) });
+}
+
+// src/components/widgets/StorePerformanceByAssist/storePerformanceByAssist.defaultInfoPopover.ts
+var DEFAULT_STORE_PERFORMANCE_BY_ASSIST_INFO_POPOVER = {
+  title: "Store Performance by Assist",
+  description: "Per-store breakdown of attended customers split by attend-duration buckets, alongside the unattended count.",
+  helpBullets: [
+    "Compare attended vs unattended customer volume by store.",
+    "Identify stores with high unattended counts that need staffing.",
+    "See how attended customers split across 0-10 sec, 11-30 sec, 31-59 sec, and 1-2 min buckets."
+  ]
+};
+
+// src/components/widgets/StorePerformanceByAssist/storePerformanceByAssist.mock.ts
+var STORE_PERFORMANCE_DEFAULT_BUCKETS = [
+  { id: "0-10", label: "0-10sec" },
+  { id: "11-30", label: "11-30sec" },
+  { id: "31-59", label: "31-59sec" },
+  { id: "1-2", label: "1-2min" }
+];
+var STORE_PERFORMANCE_DEFAULT_DATA = [
+  {
+    name: "Lake Mall",
+    subName: "Kolkata",
+    stacked: { "0-10": 1100, "11-30": 1100, "31-59": 1500, "1-2": 3e3 },
+    comparison: 700
+  },
+  {
+    name: "V3s",
+    subName: "Delhi",
+    stacked: { "0-10": 1e3, "11-30": 1100, "31-59": 1450, "1-2": 2900 },
+    comparison: 620
+  },
+  {
+    name: "Forum Mall",
+    subName: "Bangalore",
+    stacked: { "0-10": 750, "11-30": 800, "31-59": 1450, "1-2": 2050 },
+    comparison: 520
+  },
+  {
+    name: "Phoenix",
+    subName: "Mumbai",
+    stacked: { "0-10": 600, "11-30": 700, "31-59": 1450, "1-2": 1500 },
+    comparison: 470
+  },
+  {
+    name: "DB City",
+    subName: "Bhopal",
+    stacked: { "0-10": 400, "11-30": 600, "31-59": 950, "1-2": 1550 },
+    comparison: 580
+  },
+  {
+    name: "DLF",
+    subName: "Gurgaon",
+    stacked: { "0-10": 225, "11-30": 300, "31-59": 375, "1-2": 600 },
+    comparison: 190
+  },
+  {
+    name: "Highway",
+    subName: "Chennai",
+    stacked: { "0-10": 200, "11-30": 250, "31-59": 350, "1-2": 850 },
+    comparison: 140
+  },
+  {
+    name: "Elante",
+    subName: "Chandigarh",
+    stacked: { "0-10": 150, "11-30": 200, "31-59": 250, "1-2": 600 },
+    comparison: 100
+  }
+];
+
+// src/components/widgets/StorePerformanceByAssist/StorePerformanceByAssist.tsx
+import Box32 from "@mui/material/Box";
+import Card4 from "@mui/material/Card";
+import CardContent3 from "@mui/material/CardContent";
+import Stack26 from "@mui/material/Stack";
+import Typography27 from "@mui/material/Typography";
+import { Fragment as Fragment17, jsx as jsx48, jsxs as jsxs38 } from "react/jsx-runtime";
+function LegendSquare({
+  color,
+  size = 12
+}) {
+  return /* @__PURE__ */ jsx48(
+    Box32,
+    {
+      sx: {
+        width: size,
+        height: size,
+        borderRadius: 0.5,
+        bgcolor: color,
+        flexShrink: 0
+      }
+    }
+  );
+}
+function StorePerformanceByAssist({
+  title,
+  width,
+  maxWidth,
+  minWidth,
+  subHeading = "Stores (Top to Bottom)",
+  showSortToggle = true,
+  onSortToggle,
+  showSubHeadingDivider = true,
+  showHeaderLegend = true,
+  enableHorizontalScroll = false,
+  chartMinWidth,
+  categoryWidthPx,
+  buckets,
+  data,
+  attendedLegendLabel = "Attended",
+  unattendedLegendLabel = "Unattended",
+  unattendedBottomLegendLabel = "Unattended Customers",
+  yAxisDomain,
+  yAxisTicks,
+  yAxisTickFormatter,
+  infoPopover = null,
+  renderTooltip,
+  emptyStatePlaceholderProps,
+  customization
+}) {
+  const bucketColors = customization?.chart?.barChart?.stackColors ?? STACKED_COMPARISON_DEFAULT_STACK_COLORS;
+  const comparisonColor = customization?.chart?.barChart?.comparisonColor ?? STACKED_COMPARISON_DEFAULT_COMPARISON_COLOR;
+  const bottomLegendColor = customization?.bottomLegend?.labelColor ?? "#6B7280";
+  const bottomLegendFs = customization?.bottomLegend?.fontSizePx ?? 12;
+  const bottomLegendDividerColor = customization?.bottomLegend?.dividerColor ?? "#E5E7EB";
+  const bottomSwatch = customization?.bottomLegend?.swatchSizePx ?? 12;
+  const resolvedInfo = infoPopover === void 0 ? DEFAULT_STORE_PERFORMANCE_BY_ASSIST_INFO_POPOVER : infoPopover;
+  const rootSx = mergeSx4(
+    {
+      bgcolor: "#FFFFFF",
+      borderRadius: 2,
+      boxShadow: "0 1px 3px rgba(15, 23, 42, 0.08)",
+      ...width !== void 0 ? { width } : null,
+      ...maxWidth !== void 0 ? { maxWidth } : null,
+      ...minWidth !== void 0 ? { minWidth } : null
+    },
+    customization?.rootCard?.sx
+  );
+  const titleSx = mergeSx4(
+    {
+      fontWeight: 700,
+      fontSize: { xs: "1rem", sm: "1.05rem" },
+      color: "#0f172a"
+    },
+    customization?.header?.titleSx
+  );
+  const bottomLegendSx = mergeSx4(
+    {
+      display: "flex",
+      flexWrap: "wrap",
+      alignItems: "center",
+      rowGap: 1,
+      mt: 1.5,
+      px: 0.5
+    },
+    customization?.bottomLegend?.sx
+  );
+  const showOuterHeader = Boolean(title) || Boolean(resolvedInfo);
+  const hasData = data.length > 0;
+  return /* @__PURE__ */ jsx48(Card4, { elevation: customization?.rootCard?.elevation ?? 0, sx: rootSx, children: /* @__PURE__ */ jsx48(CardContent3, { children: /* @__PURE__ */ jsxs38(Stack26, { spacing: 1.5, sx: { width: "100%" }, children: [
+    showOuterHeader ? /* @__PURE__ */ jsxs38(
+      Stack26,
+      {
+        direction: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 2,
+        flexWrap: "wrap",
+        children: [
+          title ? /* @__PURE__ */ jsx48(Typography27, { sx: titleSx, children: title }) : /* @__PURE__ */ jsx48("span", {}),
+          /* @__PURE__ */ jsx48(
+            Stack26,
+            {
+              direction: "row",
+              alignItems: "center",
+              spacing: 1.5,
+              sx: { flexShrink: 0 },
+              children: resolvedInfo ? /* @__PURE__ */ jsxs38(Fragment17, { children: [
+                /* @__PURE__ */ jsx48(ChartWidgetHeaderSeparator, {}),
+                /* @__PURE__ */ jsx48(
+                  ChartWidgetInfoButton,
+                  {
+                    popover: resolvedInfo,
+                    ariaLabel: "Store performance by assist information"
+                  }
+                )
+              ] }) : null
+            }
+          )
+        ]
+      }
+    ) : null,
+    /* @__PURE__ */ jsx48(
+      StackedComparisonBarChart,
+      {
+        subHeading,
+        showSortToggle,
+        onSortToggle,
+        showSubHeadingDivider,
+        showHeaderLegend,
+        enableHorizontalScroll,
+        chartMinWidth,
+        categoryWidthPx,
+        buckets,
+        data,
+        stackedLegendLabel: attendedLegendLabel,
+        comparisonLegendLabel: unattendedLegendLabel,
+        yAxisDomain,
+        yAxisTicks,
+        yAxisTickFormatter,
+        renderTooltip,
+        emptyStatePlaceholderProps,
+        customization: customization?.chart
+      }
+    ),
+    hasData ? /* @__PURE__ */ jsxs38(Box32, { sx: bottomLegendSx, children: [
+      buckets.map((b, i) => {
+        const color = b.color ?? bucketColors[i] ?? "#94A3B8";
+        return /* @__PURE__ */ jsxs38(
+          Stack26,
+          {
+            direction: "row",
+            alignItems: "center",
+            spacing: 0.75,
+            sx: { mr: 2 },
+            children: [
+              /* @__PURE__ */ jsx48(LegendSquare, { color, size: bottomSwatch }),
+              /* @__PURE__ */ jsx48(
+                Typography27,
+                {
+                  sx: {
+                    fontSize: bottomLegendFs,
+                    color: bottomLegendColor,
+                    fontWeight: 500
+                  },
+                  children: b.label
+                }
+              )
+            ]
+          },
+          b.id
+        );
+      }),
+      /* @__PURE__ */ jsx48(
+        Box32,
+        {
+          sx: {
+            width: "1px",
+            height: 14,
+            bgcolor: bottomLegendDividerColor,
+            mx: 1
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxs38(
+        Stack26,
+        {
+          direction: "row",
+          alignItems: "center",
+          spacing: 0.75,
+          sx: { mr: 2 },
+          children: [
+            /* @__PURE__ */ jsx48(LegendSquare, { color: comparisonColor, size: bottomSwatch }),
+            /* @__PURE__ */ jsx48(
+              Typography27,
+              {
+                sx: {
+                  fontSize: bottomLegendFs,
+                  color: bottomLegendColor,
+                  fontWeight: 500
+                },
+                children: unattendedBottomLegendLabel
+              }
+            )
+          ]
+        }
+      )
+    ] }) : null
+  ] }) }) });
+}
+
+// src/components/widgets/FootFallHeatMap/FootFallHeatMapView.tsx
+import { Icon as Icon13 } from "@iconify/react";
+import {
+  Box as Box33,
+  Button as Button8,
+  IconButton as IconButton5,
+  Paper as Paper5,
+  Skeleton as Skeleton7,
+  Stack as Stack27,
+  Tooltip as Tooltip13,
+  Typography as Typography28
+} from "@mui/material";
+import * as React26 from "react";
+import { useEffect as useEffect3, useMemo as useMemo21, useState as useState17 } from "react";
+import { ResponsiveContainer as ResponsiveContainer6, Treemap } from "recharts";
+
+// src/components/widgets/FootFallHeatMap/FootFallHeatMapView.types.ts
+var DEFAULT_FOOTFALL_TILE_ICONS = {
+  visitors: "fluent:people-community-16-filled",
+  dwell: "clarity:clock-solid",
+  headerInfo: "mdi:information-outline"
+};
+
+// src/components/widgets/FootFallHeatMap/footfallHeatMapDerivedStrip.ts
+var ZONE_SEGMENT_COLORS = [
+  "#E5735F",
+  "#7EB0C2",
+  "#F4C20D",
+  "#6D6ED7"
+];
+var DEFAULT_SEGMENT_LABELS = [
+  "Walk-by",
+  "Browsing",
+  "Engaged",
+  "Converted"
+];
+function parseVisitorCount(raw) {
+  if (typeof raw === "number" && Number.isFinite(raw)) return raw;
+  if (typeof raw === "string") {
+    const n = Number(String(raw).replace(/[^\d.]/g, ""));
+    return Number.isFinite(n) ? n : 0;
+  }
+  return 0;
+}
+function defaultFourParts(total) {
+  if (total <= 0) return [0, 0, 0, 0];
+  const a = Math.round(total * 0.38);
+  const b = Math.round(total * 0.32);
+  const c = Math.round(total * 0.2);
+  const d = total - a - b - c;
+  return [a, b, c, d];
+}
+function rowFromExplicitStrip(zoneName, strip) {
+  const id = `zone-strip-${encodeURIComponent(zoneName)}`;
+  const segments = strip.segments.map((s, i) => ({
+    id: `${id}-seg-${i}`,
+    label: s.label,
+    value: s.value,
+    color: ZONE_SEGMENT_COLORS[i]
+  }));
+  const value = strip.segments.reduce((sum, s) => sum + s.value, 0);
+  return { id, label: zoneName, value, segments };
+}
+function rowFromHeuristicLabel(zoneName, total) {
+  const [a, b, c, d] = defaultFourParts(total);
+  const id = `zone-heuristic-${encodeURIComponent(zoneName)}`;
+  const segments = [a, b, c, d].map((value, i) => ({
+    id: `${id}-seg-${i}`,
+    label: DEFAULT_SEGMENT_LABELS[i],
+    value,
+    color: ZONE_SEGMENT_COLORS[i]
+  }));
+  return { id, label: zoneName, value: a + b + c + d, segments };
+}
+function deriveFootfallHeatMapKpiStrip(activeZone, childTiles, buildBarRow) {
+  const buildRow = (node, role, total, fallback) => {
+    if (buildBarRow) {
+      const custom = buildBarRow({ node, activeZone, role, total });
+      if (custom) return custom;
+    }
+    return fallback();
+  };
+  if (activeZone) {
+    const childRowsSource = (activeZone.list ?? []).filter(
+      (n) => parseVisitorCount(n.overallData?.count) > 0
+    );
+    if (childRowsSource.length > 0) {
+      const items = childRowsSource.map((node) => {
+        const total = parseVisitorCount(node.overallData?.count);
+        return buildRow(
+          node,
+          "child",
+          total,
+          () => rowFromHeuristicLabel(node.name, total)
+        );
+      });
+      const overallVisitorsFromChildren = childRowsSource.reduce(
+        (sum, node) => sum + parseVisitorCount(node.overallData?.count),
+        0
+      );
+      const fallbackVisitors = parseVisitorCount(activeZone.overallData?.count);
+      const overallVisitors3 = overallVisitorsFromChildren > 0 ? overallVisitorsFromChildren : fallbackVisitors;
+      const fromExplicitStoreCount = activeZone.zoneKpiStrip?.storeCount;
+      const storeCount3 = fromExplicitStoreCount && fromExplicitStoreCount > 0 ? fromExplicitStoreCount : childRowsSource.length;
+      return {
+        summaryKpis: {
+          storeCount: storeCount3,
+          overallVisitors: activeZone.zoneKpiStrip?.overallVisitors ?? overallVisitors3
+        },
+        rankedBarList: {
+          title: `${activeZone.name} store performance`,
+          items,
+          listHeaderLabel: "Store",
+          valueColumnHeader: "Visitors"
+        }
+      };
+    }
+    if (activeZone.zoneKpiStrip) {
+      const zs = activeZone.zoneKpiStrip;
+      return {
+        summaryKpis: {
+          storeCount: zs.storeCount,
+          overallVisitors: zs.overallVisitors
+        },
+        rankedBarList: {
+          title: "Zone breakdown",
+          items: [
+            buildRow(
+              activeZone,
+              "active",
+              zs.overallVisitors,
+              () => rowFromExplicitStrip(activeZone.name, zs)
+            )
+          ],
+          listHeaderLabel: "Zone",
+          valueColumnHeader: "Visitors"
+        }
+      };
+    }
+    const fromNode = parseVisitorCount(activeZone.overallData?.count);
+    const fromChildren = childTiles.reduce(
+      (s, n) => s + parseVisitorCount(n.overallData?.count),
+      0
+    );
+    const overallVisitors2 = fromNode > 0 ? fromNode : fromChildren;
+    const storeCount2 = childTiles.length;
+    return {
+      summaryKpis: { storeCount: storeCount2, overallVisitors: overallVisitors2 },
+      rankedBarList: {
+        title: "Zone breakdown",
+        items: [
+          buildRow(
+            activeZone,
+            "active",
+            overallVisitors2,
+            () => rowFromHeuristicLabel(activeZone.name, overallVisitors2)
+          )
+        ],
+        listHeaderLabel: "Zone",
+        valueColumnHeader: "Visitors"
+      }
+    };
+  }
+  if (!childTiles.length) return null;
+  const overallVisitors = childTiles.reduce(
+    (s, n) => s + parseVisitorCount(n.overallData?.count),
+    0
+  );
+  const storeCount = childTiles.length;
+  const overviewNode = {
+    name: "Overview",
+    value: overallVisitors,
+    originalValue: overallVisitors,
+    color: "",
+    overallData: { count: overallVisitors, dwell: "" },
+    list: []
+  };
+  return {
+    summaryKpis: { storeCount, overallVisitors },
+    rankedBarList: {
+      title: "Footfall overview",
+      items: [
+        buildRow(
+          overviewNode,
+          "overview",
+          overallVisitors,
+          () => rowFromHeuristicLabel("Overview", overallVisitors)
+        )
+      ],
+      listHeaderLabel: "Scope",
+      valueColumnHeader: "Visitors"
+    }
+  };
+}
+
+// src/components/widgets/FootFallHeatMap/footfallHeatMapTree.ts
+function toRechartsTreemapData(nodes) {
+  return nodes.map((n) => ({
+    ...n,
+    children: n.list?.length ? toRechartsTreemapData(n.list) : void 0
+  }));
 }
 function preprocessData(data) {
   if (!data || !Array.isArray(data)) return [];
@@ -12713,7 +13729,7 @@ function getNestedList(payload) {
 }
 
 // src/components/widgets/FootFallHeatMap/FootFallHeatMapView.tsx
-import { Fragment as Fragment17, jsx as jsx45, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx49, jsxs as jsxs39 } from "react/jsx-runtime";
 function toDisplayNumber(value) {
   if (!Number.isFinite(value)) return "0";
   return new Intl.NumberFormat("en-IN").format(value);
@@ -12732,7 +13748,7 @@ function InlineStatCard({
   sx,
   iconColor = "#1565C0"
 }) {
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx49(
     Paper5,
     {
       elevation: 0,
@@ -12748,8 +13764,8 @@ function InlineStatCard({
         },
         ...sx ? [sx] : []
       ],
-      children: /* @__PURE__ */ jsxs36(Stack25, { direction: "row", alignItems: "center", spacing: 1.5, children: [
-        /* @__PURE__ */ jsx45(
+      children: /* @__PURE__ */ jsxs39(Stack27, { direction: "row", alignItems: "center", spacing: 1.5, children: [
+        /* @__PURE__ */ jsx49(
           Icon13,
           {
             icon,
@@ -12759,17 +13775,17 @@ function InlineStatCard({
             style: { flexShrink: 0 }
           }
         ),
-        /* @__PURE__ */ jsxs36(Stack25, { spacing: 0.15, children: [
-          /* @__PURE__ */ jsx45(
-            Typography26,
+        /* @__PURE__ */ jsxs39(Stack27, { spacing: 0.15, children: [
+          /* @__PURE__ */ jsx49(
+            Typography28,
             {
               variant: "body2",
               sx: { fontWeight: 500, color: "text.primary" },
               children: title
             }
           ),
-          /* @__PURE__ */ jsx45(
-            Typography26,
+          /* @__PURE__ */ jsx49(
+            Typography28,
             {
               variant: "h6",
               sx: { lineHeight: 1.1, fontWeight: 700, color: "text.primary" },
@@ -12798,17 +13814,17 @@ function InlineSegmentStrip({
   const barHeight = presentation?.barHeight ?? 12;
   const trackInsetPx = presentation?.trackInsetPx ?? 3;
   const trackBg = presentation?.trackBackgroundColor ?? "#ECEFF3";
-  return /* @__PURE__ */ jsxs36(Stack25, { spacing: 0.75, children: [
-    /* @__PURE__ */ jsxs36(
-      Stack25,
+  return /* @__PURE__ */ jsxs39(Stack27, { spacing: 0.75, children: [
+    /* @__PURE__ */ jsxs39(
+      Stack27,
       {
         direction: "row",
         alignItems: "center",
         justifyContent: "space-between",
         gap: 1,
         children: [
-          /* @__PURE__ */ jsx45(
-            Typography26,
+          /* @__PURE__ */ jsx49(
+            Typography28,
             {
               variant: "subtitle2",
               sx: [
@@ -12818,8 +13834,8 @@ function InlineSegmentStrip({
               children: item.label
             }
           ),
-          /* @__PURE__ */ jsx45(
-            Typography26,
+          /* @__PURE__ */ jsx49(
+            Typography28,
             {
               variant: "body2",
               sx: [
@@ -12832,8 +13848,8 @@ function InlineSegmentStrip({
         ]
       }
     ),
-    /* @__PURE__ */ jsx45(
-      Box31,
+    /* @__PURE__ */ jsx49(
+      Box33,
       {
         sx: {
           width: "100%",
@@ -12850,8 +13866,8 @@ function InlineSegmentStrip({
           const widthPercent = total > 0 ? segment.value / total * filledPercent : 0;
           const isLast = idx === lastIdx;
           const fill = resolveSegmentFill(presentation, idx, segment.color);
-          return /* @__PURE__ */ jsx45(
-            Tooltip12,
+          return /* @__PURE__ */ jsx49(
+            Tooltip13,
             {
               title: (() => {
                 if (presentation?.renderSegmentTooltip) {
@@ -12863,7 +13879,7 @@ function InlineSegmentStrip({
                   });
                   return custom == null ? "" : custom;
                 }
-                return /* @__PURE__ */ jsx45(
+                return /* @__PURE__ */ jsx49(
                   InlineSegmentTooltipCard,
                   {
                     segment,
@@ -12878,8 +13894,8 @@ function InlineSegmentStrip({
                   sx: inlineSegmentTooltipPopperSx
                 }
               },
-              children: /* @__PURE__ */ jsx45(
-                Box31,
+              children: /* @__PURE__ */ jsx49(
+                Box33,
                 {
                   sx: {
                     width: `${Math.max(0, widthPercent)}%`,
@@ -12923,10 +13939,10 @@ function InlineSegmentTooltipCard({
   cardSx
 }) {
   const tooltipSurfaceSx = cardSx ? [inlineSegmentTooltipCardSx, cardSx] : inlineSegmentTooltipCardSx;
-  return /* @__PURE__ */ jsxs36(Box31, { sx: tooltipSurfaceSx, children: [
-    /* @__PURE__ */ jsx45(Box31, { sx: { height: 3, bgcolor: "grey.200", width: "100%" } }),
-    /* @__PURE__ */ jsxs36(
-      Box31,
+  return /* @__PURE__ */ jsxs39(Box33, { sx: tooltipSurfaceSx, children: [
+    /* @__PURE__ */ jsx49(Box33, { sx: { height: 3, bgcolor: "grey.200", width: "100%" } }),
+    /* @__PURE__ */ jsxs39(
+      Box33,
       {
         sx: {
           display: "flex",
@@ -12938,8 +13954,8 @@ function InlineSegmentTooltipCard({
           py: 1.25
         },
         children: [
-          /* @__PURE__ */ jsx45(
-            Box31,
+          /* @__PURE__ */ jsx49(
+            Box33,
             {
               component: "span",
               "aria-hidden": true,
@@ -12952,8 +13968,8 @@ function InlineSegmentTooltipCard({
               }
             }
           ),
-          /* @__PURE__ */ jsx45(
-            Typography26,
+          /* @__PURE__ */ jsx49(
+            Typography28,
             {
               component: "span",
               sx: {
@@ -12965,8 +13981,8 @@ function InlineSegmentTooltipCard({
               children: segment.label
             }
           ),
-          /* @__PURE__ */ jsx45(
-            Typography26,
+          /* @__PURE__ */ jsx49(
+            Typography28,
             {
               component: "span",
               sx: {
@@ -12978,8 +13994,8 @@ function InlineSegmentTooltipCard({
               children: " : "
             }
           ),
-          /* @__PURE__ */ jsx45(
-            Typography26,
+          /* @__PURE__ */ jsx49(
+            Typography28,
             {
               component: "span",
               sx: {
@@ -13009,8 +14025,8 @@ function FootfallHeatMapKpiRankedBlock({
   const statIcon = presentation?.statCardIconColor ?? "#1565C0";
   const customSummary = presentation?.summaryCards?.(summaryKpis);
   const useCustomSummary = customSummary !== void 0;
-  return /* @__PURE__ */ jsxs36(
-    Stack25,
+  return /* @__PURE__ */ jsxs39(
+    Stack27,
     {
       spacing: 2,
       sx: [
@@ -13019,15 +14035,15 @@ function FootfallHeatMapKpiRankedBlock({
         ...presentation?.kpiContainerSx ? [presentation.kpiContainerSx] : []
       ],
       children: [
-        useCustomSummary && customSummary.length === 0 ? null : /* @__PURE__ */ jsx45(
-          Stack25,
+        useCustomSummary && customSummary.length === 0 ? null : /* @__PURE__ */ jsx49(
+          Stack27,
           {
             direction: "row",
             spacing: 1.5,
             flexWrap: "wrap",
             useFlexGap: true,
             sx: presentation?.summaryRowSx ? [presentation.summaryRowSx] : void 0,
-            children: useCustomSummary ? customSummary.map((card) => /* @__PURE__ */ jsx45(
+            children: useCustomSummary ? customSummary.map((card) => /* @__PURE__ */ jsx49(
               InlineStatCard,
               {
                 icon: card.icon ?? "mdi:chart-box-outline",
@@ -13040,7 +14056,7 @@ function FootfallHeatMapKpiRankedBlock({
               },
               card.id
             )) : [
-              /* @__PURE__ */ jsx45(
+              /* @__PURE__ */ jsx49(
                 InlineStatCard,
                 {
                   icon: "mdi:store-marker-outline",
@@ -13051,7 +14067,7 @@ function FootfallHeatMapKpiRankedBlock({
                 },
                 "default-stores"
               ),
-              /* @__PURE__ */ jsx45(
+              /* @__PURE__ */ jsx49(
                 InlineStatCard,
                 {
                   icon: "fluent:people-community-16-filled",
@@ -13065,15 +14081,15 @@ function FootfallHeatMapKpiRankedBlock({
             ]
           }
         ),
-        /* @__PURE__ */ jsx45(
-          Stack25,
+        /* @__PURE__ */ jsx49(
+          Stack27,
           {
             spacing: 1.25,
             sx: [
               { pt: 0.5, pb: 1 },
               ...presentation?.rankedListStackSx ? [presentation.rankedListStackSx] : []
             ],
-            children: rankedBarList.items.map((item) => /* @__PURE__ */ jsx45(
+            children: rankedBarList.items.map((item) => /* @__PURE__ */ jsx49(
               InlineSegmentStrip,
               {
                 item,
@@ -13255,7 +14271,7 @@ function FootFallHeatMapView({
     tileColors: treemapProp?.tileColors
   };
   const tileMetrics = treemapLayout.tileMetrics;
-  const tileColorFromSeed = useMemo19(
+  const tileColorFromSeed = useMemo21(
     () => createTreemapTileColorResolver(treemapLayout.tileColors),
     [treemapLayout.tileColors]
   );
@@ -13297,14 +14313,22 @@ function FootFallHeatMapView({
     startFromPathMode,
     tileColorFromSeed
   ]);
-  const derivedKpiStrip = useMemo19(() => {
+  const derivedKpiStrip = useMemo21(() => {
     if (isLoading || loading || !initialData) return null;
     const activeZoneForStrip = trackingDetails.length > 0 ? trackingDetails[trackingDetails.length - 1] : void 0;
     return deriveFootfallHeatMapKpiStrip(
       activeZoneForStrip,
-      data.current ?? []
+      data.current ?? [],
+      kpiStripPresentation?.buildBarRow
     );
-  }, [isLoading, loading, initialData, trackingDetails, data]);
+  }, [
+    isLoading,
+    loading,
+    initialData,
+    trackingDetails,
+    data,
+    kpiStripPresentation?.buildBarRow
+  ]);
   const formatPercentage = (value) => {
     if (typeof value !== "number") return "0%";
     const formatted = value.toFixed(2);
@@ -13385,7 +14409,7 @@ function FootFallHeatMapView({
     );
     const dwellIconColor = resolveIconColor(iconColorProp, tileColor, "dwell");
     const p = inner;
-    return /* @__PURE__ */ jsx45(
+    return /* @__PURE__ */ jsx49(
       "foreignObject",
       {
         x,
@@ -13393,8 +14417,8 @@ function FootFallHeatMapView({
         width,
         height,
         style: { borderRadius: "12px", overflow: "hidden" },
-        children: /* @__PURE__ */ jsxs36(
-          Stack25,
+        children: /* @__PURE__ */ jsxs39(
+          Stack27,
           {
             onClick: handleClick,
             onKeyDown: (e) => {
@@ -13424,8 +14448,8 @@ function FootFallHeatMapView({
               }
             },
             children: [
-              /* @__PURE__ */ jsxs36(
-                Stack25,
+              /* @__PURE__ */ jsxs39(
+                Stack27,
                 {
                   direction: isSmall ? "row" : "column",
                   justifyContent: "center",
@@ -13436,8 +14460,8 @@ function FootFallHeatMapView({
                     mb: isSmall ? 0.5 : 1
                   },
                   children: [
-                    /* @__PURE__ */ jsx45(
-                      Typography26,
+                    /* @__PURE__ */ jsx49(
+                      Typography28,
                       {
                         sx: {
                           fontSize: `${fontSize}px!important`,
@@ -13459,8 +14483,8 @@ function FootFallHeatMapView({
                         children: name
                       }
                     ),
-                    /* @__PURE__ */ jsx45(
-                      Typography26,
+                    /* @__PURE__ */ jsx49(
+                      Typography28,
                       {
                         sx: {
                           fontSize: `${fontSize}px!important`,
@@ -13474,8 +14498,8 @@ function FootFallHeatMapView({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs36(
-                Stack25,
+              /* @__PURE__ */ jsxs39(
+                Stack27,
                 {
                   direction: "row",
                   justifyContent: "center",
@@ -13488,8 +14512,8 @@ function FootFallHeatMapView({
                     ...tileMetrics?.metricsRowStackSx != null ? [tileMetrics.metricsRowStackSx] : []
                   ],
                   children: [
-                    /* @__PURE__ */ jsxs36(
-                      Stack25,
+                    /* @__PURE__ */ jsxs39(
+                      Stack27,
                       {
                         direction: "row",
                         alignItems: "center",
@@ -13506,8 +14530,8 @@ function FootFallHeatMapView({
                           ...tileMetrics?.metricPillStackSx != null ? [tileMetrics.metricPillStackSx] : []
                         ],
                         children: [
-                          /* @__PURE__ */ jsx45(
-                            Box31,
+                          /* @__PURE__ */ jsx49(
+                            Box33,
                             {
                               sx: [
                                 {
@@ -13519,7 +14543,7 @@ function FootFallHeatMapView({
                                 },
                                 ...tileMetrics?.metricPillIconBoxSx != null ? [tileMetrics.metricPillIconBoxSx] : []
                               ],
-                              children: /* @__PURE__ */ jsx45(
+                              children: /* @__PURE__ */ jsx49(
                                 Icon13,
                                 {
                                   icon: icons.visitors,
@@ -13529,8 +14553,8 @@ function FootFallHeatMapView({
                               )
                             }
                           ),
-                          /* @__PURE__ */ jsx45(
-                            Typography26,
+                          /* @__PURE__ */ jsx49(
+                            Typography28,
                             {
                               sx: [
                                 {
@@ -13547,8 +14571,8 @@ function FootFallHeatMapView({
                         ]
                       }
                     ),
-                    /* @__PURE__ */ jsxs36(
-                      Stack25,
+                    /* @__PURE__ */ jsxs39(
+                      Stack27,
                       {
                         direction: "row",
                         alignItems: "center",
@@ -13565,8 +14589,8 @@ function FootFallHeatMapView({
                           ...tileMetrics?.metricPillStackSx != null ? [tileMetrics.metricPillStackSx] : []
                         ],
                         children: [
-                          /* @__PURE__ */ jsx45(
-                            Box31,
+                          /* @__PURE__ */ jsx49(
+                            Box33,
                             {
                               sx: [
                                 {
@@ -13578,7 +14602,7 @@ function FootFallHeatMapView({
                                 },
                                 ...tileMetrics?.metricPillIconBoxSx != null ? [tileMetrics.metricPillIconBoxSx] : []
                               ],
-                              children: /* @__PURE__ */ jsx45(
+                              children: /* @__PURE__ */ jsx49(
                                 Icon13,
                                 {
                                   icon: icons.dwell,
@@ -13588,8 +14612,8 @@ function FootFallHeatMapView({
                               )
                             }
                           ),
-                          /* @__PURE__ */ jsx45(
-                            Typography26,
+                          /* @__PURE__ */ jsx49(
+                            Typography28,
                             {
                               sx: [
                                 {
@@ -13631,8 +14655,8 @@ function FootFallHeatMapView({
   const LabelTag = ({ textColor = "#f0f0f0" }) => {
     const pathSegments = trackingDetails.map((t) => String(t?.name ?? "").trim()).filter(Boolean);
     const breadcrumbSegments = Array.from(new Set([...pathSegments].reverse()));
-    return /* @__PURE__ */ jsx45(Stack25, { direction: "row", alignItems: "baseline", flexWrap: "wrap", gap: 1.5, children: breadcrumbSegments.length === 0 ? /* @__PURE__ */ jsx45(
-      Typography26,
+    return /* @__PURE__ */ jsx49(Stack27, { direction: "row", alignItems: "baseline", flexWrap: "wrap", gap: 1.5, children: breadcrumbSegments.length === 0 ? /* @__PURE__ */ jsx49(
+      Typography28,
       {
         component: "span",
         sx: {
@@ -13645,10 +14669,10 @@ function FootFallHeatMapView({
         color: textColor,
         children: brandLabel
       }
-    ) : /* @__PURE__ */ jsxs36(Fragment17, { children: [
-      breadcrumbSegments.map((seg, i) => /* @__PURE__ */ jsxs36(React24.Fragment, { children: [
-        i > 0 ? /* @__PURE__ */ jsx45(
-          Typography26,
+    ) : /* @__PURE__ */ jsxs39(Fragment19, { children: [
+      breadcrumbSegments.map((seg, i) => /* @__PURE__ */ jsxs39(React26.Fragment, { children: [
+        i > 0 ? /* @__PURE__ */ jsx49(
+          Typography28,
           {
             component: "span",
             fontSize: "15px !important",
@@ -13658,8 +14682,8 @@ function FootFallHeatMapView({
             children: "/"
           }
         ) : null,
-        /* @__PURE__ */ jsx45(
-          Typography26,
+        /* @__PURE__ */ jsx49(
+          Typography28,
           {
             component: "span",
             sx: {
@@ -13674,9 +14698,9 @@ function FootFallHeatMapView({
           }
         )
       ] }, `${seg}-${i}`)),
-      brandLabel ? /* @__PURE__ */ jsxs36(Fragment17, { children: [
-        /* @__PURE__ */ jsx45(
-          Typography26,
+      brandLabel ? /* @__PURE__ */ jsxs39(Fragment19, { children: [
+        /* @__PURE__ */ jsx49(
+          Typography28,
           {
             component: "span",
             fontSize: "15px !important",
@@ -13685,8 +14709,8 @@ function FootFallHeatMapView({
             children: "/"
           }
         ),
-        /* @__PURE__ */ jsx45(
-          Typography26,
+        /* @__PURE__ */ jsx49(
+          Typography28,
           {
             component: "span",
             sx: {
@@ -13705,10 +14729,10 @@ function FootFallHeatMapView({
   };
   const is500Error = error !== null && error !== void 0 && typeof error === "object" && "status" in error && error.status === 500;
   if (is500Error) {
-    return /* @__PURE__ */ jsx45(Box31, { sx: { p: 4, textAlign: "center" }, children: /* @__PURE__ */ jsx45(Typography26, { color: "error", children: "Something went wrong (500). Try again later." }) });
+    return /* @__PURE__ */ jsx49(Box33, { sx: { p: 4, textAlign: "center" }, children: /* @__PURE__ */ jsx49(Typography28, { color: "error", children: "Something went wrong (500). Try again later." }) });
   }
   if (isLoading || loading) {
-    return /* @__PURE__ */ jsx45(
+    return /* @__PURE__ */ jsx49(
       Skeleton7,
       {
         variant: "rectangular",
@@ -13749,9 +14773,9 @@ function FootFallHeatMapView({
     "#888888",
     "header"
   );
-  return /* @__PURE__ */ jsxs36(Stack25, { width: "100%", children: [
-    /* @__PURE__ */ jsxs36(
-      Box31,
+  return /* @__PURE__ */ jsxs39(Stack27, { width: "100%", children: [
+    /* @__PURE__ */ jsxs39(
+      Box33,
       {
         sx: {
           width: "100%",
@@ -13762,16 +14786,16 @@ function FootFallHeatMapView({
           gap: 1
         },
         children: [
-          /* @__PURE__ */ jsx45(Typography26, { variant: "h6", fontWeight: 700, children: title }),
-          /* @__PURE__ */ jsxs36(Stack25, { direction: "row", alignItems: "center", gap: 1, children: [
-            isFetching ? /* @__PURE__ */ jsx45(Typography26, { variant: "caption", color: "text.secondary", children: "Updating\u2026" }) : null,
-            /* @__PURE__ */ jsx45(Tooltip12, { title: infoTooltip, arrow: true, children: /* @__PURE__ */ jsx45(
+          /* @__PURE__ */ jsx49(Typography28, { variant: "h6", fontWeight: 700, children: title }),
+          /* @__PURE__ */ jsxs39(Stack27, { direction: "row", alignItems: "center", gap: 1, children: [
+            isFetching ? /* @__PURE__ */ jsx49(Typography28, { variant: "caption", color: "text.secondary", children: "Updating\u2026" }) : null,
+            /* @__PURE__ */ jsx49(Tooltip13, { title: infoTooltip, arrow: true, children: /* @__PURE__ */ jsx49(
               IconButton5,
               {
                 size: "small",
                 "aria-label": "Zone performance info",
                 edge: "end",
-                children: /* @__PURE__ */ jsx45(
+                children: /* @__PURE__ */ jsx49(
                   Icon13,
                   {
                     icon: icons.headerInfo,
@@ -13786,8 +14810,8 @@ function FootFallHeatMapView({
         ]
       }
     ),
-    data?.previous?.length > 0 && headerData ? /* @__PURE__ */ jsxs36(
-      Stack25,
+    data?.previous?.length > 0 && headerData ? /* @__PURE__ */ jsxs39(
+      Stack27,
       {
         direction: "row",
         alignItems: "center",
@@ -13801,13 +14825,13 @@ function FootFallHeatMapView({
           backgroundColor: zoneBarColor
         },
         children: [
-          /* @__PURE__ */ jsxs36(Stack25, { direction: "row", alignItems: "center", spacing: 1, children: [
-            /* @__PURE__ */ jsx45(
+          /* @__PURE__ */ jsxs39(Stack27, { direction: "row", alignItems: "center", spacing: 1, children: [
+            /* @__PURE__ */ jsx49(
               Button8,
               {
                 size: "small",
                 onClick: handleClose,
-                startIcon: /* @__PURE__ */ jsx45(
+                startIcon: /* @__PURE__ */ jsx49(
                   Icon13,
                   {
                     icon: "mdi:chevron-left",
@@ -13827,10 +14851,10 @@ function FootFallHeatMapView({
                 children: "Back"
               }
             ),
-            /* @__PURE__ */ jsx45(LabelTag, { textColor: zoneBarHeaderFg })
+            /* @__PURE__ */ jsx49(LabelTag, { textColor: zoneBarHeaderFg })
           ] }),
-          /* @__PURE__ */ jsxs36(
-            Typography26,
+          /* @__PURE__ */ jsxs39(
+            Typography28,
             {
               variant: "h6",
               sx: { color: zoneBarHeaderFg, fontWeight: 700 },
@@ -13844,7 +14868,7 @@ function FootFallHeatMapView({
         ]
       }
     ) : null,
-    isDrilledIntoZone && showKpiStrip && derivedKpiStrip ? /* @__PURE__ */ jsx45(
+    isDrilledIntoZone && showKpiStrip && derivedKpiStrip ? /* @__PURE__ */ jsx49(
       FootfallHeatMapKpiRankedBlock,
       {
         strip: derivedKpiStrip,
@@ -13861,8 +14885,8 @@ function FootFallHeatMapView({
         }
       }
     ) : null,
-    showLeafDetailsBody ? /* @__PURE__ */ jsx45(
-      Box31,
+    showLeafDetailsBody ? /* @__PURE__ */ jsx49(
+      Box33,
       {
         sx: [
           {
@@ -13877,7 +14901,7 @@ function FootFallHeatMapView({
         ]
       }
     ) : null,
-    showLeaf ? null : showChart ? hideTreemapForTerminalCardWithKpi ? null : hasTreemapData ? /* @__PURE__ */ jsx45(ResponsiveContainer5, { width: "100%", height: treemapHeight, children: /* @__PURE__ */ jsx45(
+    showLeaf ? null : showChart ? hideTreemapForTerminalCardWithKpi ? null : hasTreemapData ? /* @__PURE__ */ jsx49(ResponsiveContainer6, { width: "100%", height: treemapHeight, children: /* @__PURE__ */ jsx49(
       Treemap,
       {
         data: data?.current ?? [],
@@ -13890,22 +14914,22 @@ function FootFallHeatMapView({
         animationDuration: 0,
         style: { borderRadius: "12px" }
       }
-    ) }) : /* @__PURE__ */ jsx45(
+    ) }) : /* @__PURE__ */ jsx49(
       ChartEmptyState,
       {
         minHeight: treemapHeight,
         ...emptyStatePlaceholderProps
       }
-    ) : /* @__PURE__ */ jsx45(ChartEmptyState, { minHeight: 400, ...emptyStatePlaceholderProps })
+    ) : /* @__PURE__ */ jsx49(ChartEmptyState, { minHeight: 400, ...emptyStatePlaceholderProps })
   ] });
 }
 
 // src/components/widgets/FootFallHeatMap/ZoneWiseKpiCards.tsx
 import Grid2 from "@mui/material/Grid";
 import Paper6 from "@mui/material/Paper";
-import Stack26 from "@mui/material/Stack";
-import Typography27 from "@mui/material/Typography";
-import { jsx as jsx46, jsxs as jsxs37 } from "react/jsx-runtime";
+import Stack28 from "@mui/material/Stack";
+import Typography29 from "@mui/material/Typography";
+import { jsx as jsx50, jsxs as jsxs40 } from "react/jsx-runtime";
 function metricsToRows(metrics) {
   return [
     { id: 1, title: "Overall Visits", value: metrics.overall_visits ?? 0 },
@@ -13943,7 +14967,7 @@ function metricsToRows(metrics) {
 }
 var ZoneWiseKpiCards = ({ metrics }) => {
   const rows = metricsToRows(metrics);
-  return /* @__PURE__ */ jsx46(Grid2, { container: true, spacing: 3, sx: { marginTop: "10px", paddingX: "6px" }, children: rows.map((item) => /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx50(Grid2, { container: true, spacing: 3, sx: { marginTop: "10px", paddingX: "6px" }, children: rows.map((item) => /* @__PURE__ */ jsx50(
     Grid2,
     {
       size: {
@@ -13951,7 +14975,7 @@ var ZoneWiseKpiCards = ({ metrics }) => {
         sm: 6,
         md: 3
       },
-      children: /* @__PURE__ */ jsxs37(
+      children: /* @__PURE__ */ jsxs40(
         Paper6,
         {
           elevation: 0,
@@ -13963,8 +14987,8 @@ var ZoneWiseKpiCards = ({ metrics }) => {
             height: "100%"
           },
           children: [
-            /* @__PURE__ */ jsx46(
-              Typography27,
+            /* @__PURE__ */ jsx50(
+              Typography29,
               {
                 variant: "caption",
                 color: "text.secondary",
@@ -13972,7 +14996,7 @@ var ZoneWiseKpiCards = ({ metrics }) => {
                 children: item.title
               }
             ),
-            /* @__PURE__ */ jsx46(Stack26, { mt: 1, children: /* @__PURE__ */ jsx46(Typography27, { variant: "h6", fontWeight: 700, children: item.value }) })
+            /* @__PURE__ */ jsx50(Stack28, { mt: 1, children: /* @__PURE__ */ jsx50(Typography29, { variant: "h6", fontWeight: 700, children: item.value }) })
           ]
         }
       )
@@ -14031,41 +15055,41 @@ var peakBillingHoursMockSeriesByTabId = {
 };
 
 // src/components/widgets/PeakBillingHours/PeakBillingHours.tsx
-import Box32 from "@mui/material/Box";
-import Card4 from "@mui/material/Card";
-import CardContent3 from "@mui/material/CardContent";
+import Box34 from "@mui/material/Box";
+import Card5 from "@mui/material/Card";
+import CardContent4 from "@mui/material/CardContent";
 import Skeleton8 from "@mui/material/Skeleton";
-import Stack27 from "@mui/material/Stack";
-import Typography28 from "@mui/material/Typography";
-import * as React26 from "react";
+import Stack29 from "@mui/material/Stack";
+import Typography30 from "@mui/material/Typography";
+import * as React28 from "react";
 import {
-  Bar as Bar5,
-  BarChart as BarChart3,
-  CartesianGrid as CartesianGrid7,
+  Bar as Bar6,
+  BarChart as BarChart4,
+  CartesianGrid as CartesianGrid8,
   LabelList as LabelList5,
-  ResponsiveContainer as ResponsiveContainer6,
-  Tooltip as Tooltip13,
-  XAxis as XAxis7,
-  YAxis as YAxis7
+  ResponsiveContainer as ResponsiveContainer7,
+  Tooltip as Tooltip14,
+  XAxis as XAxis8,
+  YAxis as YAxis8
 } from "recharts";
 
 // src/components/widgets/PeakBillingHours/PeakBillingHoursCustomizationContext.tsx
-import * as React25 from "react";
-import { jsx as jsx47 } from "react/jsx-runtime";
-var PeakBillingHoursCustomizationContext = React25.createContext({});
+import * as React27 from "react";
+import { jsx as jsx51 } from "react/jsx-runtime";
+var PeakBillingHoursCustomizationContext = React27.createContext({});
 function PeakBillingHoursCustomizationProvider({
   value,
   children
 }) {
-  const memo = React25.useMemo(() => value, [value]);
-  return /* @__PURE__ */ jsx47(PeakBillingHoursCustomizationContext.Provider, { value: memo, children });
+  const memo = React27.useMemo(() => value, [value]);
+  return /* @__PURE__ */ jsx51(PeakBillingHoursCustomizationContext.Provider, { value: memo, children });
 }
 function usePeakBillingHoursCustomization() {
-  return React25.useContext(PeakBillingHoursCustomizationContext);
+  return React27.useContext(PeakBillingHoursCustomizationContext);
 }
 
 // src/components/widgets/PeakBillingHours/PeakBillingHoursTooltip.tsx
-import { jsx as jsx48, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs41 } from "react/jsx-runtime";
 function formatTooltipValue2(n) {
   return new Intl.NumberFormat(void 0, { maximumFractionDigits: 0 }).format(
     Math.round(n)
@@ -14112,7 +15136,7 @@ function PeakBillingHoursTooltip(props) {
     },
     tt?.bodyStyle
   );
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx52(
     "div",
     {
       style: {
@@ -14120,7 +15144,7 @@ function PeakBillingHoursTooltip(props) {
         minWidth: 160,
         maxWidth: 280
       },
-      children: /* @__PURE__ */ jsxs38(
+      children: /* @__PURE__ */ jsxs41(
         "div",
         {
           style: {
@@ -14131,7 +15155,7 @@ function PeakBillingHoursTooltip(props) {
             boxShadow: shadow
           },
           children: [
-            /* @__PURE__ */ jsx48(
+            /* @__PURE__ */ jsx52(
               "div",
               {
                 style: {
@@ -14142,14 +15166,14 @@ function PeakBillingHoursTooltip(props) {
                 "aria-hidden": true
               }
             ),
-            /* @__PURE__ */ jsxs38("div", { style: bodyStyle, children: [
-              /* @__PURE__ */ jsxs38("div", { style: rowStyle, children: [
-                /* @__PURE__ */ jsx48("span", { style: { color: prefixCol, fontWeight: prefixFw }, children: dateP }),
-                /* @__PURE__ */ jsx48("span", { style: { color: valueCol, fontWeight: valueFw }, children: labelText })
+            /* @__PURE__ */ jsxs41("div", { style: bodyStyle, children: [
+              /* @__PURE__ */ jsxs41("div", { style: rowStyle, children: [
+                /* @__PURE__ */ jsx52("span", { style: { color: prefixCol, fontWeight: prefixFw }, children: dateP }),
+                /* @__PURE__ */ jsx52("span", { style: { color: valueCol, fontWeight: valueFw }, children: labelText })
               ] }),
-              /* @__PURE__ */ jsxs38("div", { style: { ...rowStyle, marginTop: gap }, children: [
-                /* @__PURE__ */ jsx48("span", { style: { color: prefixCol, fontWeight: prefixFw }, children: totalP }),
-                /* @__PURE__ */ jsx48("span", { style: { color: valueCol, fontWeight: valueFw }, children: formatTooltipValue2(num) })
+              /* @__PURE__ */ jsxs41("div", { style: { ...rowStyle, marginTop: gap }, children: [
+                /* @__PURE__ */ jsx52("span", { style: { color: prefixCol, fontWeight: prefixFw }, children: totalP }),
+                /* @__PURE__ */ jsx52("span", { style: { color: valueCol, fontWeight: valueFw }, children: formatTooltipValue2(num) })
               ] })
             ] })
           ]
@@ -14160,7 +15184,7 @@ function PeakBillingHoursTooltip(props) {
 }
 
 // src/components/widgets/PeakBillingHours/PeakBillingHours.tsx
-import { Fragment as Fragment18, jsx as jsx49, jsxs as jsxs39 } from "react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx53, jsxs as jsxs42 } from "react/jsx-runtime";
 var OLY_DEFAULT_COMPOSED_CHART_CHROME6 = {
   cartesianGridStroke: "#D3D6DF",
   xAxisLineStroke: "#7566FC",
@@ -14172,7 +15196,7 @@ function toNum5(n) {
   return typeof n === "number" ? n : Number(n);
 }
 function PeakBarTopLabel(props) {
-  const { x, y, width, value, fill, fontSize, fontWeight } = props;
+  const { x, y, width, value, fill, fontSize, fontWeight, angle = 0 } = props;
   const nx = toNum5(x);
   const ny = toNum5(y);
   const nw = toNum5(width);
@@ -14185,7 +15209,8 @@ function PeakBarTopLabel(props) {
   }
   const cx = nx + nw / 2;
   const cy = ny - 6;
-  return /* @__PURE__ */ jsx49(
+  const isHorizontal = angle === 0;
+  return /* @__PURE__ */ jsx53(
     "text",
     {
       x: cx,
@@ -14193,12 +15218,13 @@ function PeakBarTopLabel(props) {
       fill,
       fontSize,
       fontWeight,
-      textAnchor: "middle",
+      textAnchor: isHorizontal ? "middle" : "start",
+      transform: isHorizontal ? void 0 : `rotate(${angle} ${cx} ${cy})`,
       children: String(Math.round(n))
     }
   );
 }
-function BarPlot({
+function BarPlot2({
   data,
   yAxisDomain,
   yAxisTicks,
@@ -14208,7 +15234,8 @@ function BarPlot({
   yAxisTickDx = -6,
   yAxisTickStyle,
   xAxisTickDx = 0,
-  xAxisTickStyle
+  xAxisTickStyle,
+  barValueLabelAngle = 0
 }) {
   const { barChart: bc } = usePeakBillingHoursCustomization();
   const height = bc?.heightPx ?? 320;
@@ -14236,24 +15263,24 @@ function BarPlot({
     barRadius,
     barRadius
   ];
-  return /* @__PURE__ */ jsx49(Box32, { sx: { width: "100%", height, mt: 0.5 }, children: /* @__PURE__ */ jsx49(ResponsiveContainer6, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs39(
-    BarChart3,
+  return /* @__PURE__ */ jsx53(Box34, { sx: { width: "100%", height, mt: 0.5 }, children: /* @__PURE__ */ jsx53(ResponsiveContainer7, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs42(
+    BarChart4,
     {
       data,
       margin: m,
       barCategoryGap: categoryGap,
       barGap,
       children: [
-        /* @__PURE__ */ jsx49(
-          CartesianGrid7,
+        /* @__PURE__ */ jsx53(
+          CartesianGrid8,
           {
             strokeDasharray: dash,
             vertical: false,
             stroke: gridStroke
           }
         ),
-        /* @__PURE__ */ jsx49(
-          XAxis7,
+        /* @__PURE__ */ jsx53(
+          XAxis8,
           {
             dataKey: "label",
             dx: xAxisTickDx,
@@ -14266,8 +15293,8 @@ function BarPlot({
             height: 36
           }
         ),
-        /* @__PURE__ */ jsx49(
-          YAxis7,
+        /* @__PURE__ */ jsx53(
+          YAxis8,
           {
             domain: yAxisDomain,
             ticks: yAxisTicks,
@@ -14278,8 +15305,8 @@ function BarPlot({
             width: yWidth
           }
         ),
-        /* @__PURE__ */ jsx49(
-          Tooltip13,
+        /* @__PURE__ */ jsx53(
+          Tooltip14,
           {
             content: (tooltipProps) => {
               if (renderTooltip) {
@@ -14288,9 +15315,9 @@ function BarPlot({
                   data,
                   activeTabId
                 });
-                return customTooltip == null ? null : /* @__PURE__ */ jsx49(Fragment18, { children: customTooltip });
+                return customTooltip == null ? null : /* @__PURE__ */ jsx53(Fragment20, { children: customTooltip });
               }
-              return /* @__PURE__ */ jsx49(PeakBillingHoursTooltip, { ...tooltipProps });
+              return /* @__PURE__ */ jsx53(PeakBillingHoursTooltip, { ...tooltipProps });
             },
             cursor: {
               fill: hoverBandFill,
@@ -14300,8 +15327,8 @@ function BarPlot({
             allowEscapeViewBox: { x: false, y: true }
           }
         ),
-        /* @__PURE__ */ jsx49(
-          Bar5,
+        /* @__PURE__ */ jsx53(
+          Bar6,
           {
             dataKey: "value",
             name: "Visits",
@@ -14309,17 +15336,18 @@ function BarPlot({
             radius: radiusTuple,
             isAnimationActive: false,
             maxBarSize: 48,
-            children: /* @__PURE__ */ jsx49(
+            children: /* @__PURE__ */ jsx53(
               LabelList5,
               {
                 dataKey: "value",
-                content: (props) => /* @__PURE__ */ jsx49(
+                content: (props) => /* @__PURE__ */ jsx53(
                   PeakBarTopLabel,
                   {
                     ...props,
                     fill: labelFill,
                     fontSize: labelFs,
-                    fontWeight: 500
+                    fontWeight: 500,
+                    angle: barValueLabelAngle
                   }
                 )
               }
@@ -14344,6 +15372,7 @@ function PeakBillingHours({
   yAxisTickStyle,
   xAxisTickDx = 0,
   xAxisTickStyle,
+  barValueLabelAngle = 0,
   yAxisDomain = [0, 50],
   yAxisTicks = [0, 10, 20, 30, 40, 50],
   infoPopover,
@@ -14351,7 +15380,7 @@ function PeakBillingHours({
   emptyStatePlaceholderProps,
   customization
 }) {
-  const chartData = React26.useMemo(() => {
+  const chartData = React28.useMemo(() => {
     if (seriesByTabId) {
       return seriesByTabId[activeTabId] ?? [];
     }
@@ -14386,9 +15415,9 @@ function PeakBillingHours({
     },
     customization?.header?.subtitleSx
   );
-  return /* @__PURE__ */ jsx49(PeakBillingHoursCustomizationProvider, { value: customization ?? {}, children: /* @__PURE__ */ jsx49(Card4, { elevation: customization?.rootCard?.elevation ?? 0, sx: rootSx, children: /* @__PURE__ */ jsx49(CardContent3, { children: /* @__PURE__ */ jsxs39(Stack27, { spacing: 1.75, sx: { width: "100%" }, children: [
-    /* @__PURE__ */ jsxs39(
-      Stack27,
+  return /* @__PURE__ */ jsx53(PeakBillingHoursCustomizationProvider, { value: customization ?? {}, children: /* @__PURE__ */ jsx53(Card5, { elevation: customization?.rootCard?.elevation ?? 0, sx: rootSx, children: /* @__PURE__ */ jsx53(CardContent4, { children: /* @__PURE__ */ jsxs42(Stack29, { spacing: 1.75, sx: { width: "100%" }, children: [
+    /* @__PURE__ */ jsxs42(
+      Stack29,
       {
         direction: "row",
         alignItems: "flex-start",
@@ -14396,20 +15425,20 @@ function PeakBillingHours({
         gap: 2,
         flexWrap: "wrap",
         children: [
-          /* @__PURE__ */ jsxs39(Box32, { component: "div", sx: { minWidth: 0 }, children: [
-            /* @__PURE__ */ jsx49(Typography28, { component: "span", sx: titleSx, children: title }),
-            /* @__PURE__ */ jsx49(Typography28, { component: "span", sx: subtitleSx, children: subtitle })
+          /* @__PURE__ */ jsxs42(Box34, { component: "div", sx: { minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx53(Typography30, { component: "span", sx: titleSx, children: title }),
+            /* @__PURE__ */ jsx53(Typography30, { component: "span", sx: subtitleSx, children: subtitle })
           ] }),
-          /* @__PURE__ */ jsx49(
-            Stack27,
+          /* @__PURE__ */ jsx53(
+            Stack29,
             {
               direction: "row",
               alignItems: "center",
               spacing: 1.5,
               sx: { flexShrink: 0 },
-              children: resolvedInfo ? /* @__PURE__ */ jsxs39(Fragment18, { children: [
-                /* @__PURE__ */ jsx49(ChartWidgetHeaderSeparator, {}),
-                /* @__PURE__ */ jsx49(
+              children: resolvedInfo ? /* @__PURE__ */ jsxs42(Fragment20, { children: [
+                /* @__PURE__ */ jsx53(ChartWidgetHeaderSeparator, {}),
+                /* @__PURE__ */ jsx53(
                   ChartWidgetInfoButton,
                   {
                     popover: resolvedInfo,
@@ -14422,7 +15451,7 @@ function PeakBillingHours({
         ]
       }
     ),
-    /* @__PURE__ */ jsx49(
+    /* @__PURE__ */ jsx53(
       ChartWidgetSegmentedTabs,
       {
         tabs,
@@ -14442,8 +15471,8 @@ function PeakBillingHours({
         inactiveTabFontWeight: st?.inactiveTabFontWeight ?? 600
       }
     ),
-    isLoading ? /* @__PURE__ */ jsx49(Skeleton8, { variant: "rounded", width: "100%", height: 320 }) : chartData.length > 0 ? /* @__PURE__ */ jsx49(
-      BarPlot,
+    isLoading ? /* @__PURE__ */ jsx53(Skeleton8, { variant: "rounded", width: "100%", height: 320 }) : chartData.length > 0 ? /* @__PURE__ */ jsx53(
+      BarPlot2,
       {
         data: chartData,
         yAxisDomain,
@@ -14454,9 +15483,10 @@ function PeakBillingHours({
         yAxisTickDx,
         yAxisTickStyle,
         xAxisTickDx,
-        xAxisTickStyle
+        xAxisTickStyle,
+        barValueLabelAngle
       }
-    ) : /* @__PURE__ */ jsx49(
+    ) : /* @__PURE__ */ jsx53(
       ChartEmptyState,
       {
         minHeight: 320,
@@ -14467,10 +15497,10 @@ function PeakBillingHours({
 }
 
 // src/components/widgets/CustomerJourneyAnalysis/CustomerJourneyAnalysis.tsx
-import Box33 from "@mui/material/Box";
-import Stack28 from "@mui/material/Stack";
-import Typography29 from "@mui/material/Typography";
-import { jsx as jsx50, jsxs as jsxs40 } from "react/jsx-runtime";
+import Box35 from "@mui/material/Box";
+import Stack30 from "@mui/material/Stack";
+import Typography31 from "@mui/material/Typography";
+import { jsx as jsx54, jsxs as jsxs43 } from "react/jsx-runtime";
 var DEFAULT_WALK_INS_BG = "#5B8DEF";
 var DEFAULT_TRIAL_VISITS_BG = "#F59E42";
 var DEFAULT_BILLING_VISITS_BG = "#6EBE7A";
@@ -14518,7 +15548,7 @@ function resolveMetricConfig(shared, perCard, props) {
     sx: perCard?.sx ?? shared?.sx
   };
 }
-function mergeSx4(...items) {
+function mergeSx5(...items) {
   return items.flatMap(
     (item) => Array.isArray(item) ? item : item ? [item] : []
   );
@@ -14534,6 +15564,7 @@ function CustomerJourneyAnalysis({
   avgBillingPerTrial,
   // Labels
   title = "Customer Journey Analysis",
+  hideTitle = false,
   titleFontSize,
   titleFontWeight = 700,
   titleColor = "#0f172a",
@@ -14724,17 +15755,17 @@ function CustomerJourneyAnalysis({
     ...Array.isArray(metricsSx) ? metricsSx : metricsSx ? [metricsSx] : []
   ];
   const bodyDirection = { xs: "column", [bodyBreakpoint]: "row" };
-  return /* @__PURE__ */ jsx50(Box33, { sx: outerSx, children: /* @__PURE__ */ jsxs40(Stack28, { spacing: 2, children: [
-    /* @__PURE__ */ jsxs40(
-      Stack28,
+  return /* @__PURE__ */ jsx54(Box35, { sx: outerSx, children: /* @__PURE__ */ jsxs43(Stack30, { spacing: 2, children: [
+    !hideTitle && /* @__PURE__ */ jsxs43(
+      Stack30,
       {
         direction: "row",
         alignItems: "flex-start",
         justifyContent: "space-between",
         gap: 2,
         children: [
-          /* @__PURE__ */ jsx50(
-            Typography29,
+          /* @__PURE__ */ jsx54(
+            Typography31,
             {
               component: "h2",
               variant: "h6",
@@ -14747,8 +15778,8 @@ function CustomerJourneyAnalysis({
               children: title
             }
           ),
-          headerActions != null ? /* @__PURE__ */ jsx50(
-            Box33,
+          headerActions != null ? /* @__PURE__ */ jsx54(
+            Box35,
             {
               sx: {
                 flexShrink: 0,
@@ -14762,9 +15793,9 @@ function CustomerJourneyAnalysis({
         ]
       }
     ),
-    /* @__PURE__ */ jsxs40(Stack28, { direction: bodyDirection, spacing: bodyGap, alignItems: "stretch", children: [
-      /* @__PURE__ */ jsx50(Box33, { sx: stripSx, children: /* @__PURE__ */ jsxs40(Box33, { sx: statCardsRowSx, children: [
-        /* @__PURE__ */ jsx50(
+    /* @__PURE__ */ jsxs43(Stack30, { direction: bodyDirection, spacing: bodyGap, alignItems: "stretch", children: [
+      /* @__PURE__ */ jsx54(Box35, { sx: stripSx, children: /* @__PURE__ */ jsxs43(Box35, { sx: statCardsRowSx, children: [
+        /* @__PURE__ */ jsx54(
           JourneyStatCard,
           {
             icon: wiConfig.icon,
@@ -14785,7 +15816,7 @@ function CustomerJourneyAnalysis({
             borderRadius: wiConfig.borderRadius,
             minHeight: wiConfig.minHeight,
             isLoading,
-            sx: mergeSx4(
+            sx: mergeSx5(
               {
                 flex: statCardFlexes[0],
                 borderRadius: `${statStripInnerBorderRadius} 0 0 ${statStripInnerBorderRadius}`
@@ -14794,7 +15825,7 @@ function CustomerJourneyAnalysis({
             )
           }
         ),
-        /* @__PURE__ */ jsx50(
+        /* @__PURE__ */ jsx54(
           JourneyStatCard,
           {
             icon: tvConfig.icon,
@@ -14815,10 +15846,10 @@ function CustomerJourneyAnalysis({
             borderRadius: tvConfig.borderRadius,
             minHeight: tvConfig.minHeight,
             isLoading,
-            sx: mergeSx4({ flex: statCardFlexes[1] }, tvConfig.sx)
+            sx: mergeSx5({ flex: statCardFlexes[1] }, tvConfig.sx)
           }
         ),
-        /* @__PURE__ */ jsx50(
+        /* @__PURE__ */ jsx54(
           JourneyStatCard,
           {
             icon: bvConfig.icon,
@@ -14839,7 +15870,7 @@ function CustomerJourneyAnalysis({
             borderRadius: bvConfig.borderRadius,
             minHeight: bvConfig.minHeight,
             isLoading,
-            sx: mergeSx4(
+            sx: mergeSx5(
               {
                 flex: statCardFlexes[2],
                 borderRadius: `0 ${statStripInnerBorderRadius} ${statStripInnerBorderRadius} 0`
@@ -14849,8 +15880,8 @@ function CustomerJourneyAnalysis({
           }
         )
       ] }) }),
-      /* @__PURE__ */ jsx50(Box33, { sx: metricsBoxSx, children: /* @__PURE__ */ jsx50(
-        Box33,
+      /* @__PURE__ */ jsx54(Box35, { sx: metricsBoxSx, children: /* @__PURE__ */ jsx54(
+        Box35,
         {
           sx: {
             display: "grid",
@@ -14883,8 +15914,8 @@ function CustomerJourneyAnalysis({
               label: avgBillingPerTrialLabel,
               value: formatAverage(avgBillingPerTrial)
             }
-          ].map(({ cfg, label, value }) => /* @__PURE__ */ jsx50(
-            Box33,
+          ].map(({ cfg, label, value }) => /* @__PURE__ */ jsx54(
+            Box35,
             {
               sx: {
                 bgcolor: metricsCardBg,
@@ -14893,7 +15924,7 @@ function CustomerJourneyAnalysis({
                 height: "100%",
                 minWidth: 0
               },
-              children: /* @__PURE__ */ jsx50(
+              children: /* @__PURE__ */ jsx54(
                 JourneyMetricCard,
                 {
                   label,
@@ -14928,7 +15959,7 @@ import {
   createTheme,
   responsiveFontSizes
 } from "@mui/material/styles";
-import { jsx as jsx51, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs44 } from "react/jsx-runtime";
 var lightColor = "51, 48, 60";
 var darkColor = "228, 230, 244";
 var darkPaperBg = "#2F3349";
@@ -15008,8 +16039,8 @@ var FalconThemeProvider = ({
       mixins: { toolbar: { minHeight: 64 } }
     })
   );
-  return /* @__PURE__ */ jsxs41(ThemeProvider, { theme, children: [
-    /* @__PURE__ */ jsx51(CssBaseline, {}),
+  return /* @__PURE__ */ jsxs44(ThemeProvider, { theme, children: [
+    /* @__PURE__ */ jsx55(CssBaseline, {}),
     children
   ] });
 };
@@ -15032,6 +16063,7 @@ export {
   DEFAULT_FOOTFALL_TILE_ICONS,
   DEFAULT_PEAK_BILLING_HOURS_INFO_POPOVER,
   DEFAULT_QUEUE_TIME_BREAKDOWN_INFO_POPOVER,
+  DEFAULT_STORE_PERFORMANCE_BY_ASSIST_INFO_POPOVER,
   FalconAuditTimeline,
   FalconButton,
   FalconDIstrictFilter,
@@ -15070,6 +16102,17 @@ export {
   QueueTimeBreakdownStackedBar,
   TimePeriodFilter as QueueTimePeriodFilter,
   RankedBarList,
+  STACKED_COMPARISON_DEFAULT_COMPARISON_COLOR,
+  STACKED_COMPARISON_DEFAULT_FRAME_BORDER,
+  STACKED_COMPARISON_DEFAULT_LEGEND_COMPARISON_COLOR,
+  STACKED_COMPARISON_DEFAULT_LEGEND_STACK_COLOR,
+  STACKED_COMPARISON_DEFAULT_STACK_COLORS,
+  STORE_PERFORMANCE_DEFAULT_BUCKETS,
+  STORE_PERFORMANCE_DEFAULT_DATA,
+  StackedComparisonBarChart,
+  StackedComparisonBarChartCustomizationProvider,
+  StackedComparisonBarChartTooltip,
+  StorePerformanceByAssist,
   TIME_PERIOD_FILTER_INFO_POPOVER,
   TIME_PERIOD_FILTER_INFO_POPOVER_BREAKDOWN,
   TimePeriodFilter,
@@ -15101,9 +16144,12 @@ export {
   peakBillingHoursVisitsMock,
   preprocessData,
   skipSingleBranchLevels,
+  mergeCss7 as stackedComparisonMergeCss,
+  mergeSx4 as stackedComparisonMergeSx,
   toRechartsTreemapData,
   useBillingCounterAnalyticsCustomization,
   usePeakBillingHoursCustomization,
-  useQueueTimeBreakdownCustomization
+  useQueueTimeBreakdownCustomization,
+  useStackedComparisonBarChartCustomization
 };
 //# sourceMappingURL=index.mjs.map