@bpfdev/oly-ui 1.0.12 → 1.0.14

package/dist/index.mjs

@@ -668,7 +668,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";
@@ -696,7 +701,7 @@ function InfoPopoverPanel({
         boxShadow: panelShadow
       },
       children: /* @__PURE__ */ jsxs4(Stack2, { spacing: stackSpacing, sx: { position: "relative", zIndex: 1 }, children: [
-        /* @__PURE__ */ jsx5(
+        hasTitle && /* @__PURE__ */ jsx5(
           Typography4,
           {
             component: "h3",
@@ -709,7 +714,7 @@ function InfoPopoverPanel({
             children: content.title
           }
         ),
-        /* @__PURE__ */ jsx5(
+        hasDescription && /* @__PURE__ */ jsx5(
           Typography4,
           {
             sx: {
@@ -720,7 +725,7 @@ function InfoPopoverPanel({
             children: content.description
           }
         ),
-        /* @__PURE__ */ jsx5(
+        showHelpSection && /* @__PURE__ */ jsx5(
           Typography4,
           {
             sx: {
@@ -733,7 +738,7 @@ function InfoPopoverPanel({
             children: helpTitle
           }
         ),
-        /* @__PURE__ */ jsx5(
+        hasBullets && /* @__PURE__ */ jsx5(
           Box4,
           {
             component: "ul",
@@ -3901,7 +3906,7 @@ var FalconAuditTimeline = ({
               date: run.date,
               ordinal: run.label ?? getOrdinalStr(idx + 1),
               status: run.status === "done" ? "completed" : "upcoming",
-              onExportClick: onExportReportClick ? (e) => onExportReportClick(e, run.date) : void 0,
+              onExportClick: onExportReportClick ? (e) => onExportReportClick(e, run.date, run) : void 0,
               brandFont,
               interFont,
               completedColor,
@@ -3939,7 +3944,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,
@@ -10958,6 +10972,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";
@@ -10976,13 +10994,15 @@ function LinePlot({
       XAxis5,
       {
         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__ */ jsx39(
@@ -11270,6 +11290,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(
@@ -11289,90 +11310,102 @@ var QueueTimeBreakdownArea = ({
   }, [chartData, series]);
   const yDomain = allZero ? [0, 16e3] : [0, "auto"];
   const yTickCount = allZero ? 5 : void 0;
-  return /* @__PURE__ */ jsx41(Stack21, { justifyContent: "center", height: stackH, children: /* @__PURE__ */ jsx41(ResponsiveContainer3, { width: "100%", height: chartH, children: /* @__PURE__ */ jsxs32(AreaChart, { data: chartData, margin, children: [
-    /* @__PURE__ */ jsx41(
-      CartesianGrid6,
-      {
-        strokeDasharray: "3 3",
-        stroke: gridStroke,
-        vertical: false
-      }
-    ),
-    /* @__PURE__ */ jsx41(
-      XAxis6,
-      {
-        dataKey: "name",
-        tick: { fill: theme.palette.text.secondary, fontSize: 11 },
-        axisLine: false,
-        tickLine: false
-      }
-    ),
-    /* @__PURE__ */ jsx41(
-      YAxis6,
-      {
-        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__ */ jsx41(
-      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__ */ jsx41(
-      Tooltip9,
-      {
-        content: (tooltipProps) => {
-          if (renderTooltip) {
-            const custom = renderTooltip({
-              tooltipProps,
-              chartData,
-              series,
-              xAxis
-            });
-            return custom == null ? null : /* @__PURE__ */ jsx41(Fragment14, { children: custom });
+  return /* @__PURE__ */ jsx41(
+    Stack21,
+    {
+      justifyContent: fill ? "stretch" : "center",
+      sx: fill ? {
+        flexGrow: 1,
+        minHeight: 0,
+        height: "100%",
+        "& > *": { flex: 1, minHeight: 0 }
+      } : { height: stackH },
+      children: /* @__PURE__ */ jsx41(ResponsiveContainer3, { width: "100%", height: fill ? "100%" : chartH, children: /* @__PURE__ */ jsxs32(AreaChart, { data: chartData, margin, children: [
+        /* @__PURE__ */ jsx41(
+          CartesianGrid6,
+          {
+            strokeDasharray: "3 3",
+            stroke: gridStroke,
+            vertical: false
           }
-          const { active, payload, label } = tooltipProps;
-          return /* @__PURE__ */ jsx41(
-            QueueTimeBreakdownAreaTooltip,
-            {
-              active,
-              label,
-              payload,
-              styleOverrides: ac?.areaTooltip
+        ),
+        /* @__PURE__ */ jsx41(
+          XAxis6,
+          {
+            dataKey: "name",
+            tick: { fill: theme.palette.text.secondary, fontSize: 11 },
+            axisLine: false,
+            tickLine: false
+          }
+        ),
+        /* @__PURE__ */ jsx41(
+          YAxis6,
+          {
+            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__ */ jsx41(
+          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__ */ jsx41(
+          Tooltip9,
+          {
+            content: (tooltipProps) => {
+              if (renderTooltip) {
+                const custom = renderTooltip({
+                  tooltipProps,
+                  chartData,
+                  series,
+                  xAxis
+                });
+                return custom == null ? null : /* @__PURE__ */ jsx41(Fragment14, { children: custom });
+              }
+              const { active, payload, label } = tooltipProps;
+              return /* @__PURE__ */ jsx41(
+                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 = [
@@ -11553,10 +11586,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,
@@ -11576,8 +11609,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]);
@@ -12060,6 +12094,9 @@ function QueueTimeBreakdown({
   data,
   Donut_data,
   donutYesterdayData,
+  donutLabels,
+  areaSeries,
+  areaXAxis,
   headerImageSrc,
   headlineTotal = "14,123",
   headlineSubtitle = "Queue Time Breakdown Of All Visitors",
@@ -12084,6 +12121,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;
@@ -12101,258 +12144,1221 @@ function QueueTimeBreakdown({
     { fontWeight: 700, color: "#0f172a" },
     customization?.periodFilter?.titleSx
   );
-  return /* @__PURE__ */ jsx44(QueueTimeBreakdownCustomizationProvider, { value: customization ?? {}, children: /* @__PURE__ */ jsx44(Card3, { elevation: customization?.rootCard?.elevation ?? 0, sx: rootSx, children: /* @__PURE__ */ jsx44(CardContent2, { sx: mergeSx2(customization?.rootCard?.cardContentSx), children: /* @__PURE__ */ jsxs35(Stack24, { width: "100%", direction: "column", gap: 3, mb: 4, children: [
-    /* @__PURE__ */ jsxs35(
-      Stack24,
-      {
-        direction: "row",
-        alignItems: "center",
-        justifyContent: "space-between",
-        flexWrap: "wrap",
-        gap: 2,
-        width: "100%",
-        children: [
-          /* @__PURE__ */ jsx44(
-            Typography25,
-            {
-              variant: isSmallScreen ? "subtitle2" : "body1",
-              sx: periodTitleSx,
-              children: title
-            }
-          ),
-          /* @__PURE__ */ jsx44(
-            TimePeriodFilter,
-            {
-              selectedFilter: filter,
-              onFilterChange: setFilter,
-              infoPopover: resolvedPeriodInfoPopover
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx44(Box30, { children: /* @__PURE__ */ jsxs35(Grid, { container: true, spacing: 3, children: [
-      /* @__PURE__ */ jsxs35(Grid, { size: { md: 6, xs: 12 }, children: [
+  return /* @__PURE__ */ jsx44(QueueTimeBreakdownCustomizationProvider, { value: customization ?? {}, children: /* @__PURE__ */ jsx44(Card3, { elevation: customization?.rootCard?.elevation ?? 0, sx: rootSx, children: /* @__PURE__ */ jsx44(CardContent2, { sx: mergeSx2(customization?.rootCard?.cardContentSx), children: /* @__PURE__ */ jsxs35(
+    Stack24,
+    {
+      width: "100%",
+      direction: "column",
+      gap: 3,
+      sx: mergeSx2({ mb: 4 }, customization?.rootCard?.contentStackSx),
+      children: [
         /* @__PURE__ */ jsxs35(
           Stack24,
           {
-            gap: 1,
-            sx: mergeSx2(customization?.leftColumn?.columnStackSx),
+            direction: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+            flexWrap: "wrap",
+            gap: 2,
+            width: "100%",
             children: [
-              /* @__PURE__ */ jsx44(Stack24, { children: /* @__PURE__ */ jsxs35(
-                Stack24,
+              /* @__PURE__ */ jsx44(
+                Typography25,
                 {
-                  direction: "row",
-                  gap: 4,
-                  justifyContent: "start",
-                  alignItems: "center",
-                  children: [
-                    resolvedHeaderImageSrc ? /* @__PURE__ */ jsx44(
-                      Box30,
-                      {
-                        component: "img",
-                        src: resolvedHeaderImageSrc,
-                        alt: "",
-                        width: 52,
-                        height: 52,
-                        sx: { objectFit: "contain" }
-                      }
-                    ) : null,
-                    /* @__PURE__ */ jsxs35(Stack24, { children: [
-                      /* @__PURE__ */ jsx44(
-                        Typography25,
-                        {
-                          sx: mergeSx2(
-                            {
-                              fontSize: "20px",
-                              fontWeight: 600,
-                              color: "#222222"
-                            },
-                            customization?.header?.headlineSx
-                          ),
-                          children: headlineTotal
-                        }
-                      ),
-                      /* @__PURE__ */ jsxs35(Stack24, { direction: "row", alignItems: "center", gap: 1, children: [
-                        /* @__PURE__ */ jsx44(
-                          Typography25,
-                          {
-                            sx: mergeSx2(
-                              {
-                                fontSize: "11px",
-                                fontWeight: 400,
-                                color: "#222222"
-                              },
-                              customization?.header?.subtitleSx
-                            ),
-                            children: headlineSubtitle
-                          }
-                        ),
-                        resolvedHeadlineInfoPopover ? /* @__PURE__ */ jsx44(
-                          ChartWidgetInfoButton,
-                          {
-                            density: "compact",
-                            popover: resolvedHeadlineInfoPopover,
-                            ariaLabel: "Queue time breakdown information"
-                          }
-                        ) : null
-                      ] })
-                    ] })
-                  ]
+                  variant: isSmallScreen ? "subtitle2" : "body1",
+                  sx: periodTitleSx,
+                  children: title
                 }
-              ) }),
+              ),
               /* @__PURE__ */ jsx44(
-                Stack24,
+                TimePeriodFilter,
                 {
-                  sx: mergeSx2(customization?.leftColumn?.barRowsStackSx),
-                  children: data.map((item) => /* @__PURE__ */ jsx44(
-                    QueueTimeBreakdownStackedBar,
-                    {
-                      row: item,
-                      legendRows: legend,
-                      renderTooltip: renderStackedBarTooltip
-                    },
-                    item.name
-                  ))
+                  selectedFilter: filter,
+                  onFilterChange: setFilter,
+                  infoPopover: resolvedPeriodInfoPopover
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ jsx44(
-          Typography25,
-          {
-            sx: mergeSx2(
-              {
-                marginTop: "10px",
-                fontSize: "14px",
-                fontWeight: 500,
-                color: "#222222"
-              },
-              customization?.dataComparison?.titleSx
-            ),
-            children: dataComparisonTitle
-          }
-        ),
-        /* @__PURE__ */ jsx44(
-          Card3,
-          {
-            elevation: 0,
-            sx: mergeSx2(
-              {
-                cursor: "pointer",
-                marginTop: "10px",
-                bgcolor: "#FFFFFF",
-                border: "1px solid #E5E7EB",
-                borderRadius: 2
-              },
-              customization?.dataComparison?.cardSx
-            ),
-            children: /* @__PURE__ */ jsx44(CardContent2, { sx: { padding: "4px 8px" }, children: hasComparisonData ? /* @__PURE__ */ jsxs35(
+        /* @__PURE__ */ jsx44(Box30, { children: /* @__PURE__ */ jsxs35(Grid, { container: true, spacing: 3, children: [
+          /* @__PURE__ */ jsxs35(Grid, { size: { md: 6, xs: 12 }, children: [
+            /* @__PURE__ */ jsxs35(
               Stack24,
               {
-                direction: "row",
-                justifyContent: "space-evenly",
-                alignItems: "center",
+                gap: 1,
+                sx: mergeSx2(customization?.leftColumn?.columnStackSx),
                 children: [
-                  /* @__PURE__ */ jsx44(Stack24, { width: "50%", children: /* @__PURE__ */ jsx44(
-                    QueueTimeBreakdownDonut,
+                  /* @__PURE__ */ jsx44(Stack24, { children: /* @__PURE__ */ jsxs35(
+                    Stack24,
                     {
-                      averageData: Donut_data,
-                      chartFilter: filter,
-                      LabelName: "Today",
-                      renderTooltip: renderDonutTooltip
+                      direction: "row",
+                      gap: 4,
+                      justifyContent: "start",
+                      alignItems: "center",
+                      children: [
+                        resolvedHeaderImageSrc ? /* @__PURE__ */ jsx44(
+                          Box30,
+                          {
+                            component: "img",
+                            src: resolvedHeaderImageSrc,
+                            alt: "",
+                            width: 52,
+                            height: 52,
+                            sx: { objectFit: "contain" }
+                          }
+                        ) : null,
+                        /* @__PURE__ */ jsxs35(Stack24, { children: [
+                          /* @__PURE__ */ jsx44(
+                            Typography25,
+                            {
+                              sx: mergeSx2(
+                                {
+                                  fontSize: "20px",
+                                  fontWeight: 600,
+                                  color: "#222222"
+                                },
+                                customization?.header?.headlineSx
+                              ),
+                              children: headlineTotal
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs35(Stack24, { direction: "row", alignItems: "center", gap: 1, children: [
+                            /* @__PURE__ */ jsx44(
+                              Typography25,
+                              {
+                                sx: mergeSx2(
+                                  {
+                                    fontSize: "11px",
+                                    fontWeight: 400,
+                                    color: "#222222"
+                                  },
+                                  customization?.header?.subtitleSx
+                                ),
+                                children: headlineSubtitle
+                              }
+                            ),
+                            resolvedHeadlineInfoPopover ? /* @__PURE__ */ jsx44(
+                              ChartWidgetInfoButton,
+                              {
+                                density: "compact",
+                                popover: resolvedHeadlineInfoPopover,
+                                ariaLabel: "Queue time breakdown information"
+                              }
+                            ) : null
+                          ] })
+                        ] })
+                      ]
                     }
                   ) }),
                   /* @__PURE__ */ jsx44(
-                    Box30,
+                    Stack24,
                     {
-                      component: "span",
-                      sx: mergeSx2(
+                      sx: mergeSx2(customization?.leftColumn?.barRowsStackSx),
+                      children: data.map((item) => /* @__PURE__ */ jsx44(
+                        QueueTimeBreakdownStackedBar,
                         {
-                          height: "180px",
-                          width: "2px",
-                          backgroundColor: "#D8D9E4",
-                          display: "inline-block"
+                          row: item,
+                          legendRows: legend,
+                          renderTooltip: renderStackedBarTooltip
                         },
-                        customization?.dataComparison?.dividerSx
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ jsx44(Stack24, { width: "50%", children: /* @__PURE__ */ jsx44(
-                    QueueTimeBreakdownDonut,
-                    {
-                      averageData: yesterdayDonut,
-                      chartFilter: filter,
-                      LabelName: "Yesterday",
-                      renderTooltip: renderDonutTooltip
+                        item.name
+                      ))
                     }
-                  ) })
+                  )
                 ]
               }
-            ) : /* @__PURE__ */ jsx44(ChartEmptyState, { minHeight: 220 }) })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx44(Grid, { size: { md: 6, xs: 12 }, children: /* @__PURE__ */ jsx44(
-        Card3,
-        {
-          elevation: 0,
-          sx: mergeSx2(
-            {
-              cursor: "pointer",
-              borderRadius: "8px",
-              border: "1px solid #E5E7EB",
-              bgcolor: "#FFFFFF",
-              height: "100%"
-            },
-            customization?.areaChart?.cardSx
-          ),
-          children: /* @__PURE__ */ jsx44(
-            CardContent2,
+            ),
+            /* @__PURE__ */ jsx44(
+              Typography25,
+              {
+                sx: mergeSx2(
+                  {
+                    marginTop: "10px",
+                    fontSize: "14px",
+                    fontWeight: 500,
+                    color: "#222222"
+                  },
+                  customization?.dataComparison?.titleSx
+                ),
+                children: dataComparisonTitle
+              }
+            ),
+            /* @__PURE__ */ jsx44(
+              Card3,
+              {
+                elevation: 0,
+                sx: mergeSx2(
+                  {
+                    cursor: "pointer",
+                    marginTop: "10px",
+                    bgcolor: "#FFFFFF",
+                    border: "1px solid #E5E7EB",
+                    borderRadius: 2
+                  },
+                  customization?.dataComparison?.cardSx
+                ),
+                children: /* @__PURE__ */ jsx44(CardContent2, { sx: { padding: "4px 8px" }, children: hasComparisonData ? /* @__PURE__ */ jsxs35(
+                  Stack24,
+                  {
+                    direction: "row",
+                    justifyContent: "space-evenly",
+                    alignItems: "center",
+                    children: [
+                      /* @__PURE__ */ jsx44(Stack24, { width: "50%", children: /* @__PURE__ */ jsx44(
+                        QueueTimeBreakdownDonut,
+                        {
+                          averageData: Donut_data,
+                          labels: donutLabels,
+                          chartFilter: filter,
+                          LabelName: "Today",
+                          renderTooltip: renderDonutTooltip
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx44(
+                        Box30,
+                        {
+                          component: "span",
+                          sx: mergeSx2(
+                            {
+                              height: "180px",
+                              width: "2px",
+                              backgroundColor: "#D8D9E4",
+                              display: "inline-block"
+                            },
+                            customization?.dataComparison?.dividerSx
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsx44(Stack24, { width: "50%", children: /* @__PURE__ */ jsx44(
+                        QueueTimeBreakdownDonut,
+                        {
+                          averageData: yesterdayDonut,
+                          labels: donutLabels,
+                          chartFilter: filter,
+                          LabelName: "Yesterday",
+                          renderTooltip: renderDonutTooltip
+                        }
+                      ) })
+                    ]
+                  }
+                ) : /* @__PURE__ */ jsx44(ChartEmptyState, { minHeight: 220 }) })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx44(Grid, { size: { md: 6, xs: 12 }, children: /* @__PURE__ */ jsx44(
+            Card3,
             {
+              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__ */ jsx44(
-                QueueTimeBreakdownArea_default,
+              children: /* @__PURE__ */ jsx44(
+                CardContent2,
                 {
-                  series: getQueueTimeBreakdownAreaSeriesData(filter),
-                  xAxis: getQueueTimeBreakdownAreaXAxisData(filter),
-                  renderTooltip: renderAreaTooltip
+                  sx: mergeSx2(
+                    { padding: "10px 8px" },
+                    customization?.areaChart?.cardContentSx
+                  ),
+                  children: (areaProvided ? hasAreaData : hasBarData) ? /* @__PURE__ */ jsx44(
+                    QueueTimeBreakdownArea_default,
+                    {
+                      series: resolvedAreaSeries,
+                      xAxis: resolvedAreaXAxis,
+                      renderTooltip: renderAreaTooltip
+                    }
+                  ) : /* @__PURE__ */ jsx44(ChartEmptyState, { minHeight: 330 })
                 }
-              ) : /* @__PURE__ */ jsx44(ChartEmptyState, { minHeight: 330 })
+              )
             }
-          )
-        }
-      ) })
-    ] }) })
-  ] }) }) }) });
+          ) })
+        ] }) })
+      ]
+    }
+  ) }) }) });
 }
 
-// src/components/widgets/FootFallHeatMap/FootFallHeatMapView.tsx
-import { Icon as Icon13 } from "@iconify/react";
+// src/components/charts/StackedComparisonBarChart/stackedComparisonBarChart.chartTokens.ts
+var STACKED_COMPARISON_DEFAULT_STACK_COLORS = [
+  "#CFE0FB",
+  "#7FB1F0",
+  "#3D7CDF",
+  "#1E2A5E"
+];
+var STACKED_COMPARISON_DEFAULT_COMPARISON_COLOR = "#F47C7C";
+var STACKED_COMPARISON_DEFAULT_LEGEND_STACK_COLOR = "#2563EB";
+var STACKED_COMPARISON_DEFAULT_LEGEND_COMPARISON_COLOR = "#EF4444";
+var STACKED_COMPARISON_DEFAULT_FRAME_BORDER = "#EAECEF";
+
+// src/components/charts/StackedComparisonBarChart/StackedComparisonBarChart.tsx
+import Box31 from "@mui/material/Box";
+import ButtonBase2 from "@mui/material/ButtonBase";
+import Stack25 from "@mui/material/Stack";
+import Typography26 from "@mui/material/Typography";
+import * as React25 from "react";
 import {
-  Box as Box31,
-  Button as Button8,
-  IconButton as IconButton5,
-  Paper as Paper5,
-  Skeleton as Skeleton7,
-  Stack as Stack25,
+  Bar as Bar5,
+  BarChart as BarChart3,
+  CartesianGrid as CartesianGrid7,
+  ResponsiveContainer as ResponsiveContainer5,
   Tooltip as Tooltip12,
-  Typography as Typography26
-} from "@mui/material";
-import * as React24 from "react";
-import { useEffect as useEffect3, useMemo as useMemo19, useState as useState17 } from "react";
-import { ResponsiveContainer as ResponsiveContainer5, Treemap } from "recharts";
-
-// src/components/widgets/FootFallHeatMap/FootFallHeatMapView.types.ts
-var DEFAULT_FOOTFALL_TILE_ICONS = {
-  visitors: "fluent:people-community-16-filled",
-  dwell: "clarity:clock-solid",
-  headerInfo: "mdi:information-outline"
-};
+  XAxis as XAxis7,
+  YAxis as YAxis7
+} from "recharts";
+
+// src/components/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
+import * as React24 from "react";
+import { jsx as jsx45 } from "react/jsx-runtime";
+var StackedComparisonBarChartCustomizationContext = React24.createContext({});
+function StackedComparisonBarChartCustomizationProvider({
+  value,
+  children
+}) {
+  const memo = React24.useMemo(() => value, [value]);
+  return /* @__PURE__ */ jsx45(StackedComparisonBarChartCustomizationContext.Provider, { value: memo, children });
+}
+function useStackedComparisonBarChartCustomization() {
+  return React24.useContext(StackedComparisonBarChartCustomizationContext);
+}
+
+// src/components/charts/StackedComparisonBarChart/StackedComparisonBarChartTooltip.tsx
+import { jsx as jsx46, jsxs as jsxs36 } from "react/jsx-runtime";
+function fmt(n) {
+  return new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 }).format(n);
+}
+function StackedComparisonBarChartTooltip({
+  active,
+  row,
+  buckets,
+  bucketColors,
+  comparisonColor,
+  stackedTotalLabel,
+  comparisonLabel
+}) {
+  const { barChart: bc } = useStackedComparisonBarChartCustomization();
+  const tt = bc?.tooltip;
+  if (!active || !row) {
+    return null;
+  }
+  const borderColor = tt?.borderColor ?? "#E5E7EB";
+  const radius = tt?.borderRadiusPx ?? 10;
+  const shadow = tt?.boxShadow ?? "0 8px 24px rgba(15, 23, 42, 0.12)";
+  const bg = tt?.backgroundColor ?? "#FFFFFF";
+  const pad = tt?.paddingPx ?? 14;
+  const bucketNameColor = tt?.bucketNameColor ?? "#0F172A";
+  const bucketValueColor = tt?.bucketValueColor ?? "#0F172A";
+  const totalStackedLabelColor = tt?.totalStackedLabelColor ?? STACKED_COMPARISON_DEFAULT_LEGEND_STACK_COLOR;
+  const totalStackedValueColor = tt?.totalStackedValueColor ?? "#1D4ED8";
+  const comparisonLabelColor = tt?.comparisonLabelColor ?? STACKED_COMPARISON_DEFAULT_LEGEND_COMPARISON_COLOR;
+  const comparisonValueColor = tt?.comparisonValueColor ?? STACKED_COMPARISON_DEFAULT_LEGEND_COMPARISON_COLOR;
+  const dividerColor = tt?.dividerColor ?? "#E5E7EB";
+  const titleColor = tt?.titleColor ?? "#0F172A";
+  const fs = tt?.fontSizePx ?? 13;
+  const titleFs = tt?.titleFontSizePx ?? 15;
+  const titleText = row.subName ? `${row.name} ${row.subName}` : row.name;
+  const orderedBuckets = [...buckets].reverse();
+  const bodyStyle = mergeCss7(
+    {
+      boxSizing: "border-box",
+      backgroundColor: bg,
+      padding: pad,
+      borderRadius: radius,
+      border: `1px solid ${borderColor}`,
+      boxShadow: shadow,
+      minWidth: tt?.minWidthPx ?? 220,
+      ...tt?.maxWidthPx != null ? { maxWidth: tt.maxWidthPx } : null
+    },
+    tt?.bodyStyle
+  );
+  const rowStyle = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    fontSize: fs,
+    lineHeight: 1.4,
+    margin: "4px 0",
+    fontFamily: "inherit"
+  };
+  const swatch = (color) => ({
+    width: 10,
+    height: 10,
+    borderRadius: "50%",
+    backgroundColor: color,
+    flexShrink: 0,
+    display: "inline-block",
+    marginRight: 8
+  });
+  return /* @__PURE__ */ jsx46("div", { style: { pointerEvents: "none" }, children: /* @__PURE__ */ jsxs36("div", { style: bodyStyle, children: [
+    /* @__PURE__ */ jsx46(
+      "div",
+      {
+        style: {
+          fontSize: titleFs,
+          fontWeight: 700,
+          color: titleColor,
+          marginBottom: 8
+        },
+        children: titleText
+      }
+    ),
+    orderedBuckets.map((b, i) => {
+      const originalIndex = buckets.length - 1 - i;
+      const color = b.color ?? bucketColors[originalIndex] ?? "#94A3B8";
+      const v = row.stacked[b.id] ?? 0;
+      return /* @__PURE__ */ jsxs36("div", { style: rowStyle, children: [
+        /* @__PURE__ */ jsxs36(
+          "span",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              color: bucketNameColor,
+              fontWeight: 500
+            },
+            children: [
+              /* @__PURE__ */ jsx46("span", { style: swatch(color), "aria-hidden": true }),
+              b.label
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx46("span", { style: { color: bucketValueColor, fontWeight: 700 }, children: fmt(v) })
+      ] }, b.id);
+    }),
+    /* @__PURE__ */ jsx46(
+      "div",
+      {
+        style: {
+          height: 1,
+          background: dividerColor,
+          margin: "10px 0 8px"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs36("div", { style: { ...rowStyle, margin: "2px 0" }, children: [
+      /* @__PURE__ */ jsx46("span", { style: { color: totalStackedLabelColor, fontWeight: 700 }, children: stackedTotalLabel }),
+      /* @__PURE__ */ jsx46("span", { style: { color: totalStackedValueColor, fontWeight: 700 }, children: fmt(buckets.reduce((acc, b) => acc + (row.stacked[b.id] ?? 0), 0)) })
+    ] }),
+    /* @__PURE__ */ jsxs36("div", { style: { ...rowStyle, margin: "6px 0 0" }, children: [
+      /* @__PURE__ */ jsxs36(
+        "span",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            color: comparisonLabelColor,
+            fontWeight: 600
+          },
+          children: [
+            /* @__PURE__ */ jsx46("span", { style: swatch(comparisonColor), "aria-hidden": true }),
+            comparisonLabel
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx46("span", { style: { color: comparisonValueColor, fontWeight: 700 }, children: fmt(row.comparison) })
+    ] })
+  ] }) });
+}
+
+// src/components/charts/StackedComparisonBarChart/StackedComparisonBarChart.tsx
+import { Fragment as Fragment16, jsx as jsx47, jsxs as jsxs37 } from "react/jsx-runtime";
+var DEFAULT_AXIS_TICK_FILL = "#9CA3AF";
+var DEFAULT_GRID_STROKE = "#EEF0F3";
+var STACK_KEY = (id) => `stack__${id}`;
+var COMPARISON_KEY = "__comparison";
+function SortIcon({ color }) {
+  return /* @__PURE__ */ jsxs37(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 14 14",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ jsx47(
+          "path",
+          {
+            d: "M4 2.5V11.5M4 11.5L1.5 9M4 11.5L6.5 9",
+            stroke: color,
+            strokeWidth: "1.4",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx47(
+          "path",
+          {
+            d: "M10 11.5V2.5M10 2.5L7.5 5M10 2.5L12.5 5",
+            stroke: color,
+            strokeWidth: "1.4",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+function LegendDot({
+  color,
+  sizePx = 10
+}) {
+  return /* @__PURE__ */ jsx47(
+    Box31,
+    {
+      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__ */ jsx47("g", { transform: `translate(${x},${y})`, children: /* @__PURE__ */ jsx47(
+    "text",
+    {
+      transform: angle !== 0 ? `rotate(${angle})` : void 0,
+      textAnchor: anchor,
+      fontSize,
+      fill,
+      children: lines.map((line, i) => /* @__PURE__ */ jsx47("tspan", { x: 0, dy: i === 0 ? dy0 : lineHeight, children: line }, i))
+    }
+  ) });
+}
+function BarPlot({
+  data,
+  buckets,
+  bucketColors,
+  comparisonColor,
+  rowsByName,
+  yAxisDomain,
+  yAxisTicks,
+  yAxisTickFormatter,
+  stackedTotalLabel,
+  comparisonLabel,
+  renderTooltip,
+  enableHorizontalScroll,
+  chartMinWidth,
+  categoryWidthPx
+}) {
+  const { barChart: bc } = useStackedComparisonBarChartCustomization();
+  const height = bc?.heightPx ?? 360;
+  const stackedSize = bc?.stackedBarSizePx ?? 22;
+  const comparisonSize = bc?.comparisonBarSizePx ?? 18;
+  const barCategoryGap = bc?.barCategoryGapPx ?? 20;
+  const barGap = bc?.barGap ?? 2;
+  const barTopRadius = bc?.barTopRadiusPx ?? 3;
+  const m = {
+    top: bc?.margin?.top ?? 16,
+    right: bc?.margin?.right ?? 8,
+    bottom: bc?.margin?.bottom ?? 28,
+    left: bc?.margin?.left ?? 4
+  };
+  const gridStroke = bc?.gridStroke ?? DEFAULT_GRID_STROKE;
+  const dash = bc?.gridStrokeDasharray ?? "0";
+  const xFill = bc?.xAxisTickFill ?? "#6B7280";
+  const xTickAngle = bc?.xAxisTickAngle ?? 0;
+  const xTickAnchor = bc?.xAxisTickAnchor ?? "end";
+  const xAxisHeight = bc?.xAxisHeight ?? 50;
+  const yFill = bc?.yAxisTickFill ?? DEFAULT_AXIS_TICK_FILL;
+  const yWidth = bc?.yAxisWidth ?? 44;
+  const cursorFill = bc?.cursorFill ?? "rgba(15, 23, 42, 0.04)";
+  const defaultFmt = React25.useCallback(
+    (v) => v >= 1e3 ? `${(v / 1e3).toFixed(v % 1e3 === 0 ? 0 : 1)}k` : `${v}`,
+    []
+  );
+  const tickFmt = yAxisTickFormatter ?? defaultFmt;
+  const resolvedCategoryWidth = categoryWidthPx ?? 90;
+  const innerMinWidth = chartMinWidth ?? resolvedCategoryWidth * Math.max(data.length, 1);
+  const outerSx = enableHorizontalScroll ? {
+    width: "100%",
+    height,
+    mt: 0.5,
+    overflowX: "auto",
+    overflowY: "hidden"
+  } : { width: "100%", height, mt: 0.5 };
+  const innerSx = enableHorizontalScroll ? { width: "100%", height: "100%", minWidth: innerMinWidth } : { width: "100%", height: "100%" };
+  return /* @__PURE__ */ jsx47(Box31, { sx: outerSx, children: /* @__PURE__ */ jsx47(Box31, { sx: innerSx, children: /* @__PURE__ */ jsx47(ResponsiveContainer5, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs37(
+    BarChart3,
+    {
+      data,
+      margin: m,
+      barCategoryGap,
+      barGap,
+      children: [
+        /* @__PURE__ */ jsx47(
+          CartesianGrid7,
+          {
+            strokeDasharray: dash,
+            vertical: false,
+            stroke: gridStroke
+          }
+        ),
+        /* @__PURE__ */ jsx47(
+          XAxis7,
+          {
+            dataKey: "__name",
+            tick: /* @__PURE__ */ jsx47(
+              MultilineTick,
+              {
+                fill: xFill,
+                fontSize: 12,
+                rowsByName,
+                angle: xTickAngle,
+                textAnchor: xTickAnchor
+              }
+            ),
+            tickLine: false,
+            axisLine: { stroke: gridStroke },
+            interval: 0,
+            height: xAxisHeight
+          }
+        ),
+        /* @__PURE__ */ jsx47(
+          YAxis7,
+          {
+            domain: yAxisDomain,
+            ticks: yAxisTicks,
+            tick: { fill: yFill, fontSize: 11 },
+            tickLine: false,
+            axisLine: false,
+            width: yWidth,
+            tickFormatter: tickFmt
+          }
+        ),
+        /* @__PURE__ */ jsx47(
+          Tooltip12,
+          {
+            content: (tooltipProps) => {
+              const label = tooltipProps.label;
+              const labelStr = typeof label === "string" ? label : String(label ?? "");
+              const row = rowsByName[labelStr] ?? null;
+              if (renderTooltip) {
+                const custom = renderTooltip({
+                  tooltipProps,
+                  row,
+                  buckets,
+                  bucketColors,
+                  comparisonColor
+                });
+                return custom == null ? null : /* @__PURE__ */ jsx47(Fragment16, { children: custom });
+              }
+              return /* @__PURE__ */ jsx47(
+                StackedComparisonBarChartTooltip,
+                {
+                  ...tooltipProps,
+                  row,
+                  buckets,
+                  bucketColors,
+                  comparisonColor,
+                  stackedTotalLabel,
+                  comparisonLabel
+                }
+              );
+            },
+            cursor: { fill: cursorFill },
+            allowEscapeViewBox: { x: false, y: true }
+          }
+        ),
+        buckets.map((b, i) => {
+          const color = b.color ?? bucketColors[i] ?? "#94A3B8";
+          const isTop = i === buckets.length - 1;
+          const radius = isTop ? [barTopRadius, barTopRadius, 0, 0] : [0, 0, 0, 0];
+          return /* @__PURE__ */ jsx47(
+            Bar5,
+            {
+              dataKey: STACK_KEY(b.id),
+              name: b.label,
+              stackId: "stacked",
+              fill: color,
+              barSize: stackedSize,
+              isAnimationActive: false,
+              radius
+            },
+            b.id
+          );
+        }),
+        /* @__PURE__ */ jsx47(
+          Bar5,
+          {
+            dataKey: COMPARISON_KEY,
+            name: comparisonLabel,
+            stackId: "comparison",
+            fill: comparisonColor,
+            barSize: comparisonSize,
+            isAnimationActive: false,
+            radius: [barTopRadius, barTopRadius, 0, 0]
+          }
+        )
+      ]
+    }
+  ) }) }) });
+}
+function StackedComparisonBarChart({
+  subHeading,
+  showSortToggle = true,
+  onSortToggle,
+  showSubHeadingDivider = true,
+  showHeaderLegend = true,
+  enableHorizontalScroll = false,
+  chartMinWidth,
+  categoryWidthPx,
+  buckets,
+  data,
+  stackedLegendLabel = "Stacked",
+  comparisonLegendLabel = "Comparison",
+  stackedTotalLabel,
+  yAxisDomain,
+  yAxisTicks,
+  yAxisTickFormatter,
+  renderTooltip,
+  emptyStatePlaceholderProps,
+  customization
+}) {
+  const bucketColors = customization?.barChart?.stackColors ?? STACKED_COMPARISON_DEFAULT_STACK_COLORS;
+  const comparisonColor = customization?.barChart?.comparisonColor ?? STACKED_COMPARISON_DEFAULT_COMPARISON_COLOR;
+  const legendStackDot = customization?.header?.legendStackColor ?? STACKED_COMPARISON_DEFAULT_LEGEND_STACK_COLOR;
+  const legendComparisonDot = customization?.header?.legendComparisonColor ?? STACKED_COMPARISON_DEFAULT_LEGEND_COMPARISON_COLOR;
+  const legendDividerColor = customization?.header?.legendDividerColor ?? "#E5E7EB";
+  const legendDotSize = customization?.header?.legendDotSizePx ?? 10;
+  const frameBorder = customization?.frame?.borderColor ?? STACKED_COMPARISON_DEFAULT_FRAME_BORDER;
+  const frameBg = customization?.frame?.backgroundColor ?? "#FFFFFF";
+  const rowsByName = React25.useMemo(() => {
+    const r = {};
+    for (const row of data) r[row.name] = row;
+    return r;
+  }, [data]);
+  const chartData = React25.useMemo(() => {
+    return data.map((row) => {
+      const d = {
+        __key: row.name,
+        __name: row.name,
+        __subName: row.subName,
+        __row: row,
+        [COMPARISON_KEY]: row.comparison
+      };
+      for (const b of buckets) {
+        d[STACK_KEY(b.id)] = row.stacked[b.id] ?? 0;
+      }
+      return d;
+    });
+  }, [data, buckets]);
+  const subHeadingSx = mergeSx4(
+    {
+      fontWeight: 700,
+      fontSize: "0.95rem",
+      color: "#0f172a"
+    },
+    customization?.header?.subHeadingSx
+  );
+  const frameSx = mergeSx4(
+    {
+      bgcolor: frameBg,
+      border: `1px solid ${frameBorder}`,
+      borderRadius: 2,
+      px: 2,
+      pt: 2,
+      pb: 1.5,
+      width: "100%",
+      boxSizing: "border-box"
+    },
+    customization?.frame?.sx
+  );
+  const subHeadingDividerColor = customization?.frame?.subHeadingDividerColor ?? "#C7C9D9";
+  const subHeadingDividerSx = mergeSx4(
+    {
+      height: "1px",
+      width: "100%",
+      bgcolor: subHeadingDividerColor,
+      mb: 1.5
+    },
+    customization?.frame?.subHeadingDividerSx
+  );
+  const legendSx = mergeSx4({ flexShrink: 0 }, customization?.header?.legendSx);
+  const showSubHeadingRow = Boolean(subHeading) || showSortToggle || showHeaderLegend;
+  const resolvedStackedTotal = stackedTotalLabel ?? `Total ${stackedLegendLabel}`;
+  if (chartData.length === 0) {
+    return /* @__PURE__ */ jsx47(ChartEmptyState, { minHeight: 360, ...emptyStatePlaceholderProps });
+  }
+  return /* @__PURE__ */ jsx47(StackedComparisonBarChartCustomizationProvider, { value: customization ?? {}, children: /* @__PURE__ */ jsxs37(Box31, { sx: frameSx, children: [
+    showSubHeadingRow ? /* @__PURE__ */ jsxs37(
+      Stack25,
+      {
+        direction: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 2,
+        flexWrap: "wrap",
+        sx: { mb: 1 },
+        children: [
+          /* @__PURE__ */ jsxs37(Stack25, { direction: "row", alignItems: "center", spacing: 1, children: [
+            subHeading ? /* @__PURE__ */ jsx47(Typography26, { sx: subHeadingSx, children: subHeading }) : /* @__PURE__ */ jsx47("span", {}),
+            showSortToggle ? /* @__PURE__ */ jsx47(
+              ButtonBase2,
+              {
+                onClick: onSortToggle,
+                disableRipple: !onSortToggle,
+                sx: mergeSx4(
+                  {
+                    width: 26,
+                    height: 26,
+                    borderRadius: 1,
+                    bgcolor: "#EEF2FF",
+                    color: "#5B6DEC",
+                    display: "inline-flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    cursor: onSortToggle ? "pointer" : "default",
+                    "&:hover": onSortToggle ? { bgcolor: "#E0E7FF" } : void 0
+                  },
+                  customization?.header?.sortButtonSx
+                ),
+                "aria-label": "Toggle sort order",
+                children: /* @__PURE__ */ jsx47(SortIcon, { color: "#5B6DEC" })
+              }
+            ) : null
+          ] }),
+          showHeaderLegend ? /* @__PURE__ */ jsxs37(
+            Stack25,
+            {
+              direction: "row",
+              alignItems: "center",
+              spacing: 1.5,
+              sx: legendSx,
+              children: [
+                /* @__PURE__ */ jsxs37(Stack25, { direction: "row", alignItems: "center", spacing: 0.75, children: [
+                  /* @__PURE__ */ jsx47(LegendDot, { color: legendStackDot, sizePx: legendDotSize }),
+                  /* @__PURE__ */ jsx47(
+                    Typography26,
+                    {
+                      sx: mergeSx4(
+                        {
+                          fontWeight: 700,
+                          fontSize: "0.85rem",
+                          color: legendStackDot
+                        },
+                        customization?.header?.legendLabelSx
+                      ),
+                      children: stackedLegendLabel
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx47(
+                  Box31,
+                  {
+                    sx: {
+                      width: "1px",
+                      height: 18,
+                      bgcolor: legendDividerColor
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxs37(Stack25, { direction: "row", alignItems: "center", spacing: 0.75, children: [
+                  /* @__PURE__ */ jsx47(
+                    LegendDot,
+                    {
+                      color: legendComparisonDot,
+                      sizePx: legendDotSize
+                    }
+                  ),
+                  /* @__PURE__ */ jsx47(
+                    Typography26,
+                    {
+                      sx: mergeSx4(
+                        {
+                          fontWeight: 700,
+                          fontSize: "0.85rem",
+                          color: legendComparisonDot
+                        },
+                        customization?.header?.legendLabelSx
+                      ),
+                      children: comparisonLegendLabel
+                    }
+                  )
+                ] })
+              ]
+            }
+          ) : null
+        ]
+      }
+    ) : null,
+    showSubHeadingDivider ? /* @__PURE__ */ jsx47(Box31, { sx: subHeadingDividerSx }) : null,
+    /* @__PURE__ */ jsx47(
+      BarPlot,
+      {
+        data: chartData,
+        buckets,
+        bucketColors,
+        comparisonColor,
+        rowsByName,
+        yAxisDomain,
+        yAxisTicks,
+        yAxisTickFormatter,
+        stackedTotalLabel: resolvedStackedTotal,
+        comparisonLabel: comparisonLegendLabel,
+        renderTooltip,
+        enableHorizontalScroll,
+        chartMinWidth,
+        categoryWidthPx
+      }
+    )
+  ] }) });
+}
+
+// src/components/widgets/StorePerformanceByAssist/storePerformanceByAssist.defaultInfoPopover.ts
+var DEFAULT_STORE_PERFORMANCE_BY_ASSIST_INFO_POPOVER = {
+  title: "Store Performance by Assist",
+  description: "Per-store breakdown of attended customers split by attend-duration buckets, alongside the unattended count.",
+  helpBullets: [
+    "Compare attended vs unattended customer volume by store.",
+    "Identify stores with high unattended counts that need staffing.",
+    "See how attended customers split across 0-10 sec, 11-30 sec, 31-59 sec, and 1-2 min buckets."
+  ]
+};
+
+// src/components/widgets/StorePerformanceByAssist/storePerformanceByAssist.mock.ts
+var STORE_PERFORMANCE_DEFAULT_BUCKETS = [
+  { id: "0-10", label: "0-10sec" },
+  { id: "11-30", label: "11-30sec" },
+  { id: "31-59", label: "31-59sec" },
+  { id: "1-2", label: "1-2min" }
+];
+var STORE_PERFORMANCE_DEFAULT_DATA = [
+  {
+    name: "Lake Mall",
+    subName: "Kolkata",
+    stacked: { "0-10": 1100, "11-30": 1100, "31-59": 1500, "1-2": 3e3 },
+    comparison: 700
+  },
+  {
+    name: "V3s",
+    subName: "Delhi",
+    stacked: { "0-10": 1e3, "11-30": 1100, "31-59": 1450, "1-2": 2900 },
+    comparison: 620
+  },
+  {
+    name: "Forum Mall",
+    subName: "Bangalore",
+    stacked: { "0-10": 750, "11-30": 800, "31-59": 1450, "1-2": 2050 },
+    comparison: 520
+  },
+  {
+    name: "Phoenix",
+    subName: "Mumbai",
+    stacked: { "0-10": 600, "11-30": 700, "31-59": 1450, "1-2": 1500 },
+    comparison: 470
+  },
+  {
+    name: "DB City",
+    subName: "Bhopal",
+    stacked: { "0-10": 400, "11-30": 600, "31-59": 950, "1-2": 1550 },
+    comparison: 580
+  },
+  {
+    name: "DLF",
+    subName: "Gurgaon",
+    stacked: { "0-10": 225, "11-30": 300, "31-59": 375, "1-2": 600 },
+    comparison: 190
+  },
+  {
+    name: "Highway",
+    subName: "Chennai",
+    stacked: { "0-10": 200, "11-30": 250, "31-59": 350, "1-2": 850 },
+    comparison: 140
+  },
+  {
+    name: "Elante",
+    subName: "Chandigarh",
+    stacked: { "0-10": 150, "11-30": 200, "31-59": 250, "1-2": 600 },
+    comparison: 100
+  }
+];
+
+// src/components/widgets/StorePerformanceByAssist/StorePerformanceByAssist.tsx
+import Box32 from "@mui/material/Box";
+import Card4 from "@mui/material/Card";
+import CardContent3 from "@mui/material/CardContent";
+import Stack26 from "@mui/material/Stack";
+import Typography27 from "@mui/material/Typography";
+import { Fragment as Fragment17, jsx as jsx48, jsxs as jsxs38 } from "react/jsx-runtime";
+function LegendSquare({
+  color,
+  size = 12
+}) {
+  return /* @__PURE__ */ jsx48(
+    Box32,
+    {
+      sx: {
+        width: size,
+        height: size,
+        borderRadius: 0.5,
+        bgcolor: color,
+        flexShrink: 0
+      }
+    }
+  );
+}
+function StorePerformanceByAssist({
+  title,
+  width,
+  maxWidth,
+  minWidth,
+  subHeading = "Stores (Top to Bottom)",
+  showSortToggle = true,
+  onSortToggle,
+  showSubHeadingDivider = true,
+  showHeaderLegend = true,
+  enableHorizontalScroll = false,
+  chartMinWidth,
+  categoryWidthPx,
+  buckets,
+  data,
+  attendedLegendLabel = "Attended",
+  unattendedLegendLabel = "Unattended",
+  unattendedBottomLegendLabel = "Unattended Customers",
+  yAxisDomain,
+  yAxisTicks,
+  yAxisTickFormatter,
+  infoPopover = null,
+  renderTooltip,
+  emptyStatePlaceholderProps,
+  customization
+}) {
+  const bucketColors = customization?.chart?.barChart?.stackColors ?? STACKED_COMPARISON_DEFAULT_STACK_COLORS;
+  const comparisonColor = customization?.chart?.barChart?.comparisonColor ?? STACKED_COMPARISON_DEFAULT_COMPARISON_COLOR;
+  const bottomLegendColor = customization?.bottomLegend?.labelColor ?? "#6B7280";
+  const bottomLegendFs = customization?.bottomLegend?.fontSizePx ?? 12;
+  const bottomLegendDividerColor = customization?.bottomLegend?.dividerColor ?? "#E5E7EB";
+  const bottomSwatch = customization?.bottomLegend?.swatchSizePx ?? 12;
+  const resolvedInfo = infoPopover === void 0 ? DEFAULT_STORE_PERFORMANCE_BY_ASSIST_INFO_POPOVER : infoPopover;
+  const rootSx = mergeSx4(
+    {
+      bgcolor: "#FFFFFF",
+      borderRadius: 2,
+      boxShadow: "0 1px 3px rgba(15, 23, 42, 0.08)",
+      ...width !== void 0 ? { width } : null,
+      ...maxWidth !== void 0 ? { maxWidth } : null,
+      ...minWidth !== void 0 ? { minWidth } : null
+    },
+    customization?.rootCard?.sx
+  );
+  const titleSx = mergeSx4(
+    {
+      fontWeight: 700,
+      fontSize: { xs: "1rem", sm: "1.05rem" },
+      color: "#0f172a"
+    },
+    customization?.header?.titleSx
+  );
+  const bottomLegendSx = mergeSx4(
+    {
+      display: "flex",
+      flexWrap: "wrap",
+      alignItems: "center",
+      rowGap: 1,
+      mt: 1.5,
+      px: 0.5
+    },
+    customization?.bottomLegend?.sx
+  );
+  const showOuterHeader = Boolean(title) || Boolean(resolvedInfo);
+  const hasData = data.length > 0;
+  return /* @__PURE__ */ jsx48(Card4, { elevation: customization?.rootCard?.elevation ?? 0, sx: rootSx, children: /* @__PURE__ */ jsx48(CardContent3, { children: /* @__PURE__ */ jsxs38(Stack26, { spacing: 1.5, sx: { width: "100%" }, children: [
+    showOuterHeader ? /* @__PURE__ */ jsxs38(
+      Stack26,
+      {
+        direction: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 2,
+        flexWrap: "wrap",
+        children: [
+          title ? /* @__PURE__ */ jsx48(Typography27, { sx: titleSx, children: title }) : /* @__PURE__ */ jsx48("span", {}),
+          /* @__PURE__ */ jsx48(
+            Stack26,
+            {
+              direction: "row",
+              alignItems: "center",
+              spacing: 1.5,
+              sx: { flexShrink: 0 },
+              children: resolvedInfo ? /* @__PURE__ */ jsxs38(Fragment17, { children: [
+                /* @__PURE__ */ jsx48(ChartWidgetHeaderSeparator, {}),
+                /* @__PURE__ */ jsx48(
+                  ChartWidgetInfoButton,
+                  {
+                    popover: resolvedInfo,
+                    ariaLabel: "Store performance by assist information"
+                  }
+                )
+              ] }) : null
+            }
+          )
+        ]
+      }
+    ) : null,
+    /* @__PURE__ */ jsx48(
+      StackedComparisonBarChart,
+      {
+        subHeading,
+        showSortToggle,
+        onSortToggle,
+        showSubHeadingDivider,
+        showHeaderLegend,
+        enableHorizontalScroll,
+        chartMinWidth,
+        categoryWidthPx,
+        buckets,
+        data,
+        stackedLegendLabel: attendedLegendLabel,
+        comparisonLegendLabel: unattendedLegendLabel,
+        yAxisDomain,
+        yAxisTicks,
+        yAxisTickFormatter,
+        renderTooltip,
+        emptyStatePlaceholderProps,
+        customization: customization?.chart
+      }
+    ),
+    hasData ? /* @__PURE__ */ jsxs38(Box32, { sx: bottomLegendSx, children: [
+      buckets.map((b, i) => {
+        const color = b.color ?? bucketColors[i] ?? "#94A3B8";
+        return /* @__PURE__ */ jsxs38(
+          Stack26,
+          {
+            direction: "row",
+            alignItems: "center",
+            spacing: 0.75,
+            sx: { mr: 2 },
+            children: [
+              /* @__PURE__ */ jsx48(LegendSquare, { color, size: bottomSwatch }),
+              /* @__PURE__ */ jsx48(
+                Typography27,
+                {
+                  sx: {
+                    fontSize: bottomLegendFs,
+                    color: bottomLegendColor,
+                    fontWeight: 500
+                  },
+                  children: b.label
+                }
+              )
+            ]
+          },
+          b.id
+        );
+      }),
+      /* @__PURE__ */ jsx48(
+        Box32,
+        {
+          sx: {
+            width: "1px",
+            height: 14,
+            bgcolor: bottomLegendDividerColor,
+            mx: 1
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxs38(
+        Stack26,
+        {
+          direction: "row",
+          alignItems: "center",
+          spacing: 0.75,
+          sx: { mr: 2 },
+          children: [
+            /* @__PURE__ */ jsx48(LegendSquare, { color: comparisonColor, size: bottomSwatch }),
+            /* @__PURE__ */ jsx48(
+              Typography27,
+              {
+                sx: {
+                  fontSize: bottomLegendFs,
+                  color: bottomLegendColor,
+                  fontWeight: 500
+                },
+                children: unattendedBottomLegendLabel
+              }
+            )
+          ]
+        }
+      )
+    ] }) : null
+  ] }) }) });
+}
+
+// src/components/widgets/FootFallHeatMap/FootFallHeatMapView.tsx
+import { Icon as Icon13 } from "@iconify/react";
+import {
+  Box as Box33,
+  Button as Button8,
+  IconButton as IconButton5,
+  Paper as Paper5,
+  Skeleton as Skeleton7,
+  Stack as Stack27,
+  Tooltip as Tooltip13,
+  Typography as Typography28
+} from "@mui/material";
+import * as React26 from "react";
+import { useEffect as useEffect3, useMemo as useMemo21, useState as useState17 } from "react";
+import { ResponsiveContainer as ResponsiveContainer6, Treemap } from "recharts";
+
+// src/components/widgets/FootFallHeatMap/FootFallHeatMapView.types.ts
+var DEFAULT_FOOTFALL_TILE_ICONS = {
+  visitors: "fluent:people-community-16-filled",
+  dwell: "clarity:clock-solid",
+  headerInfo: "mdi:information-outline"
+};
 
 // src/components/widgets/FootFallHeatMap/footfallHeatMapDerivedStrip.ts
 var ZONE_SEGMENT_COLORS = [
@@ -12405,7 +13411,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 });
@@ -12415,7 +13422,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) => {
@@ -12768,7 +13775,7 @@ function getNestedList(payload) {
 }
 
 // src/components/widgets/FootFallHeatMap/FootFallHeatMapView.tsx
-import { Fragment as Fragment17, jsx as jsx45, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx49, jsxs as jsxs39 } from "react/jsx-runtime";
 function toDisplayNumber(value) {
   if (!Number.isFinite(value)) return "0";
   return new Intl.NumberFormat("en-IN").format(value);
@@ -12787,7 +13794,7 @@ function InlineStatCard({
   sx,
   iconColor = "#1565C0"
 }) {
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx49(
     Paper5,
     {
       elevation: 0,
@@ -12803,8 +13810,8 @@ function InlineStatCard({
         },
         ...sx ? [sx] : []
       ],
-      children: /* @__PURE__ */ jsxs36(Stack25, { direction: "row", alignItems: "center", spacing: 1.5, children: [
-        /* @__PURE__ */ jsx45(
+      children: /* @__PURE__ */ jsxs39(Stack27, { direction: "row", alignItems: "center", spacing: 1.5, children: [
+        /* @__PURE__ */ jsx49(
           Icon13,
           {
             icon,
@@ -12814,17 +13821,17 @@ function InlineStatCard({
             style: { flexShrink: 0 }
           }
         ),
-        /* @__PURE__ */ jsxs36(Stack25, { spacing: 0.15, children: [
-          /* @__PURE__ */ jsx45(
-            Typography26,
+        /* @__PURE__ */ jsxs39(Stack27, { spacing: 0.15, children: [
+          /* @__PURE__ */ jsx49(
+            Typography28,
             {
               variant: "body2",
               sx: { fontWeight: 500, color: "text.primary" },
               children: title
             }
           ),
-          /* @__PURE__ */ jsx45(
-            Typography26,
+          /* @__PURE__ */ jsx49(
+            Typography28,
             {
               variant: "h6",
               sx: { lineHeight: 1.1, fontWeight: 700, color: "text.primary" },
@@ -12853,17 +13860,17 @@ function InlineSegmentStrip({
   const barHeight = presentation?.barHeight ?? 12;
   const trackInsetPx = presentation?.trackInsetPx ?? 3;
   const trackBg = presentation?.trackBackgroundColor ?? "#ECEFF3";
-  return /* @__PURE__ */ jsxs36(Stack25, { spacing: 0.75, children: [
-    /* @__PURE__ */ jsxs36(
-      Stack25,
+  return /* @__PURE__ */ jsxs39(Stack27, { spacing: 0.75, children: [
+    /* @__PURE__ */ jsxs39(
+      Stack27,
       {
         direction: "row",
         alignItems: "center",
         justifyContent: "space-between",
         gap: 1,
         children: [
-          /* @__PURE__ */ jsx45(
-            Typography26,
+          /* @__PURE__ */ jsx49(
+            Typography28,
             {
               variant: "subtitle2",
               sx: [
@@ -12873,8 +13880,8 @@ function InlineSegmentStrip({
               children: item.label
             }
           ),
-          /* @__PURE__ */ jsx45(
-            Typography26,
+          /* @__PURE__ */ jsx49(
+            Typography28,
             {
               variant: "body2",
               sx: [
@@ -12887,8 +13894,8 @@ function InlineSegmentStrip({
         ]
       }
     ),
-    /* @__PURE__ */ jsx45(
-      Box31,
+    /* @__PURE__ */ jsx49(
+      Box33,
       {
         sx: {
           width: "100%",
@@ -12905,8 +13912,8 @@ function InlineSegmentStrip({
           const widthPercent = total > 0 ? segment.value / total * filledPercent : 0;
           const isLast = idx === lastIdx;
           const fill = resolveSegmentFill(presentation, idx, segment.color);
-          return /* @__PURE__ */ jsx45(
-            Tooltip12,
+          return /* @__PURE__ */ jsx49(
+            Tooltip13,
             {
               title: (() => {
                 if (presentation?.renderSegmentTooltip) {
@@ -12918,7 +13925,7 @@ function InlineSegmentStrip({
                   });
                   return custom == null ? "" : custom;
                 }
-                return /* @__PURE__ */ jsx45(
+                return /* @__PURE__ */ jsx49(
                   InlineSegmentTooltipCard,
                   {
                     segment,
@@ -12933,8 +13940,8 @@ function InlineSegmentStrip({
                   sx: inlineSegmentTooltipPopperSx
                 }
               },
-              children: /* @__PURE__ */ jsx45(
-                Box31,
+              children: /* @__PURE__ */ jsx49(
+                Box33,
                 {
                   sx: {
                     width: `${Math.max(0, widthPercent)}%`,
@@ -12978,10 +13985,10 @@ function InlineSegmentTooltipCard({
   cardSx
 }) {
   const tooltipSurfaceSx = cardSx ? [inlineSegmentTooltipCardSx, cardSx] : inlineSegmentTooltipCardSx;
-  return /* @__PURE__ */ jsxs36(Box31, { sx: tooltipSurfaceSx, children: [
-    /* @__PURE__ */ jsx45(Box31, { sx: { height: 3, bgcolor: "grey.200", width: "100%" } }),
-    /* @__PURE__ */ jsxs36(
-      Box31,
+  return /* @__PURE__ */ jsxs39(Box33, { sx: tooltipSurfaceSx, children: [
+    /* @__PURE__ */ jsx49(Box33, { sx: { height: 3, bgcolor: "grey.200", width: "100%" } }),
+    /* @__PURE__ */ jsxs39(
+      Box33,
       {
         sx: {
           display: "flex",
@@ -12993,8 +14000,8 @@ function InlineSegmentTooltipCard({
           py: 1.25
         },
         children: [
-          /* @__PURE__ */ jsx45(
-            Box31,
+          /* @__PURE__ */ jsx49(
+            Box33,
             {
               component: "span",
               "aria-hidden": true,
@@ -13007,8 +14014,8 @@ function InlineSegmentTooltipCard({
               }
             }
           ),
-          /* @__PURE__ */ jsx45(
-            Typography26,
+          /* @__PURE__ */ jsx49(
+            Typography28,
             {
               component: "span",
               sx: {
@@ -13020,8 +14027,8 @@ function InlineSegmentTooltipCard({
               children: segment.label
             }
           ),
-          /* @__PURE__ */ jsx45(
-            Typography26,
+          /* @__PURE__ */ jsx49(
+            Typography28,
             {
               component: "span",
               sx: {
@@ -13033,8 +14040,8 @@ function InlineSegmentTooltipCard({
               children: " : "
             }
           ),
-          /* @__PURE__ */ jsx45(
-            Typography26,
+          /* @__PURE__ */ jsx49(
+            Typography28,
             {
               component: "span",
               sx: {
@@ -13064,8 +14071,8 @@ function FootfallHeatMapKpiRankedBlock({
   const statIcon = presentation?.statCardIconColor ?? "#1565C0";
   const customSummary = presentation?.summaryCards?.(summaryKpis);
   const useCustomSummary = customSummary !== void 0;
-  return /* @__PURE__ */ jsxs36(
-    Stack25,
+  return /* @__PURE__ */ jsxs39(
+    Stack27,
     {
       spacing: 2,
       sx: [
@@ -13074,15 +14081,15 @@ function FootfallHeatMapKpiRankedBlock({
         ...presentation?.kpiContainerSx ? [presentation.kpiContainerSx] : []
       ],
       children: [
-        useCustomSummary && customSummary.length === 0 ? null : /* @__PURE__ */ jsx45(
-          Stack25,
+        useCustomSummary && customSummary.length === 0 ? null : /* @__PURE__ */ jsx49(
+          Stack27,
           {
             direction: "row",
             spacing: 1.5,
             flexWrap: "wrap",
             useFlexGap: true,
             sx: presentation?.summaryRowSx ? [presentation.summaryRowSx] : void 0,
-            children: useCustomSummary ? customSummary.map((card) => /* @__PURE__ */ jsx45(
+            children: useCustomSummary ? customSummary.map((card) => /* @__PURE__ */ jsx49(
               InlineStatCard,
               {
                 icon: card.icon ?? "mdi:chart-box-outline",
@@ -13095,7 +14102,7 @@ function FootfallHeatMapKpiRankedBlock({
               },
               card.id
             )) : [
-              /* @__PURE__ */ jsx45(
+              /* @__PURE__ */ jsx49(
                 InlineStatCard,
                 {
                   icon: "mdi:store-marker-outline",
@@ -13106,7 +14113,7 @@ function FootfallHeatMapKpiRankedBlock({
                 },
                 "default-stores"
               ),
-              /* @__PURE__ */ jsx45(
+              /* @__PURE__ */ jsx49(
                 InlineStatCard,
                 {
                   icon: "fluent:people-community-16-filled",
@@ -13120,15 +14127,15 @@ function FootfallHeatMapKpiRankedBlock({
             ]
           }
         ),
-        /* @__PURE__ */ jsx45(
-          Stack25,
+        /* @__PURE__ */ jsx49(
+          Stack27,
           {
             spacing: 1.25,
             sx: [
               { pt: 0.5, pb: 1 },
               ...presentation?.rankedListStackSx ? [presentation.rankedListStackSx] : []
             ],
-            children: rankedBarList.items.map((item) => /* @__PURE__ */ jsx45(
+            children: rankedBarList.items.map((item) => /* @__PURE__ */ jsx49(
               InlineSegmentStrip,
               {
                 item,
@@ -13310,7 +14317,7 @@ function FootFallHeatMapView({
     tileColors: treemapProp?.tileColors
   };
   const tileMetrics = treemapLayout.tileMetrics;
-  const tileColorFromSeed = useMemo19(
+  const tileColorFromSeed = useMemo21(
     () => createTreemapTileColorResolver(treemapLayout.tileColors),
     [treemapLayout.tileColors]
   );
@@ -13352,13 +14359,14 @@ function FootFallHeatMapView({
     startFromPathMode,
     tileColorFromSeed
   ]);
-  const derivedKpiStrip = useMemo19(() => {
+  const derivedKpiStrip = useMemo21(() => {
     if (isLoading || loading || !initialData) return null;
     const activeZoneForStrip = trackingDetails.length > 0 ? trackingDetails[trackingDetails.length - 1] : void 0;
     return deriveFootfallHeatMapKpiStrip(
       activeZoneForStrip,
       data.current ?? [],
-      kpiStripPresentation?.buildBarRow
+      kpiStripPresentation?.buildBarRow,
+      { includeZeroValueRows: kpiStripPresentation?.includeZeroValueRows }
     );
   }, [
     isLoading,
@@ -13366,7 +14374,8 @@ function FootFallHeatMapView({
     initialData,
     trackingDetails,
     data,
-    kpiStripPresentation?.buildBarRow
+    kpiStripPresentation?.buildBarRow,
+    kpiStripPresentation?.includeZeroValueRows
   ]);
   const formatPercentage = (value) => {
     if (typeof value !== "number") return "0%";
@@ -13448,7 +14457,7 @@ function FootFallHeatMapView({
     );
     const dwellIconColor = resolveIconColor(iconColorProp, tileColor, "dwell");
     const p = inner;
-    return /* @__PURE__ */ jsx45(
+    return /* @__PURE__ */ jsx49(
       "foreignObject",
       {
         x,
@@ -13456,8 +14465,8 @@ function FootFallHeatMapView({
         width,
         height,
         style: { borderRadius: "12px", overflow: "hidden" },
-        children: /* @__PURE__ */ jsxs36(
-          Stack25,
+        children: /* @__PURE__ */ jsxs39(
+          Stack27,
           {
             onClick: handleClick,
             onKeyDown: (e) => {
@@ -13487,8 +14496,8 @@ function FootFallHeatMapView({
               }
             },
             children: [
-              /* @__PURE__ */ jsxs36(
-                Stack25,
+              /* @__PURE__ */ jsxs39(
+                Stack27,
                 {
                   direction: isSmall ? "row" : "column",
                   justifyContent: "center",
@@ -13499,8 +14508,8 @@ function FootFallHeatMapView({
                     mb: isSmall ? 0.5 : 1
                   },
                   children: [
-                    /* @__PURE__ */ jsx45(
-                      Typography26,
+                    /* @__PURE__ */ jsx49(
+                      Typography28,
                       {
                         sx: {
                           fontSize: `${fontSize}px!important`,
@@ -13522,8 +14531,8 @@ function FootFallHeatMapView({
                         children: name
                       }
                     ),
-                    /* @__PURE__ */ jsx45(
-                      Typography26,
+                    /* @__PURE__ */ jsx49(
+                      Typography28,
                       {
                         sx: {
                           fontSize: `${fontSize}px!important`,
@@ -13537,8 +14546,8 @@ function FootFallHeatMapView({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs36(
-                Stack25,
+              /* @__PURE__ */ jsxs39(
+                Stack27,
                 {
                   direction: "row",
                   justifyContent: "center",
@@ -13551,8 +14560,8 @@ function FootFallHeatMapView({
                     ...tileMetrics?.metricsRowStackSx != null ? [tileMetrics.metricsRowStackSx] : []
                   ],
                   children: [
-                    /* @__PURE__ */ jsxs36(
-                      Stack25,
+                    /* @__PURE__ */ jsxs39(
+                      Stack27,
                       {
                         direction: "row",
                         alignItems: "center",
@@ -13569,8 +14578,8 @@ function FootFallHeatMapView({
                           ...tileMetrics?.metricPillStackSx != null ? [tileMetrics.metricPillStackSx] : []
                         ],
                         children: [
-                          /* @__PURE__ */ jsx45(
-                            Box31,
+                          /* @__PURE__ */ jsx49(
+                            Box33,
                             {
                               sx: [
                                 {
@@ -13582,7 +14591,7 @@ function FootFallHeatMapView({
                                 },
                                 ...tileMetrics?.metricPillIconBoxSx != null ? [tileMetrics.metricPillIconBoxSx] : []
                               ],
-                              children: /* @__PURE__ */ jsx45(
+                              children: /* @__PURE__ */ jsx49(
                                 Icon13,
                                 {
                                   icon: icons.visitors,
@@ -13592,8 +14601,8 @@ function FootFallHeatMapView({
                               )
                             }
                           ),
-                          /* @__PURE__ */ jsx45(
-                            Typography26,
+                          /* @__PURE__ */ jsx49(
+                            Typography28,
                             {
                               sx: [
                                 {
@@ -13610,8 +14619,8 @@ function FootFallHeatMapView({
                         ]
                       }
                     ),
-                    /* @__PURE__ */ jsxs36(
-                      Stack25,
+                    /* @__PURE__ */ jsxs39(
+                      Stack27,
                       {
                         direction: "row",
                         alignItems: "center",
@@ -13628,8 +14637,8 @@ function FootFallHeatMapView({
                           ...tileMetrics?.metricPillStackSx != null ? [tileMetrics.metricPillStackSx] : []
                         ],
                         children: [
-                          /* @__PURE__ */ jsx45(
-                            Box31,
+                          /* @__PURE__ */ jsx49(
+                            Box33,
                             {
                               sx: [
                                 {
@@ -13641,7 +14650,7 @@ function FootFallHeatMapView({
                                 },
                                 ...tileMetrics?.metricPillIconBoxSx != null ? [tileMetrics.metricPillIconBoxSx] : []
                               ],
-                              children: /* @__PURE__ */ jsx45(
+                              children: /* @__PURE__ */ jsx49(
                                 Icon13,
                                 {
                                   icon: icons.dwell,
@@ -13651,8 +14660,8 @@ function FootFallHeatMapView({
                               )
                             }
                           ),
-                          /* @__PURE__ */ jsx45(
-                            Typography26,
+                          /* @__PURE__ */ jsx49(
+                            Typography28,
                             {
                               sx: [
                                 {
@@ -13694,8 +14703,8 @@ function FootFallHeatMapView({
   const LabelTag = ({ textColor = "#f0f0f0" }) => {
     const pathSegments = trackingDetails.map((t) => String(t?.name ?? "").trim()).filter(Boolean);
     const breadcrumbSegments = Array.from(new Set([...pathSegments].reverse()));
-    return /* @__PURE__ */ jsx45(Stack25, { direction: "row", alignItems: "baseline", flexWrap: "wrap", gap: 1.5, children: breadcrumbSegments.length === 0 ? /* @__PURE__ */ jsx45(
-      Typography26,
+    return /* @__PURE__ */ jsx49(Stack27, { direction: "row", alignItems: "baseline", flexWrap: "wrap", gap: 1.5, children: breadcrumbSegments.length === 0 ? /* @__PURE__ */ jsx49(
+      Typography28,
       {
         component: "span",
         sx: {
@@ -13708,10 +14717,10 @@ function FootFallHeatMapView({
         color: textColor,
         children: brandLabel
       }
-    ) : /* @__PURE__ */ jsxs36(Fragment17, { children: [
-      breadcrumbSegments.map((seg, i) => /* @__PURE__ */ jsxs36(React24.Fragment, { children: [
-        i > 0 ? /* @__PURE__ */ jsx45(
-          Typography26,
+    ) : /* @__PURE__ */ jsxs39(Fragment19, { children: [
+      breadcrumbSegments.map((seg, i) => /* @__PURE__ */ jsxs39(React26.Fragment, { children: [
+        i > 0 ? /* @__PURE__ */ jsx49(
+          Typography28,
           {
             component: "span",
             fontSize: "15px !important",
@@ -13721,8 +14730,8 @@ function FootFallHeatMapView({
             children: "/"
           }
         ) : null,
-        /* @__PURE__ */ jsx45(
-          Typography26,
+        /* @__PURE__ */ jsx49(
+          Typography28,
           {
             component: "span",
             sx: {
@@ -13737,9 +14746,9 @@ function FootFallHeatMapView({
           }
         )
       ] }, `${seg}-${i}`)),
-      brandLabel ? /* @__PURE__ */ jsxs36(Fragment17, { children: [
-        /* @__PURE__ */ jsx45(
-          Typography26,
+      brandLabel ? /* @__PURE__ */ jsxs39(Fragment19, { children: [
+        /* @__PURE__ */ jsx49(
+          Typography28,
           {
             component: "span",
             fontSize: "15px !important",
@@ -13748,8 +14757,8 @@ function FootFallHeatMapView({
             children: "/"
           }
         ),
-        /* @__PURE__ */ jsx45(
-          Typography26,
+        /* @__PURE__ */ jsx49(
+          Typography28,
           {
             component: "span",
             sx: {
@@ -13768,10 +14777,10 @@ function FootFallHeatMapView({
   };
   const is500Error = error !== null && error !== void 0 && typeof error === "object" && "status" in error && error.status === 500;
   if (is500Error) {
-    return /* @__PURE__ */ jsx45(Box31, { sx: { p: 4, textAlign: "center" }, children: /* @__PURE__ */ jsx45(Typography26, { color: "error", children: "Something went wrong (500). Try again later." }) });
+    return /* @__PURE__ */ jsx49(Box33, { sx: { p: 4, textAlign: "center" }, children: /* @__PURE__ */ jsx49(Typography28, { color: "error", children: "Something went wrong (500). Try again later." }) });
   }
   if (isLoading || loading) {
-    return /* @__PURE__ */ jsx45(
+    return /* @__PURE__ */ jsx49(
       Skeleton7,
       {
         variant: "rectangular",
@@ -13812,9 +14821,9 @@ function FootFallHeatMapView({
     "#888888",
     "header"
   );
-  return /* @__PURE__ */ jsxs36(Stack25, { width: "100%", children: [
-    /* @__PURE__ */ jsxs36(
-      Box31,
+  return /* @__PURE__ */ jsxs39(Stack27, { width: "100%", children: [
+    /* @__PURE__ */ jsxs39(
+      Box33,
       {
         sx: {
           width: "100%",
@@ -13825,16 +14834,16 @@ function FootFallHeatMapView({
           gap: 1
         },
         children: [
-          /* @__PURE__ */ jsx45(Typography26, { variant: "h6", fontWeight: 700, children: title }),
-          /* @__PURE__ */ jsxs36(Stack25, { direction: "row", alignItems: "center", gap: 1, children: [
-            isFetching ? /* @__PURE__ */ jsx45(Typography26, { variant: "caption", color: "text.secondary", children: "Updating\u2026" }) : null,
-            /* @__PURE__ */ jsx45(Tooltip12, { title: infoTooltip, arrow: true, children: /* @__PURE__ */ jsx45(
+          /* @__PURE__ */ jsx49(Typography28, { variant: "h6", fontWeight: 700, children: title }),
+          /* @__PURE__ */ jsxs39(Stack27, { direction: "row", alignItems: "center", gap: 1, children: [
+            isFetching ? /* @__PURE__ */ jsx49(Typography28, { variant: "caption", color: "text.secondary", children: "Updating\u2026" }) : null,
+            /* @__PURE__ */ jsx49(Tooltip13, { title: infoTooltip, arrow: true, children: /* @__PURE__ */ jsx49(
               IconButton5,
               {
                 size: "small",
                 "aria-label": "Zone performance info",
                 edge: "end",
-                children: /* @__PURE__ */ jsx45(
+                children: /* @__PURE__ */ jsx49(
                   Icon13,
                   {
                     icon: icons.headerInfo,
@@ -13849,8 +14858,8 @@ function FootFallHeatMapView({
         ]
       }
     ),
-    data?.previous?.length > 0 && headerData ? /* @__PURE__ */ jsxs36(
-      Stack25,
+    data?.previous?.length > 0 && headerData ? /* @__PURE__ */ jsxs39(
+      Stack27,
       {
         direction: "row",
         alignItems: "center",
@@ -13864,13 +14873,13 @@ function FootFallHeatMapView({
           backgroundColor: zoneBarColor
         },
         children: [
-          /* @__PURE__ */ jsxs36(Stack25, { direction: "row", alignItems: "center", spacing: 1, children: [
-            /* @__PURE__ */ jsx45(
+          /* @__PURE__ */ jsxs39(Stack27, { direction: "row", alignItems: "center", spacing: 1, children: [
+            /* @__PURE__ */ jsx49(
               Button8,
               {
                 size: "small",
                 onClick: handleClose,
-                startIcon: /* @__PURE__ */ jsx45(
+                startIcon: /* @__PURE__ */ jsx49(
                   Icon13,
                   {
                     icon: "mdi:chevron-left",
@@ -13890,10 +14899,10 @@ function FootFallHeatMapView({
                 children: "Back"
               }
             ),
-            /* @__PURE__ */ jsx45(LabelTag, { textColor: zoneBarHeaderFg })
+            /* @__PURE__ */ jsx49(LabelTag, { textColor: zoneBarHeaderFg })
           ] }),
-          /* @__PURE__ */ jsxs36(
-            Typography26,
+          /* @__PURE__ */ jsxs39(
+            Typography28,
             {
               variant: "h6",
               sx: { color: zoneBarHeaderFg, fontWeight: 700 },
@@ -13907,7 +14916,7 @@ function FootFallHeatMapView({
         ]
       }
     ) : null,
-    isDrilledIntoZone && showKpiStrip && derivedKpiStrip ? /* @__PURE__ */ jsx45(
+    isDrilledIntoZone && showKpiStrip && derivedKpiStrip ? /* @__PURE__ */ jsx49(
       FootfallHeatMapKpiRankedBlock,
       {
         strip: derivedKpiStrip,
@@ -13924,8 +14933,8 @@ function FootFallHeatMapView({
         }
       }
     ) : null,
-    showLeafDetailsBody ? /* @__PURE__ */ jsx45(
-      Box31,
+    showLeafDetailsBody ? /* @__PURE__ */ jsx49(
+      Box33,
       {
         sx: [
           {
@@ -13940,7 +14949,7 @@ function FootFallHeatMapView({
         ]
       }
     ) : null,
-    showLeaf ? null : showChart ? hideTreemapForTerminalCardWithKpi ? null : hasTreemapData ? /* @__PURE__ */ jsx45(ResponsiveContainer5, { width: "100%", height: treemapHeight, children: /* @__PURE__ */ jsx45(
+    showLeaf ? null : showChart ? hideTreemapForTerminalCardWithKpi ? null : hasTreemapData ? /* @__PURE__ */ jsx49(ResponsiveContainer6, { width: "100%", height: treemapHeight, children: /* @__PURE__ */ jsx49(
       Treemap,
       {
         data: data?.current ?? [],
@@ -13953,22 +14962,22 @@ function FootFallHeatMapView({
         animationDuration: 0,
         style: { borderRadius: "12px" }
       }
-    ) }) : /* @__PURE__ */ jsx45(
+    ) }) : /* @__PURE__ */ jsx49(
       ChartEmptyState,
       {
         minHeight: treemapHeight,
         ...emptyStatePlaceholderProps
       }
-    ) : /* @__PURE__ */ jsx45(ChartEmptyState, { minHeight: 400, ...emptyStatePlaceholderProps })
+    ) : /* @__PURE__ */ jsx49(ChartEmptyState, { minHeight: 400, ...emptyStatePlaceholderProps })
   ] });
 }
 
 // src/components/widgets/FootFallHeatMap/ZoneWiseKpiCards.tsx
 import Grid2 from "@mui/material/Grid";
 import Paper6 from "@mui/material/Paper";
-import Stack26 from "@mui/material/Stack";
-import Typography27 from "@mui/material/Typography";
-import { jsx as jsx46, jsxs as jsxs37 } from "react/jsx-runtime";
+import Stack28 from "@mui/material/Stack";
+import Typography29 from "@mui/material/Typography";
+import { jsx as jsx50, jsxs as jsxs40 } from "react/jsx-runtime";
 function metricsToRows(metrics) {
   return [
     { id: 1, title: "Overall Visits", value: metrics.overall_visits ?? 0 },
@@ -14006,7 +15015,7 @@ function metricsToRows(metrics) {
 }
 var ZoneWiseKpiCards = ({ metrics }) => {
   const rows = metricsToRows(metrics);
-  return /* @__PURE__ */ jsx46(Grid2, { container: true, spacing: 3, sx: { marginTop: "10px", paddingX: "6px" }, children: rows.map((item) => /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx50(Grid2, { container: true, spacing: 3, sx: { marginTop: "10px", paddingX: "6px" }, children: rows.map((item) => /* @__PURE__ */ jsx50(
     Grid2,
     {
       size: {
@@ -14014,7 +15023,7 @@ var ZoneWiseKpiCards = ({ metrics }) => {
         sm: 6,
         md: 3
       },
-      children: /* @__PURE__ */ jsxs37(
+      children: /* @__PURE__ */ jsxs40(
         Paper6,
         {
           elevation: 0,
@@ -14026,8 +15035,8 @@ var ZoneWiseKpiCards = ({ metrics }) => {
             height: "100%"
           },
           children: [
-            /* @__PURE__ */ jsx46(
-              Typography27,
+            /* @__PURE__ */ jsx50(
+              Typography29,
               {
                 variant: "caption",
                 color: "text.secondary",
@@ -14035,7 +15044,7 @@ var ZoneWiseKpiCards = ({ metrics }) => {
                 children: item.title
               }
             ),
-            /* @__PURE__ */ jsx46(Stack26, { mt: 1, children: /* @__PURE__ */ jsx46(Typography27, { variant: "h6", fontWeight: 700, children: item.value }) })
+            /* @__PURE__ */ jsx50(Stack28, { mt: 1, children: /* @__PURE__ */ jsx50(Typography29, { variant: "h6", fontWeight: 700, children: item.value }) })
           ]
         }
       )
@@ -14094,41 +15103,41 @@ var peakBillingHoursMockSeriesByTabId = {
 };
 
 // src/components/widgets/PeakBillingHours/PeakBillingHours.tsx
-import Box32 from "@mui/material/Box";
-import Card4 from "@mui/material/Card";
-import CardContent3 from "@mui/material/CardContent";
+import Box34 from "@mui/material/Box";
+import Card5 from "@mui/material/Card";
+import CardContent4 from "@mui/material/CardContent";
 import Skeleton8 from "@mui/material/Skeleton";
-import Stack27 from "@mui/material/Stack";
-import Typography28 from "@mui/material/Typography";
-import * as React26 from "react";
+import Stack29 from "@mui/material/Stack";
+import Typography30 from "@mui/material/Typography";
+import * as React28 from "react";
 import {
-  Bar as Bar5,
-  BarChart as BarChart3,
-  CartesianGrid as CartesianGrid7,
+  Bar as Bar6,
+  BarChart as BarChart4,
+  CartesianGrid as CartesianGrid8,
   LabelList as LabelList5,
-  ResponsiveContainer as ResponsiveContainer6,
-  Tooltip as Tooltip13,
-  XAxis as XAxis7,
-  YAxis as YAxis7
+  ResponsiveContainer as ResponsiveContainer7,
+  Tooltip as Tooltip14,
+  XAxis as XAxis8,
+  YAxis as YAxis8
 } from "recharts";
 
 // src/components/widgets/PeakBillingHours/PeakBillingHoursCustomizationContext.tsx
-import * as React25 from "react";
-import { jsx as jsx47 } from "react/jsx-runtime";
-var PeakBillingHoursCustomizationContext = React25.createContext({});
+import * as React27 from "react";
+import { jsx as jsx51 } from "react/jsx-runtime";
+var PeakBillingHoursCustomizationContext = React27.createContext({});
 function PeakBillingHoursCustomizationProvider({
   value,
   children
 }) {
-  const memo = React25.useMemo(() => value, [value]);
-  return /* @__PURE__ */ jsx47(PeakBillingHoursCustomizationContext.Provider, { value: memo, children });
+  const memo = React27.useMemo(() => value, [value]);
+  return /* @__PURE__ */ jsx51(PeakBillingHoursCustomizationContext.Provider, { value: memo, children });
 }
 function usePeakBillingHoursCustomization() {
-  return React25.useContext(PeakBillingHoursCustomizationContext);
+  return React27.useContext(PeakBillingHoursCustomizationContext);
 }
 
 // src/components/widgets/PeakBillingHours/PeakBillingHoursTooltip.tsx
-import { jsx as jsx48, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs41 } from "react/jsx-runtime";
 function formatTooltipValue2(n) {
   return new Intl.NumberFormat(void 0, { maximumFractionDigits: 0 }).format(
     Math.round(n)
@@ -14175,7 +15184,7 @@ function PeakBillingHoursTooltip(props) {
     },
     tt?.bodyStyle
   );
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx52(
     "div",
     {
       style: {
@@ -14183,7 +15192,7 @@ function PeakBillingHoursTooltip(props) {
         minWidth: 160,
         maxWidth: 280
       },
-      children: /* @__PURE__ */ jsxs38(
+      children: /* @__PURE__ */ jsxs41(
         "div",
         {
           style: {
@@ -14194,7 +15203,7 @@ function PeakBillingHoursTooltip(props) {
             boxShadow: shadow
           },
           children: [
-            /* @__PURE__ */ jsx48(
+            /* @__PURE__ */ jsx52(
               "div",
               {
                 style: {
@@ -14205,14 +15214,14 @@ function PeakBillingHoursTooltip(props) {
                 "aria-hidden": true
               }
             ),
-            /* @__PURE__ */ jsxs38("div", { style: bodyStyle, children: [
-              /* @__PURE__ */ jsxs38("div", { style: rowStyle, children: [
-                /* @__PURE__ */ jsx48("span", { style: { color: prefixCol, fontWeight: prefixFw }, children: dateP }),
-                /* @__PURE__ */ jsx48("span", { style: { color: valueCol, fontWeight: valueFw }, children: labelText })
+            /* @__PURE__ */ jsxs41("div", { style: bodyStyle, children: [
+              /* @__PURE__ */ jsxs41("div", { style: rowStyle, children: [
+                /* @__PURE__ */ jsx52("span", { style: { color: prefixCol, fontWeight: prefixFw }, children: dateP }),
+                /* @__PURE__ */ jsx52("span", { style: { color: valueCol, fontWeight: valueFw }, children: labelText })
               ] }),
-              /* @__PURE__ */ jsxs38("div", { style: { ...rowStyle, marginTop: gap }, children: [
-                /* @__PURE__ */ jsx48("span", { style: { color: prefixCol, fontWeight: prefixFw }, children: totalP }),
-                /* @__PURE__ */ jsx48("span", { style: { color: valueCol, fontWeight: valueFw }, children: formatTooltipValue2(num) })
+              /* @__PURE__ */ jsxs41("div", { style: { ...rowStyle, marginTop: gap }, children: [
+                /* @__PURE__ */ jsx52("span", { style: { color: prefixCol, fontWeight: prefixFw }, children: totalP }),
+                /* @__PURE__ */ jsx52("span", { style: { color: valueCol, fontWeight: valueFw }, children: formatTooltipValue2(num) })
               ] })
             ] })
           ]
@@ -14223,7 +15232,7 @@ function PeakBillingHoursTooltip(props) {
 }
 
 // src/components/widgets/PeakBillingHours/PeakBillingHours.tsx
-import { Fragment as Fragment18, jsx as jsx49, jsxs as jsxs39 } from "react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx53, jsxs as jsxs42 } from "react/jsx-runtime";
 var OLY_DEFAULT_COMPOSED_CHART_CHROME6 = {
   cartesianGridStroke: "#D3D6DF",
   xAxisLineStroke: "#7566FC",
@@ -14249,7 +15258,7 @@ function PeakBarTopLabel(props) {
   const cx = nx + nw / 2;
   const cy = ny - 6;
   const isHorizontal = angle === 0;
-  return /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx53(
     "text",
     {
       x: cx,
@@ -14263,7 +15272,7 @@ function PeakBarTopLabel(props) {
     }
   );
 }
-function BarPlot({
+function BarPlot2({
   data,
   yAxisDomain,
   yAxisTicks,
@@ -14302,24 +15311,24 @@ function BarPlot({
     barRadius,
     barRadius
   ];
-  return /* @__PURE__ */ jsx49(Box32, { sx: { width: "100%", height, mt: 0.5 }, children: /* @__PURE__ */ jsx49(ResponsiveContainer6, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs39(
-    BarChart3,
+  return /* @__PURE__ */ jsx53(Box34, { sx: { width: "100%", height, mt: 0.5 }, children: /* @__PURE__ */ jsx53(ResponsiveContainer7, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs42(
+    BarChart4,
     {
       data,
       margin: m,
       barCategoryGap: categoryGap,
       barGap,
       children: [
-        /* @__PURE__ */ jsx49(
-          CartesianGrid7,
+        /* @__PURE__ */ jsx53(
+          CartesianGrid8,
           {
             strokeDasharray: dash,
             vertical: false,
             stroke: gridStroke
           }
         ),
-        /* @__PURE__ */ jsx49(
-          XAxis7,
+        /* @__PURE__ */ jsx53(
+          XAxis8,
           {
             dataKey: "label",
             dx: xAxisTickDx,
@@ -14332,8 +15341,8 @@ function BarPlot({
             height: 36
           }
         ),
-        /* @__PURE__ */ jsx49(
-          YAxis7,
+        /* @__PURE__ */ jsx53(
+          YAxis8,
           {
             domain: yAxisDomain,
             ticks: yAxisTicks,
@@ -14344,8 +15353,8 @@ function BarPlot({
             width: yWidth
           }
         ),
-        /* @__PURE__ */ jsx49(
-          Tooltip13,
+        /* @__PURE__ */ jsx53(
+          Tooltip14,
           {
             content: (tooltipProps) => {
               if (renderTooltip) {
@@ -14354,9 +15363,9 @@ function BarPlot({
                   data,
                   activeTabId
                 });
-                return customTooltip == null ? null : /* @__PURE__ */ jsx49(Fragment18, { children: customTooltip });
+                return customTooltip == null ? null : /* @__PURE__ */ jsx53(Fragment20, { children: customTooltip });
               }
-              return /* @__PURE__ */ jsx49(PeakBillingHoursTooltip, { ...tooltipProps });
+              return /* @__PURE__ */ jsx53(PeakBillingHoursTooltip, { ...tooltipProps });
             },
             cursor: {
               fill: hoverBandFill,
@@ -14366,8 +15375,8 @@ function BarPlot({
             allowEscapeViewBox: { x: false, y: true }
           }
         ),
-        /* @__PURE__ */ jsx49(
-          Bar5,
+        /* @__PURE__ */ jsx53(
+          Bar6,
           {
             dataKey: "value",
             name: "Visits",
@@ -14375,11 +15384,11 @@ function BarPlot({
             radius: radiusTuple,
             isAnimationActive: false,
             maxBarSize: 48,
-            children: /* @__PURE__ */ jsx49(
+            children: /* @__PURE__ */ jsx53(
               LabelList5,
               {
                 dataKey: "value",
-                content: (props) => /* @__PURE__ */ jsx49(
+                content: (props) => /* @__PURE__ */ jsx53(
                   PeakBarTopLabel,
                   {
                     ...props,
@@ -14419,7 +15428,7 @@ function PeakBillingHours({
   emptyStatePlaceholderProps,
   customization
 }) {
-  const chartData = React26.useMemo(() => {
+  const chartData = React28.useMemo(() => {
     if (seriesByTabId) {
       return seriesByTabId[activeTabId] ?? [];
     }
@@ -14454,9 +15463,9 @@ function PeakBillingHours({
     },
     customization?.header?.subtitleSx
   );
-  return /* @__PURE__ */ jsx49(PeakBillingHoursCustomizationProvider, { value: customization ?? {}, children: /* @__PURE__ */ jsx49(Card4, { elevation: customization?.rootCard?.elevation ?? 0, sx: rootSx, children: /* @__PURE__ */ jsx49(CardContent3, { children: /* @__PURE__ */ jsxs39(Stack27, { spacing: 1.75, sx: { width: "100%" }, children: [
-    /* @__PURE__ */ jsxs39(
-      Stack27,
+  return /* @__PURE__ */ jsx53(PeakBillingHoursCustomizationProvider, { value: customization ?? {}, children: /* @__PURE__ */ jsx53(Card5, { elevation: customization?.rootCard?.elevation ?? 0, sx: rootSx, children: /* @__PURE__ */ jsx53(CardContent4, { children: /* @__PURE__ */ jsxs42(Stack29, { spacing: 1.75, sx: { width: "100%" }, children: [
+    /* @__PURE__ */ jsxs42(
+      Stack29,
       {
         direction: "row",
         alignItems: "flex-start",
@@ -14464,20 +15473,20 @@ function PeakBillingHours({
         gap: 2,
         flexWrap: "wrap",
         children: [
-          /* @__PURE__ */ jsxs39(Box32, { component: "div", sx: { minWidth: 0 }, children: [
-            /* @__PURE__ */ jsx49(Typography28, { component: "span", sx: titleSx, children: title }),
-            /* @__PURE__ */ jsx49(Typography28, { component: "span", sx: subtitleSx, children: subtitle })
+          /* @__PURE__ */ jsxs42(Box34, { component: "div", sx: { minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx53(Typography30, { component: "span", sx: titleSx, children: title }),
+            /* @__PURE__ */ jsx53(Typography30, { component: "span", sx: subtitleSx, children: subtitle })
           ] }),
-          /* @__PURE__ */ jsx49(
-            Stack27,
+          /* @__PURE__ */ jsx53(
+            Stack29,
             {
               direction: "row",
               alignItems: "center",
               spacing: 1.5,
               sx: { flexShrink: 0 },
-              children: resolvedInfo ? /* @__PURE__ */ jsxs39(Fragment18, { children: [
-                /* @__PURE__ */ jsx49(ChartWidgetHeaderSeparator, {}),
-                /* @__PURE__ */ jsx49(
+              children: resolvedInfo ? /* @__PURE__ */ jsxs42(Fragment20, { children: [
+                /* @__PURE__ */ jsx53(ChartWidgetHeaderSeparator, {}),
+                /* @__PURE__ */ jsx53(
                   ChartWidgetInfoButton,
                   {
                     popover: resolvedInfo,
@@ -14490,7 +15499,7 @@ function PeakBillingHours({
         ]
       }
     ),
-    /* @__PURE__ */ jsx49(
+    /* @__PURE__ */ jsx53(
       ChartWidgetSegmentedTabs,
       {
         tabs,
@@ -14510,8 +15519,8 @@ function PeakBillingHours({
         inactiveTabFontWeight: st?.inactiveTabFontWeight ?? 600
       }
     ),
-    isLoading ? /* @__PURE__ */ jsx49(Skeleton8, { variant: "rounded", width: "100%", height: 320 }) : chartData.length > 0 ? /* @__PURE__ */ jsx49(
-      BarPlot,
+    isLoading ? /* @__PURE__ */ jsx53(Skeleton8, { variant: "rounded", width: "100%", height: 320 }) : chartData.length > 0 ? /* @__PURE__ */ jsx53(
+      BarPlot2,
       {
         data: chartData,
         yAxisDomain,
@@ -14525,7 +15534,7 @@ function PeakBillingHours({
         xAxisTickStyle,
         barValueLabelAngle
       }
-    ) : /* @__PURE__ */ jsx49(
+    ) : /* @__PURE__ */ jsx53(
       ChartEmptyState,
       {
         minHeight: 320,
@@ -14536,10 +15545,10 @@ function PeakBillingHours({
 }
 
 // src/components/widgets/CustomerJourneyAnalysis/CustomerJourneyAnalysis.tsx
-import Box33 from "@mui/material/Box";
-import Stack28 from "@mui/material/Stack";
-import Typography29 from "@mui/material/Typography";
-import { jsx as jsx50, jsxs as jsxs40 } from "react/jsx-runtime";
+import Box35 from "@mui/material/Box";
+import Stack30 from "@mui/material/Stack";
+import Typography31 from "@mui/material/Typography";
+import { jsx as jsx54, jsxs as jsxs43 } from "react/jsx-runtime";
 var DEFAULT_WALK_INS_BG = "#5B8DEF";
 var DEFAULT_TRIAL_VISITS_BG = "#F59E42";
 var DEFAULT_BILLING_VISITS_BG = "#6EBE7A";
@@ -14587,7 +15596,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] : []
   );
@@ -14794,17 +15803,17 @@ function CustomerJourneyAnalysis({
     ...Array.isArray(metricsSx) ? metricsSx : metricsSx ? [metricsSx] : []
   ];
   const bodyDirection = { xs: "column", [bodyBreakpoint]: "row" };
-  return /* @__PURE__ */ jsx50(Box33, { sx: outerSx, children: /* @__PURE__ */ jsxs40(Stack28, { spacing: 2, children: [
-    !hideTitle && /* @__PURE__ */ jsxs40(
-      Stack28,
+  return /* @__PURE__ */ jsx54(Box35, { sx: outerSx, children: /* @__PURE__ */ jsxs43(Stack30, { spacing: 2, children: [
+    !hideTitle && /* @__PURE__ */ jsxs43(
+      Stack30,
       {
         direction: "row",
         alignItems: "flex-start",
         justifyContent: "space-between",
         gap: 2,
         children: [
-          /* @__PURE__ */ jsx50(
-            Typography29,
+          /* @__PURE__ */ jsx54(
+            Typography31,
             {
               component: "h2",
               variant: "h6",
@@ -14817,8 +15826,8 @@ function CustomerJourneyAnalysis({
               children: title
             }
           ),
-          headerActions != null ? /* @__PURE__ */ jsx50(
-            Box33,
+          headerActions != null ? /* @__PURE__ */ jsx54(
+            Box35,
             {
               sx: {
                 flexShrink: 0,
@@ -14832,9 +15841,9 @@ function CustomerJourneyAnalysis({
         ]
       }
     ),
-    /* @__PURE__ */ jsxs40(Stack28, { direction: bodyDirection, spacing: bodyGap, alignItems: "stretch", children: [
-      /* @__PURE__ */ jsx50(Box33, { sx: stripSx, children: /* @__PURE__ */ jsxs40(Box33, { sx: statCardsRowSx, children: [
-        /* @__PURE__ */ jsx50(
+    /* @__PURE__ */ jsxs43(Stack30, { direction: bodyDirection, spacing: bodyGap, alignItems: "stretch", children: [
+      /* @__PURE__ */ jsx54(Box35, { sx: stripSx, children: /* @__PURE__ */ jsxs43(Box35, { sx: statCardsRowSx, children: [
+        /* @__PURE__ */ jsx54(
           JourneyStatCard,
           {
             icon: wiConfig.icon,
@@ -14855,7 +15864,7 @@ function CustomerJourneyAnalysis({
             borderRadius: wiConfig.borderRadius,
             minHeight: wiConfig.minHeight,
             isLoading,
-            sx: mergeSx4(
+            sx: mergeSx5(
               {
                 flex: statCardFlexes[0],
                 borderRadius: `${statStripInnerBorderRadius} 0 0 ${statStripInnerBorderRadius}`
@@ -14864,7 +15873,7 @@ function CustomerJourneyAnalysis({
             )
           }
         ),
-        /* @__PURE__ */ jsx50(
+        /* @__PURE__ */ jsx54(
           JourneyStatCard,
           {
             icon: tvConfig.icon,
@@ -14885,10 +15894,10 @@ function CustomerJourneyAnalysis({
             borderRadius: tvConfig.borderRadius,
             minHeight: tvConfig.minHeight,
             isLoading,
-            sx: mergeSx4({ flex: statCardFlexes[1] }, tvConfig.sx)
+            sx: mergeSx5({ flex: statCardFlexes[1] }, tvConfig.sx)
           }
         ),
-        /* @__PURE__ */ jsx50(
+        /* @__PURE__ */ jsx54(
           JourneyStatCard,
           {
             icon: bvConfig.icon,
@@ -14909,7 +15918,7 @@ function CustomerJourneyAnalysis({
             borderRadius: bvConfig.borderRadius,
             minHeight: bvConfig.minHeight,
             isLoading,
-            sx: mergeSx4(
+            sx: mergeSx5(
               {
                 flex: statCardFlexes[2],
                 borderRadius: `0 ${statStripInnerBorderRadius} ${statStripInnerBorderRadius} 0`
@@ -14919,8 +15928,8 @@ function CustomerJourneyAnalysis({
           }
         )
       ] }) }),
-      /* @__PURE__ */ jsx50(Box33, { sx: metricsBoxSx, children: /* @__PURE__ */ jsx50(
-        Box33,
+      /* @__PURE__ */ jsx54(Box35, { sx: metricsBoxSx, children: /* @__PURE__ */ jsx54(
+        Box35,
         {
           sx: {
             display: "grid",
@@ -14953,8 +15962,8 @@ function CustomerJourneyAnalysis({
               label: avgBillingPerTrialLabel,
               value: formatAverage(avgBillingPerTrial)
             }
-          ].map(({ cfg, label, value }) => /* @__PURE__ */ jsx50(
-            Box33,
+          ].map(({ cfg, label, value }) => /* @__PURE__ */ jsx54(
+            Box35,
             {
               sx: {
                 bgcolor: metricsCardBg,
@@ -14963,7 +15972,7 @@ function CustomerJourneyAnalysis({
                 height: "100%",
                 minWidth: 0
               },
-              children: /* @__PURE__ */ jsx50(
+              children: /* @__PURE__ */ jsx54(
                 JourneyMetricCard,
                 {
                   label,
@@ -14998,7 +16007,7 @@ import {
   createTheme,
   responsiveFontSizes
 } from "@mui/material/styles";
-import { jsx as jsx51, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs44 } from "react/jsx-runtime";
 var lightColor = "51, 48, 60";
 var darkColor = "228, 230, 244";
 var darkPaperBg = "#2F3349";
@@ -15078,8 +16087,8 @@ var FalconThemeProvider = ({
       mixins: { toolbar: { minHeight: 64 } }
     })
   );
-  return /* @__PURE__ */ jsxs41(ThemeProvider, { theme, children: [
-    /* @__PURE__ */ jsx51(CssBaseline, {}),
+  return /* @__PURE__ */ jsxs44(ThemeProvider, { theme, children: [
+    /* @__PURE__ */ jsx55(CssBaseline, {}),
     children
   ] });
 };
@@ -15102,6 +16111,7 @@ export {
   DEFAULT_FOOTFALL_TILE_ICONS,
   DEFAULT_PEAK_BILLING_HOURS_INFO_POPOVER,
   DEFAULT_QUEUE_TIME_BREAKDOWN_INFO_POPOVER,
+  DEFAULT_STORE_PERFORMANCE_BY_ASSIST_INFO_POPOVER,
   FalconAuditTimeline,
   FalconButton,
   FalconDIstrictFilter,
@@ -15140,6 +16150,17 @@ export {
   QueueTimeBreakdownStackedBar,
   TimePeriodFilter as QueueTimePeriodFilter,
   RankedBarList,
+  STACKED_COMPARISON_DEFAULT_COMPARISON_COLOR,
+  STACKED_COMPARISON_DEFAULT_FRAME_BORDER,
+  STACKED_COMPARISON_DEFAULT_LEGEND_COMPARISON_COLOR,
+  STACKED_COMPARISON_DEFAULT_LEGEND_STACK_COLOR,
+  STACKED_COMPARISON_DEFAULT_STACK_COLORS,
+  STORE_PERFORMANCE_DEFAULT_BUCKETS,
+  STORE_PERFORMANCE_DEFAULT_DATA,
+  StackedComparisonBarChart,
+  StackedComparisonBarChartCustomizationProvider,
+  StackedComparisonBarChartTooltip,
+  StorePerformanceByAssist,
   TIME_PERIOD_FILTER_INFO_POPOVER,
   TIME_PERIOD_FILTER_INFO_POPOVER_BREAKDOWN,
   TimePeriodFilter,
@@ -15171,9 +16192,12 @@ export {
   peakBillingHoursVisitsMock,
   preprocessData,
   skipSingleBranchLevels,
+  mergeCss7 as stackedComparisonMergeCss,
+  mergeSx4 as stackedComparisonMergeSx,
   toRechartsTreemapData,
   useBillingCounterAnalyticsCustomization,
   usePeakBillingHoursCustomization,
-  useQueueTimeBreakdownCustomization
+  useQueueTimeBreakdownCustomization,
+  useStackedComparisonBarChartCustomization
 };
 //# sourceMappingURL=index.mjs.map