@bpfdev/oly-ui 1.0.7 → 1.0.8

package/dist/index.js

@@ -58,6 +58,8 @@ __export(index_exports, {
   FalconPagination: () => FalconPagination,
   FalconSelect: () => FalconSelect,
   FalconSingleSwitch: () => FalconSingleSwitch,
+  FalconStatBanner: () => FalconStatBanner,
+  FalconStatBannerGroup: () => FalconStatBannerGroup,
   FalconTable: () => FalconTable,
   FalconThemeProvider: () => FalconThemeProvider,
   FalconTicketColumsFilter: () => FalconTicketColumsFilter,
@@ -5689,17 +5691,150 @@ var FalconDIstrictFilter = ({
   }
 );
 
-// src/components/FalconGrayButton/FalconGrayButton.tsx
+// src/components/FalconStatBanner/FalconStatBanner.tsx
 var import_material10 = require("@mui/material");
+var import_react16 = require("@iconify/react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
+var TREND_UP_COLOR = "#6D9F92";
+var TREND_DOWN_COLOR = "#ED1C24";
+var formatValue2 = (value) => typeof value === "number" ? value.toLocaleString() : value;
+var FalconStatBanner = ({
+  label,
+  value,
+  color = "#1BA9B5",
+  textColor = "#fff",
+  width = "100%",
+  height,
+  fontSize = "1rem",
+  fontWeight = 600,
+  trend,
+  trendPlacement = "inline",
+  sx,
+  className
+}) => {
+  const accentColor = trend?.direction === "up" ? TREND_UP_COLOR : TREND_DOWN_COLOR;
+  const badgeBg = trend?.badgeBg ?? "#fff";
+  const badgeColor = trend?.badgeColor ?? accentColor;
+  const badgeIconBg = trend?.badgeIconBg ?? accentColor;
+  const badgeIconColor = trend?.badgeIconColor ?? "#fff";
+  const showTrend = Boolean(trend?.label);
+  const isEnd = showTrend && trendPlacement === "end";
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    import_material10.Box,
+    {
+      className,
+      sx: {
+        width,
+        bgcolor: color,
+        borderRadius: "50px",
+        px: 4,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: isEnd ? "space-between" : "center",
+        gap: showTrend ? 2 : 0,
+        ...height ? { height } : { py: 1.5 },
+        ...sx
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+          import_material10.Typography,
+          {
+            variant: "body1",
+            sx: { color: textColor, fontSize, lineHeight: 1.4 },
+            children: [
+              label,
+              ":",
+              " ",
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_material10.Box, { component: "span", sx: { fontWeight }, children: formatValue2(value) })
+            ]
+          }
+        ),
+        showTrend && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+          import_material10.Box,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 1,
+              bgcolor: badgeBg,
+              borderRadius: "50px",
+              px: 2,
+              py: 0.75,
+              flexShrink: 0
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                import_material10.Typography,
+                {
+                  variant: "body2",
+                  sx: {
+                    color: badgeColor,
+                    fontSize: "0.8rem",
+                    fontWeight: 600,
+                    lineHeight: 1
+                  },
+                  children: trend.label
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                import_material10.Box,
+                {
+                  sx: {
+                    width: 18,
+                    height: 18,
+                    borderRadius: "50%",
+                    bgcolor: badgeIconBg,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    flexShrink: 0
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                    import_react16.Icon,
+                    {
+                      icon: trend.direction === "up" ? "mdi:arrow-up" : "mdi:arrow-down",
+                      color: badgeIconColor,
+                      width: 11,
+                      height: 11
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/FalconStatBanner/FalconStatBannerGroup.tsx
+var import_material11 = require("@mui/material");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var FalconStatBannerGroup = ({
+  banners,
+  spacing = 2,
+  sx
+}) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_material11.Stack, { direction: "row", spacing, sx: { width: "100%", ...sx }, children: banners.map(({ width, ...bannerProps }, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  import_material11.Box,
+  {
+    sx: width ? { width, flexShrink: 0 } : { flex: 1, minWidth: 0 },
+    children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(FalconStatBanner, { width: "100%", ...bannerProps })
+  },
+  index
+)) });
+
+// src/components/FalconGrayButton/FalconGrayButton.tsx
+var import_material12 = require("@mui/material");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var FalconGrayButton = ({
   text,
-  Icon: Icon11,
+  Icon: Icon13,
   onClick
 }) => {
-  const theme = (0, import_material10.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    import_material10.Box,
+  const theme = (0, import_material12.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    import_material12.Box,
     {
       sx: {
         cursor: onClick ? "pointer" : "default",
@@ -5709,17 +5844,17 @@ var FalconGrayButton = ({
       },
       onClick,
       role: onClick ? "button" : void 0,
-      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_material10.Stack, { direction: "row", justifyContent: "center", gap: 4, alignItems: "center", children: [
-        Icon11,
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_material10.Typography, { fontSize: 12, align: "center", fontWeight: "bold", children: text })
+      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_material12.Stack, { direction: "row", justifyContent: "center", gap: 4, alignItems: "center", children: [
+        Icon13,
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_material12.Typography, { fontSize: 12, align: "center", fontWeight: "bold", children: text })
       ] })
     }
   );
 };
 
 // src/components/FalconPagination/FalconPagination.tsx
-var import_material11 = require("@mui/material");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_material13 = require("@mui/material");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var selectStyle = {
   border: "none",
   backgroundColor: "transparent",
@@ -5747,8 +5882,8 @@ var FalconPagination = ({
   perPageOptions = [12, 24, 36]
 }) => {
   const totalPage = Math.ceil(totalItems / perPage) || 1;
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-    import_material11.Stack,
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    import_material13.Stack,
     {
       spacing: 2,
       alignItems: "center",
@@ -5756,18 +5891,18 @@ var FalconPagination = ({
       width: "100%",
       bgcolor: "#F0F0F0",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_material11.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_material13.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           "select",
           {
             style: selectStyle,
             value: perPage,
             onChange: (e) => setPerPage(Number(e.target.value)),
             "aria-label": "Items per page",
-            children: perPageOptions.map((n) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("option", { style: optionStyle, value: n, children: n }, n))
+            children: perPageOptions.map((n) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("option", { style: optionStyle, value: n, children: n }, n))
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_material11.Divider, { orientation: "vertical", flexItem: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_material11.Box, { sx: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_material11.Box, { sx: { color: "#525252", fontFamily: "roboto" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_material13.Divider, { orientation: "vertical", flexItem: true }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_material13.Box, { sx: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_material13.Box, { sx: { color: "#525252", fontFamily: "roboto" }, children: [
           perPage * (pageNo - 1) + 1,
           " - ",
           Math.min(perPage * pageNo, totalItems),
@@ -5776,27 +5911,27 @@ var FalconPagination = ({
           totalItems,
           " items"
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_material11.Divider, { orientation: "vertical", flexItem: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_material11.Stack, { alignItems: "center", direction: "row", gap: 1, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_material11.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_material13.Divider, { orientation: "vertical", flexItem: true }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_material13.Stack, { alignItems: "center", direction: "row", gap: 1, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_material13.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             "select",
             {
               style: selectStyle,
               value: pageNo,
               onChange: (e) => setPageNo(Number(e.target.value)),
               "aria-label": "Page number",
-              children: Array.from({ length: totalPage }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("option", { style: optionStyle, value: i + 1, children: i + 1 }, i))
+              children: Array.from({ length: totalPage }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("option", { style: optionStyle, value: i + 1, children: i + 1 }, i))
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_material11.Box, { sx: { color: "#525252", fontFamily: "roboto" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_material13.Box, { sx: { color: "#525252", fontFamily: "roboto" }, children: [
             "of ",
             totalPage,
             " pages"
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_material11.Divider, { orientation: "vertical", flexItem: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_material11.Stack, { direction: "row", gap: 1, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_material13.Divider, { orientation: "vertical", flexItem: true }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_material13.Stack, { direction: "row", gap: 1, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             "button",
             {
               type: "button",
@@ -5804,7 +5939,7 @@ var FalconPagination = ({
               onClick: () => setPageNo(pageNo - 1),
               style: btnStyle,
               "aria-label": "Previous page",
-              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                 "svg",
                 {
                   xmlns: "http://www.w3.org/2000/svg",
@@ -5812,12 +5947,12 @@ var FalconPagination = ({
                   height: "16",
                   viewBox: "0 0 16 16",
                   fill: "none",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { d: "M10 12L5 8L10 4V12Z", fill: "#161616" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { d: "M10 12L5 8L10 4V12Z", fill: "#161616" })
                 }
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             "button",
             {
               type: "button",
@@ -5825,7 +5960,7 @@ var FalconPagination = ({
               onClick: () => setPageNo(pageNo + 1),
               style: btnStyle,
               "aria-label": "Next page",
-              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                 "svg",
                 {
                   xmlns: "http://www.w3.org/2000/svg",
@@ -5833,7 +5968,7 @@ var FalconPagination = ({
                   height: "16",
                   viewBox: "0 0 16 16",
                   fill: "none",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { d: "M6 4L11 8L6 12V4Z", fill: "#161616" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { d: "M6 4L11 8L6 12V4Z", fill: "#161616" })
                 }
               )
             }
@@ -5845,8 +5980,8 @@ var FalconPagination = ({
 };
 
 // src/components/FalconSelect/FalconSelect.tsx
-var import_material12 = require("@mui/material");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_material14 = require("@mui/material");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function normalizeOptions(options) {
   return options.map(
     (opt) => typeof opt === "string" ? { value: opt.toLowerCase(), label: opt } : opt
@@ -5865,14 +6000,14 @@ var FalconSelect = ({
     const v = event.target.value;
     onChange(v !== "" ? v : "");
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_material12.FormControl, { variant: "filled", fullWidth: true, color: "primary", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_material12.InputLabel, { id: `falcon-select-${label}-label`, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_material14.FormControl, { variant: "filled", fullWidth: true, color: "primary", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_material14.InputLabel, { id: `falcon-select-${label}-label`, children: [
       "Select ",
       label,
       " *"
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-      import_material12.Select,
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+      import_material14.Select,
       {
         disabled,
         value: value?.toLowerCase() ?? "",
@@ -5881,8 +6016,8 @@ var FalconSelect = ({
         labelId: `falcon-select-${label}-label`,
         id: `falcon-select-${label}`,
         children: [
-          clearable && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_material12.MenuItem, { value: "", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("em", { children: "--Clear--" }) }),
-          items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_material12.MenuItem, { value: item.value, children: item.label }, i))
+          clearable && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_material14.MenuItem, { value: "", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("em", { children: "--Clear--" }) }),
+          items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_material14.MenuItem, { value: item.value, children: item.label }, i))
         ]
       }
     )
@@ -5893,7 +6028,7 @@ var FalconSelect = ({
 var import_Stack6 = __toESM(require("@mui/material/Stack"));
 var import_Switch = __toESM(require("@mui/material/Switch"));
 var import_styles4 = require("@mui/material/styles");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var AntSwitch = (0, import_styles4.styled)(import_Switch.default)(() => ({
   width: 28,
   height: 16,
@@ -5934,7 +6069,7 @@ var FalconSingleSwitch = ({
     setStatus?.(checked);
     onChange?.(event, checked);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_Stack6.default, { direction: "row", margin: 2, spacing: 1, alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_Stack6.default, { direction: "row", margin: 2, spacing: 1, alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     AntSwitch,
     {
       checked: value,
@@ -5947,29 +6082,29 @@ var FalconSingleSwitch = ({
 };
 
 // src/components/FalconTable/FalconTable.tsx
-var import_material13 = require("@mui/material");
+var import_material15 = require("@mui/material");
 var import_x_data_grid = require("@mui/x-data-grid");
-var import_react16 = require("react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_react17 = require("react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var FalconTable = ({
   rows,
   getRowId,
   columns,
   pageSizeOptions = [7, 10, 25, 50]
 }) => {
-  const [paginationModel, setPaginationModel] = (0, import_react16.useState)({
+  const [paginationModel, setPaginationModel] = (0, import_react17.useState)({
     page: 0,
     pageSize: 7
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-    import_material13.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    import_material15.Box,
     {
       sx: {
         border: "2px solid #F2F2F2",
         padding: "16px",
         borderRadius: "12px"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
         import_x_data_grid.DataGrid,
         {
           autoHeight: true,
@@ -5997,37 +6132,37 @@ var FalconTable = ({
 };
 
 // src/components/FalconTicketColumsFilter/FalconTicketColumsFilter.tsx
-var import_material14 = require("@mui/material");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_material16 = require("@mui/material");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var FalconTicketColumsFilter = ({
   columns = [],
   selected = [],
   onSelectionChange
-}) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_material14.Box, { sx: { p: 2, minWidth: 280 }, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_material14.Typography, { variant: "subtitle2", gutterBottom: true, children: "Select columns" }),
-  columns.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_material14.Typography, { variant: "body2", color: "text.secondary", children: "No columns configured. Pass columns prop." }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_material14.Typography, { variant: "body2", children: [
+}) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material16.Box, { sx: { p: 2, minWidth: 280 }, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material16.Typography, { variant: "subtitle2", gutterBottom: true, children: "Select columns" }),
+  columns.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material16.Typography, { variant: "body2", color: "text.secondary", children: "No columns configured. Pass columns prop." }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material16.Typography, { variant: "body2", children: [
     selected.length,
     " of ",
     columns.length,
     " selected"
   ] }),
-  onSelectionChange && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_material14.Typography, { variant: "caption", display: "block", sx: { mt: 1 }, children: "(Column checkboxes to be wired from app)" })
+  onSelectionChange && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material16.Typography, { variant: "caption", display: "block", sx: { mt: 1 }, children: "(Column checkboxes to be wired from app)" })
 ] });
 
 // src/components/FalconTicketFilter/FalconTicketFilter.tsx
-var import_material15 = require("@mui/material");
-var import_react17 = require("react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_material17 = require("@mui/material");
+var import_react18 = require("react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var FalconTicketFilter = ({
   children,
   label = "FILTERS",
   open: controlledOpen,
   onOpenChange
 }) => {
-  const [internalOpen, setInternalOpen] = (0, import_react17.useState)(false);
+  const [internalOpen, setInternalOpen] = (0, import_react18.useState)(false);
   const open = controlledOpen ?? internalOpen;
   const setOpen = onOpenChange ?? setInternalOpen;
-  const [anchorEl, setAnchorEl] = (0, import_react17.useState)(null);
+  const [anchorEl, setAnchorEl] = (0, import_react18.useState)(null);
   const handleClick = (event) => {
     setAnchorEl(event.currentTarget);
     setOpen(true);
@@ -6036,16 +6171,16 @@ var FalconTicketFilter = ({
     setAnchorEl(null);
     setOpen(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material15.Button, { onClick: handleClick, variant: "outlined", size: "medium", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-      import_material15.Popover,
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_material17.Button, { onClick: handleClick, variant: "outlined", size: "medium", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      import_material17.Popover,
       {
         open,
         anchorEl,
         onClose: handleClose,
         anchorOrigin: { vertical: "bottom", horizontal: "left" },
-        children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { style: { padding: 16, minWidth: 280 }, children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: { padding: 16, minWidth: 280 }, children })
       }
     )
   ] });
@@ -6076,13 +6211,13 @@ var QUEUE_TIME_BREAKDOWN_INFO_POPOVER = TIME_PERIOD_FILTER_INFO_POPOVER_BREAKDOW
 var DEFAULT_QUEUE_TIME_BREAKDOWN_INFO_POPOVER = TIME_PERIOD_FILTER_INFO_POPOVER_BREAKDOWN;
 
 // src/components/HeatMapChartLegend/HeatMapChartLegend.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var HeatMapChartLegend = ({
   title,
   items,
   gradientId,
   gradientStops
-}) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
   "div",
   {
     style: {
@@ -6093,7 +6228,7 @@ var HeatMapChartLegend = ({
       fontFamily: "sans-serif"
     },
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         "span",
         {
           style: {
@@ -6106,7 +6241,7 @@ var HeatMapChartLegend = ({
           children: title
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
         "div",
         {
           style: {
@@ -6117,14 +6252,14 @@ var HeatMapChartLegend = ({
             maxWidth: "600px"
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
               "svg",
               {
                 width: "100%",
                 height: "32",
                 style: { filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1))" },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                     "linearGradient",
                     {
                       id: gradientId,
@@ -6132,7 +6267,7 @@ var HeatMapChartLegend = ({
                       y1: "0%",
                       x2: "100%",
                       y2: "0%",
-                      children: gradientStops.map((stop, index) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                      children: gradientStops.map((stop, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                         "stop",
                         {
                           offset: stop.offset,
@@ -6143,7 +6278,7 @@ var HeatMapChartLegend = ({
                       ))
                     }
                   ) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                     "rect",
                     {
                       width: "100%",
@@ -6154,7 +6289,7 @@ var HeatMapChartLegend = ({
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
               "div",
               {
                 style: {
@@ -6169,7 +6304,7 @@ var HeatMapChartLegend = ({
                   paddingLeft: "16px",
                   paddingRight: "16px"
                 },
-                children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                   "span",
                   {
                     style: {
@@ -6193,11 +6328,11 @@ var HeatMapChartLegend = ({
 );
 
 // src/components/ProgressBarNumber/ProgressBarNumber.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var FullProgress = ({
   number,
   numColor
-}) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -6206,7 +6341,7 @@ var FullProgress = ({
     viewBox: "0 0 56 56",
     fill: "none",
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         "circle",
         {
           cx: 28,
@@ -6217,14 +6352,14 @@ var FullProgress = ({
           strokeWidth: 4
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("text", { x: 28, y: 36, fontSize: 24, textAnchor: "middle", fill: numColor, children: number })
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("text", { x: 28, y: 36, fontSize: 24, textAnchor: "middle", fill: numColor, children: number })
     ]
   }
 );
 var HalfProgress = ({
   number,
   numColor
-}) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -6233,7 +6368,7 @@ var HalfProgress = ({
     viewBox: "0 0 56 56",
     fill: "none",
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         "circle",
         {
           cx: 28,
@@ -6246,14 +6381,14 @@ var HalfProgress = ({
           strokeDashoffset: 130
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("text", { x: 28, y: 36, fontSize: 24, textAnchor: "middle", fill: numColor, children: number })
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("text", { x: 28, y: 36, fontSize: 24, textAnchor: "middle", fill: numColor, children: number })
     ]
   }
 );
 var NoProgress = ({
   number,
   numColor
-}) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -6262,7 +6397,7 @@ var NoProgress = ({
     viewBox: "0 0 56 56",
     fill: "none",
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         "circle",
         {
           cx: 28,
@@ -6274,7 +6409,7 @@ var NoProgress = ({
           strokeWidth: "4"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("text", { x: 28, y: 36, fontSize: 24, textAnchor: "middle", fill: numColor, children: number })
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("text", { x: 28, y: 36, fontSize: 24, textAnchor: "middle", fill: numColor, children: number })
     ]
   }
 );
@@ -6284,15 +6419,15 @@ var ProgressBarNumber = ({
   numColor
 }) => {
   if (progress === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(NoProgress, { number, numColor });
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(NoProgress, { number, numColor });
   }
   if (progress === 50) {
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(HalfProgress, { number, numColor });
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(HalfProgress, { number, numColor });
   }
   if (progress === 100) {
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(FullProgress, { number, numColor });
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(FullProgress, { number, numColor });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { children: "Invalid Progress" });
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { children: "Invalid Progress" });
 };
 
 // src/components/widgets/FootfallByAgeGroups/FootfallByAgeGroups.tsx
@@ -6324,7 +6459,7 @@ function resolveChartCardMaxWidth(cardMaxWidth) {
 }
 
 // src/components/widgets/FootfallByAgeGroups/FootfallByAgeGroups.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var OLY_DEFAULT_COMPOSED_CHART_HEIGHT_PX = 430;
 var OLY_DEFAULT_COMPOSED_CHART_CHROME = {
   cartesianGridStroke: "#D3D6DF",
@@ -6357,17 +6492,41 @@ function formatBarLabel(value) {
   }
   return String(value);
 }
+function MultiLineTick({
+  x = 0,
+  y = 0,
+  payload,
+  angle = -38,
+  textAnchor = "end",
+  fontSize = 12
+}) {
+  if (!payload?.value) return null;
+  const lines = String(payload.value).split("\n");
+  const lineHeight = fontSize * 1.3;
+  const isHorizontal = angle === 0;
+  const anchor = isHorizontal ? "middle" : textAnchor;
+  const dy0 = isHorizontal ? lineHeight * 0.35 : 4;
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("g", { transform: `translate(${x},${y})`, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    "text",
+    {
+      transform: `rotate(${angle})`,
+      textAnchor: anchor,
+      fontSize,
+      fill: "#666",
+      children: lines.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("tspan", { x: 0, dy: i === 0 ? dy0 : lineHeight, children: line }, i))
+    }
+  ) });
+}
 function FootfallAgeTooltip({
   active,
   payload,
   label,
-  isBarHovered,
   series,
   categoryLabel,
   overallLabel,
   tooltipStyles
 }) {
-  if (!active || !payload?.length || !isBarHovered || label === void 0) {
+  if (!active || !payload?.length || label === void 0) {
     return null;
   }
   const total = payload.reduce((sum, entry) => {
@@ -6382,7 +6541,7 @@ function FootfallAgeTooltip({
     gap: 4,
     marginBottom: "8px"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
     "div",
     {
       style: mergeCss2(
@@ -6397,7 +6556,7 @@ function FootfallAgeTooltip({
         ts?.container
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
           "div",
           {
             style: mergeCss2(
@@ -6405,7 +6564,7 @@ function FootfallAgeTooltip({
               ts?.sectionRow
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
                 "div",
                 {
                   style: mergeCss2(
@@ -6423,7 +6582,7 @@ function FootfallAgeTooltip({
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                 "div",
                 {
                   style: mergeCss2(
@@ -6436,8 +6595,8 @@ function FootfallAgeTooltip({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { style: mergeCss2(sectionBase, ts?.sectionRow), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { style: mergeCss2(sectionBase, ts?.sectionRow), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
             "div",
             {
               style: mergeCss2(
@@ -6455,7 +6614,7 @@ function FootfallAgeTooltip({
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             "div",
             {
               style: mergeCss2(
@@ -6472,8 +6631,8 @@ function FootfallAgeTooltip({
           );
           const raw = entry?.value;
           const value = typeof raw === "number" ? raw : Number(raw ?? 0);
-          return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { style: mergeCss2(sectionBase, ts?.sectionRow), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { style: mergeCss2(sectionBase, ts?.sectionRow), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
               "div",
               {
                 style: mergeCss2(
@@ -6487,7 +6646,7 @@ function FootfallAgeTooltip({
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
               "div",
               {
                 style: mergeCss2(
@@ -6505,7 +6664,7 @@ function FootfallAgeTooltip({
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
               "div",
               {
                 style: mergeCss2(
@@ -6546,8 +6705,8 @@ function StackTotalLabel({
   if (!row) return null;
   const total = rowTotal(row, series);
   const cx = nx + nw / 2;
-  const cy = ny - 4;
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  const cy = ny - 10;
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "text",
     {
       x: cx,
@@ -6598,16 +6757,14 @@ function FootfallByAgeGroups({
   chartColors: chartColorsProp,
   emptyStatePlaceholderProps,
   dimmedStackOpacity = 0.35,
-  barStackId = "footfall-by-age-groups"
+  barStackId = "footfall-by-age-groups",
+  xAxisTickAngle = 0
 }) {
   const [activeIndex, setActiveIndex] = React11.useState(null);
-  const [barHovered, setBarHovered] = React11.useState(false);
   const handleMouseEnter = React11.useCallback((_, index) => {
-    setBarHovered(true);
     setActiveIndex(index);
   }, []);
   const handleMouseLeave = React11.useCallback(() => {
-    setBarHovered(false);
     setActiveIndex(null);
   }, []);
   const processedData = React11.useMemo(
@@ -6688,7 +6845,7 @@ function FootfallByAgeGroups({
     }),
     [chartColorsProp]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     import_Box9.default,
     {
       sx: sxChain(
@@ -6705,8 +6862,8 @@ function FootfallByAgeGroups({
         },
         cardSx
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_Stack7.default, { spacing: 2, sx: sxChain({ minWidth: 0 }, stackSx), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_Stack7.default, { spacing: 2, sx: sxChain({ minWidth: 0 }, stackSx), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
           import_Box9.default,
           {
             sx: sxChain(
@@ -6717,7 +6874,7 @@ function FootfallByAgeGroups({
               titleRowSx
             ),
             children: [
-              headerActions ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              headerActions ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                 import_Box9.default,
                 {
                   sx: {
@@ -6730,7 +6887,7 @@ function FootfallByAgeGroups({
                   children: headerActions
                 }
               ) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                 import_Typography6.default,
                 {
                   component: "h2",
@@ -6751,8 +6908,8 @@ function FootfallByAgeGroups({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_Divider2.default, { sx: sxChain({ borderColor: "#D8D9E4" }, dividerSx) }),
-        showLegend && hasMeaningfulData && series.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_Divider2.default, { sx: sxChain({ borderColor: "#D8D9E4" }, dividerSx) }),
+        showLegend && hasMeaningfulData && series.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           import_Box9.default,
           {
             sx: sxChain(
@@ -6768,14 +6925,14 @@ function FootfallByAgeGroups({
               },
               legendRowSx
             ),
-            children: series.map((s) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+            children: series.map((s) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
               import_Stack7.default,
               {
                 direction: "row",
                 alignItems: "center",
                 sx: sxChain({ gap: 1 }, legendItemSx),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                     import_Box9.default,
                     {
                       sx: sxChain(
@@ -6790,7 +6947,7 @@ function FootfallByAgeGroups({
                       )
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                     import_Typography6.default,
                     {
                       sx: sxChain(
@@ -6811,7 +6968,7 @@ function FootfallByAgeGroups({
             ))
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           import_Box9.default,
           {
             ref: scrollRef,
@@ -6827,7 +6984,7 @@ function FootfallByAgeGroups({
               },
               chartScrollAreaSx
             ),
-            children: hasMeaningfulData ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+            children: hasMeaningfulData ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
               import_recharts.BarChart,
               {
                 width: chartWidthPx,
@@ -6838,7 +6995,7 @@ function FootfallByAgeGroups({
                 onMouseLeave: handleMouseLeave,
                 style: { overflow: "visible" },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                     import_recharts.CartesianGrid,
                     {
                       strokeDasharray: "3 3",
@@ -6847,21 +7004,19 @@ function FootfallByAgeGroups({
                       stroke: chartColors.cartesianGridStroke
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                     import_recharts.XAxis,
                     {
                       dataKey: "name",
-                      angle: -38,
-                      textAnchor: "end",
                       interval: 0,
-                      height: 57,
-                      dy: 8,
-                      tick: { fontSize: 12 },
+                      height: 68,
+                      tickMargin: 10,
+                      tick: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(MultiLineTick, { angle: xAxisTickAngle }),
                       axisLine: { stroke: chartColors.xAxisLineStroke },
                       tickLine: { stroke: chartColors.axisTickLineStroke }
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                     import_recharts.YAxis,
                     {
                       tickSize: 8,
@@ -6870,10 +7025,12 @@ function FootfallByAgeGroups({
                       tickLine: { stroke: chartColors.axisTickLineStroke }
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                     import_recharts.Tooltip,
                     {
                       cursor: false,
+                      allowEscapeViewBox: { x: true, y: true },
+                      wrapperStyle: { outline: "none", zIndex: 10 },
                       content: (tooltipProps) => {
                         if (renderTooltip) {
                           const customTooltip = renderTooltip({
@@ -6881,13 +7038,12 @@ function FootfallByAgeGroups({
                             rows: processedData,
                             series
                           });
-                          return customTooltip == null ? null : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_jsx_runtime28.Fragment, { children: customTooltip });
+                          return customTooltip == null ? null : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children: customTooltip });
                         }
-                        return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                        return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                           FootfallAgeTooltip,
                           {
                             ...tooltipProps,
-                            isBarHovered: barHovered,
                             series,
                             categoryLabel: tooltipCategoryLabel,
                             overallLabel: tooltipOverallLabel,
@@ -6897,7 +7053,7 @@ function FootfallByAgeGroups({
                       }
                     }
                   ),
-                  series.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+                  series.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
                     import_recharts.Bar,
                     {
                       dataKey: s.dataKey,
@@ -6907,17 +7063,17 @@ function FootfallByAgeGroups({
                       onMouseEnter: handleMouseEnter,
                       onMouseLeave: handleMouseLeave,
                       children: [
-                        processedData.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                        processedData.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                           import_recharts.Cell,
                           {
                             fillOpacity: barOpacity(index)
                           },
                           `${s.dataKey}-${row.name}-${index}`
                         )),
-                        i === lastSeriesIndex ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                        i === lastSeriesIndex ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                           import_recharts.LabelList,
                           {
-                            content: (labelProps) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                            content: (labelProps) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                               StackTotalLabel,
                               {
                                 ...labelProps,
@@ -6934,7 +7090,7 @@ function FootfallByAgeGroups({
                   ))
                 ]
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
               import_Box9.default,
               {
                 sx: sxChain(
@@ -6946,7 +7102,7 @@ function FootfallByAgeGroups({
                   },
                   emptyStateSx
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                   ChartEmptyState,
                   {
                     minHeight: chartHeight,
@@ -6967,9 +7123,10 @@ var import_Box10 = __toESM(require("@mui/material/Box"));
 var import_Divider3 = __toESM(require("@mui/material/Divider"));
 var import_Stack8 = __toESM(require("@mui/material/Stack"));
 var import_Typography7 = __toESM(require("@mui/material/Typography"));
+var import_react19 = require("@iconify/react");
 var React12 = __toESM(require("react"));
 var import_recharts2 = require("recharts");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var OLY_DEFAULT_COMPOSED_CHART_HEIGHT_PX2 = 430;
 var OLY_DEFAULT_COMPOSED_CHART_CHROME2 = {
   cartesianGridStroke: "#D3D6DF",
@@ -7006,12 +7163,138 @@ var defaultChartColors2 = {
 };
 var topReserveForBarLabels = 58;
 var topReserveNoBarLabels = 28;
+var topReserveForGrowthBadges = 90;
 function formatBarLabel2(value) {
   if (value > 1e3) {
     return `${(value / 1e3).toFixed(1)}k`;
   }
   return String(value);
 }
+function toNum2(v) {
+  if (v === void 0) return void 0;
+  return typeof v === "number" ? v : Number(v);
+}
+function GrowthBadgeLabel({
+  x,
+  y,
+  width,
+  index,
+  rows,
+  barGap,
+  series,
+  badgeWidth = 45,
+  badgeHeight = 38,
+  badgeOffsetY = 35
+}) {
+  const nx = toNum2(x);
+  const ny = toNum2(y);
+  const nw = toNum2(width);
+  if (index === void 0 || nx === void 0 || ny === void 0 || nw === void 0) {
+    return null;
+  }
+  const row = rows[index];
+  if (!row || !Number.isFinite(row.ffGrowthPercent)) return null;
+  const maleTaller = row.male >= row.female;
+  if (series === "male" && !maleTaller) return null;
+  if (series === "female" && maleTaller) return null;
+  const pct = row.ffGrowthPercent;
+  const isPositive = pct >= 0;
+  const color = isPositive ? "#6D9F92" : "#ED1C24";
+  const iconName = isPositive ? "mdi:arrow-up" : "mdi:arrow-down";
+  const label = `${isPositive ? "+" : ""}${pct.toFixed(1)}%`;
+  const centerX = series === "male" ? nx + nw + barGap / 2 : nx - barGap / 2;
+  const foX = centerX - badgeWidth / 2;
+  const foY = ny - badgeOffsetY - badgeHeight;
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    "foreignObject",
+    {
+      x: foX,
+      y: foY,
+      width: badgeWidth,
+      height: badgeHeight,
+      style: { overflow: "visible" },
+      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+        "div",
+        {
+          ...{ xmlns: "http://www.w3.org/1999/xhtml" },
+          style: {
+            width: `${badgeWidth}px`,
+            height: `${badgeHeight}px`,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: "2px",
+            background: "#F3F4F6",
+            borderRadius: "6px",
+            boxShadow: "0 1px 3px rgba(0,0,0,0.08)",
+            border: "1px solid #E5E7EB",
+            boxSizing: "border-box",
+            padding: "3px 4px",
+            pointerEvents: "none",
+            userSelect: "none"
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+              "div",
+              {
+                style: {
+                  display: "inline-flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  width: "12px",
+                  height: "12px",
+                  borderRadius: "50%",
+                  backgroundColor: color,
+                  flexShrink: 0
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react19.Icon, { icon: iconName, color: "#fff", width: 8, height: 8 })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+              "span",
+              {
+                style: {
+                  fontSize: "9px",
+                  fontWeight: 700,
+                  color,
+                  whiteSpace: "nowrap",
+                  lineHeight: 1
+                },
+                children: label
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+function MultiLineTick2({
+  x = 0,
+  y = 0,
+  payload,
+  angle = -38,
+  textAnchor = "end",
+  fontSize = 12
+}) {
+  if (!payload?.value) return null;
+  const lines = String(payload.value).split("\n");
+  const lineHeight = fontSize * 1.3;
+  const isHorizontal = angle === 0;
+  const anchor = isHorizontal ? "middle" : textAnchor;
+  const dy0 = isHorizontal ? lineHeight * 0.35 : 4;
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("g", { transform: `translate(${x},${y})`, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    "text",
+    {
+      transform: `rotate(${angle})`,
+      textAnchor: anchor,
+      fontSize,
+      fill: "#666",
+      children: lines.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("tspan", { x: 0, dy: i === 0 ? dy0 : lineHeight, children: line }, i))
+    }
+  ) });
+}
 function formatYAxisTickDefault(value) {
   if (!Number.isFinite(value)) {
     return "";
@@ -7028,14 +7311,13 @@ function GenderTooltip({
   active,
   payload,
   label,
-  isBarHovered,
   categoryLabel,
   overallLabel,
   seriesLabels,
   seriesColors,
   tooltipStyles
 }) {
-  if (!active || !payload?.length || !isBarHovered || label === void 0) {
+  if (!active || !payload?.length || label === void 0) {
     return null;
   }
   const maleEntry = payload.find(
@@ -7054,177 +7336,215 @@ function GenderTooltip({
     gap: 4,
     marginBottom: "8px"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     "div",
     {
       style: mergeCss3(
         {
-          backgroundColor: "white",
-          borderRadius: "8px",
-          padding: "16px",
-          width: "180px",
-          boxShadow: "0 2px 10px rgba(0, 0, 0, 0.1)"
+          position: "relative",
+          display: "inline-flex",
+          alignItems: "stretch"
         },
-        ts?.container
+        ts?.wrapper
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: -6,
+              top: 18,
+              width: 0,
+              height: 0,
+              borderTop: "6px solid transparent",
+              borderBottom: "6px solid transparent",
+              borderRight: "7px solid #fff",
+              zIndex: 1,
+              filter: "drop-shadow(-1px 0 0 #E8E8E8)"
+            },
+            "aria-hidden": true
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
           "div",
           {
             style: mergeCss3(
-              { ...sectionBase, marginBottom: "8px" },
-              ts?.sectionRow
+              {
+                position: "relative",
+                zIndex: 2,
+                backgroundColor: "white",
+                borderRadius: "8px",
+                padding: "10px 12px 10px",
+                width: "max-content",
+                maxWidth: 200,
+                boxSizing: "border-box",
+                boxShadow: "0 2px 12px rgba(0, 0, 0, 0.12)",
+                border: "1px solid #E8E8E8"
+              },
+              ts?.container
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
                 "div",
                 {
                   style: mergeCss3(
-                    {
-                      color: "#0F0F0F",
-                      fontSize: "11px",
-                      fontWeight: 500
-                    },
-                    ts?.metaLabel
+                    { ...sectionBase, marginBottom: "8px" },
+                    ts?.sectionRow
                   ),
                   children: [
-                    categoryLabel,
-                    ":",
-                    " "
+                    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+                      "div",
+                      {
+                        style: mergeCss3(
+                          {
+                            color: "#0F0F0F",
+                            fontSize: "11px",
+                            fontWeight: 500
+                          },
+                          ts?.metaLabel
+                        ),
+                        children: [
+                          categoryLabel,
+                          ":",
+                          " "
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                      "div",
+                      {
+                        style: mergeCss3(
+                          { color: "#5A5A5A", fontSize: "11px", fontWeight: 400 },
+                          ts?.metaValue
+                        ),
+                        children: label
+                      }
+                    )
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-                "div",
-                {
-                  style: mergeCss3(
-                    { color: "#5A5A5A", fontSize: "11px", fontWeight: 400 },
-                    ts?.metaValue
-                  ),
-                  children: label
-                }
-              )
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { style: mergeCss3(sectionBase, ts?.sectionRow), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+                  "div",
+                  {
+                    style: mergeCss3(
+                      {
+                        color: "#0F0F0F",
+                        fontSize: "11px",
+                        fontWeight: 500
+                      },
+                      ts?.metaLabel
+                    ),
+                    children: [
+                      overallLabel,
+                      ":",
+                      " "
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                  "div",
+                  {
+                    style: mergeCss3(
+                      { color: "#5A5A5A", fontSize: "11px", fontWeight: 400 },
+                      ts?.metaValue
+                    ),
+                    children: total.toLocaleString()
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { style: mergeCss3(sectionBase, ts?.sectionRow), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                  "div",
+                  {
+                    style: mergeCss3(
+                      {
+                        width: "10px",
+                        height: "10px",
+                        borderRadius: "50%",
+                        backgroundColor: seriesColors.male
+                      },
+                      ts?.seriesDot
+                    )
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+                  "div",
+                  {
+                    style: mergeCss3(
+                      {
+                        color: "#0F0F0F",
+                        fontSize: "11px",
+                        fontWeight: 500
+                      },
+                      ts?.seriesName
+                    ),
+                    children: [
+                      seriesLabels.male,
+                      ":",
+                      " "
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                  "div",
+                  {
+                    style: mergeCss3(
+                      { color: "#5A5A5A", fontSize: "11px", fontWeight: 400 },
+                      ts?.seriesValue
+                    ),
+                    children: male.toLocaleString()
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { style: mergeCss3(sectionBase, ts?.sectionRow), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                  "div",
+                  {
+                    style: mergeCss3(
+                      {
+                        width: "10px",
+                        height: "10px",
+                        borderRadius: "50%",
+                        backgroundColor: seriesColors.female
+                      },
+                      ts?.seriesDot
+                    )
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+                  "div",
+                  {
+                    style: mergeCss3(
+                      {
+                        color: "#0F0F0F",
+                        fontSize: "11px",
+                        fontWeight: 500
+                      },
+                      ts?.seriesName
+                    ),
+                    children: [
+                      seriesLabels.female,
+                      ":",
+                      " "
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                  "div",
+                  {
+                    style: mergeCss3(
+                      { color: "#5A5A5A", fontSize: "11px", fontWeight: 400 },
+                      ts?.seriesValue
+                    ),
+                    children: female.toLocaleString()
+                  }
+                )
+              ] })
             ]
           }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { style: mergeCss3(sectionBase, ts?.sectionRow), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
-            "div",
-            {
-              style: mergeCss3(
-                {
-                  color: "#0F0F0F",
-                  fontSize: "11px",
-                  fontWeight: 500
-                },
-                ts?.metaLabel
-              ),
-              children: [
-                overallLabel,
-                ":",
-                " "
-              ]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-            "div",
-            {
-              style: mergeCss3(
-                { color: "#5A5A5A", fontSize: "11px", fontWeight: 400 },
-                ts?.metaValue
-              ),
-              children: total.toLocaleString()
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { style: mergeCss3(sectionBase, ts?.sectionRow), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-            "div",
-            {
-              style: mergeCss3(
-                {
-                  width: "10px",
-                  height: "10px",
-                  borderRadius: "50%",
-                  backgroundColor: seriesColors.male
-                },
-                ts?.seriesDot
-              )
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
-            "div",
-            {
-              style: mergeCss3(
-                {
-                  color: "#0F0F0F",
-                  fontSize: "11px",
-                  fontWeight: 500
-                },
-                ts?.seriesName
-              ),
-              children: [
-                seriesLabels.male,
-                ":",
-                " "
-              ]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-            "div",
-            {
-              style: mergeCss3(
-                { color: "#5A5A5A", fontSize: "11px", fontWeight: 400 },
-                ts?.seriesValue
-              ),
-              children: male.toLocaleString()
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { style: mergeCss3(sectionBase, ts?.sectionRow), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-            "div",
-            {
-              style: mergeCss3(
-                {
-                  width: "10px",
-                  height: "10px",
-                  borderRadius: "50%",
-                  backgroundColor: seriesColors.female
-                },
-                ts?.seriesDot
-              )
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
-            "div",
-            {
-              style: mergeCss3(
-                {
-                  color: "#0F0F0F",
-                  fontSize: "11px",
-                  fontWeight: 500
-                },
-                ts?.seriesName
-              ),
-              children: [
-                seriesLabels.female,
-                ":",
-                " "
-              ]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-            "div",
-            {
-              style: mergeCss3(
-                { color: "#5A5A5A", fontSize: "11px", fontWeight: 400 },
-                ts?.seriesValue
-              ),
-              children: female.toLocaleString()
-            }
-          )
-        ] })
+        )
       ]
     }
   );
@@ -7253,6 +7573,7 @@ function FootfallByGender({
   barGap = 0,
   showLegend = true,
   showBarValueLabels = true,
+  showGrowthBadges = false,
   dimmedBarOpacity = 0.3,
   hoveredBarOpacity = 0.9,
   cardMaxWidth,
@@ -7276,23 +7597,46 @@ function FootfallByGender({
   chartMargin: chartMarginProp,
   chartColors: chartColorsProp,
   emptyStatePlaceholderProps,
-  yAxisTickFormatter
+  yAxisTickFormatter,
+  xAxisTickAngle = 0,
+  barValueLabelAngle = 0,
+  growthBadgeWidth = 45,
+  growthBadgeHeight = 38,
+  growthBadgeOffsetY = 35
 }) {
   const seriesLabels = { ...defaultSeriesLabels, ...seriesLabelsProp };
   const seriesColors = { ...defaultSeriesColors, ...seriesColorsProp };
   const [activeIndex, setActiveIndex] = React12.useState(null);
-  const [barHovered, setBarHovered] = React12.useState(false);
   const handleMouseEnter = React12.useCallback((_, index) => {
-    setBarHovered(true);
     setActiveIndex(index);
   }, []);
   const handleMouseLeave = React12.useCallback(() => {
-    setBarHovered(false);
     setActiveIndex(null);
   }, []);
   const processedData = React12.useMemo(() => {
     return data.map((row) => ({ ...row }));
   }, [data]);
+  const hasMaleBar = React12.useMemo(
+    () => processedData.some((r) => typeof r.male === "number" && r.male > 0),
+    [processedData]
+  );
+  const hasFemaleBar = React12.useMemo(
+    () => processedData.some((r) => typeof r.female === "number" && r.female > 0),
+    [processedData]
+  );
+  const showMaleLegend = React12.useMemo(
+    () => processedData.some((r) => typeof r.male === "number"),
+    [processedData]
+  );
+  const showFemaleLegend = React12.useMemo(
+    () => processedData.some((r) => typeof r.female === "number"),
+    [processedData]
+  );
+  const visibleBarCount = (hasMaleBar ? 1 : 0) + (hasFemaleBar ? 1 : 0) || 1;
+  const hasGrowthBadges = React12.useMemo(
+    () => showGrowthBadges && processedData.some((r) => Number.isFinite(r.ffGrowthPercent)),
+    [showGrowthBadges, processedData]
+  );
   const categoryScrollActive = React12.useMemo(
     () => resolveCategoryScroll(
       minWidthPerCategory,
@@ -7330,21 +7674,34 @@ function FootfallByGender({
     }
     return Math.max(chartInnerMinWidthPx, containerWidth);
   }, [chartInnerMinWidthPx, containerWidth]);
-  const resolvedMaxBarSize = React12.useMemo(() => {
-    if (maxBarSizeProp !== void 0) {
-      return maxBarSizeProp;
-    }
-    const categoryCap = minWidthPerCategory > 0 ? minWidthPerCategory : defaultMinWidthPerCategory2;
-    return Math.min(categoryCap, defaultMaxBarThickness2);
-  }, [maxBarSizeProp, minWidthPerCategory]);
+  const targetBarWidth = maxBarSizeProp ?? defaultMaxBarThickness2;
+  const resolvedBarCategoryGapPx = React12.useMemo(() => {
+    const effectiveWidth = chartWidthPx > 0 ? chartWidthPx : containerWidth;
+    if (effectiveWidth <= 0) return 4;
+    const n = Math.max(processedData.length, 1);
+    const plotWidth = effectiveWidth - chartWidthAxisGutter2;
+    const bandSize = plotWidth / n;
+    const gapBetweenBars = visibleBarCount > 1 ? barGap : 0;
+    return Math.max(
+      0,
+      (bandSize - targetBarWidth * visibleBarCount - gapBetweenBars) / 2
+    );
+  }, [
+    processedData.length,
+    chartWidthPx,
+    containerWidth,
+    barGap,
+    targetBarWidth,
+    visibleBarCount
+  ]);
+  const resolvedMaxBarSize = targetBarWidth;
   const chartMargin = React12.useMemo(() => {
-    const top = showBarValueLabels ? topReserveForBarLabels : topReserveNoBarLabels;
-    return {
-      ...defaultChartMargin2,
-      top,
-      ...chartMarginProp
-    };
-  }, [showBarValueLabels, chartMarginProp]);
+    let top;
+    if (hasGrowthBadges) top = topReserveForGrowthBadges;
+    else if (showBarValueLabels) top = topReserveForBarLabels;
+    else top = topReserveNoBarLabels;
+    return { ...defaultChartMargin2, top, ...chartMarginProp };
+  }, [hasGrowthBadges, showBarValueLabels, chartMarginProp]);
   const chartColors = React12.useMemo(
     () => ({
       ...defaultChartColors2,
@@ -7354,7 +7711,7 @@ function FootfallByGender({
   );
   const yAxisTick = yAxisTickFormatter ?? formatYAxisTickDefault;
   const barOpacity = (index) => activeIndex === null || activeIndex === index ? hoveredBarOpacity : dimmedBarOpacity;
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     import_Box10.default,
     {
       sx: sxChain2(
@@ -7371,8 +7728,8 @@ function FootfallByGender({
         },
         cardSx
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_Stack8.default, { spacing: 2, sx: sxChain2({ minWidth: 0 }, stackSx), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_Stack8.default, { spacing: 2, sx: sxChain2({ minWidth: 0 }, stackSx), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
           import_Box10.default,
           {
             sx: sxChain2(
@@ -7383,7 +7740,7 @@ function FootfallByGender({
               titleRowSx
             ),
             children: [
-              headerActions ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+              headerActions ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                 import_Box10.default,
                 {
                   sx: {
@@ -7396,7 +7753,7 @@ function FootfallByGender({
                   children: headerActions
                 }
               ) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                 import_Typography7.default,
                 {
                   component: "h2",
@@ -7417,8 +7774,8 @@ function FootfallByGender({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_Divider3.default, { sx: sxChain2({ borderColor: "#D8D9E4" }, dividerSx) }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_Divider3.default, { sx: sxChain2({ borderColor: "#D8D9E4" }, dividerSx) }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
           import_Box10.default,
           {
             sx: sxChain2(
@@ -7432,7 +7789,7 @@ function FootfallByGender({
               chartViewportSx
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                 import_Box10.default,
                 {
                   ref: scrollRef,
@@ -7446,7 +7803,7 @@ function FootfallByGender({
                     },
                     chartScrollAreaSx
                   ),
-                  children: processedData.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+                  children: processedData.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
                     import_recharts2.BarChart,
                     {
                       width: chartWidthPx,
@@ -7454,11 +7811,12 @@ function FootfallByGender({
                       data: processedData,
                       margin: chartMargin,
                       barGap,
+                      barCategoryGap: resolvedBarCategoryGapPx,
                       maxBarSize: resolvedMaxBarSize,
                       onMouseLeave: handleMouseLeave,
                       style: { overflow: "visible" },
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                           import_recharts2.CartesianGrid,
                           {
                             strokeDasharray: "3 3",
@@ -7467,22 +7825,19 @@ function FootfallByGender({
                             stroke: chartColors.cartesianGridStroke
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                           import_recharts2.XAxis,
                           {
                             dataKey: "name",
-                            angle: -38,
-                            textAnchor: "end",
                             interval: 0,
                             height: 68,
                             tickMargin: 10,
-                            dy: 6,
-                            tick: { fontSize: 12 },
+                            tick: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MultiLineTick2, { angle: xAxisTickAngle }),
                             axisLine: { stroke: chartColors.xAxisLineStroke },
                             tickLine: { stroke: chartColors.axisTickLineStroke }
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                           import_recharts2.YAxis,
                           {
                             width: 52,
@@ -7493,23 +7848,24 @@ function FootfallByGender({
                             tickLine: { stroke: chartColors.axisTickLineStroke }
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                           import_recharts2.Tooltip,
                           {
                             cursor: false,
+                            allowEscapeViewBox: { x: true, y: true },
+                            wrapperStyle: { outline: "none", zIndex: 10 },
                             content: (tooltipProps) => {
                               if (renderTooltip) {
                                 const customTooltip = renderTooltip({
                                   tooltipProps,
                                   rows: processedData
                                 });
-                                return customTooltip == null ? null : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children: customTooltip });
+                                return customTooltip == null ? null : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_jsx_runtime31.Fragment, { children: customTooltip });
                               }
-                              return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                              return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                                 GenderTooltip,
                                 {
                                   ...tooltipProps,
-                                  isBarHovered: barHovered,
                                   categoryLabel: tooltipCategoryLabel,
                                   overallLabel: tooltipOverallLabel,
                                   seriesLabels,
@@ -7520,7 +7876,7 @@ function FootfallByGender({
                             }
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+                        hasMaleBar ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
                           import_recharts2.Bar,
                           {
                             dataKey: "male",
@@ -7529,29 +7885,48 @@ function FootfallByGender({
                             onMouseEnter: handleMouseEnter,
                             onMouseLeave: handleMouseLeave,
                             children: [
-                              processedData.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                              processedData.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                                 import_recharts2.Cell,
                                 {
                                   fillOpacity: barOpacity(index)
                                 },
                                 `m-${row.name}-${index}`
                               )),
-                              showBarValueLabels ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                              showBarValueLabels ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                                 import_recharts2.LabelList,
                                 {
                                   dataKey: "male",
                                   position: "top",
-                                  offset: 12,
+                                  offset: 10,
                                   fill: chartColors.barValueLabelFill,
                                   fontSize: 12,
-                                  angle: -90,
+                                  fontWeight: 500,
+                                  angle: barValueLabelAngle,
                                   formatter: (label) => formatBarLabel2(Number(label))
                                 }
+                              ) : null,
+                              hasGrowthBadges ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                                import_recharts2.LabelList,
+                                {
+                                  dataKey: "male",
+                                  content: (labelProps) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                                    GrowthBadgeLabel,
+                                    {
+                                      ...labelProps,
+                                      rows: processedData,
+                                      barGap,
+                                      series: "male",
+                                      badgeWidth: growthBadgeWidth,
+                                      badgeHeight: growthBadgeHeight,
+                                      badgeOffsetY: growthBadgeOffsetY
+                                    }
+                                  )
+                                }
                               ) : null
                             ]
                           }
-                        ),
-                        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+                        ) : null,
+                        hasFemaleBar ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
                           import_recharts2.Bar,
                           {
                             dataKey: "female",
@@ -7560,31 +7935,50 @@ function FootfallByGender({
                             onMouseEnter: handleMouseEnter,
                             onMouseLeave: handleMouseLeave,
                             children: [
-                              processedData.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                              processedData.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                                 import_recharts2.Cell,
                                 {
                                   fillOpacity: barOpacity(index)
                                 },
                                 `f-${row.name}-${index}`
                               )),
-                              showBarValueLabels ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                              showBarValueLabels ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                                 import_recharts2.LabelList,
                                 {
                                   dataKey: "female",
                                   position: "top",
-                                  offset: 12,
+                                  offset: 10,
                                   fill: chartColors.barValueLabelFill,
                                   fontSize: 12,
-                                  angle: -90,
+                                  fontWeight: 500,
+                                  angle: barValueLabelAngle,
                                   formatter: (label) => formatBarLabel2(Number(label))
                                 }
+                              ) : null,
+                              hasGrowthBadges ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                                import_recharts2.LabelList,
+                                {
+                                  dataKey: "female",
+                                  content: (labelProps) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                                    GrowthBadgeLabel,
+                                    {
+                                      ...labelProps,
+                                      rows: processedData,
+                                      barGap,
+                                      series: "female",
+                                      badgeWidth: growthBadgeWidth,
+                                      badgeHeight: growthBadgeHeight,
+                                      badgeOffsetY: growthBadgeOffsetY
+                                    }
+                                  )
+                                }
                               ) : null
                             ]
                           }
-                        )
+                        ) : null
                       ]
                     }
-                  ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                     import_Box10.default,
                     {
                       sx: sxChain2(
@@ -7596,7 +7990,7 @@ function FootfallByGender({
                         },
                         emptyStateSx
                       ),
-                      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                         ChartEmptyState,
                         {
                           minHeight: chartHeight,
@@ -7607,7 +8001,7 @@ function FootfallByGender({
                   )
                 }
               ),
-              showLegend && processedData.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+              showLegend && processedData.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
                 import_Box10.default,
                 {
                   component: "ul",
@@ -7632,7 +8026,7 @@ function FootfallByGender({
                     legendOverlaySx
                   ),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+                    showMaleLegend ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
                       import_Box10.default,
                       {
                         component: "li",
@@ -7646,7 +8040,7 @@ function FootfallByGender({
                           legendItemSx
                         ),
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                             import_Box10.default,
                             {
                               sx: sxChain2(
@@ -7661,7 +8055,7 @@ function FootfallByGender({
                               )
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                             import_Typography7.default,
                             {
                               component: "span",
@@ -7679,8 +8073,8 @@ function FootfallByGender({
                           )
                         ]
                       }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+                    ) : null,
+                    showFemaleLegend ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
                       import_Box10.default,
                       {
                         component: "li",
@@ -7694,7 +8088,7 @@ function FootfallByGender({
                           legendItemSx
                         ),
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                             import_Box10.default,
                             {
                               sx: sxChain2(
@@ -7709,7 +8103,7 @@ function FootfallByGender({
                               )
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                             import_Typography7.default,
                             {
                               component: "span",
@@ -7727,7 +8121,7 @@ function FootfallByGender({
                           )
                         ]
                       }
-                    )
+                    ) : null
                   ]
                 }
               ) : null
@@ -7774,7 +8168,7 @@ function useChartPlotScrollToEnd(scrollRef, options) {
 }
 
 // src/components/widgets/PasserbyConversion/PasserbyConversion.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var OLY_DEFAULT_COMPOSED_CHART_HEIGHT_PX3 = 430;
 var OLY_DEFAULT_COMPOSED_CHART_CHROME3 = {
   cartesianGridStroke: "#D3D6DF",
@@ -7809,6 +8203,31 @@ function formatBarLabel3(value) {
   }
   return String(value);
 }
+function MultiLineTick3({
+  x = 0,
+  y = 0,
+  payload,
+  angle = -42,
+  textAnchor = "end",
+  fontSize = 12
+}) {
+  if (!payload?.value) return null;
+  const lines = String(payload.value).split("\n");
+  const lineHeight = fontSize * 1.3;
+  const isHorizontal = angle === 0;
+  const anchor = isHorizontal ? "middle" : textAnchor;
+  const dy0 = isHorizontal ? lineHeight * 0.35 : 4;
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("g", { transform: `translate(${x},${y})`, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    "text",
+    {
+      transform: `rotate(${angle})`,
+      textAnchor: anchor,
+      fontSize,
+      fill: "#666",
+      children: lines.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("tspan", { x: 0, dy: i === 0 ? dy0 : lineHeight, children: line }, i))
+    }
+  ) });
+}
 function formatYAxisTickDefault2(value) {
   if (!Number.isFinite(value)) {
     return "";
@@ -7821,7 +8240,7 @@ function formatYAxisTickDefault2(value) {
   }
   return String(value);
 }
-function toNum2(n) {
+function toNum3(n) {
   if (n === void 0) return void 0;
   return typeof n === "number" ? n : Number(n);
 }
@@ -7832,9 +8251,9 @@ function BarTopLabel({
   value,
   fill
 }) {
-  const nx = toNum2(x);
-  const ny = toNum2(y);
-  const nw = toNum2(width);
+  const nx = toNum3(x);
+  const ny = toNum3(y);
+  const nw = toNum3(width);
   if (nx === void 0 || ny === void 0 || nw === void 0) {
     return null;
   }
@@ -7843,8 +8262,8 @@ function BarTopLabel({
     return null;
   }
   const cx = nx + nw / 2;
-  const cy = ny - 6;
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  const cy = ny - 10;
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "text",
     {
       x: cx,
@@ -7921,7 +8340,7 @@ function ConversionTooltip({
     },
     ts?.seriesDot
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     "div",
     {
       style: mergeCss4(
@@ -7939,28 +8358,28 @@ function ConversionTooltip({
         ts?.container
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { style: mergeCss4(rowBase, ts?.row), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { style: labelStyle, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { style: mergeCss4(rowBase, ts?.row), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { style: labelStyle, children: [
             timeLabel,
             ":"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { style: valueStyle, children: timeDisplay })
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { style: valueStyle, children: timeDisplay })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { style: mergeCss4(rowBase, ts?.row), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { style: labelStyle, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { style: mergeCss4(rowBase, ts?.row), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { style: labelStyle, children: [
             overallLabel,
             ":"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { style: valueStyle, children: overall.toLocaleString() })
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { style: valueStyle, children: overall.toLocaleString() })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { style: mergeCss4(rowBase, ts?.row), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { style: mergeCss4(rowBase, ts?.row), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             "span",
             {
               style: mergeCss4({ ...dotBase, backgroundColor: colors.walkIns })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
             "span",
             {
               style: mergeCss4(
@@ -7973,7 +8392,7 @@ function ConversionTooltip({
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             "span",
             {
               style: mergeCss4(
@@ -7984,7 +8403,7 @@ function ConversionTooltip({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
           "div",
           {
             style: mergeCss4(
@@ -7992,13 +8411,13 @@ function ConversionTooltip({
               ts?.row
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                 "span",
                 {
                   style: mergeCss4({ ...dotBase, backgroundColor: colors.passerby })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
                 "span",
                 {
                   style: mergeCss4(
@@ -8011,7 +8430,7 @@ function ConversionTooltip({
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                 "span",
                 {
                   style: mergeCss4(
@@ -8024,14 +8443,14 @@ function ConversionTooltip({
             ]
           }
         ),
-        showConv ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { style: mergeCss4({ ...rowBase, marginBottom: 0 }, ts?.row), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        showConv ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { style: mergeCss4({ ...rowBase, marginBottom: 0 }, ts?.row), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             "span",
             {
               style: mergeCss4({ ...dotBase, backgroundColor: colors.conversion })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
             "span",
             {
               style: mergeCss4(
@@ -8044,7 +8463,7 @@ function ConversionTooltip({
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             "span",
             {
               style: mergeCss4(
@@ -8118,7 +8537,8 @@ function PasserbyConversion({
   emptyStatePlaceholderProps,
   isChartAnimationActive = true,
   chartAnimationDuration = 400,
-  scrollChartToEndOnDataChange = true
+  scrollChartToEndOnDataChange = true,
+  xAxisTickAngle = 0
 }) {
   const [activeIndex, setActiveIndex] = React14.useState(null);
   const handleBarMouseEnter = React14.useCallback((_, index) => {
@@ -8159,17 +8579,6 @@ function PasserbyConversion({
     [processedData]
   );
   const showConversionLine = showConversionLineProp !== void 0 ? showConversionLineProp : hasConversionData;
-  const resolvedMaxBarSize = React14.useMemo(() => {
-    if (maxBarSizeProp !== void 0) {
-      return maxBarSizeProp;
-    }
-    const categoryCap = minWidthPerCategory > 0 ? minWidthPerCategory : defaultMinWidthPerCategory3;
-    if (categoryCap <= 2 * defaultMaxBarThickness3) {
-      return Math.min(categoryCap, defaultMaxBarThickness3);
-    }
-    const perBarIdeal = Math.max(8, Math.floor(categoryCap / 2 * 0.92));
-    return Math.min(perBarIdeal, categoryCap);
-  }, [maxBarSizeProp, minWidthPerCategory]);
   const categoryScrollActive = React14.useMemo(() => {
     if (minWidthPerCategory <= 0) {
       return false;
@@ -8217,6 +8626,31 @@ function PasserbyConversion({
     }
     return Math.max(chartInnerMinWidthPx, containerWidth);
   }, [chartInnerMinWidthPx, containerWidth]);
+  const targetBarWidth = maxBarSizeProp ?? defaultMaxBarThickness3;
+  const resolvedPlotGutterPx = React14.useMemo(() => {
+    const leftAxisWidth = 44;
+    const rightAxisWidth = showConversionLine ? 44 : 0;
+    const leftMargin = chartMarginProp?.left ?? defaultChartMargin3.left;
+    const rightMargin = chartMarginProp?.right ?? (showConversionLine ? 52 : defaultChartMargin3.right);
+    return leftMargin + leftAxisWidth + rightAxisWidth + rightMargin;
+  }, [showConversionLine, chartMarginProp]);
+  const resolvedBarCategoryGapPx = React14.useMemo(() => {
+    const effectiveWidth = chartWidthPx > 0 ? chartWidthPx : containerWidth;
+    if (effectiveWidth <= 0) return 4;
+    const n = Math.max(processedData.length, 1);
+    const plotWidth = effectiveWidth - resolvedPlotGutterPx;
+    const bandSize = plotWidth / n;
+    const numericBarGap = typeof barGap === "number" ? barGap : 0;
+    return Math.max(0, (bandSize - targetBarWidth * 2 - numericBarGap) / 2);
+  }, [
+    processedData.length,
+    chartWidthPx,
+    containerWidth,
+    barGap,
+    targetBarWidth,
+    resolvedPlotGutterPx
+  ]);
+  const resolvedMaxBarSize = targetBarWidth;
   const chartColors = React14.useMemo(
     () => ({
       ...defaultChartColors3,
@@ -8273,7 +8707,7 @@ function PasserbyConversion({
     chartColors.conversionLineStroke,
     showConversionLine
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     import_Box11.default,
     {
       sx: sxChain3(
@@ -8290,8 +8724,8 @@ function PasserbyConversion({
         },
         cardSx
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_Stack9.default, { spacing: 2, sx: sxChain3({ minWidth: 0 }, stackSx), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_Stack9.default, { spacing: 2, sx: sxChain3({ minWidth: 0 }, stackSx), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
           import_Box11.default,
           {
             sx: sxChain3(
@@ -8306,7 +8740,7 @@ function PasserbyConversion({
               titleRowSx
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                 import_Typography8.default,
                 {
                   component: "h2",
@@ -8324,12 +8758,12 @@ function PasserbyConversion({
                   children: title
                 }
               ),
-              headerActions ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_Box11.default, { sx: { flexShrink: 0, display: "flex", alignItems: "center" }, children: headerActions }) : null
+              headerActions ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_Box11.default, { sx: { flexShrink: 0, display: "flex", alignItems: "center" }, children: headerActions }) : null
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_Divider4.default, { sx: sxChain3({ borderColor: "#D8D9E4" }, dividerSx) }),
-        showLegend && hasMeaningfulData && legendItems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_Divider4.default, { sx: sxChain3({ borderColor: "#D8D9E4" }, dividerSx) }),
+        showLegend && hasMeaningfulData && legendItems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           import_Box11.default,
           {
             sx: sxChain3(
@@ -8345,14 +8779,14 @@ function PasserbyConversion({
               },
               legendRowSx
             ),
-            children: legendItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+            children: legendItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
               import_Stack9.default,
               {
                 direction: "row",
                 alignItems: "center",
                 sx: sxChain3({ gap: 1 }, legendItemSx),
                 children: [
-                  item.isLine ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                  item.isLine ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                     import_Box11.default,
                     {
                       sx: sxChain3(
@@ -8367,7 +8801,7 @@ function PasserbyConversion({
                         legendSwatchSx
                       )
                     }
-                  ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                     import_Box11.default,
                     {
                       sx: sxChain3(
@@ -8382,7 +8816,7 @@ function PasserbyConversion({
                       )
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                     import_Typography8.default,
                     {
                       sx: sxChain3(
@@ -8403,7 +8837,7 @@ function PasserbyConversion({
             ))
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           import_Box11.default,
           {
             ref: scrollRef,
@@ -8419,7 +8853,7 @@ function PasserbyConversion({
               },
               chartScrollAreaSx
             ),
-            children: hasMeaningfulData ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+            children: hasMeaningfulData ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
               import_recharts3.ComposedChart,
               {
                 width: chartWidthPx,
@@ -8428,10 +8862,11 @@ function PasserbyConversion({
                 margin: chartMargin,
                 maxBarSize: resolvedMaxBarSize,
                 barGap,
+                barCategoryGap: resolvedBarCategoryGapPx,
                 style: { overflow: "visible" },
                 onMouseLeave: handleChartMouseLeave,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                     import_recharts3.CartesianGrid,
                     {
                       strokeDasharray: "3 3",
@@ -8440,23 +8875,20 @@ function PasserbyConversion({
                       stroke: chartColors.cartesianGridStroke
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                     import_recharts3.XAxis,
                     {
                       dataKey: "name",
                       xAxisId: "bottom",
-                      angle: -42,
-                      textAnchor: "end",
                       interval: 0,
-                      height: 64,
-                      tickMargin: 8,
-                      dy: 4,
-                      tick: { fontSize: 12 },
+                      height: 68,
+                      tickMargin: 10,
+                      tick: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MultiLineTick3, { angle: xAxisTickAngle }),
                       axisLine: { stroke: chartColors.xAxisLineStroke },
                       tickLine: { stroke: chartColors.axisTickLineStroke }
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                     import_recharts3.YAxis,
                     {
                       yAxisId: "left",
@@ -8468,7 +8900,7 @@ function PasserbyConversion({
                       width: 44
                     }
                   ),
-                  showConversionLine ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                  showConversionLine ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                     import_recharts3.YAxis,
                     {
                       yAxisId: "right",
@@ -8495,7 +8927,7 @@ function PasserbyConversion({
                       } : {}
                     }
                   ) : null,
-                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                     import_recharts3.Tooltip,
                     {
                       cursor: false,
@@ -8507,9 +8939,9 @@ function PasserbyConversion({
                             rows: processedData,
                             showConversionLine
                           });
-                          return customTooltip == null ? null : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children: customTooltip });
+                          return customTooltip == null ? null : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children: customTooltip });
                         }
-                        return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                        return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                           ConversionTooltip,
                           {
                             ...tooltipProps,
@@ -8531,7 +8963,7 @@ function PasserbyConversion({
                       }
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
                     import_recharts3.Bar,
                     {
                       yAxisId: "left",
@@ -8544,7 +8976,7 @@ function PasserbyConversion({
                       radius: [2, 2, 0, 0],
                       onMouseEnter: handleBarMouseEnter,
                       children: [
-                        processedData.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                        processedData.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                           import_recharts3.Cell,
                           {
                             fill: chartColors.passerbyBarFill,
@@ -8552,10 +8984,10 @@ function PasserbyConversion({
                           },
                           `pb-${i}`
                         )),
-                        showBarValueLabels ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                        showBarValueLabels ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                           import_recharts3.LabelList,
                           {
-                            content: (props) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                            content: (props) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                               BarTopLabel,
                               {
                                 ...props,
@@ -8567,7 +8999,7 @@ function PasserbyConversion({
                       ]
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
                     import_recharts3.Bar,
                     {
                       yAxisId: "left",
@@ -8580,7 +9012,7 @@ function PasserbyConversion({
                       radius: [2, 2, 0, 0],
                       onMouseEnter: handleBarMouseEnter,
                       children: [
-                        processedData.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                        processedData.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                           import_recharts3.Cell,
                           {
                             fill: chartColors.walkInsBarFill,
@@ -8588,10 +9020,10 @@ function PasserbyConversion({
                           },
                           `wi-${i}`
                         )),
-                        showBarValueLabels ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                        showBarValueLabels ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                           import_recharts3.LabelList,
                           {
-                            content: (props) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                            content: (props) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                               BarTopLabel,
                               {
                                 ...props,
@@ -8603,7 +9035,7 @@ function PasserbyConversion({
                       ]
                     }
                   ),
-                  showConversionLine ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                  showConversionLine ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                     import_recharts3.Line,
                     {
                       yAxisId: "right",
@@ -8625,7 +9057,7 @@ function PasserbyConversion({
                   ) : null
                 ]
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            ) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
               import_Box11.default,
               {
                 sx: sxChain3(
@@ -8637,7 +9069,7 @@ function PasserbyConversion({
                   },
                   emptyStateSx
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                   ChartEmptyState,
                   {
                     minHeight: chartHeight,
@@ -8661,7 +9093,7 @@ var import_Typography9 = __toESM(require("@mui/material/Typography"));
 var import_useMediaQuery = __toESM(require("@mui/material/useMediaQuery"));
 var React15 = __toESM(require("react"));
 var import_recharts4 = require("recharts");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var OLY_LIFESTYLE_STRONG_TITLE_COLOR = "#0f172a";
 var OLY_LIFESTYLE_LEGEND_VALUE_COLOR = "#64748B";
 var walkinPieSizeDefaults = { xs: 180, sm: 220, md: 260 };
@@ -8735,7 +9167,7 @@ function WalkinPieTooltip({
     return null;
   }
   const pct = sliceTotal > 0 ? Math.round(datum.value / sliceTotal * 100) : 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     import_Box12.default,
     {
       sx: {
@@ -8748,8 +9180,8 @@ function WalkinPieTooltip({
         minWidth: 168
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_Stack10.default, { direction: "row", alignItems: "center", spacing: 1, sx: { mb: 0.75 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_Stack10.default, { direction: "row", alignItems: "center", spacing: 1, sx: { mb: 0.75 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             import_Box12.default,
             {
               sx: {
@@ -8761,7 +9193,7 @@ function WalkinPieTooltip({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             import_Typography9.default,
             {
               sx: {
@@ -8774,7 +9206,7 @@ function WalkinPieTooltip({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
           import_Typography9.default,
           {
             variant: "body2",
@@ -8819,7 +9251,7 @@ function WalkinPiePercentLabel(props) {
   const rad = -midAngle * Math.PI / 180;
   const x = cx + labelRadius * Math.cos(rad);
   const y = cy + labelRadius * Math.sin(rad);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     "text",
     {
       x,
@@ -8852,10 +9284,10 @@ function WalkinPieChart({
   const tooltipTitleSize = resolveFontSize(typography?.tooltipTitle, 13);
   const tooltipValueSize = resolveFontSize(typography?.tooltipValue, 12);
   if (total <= 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ChartEmptyState, { minHeight: size, ...emptyStatePlaceholderProps });
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartEmptyState, { minHeight: size, ...emptyStatePlaceholderProps });
   }
   const outerRadius = size * 0.42;
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     import_Box12.default,
     {
       role: "img",
@@ -8866,8 +9298,8 @@ function WalkinPieChart({
         lineHeight: 0,
         "& .recharts-surface:focus": { outline: "none" }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_recharts4.ResponsiveContainer, { width: size, height: size, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_recharts4.PieChart, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_recharts4.ResponsiveContainer, { width: size, height: size, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_recharts4.PieChart, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           import_recharts4.Tooltip,
           {
             content: (tooltipProps) => {
@@ -8878,9 +9310,9 @@ function WalkinPieChart({
                   total,
                   activeTabId
                 });
-                return customTooltip == null ? null : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_jsx_runtime31.Fragment, { children: customTooltip });
+                return customTooltip == null ? null : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children: customTooltip });
               }
-              return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                 WalkinPieTooltip,
                 {
                   ...tooltipProps,
@@ -8893,7 +9325,7 @@ function WalkinPieChart({
             wrapperStyle: { outline: "none", zIndex: 2 }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           import_recharts4.Pie,
           {
             data: pieData,
@@ -8910,17 +9342,17 @@ function WalkinPieChart({
             labelLine: false,
             isAnimationActive: isChartAnimationActive,
             animationDuration: chartAnimationDuration,
-            label: (labelProps) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+            label: (labelProps) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               WalkinPiePercentLabel,
               {
                 ...labelProps,
                 fontSize: piePercentSize
               }
             ),
-            children: pieData.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_recharts4.Cell, { fill: entry.color, stroke: "none" }, entry.id))
+            children: pieData.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_recharts4.Cell, { fill: entry.color, stroke: "none" }, entry.id))
           }
         )
-      ] }) })
+      ] }, activeTabId) })
     }
   );
 }
@@ -8945,7 +9377,7 @@ var WalkinAnalysis = ({
 }) => {
   const resolvedPieSize = useWalkinResolvedPieSize(pieSize);
   const total = slices.reduce((sum, s) => sum + s.count, 0);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     import_Box12.default,
     {
       sx: {
@@ -8958,8 +9390,8 @@ var WalkinAnalysis = ({
         boxSizing: "border-box",
         ...cardSx
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_Stack10.default, { spacing: 2.5, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_Stack10.default, { spacing: 2.5, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
           import_Stack10.default,
           {
             direction: "row",
@@ -8970,7 +9402,7 @@ var WalkinAnalysis = ({
               sx: [customization.titleRowStackSx]
             } : {},
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                 import_Typography9.default,
                 {
                   component: "h2",
@@ -8987,11 +9419,11 @@ var WalkinAnalysis = ({
                   children: title
                 }
               ),
-              headerActions ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_Box12.default, { sx: { flexShrink: 0 }, children: headerActions }) : null
+              headerActions ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_Box12.default, { sx: { flexShrink: 0 }, children: headerActions }) : null
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           ChartWidgetSegmentedTabs,
           {
             tabs,
@@ -9003,7 +9435,7 @@ var WalkinAnalysis = ({
             rootSx: segmentedTabsSx
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
           import_Stack10.default,
           {
             direction: { xs: "column", sm: "row" },
@@ -9015,14 +9447,14 @@ var WalkinAnalysis = ({
               ...customization?.chartLegendRowSx != null ? [customization.chartLegendRowSx] : []
             ],
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                 import_Box12.default,
                 {
                   sx: [
                     { flexShrink: 0, lineHeight: 0 },
                     ...customization?.pieChartBoxSx != null ? [customization.pieChartBoxSx] : []
                   ],
-                  children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                     WalkinPieChart,
                     {
                       slices,
@@ -9037,7 +9469,7 @@ var WalkinAnalysis = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                 import_Stack10.default,
                 {
                   spacing: 2,
@@ -9052,8 +9484,8 @@ var WalkinAnalysis = ({
                   ],
                   children: slices.map((slice) => {
                     const pct = total > 0 ? Math.round(slice.count / total * 100) : 0;
-                    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_Stack10.default, { spacing: 0.75, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_Stack10.default, { spacing: 0.75, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                         import_Typography9.default,
                         {
                           sx: [
@@ -9071,8 +9503,8 @@ var WalkinAnalysis = ({
                           children: slice.label
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_Stack10.default, { direction: "row", alignItems: "center", spacing: 1, children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_Stack10.default, { direction: "row", alignItems: "center", spacing: 1, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                           import_Box12.default,
                           {
                             sx: {
@@ -9084,7 +9516,7 @@ var WalkinAnalysis = ({
                             }
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+                        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
                           import_Typography9.default,
                           {
                             variant: "body2",
@@ -9106,7 +9538,7 @@ var WalkinAnalysis = ({
                             ]
                           }
                         ),
-                        slice.legendInfo ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_Box12.default, { sx: { display: "inline-flex", flexShrink: 0 }, children: slice.legendInfo }) : null
+                        slice.legendInfo ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_Box12.default, { sx: { display: "inline-flex", flexShrink: 0 }, children: slice.legendInfo }) : null
                       ] })
                     ] }, slice.id);
                   })
@@ -9127,7 +9559,7 @@ var import_Stack11 = __toESM(require("@mui/material/Stack"));
 var import_Typography10 = __toESM(require("@mui/material/Typography"));
 var React16 = __toESM(require("react"));
 var import_recharts5 = require("recharts");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var defaultFfGrowthTooltipFooterNote = "*This FF Growth % compares today's hourly FF with the same hours on this date last year.";
 var OLY_DEFAULT_COMPOSED_CHART_HEIGHT_PX4 = 430;
 var OLY_DEFAULT_COMPOSED_CHART_CHROME4 = {
@@ -9159,7 +9591,7 @@ function tooltipDatumFromPayload2(payload) {
 function GrowthDirectionIcon({ direction }) {
   const bg = direction === "up" ? "#22C55E" : "#EF4444";
   const glyph = direction === "up" ? "\u25B2" : "\u25BC";
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     "span",
     {
       style: {
@@ -9174,7 +9606,7 @@ function GrowthDirectionIcon({ direction }) {
         flexShrink: 0
       },
       "aria-hidden": true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         "span",
         {
           style: {
@@ -9204,6 +9636,31 @@ function formatBarLabel4(value) {
   }
   return String(value);
 }
+function MultiLineTick4({
+  x = 0,
+  y = 0,
+  payload,
+  angle = -42,
+  textAnchor = "end",
+  fontSize = 12
+}) {
+  if (!payload?.value) return null;
+  const lines = String(payload.value).split("\n");
+  const lineHeight = fontSize * 1.3;
+  const isHorizontal = angle === 0;
+  const anchor = isHorizontal ? "middle" : textAnchor;
+  const dy0 = isHorizontal ? lineHeight * 0.35 : 4;
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("g", { transform: `translate(${x},${y})`, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    "text",
+    {
+      transform: `rotate(${angle})`,
+      textAnchor: anchor,
+      fontSize,
+      fill: "#666",
+      children: lines.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("tspan", { x: 0, dy: i === 0 ? dy0 : lineHeight, children: line }, i))
+    }
+  ) });
+}
 function formatYAxisTickDefault3(value) {
   if (!Number.isFinite(value)) {
     return "";
@@ -9216,7 +9673,7 @@ function formatYAxisTickDefault3(value) {
   }
   return String(value);
 }
-function toNum3(n) {
+function toNum4(n) {
   if (n === void 0) return void 0;
   return typeof n === "number" ? n : Number(n);
 }
@@ -9227,9 +9684,9 @@ function BarTopLabel2({
   value,
   fill
 }) {
-  const nx = toNum3(x);
-  const ny = toNum3(y);
-  const nw = toNum3(width);
+  const nx = toNum4(x);
+  const ny = toNum4(y);
+  const nw = toNum4(width);
   if (nx === void 0 || ny === void 0 || nw === void 0) {
     return null;
   }
@@ -9238,8 +9695,8 @@ function BarTopLabel2({
     return null;
   }
   const cx = nx + nw / 2;
-  const cy = ny - 6;
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  const cy = ny - 10;
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     "text",
     {
       x: cx,
@@ -9282,7 +9739,7 @@ function TrafficTooltip({
   const growth = typeof growthRaw === "number" && Number.isFinite(growthRaw) ? growthRaw : NaN;
   const showGrowthRow = Number.isFinite(growth);
   const growthDirection = !showGrowthRow ? null : growth > 0 ? "up" : growth < 0 ? "down" : null;
-  const showFooter = hasFooterText(footerNote);
+  const showFooter = hasFooterText(footerNote) && showGrowthRow;
   const footerText = showFooter && typeof footerNote === "string" ? footerNote.trim() : "";
   const ts = tooltipStyles;
   const rowBase = {
@@ -9301,7 +9758,7 @@ function TrafficTooltip({
     { color: "#757575", fontSize: 11, fontWeight: 400 },
     ts?.value
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     "div",
     {
       style: mergeCss5(
@@ -9313,7 +9770,7 @@ function TrafficTooltip({
         ts?.wrapper
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           "div",
           {
             style: {
@@ -9331,7 +9788,7 @@ function TrafficTooltip({
             "aria-hidden": true
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
           "div",
           {
             style: mergeCss5(
@@ -9351,7 +9808,7 @@ function TrafficTooltip({
               ts?.container
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
                 "div",
                 {
                   style: mergeCss5(
@@ -9364,7 +9821,7 @@ function TrafficTooltip({
                     ts?.header
                   ),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                       "span",
                       {
                         style: mergeCss5(
@@ -9379,7 +9836,7 @@ function TrafficTooltip({
                         )
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                       "span",
                       {
                         style: mergeCss5(
@@ -9397,28 +9854,28 @@ function TrafficTooltip({
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { style: mergeCss5(rowBase, ts?.row), children: [
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { style: labelStyle, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { style: mergeCss5(rowBase, ts?.row), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { style: labelStyle, children: [
                   timeLabel,
                   ":"
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { style: valueStyle, children: timeDisplay })
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { style: valueStyle, children: timeDisplay })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { style: mergeCss5(rowBase, ts?.row), children: [
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { style: labelStyle, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { style: mergeCss5(rowBase, ts?.row), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { style: labelStyle, children: [
                   currentYearLabel,
                   ":"
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { style: valueStyle, children: Number.isFinite(walk) ? walk.toLocaleString() : "\u2014" })
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { style: valueStyle, children: Number.isFinite(walk) ? walk.toLocaleString() : "\u2014" })
               ] }),
-              showTrendLine && Number.isFinite(trend) ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { style: mergeCss5(rowBase, ts?.row), children: [
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { style: labelStyle, children: [
+              showTrendLine && Number.isFinite(trend) ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { style: mergeCss5(rowBase, ts?.row), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { style: labelStyle, children: [
                   lastYearLabel,
                   ":"
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { style: valueStyle, children: trend.toLocaleString() })
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { style: valueStyle, children: trend.toLocaleString() })
               ] }) : null,
-              showGrowthRow ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+              showGrowthRow ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
                 "div",
                 {
                   style: mergeCss5(
@@ -9430,16 +9887,16 @@ function TrafficTooltip({
                     ts?.row
                   ),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { style: labelStyle, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { style: labelStyle, children: [
                       growthLabel,
                       ":"
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { style: valueStyle, children: `${Number.isInteger(growth) ? String(growth) : growth.toFixed(1)}%` }),
-                    growthDirection ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(GrowthDirectionIcon, { direction: growthDirection }) : null
+                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { style: valueStyle, children: `${Number.isInteger(growth) ? String(growth) : growth.toFixed(1)}%` }),
+                    growthDirection ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(GrowthDirectionIcon, { direction: growthDirection }) : null
                   ]
                 }
               ) : null,
-              showFooter ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+              showFooter ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                 "p",
                 {
                   style: mergeCss5(
@@ -9516,7 +9973,8 @@ function WalkinTraffic({
   yAxisTickFormatter,
   isChartAnimationActive = true,
   chartAnimationDuration = 400,
-  scrollChartToEndOnDataChange = true
+  scrollChartToEndOnDataChange = true,
+  xAxisTickAngle = 0
 }) {
   const tooltipFooterNote = tooltipFooterNoteProp === void 0 ? defaultFfGrowthTooltipFooterNote : tooltipFooterNoteProp;
   const processedData = React16.useMemo(
@@ -9633,7 +10091,7 @@ function WalkinTraffic({
     showLineInLegend,
     showTrendLine
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     import_Box13.default,
     {
       sx: sxChain4(
@@ -9650,8 +10108,8 @@ function WalkinTraffic({
         },
         cardSx
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_Stack11.default, { spacing: 2, sx: sxChain4({ minWidth: 0 }, stackSx), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_Stack11.default, { spacing: 2, sx: sxChain4({ minWidth: 0 }, stackSx), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
           import_Box13.default,
           {
             sx: sxChain4(
@@ -9662,7 +10120,7 @@ function WalkinTraffic({
               titleRowSx
             ),
             children: [
-              headerActions ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+              headerActions ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                 import_Box13.default,
                 {
                   sx: {
@@ -9675,7 +10133,7 @@ function WalkinTraffic({
                   children: headerActions
                 }
               ) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                 import_Typography10.default,
                 {
                   component: "h2",
@@ -9696,8 +10154,8 @@ function WalkinTraffic({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_Divider5.default, { sx: sxChain4({ borderColor: "#D8D9E4" }, dividerSx) }),
-        showLegend && hasMeaningfulData && legendItems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_Divider5.default, { sx: sxChain4({ borderColor: "#D8D9E4" }, dividerSx) }),
+        showLegend && hasMeaningfulData && legendItems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           import_Box13.default,
           {
             sx: sxChain4(
@@ -9713,14 +10171,14 @@ function WalkinTraffic({
               },
               legendRowSx
             ),
-            children: legendItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+            children: legendItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
               import_Stack11.default,
               {
                 direction: "row",
                 alignItems: "center",
                 sx: sxChain4({ gap: 1 }, legendItemSx),
                 children: [
-                  item.isLine ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                  item.isLine ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                     import_Box13.default,
                     {
                       sx: sxChain4(
@@ -9735,7 +10193,7 @@ function WalkinTraffic({
                         legendSwatchSx
                       )
                     }
-                  ) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                     import_Box13.default,
                     {
                       sx: sxChain4(
@@ -9750,7 +10208,7 @@ function WalkinTraffic({
                       )
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                     import_Typography10.default,
                     {
                       sx: sxChain4(
@@ -9771,7 +10229,7 @@ function WalkinTraffic({
             ))
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           import_Box13.default,
           {
             ref: scrollRef,
@@ -9787,7 +10245,7 @@ function WalkinTraffic({
               },
               chartScrollAreaSx
             ),
-            children: hasMeaningfulData ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+            children: hasMeaningfulData ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
               import_recharts5.ComposedChart,
               {
                 width: chartWidthPx,
@@ -9797,7 +10255,7 @@ function WalkinTraffic({
                 maxBarSize: resolvedMaxBarSize,
                 style: { overflow: "visible" },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                     import_recharts5.CartesianGrid,
                     {
                       strokeDasharray: "3 3",
@@ -9806,22 +10264,19 @@ function WalkinTraffic({
                       stroke: chartColors.cartesianGridStroke
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                     import_recharts5.XAxis,
                     {
                       dataKey: "name",
-                      angle: -42,
-                      textAnchor: "end",
                       interval: 0,
-                      height: 64,
-                      tickMargin: 8,
-                      dy: 4,
-                      tick: { fontSize: 12 },
+                      height: 68,
+                      tickMargin: 10,
+                      tick: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(MultiLineTick4, { angle: xAxisTickAngle }),
                       axisLine: { stroke: chartColors.xAxisLineStroke },
                       tickLine: { stroke: chartColors.axisTickLineStroke }
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                     import_recharts5.YAxis,
                     {
                       tickSize: 8,
@@ -9831,7 +10286,7 @@ function WalkinTraffic({
                       tickLine: { stroke: chartColors.axisTickLineStroke }
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                     import_recharts5.Tooltip,
                     {
                       cursor: false,
@@ -9843,9 +10298,9 @@ function WalkinTraffic({
                             rows: processedData,
                             showTrendLine
                           });
-                          return customTooltip == null ? null : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children: customTooltip });
+                          return customTooltip == null ? null : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx_runtime34.Fragment, { children: customTooltip });
                         }
-                        return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                        return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                           TrafficTooltip,
                           {
                             ...tooltipProps,
@@ -9863,7 +10318,7 @@ function WalkinTraffic({
                       }
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                     import_recharts5.Bar,
                     {
                       dataKey: BAR_KEY,
@@ -9872,10 +10327,10 @@ function WalkinTraffic({
                       isAnimationActive: isChartAnimationActive,
                       animationDuration: chartAnimationDuration,
                       radius: [2, 2, 0, 0],
-                      children: showBarValueLabels ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                      children: showBarValueLabels ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                         import_recharts5.LabelList,
                         {
-                          content: (props) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                          content: (props) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                             BarTopLabel2,
                             {
                               ...props,
@@ -9886,7 +10341,7 @@ function WalkinTraffic({
                       ) : null
                     }
                   ),
-                  showTrendLine ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                  showTrendLine ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                     import_recharts5.Line,
                     {
                       type: lineType,
@@ -9902,7 +10357,7 @@ function WalkinTraffic({
                   ) : null
                 ]
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            ) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
               import_Box13.default,
               {
                 sx: sxChain4(
@@ -9914,7 +10369,7 @@ function WalkinTraffic({
                   },
                   emptyStateSx
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                   ChartEmptyState,
                   {
                     minHeight: chartHeight,
@@ -10016,21 +10471,21 @@ function mergeSx3(...parts) {
 
 // src/components/BillingCounterAnalytics/BillingCounterAnalyticsCustomizationContext.tsx
 var React17 = __toESM(require("react"));
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var BillingCounterAnalyticsCustomizationContext = React17.createContext({});
 function BillingCounterAnalyticsCustomizationProvider({
   value,
   children
 }) {
   const memo = React17.useMemo(() => value, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(BillingCounterAnalyticsCustomizationContext.Provider, { value: memo, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(BillingCounterAnalyticsCustomizationContext.Provider, { value: memo, children });
 }
 function useBillingCounterAnalyticsCustomization() {
   return React17.useContext(BillingCounterAnalyticsCustomizationContext);
 }
 
 // src/components/BillingCounterAnalytics/BillingCounterAnalyticsTooltip.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function formatTooltipValue(n) {
   return new Intl.NumberFormat(void 0, { maximumFractionDigits: 0 }).format(
     Math.round(n)
@@ -10077,7 +10532,7 @@ function BillingCounterAnalyticsTooltip(props) {
     },
     tt?.bodyStyle
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     "div",
     {
       style: {
@@ -10085,7 +10540,7 @@ function BillingCounterAnalyticsTooltip(props) {
         minWidth: 160,
         maxWidth: 280
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
         "div",
         {
           style: {
@@ -10096,7 +10551,7 @@ function BillingCounterAnalyticsTooltip(props) {
             boxShadow: shadow
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
               "div",
               {
                 style: {
@@ -10107,14 +10562,14 @@ function BillingCounterAnalyticsTooltip(props) {
                 "aria-hidden": true
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { style: bodyStyle, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { style: rowStyle, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { style: { color: prefixCol, fontWeight: prefixFw }, children: dateP }),
-                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { style: { color: valueCol, fontWeight: valueFw }, children: labelText })
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { style: bodyStyle, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { style: rowStyle, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { style: { color: prefixCol, fontWeight: prefixFw }, children: dateP }),
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { style: { color: valueCol, fontWeight: valueFw }, children: labelText })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { style: { ...rowStyle, marginTop: gap }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { style: { color: prefixCol, fontWeight: prefixFw }, children: totalP }),
-                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { style: { color: valueCol, fontWeight: valueFw }, children: formatTooltipValue(num) })
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { style: { ...rowStyle, marginTop: gap }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { style: { color: prefixCol, fontWeight: prefixFw }, children: totalP }),
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { style: { color: valueCol, fontWeight: valueFw }, children: formatTooltipValue(num) })
               ] })
             ] })
           ]
@@ -10125,7 +10580,7 @@ function BillingCounterAnalyticsTooltip(props) {
 }
 
 // src/components/BillingCounterAnalytics/BillingCounterAnalytics.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var OLY_DEFAULT_COMPOSED_CHART_CHROME5 = {
   cartesianGridStroke: "#D3D6DF",
   xAxisLineStroke: "#7566FC",
@@ -10157,8 +10612,8 @@ function LinePlot({
   const cursorStroke = lc?.cursorStroke ?? "#9CA3AF";
   const cursorDash = lc?.cursorStrokeDasharray ?? "4 4";
   const lineType = lc?.lineType ?? "linear";
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_Box14.default, { sx: { width: "100%", height, mt: 0.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_recharts6.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_recharts6.LineChart, { data, margin: m, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_Box14.default, { sx: { width: "100%", height, mt: 0.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_recharts6.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_recharts6.LineChart, { data, margin: m, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       import_recharts6.CartesianGrid,
       {
         strokeDasharray: dash,
@@ -10166,7 +10621,7 @@ function LinePlot({
         stroke: gridStroke
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       import_recharts6.XAxis,
       {
         dataKey: "label",
@@ -10179,7 +10634,7 @@ function LinePlot({
         height: 40
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       import_recharts6.YAxis,
       {
         domain: yAxisDomain,
@@ -10190,7 +10645,7 @@ function LinePlot({
         width: yWidth
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       import_recharts6.Tooltip,
       {
         content: (tooltipProps) => {
@@ -10200,15 +10655,15 @@ function LinePlot({
               data,
               activeTabId
             });
-            return customTooltip == null ? null : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx_runtime35.Fragment, { children: customTooltip });
+            return customTooltip == null ? null : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children: customTooltip });
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(BillingCounterAnalyticsTooltip, { ...tooltipProps });
+          return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(BillingCounterAnalyticsTooltip, { ...tooltipProps });
         },
         cursor: { stroke: cursorStroke, strokeDasharray: cursorDash },
         allowEscapeViewBox: { x: false, y: true }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       import_recharts6.Line,
       {
         type: lineType,
@@ -10267,8 +10722,8 @@ function BillingCounterAnalytics({
     },
     customization?.header?.titleSx
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(BillingCounterAnalyticsCustomizationProvider, { value: customization ?? {}, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_Card.default, { elevation: customization?.rootCard?.elevation ?? 0, sx: rootSx, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_CardContent.default, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_Stack12.default, { spacing: 1.75, sx: { width: "100%" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(BillingCounterAnalyticsCustomizationProvider, { value: customization ?? {}, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_Card.default, { elevation: customization?.rootCard?.elevation ?? 0, sx: rootSx, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_CardContent.default, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_Stack12.default, { spacing: 1.75, sx: { width: "100%" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
       import_Stack12.default,
       {
         direction: "row",
@@ -10277,17 +10732,17 @@ function BillingCounterAnalytics({
         gap: 2,
         flexWrap: "wrap",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_Typography11.default, { sx: titleSx, children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_Typography11.default, { sx: titleSx, children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             import_Stack12.default,
             {
               direction: "row",
               alignItems: "center",
               spacing: 1.5,
               sx: { flexShrink: 0 },
-              children: resolvedInfo ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ChartWidgetHeaderSeparator, {}),
-                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+              children: resolvedInfo ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ChartWidgetHeaderSeparator, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
                   ChartWidgetInfoButton,
                   {
                     popover: resolvedInfo,
@@ -10300,7 +10755,7 @@ function BillingCounterAnalytics({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       ChartWidgetSegmentedTabs,
       {
         tabs,
@@ -10320,7 +10775,7 @@ function BillingCounterAnalytics({
         inactiveTabFontWeight: st?.inactiveTabFontWeight ?? 600
       }
     ),
-    chartData.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    chartData.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       LinePlot,
       {
         data: chartData,
@@ -10329,7 +10784,7 @@ function BillingCounterAnalytics({
         activeTabId,
         renderTooltip
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       ChartEmptyState,
       {
         minHeight: 300,
@@ -10362,14 +10817,14 @@ var React23 = __toESM(require("react"));
 var QUEUE_TIME_BREAKDOWN_DEFAULT_HEADER_IMAGE_SRC = "/images/icon/DwellBreakdownIcon.gif";
 
 // src/components/QueueTimeBreakdown/QueueTimeBreakdownArea.tsx
-var import_material16 = require("@mui/material");
+var import_material18 = require("@mui/material");
 var import_styles6 = require("@mui/material/styles");
 var React20 = __toESM(require("react"));
 var import_recharts7 = require("recharts");
 
 // src/components/QueueTimeBreakdown/QueueTimeBreakdownAreaTooltip.tsx
 var React19 = __toESM(require("react"));
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function numberFromTooltipValue(v) {
   if (typeof v === "number" && Number.isFinite(v)) {
     return v;
@@ -10408,15 +10863,15 @@ function QueueTimeBreakdownAreaTooltip({
   if (!active || payload == null || payload.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { style: s.container, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { style: s.header, children: label != null ? String(label) : "" }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { style: s.body, children: payload.map((entry, i) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { style: s.container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { style: s.header, children: label != null ? String(label) : "" }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { style: s.body, children: payload.map((entry, i) => {
       const name = typeof entry.name === "string" ? entry.name : entry.name != null ? String(entry.name) : "";
       const safe = numberFromTooltipValue(entry.value);
       const color = typeof entry.color === "string" ? entry.color : "#8B5CF6";
       const key = entry.dataKey != null ? String(entry.dataKey) : `row-${i}`;
-      return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { style: s.row, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { style: s.row, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           "span",
           {
             style: {
@@ -10425,15 +10880,15 @@ function QueueTimeBreakdownAreaTooltip({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { style: s.label, children: `${name} :` }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { style: s.value, children: formatVisitorValue(safe) })
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { style: s.label, children: `${name} :` }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { style: s.value, children: formatVisitorValue(safe) })
       ] }, key);
     }) })
   ] });
 }
 
 // src/components/QueueTimeBreakdown/QueueTimeBreakdownArea.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function mergeAreaData(seriesList, categories) {
   return categories.map((cat, i) => {
     const row = { name: cat };
@@ -10475,8 +10930,8 @@ var QueueTimeBreakdownArea = ({
   }, [chartData, series]);
   const yDomain = allZero ? [0, 16e3] : [0, "auto"];
   const yTickCount = allZero ? 5 : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_material16.Stack, { justifyContent: "center", height: stackH, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_recharts7.ResponsiveContainer, { width: "100%", height: chartH, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_recharts7.AreaChart, { data: chartData, margin, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_material18.Stack, { justifyContent: "center", height: stackH, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_recharts7.ResponsiveContainer, { width: "100%", height: chartH, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_recharts7.AreaChart, { data: chartData, margin, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       import_recharts7.CartesianGrid,
       {
         strokeDasharray: "3 3",
@@ -10484,7 +10939,7 @@ var QueueTimeBreakdownArea = ({
         vertical: false
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       import_recharts7.XAxis,
       {
         dataKey: "name",
@@ -10493,7 +10948,7 @@ var QueueTimeBreakdownArea = ({
         tickLine: false
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       import_recharts7.YAxis,
       {
         domain: yDomain,
@@ -10514,7 +10969,7 @@ var QueueTimeBreakdownArea = ({
         }
       }
     ),
-    series.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    series.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       import_recharts7.Area,
       {
         type: "monotone",
@@ -10527,7 +10982,7 @@ var QueueTimeBreakdownArea = ({
       },
       s.name
     )),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       import_recharts7.Tooltip,
       {
         content: (tooltipProps) => {
@@ -10538,10 +10993,10 @@ var QueueTimeBreakdownArea = ({
               series,
               xAxis
             });
-            return custom == null ? null : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children: custom });
+            return custom == null ? null : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_jsx_runtime39.Fragment, { children: custom });
           }
           const { active, payload, label } = tooltipProps;
-          return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
             QueueTimeBreakdownAreaTooltip,
             {
               active,
@@ -10608,7 +11063,7 @@ var import_Stack13 = __toESM(require("@mui/material/Stack"));
 var import_Typography12 = __toESM(require("@mui/material/Typography"));
 var React21 = __toESM(require("react"));
 var import_recharts8 = require("recharts");
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var RADIAN = Math.PI / 180;
 function DefaultDonutTooltip({
   tooltipProps,
@@ -10625,7 +11080,7 @@ function DefaultDonutTooltip({
   const value = typeof rawValue === "number" ? rawValue : Number(rawValue) ?? 0;
   const colorIndex = pieData.findIndex((d) => d.name === name);
   const color = palette[colorIndex % palette.length];
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
     import_Box15.default,
     {
       sx: {
@@ -10638,8 +11093,8 @@ function DefaultDonutTooltip({
         overflow: "hidden"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_Box15.default, { sx: { height: 3, bgcolor: "#E5E7EB", width: "100%" } }),
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_Box15.default, { sx: { height: 3, bgcolor: "#E5E7EB", width: "100%" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
           import_Stack13.default,
           {
             direction: "row",
@@ -10647,7 +11102,7 @@ function DefaultDonutTooltip({
             spacing: 1,
             sx: { px: "10px", py: "6px" },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                 import_Box15.default,
                 {
                   sx: {
@@ -10659,8 +11114,8 @@ function DefaultDonutTooltip({
                   }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_Stack13.default, { direction: "row", spacing: 0.5, alignItems: "baseline", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_Stack13.default, { direction: "row", spacing: 0.5, alignItems: "baseline", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
                   import_Typography12.default,
                   {
                     sx: {
@@ -10675,7 +11130,7 @@ function DefaultDonutTooltip({
                     ]
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                   import_Typography12.default,
                   {
                     sx: {
@@ -10720,7 +11175,7 @@ function DonutInnerPercentLabel(props) {
   const text = `${(p * 100).toFixed(0)}%`;
   const lightSlice = index < 2;
   const fill = lightSlice ? lightSliceFill : darkSliceFill;
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     "text",
     {
       x,
@@ -10768,7 +11223,7 @@ function QueueTimeBreakdownDonut({
     }));
   }, [averageData, labels]);
   const total = pieData.reduce((s, d) => s + d.value, 0) || 1;
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
     import_Box15.default,
     {
       sx: mergeSx2(
@@ -10776,8 +11231,8 @@ function QueueTimeBreakdownDonut({
         dn?.containerSx
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_recharts8.ResponsiveContainer, { width: "100%", height: chartH, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_recharts8.PieChart, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_recharts8.ResponsiveContainer, { width: "100%", height: chartH, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_recharts8.PieChart, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
             import_recharts8.Pie,
             {
               data: pieData,
@@ -10789,7 +11244,7 @@ function QueueTimeBreakdownDonut({
               outerRadius: outerR,
               paddingAngle: padAngle,
               labelLine: false,
-              label: (props) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+              label: (props) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                 DonutInnerPercentLabel,
                 {
                   ...props,
@@ -10797,7 +11252,7 @@ function QueueTimeBreakdownDonut({
                   darkSliceFill: dn?.innerPercentOnDarkSliceFill
                 }
               ),
-              children: pieData.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+              children: pieData.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                 import_recharts8.Cell,
                 {
                   fill: palette[index % palette.length],
@@ -10807,7 +11262,7 @@ function QueueTimeBreakdownDonut({
               ))
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
             import_recharts8.Tooltip,
             {
               contentStyle: tt.contentStyle,
@@ -10823,9 +11278,9 @@ function QueueTimeBreakdownDonut({
                     chartFilter,
                     labelName: LabelName
                   });
-                  return custom == null ? null : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_jsx_runtime38.Fragment, { children: custom });
+                  return custom == null ? null : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_jsx_runtime40.Fragment, { children: custom });
                 }
-                return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                   DefaultDonutTooltip,
                   {
                     tooltipProps,
@@ -10844,7 +11299,7 @@ function QueueTimeBreakdownDonut({
             }
           )
         ] }, chartFilter) }),
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           import_Box15.default,
           {
             sx: {
@@ -10855,7 +11310,7 @@ function QueueTimeBreakdownDonut({
               pointerEvents: "none",
               textAlign: "center"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
               import_Typography12.default,
               {
                 sx: mergeSx2(
@@ -10878,7 +11333,7 @@ var import_Stack14 = __toESM(require("@mui/material/Stack"));
 var import_Tooltip3 = __toESM(require("@mui/material/Tooltip"));
 var import_Typography13 = __toESM(require("@mui/material/Typography"));
 var React22 = __toESM(require("react"));
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var segmentTooltipPopperSx2 = {
   p: 0,
   m: 0,
@@ -10902,9 +11357,9 @@ function SegmentTooltip({
   value,
   color
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_Box16.default, { sx: defaultSegmentTooltipCardSx2, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_Box16.default, { sx: { height: 3, bgcolor: "#E5E7EB", width: "100%" } }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_Box16.default, { sx: defaultSegmentTooltipCardSx2, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_Box16.default, { sx: { height: 3, bgcolor: "#E5E7EB", width: "100%" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
       import_Stack14.default,
       {
         direction: "row",
@@ -10912,7 +11367,7 @@ function SegmentTooltip({
         spacing: 1,
         sx: { px: "10px", py: "6px" },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
             import_Box16.default,
             {
               sx: {
@@ -10924,8 +11379,8 @@ function SegmentTooltip({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_Stack14.default, { direction: "row", spacing: 0.5, alignItems: "baseline", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_Stack14.default, { direction: "row", spacing: 0.5, alignItems: "baseline", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
               import_Typography13.default,
               {
                 sx: {
@@ -10940,7 +11395,7 @@ function SegmentTooltip({
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
               import_Typography13.default,
               {
                 sx: {
@@ -10984,8 +11439,8 @@ function QueueTimeBreakdownStackedBar({
     percent: "0%",
     color: palette[i % palette.length]
   }));
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_Stack14.default, { spacing: 0, sx: { width: "100%", mb: 1.5 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_Stack14.default, { spacing: 0, sx: { width: "100%", mb: 1.5 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       import_Box16.default,
       {
         sx: {
@@ -10995,7 +11450,7 @@ function QueueTimeBreakdownStackedBar({
           overflow: "hidden",
           borderRadius: 0
         },
-        children: isAllZero ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        children: isAllZero ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           import_Box16.default,
           {
             sx: {
@@ -11010,7 +11465,7 @@ function QueueTimeBreakdownStackedBar({
           const segName = legendRows[i]?.label ?? row.data[i]?.name ?? "";
           const count = rawValues[i];
           const pctStr = p.toFixed(1);
-          return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
             import_Tooltip3.default,
             {
               title: renderTooltip ? renderTooltip({
@@ -11019,7 +11474,7 @@ function QueueTimeBreakdownStackedBar({
                 percent: p,
                 count,
                 color
-              }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+              }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                 SegmentTooltip,
                 {
                   name: segName,
@@ -11034,7 +11489,7 @@ function QueueTimeBreakdownStackedBar({
                   sx: segmentTooltipPopperSx2
                 }
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                 import_Box16.default,
                 {
                   sx: {
@@ -11055,7 +11510,7 @@ function QueueTimeBreakdownStackedBar({
         })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       import_Box16.default,
       {
         sx: mergeSx2(
@@ -11071,7 +11526,7 @@ function QueueTimeBreakdownStackedBar({
         children: isAllZero ? emptySegments.map((seg, i) => {
           const labelText = seg.label ?? row.data[i]?.name ?? "";
           const sharePct = 100 / emptySegments.length;
-          return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
             import_Box16.default,
             {
               sx: mergeSx2(
@@ -11086,7 +11541,7 @@ function QueueTimeBreakdownStackedBar({
                 sb?.segmentBoxSx
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                   import_Typography13.default,
                   {
                     sx: mergeSx2(
@@ -11105,7 +11560,7 @@ function QueueTimeBreakdownStackedBar({
                     children: "0 (0%)"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                   import_Typography13.default,
                   {
                     sx: mergeSx2(
@@ -11144,7 +11599,7 @@ function QueueTimeBreakdownStackedBar({
             );
             displayText = `${countText} (${pctText})`;
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
             import_Box16.default,
             {
               title: `${displayText} ${labelText}`.trim(),
@@ -11160,7 +11615,7 @@ function QueueTimeBreakdownStackedBar({
                 sb?.segmentBoxSx
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                   import_Typography13.default,
                   {
                     sx: mergeSx2(
@@ -11179,7 +11634,7 @@ function QueueTimeBreakdownStackedBar({
                     children: displayText
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                   import_Typography13.default,
                   {
                     sx: mergeSx2(
@@ -11233,7 +11688,7 @@ function generateMockPerformanceData() {
 }
 
 // src/components/QueueTimeBreakdown/QueueTimeBreakdown.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function defaultBucketLegendFromPalette(palette) {
   return [
     { percent: "12%", label: "> 16mins", color: palette[0 % palette.length] },
@@ -11287,8 +11742,8 @@ function QueueTimeBreakdown({
     { fontWeight: 700, color: "#0f172a" },
     customization?.periodFilter?.titleSx
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(QueueTimeBreakdownCustomizationProvider, { value: customization ?? {}, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_Card2.default, { elevation: customization?.rootCard?.elevation ?? 0, sx: rootSx, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_CardContent2.default, { sx: mergeSx2(customization?.rootCard?.cardContentSx), children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_Stack15.default, { width: "100%", direction: "column", gap: 3, mb: 4, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(QueueTimeBreakdownCustomizationProvider, { value: customization ?? {}, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_Card2.default, { elevation: customization?.rootCard?.elevation ?? 0, sx: rootSx, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_CardContent2.default, { sx: mergeSx2(customization?.rootCard?.cardContentSx), children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_Stack15.default, { width: "100%", direction: "column", gap: 3, mb: 4, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
       import_Stack15.default,
       {
         direction: "row",
@@ -11298,7 +11753,7 @@ function QueueTimeBreakdown({
         gap: 2,
         width: "100%",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
             import_Typography14.default,
             {
               variant: isSmallScreen ? "subtitle2" : "body1",
@@ -11306,7 +11761,7 @@ function QueueTimeBreakdown({
               children: title
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
             TimePeriodFilter,
             {
               selectedFilter: filter,
@@ -11317,15 +11772,15 @@ function QueueTimeBreakdown({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_Box17.default, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_Grid.default, { container: true, spacing: 3, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_Grid.default, { size: { md: 6, xs: 12 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_Box17.default, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_Grid.default, { container: true, spacing: 3, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_Grid.default, { size: { md: 6, xs: 12 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
           import_Stack15.default,
           {
             gap: 1,
             sx: mergeSx2(customization?.leftColumn?.columnStackSx),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_Stack15.default, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_Stack15.default, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
                 import_Stack15.default,
                 {
                   direction: "row",
@@ -11333,7 +11788,7 @@ function QueueTimeBreakdown({
                   justifyContent: "start",
                   alignItems: "center",
                   children: [
-                    resolvedHeaderImageSrc ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                    resolvedHeaderImageSrc ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                       import_Box17.default,
                       {
                         component: "img",
@@ -11344,8 +11799,8 @@ function QueueTimeBreakdown({
                         sx: { objectFit: "contain" }
                       }
                     ) : null,
-                    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_Stack15.default, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_Stack15.default, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                         import_Typography14.default,
                         {
                           sx: mergeSx2(
@@ -11359,8 +11814,8 @@ function QueueTimeBreakdown({
                           children: headlineTotal
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_Stack15.default, { direction: "row", alignItems: "center", gap: 1, children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_Stack15.default, { direction: "row", alignItems: "center", gap: 1, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                           import_Typography14.default,
                           {
                             sx: mergeSx2(
@@ -11374,7 +11829,7 @@ function QueueTimeBreakdown({
                             children: headlineSubtitle
                           }
                         ),
-                        resolvedHeadlineInfoPopover ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                        resolvedHeadlineInfoPopover ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                           ChartWidgetInfoButton,
                           {
                             density: "compact",
@@ -11387,11 +11842,11 @@ function QueueTimeBreakdown({
                   ]
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                 import_Stack15.default,
                 {
                   sx: mergeSx2(customization?.leftColumn?.barRowsStackSx),
-                  children: data.map((item) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                  children: data.map((item) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                     QueueTimeBreakdownStackedBar,
                     {
                       row: item,
@@ -11405,7 +11860,7 @@ function QueueTimeBreakdown({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           import_Typography14.default,
           {
             sx: mergeSx2(
@@ -11420,7 +11875,7 @@ function QueueTimeBreakdown({
             children: dataComparisonTitle
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           import_Card2.default,
           {
             elevation: 0,
@@ -11434,14 +11889,14 @@ function QueueTimeBreakdown({
               },
               customization?.dataComparison?.cardSx
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_CardContent2.default, { sx: { padding: "4px 8px" }, children: hasComparisonData ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_CardContent2.default, { sx: { padding: "4px 8px" }, children: hasComparisonData ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
               import_Stack15.default,
               {
                 direction: "row",
                 justifyContent: "space-evenly",
                 alignItems: "center",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_Stack15.default, { width: "50%", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_Stack15.default, { width: "50%", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                     QueueTimeBreakdownDonut,
                     {
                       averageData: Donut_data,
@@ -11450,7 +11905,7 @@ function QueueTimeBreakdown({
                       renderTooltip: renderDonutTooltip
                     }
                   ) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                     import_Box17.default,
                     {
                       component: "span",
@@ -11465,7 +11920,7 @@ function QueueTimeBreakdown({
                       )
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_Stack15.default, { width: "50%", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_Stack15.default, { width: "50%", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                     QueueTimeBreakdownDonut,
                     {
                       averageData: yesterdayDonut,
@@ -11476,11 +11931,11 @@ function QueueTimeBreakdown({
                   ) })
                 ]
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ChartEmptyState, { minHeight: 220 }) })
+            ) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ChartEmptyState, { minHeight: 220 }) })
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_Grid.default, { size: { md: 6, xs: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_Grid.default, { size: { md: 6, xs: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
         import_Card2.default,
         {
           elevation: 0,
@@ -11494,21 +11949,21 @@ function QueueTimeBreakdown({
             },
             customization?.areaChart?.cardSx
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
             import_CardContent2.default,
             {
               sx: mergeSx2(
                 { padding: "10px 8px" },
                 customization?.areaChart?.cardContentSx
               ),
-              children: hasBarData ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+              children: hasBarData ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                 QueueTimeBreakdownArea_default,
                 {
                   series: getQueueTimeBreakdownAreaSeriesData(filter),
                   xAxis: getQueueTimeBreakdownAreaXAxisData(filter),
                   renderTooltip: renderAreaTooltip
                 }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ChartEmptyState, { minHeight: 330 })
+              ) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ChartEmptyState, { minHeight: 330 })
             }
           )
         }
@@ -11518,10 +11973,10 @@ function QueueTimeBreakdown({
 }
 
 // src/components/widgets/FootFallHeatMap/FootFallHeatMapView.tsx
-var import_react18 = require("@iconify/react");
-var import_material17 = require("@mui/material");
+var import_react20 = require("@iconify/react");
+var import_material19 = require("@mui/material");
 var React24 = __toESM(require("react"));
-var import_react19 = require("react");
+var import_react21 = require("react");
 var import_recharts9 = require("recharts");
 
 // src/components/widgets/FootFallHeatMap/FootFallHeatMapView.types.ts
@@ -11906,7 +12361,7 @@ function getNestedList(payload) {
 }
 
 // src/components/widgets/FootFallHeatMap/FootFallHeatMapView.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function toDisplayNumber(value) {
   if (!Number.isFinite(value)) return "0";
   return new Intl.NumberFormat("en-IN").format(value);
@@ -11925,8 +12380,8 @@ function InlineStatCard({
   sx,
   iconColor = "#1565C0"
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-    import_material17.Paper,
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    import_material19.Paper,
     {
       elevation: 0,
       sx: [
@@ -11941,9 +12396,9 @@ function InlineStatCard({
         },
         ...sx ? [sx] : []
       ],
-      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_material17.Stack, { direction: "row", alignItems: "center", spacing: 1.5, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-          import_react18.Icon,
+      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_material19.Stack, { direction: "row", alignItems: "center", spacing: 1.5, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+          import_react20.Icon,
           {
             icon,
             width: 28,
@@ -11952,17 +12407,17 @@ function InlineStatCard({
             style: { flexShrink: 0 }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_material17.Stack, { spacing: 0.15, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-            import_material17.Typography,
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_material19.Stack, { spacing: 0.15, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            import_material19.Typography,
             {
               variant: "body2",
               sx: { fontWeight: 500, color: "text.primary" },
               children: title
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-            import_material17.Typography,
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            import_material19.Typography,
             {
               variant: "h6",
               sx: { lineHeight: 1.1, fontWeight: 700, color: "text.primary" },
@@ -11991,17 +12446,17 @@ function InlineSegmentStrip({
   const barHeight = presentation?.barHeight ?? 12;
   const trackInsetPx = presentation?.trackInsetPx ?? 3;
   const trackBg = presentation?.trackBackgroundColor ?? "#ECEFF3";
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_material17.Stack, { spacing: 0.75, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
-      import_material17.Stack,
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_material19.Stack, { spacing: 0.75, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+      import_material19.Stack,
       {
         direction: "row",
         alignItems: "center",
         justifyContent: "space-between",
         gap: 1,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-            import_material17.Typography,
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            import_material19.Typography,
             {
               variant: "subtitle2",
               sx: [
@@ -12011,8 +12466,8 @@ function InlineSegmentStrip({
               children: item.label
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-            import_material17.Typography,
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            import_material19.Typography,
             {
               variant: "body2",
               sx: [
@@ -12025,8 +12480,8 @@ function InlineSegmentStrip({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-      import_material17.Box,
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      import_material19.Box,
       {
         sx: {
           width: "100%",
@@ -12043,8 +12498,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__ */ (0, import_jsx_runtime41.jsx)(
-            import_material17.Tooltip,
+          return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            import_material19.Tooltip,
             {
               title: (() => {
                 if (presentation?.renderSegmentTooltip) {
@@ -12056,7 +12511,7 @@ function InlineSegmentStrip({
                   });
                   return custom == null ? "" : custom;
                 }
-                return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                   InlineSegmentTooltipCard,
                   {
                     segment,
@@ -12071,8 +12526,8 @@ function InlineSegmentStrip({
                   sx: inlineSegmentTooltipPopperSx
                 }
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-                import_material17.Box,
+              children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                import_material19.Box,
                 {
                   sx: {
                     width: `${Math.max(0, widthPercent)}%`,
@@ -12116,10 +12571,10 @@ function InlineSegmentTooltipCard({
   cardSx
 }) {
   const tooltipSurfaceSx = cardSx ? [inlineSegmentTooltipCardSx, cardSx] : inlineSegmentTooltipCardSx;
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_material17.Box, { sx: tooltipSurfaceSx, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_material17.Box, { sx: { height: 3, bgcolor: "grey.200", width: "100%" } }),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
-      import_material17.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_material19.Box, { sx: tooltipSurfaceSx, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_material19.Box, { sx: { height: 3, bgcolor: "grey.200", width: "100%" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+      import_material19.Box,
       {
         sx: {
           display: "flex",
@@ -12131,8 +12586,8 @@ function InlineSegmentTooltipCard({
           py: 1.25
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-            import_material17.Box,
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            import_material19.Box,
             {
               component: "span",
               "aria-hidden": true,
@@ -12145,8 +12600,8 @@ function InlineSegmentTooltipCard({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-            import_material17.Typography,
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            import_material19.Typography,
             {
               component: "span",
               sx: {
@@ -12158,8 +12613,8 @@ function InlineSegmentTooltipCard({
               children: segment.label
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-            import_material17.Typography,
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            import_material19.Typography,
             {
               component: "span",
               sx: {
@@ -12171,8 +12626,8 @@ function InlineSegmentTooltipCard({
               children: " : "
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-            import_material17.Typography,
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            import_material19.Typography,
             {
               component: "span",
               sx: {
@@ -12202,8 +12657,8 @@ function FootfallHeatMapKpiRankedBlock({
   const statIcon = presentation?.statCardIconColor ?? "#1565C0";
   const customSummary = presentation?.summaryCards?.(summaryKpis);
   const useCustomSummary = customSummary !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
-    import_material17.Stack,
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+    import_material19.Stack,
     {
       spacing: 2,
       sx: [
@@ -12212,15 +12667,15 @@ function FootfallHeatMapKpiRankedBlock({
         ...presentation?.kpiContainerSx ? [presentation.kpiContainerSx] : []
       ],
       children: [
-        useCustomSummary && customSummary.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-          import_material17.Stack,
+        useCustomSummary && customSummary.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+          import_material19.Stack,
           {
             direction: "row",
             spacing: 1.5,
             flexWrap: "wrap",
             useFlexGap: true,
             sx: presentation?.summaryRowSx ? [presentation.summaryRowSx] : void 0,
-            children: useCustomSummary ? customSummary.map((card) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            children: useCustomSummary ? customSummary.map((card) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
               InlineStatCard,
               {
                 icon: card.icon ?? "mdi:chart-box-outline",
@@ -12233,7 +12688,7 @@ function FootfallHeatMapKpiRankedBlock({
               },
               card.id
             )) : [
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                 InlineStatCard,
                 {
                   icon: "mdi:store-marker-outline",
@@ -12244,7 +12699,7 @@ function FootfallHeatMapKpiRankedBlock({
                 },
                 "default-stores"
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                 InlineStatCard,
                 {
                   icon: "fluent:people-community-16-filled",
@@ -12258,15 +12713,15 @@ function FootfallHeatMapKpiRankedBlock({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-          import_material17.Stack,
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+          import_material19.Stack,
           {
             spacing: 1.25,
             sx: [
               { pt: 0.5, pb: 1 },
               ...presentation?.rankedListStackSx ? [presentation.rankedListStackSx] : []
             ],
-            children: rankedBarList.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            children: rankedBarList.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
               InlineSegmentStrip,
               {
                 item,
@@ -12448,18 +12903,18 @@ function FootFallHeatMapView({
     tileColors: treemapProp?.tileColors
   };
   const tileMetrics = treemapLayout.tileMetrics;
-  const tileColorFromSeed = (0, import_react19.useMemo)(
+  const tileColorFromSeed = (0, import_react21.useMemo)(
     () => createTreemapTileColorResolver(treemapLayout.tileColors),
     [treemapLayout.tileColors]
   );
-  const [data, setData] = (0, import_react19.useState)({
+  const [data, setData] = (0, import_react21.useState)({
     previous: [],
     current: []
   });
-  const [showLeaf, setShowLeaf] = (0, import_react19.useState)(false);
-  const [trackingDetails, setTrackingDetails] = (0, import_react19.useState)([]);
-  const [loading, setLoading] = (0, import_react19.useState)(false);
-  (0, import_react19.useEffect)(() => {
+  const [showLeaf, setShowLeaf] = (0, import_react21.useState)(false);
+  const [trackingDetails, setTrackingDetails] = (0, import_react21.useState)([]);
+  const [loading, setLoading] = (0, import_react21.useState)(false);
+  (0, import_react21.useEffect)(() => {
     if (!initialData) {
       setData({ previous: [], current: [] });
       setShowLeaf(false);
@@ -12490,7 +12945,7 @@ function FootFallHeatMapView({
     startFromPathMode,
     tileColorFromSeed
   ]);
-  const derivedKpiStrip = (0, import_react19.useMemo)(() => {
+  const derivedKpiStrip = (0, import_react21.useMemo)(() => {
     if (isLoading || loading || !initialData) return null;
     const activeZoneForStrip = trackingDetails.length > 0 ? trackingDetails[trackingDetails.length - 1] : void 0;
     return deriveFootfallHeatMapKpiStrip(
@@ -12578,7 +13033,7 @@ function FootFallHeatMapView({
     );
     const dwellIconColor = resolveIconColor(iconColorProp, tileColor, "dwell");
     const p = inner;
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       "foreignObject",
       {
         x,
@@ -12586,8 +13041,8 @@ function FootFallHeatMapView({
         width,
         height,
         style: { borderRadius: "12px", overflow: "hidden" },
-        children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
-          import_material17.Stack,
+        children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+          import_material19.Stack,
           {
             onClick: handleClick,
             onKeyDown: (e) => {
@@ -12617,8 +13072,8 @@ function FootFallHeatMapView({
               }
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
-                import_material17.Stack,
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+                import_material19.Stack,
                 {
                   direction: isSmall ? "row" : "column",
                   justifyContent: "center",
@@ -12629,8 +13084,8 @@ function FootFallHeatMapView({
                     mb: isSmall ? 0.5 : 1
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-                      import_material17.Typography,
+                    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                      import_material19.Typography,
                       {
                         sx: {
                           fontSize: `${fontSize}px!important`,
@@ -12652,8 +13107,8 @@ function FootFallHeatMapView({
                         children: name
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-                      import_material17.Typography,
+                    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                      import_material19.Typography,
                       {
                         sx: {
                           fontSize: `${fontSize}px!important`,
@@ -12667,8 +13122,8 @@ function FootFallHeatMapView({
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
-                import_material17.Stack,
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+                import_material19.Stack,
                 {
                   direction: "row",
                   justifyContent: "center",
@@ -12681,8 +13136,8 @@ function FootFallHeatMapView({
                     ...tileMetrics?.metricsRowStackSx != null ? [tileMetrics.metricsRowStackSx] : []
                   ],
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
-                      import_material17.Stack,
+                    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+                      import_material19.Stack,
                       {
                         direction: "row",
                         alignItems: "center",
@@ -12699,8 +13154,8 @@ function FootFallHeatMapView({
                           ...tileMetrics?.metricPillStackSx != null ? [tileMetrics.metricPillStackSx] : []
                         ],
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-                            import_material17.Box,
+                          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                            import_material19.Box,
                             {
                               sx: [
                                 {
@@ -12712,8 +13167,8 @@ function FootFallHeatMapView({
                                 },
                                 ...tileMetrics?.metricPillIconBoxSx != null ? [tileMetrics.metricPillIconBoxSx] : []
                               ],
-                              children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-                                import_react18.Icon,
+                              children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                                import_react20.Icon,
                                 {
                                   icon: icons.visitors,
                                   color: visitorsIconColor,
@@ -12722,8 +13177,8 @@ function FootFallHeatMapView({
                               )
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-                            import_material17.Typography,
+                          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                            import_material19.Typography,
                             {
                               sx: [
                                 {
@@ -12740,8 +13195,8 @@ function FootFallHeatMapView({
                         ]
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
-                      import_material17.Stack,
+                    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+                      import_material19.Stack,
                       {
                         direction: "row",
                         alignItems: "center",
@@ -12758,8 +13213,8 @@ function FootFallHeatMapView({
                           ...tileMetrics?.metricPillStackSx != null ? [tileMetrics.metricPillStackSx] : []
                         ],
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-                            import_material17.Box,
+                          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                            import_material19.Box,
                             {
                               sx: [
                                 {
@@ -12771,8 +13226,8 @@ function FootFallHeatMapView({
                                 },
                                 ...tileMetrics?.metricPillIconBoxSx != null ? [tileMetrics.metricPillIconBoxSx] : []
                               ],
-                              children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-                                import_react18.Icon,
+                              children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                                import_react20.Icon,
                                 {
                                   icon: icons.dwell,
                                   color: dwellIconColor,
@@ -12781,8 +13236,8 @@ function FootFallHeatMapView({
                               )
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-                            import_material17.Typography,
+                          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                            import_material19.Typography,
                             {
                               sx: [
                                 {
@@ -12824,8 +13279,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__ */ (0, import_jsx_runtime41.jsx)(import_material17.Stack, { direction: "row", alignItems: "baseline", flexWrap: "wrap", gap: 1.5, children: breadcrumbSegments.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-      import_material17.Typography,
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_material19.Stack, { direction: "row", alignItems: "baseline", flexWrap: "wrap", gap: 1.5, children: breadcrumbSegments.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      import_material19.Typography,
       {
         component: "span",
         sx: {
@@ -12838,10 +13293,10 @@ function FootFallHeatMapView({
         color: textColor,
         children: brandLabel
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
-      breadcrumbSegments.map((seg, i) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(React24.Fragment, { children: [
-        i > 0 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-          import_material17.Typography,
+    ) : /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
+      breadcrumbSegments.map((seg, i) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(React24.Fragment, { children: [
+        i > 0 ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+          import_material19.Typography,
           {
             component: "span",
             fontSize: "15px !important",
@@ -12851,8 +13306,8 @@ function FootFallHeatMapView({
             children: "/"
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-          import_material17.Typography,
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+          import_material19.Typography,
           {
             component: "span",
             sx: {
@@ -12867,9 +13322,9 @@ function FootFallHeatMapView({
           }
         )
       ] }, `${seg}-${i}`)),
-      brandLabel ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-          import_material17.Typography,
+      brandLabel ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+          import_material19.Typography,
           {
             component: "span",
             fontSize: "15px !important",
@@ -12878,8 +13333,8 @@ function FootFallHeatMapView({
             children: "/"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-          import_material17.Typography,
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+          import_material19.Typography,
           {
             component: "span",
             sx: {
@@ -12898,11 +13353,11 @@ function FootFallHeatMapView({
   };
   const is500Error = error !== null && error !== void 0 && typeof error === "object" && "status" in error && error.status === 500;
   if (is500Error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_material17.Box, { sx: { p: 4, textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_material17.Typography, { color: "error", children: "Something went wrong (500). Try again later." }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_material19.Box, { sx: { p: 4, textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_material19.Typography, { color: "error", children: "Something went wrong (500). Try again later." }) });
   }
   if (isLoading || loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-      import_material17.Skeleton,
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      import_material19.Skeleton,
       {
         variant: "rectangular",
         width: "100%",
@@ -12942,9 +13397,9 @@ function FootFallHeatMapView({
     "#888888",
     "header"
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_material17.Stack, { width: "100%", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
-      import_material17.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_material19.Stack, { width: "100%", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+      import_material19.Box,
       {
         sx: {
           width: "100%",
@@ -12955,17 +13410,17 @@ function FootFallHeatMapView({
           gap: 1
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_material17.Typography, { variant: "h6", fontWeight: 700, children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_material17.Stack, { direction: "row", alignItems: "center", gap: 1, children: [
-            isFetching ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_material17.Typography, { variant: "caption", color: "text.secondary", children: "Updating\u2026" }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_material17.Tooltip, { title: infoTooltip, arrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-              import_material17.IconButton,
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_material19.Typography, { variant: "h6", fontWeight: 700, children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_material19.Stack, { direction: "row", alignItems: "center", gap: 1, children: [
+            isFetching ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_material19.Typography, { variant: "caption", color: "text.secondary", children: "Updating\u2026" }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_material19.Tooltip, { title: infoTooltip, arrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+              import_material19.IconButton,
               {
                 size: "small",
                 "aria-label": "Zone performance info",
                 edge: "end",
-                children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-                  import_react18.Icon,
+                children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                  import_react20.Icon,
                   {
                     icon: icons.headerInfo,
                     width: headerIconPx,
@@ -12979,8 +13434,8 @@ function FootFallHeatMapView({
         ]
       }
     ),
-    data?.previous?.length > 0 && headerData ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
-      import_material17.Stack,
+    data?.previous?.length > 0 && headerData ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+      import_material19.Stack,
       {
         direction: "row",
         alignItems: "center",
@@ -12994,14 +13449,14 @@ function FootFallHeatMapView({
           backgroundColor: zoneBarColor
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_material17.Stack, { direction: "row", alignItems: "center", spacing: 1, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-              import_material17.Button,
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_material19.Stack, { direction: "row", alignItems: "center", spacing: 1, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+              import_material19.Button,
               {
                 size: "small",
                 onClick: handleClose,
-                startIcon: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-                  import_react18.Icon,
+                startIcon: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                  import_react20.Icon,
                   {
                     icon: "mdi:chevron-left",
                     width: 16,
@@ -13020,10 +13475,10 @@ function FootFallHeatMapView({
                 children: "Back"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(LabelTag, { textColor: zoneBarHeaderFg })
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(LabelTag, { textColor: zoneBarHeaderFg })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
-            import_material17.Typography,
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+            import_material19.Typography,
             {
               variant: "h6",
               sx: { color: zoneBarHeaderFg, fontWeight: 700 },
@@ -13037,7 +13492,7 @@ function FootFallHeatMapView({
         ]
       }
     ) : null,
-    isDrilledIntoZone && showKpiStrip && derivedKpiStrip ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    isDrilledIntoZone && showKpiStrip && derivedKpiStrip ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       FootfallHeatMapKpiRankedBlock,
       {
         strip: derivedKpiStrip,
@@ -13054,8 +13509,8 @@ function FootFallHeatMapView({
         }
       }
     ) : null,
-    showLeafDetailsBody ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-      import_material17.Box,
+    showLeafDetailsBody ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      import_material19.Box,
       {
         sx: [
           {
@@ -13070,7 +13525,7 @@ function FootFallHeatMapView({
         ]
       }
     ) : null,
-    showLeaf ? null : showChart ? hideTreemapForTerminalCardWithKpi ? null : hasTreemapData ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_recharts9.ResponsiveContainer, { width: "100%", height: treemapHeight, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    showLeaf ? null : showChart ? hideTreemapForTerminalCardWithKpi ? null : hasTreemapData ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_recharts9.ResponsiveContainer, { width: "100%", height: treemapHeight, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       import_recharts9.Treemap,
       {
         data: data?.current ?? [],
@@ -13083,13 +13538,13 @@ function FootFallHeatMapView({
         animationDuration: 0,
         style: { borderRadius: "12px" }
       }
-    ) }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    ) }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       ChartEmptyState,
       {
         minHeight: treemapHeight,
         ...emptyStatePlaceholderProps
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ChartEmptyState, { minHeight: 400, ...emptyStatePlaceholderProps })
+    ) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ChartEmptyState, { minHeight: 400, ...emptyStatePlaceholderProps })
   ] });
 }
 
@@ -13098,7 +13553,7 @@ var import_Grid2 = __toESM(require("@mui/material/Grid"));
 var import_Paper3 = __toESM(require("@mui/material/Paper"));
 var import_Stack16 = __toESM(require("@mui/material/Stack"));
 var import_Typography15 = __toESM(require("@mui/material/Typography"));
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function metricsToRows(metrics) {
   return [
     { id: 1, title: "Overall Visits", value: metrics.overall_visits ?? 0 },
@@ -13136,7 +13591,7 @@ function metricsToRows(metrics) {
 }
 var ZoneWiseKpiCards = ({ metrics }) => {
   const rows = metricsToRows(metrics);
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_Grid2.default, { container: true, spacing: 3, sx: { marginTop: "10px", paddingX: "6px" }, children: rows.map((item) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_Grid2.default, { container: true, spacing: 3, sx: { marginTop: "10px", paddingX: "6px" }, children: rows.map((item) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     import_Grid2.default,
     {
       size: {
@@ -13144,7 +13599,7 @@ var ZoneWiseKpiCards = ({ metrics }) => {
         sm: 6,
         md: 3
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
         import_Paper3.default,
         {
           elevation: 0,
@@ -13156,7 +13611,7 @@ var ZoneWiseKpiCards = ({ metrics }) => {
             height: "100%"
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
               import_Typography15.default,
               {
                 variant: "caption",
@@ -13165,7 +13620,7 @@ var ZoneWiseKpiCards = ({ metrics }) => {
                 children: item.title
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_Stack16.default, { mt: 1, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_Typography15.default, { variant: "h6", fontWeight: 700, children: item.value }) })
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_Stack16.default, { mt: 1, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_Typography15.default, { variant: "h6", fontWeight: 700, children: item.value }) })
           ]
         }
       )
@@ -13234,21 +13689,21 @@ var import_recharts10 = require("recharts");
 
 // src/components/widgets/PeakBillingHours/PeakBillingHoursCustomizationContext.tsx
 var React25 = __toESM(require("react"));
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var PeakBillingHoursCustomizationContext = React25.createContext({});
 function PeakBillingHoursCustomizationProvider({
   value,
   children
 }) {
   const memo = React25.useMemo(() => value, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PeakBillingHoursCustomizationContext.Provider, { value: memo, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(PeakBillingHoursCustomizationContext.Provider, { value: memo, children });
 }
 function usePeakBillingHoursCustomization() {
   return React25.useContext(PeakBillingHoursCustomizationContext);
 }
 
 // src/components/widgets/PeakBillingHours/PeakBillingHoursTooltip.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 function formatTooltipValue2(n) {
   return new Intl.NumberFormat(void 0, { maximumFractionDigits: 0 }).format(
     Math.round(n)
@@ -13295,7 +13750,7 @@ function PeakBillingHoursTooltip(props) {
     },
     tt?.bodyStyle
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     "div",
     {
       style: {
@@ -13303,7 +13758,7 @@ function PeakBillingHoursTooltip(props) {
         minWidth: 160,
         maxWidth: 280
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
         "div",
         {
           style: {
@@ -13314,7 +13769,7 @@ function PeakBillingHoursTooltip(props) {
             boxShadow: shadow
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
               "div",
               {
                 style: {
@@ -13325,14 +13780,14 @@ function PeakBillingHoursTooltip(props) {
                 "aria-hidden": true
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { style: bodyStyle, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { style: rowStyle, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { style: { color: prefixCol, fontWeight: prefixFw }, children: dateP }),
-                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { style: { color: valueCol, fontWeight: valueFw }, children: labelText })
+            /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { style: bodyStyle, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { style: rowStyle, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { style: { color: prefixCol, fontWeight: prefixFw }, children: dateP }),
+                /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { style: { color: valueCol, fontWeight: valueFw }, children: labelText })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { style: { ...rowStyle, marginTop: gap }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { style: { color: prefixCol, fontWeight: prefixFw }, children: totalP }),
-                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { style: { color: valueCol, fontWeight: valueFw }, children: formatTooltipValue2(num) })
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { style: { ...rowStyle, marginTop: gap }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { style: { color: prefixCol, fontWeight: prefixFw }, children: totalP }),
+                /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { style: { color: valueCol, fontWeight: valueFw }, children: formatTooltipValue2(num) })
               ] })
             ] })
           ]
@@ -13343,22 +13798,22 @@ function PeakBillingHoursTooltip(props) {
 }
 
 // src/components/widgets/PeakBillingHours/PeakBillingHours.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var OLY_DEFAULT_COMPOSED_CHART_CHROME6 = {
   cartesianGridStroke: "#D3D6DF",
   xAxisLineStroke: "#7566FC",
   axisTickLineStroke: "#E5E7EB"
 };
 var OLY_DEFAULT_CHART_AXIS_TICK_FILL2 = "#64748B";
-function toNum4(n) {
+function toNum5(n) {
   if (n === void 0) return void 0;
   return typeof n === "number" ? n : Number(n);
 }
 function PeakBarTopLabel(props) {
   const { x, y, width, value, fill, fontSize, fontWeight } = props;
-  const nx = toNum4(x);
-  const ny = toNum4(y);
-  const nw = toNum4(width);
+  const nx = toNum5(x);
+  const ny = toNum5(y);
+  const nw = toNum5(width);
   if (nx === void 0 || ny === void 0 || nw === void 0) {
     return null;
   }
@@ -13368,7 +13823,7 @@ function PeakBarTopLabel(props) {
   }
   const cx = nx + nw / 2;
   const cy = ny - 6;
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
     "text",
     {
       x: cx,
@@ -13414,7 +13869,7 @@ function BarPlot({
     barRadius,
     barRadius
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_Box18.default, { sx: { width: "100%", height, mt: 0.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_recharts10.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_Box18.default, { sx: { width: "100%", height, mt: 0.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_recharts10.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
     import_recharts10.BarChart,
     {
       data,
@@ -13422,7 +13877,7 @@ function BarPlot({
       barCategoryGap: categoryGap,
       barGap,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
           import_recharts10.CartesianGrid,
           {
             strokeDasharray: dash,
@@ -13430,7 +13885,7 @@ function BarPlot({
             stroke: gridStroke
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
           import_recharts10.XAxis,
           {
             dataKey: "label",
@@ -13443,7 +13898,7 @@ function BarPlot({
             height: 36
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
           import_recharts10.YAxis,
           {
             domain: yAxisDomain,
@@ -13454,7 +13909,7 @@ function BarPlot({
             width: yWidth
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
           import_recharts10.Tooltip,
           {
             content: (tooltipProps) => {
@@ -13464,9 +13919,9 @@ function BarPlot({
                   data,
                   activeTabId
                 });
-                return customTooltip == null ? null : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_jsx_runtime45.Fragment, { children: customTooltip });
+                return customTooltip == null ? null : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_jsx_runtime47.Fragment, { children: customTooltip });
               }
-              return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(PeakBillingHoursTooltip, { ...tooltipProps });
+              return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PeakBillingHoursTooltip, { ...tooltipProps });
             },
             cursor: {
               fill: hoverBandFill,
@@ -13476,7 +13931,7 @@ function BarPlot({
             allowEscapeViewBox: { x: false, y: true }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
           import_recharts10.Bar,
           {
             dataKey: "value",
@@ -13485,11 +13940,11 @@ function BarPlot({
             radius: radiusTuple,
             isAnimationActive: false,
             maxBarSize: 48,
-            children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
               import_recharts10.LabelList,
               {
                 dataKey: "value",
-                content: (props) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                content: (props) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
                   PeakBarTopLabel,
                   {
                     ...props,
@@ -13556,8 +14011,8 @@ function PeakBillingHours({
     },
     customization?.header?.subtitleSx
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(PeakBillingHoursCustomizationProvider, { value: customization ?? {}, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_Card3.default, { elevation: customization?.rootCard?.elevation ?? 0, sx: rootSx, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_CardContent3.default, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_Stack17.default, { spacing: 1.75, sx: { width: "100%" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PeakBillingHoursCustomizationProvider, { value: customization ?? {}, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_Card3.default, { elevation: customization?.rootCard?.elevation ?? 0, sx: rootSx, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_CardContent3.default, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_Stack17.default, { spacing: 1.75, sx: { width: "100%" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
       import_Stack17.default,
       {
         direction: "row",
@@ -13566,20 +14021,20 @@ function PeakBillingHours({
         gap: 2,
         flexWrap: "wrap",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_Box18.default, { component: "div", sx: { minWidth: 0 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_Typography16.default, { component: "span", sx: titleSx, children: title }),
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_Typography16.default, { component: "span", sx: subtitleSx, children: subtitle })
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_Box18.default, { component: "div", sx: { minWidth: 0 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_Typography16.default, { component: "span", sx: titleSx, children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_Typography16.default, { component: "span", sx: subtitleSx, children: subtitle })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
             import_Stack17.default,
             {
               direction: "row",
               alignItems: "center",
               spacing: 1.5,
               sx: { flexShrink: 0 },
-              children: resolvedInfo ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ChartWidgetHeaderSeparator, {}),
-                /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+              children: resolvedInfo ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ChartWidgetHeaderSeparator, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
                   ChartWidgetInfoButton,
                   {
                     popover: resolvedInfo,
@@ -13592,7 +14047,7 @@ function PeakBillingHours({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       ChartWidgetSegmentedTabs,
       {
         tabs,
@@ -13612,7 +14067,7 @@ function PeakBillingHours({
         inactiveTabFontWeight: st?.inactiveTabFontWeight ?? 600
       }
     ),
-    chartData.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    chartData.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       BarPlot,
       {
         data: chartData,
@@ -13621,7 +14076,7 @@ function PeakBillingHours({
         activeTabId,
         renderTooltip
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       ChartEmptyState,
       {
         minHeight: 320,
@@ -13634,7 +14089,7 @@ function PeakBillingHours({
 // src/components/FalconThemeProvider/FalconThemeProvider.tsx
 var import_CssBaseline = __toESM(require("@mui/material/CssBaseline"));
 var import_styles7 = require("@mui/material/styles");
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var lightColor = "51, 48, 60";
 var darkColor = "228, 230, 244";
 var darkPaperBg = "#2F3349";
@@ -13714,8 +14169,8 @@ var FalconThemeProvider = ({
       mixins: { toolbar: { minHeight: 64 } }
     })
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_styles7.ThemeProvider, { theme, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_CssBaseline.default, {}),
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_styles7.ThemeProvider, { theme, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_CssBaseline.default, {}),
     children
   ] });
 };
@@ -13748,6 +14203,8 @@ var FalconThemeProvider = ({
   FalconPagination,
   FalconSelect,
   FalconSingleSwitch,
+  FalconStatBanner,
+  FalconStatBannerGroup,
   FalconTable,
   FalconThemeProvider,
   FalconTicketColumsFilter,