@bpfdev/oly-ui 1.0.12 → 1.0.14

package/dist/index.js

@@ -49,6 +49,7 @@ __export(index_exports, {
   DEFAULT_FOOTFALL_TILE_ICONS: () => DEFAULT_FOOTFALL_TILE_ICONS,
   DEFAULT_PEAK_BILLING_HOURS_INFO_POPOVER: () => DEFAULT_PEAK_BILLING_HOURS_INFO_POPOVER,
   DEFAULT_QUEUE_TIME_BREAKDOWN_INFO_POPOVER: () => DEFAULT_QUEUE_TIME_BREAKDOWN_INFO_POPOVER,
+  DEFAULT_STORE_PERFORMANCE_BY_ASSIST_INFO_POPOVER: () => DEFAULT_STORE_PERFORMANCE_BY_ASSIST_INFO_POPOVER,
   FalconAuditTimeline: () => FalconAuditTimeline,
   FalconButton: () => FalconButton,
   FalconDIstrictFilter: () => FalconDIstrictFilter,
@@ -87,6 +88,17 @@ __export(index_exports, {
   QueueTimeBreakdownStackedBar: () => QueueTimeBreakdownStackedBar,
   QueueTimePeriodFilter: () => TimePeriodFilter,
   RankedBarList: () => RankedBarList,
+  STACKED_COMPARISON_DEFAULT_COMPARISON_COLOR: () => STACKED_COMPARISON_DEFAULT_COMPARISON_COLOR,
+  STACKED_COMPARISON_DEFAULT_FRAME_BORDER: () => STACKED_COMPARISON_DEFAULT_FRAME_BORDER,
+  STACKED_COMPARISON_DEFAULT_LEGEND_COMPARISON_COLOR: () => STACKED_COMPARISON_DEFAULT_LEGEND_COMPARISON_COLOR,
+  STACKED_COMPARISON_DEFAULT_LEGEND_STACK_COLOR: () => STACKED_COMPARISON_DEFAULT_LEGEND_STACK_COLOR,
+  STACKED_COMPARISON_DEFAULT_STACK_COLORS: () => STACKED_COMPARISON_DEFAULT_STACK_COLORS,
+  STORE_PERFORMANCE_DEFAULT_BUCKETS: () => STORE_PERFORMANCE_DEFAULT_BUCKETS,
+  STORE_PERFORMANCE_DEFAULT_DATA: () => STORE_PERFORMANCE_DEFAULT_DATA,
+  StackedComparisonBarChart: () => StackedComparisonBarChart,
+  StackedComparisonBarChartCustomizationProvider: () => StackedComparisonBarChartCustomizationProvider,
+  StackedComparisonBarChartTooltip: () => StackedComparisonBarChartTooltip,
+  StorePerformanceByAssist: () => StorePerformanceByAssist,
   TIME_PERIOD_FILTER_INFO_POPOVER: () => TIME_PERIOD_FILTER_INFO_POPOVER,
   TIME_PERIOD_FILTER_INFO_POPOVER_BREAKDOWN: () => TIME_PERIOD_FILTER_INFO_POPOVER_BREAKDOWN,
   TimePeriodFilter: () => TimePeriodFilter,
@@ -118,10 +130,13 @@ __export(index_exports, {
   peakBillingHoursVisitsMock: () => peakBillingHoursVisitsMock,
   preprocessData: () => preprocessData,
   skipSingleBranchLevels: () => skipSingleBranchLevels,
+  stackedComparisonMergeCss: () => mergeCss7,
+  stackedComparisonMergeSx: () => mergeSx4,
   toRechartsTreemapData: () => toRechartsTreemapData,
   useBillingCounterAnalyticsCustomization: () => useBillingCounterAnalyticsCustomization,
   usePeakBillingHoursCustomization: () => usePeakBillingHoursCustomization,
-  useQueueTimeBreakdownCustomization: () => useQueueTimeBreakdownCustomization
+  useQueueTimeBreakdownCustomization: () => useQueueTimeBreakdownCustomization,
+  useStackedComparisonBarChartCustomization: () => useStackedComparisonBarChartCustomization
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -782,7 +797,12 @@ function InfoPopoverPanel({
   placement,
   compact
 }) {
-  const helpTitle = content.helpTitle ?? "How does it help?";
+  const hasTitle = typeof content.title === "string" && content.title.trim() !== "";
+  const hasDescription = typeof content.description === "string" && content.description.trim() !== "";
+  const hasBullets = content.helpBullets.length > 0;
+  const hasExplicitHelpTitle = typeof content.helpTitle === "string" && content.helpTitle.trim() !== "";
+  const showHelpSection = hasBullets || hasExplicitHelpTitle;
+  const helpTitle = hasExplicitHelpTitle ? content.helpTitle : "How does it help?";
   const border = isDark ? popperBorderDark : popperBorder;
   const paperBg = isDark ? "#1c2128" : "#fff";
   const textPrimary = isDark ? "#f0f6fc" : "#1a1a1a";
@@ -810,7 +830,7 @@ function InfoPopoverPanel({
         boxShadow: panelShadow
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_Stack.default, { spacing: stackSpacing, sx: { position: "relative", zIndex: 1 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        hasTitle && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           import_Typography.default,
           {
             component: "h3",
@@ -823,7 +843,7 @@ function InfoPopoverPanel({
             children: content.title
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        hasDescription && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           import_Typography.default,
           {
             sx: {
@@ -834,7 +854,7 @@ function InfoPopoverPanel({
             children: content.description
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        showHelpSection && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           import_Typography.default,
           {
             sx: {
@@ -847,7 +867,7 @@ function InfoPopoverPanel({
             children: helpTitle
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        hasBullets && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           import_Box2.default,
           {
             component: "ul",
@@ -4015,7 +4035,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,
@@ -4053,7 +4073,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,
@@ -11001,6 +11030,10 @@ function LinePlot({
     left: lc?.margin?.left ?? 4
   };
   const xFill = lc?.xAxisTickFill ?? OLY_DEFAULT_CHART_AXIS_TICK_FILL;
+  const xTickAngle = lc?.xAxisTickAngle ?? 0;
+  const xTickStyle = lc?.xAxisTickStyle;
+  const xAxisHeight = lc?.xAxisHeight ?? 40;
+  const xTickAnchor = xTickAngle < 0 ? "end" : xTickAngle > 0 ? "start" : "middle";
   const yFill = lc?.yAxisTickFill ?? OLY_DEFAULT_CHART_AXIS_TICK_FILL;
   const yWidth = lc?.yAxisWidth ?? 36;
   const cursorStroke = lc?.cursorStroke ?? "#9CA3AF";
@@ -11019,13 +11052,15 @@ function LinePlot({
       import_recharts6.XAxis,
       {
         dataKey: "label",
-        tick: { fill: xFill, fontSize: 11 },
+        tick: { fill: xFill, fontSize: 11, style: xTickStyle },
         tickLine: false,
         axisLine: {
           stroke: OLY_DEFAULT_COMPOSED_CHART_CHROME5.axisTickLineStroke
         },
         interval: 0,
-        height: 40
+        height: xAxisHeight,
+        angle: xTickAngle,
+        textAnchor: xTickAnchor
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
@@ -11305,6 +11340,7 @@ var QueueTimeBreakdownArea = ({
     () => mergeAreaData(series, xAxis),
     [series, xAxis]
   );
+  const fill = ac?.fillHeight ?? false;
   const stackH = ac?.stackHeightPx ?? 330;
   const chartH = ac?.chartHeightPx ?? 350;
   const margin = React20.useMemo(
@@ -11324,90 +11360,102 @@ var QueueTimeBreakdownArea = ({
   }, [chartData, series]);
   const yDomain = allZero ? [0, 16e3] : [0, "auto"];
   const yTickCount = allZero ? 5 : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_material18.Stack, { justifyContent: "center", height: stackH, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_recharts7.ResponsiveContainer, { width: "100%", height: chartH, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_recharts7.AreaChart, { data: chartData, margin, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-      import_recharts7.CartesianGrid,
-      {
-        strokeDasharray: "3 3",
-        stroke: gridStroke,
-        vertical: false
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-      import_recharts7.XAxis,
-      {
-        dataKey: "name",
-        tick: { fill: theme.palette.text.secondary, fontSize: 11 },
-        axisLine: false,
-        tickLine: false
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-      import_recharts7.YAxis,
-      {
-        domain: yDomain,
-        tickCount: yTickCount,
-        tick: { fill: theme.palette.text.secondary, fontSize: 11 },
-        axisLine: false,
-        tickLine: false,
-        tickFormatter: (v) => {
-          const n = typeof v === "number" ? v : Number(v);
-          const safe = Number.isFinite(n) ? n : 0;
-          return safe > 1e3 ? `${Math.ceil(safe / 1e3)}k` : String(safe);
-        },
-        label: {
-          value: yLabel,
-          angle: -90,
-          position: "insideLeft",
-          style: { fill: theme.palette.text.secondary, fontSize: 11 }
-        }
-      }
-    ),
-    series.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-      import_recharts7.Area,
-      {
-        type: "monotone",
-        dataKey: s.name,
-        stackId: "queueArea",
-        stroke: palette[i % palette.length],
-        fill: palette[i % palette.length],
-        fillOpacity: 1,
-        strokeWidth: 0
-      },
-      s.name
-    )),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-      import_recharts7.Tooltip,
-      {
-        content: (tooltipProps) => {
-          if (renderTooltip) {
-            const custom = renderTooltip({
-              tooltipProps,
-              chartData,
-              series,
-              xAxis
-            });
-            return custom == null ? null : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_jsx_runtime41.Fragment, { children: custom });
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    import_material18.Stack,
+    {
+      justifyContent: fill ? "stretch" : "center",
+      sx: fill ? {
+        flexGrow: 1,
+        minHeight: 0,
+        height: "100%",
+        "& > *": { flex: 1, minHeight: 0 }
+      } : { height: stackH },
+      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_recharts7.ResponsiveContainer, { width: "100%", height: fill ? "100%" : chartH, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_recharts7.AreaChart, { data: chartData, margin, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          import_recharts7.CartesianGrid,
+          {
+            strokeDasharray: "3 3",
+            stroke: gridStroke,
+            vertical: false
           }
-          const { active, payload, label } = tooltipProps;
-          return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-            QueueTimeBreakdownAreaTooltip,
-            {
-              active,
-              label,
-              payload,
-              styleOverrides: ac?.areaTooltip
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          import_recharts7.XAxis,
+          {
+            dataKey: "name",
+            tick: { fill: theme.palette.text.secondary, fontSize: 11 },
+            axisLine: false,
+            tickLine: false
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          import_recharts7.YAxis,
+          {
+            domain: yDomain,
+            tickCount: yTickCount,
+            tick: { fill: theme.palette.text.secondary, fontSize: 11 },
+            axisLine: false,
+            tickLine: false,
+            tickFormatter: (v) => {
+              const n = typeof v === "number" ? v : Number(v);
+              const safe = Number.isFinite(n) ? n : 0;
+              return safe > 1e3 ? `${Math.ceil(safe / 1e3)}k` : String(safe);
+            },
+            label: {
+              value: yLabel,
+              angle: -90,
+              position: "insideLeft",
+              style: { fill: theme.palette.text.secondary, fontSize: 11 }
             }
-          );
-        },
-        cursor: {
-          stroke: ac?.cursorStroke ?? "#D4D4D8",
-          strokeWidth: ac?.cursorStrokeWidth ?? 1
-        },
-        wrapperStyle: { outline: "none" }
-      }
-    )
-  ] }) }) });
+          }
+        ),
+        series.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          import_recharts7.Area,
+          {
+            type: "monotone",
+            dataKey: s.name,
+            stackId: "queueArea",
+            stroke: palette[i % palette.length],
+            fill: palette[i % palette.length],
+            fillOpacity: 1,
+            strokeWidth: 0
+          },
+          s.name
+        )),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          import_recharts7.Tooltip,
+          {
+            content: (tooltipProps) => {
+              if (renderTooltip) {
+                const custom = renderTooltip({
+                  tooltipProps,
+                  chartData,
+                  series,
+                  xAxis
+                });
+                return custom == null ? null : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_jsx_runtime41.Fragment, { children: custom });
+              }
+              const { active, payload, label } = tooltipProps;
+              return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                QueueTimeBreakdownAreaTooltip,
+                {
+                  active,
+                  label,
+                  payload,
+                  styleOverrides: ac?.areaTooltip
+                }
+              );
+            },
+            cursor: {
+              stroke: ac?.cursorStroke ?? "#D4D4D8",
+              strokeWidth: ac?.cursorStrokeWidth ?? 1
+            },
+            wrapperStyle: { outline: "none" }
+          }
+        )
+      ] }) })
+    }
+  );
 };
 var QueueTimeBreakdownArea_default = QueueTimeBreakdownArea;
 var xDays = [
@@ -11588,10 +11636,10 @@ function DonutInnerPercentLabel(props) {
   );
 }
 var DEFAULT_LABELS = [
-  "0-20 years old (male)",
-  "21-45 years old (male)",
-  "46-60 years old (male)",
-  "60+ years old (male)"
+  "1-15 mins",
+  "16-30 mins",
+  "30-45 mins",
+  "> 45 mins"
 ];
 function QueueTimeBreakdownDonut({
   chartFilter,
@@ -11611,8 +11659,9 @@ function QueueTimeBreakdownDonut({
   const padAngle = dn?.paddingAngle ?? 0;
   const chartH = dn?.chartHeightPx ?? 220;
   const pieData = React21.useMemo(() => {
-    return labels.map((name, i) => ({
-      name,
+    const count = Math.max(averageData.length, labels.length);
+    return Array.from({ length: count }, (_, i) => ({
+      name: labels[i] ?? `Bucket ${i + 1}`,
       value: Math.max(0, averageData[i] ?? 0)
     }));
   }, [averageData, labels]);
@@ -12095,6 +12144,9 @@ function QueueTimeBreakdown({
   data,
   Donut_data,
   donutYesterdayData,
+  donutLabels,
+  areaSeries,
+  areaXAxis,
   headerImageSrc,
   headlineTotal = "14,123",
   headlineSubtitle = "Queue Time Breakdown Of All Visitors",
@@ -12119,6 +12171,12 @@ function QueueTimeBreakdown({
     () => data.some((row) => row.data.some((seg) => (seg.data[0] ?? 0) > 0)),
     [data]
   );
+  const areaProvided = areaSeries !== void 0;
+  const resolvedAreaSeries = areaSeries !== void 0 ? areaSeries : getQueueTimeBreakdownAreaSeriesData(filter);
+  const resolvedAreaXAxis = areaProvided ? areaXAxis ?? [] : areaXAxis && areaXAxis.length > 0 ? areaXAxis : getQueueTimeBreakdownAreaXAxisData(filter);
+  const hasAreaData = resolvedAreaXAxis.length > 0 && resolvedAreaSeries.some(
+    (s) => s.data.some((v) => (typeof v === "number" ? v : 0) > 0)
+  );
   const palette = customization?.chartPalette && customization.chartPalette.length > 0 ? customization.chartPalette : QUEUE_CHART_COLORS;
   const legend = queueBucketLegend ?? defaultBucketLegendFromPalette(palette);
   const resolvedHeaderImageSrc = headerImageSrc === void 0 ? QUEUE_TIME_BREAKDOWN_DEFAULT_HEADER_IMAGE_SRC : headerImageSrc;
@@ -12136,256 +12194,1211 @@ function QueueTimeBreakdown({
     { fontWeight: 700, color: "#0f172a" },
     customization?.periodFilter?.titleSx
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(QueueTimeBreakdownCustomizationProvider, { value: customization ?? {}, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_Card2.default, { elevation: customization?.rootCard?.elevation ?? 0, sx: rootSx, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_CardContent2.default, { sx: mergeSx2(customization?.rootCard?.cardContentSx), children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_Stack17.default, { width: "100%", direction: "column", gap: 3, mb: 4, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
-      import_Stack17.default,
-      {
-        direction: "row",
-        alignItems: "center",
-        justifyContent: "space-between",
-        flexWrap: "wrap",
-        gap: 2,
-        width: "100%",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-            import_Typography16.default,
-            {
-              variant: isSmallScreen ? "subtitle2" : "body1",
-              sx: periodTitleSx,
-              children: title
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-            TimePeriodFilter,
-            {
-              selectedFilter: filter,
-              onFilterChange: setFilter,
-              infoPopover: resolvedPeriodInfoPopover
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_Box19.default, { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_Grid.default, { container: true, spacing: 3, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_Grid.default, { size: { md: 6, xs: 12 }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(QueueTimeBreakdownCustomizationProvider, { value: customization ?? {}, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_Card2.default, { elevation: customization?.rootCard?.elevation ?? 0, sx: rootSx, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_CardContent2.default, { sx: mergeSx2(customization?.rootCard?.cardContentSx), children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+    import_Stack17.default,
+    {
+      width: "100%",
+      direction: "column",
+      gap: 3,
+      sx: mergeSx2({ mb: 4 }, customization?.rootCard?.contentStackSx),
+      children: [
         /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
           import_Stack17.default,
           {
-            gap: 1,
-            sx: mergeSx2(customization?.leftColumn?.columnStackSx),
+            direction: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+            flexWrap: "wrap",
+            gap: 2,
+            width: "100%",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_Stack17.default, { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
-                import_Stack17.default,
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                import_Typography16.default,
                 {
-                  direction: "row",
-                  gap: 4,
-                  justifyContent: "start",
-                  alignItems: "center",
-                  children: [
-                    resolvedHeaderImageSrc ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                      import_Box19.default,
-                      {
-                        component: "img",
-                        src: resolvedHeaderImageSrc,
-                        alt: "",
-                        width: 52,
-                        height: 52,
-                        sx: { objectFit: "contain" }
-                      }
-                    ) : null,
-                    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_Stack17.default, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                        import_Typography16.default,
-                        {
-                          sx: mergeSx2(
-                            {
-                              fontSize: "20px",
-                              fontWeight: 600,
-                              color: "#222222"
-                            },
-                            customization?.header?.headlineSx
-                          ),
-                          children: headlineTotal
-                        }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_Stack17.default, { direction: "row", alignItems: "center", gap: 1, children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                          import_Typography16.default,
-                          {
-                            sx: mergeSx2(
-                              {
-                                fontSize: "11px",
-                                fontWeight: 400,
-                                color: "#222222"
-                              },
-                              customization?.header?.subtitleSx
-                            ),
-                            children: headlineSubtitle
-                          }
-                        ),
-                        resolvedHeadlineInfoPopover ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                          ChartWidgetInfoButton,
-                          {
-                            density: "compact",
-                            popover: resolvedHeadlineInfoPopover,
-                            ariaLabel: "Queue time breakdown information"
-                          }
-                        ) : null
-                      ] })
-                    ] })
-                  ]
+                  variant: isSmallScreen ? "subtitle2" : "body1",
+                  sx: periodTitleSx,
+                  children: title
                 }
-              ) }),
+              ),
               /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                import_Stack17.default,
+                TimePeriodFilter,
                 {
-                  sx: mergeSx2(customization?.leftColumn?.barRowsStackSx),
-                  children: data.map((item) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                    QueueTimeBreakdownStackedBar,
-                    {
-                      row: item,
-                      legendRows: legend,
-                      renderTooltip: renderStackedBarTooltip
-                    },
-                    item.name
-                  ))
+                  selectedFilter: filter,
+                  onFilterChange: setFilter,
+                  infoPopover: resolvedPeriodInfoPopover
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-          import_Typography16.default,
-          {
-            sx: mergeSx2(
-              {
-                marginTop: "10px",
-                fontSize: "14px",
-                fontWeight: 500,
-                color: "#222222"
-              },
-              customization?.dataComparison?.titleSx
-            ),
-            children: dataComparisonTitle
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-          import_Card2.default,
-          {
-            elevation: 0,
-            sx: mergeSx2(
-              {
-                cursor: "pointer",
-                marginTop: "10px",
-                bgcolor: "#FFFFFF",
-                border: "1px solid #E5E7EB",
-                borderRadius: 2
-              },
-              customization?.dataComparison?.cardSx
-            ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_CardContent2.default, { sx: { padding: "4px 8px" }, children: hasComparisonData ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_Box19.default, { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_Grid.default, { container: true, spacing: 3, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_Grid.default, { size: { md: 6, xs: 12 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
               import_Stack17.default,
               {
-                direction: "row",
-                justifyContent: "space-evenly",
-                alignItems: "center",
+                gap: 1,
+                sx: mergeSx2(customization?.leftColumn?.columnStackSx),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_Stack17.default, { width: "50%", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                    QueueTimeBreakdownDonut,
+                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_Stack17.default, { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+                    import_Stack17.default,
                     {
-                      averageData: Donut_data,
-                      chartFilter: filter,
-                      LabelName: "Today",
-                      renderTooltip: renderDonutTooltip
+                      direction: "row",
+                      gap: 4,
+                      justifyContent: "start",
+                      alignItems: "center",
+                      children: [
+                        resolvedHeaderImageSrc ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                          import_Box19.default,
+                          {
+                            component: "img",
+                            src: resolvedHeaderImageSrc,
+                            alt: "",
+                            width: 52,
+                            height: 52,
+                            sx: { objectFit: "contain" }
+                          }
+                        ) : null,
+                        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_Stack17.default, { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                            import_Typography16.default,
+                            {
+                              sx: mergeSx2(
+                                {
+                                  fontSize: "20px",
+                                  fontWeight: 600,
+                                  color: "#222222"
+                                },
+                                customization?.header?.headlineSx
+                              ),
+                              children: headlineTotal
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_Stack17.default, { direction: "row", alignItems: "center", gap: 1, children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                              import_Typography16.default,
+                              {
+                                sx: mergeSx2(
+                                  {
+                                    fontSize: "11px",
+                                    fontWeight: 400,
+                                    color: "#222222"
+                                  },
+                                  customization?.header?.subtitleSx
+                                ),
+                                children: headlineSubtitle
+                              }
+                            ),
+                            resolvedHeadlineInfoPopover ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                              ChartWidgetInfoButton,
+                              {
+                                density: "compact",
+                                popover: resolvedHeadlineInfoPopover,
+                                ariaLabel: "Queue time breakdown information"
+                              }
+                            ) : null
+                          ] })
+                        ] })
+                      ]
                     }
                   ) }),
                   /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                    import_Box19.default,
+                    import_Stack17.default,
                     {
-                      component: "span",
-                      sx: mergeSx2(
+                      sx: mergeSx2(customization?.leftColumn?.barRowsStackSx),
+                      children: data.map((item) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                        QueueTimeBreakdownStackedBar,
                         {
-                          height: "180px",
-                          width: "2px",
-                          backgroundColor: "#D8D9E4",
-                          display: "inline-block"
+                          row: item,
+                          legendRows: legend,
+                          renderTooltip: renderStackedBarTooltip
                         },
-                        customization?.dataComparison?.dividerSx
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_Stack17.default, { width: "50%", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                    QueueTimeBreakdownDonut,
-                    {
-                      averageData: yesterdayDonut,
-                      chartFilter: filter,
-                      LabelName: "Yesterday",
-                      renderTooltip: renderDonutTooltip
+                        item.name
+                      ))
                     }
-                  ) })
+                  )
                 ]
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ChartEmptyState, { minHeight: 220 }) })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_Grid.default, { size: { md: 6, xs: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-        import_Card2.default,
-        {
-          elevation: 0,
-          sx: mergeSx2(
-            {
-              cursor: "pointer",
-              borderRadius: "8px",
-              border: "1px solid #E5E7EB",
-              bgcolor: "#FFFFFF",
-              height: "100%"
-            },
-            customization?.areaChart?.cardSx
-          ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-            import_CardContent2.default,
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+              import_Typography16.default,
+              {
+                sx: mergeSx2(
+                  {
+                    marginTop: "10px",
+                    fontSize: "14px",
+                    fontWeight: 500,
+                    color: "#222222"
+                  },
+                  customization?.dataComparison?.titleSx
+                ),
+                children: dataComparisonTitle
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+              import_Card2.default,
+              {
+                elevation: 0,
+                sx: mergeSx2(
+                  {
+                    cursor: "pointer",
+                    marginTop: "10px",
+                    bgcolor: "#FFFFFF",
+                    border: "1px solid #E5E7EB",
+                    borderRadius: 2
+                  },
+                  customization?.dataComparison?.cardSx
+                ),
+                children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_CardContent2.default, { sx: { padding: "4px 8px" }, children: hasComparisonData ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+                  import_Stack17.default,
+                  {
+                    direction: "row",
+                    justifyContent: "space-evenly",
+                    alignItems: "center",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_Stack17.default, { width: "50%", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                        QueueTimeBreakdownDonut,
+                        {
+                          averageData: Donut_data,
+                          labels: donutLabels,
+                          chartFilter: filter,
+                          LabelName: "Today",
+                          renderTooltip: renderDonutTooltip
+                        }
+                      ) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                        import_Box19.default,
+                        {
+                          component: "span",
+                          sx: mergeSx2(
+                            {
+                              height: "180px",
+                              width: "2px",
+                              backgroundColor: "#D8D9E4",
+                              display: "inline-block"
+                            },
+                            customization?.dataComparison?.dividerSx
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_Stack17.default, { width: "50%", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                        QueueTimeBreakdownDonut,
+                        {
+                          averageData: yesterdayDonut,
+                          labels: donutLabels,
+                          chartFilter: filter,
+                          LabelName: "Yesterday",
+                          renderTooltip: renderDonutTooltip
+                        }
+                      ) })
+                    ]
+                  }
+                ) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ChartEmptyState, { minHeight: 220 }) })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_Grid.default, { size: { md: 6, xs: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+            import_Card2.default,
             {
+              elevation: 0,
               sx: mergeSx2(
-                { padding: "10px 8px" },
-                customization?.areaChart?.cardContentSx
+                {
+                  cursor: "pointer",
+                  borderRadius: "8px",
+                  border: "1px solid #E5E7EB",
+                  bgcolor: "#FFFFFF",
+                  height: "100%"
+                },
+                customization?.areaChart?.cardSx
               ),
-              children: hasBarData ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                QueueTimeBreakdownArea_default,
+              children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                import_CardContent2.default,
                 {
-                  series: getQueueTimeBreakdownAreaSeriesData(filter),
-                  xAxis: getQueueTimeBreakdownAreaXAxisData(filter),
-                  renderTooltip: renderAreaTooltip
+                  sx: mergeSx2(
+                    { padding: "10px 8px" },
+                    customization?.areaChart?.cardContentSx
+                  ),
+                  children: (areaProvided ? hasAreaData : hasBarData) ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                    QueueTimeBreakdownArea_default,
+                    {
+                      series: resolvedAreaSeries,
+                      xAxis: resolvedAreaXAxis,
+                      renderTooltip: renderAreaTooltip
+                    }
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ChartEmptyState, { minHeight: 330 })
                 }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ChartEmptyState, { minHeight: 330 })
+              )
             }
-          )
-        }
-      ) })
-    ] }) })
-  ] }) }) }) });
+          ) })
+        ] }) })
+      ]
+    }
+  ) }) }) });
 }
 
-// src/components/widgets/FootFallHeatMap/FootFallHeatMapView.tsx
-var import_react21 = require("@iconify/react");
-var import_material19 = require("@mui/material");
-var React24 = __toESM(require("react"));
-var import_react22 = require("react");
-var import_recharts9 = require("recharts");
+// 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/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/charts/StackedComparisonBarChart/StackedComparisonBarChart.tsx
+var import_Box20 = __toESM(require("@mui/material/Box"));
+var import_ButtonBase2 = __toESM(require("@mui/material/ButtonBase"));
+var import_Stack18 = __toESM(require("@mui/material/Stack"));
+var import_Typography17 = __toESM(require("@mui/material/Typography"));
+var React25 = __toESM(require("react"));
+var import_recharts9 = require("recharts");
 
-// src/components/widgets/FootFallHeatMap/footfallHeatMapDerivedStrip.ts
-var ZONE_SEGMENT_COLORS = [
-  "#E5735F",
-  "#7EB0C2",
-  "#F4C20D",
-  "#6D6ED7"
+// src/components/charts/StackedComparisonBarChart/stackedComparisonBarChartCustomization.merge.ts
+function mergeCss7(a, b) {
+  if (!b) {
+    return { ...a };
+  }
+  return { ...a, ...b };
+}
+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();
+}
+
+// src/components/charts/StackedComparisonBarChart/StackedComparisonBarChartCustomizationContext.tsx
+var React24 = __toESM(require("react"));
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var StackedComparisonBarChartCustomizationContext = React24.createContext({});
+function StackedComparisonBarChartCustomizationProvider({
+  value,
+  children
+}) {
+  const memo = React24.useMemo(() => value, [value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(StackedComparisonBarChartCustomizationContext.Provider, { value: memo, children });
+}
+function useStackedComparisonBarChartCustomization() {
+  return React24.useContext(StackedComparisonBarChartCustomizationContext);
+}
+
+// src/components/charts/StackedComparisonBarChart/StackedComparisonBarChartTooltip.tsx
+var import_jsx_runtime46 = require("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__ */ (0, import_jsx_runtime46.jsx)("div", { style: { pointerEvents: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { style: bodyStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      "div",
+      {
+        style: {
+          fontSize: titleFs,
+          fontWeight: 700,
+          color: titleColor,
+          marginBottom: 8
+        },
+        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__ */ (0, import_jsx_runtime46.jsxs)("div", { style: rowStyle, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+          "span",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              color: bucketNameColor,
+              fontWeight: 500
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { style: swatch(color), "aria-hidden": true }),
+              b.label
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { style: { color: bucketValueColor, fontWeight: 700 }, children: fmt(v) })
+      ] }, b.id);
+    }),
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      "div",
+      {
+        style: {
+          height: 1,
+          background: dividerColor,
+          margin: "10px 0 8px"
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { style: { ...rowStyle, margin: "2px 0" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { style: { color: totalStackedLabelColor, fontWeight: 700 }, children: stackedTotalLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { style: { color: totalStackedValueColor, fontWeight: 700 }, children: fmt(buckets.reduce((acc, b) => acc + (row.stacked[b.id] ?? 0), 0)) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { style: { ...rowStyle, margin: "6px 0 0" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+        "span",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            color: comparisonLabelColor,
+            fontWeight: 600
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { style: swatch(comparisonColor), "aria-hidden": true }),
+            comparisonLabel
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { style: { color: comparisonValueColor, fontWeight: 700 }, children: fmt(row.comparison) })
+    ] })
+  ] }) });
+}
+
+// src/components/charts/StackedComparisonBarChart/StackedComparisonBarChart.tsx
+var import_jsx_runtime47 = require("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__ */ (0, import_jsx_runtime47.jsxs)(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 14 14",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          "path",
+          {
+            d: "M4 2.5V11.5M4 11.5L1.5 9M4 11.5L6.5 9",
+            stroke: color,
+            strokeWidth: "1.4",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          "path",
+          {
+            d: "M10 11.5V2.5M10 2.5L7.5 5M10 2.5L12.5 5",
+            stroke: color,
+            strokeWidth: "1.4",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+function LegendDot({
+  color,
+  sizePx = 10
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    import_Box20.default,
+    {
+      sx: {
+        width: sizePx,
+        height: sizePx,
+        borderRadius: "50%",
+        bgcolor: color,
+        flexShrink: 0
+      }
+    }
+  );
+}
+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__ */ (0, import_jsx_runtime47.jsx)("g", { transform: `translate(${x},${y})`, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    "text",
+    {
+      transform: angle !== 0 ? `rotate(${angle})` : void 0,
+      textAnchor: anchor,
+      fontSize,
+      fill,
+      children: lines.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("tspan", { x: 0, dy: i === 0 ? dy0 : lineHeight, children: line }, i))
+    }
+  ) });
+}
+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__ */ (0, import_jsx_runtime47.jsx)(import_Box20.default, { sx: outerSx, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_Box20.default, { sx: innerSx, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_recharts9.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+    import_recharts9.BarChart,
+    {
+      data,
+      margin: m,
+      barCategoryGap,
+      barGap,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          import_recharts9.CartesianGrid,
+          {
+            strokeDasharray: dash,
+            vertical: false,
+            stroke: gridStroke
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          import_recharts9.XAxis,
+          {
+            dataKey: "__name",
+            tick: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+              MultilineTick,
+              {
+                fill: xFill,
+                fontSize: 12,
+                rowsByName,
+                angle: xTickAngle,
+                textAnchor: xTickAnchor
+              }
+            ),
+            tickLine: false,
+            axisLine: { stroke: gridStroke },
+            interval: 0,
+            height: xAxisHeight
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          import_recharts9.YAxis,
+          {
+            domain: yAxisDomain,
+            ticks: yAxisTicks,
+            tick: { fill: yFill, fontSize: 11 },
+            tickLine: false,
+            axisLine: false,
+            width: yWidth,
+            tickFormatter: tickFmt
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          import_recharts9.Tooltip,
+          {
+            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__ */ (0, import_jsx_runtime47.jsx)(import_jsx_runtime47.Fragment, { children: custom });
+              }
+              return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                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__ */ (0, import_jsx_runtime47.jsx)(
+            import_recharts9.Bar,
+            {
+              dataKey: STACK_KEY(b.id),
+              name: b.label,
+              stackId: "stacked",
+              fill: color,
+              barSize: stackedSize,
+              isAnimationActive: false,
+              radius
+            },
+            b.id
+          );
+        }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          import_recharts9.Bar,
+          {
+            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__ */ (0, import_jsx_runtime47.jsx)(ChartEmptyState, { minHeight: 360, ...emptyStatePlaceholderProps });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(StackedComparisonBarChartCustomizationProvider, { value: customization ?? {}, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_Box20.default, { sx: frameSx, children: [
+    showSubHeadingRow ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+      import_Stack18.default,
+      {
+        direction: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 2,
+        flexWrap: "wrap",
+        sx: { mb: 1 },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_Stack18.default, { direction: "row", alignItems: "center", spacing: 1, children: [
+            subHeading ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_Typography17.default, { sx: subHeadingSx, children: subHeading }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", {}),
+            showSortToggle ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+              import_ButtonBase2.default,
+              {
+                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__ */ (0, import_jsx_runtime47.jsx)(SortIcon, { color: "#5B6DEC" })
+              }
+            ) : null
+          ] }),
+          showHeaderLegend ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+            import_Stack18.default,
+            {
+              direction: "row",
+              alignItems: "center",
+              spacing: 1.5,
+              sx: legendSx,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_Stack18.default, { direction: "row", alignItems: "center", spacing: 0.75, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(LegendDot, { color: legendStackDot, sizePx: legendDotSize }),
+                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                    import_Typography17.default,
+                    {
+                      sx: mergeSx4(
+                        {
+                          fontWeight: 700,
+                          fontSize: "0.85rem",
+                          color: legendStackDot
+                        },
+                        customization?.header?.legendLabelSx
+                      ),
+                      children: stackedLegendLabel
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                  import_Box20.default,
+                  {
+                    sx: {
+                      width: "1px",
+                      height: 18,
+                      bgcolor: legendDividerColor
+                    }
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_Stack18.default, { direction: "row", alignItems: "center", spacing: 0.75, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                    LegendDot,
+                    {
+                      color: legendComparisonDot,
+                      sizePx: legendDotSize
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                    import_Typography17.default,
+                    {
+                      sx: mergeSx4(
+                        {
+                          fontWeight: 700,
+                          fontSize: "0.85rem",
+                          color: legendComparisonDot
+                        },
+                        customization?.header?.legendLabelSx
+                      ),
+                      children: comparisonLegendLabel
+                    }
+                  )
+                ] })
+              ]
+            }
+          ) : null
+        ]
+      }
+    ) : null,
+    showSubHeadingDivider ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_Box20.default, { sx: subHeadingDividerSx }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      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
+var import_Box21 = __toESM(require("@mui/material/Box"));
+var import_Card3 = __toESM(require("@mui/material/Card"));
+var import_CardContent3 = __toESM(require("@mui/material/CardContent"));
+var import_Stack19 = __toESM(require("@mui/material/Stack"));
+var import_Typography18 = __toESM(require("@mui/material/Typography"));
+var import_jsx_runtime48 = require("react/jsx-runtime");
+function LegendSquare({
+  color,
+  size = 12
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    import_Box21.default,
+    {
+      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__ */ (0, import_jsx_runtime48.jsx)(import_Card3.default, { elevation: customization?.rootCard?.elevation ?? 0, sx: rootSx, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_CardContent3.default, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_Stack19.default, { spacing: 1.5, sx: { width: "100%" }, children: [
+    showOuterHeader ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+      import_Stack19.default,
+      {
+        direction: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 2,
+        flexWrap: "wrap",
+        children: [
+          title ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_Typography18.default, { sx: titleSx, children: title }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            import_Stack19.default,
+            {
+              direction: "row",
+              alignItems: "center",
+              spacing: 1.5,
+              sx: { flexShrink: 0 },
+              children: resolvedInfo ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ChartWidgetHeaderSeparator, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                  ChartWidgetInfoButton,
+                  {
+                    popover: resolvedInfo,
+                    ariaLabel: "Store performance by assist information"
+                  }
+                )
+              ] }) : null
+            }
+          )
+        ]
+      }
+    ) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      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__ */ (0, import_jsx_runtime48.jsxs)(import_Box21.default, { sx: bottomLegendSx, children: [
+      buckets.map((b, i) => {
+        const color = b.color ?? bucketColors[i] ?? "#94A3B8";
+        return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+          import_Stack19.default,
+          {
+            direction: "row",
+            alignItems: "center",
+            spacing: 0.75,
+            sx: { mr: 2 },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(LegendSquare, { color, size: bottomSwatch }),
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                import_Typography18.default,
+                {
+                  sx: {
+                    fontSize: bottomLegendFs,
+                    color: bottomLegendColor,
+                    fontWeight: 500
+                  },
+                  children: b.label
+                }
+              )
+            ]
+          },
+          b.id
+        );
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        import_Box21.default,
+        {
+          sx: {
+            width: "1px",
+            height: 14,
+            bgcolor: bottomLegendDividerColor,
+            mx: 1
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+        import_Stack19.default,
+        {
+          direction: "row",
+          alignItems: "center",
+          spacing: 0.75,
+          sx: { mr: 2 },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(LegendSquare, { color: comparisonColor, size: bottomSwatch }),
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+              import_Typography18.default,
+              {
+                sx: {
+                  fontSize: bottomLegendFs,
+                  color: bottomLegendColor,
+                  fontWeight: 500
+                },
+                children: unattendedBottomLegendLabel
+              }
+            )
+          ]
+        }
+      )
+    ] }) : null
+  ] }) }) });
+}
+
+// src/components/widgets/FootFallHeatMap/FootFallHeatMapView.tsx
+var import_react21 = require("@iconify/react");
+var import_material19 = require("@mui/material");
+var React26 = __toESM(require("react"));
+var import_react22 = require("react");
+var import_recharts10 = require("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",
@@ -12431,7 +13444,8 @@ function rowFromHeuristicLabel(zoneName, total) {
   }));
   return { id, label: zoneName, value: a + b + c + d, segments };
 }
-function deriveFootfallHeatMapKpiStrip(activeZone, childTiles, buildBarRow) {
+function deriveFootfallHeatMapKpiStrip(activeZone, childTiles, buildBarRow, options) {
+  const includeZeroValueRows = options?.includeZeroValueRows ?? false;
   const buildRow = (node, role, total, fallback) => {
     if (buildBarRow) {
       const custom = buildBarRow({ node, activeZone, role, total });
@@ -12441,7 +13455,7 @@ function deriveFootfallHeatMapKpiStrip(activeZone, childTiles, buildBarRow) {
   };
   if (activeZone) {
     const childRowsSource = (activeZone.list ?? []).filter(
-      (n) => parseVisitorCount(n.overallData?.count) > 0
+      (n) => includeZeroValueRows ? true : parseVisitorCount(n.overallData?.count) > 0
     );
     if (childRowsSource.length > 0) {
       const items = childRowsSource.map((node) => {
@@ -12794,7 +13808,7 @@ function getNestedList(payload) {
 }
 
 // src/components/widgets/FootFallHeatMap/FootFallHeatMapView.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 function toDisplayNumber(value) {
   if (!Number.isFinite(value)) return "0";
   return new Intl.NumberFormat("en-IN").format(value);
@@ -12813,7 +13827,7 @@ function InlineStatCard({
   sx,
   iconColor = "#1565C0"
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     import_material19.Paper,
     {
       elevation: 0,
@@ -12829,8 +13843,8 @@ function InlineStatCard({
         },
         ...sx ? [sx] : []
       ],
-      children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material19.Stack, { direction: "row", alignItems: "center", spacing: 1.5, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_material19.Stack, { direction: "row", alignItems: "center", spacing: 1.5, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
           import_react21.Icon,
           {
             icon,
@@ -12840,8 +13854,8 @@ function InlineStatCard({
             style: { flexShrink: 0 }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material19.Stack, { spacing: 0.15, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_material19.Stack, { spacing: 0.15, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             import_material19.Typography,
             {
               variant: "body2",
@@ -12849,7 +13863,7 @@ function InlineStatCard({
               children: title
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             import_material19.Typography,
             {
               variant: "h6",
@@ -12879,8 +13893,8 @@ function InlineSegmentStrip({
   const barHeight = presentation?.barHeight ?? 12;
   const trackInsetPx = presentation?.trackInsetPx ?? 3;
   const trackBg = presentation?.trackBackgroundColor ?? "#ECEFF3";
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material19.Stack, { spacing: 0.75, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_material19.Stack, { spacing: 0.75, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
       import_material19.Stack,
       {
         direction: "row",
@@ -12888,7 +13902,7 @@ function InlineSegmentStrip({
         justifyContent: "space-between",
         gap: 1,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             import_material19.Typography,
             {
               variant: "subtitle2",
@@ -12899,7 +13913,7 @@ function InlineSegmentStrip({
               children: item.label
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             import_material19.Typography,
             {
               variant: "body2",
@@ -12913,7 +13927,7 @@ function InlineSegmentStrip({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       import_material19.Box,
       {
         sx: {
@@ -12931,7 +13945,7 @@ function InlineSegmentStrip({
           const widthPercent = total > 0 ? segment.value / total * filledPercent : 0;
           const isLast = idx === lastIdx;
           const fill = resolveSegmentFill(presentation, idx, segment.color);
-          return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             import_material19.Tooltip,
             {
               title: (() => {
@@ -12944,7 +13958,7 @@ function InlineSegmentStrip({
                   });
                   return custom == null ? "" : custom;
                 }
-                return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                   InlineSegmentTooltipCard,
                   {
                     segment,
@@ -12959,7 +13973,7 @@ function InlineSegmentStrip({
                   sx: inlineSegmentTooltipPopperSx
                 }
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                 import_material19.Box,
                 {
                   sx: {
@@ -13004,9 +14018,9 @@ function InlineSegmentTooltipCard({
   cardSx
 }) {
   const tooltipSurfaceSx = cardSx ? [inlineSegmentTooltipCardSx, cardSx] : inlineSegmentTooltipCardSx;
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material19.Box, { sx: tooltipSurfaceSx, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material19.Box, { sx: { height: 3, bgcolor: "grey.200", width: "100%" } }),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_material19.Box, { sx: tooltipSurfaceSx, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_material19.Box, { sx: { height: 3, bgcolor: "grey.200", width: "100%" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
       import_material19.Box,
       {
         sx: {
@@ -13019,7 +14033,7 @@ function InlineSegmentTooltipCard({
           py: 1.25
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             import_material19.Box,
             {
               component: "span",
@@ -13033,7 +14047,7 @@ function InlineSegmentTooltipCard({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             import_material19.Typography,
             {
               component: "span",
@@ -13046,7 +14060,7 @@ function InlineSegmentTooltipCard({
               children: segment.label
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             import_material19.Typography,
             {
               component: "span",
@@ -13059,7 +14073,7 @@ function InlineSegmentTooltipCard({
               children: " : "
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             import_material19.Typography,
             {
               component: "span",
@@ -13090,7 +14104,7 @@ function FootfallHeatMapKpiRankedBlock({
   const statIcon = presentation?.statCardIconColor ?? "#1565C0";
   const customSummary = presentation?.summaryCards?.(summaryKpis);
   const useCustomSummary = customSummary !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
     import_material19.Stack,
     {
       spacing: 2,
@@ -13100,7 +14114,7 @@ function FootfallHeatMapKpiRankedBlock({
         ...presentation?.kpiContainerSx ? [presentation.kpiContainerSx] : []
       ],
       children: [
-        useCustomSummary && customSummary.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        useCustomSummary && customSummary.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
           import_material19.Stack,
           {
             direction: "row",
@@ -13108,7 +14122,7 @@ function FootfallHeatMapKpiRankedBlock({
             flexWrap: "wrap",
             useFlexGap: true,
             sx: presentation?.summaryRowSx ? [presentation.summaryRowSx] : void 0,
-            children: useCustomSummary ? customSummary.map((card) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            children: useCustomSummary ? customSummary.map((card) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
               InlineStatCard,
               {
                 icon: card.icon ?? "mdi:chart-box-outline",
@@ -13121,7 +14135,7 @@ function FootfallHeatMapKpiRankedBlock({
               },
               card.id
             )) : [
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                 InlineStatCard,
                 {
                   icon: "mdi:store-marker-outline",
@@ -13132,7 +14146,7 @@ function FootfallHeatMapKpiRankedBlock({
                 },
                 "default-stores"
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                 InlineStatCard,
                 {
                   icon: "fluent:people-community-16-filled",
@@ -13146,7 +14160,7 @@ function FootfallHeatMapKpiRankedBlock({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
           import_material19.Stack,
           {
             spacing: 1.25,
@@ -13154,7 +14168,7 @@ function FootfallHeatMapKpiRankedBlock({
               { pt: 0.5, pb: 1 },
               ...presentation?.rankedListStackSx ? [presentation.rankedListStackSx] : []
             ],
-            children: rankedBarList.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            children: rankedBarList.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
               InlineSegmentStrip,
               {
                 item,
@@ -13384,7 +14398,8 @@ function FootFallHeatMapView({
     return deriveFootfallHeatMapKpiStrip(
       activeZoneForStrip,
       data.current ?? [],
-      kpiStripPresentation?.buildBarRow
+      kpiStripPresentation?.buildBarRow,
+      { includeZeroValueRows: kpiStripPresentation?.includeZeroValueRows }
     );
   }, [
     isLoading,
@@ -13392,7 +14407,8 @@ function FootFallHeatMapView({
     initialData,
     trackingDetails,
     data,
-    kpiStripPresentation?.buildBarRow
+    kpiStripPresentation?.buildBarRow,
+    kpiStripPresentation?.includeZeroValueRows
   ]);
   const formatPercentage = (value) => {
     if (typeof value !== "number") return "0%";
@@ -13474,7 +14490,7 @@ function FootFallHeatMapView({
     );
     const dwellIconColor = resolveIconColor(iconColorProp, tileColor, "dwell");
     const p = inner;
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       "foreignObject",
       {
         x,
@@ -13482,7 +14498,7 @@ function FootFallHeatMapView({
         width,
         height,
         style: { borderRadius: "12px", overflow: "hidden" },
-        children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
           import_material19.Stack,
           {
             onClick: handleClick,
@@ -13513,7 +14529,7 @@ function FootFallHeatMapView({
               }
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
                 import_material19.Stack,
                 {
                   direction: isSmall ? "row" : "column",
@@ -13525,7 +14541,7 @@ function FootFallHeatMapView({
                     mb: isSmall ? 0.5 : 1
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                       import_material19.Typography,
                       {
                         sx: {
@@ -13548,7 +14564,7 @@ function FootFallHeatMapView({
                         children: name
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                       import_material19.Typography,
                       {
                         sx: {
@@ -13563,7 +14579,7 @@ function FootFallHeatMapView({
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
                 import_material19.Stack,
                 {
                   direction: "row",
@@ -13577,7 +14593,7 @@ function FootFallHeatMapView({
                     ...tileMetrics?.metricsRowStackSx != null ? [tileMetrics.metricsRowStackSx] : []
                   ],
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
                       import_material19.Stack,
                       {
                         direction: "row",
@@ -13595,7 +14611,7 @@ function FootFallHeatMapView({
                           ...tileMetrics?.metricPillStackSx != null ? [tileMetrics.metricPillStackSx] : []
                         ],
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                             import_material19.Box,
                             {
                               sx: [
@@ -13608,7 +14624,7 @@ function FootFallHeatMapView({
                                 },
                                 ...tileMetrics?.metricPillIconBoxSx != null ? [tileMetrics.metricPillIconBoxSx] : []
                               ],
-                              children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                              children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                                 import_react21.Icon,
                                 {
                                   icon: icons.visitors,
@@ -13618,7 +14634,7 @@ function FootFallHeatMapView({
                               )
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                             import_material19.Typography,
                             {
                               sx: [
@@ -13636,7 +14652,7 @@ function FootFallHeatMapView({
                         ]
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
                       import_material19.Stack,
                       {
                         direction: "row",
@@ -13654,7 +14670,7 @@ function FootFallHeatMapView({
                           ...tileMetrics?.metricPillStackSx != null ? [tileMetrics.metricPillStackSx] : []
                         ],
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                             import_material19.Box,
                             {
                               sx: [
@@ -13667,7 +14683,7 @@ function FootFallHeatMapView({
                                 },
                                 ...tileMetrics?.metricPillIconBoxSx != null ? [tileMetrics.metricPillIconBoxSx] : []
                               ],
-                              children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                              children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                                 import_react21.Icon,
                                 {
                                   icon: icons.dwell,
@@ -13677,7 +14693,7 @@ function FootFallHeatMapView({
                               )
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                             import_material19.Typography,
                             {
                               sx: [
@@ -13720,7 +14736,7 @@ 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__ */ (0, import_jsx_runtime45.jsx)(import_material19.Stack, { direction: "row", alignItems: "baseline", flexWrap: "wrap", gap: 1.5, children: breadcrumbSegments.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_material19.Stack, { direction: "row", alignItems: "baseline", flexWrap: "wrap", gap: 1.5, children: breadcrumbSegments.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       import_material19.Typography,
       {
         component: "span",
@@ -13734,9 +14750,9 @@ function FootFallHeatMapView({
         color: textColor,
         children: brandLabel
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
-      breadcrumbSegments.map((seg, i) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(React24.Fragment, { children: [
-        i > 0 ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
+      breadcrumbSegments.map((seg, i) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(React26.Fragment, { children: [
+        i > 0 ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
           import_material19.Typography,
           {
             component: "span",
@@ -13747,7 +14763,7 @@ function FootFallHeatMapView({
             children: "/"
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
           import_material19.Typography,
           {
             component: "span",
@@ -13763,8 +14779,8 @@ function FootFallHeatMapView({
           }
         )
       ] }, `${seg}-${i}`)),
-      brandLabel ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      brandLabel ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
           import_material19.Typography,
           {
             component: "span",
@@ -13774,7 +14790,7 @@ function FootFallHeatMapView({
             children: "/"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
           import_material19.Typography,
           {
             component: "span",
@@ -13794,10 +14810,10 @@ function FootFallHeatMapView({
   };
   const is500Error = error !== null && error !== void 0 && typeof error === "object" && "status" in error && error.status === 500;
   if (is500Error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material19.Box, { sx: { p: 4, textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material19.Typography, { color: "error", children: "Something went wrong (500). Try again later." }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_material19.Box, { sx: { p: 4, textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_material19.Typography, { color: "error", children: "Something went wrong (500). Try again later." }) });
   }
   if (isLoading || loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       import_material19.Skeleton,
       {
         variant: "rectangular",
@@ -13838,8 +14854,8 @@ function FootFallHeatMapView({
     "#888888",
     "header"
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material19.Stack, { width: "100%", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_material19.Stack, { width: "100%", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
       import_material19.Box,
       {
         sx: {
@@ -13851,16 +14867,16 @@ function FootFallHeatMapView({
           gap: 1
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material19.Typography, { variant: "h6", fontWeight: 700, children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material19.Stack, { direction: "row", alignItems: "center", gap: 1, children: [
-            isFetching ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material19.Typography, { variant: "caption", color: "text.secondary", children: "Updating\u2026" }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material19.Tooltip, { title: infoTooltip, arrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_material19.Typography, { variant: "h6", fontWeight: 700, children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_material19.Stack, { direction: "row", alignItems: "center", gap: 1, children: [
+            isFetching ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_material19.Typography, { variant: "caption", color: "text.secondary", children: "Updating\u2026" }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_material19.Tooltip, { title: infoTooltip, arrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
               import_material19.IconButton,
               {
                 size: "small",
                 "aria-label": "Zone performance info",
                 edge: "end",
-                children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                   import_react21.Icon,
                   {
                     icon: icons.headerInfo,
@@ -13875,7 +14891,7 @@ function FootFallHeatMapView({
         ]
       }
     ),
-    data?.previous?.length > 0 && headerData ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+    data?.previous?.length > 0 && headerData ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
       import_material19.Stack,
       {
         direction: "row",
@@ -13890,13 +14906,13 @@ function FootFallHeatMapView({
           backgroundColor: zoneBarColor
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material19.Stack, { direction: "row", alignItems: "center", spacing: 1, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_material19.Stack, { direction: "row", alignItems: "center", spacing: 1, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
               import_material19.Button,
               {
                 size: "small",
                 onClick: handleClose,
-                startIcon: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                startIcon: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                   import_react21.Icon,
                   {
                     icon: "mdi:chevron-left",
@@ -13916,9 +14932,9 @@ function FootFallHeatMapView({
                 children: "Back"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(LabelTag, { textColor: zoneBarHeaderFg })
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(LabelTag, { textColor: zoneBarHeaderFg })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
             import_material19.Typography,
             {
               variant: "h6",
@@ -13933,7 +14949,7 @@ function FootFallHeatMapView({
         ]
       }
     ) : null,
-    isDrilledIntoZone && showKpiStrip && derivedKpiStrip ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    isDrilledIntoZone && showKpiStrip && derivedKpiStrip ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       FootfallHeatMapKpiRankedBlock,
       {
         strip: derivedKpiStrip,
@@ -13950,7 +14966,7 @@ function FootFallHeatMapView({
         }
       }
     ) : null,
-    showLeafDetailsBody ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    showLeafDetailsBody ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       import_material19.Box,
       {
         sx: [
@@ -13966,8 +14982,8 @@ function FootFallHeatMapView({
         ]
       }
     ) : null,
-    showLeaf ? null : showChart ? hideTreemapForTerminalCardWithKpi ? null : hasTreemapData ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_recharts9.ResponsiveContainer, { width: "100%", height: treemapHeight, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-      import_recharts9.Treemap,
+    showLeaf ? null : showChart ? hideTreemapForTerminalCardWithKpi ? null : hasTreemapData ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_recharts10.ResponsiveContainer, { width: "100%", height: treemapHeight, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      import_recharts10.Treemap,
       {
         data: data?.current ?? [],
         dataKey: "value",
@@ -13979,22 +14995,22 @@ function FootFallHeatMapView({
         animationDuration: 0,
         style: { borderRadius: "12px" }
       }
-    ) }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    ) }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       ChartEmptyState,
       {
         minHeight: treemapHeight,
         ...emptyStatePlaceholderProps
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ChartEmptyState, { minHeight: 400, ...emptyStatePlaceholderProps })
+    ) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ChartEmptyState, { minHeight: 400, ...emptyStatePlaceholderProps })
   ] });
 }
 
 // src/components/widgets/FootFallHeatMap/ZoneWiseKpiCards.tsx
 var import_Grid2 = __toESM(require("@mui/material/Grid"));
 var import_Paper3 = __toESM(require("@mui/material/Paper"));
-var import_Stack18 = __toESM(require("@mui/material/Stack"));
-var import_Typography17 = __toESM(require("@mui/material/Typography"));
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_Stack20 = __toESM(require("@mui/material/Stack"));
+var import_Typography19 = __toESM(require("@mui/material/Typography"));
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function metricsToRows(metrics) {
   return [
     { id: 1, title: "Overall Visits", value: metrics.overall_visits ?? 0 },
@@ -14032,7 +15048,7 @@ function metricsToRows(metrics) {
 }
 var ZoneWiseKpiCards = ({ metrics }) => {
   const rows = metricsToRows(metrics);
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_Grid2.default, { container: true, spacing: 3, sx: { marginTop: "10px", paddingX: "6px" }, children: rows.map((item) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_Grid2.default, { container: true, spacing: 3, sx: { marginTop: "10px", paddingX: "6px" }, children: rows.map((item) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     import_Grid2.default,
     {
       size: {
@@ -14040,7 +15056,7 @@ var ZoneWiseKpiCards = ({ metrics }) => {
         sm: 6,
         md: 3
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
         import_Paper3.default,
         {
           elevation: 0,
@@ -14052,8 +15068,8 @@ var ZoneWiseKpiCards = ({ metrics }) => {
             height: "100%"
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-              import_Typography17.default,
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+              import_Typography19.default,
               {
                 variant: "caption",
                 color: "text.secondary",
@@ -14061,7 +15077,7 @@ var ZoneWiseKpiCards = ({ metrics }) => {
                 children: item.title
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_Stack18.default, { mt: 1, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_Typography17.default, { variant: "h6", fontWeight: 700, children: item.value }) })
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_Stack20.default, { mt: 1, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_Typography19.default, { variant: "h6", fontWeight: 700, children: item.value }) })
           ]
         }
       )
@@ -14120,32 +15136,32 @@ var peakBillingHoursMockSeriesByTabId = {
 };
 
 // src/components/widgets/PeakBillingHours/PeakBillingHours.tsx
-var import_Box20 = __toESM(require("@mui/material/Box"));
-var import_Card3 = __toESM(require("@mui/material/Card"));
-var import_CardContent3 = __toESM(require("@mui/material/CardContent"));
+var import_Box22 = __toESM(require("@mui/material/Box"));
+var import_Card4 = __toESM(require("@mui/material/Card"));
+var import_CardContent4 = __toESM(require("@mui/material/CardContent"));
 var import_Skeleton7 = __toESM(require("@mui/material/Skeleton"));
-var import_Stack19 = __toESM(require("@mui/material/Stack"));
-var import_Typography18 = __toESM(require("@mui/material/Typography"));
-var React26 = __toESM(require("react"));
-var import_recharts10 = require("recharts");
+var import_Stack21 = __toESM(require("@mui/material/Stack"));
+var import_Typography20 = __toESM(require("@mui/material/Typography"));
+var React28 = __toESM(require("react"));
+var import_recharts11 = require("recharts");
 
 // src/components/widgets/PeakBillingHours/PeakBillingHoursCustomizationContext.tsx
-var React25 = __toESM(require("react"));
-var import_jsx_runtime47 = require("react/jsx-runtime");
-var PeakBillingHoursCustomizationContext = React25.createContext({});
+var React27 = __toESM(require("react"));
+var import_jsx_runtime51 = require("react/jsx-runtime");
+var PeakBillingHoursCustomizationContext = React27.createContext({});
 function PeakBillingHoursCustomizationProvider({
   value,
   children
 }) {
-  const memo = React25.useMemo(() => value, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PeakBillingHoursCustomizationContext.Provider, { value: memo, children });
+  const memo = React27.useMemo(() => value, [value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(PeakBillingHoursCustomizationContext.Provider, { value: memo, children });
 }
 function usePeakBillingHoursCustomization() {
-  return React25.useContext(PeakBillingHoursCustomizationContext);
+  return React27.useContext(PeakBillingHoursCustomizationContext);
 }
 
 // src/components/widgets/PeakBillingHours/PeakBillingHoursTooltip.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 function formatTooltipValue2(n) {
   return new Intl.NumberFormat(void 0, { maximumFractionDigits: 0 }).format(
     Math.round(n)
@@ -14192,7 +15208,7 @@ function PeakBillingHoursTooltip(props) {
     },
     tt?.bodyStyle
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     "div",
     {
       style: {
@@ -14200,7 +15216,7 @@ function PeakBillingHoursTooltip(props) {
         minWidth: 160,
         maxWidth: 280
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
         "div",
         {
           style: {
@@ -14211,7 +15227,7 @@ function PeakBillingHoursTooltip(props) {
             boxShadow: shadow
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
               "div",
               {
                 style: {
@@ -14222,14 +15238,14 @@ function PeakBillingHoursTooltip(props) {
                 "aria-hidden": true
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { style: bodyStyle, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { style: rowStyle, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { style: { color: prefixCol, fontWeight: prefixFw }, children: dateP }),
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { style: { color: valueCol, fontWeight: valueFw }, children: labelText })
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { style: bodyStyle, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { style: rowStyle, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { style: { color: prefixCol, fontWeight: prefixFw }, children: dateP }),
+                /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { style: { color: valueCol, fontWeight: valueFw }, children: labelText })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { style: { ...rowStyle, marginTop: gap }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { style: { color: prefixCol, fontWeight: prefixFw }, children: totalP }),
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { style: { color: valueCol, fontWeight: valueFw }, children: formatTooltipValue2(num) })
+              /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { style: { ...rowStyle, marginTop: gap }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { style: { color: prefixCol, fontWeight: prefixFw }, children: totalP }),
+                /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { style: { color: valueCol, fontWeight: valueFw }, children: formatTooltipValue2(num) })
               ] })
             ] })
           ]
@@ -14240,7 +15256,7 @@ function PeakBillingHoursTooltip(props) {
 }
 
 // src/components/widgets/PeakBillingHours/PeakBillingHours.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var OLY_DEFAULT_COMPOSED_CHART_CHROME6 = {
   cartesianGridStroke: "#D3D6DF",
   xAxisLineStroke: "#7566FC",
@@ -14266,7 +15282,7 @@ function PeakBarTopLabel(props) {
   const cx = nx + nw / 2;
   const cy = ny - 6;
   const isHorizontal = angle === 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     "text",
     {
       x: cx,
@@ -14280,7 +15296,7 @@ function PeakBarTopLabel(props) {
     }
   );
 }
-function BarPlot({
+function BarPlot2({
   data,
   yAxisDomain,
   yAxisTicks,
@@ -14319,24 +15335,24 @@ function BarPlot({
     barRadius,
     barRadius
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_Box20.default, { sx: { width: "100%", height, mt: 0.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_recharts10.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
-    import_recharts10.BarChart,
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_Box22.default, { sx: { width: "100%", height, mt: 0.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_recharts11.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+    import_recharts11.BarChart,
     {
       data,
       margin: m,
       barCategoryGap: categoryGap,
       barGap,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-          import_recharts10.CartesianGrid,
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+          import_recharts11.CartesianGrid,
           {
             strokeDasharray: dash,
             vertical: false,
             stroke: gridStroke
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-          import_recharts10.XAxis,
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+          import_recharts11.XAxis,
           {
             dataKey: "label",
             dx: xAxisTickDx,
@@ -14349,8 +15365,8 @@ function BarPlot({
             height: 36
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-          import_recharts10.YAxis,
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+          import_recharts11.YAxis,
           {
             domain: yAxisDomain,
             ticks: yAxisTicks,
@@ -14361,8 +15377,8 @@ function BarPlot({
             width: yWidth
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-          import_recharts10.Tooltip,
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+          import_recharts11.Tooltip,
           {
             content: (tooltipProps) => {
               if (renderTooltip) {
@@ -14371,9 +15387,9 @@ function BarPlot({
                   data,
                   activeTabId
                 });
-                return customTooltip == null ? null : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx_runtime49.Fragment, { children: customTooltip });
+                return customTooltip == null ? null : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_jsx_runtime53.Fragment, { children: customTooltip });
               }
-              return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(PeakBillingHoursTooltip, { ...tooltipProps });
+              return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(PeakBillingHoursTooltip, { ...tooltipProps });
             },
             cursor: {
               fill: hoverBandFill,
@@ -14383,8 +15399,8 @@ function BarPlot({
             allowEscapeViewBox: { x: false, y: true }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-          import_recharts10.Bar,
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+          import_recharts11.Bar,
           {
             dataKey: "value",
             name: "Visits",
@@ -14392,11 +15408,11 @@ function BarPlot({
             radius: radiusTuple,
             isAnimationActive: false,
             maxBarSize: 48,
-            children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-              import_recharts10.LabelList,
+            children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+              import_recharts11.LabelList,
               {
                 dataKey: "value",
-                content: (props) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                content: (props) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                   PeakBarTopLabel,
                   {
                     ...props,
@@ -14436,7 +15452,7 @@ function PeakBillingHours({
   emptyStatePlaceholderProps,
   customization
 }) {
-  const chartData = React26.useMemo(() => {
+  const chartData = React28.useMemo(() => {
     if (seriesByTabId) {
       return seriesByTabId[activeTabId] ?? [];
     }
@@ -14471,9 +15487,9 @@ function PeakBillingHours({
     },
     customization?.header?.subtitleSx
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(PeakBillingHoursCustomizationProvider, { value: customization ?? {}, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_Card3.default, { elevation: customization?.rootCard?.elevation ?? 0, sx: rootSx, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_CardContent3.default, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_Stack19.default, { spacing: 1.75, sx: { width: "100%" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
-      import_Stack19.default,
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(PeakBillingHoursCustomizationProvider, { value: customization ?? {}, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_Card4.default, { elevation: customization?.rootCard?.elevation ?? 0, sx: rootSx, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_CardContent4.default, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_Stack21.default, { spacing: 1.75, sx: { width: "100%" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+      import_Stack21.default,
       {
         direction: "row",
         alignItems: "flex-start",
@@ -14481,20 +15497,20 @@ function PeakBillingHours({
         gap: 2,
         flexWrap: "wrap",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_Box20.default, { component: "div", sx: { minWidth: 0 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_Typography18.default, { component: "span", sx: titleSx, children: title }),
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_Typography18.default, { component: "span", sx: subtitleSx, children: subtitle })
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_Box22.default, { component: "div", sx: { minWidth: 0 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_Typography20.default, { component: "span", sx: titleSx, children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_Typography20.default, { component: "span", sx: subtitleSx, children: subtitle })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-            import_Stack19.default,
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+            import_Stack21.default,
             {
               direction: "row",
               alignItems: "center",
               spacing: 1.5,
               sx: { flexShrink: 0 },
-              children: resolvedInfo ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ChartWidgetHeaderSeparator, {}),
-                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+              children: resolvedInfo ? /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ChartWidgetHeaderSeparator, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                   ChartWidgetInfoButton,
                   {
                     popover: resolvedInfo,
@@ -14507,7 +15523,7 @@ function PeakBillingHours({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       ChartWidgetSegmentedTabs,
       {
         tabs,
@@ -14527,8 +15543,8 @@ function PeakBillingHours({
         inactiveTabFontWeight: st?.inactiveTabFontWeight ?? 600
       }
     ),
-    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_Skeleton7.default, { variant: "rounded", width: "100%", height: 320 }) : chartData.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-      BarPlot,
+    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_Skeleton7.default, { variant: "rounded", width: "100%", height: 320 }) : chartData.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+      BarPlot2,
       {
         data: chartData,
         yAxisDomain,
@@ -14542,7 +15558,7 @@ function PeakBillingHours({
         xAxisTickStyle,
         barValueLabelAngle
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       ChartEmptyState,
       {
         minHeight: 320,
@@ -14553,10 +15569,10 @@ function PeakBillingHours({
 }
 
 // src/components/widgets/CustomerJourneyAnalysis/CustomerJourneyAnalysis.tsx
-var import_Box21 = __toESM(require("@mui/material/Box"));
-var import_Stack20 = __toESM(require("@mui/material/Stack"));
-var import_Typography19 = __toESM(require("@mui/material/Typography"));
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_Box23 = __toESM(require("@mui/material/Box"));
+var import_Stack22 = __toESM(require("@mui/material/Stack"));
+var import_Typography21 = __toESM(require("@mui/material/Typography"));
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var DEFAULT_WALK_INS_BG = "#5B8DEF";
 var DEFAULT_TRIAL_VISITS_BG = "#F59E42";
 var DEFAULT_BILLING_VISITS_BG = "#6EBE7A";
@@ -14604,7 +15620,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] : []
   );
@@ -14811,17 +15827,17 @@ function CustomerJourneyAnalysis({
     ...Array.isArray(metricsSx) ? metricsSx : metricsSx ? [metricsSx] : []
   ];
   const bodyDirection = { xs: "column", [bodyBreakpoint]: "row" };
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_Box21.default, { sx: outerSx, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_Stack20.default, { spacing: 2, children: [
-    !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
-      import_Stack20.default,
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_Box23.default, { sx: outerSx, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_Stack22.default, { spacing: 2, children: [
+    !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+      import_Stack22.default,
       {
         direction: "row",
         alignItems: "flex-start",
         justifyContent: "space-between",
         gap: 2,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-            import_Typography19.default,
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+            import_Typography21.default,
             {
               component: "h2",
               variant: "h6",
@@ -14834,8 +15850,8 @@ function CustomerJourneyAnalysis({
               children: title
             }
           ),
-          headerActions != null ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-            import_Box21.default,
+          headerActions != null ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+            import_Box23.default,
             {
               sx: {
                 flexShrink: 0,
@@ -14849,9 +15865,9 @@ function CustomerJourneyAnalysis({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_Stack20.default, { direction: bodyDirection, spacing: bodyGap, alignItems: "stretch", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_Box21.default, { sx: stripSx, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_Box21.default, { sx: statCardsRowSx, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_Stack22.default, { direction: bodyDirection, spacing: bodyGap, alignItems: "stretch", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_Box23.default, { sx: stripSx, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_Box23.default, { sx: statCardsRowSx, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
           JourneyStatCard,
           {
             icon: wiConfig.icon,
@@ -14872,7 +15888,7 @@ function CustomerJourneyAnalysis({
             borderRadius: wiConfig.borderRadius,
             minHeight: wiConfig.minHeight,
             isLoading,
-            sx: mergeSx4(
+            sx: mergeSx5(
               {
                 flex: statCardFlexes[0],
                 borderRadius: `${statStripInnerBorderRadius} 0 0 ${statStripInnerBorderRadius}`
@@ -14881,7 +15897,7 @@ function CustomerJourneyAnalysis({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
           JourneyStatCard,
           {
             icon: tvConfig.icon,
@@ -14902,10 +15918,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__ */ (0, import_jsx_runtime50.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
           JourneyStatCard,
           {
             icon: bvConfig.icon,
@@ -14926,7 +15942,7 @@ function CustomerJourneyAnalysis({
             borderRadius: bvConfig.borderRadius,
             minHeight: bvConfig.minHeight,
             isLoading,
-            sx: mergeSx4(
+            sx: mergeSx5(
               {
                 flex: statCardFlexes[2],
                 borderRadius: `0 ${statStripInnerBorderRadius} ${statStripInnerBorderRadius} 0`
@@ -14936,8 +15952,8 @@ function CustomerJourneyAnalysis({
           }
         )
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_Box21.default, { sx: metricsBoxSx, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-        import_Box21.default,
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_Box23.default, { sx: metricsBoxSx, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        import_Box23.default,
         {
           sx: {
             display: "grid",
@@ -14970,8 +15986,8 @@ function CustomerJourneyAnalysis({
               label: avgBillingPerTrialLabel,
               value: formatAverage(avgBillingPerTrial)
             }
-          ].map(({ cfg, label, value }) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-            import_Box21.default,
+          ].map(({ cfg, label, value }) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+            import_Box23.default,
             {
               sx: {
                 bgcolor: metricsCardBg,
@@ -14980,7 +15996,7 @@ function CustomerJourneyAnalysis({
                 height: "100%",
                 minWidth: 0
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
                 JourneyMetricCard,
                 {
                   label,
@@ -15011,7 +16027,7 @@ function CustomerJourneyAnalysis({
 // src/components/FalconThemeProvider/FalconThemeProvider.tsx
 var import_CssBaseline = __toESM(require("@mui/material/CssBaseline"));
 var import_styles7 = require("@mui/material/styles");
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var lightColor = "51, 48, 60";
 var darkColor = "228, 230, 244";
 var darkPaperBg = "#2F3349";
@@ -15091,8 +16107,8 @@ var FalconThemeProvider = ({
       mixins: { toolbar: { minHeight: 64 } }
     })
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_styles7.ThemeProvider, { theme, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_CssBaseline.default, {}),
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_styles7.ThemeProvider, { theme, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_CssBaseline.default, {}),
     children
   ] });
 };
@@ -15116,6 +16132,7 @@ var FalconThemeProvider = ({
   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,
@@ -15154,6 +16171,17 @@ var FalconThemeProvider = ({
   QueueTimeBreakdownStackedBar,
   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,
@@ -15185,9 +16213,12 @@ var FalconThemeProvider = ({
   peakBillingHoursVisitsMock,
   preprocessData,
   skipSingleBranchLevels,
+  stackedComparisonMergeCss,
+  stackedComparisonMergeSx,
   toRechartsTreemapData,
   useBillingCounterAnalyticsCustomization,
   usePeakBillingHoursCustomization,
-  useQueueTimeBreakdownCustomization
+  useQueueTimeBreakdownCustomization,
+  useStackedComparisonBarChartCustomization
 });
 //# sourceMappingURL=index.js.map