@mahatisystems/mahati-ui-components 5.3.0 → 5.3.2

package/dist/index.mjs

@@ -505,6 +505,17 @@ var ButtonBase = React2.forwardRef(function(_0, _1) {
         "style"
     ]), _rest1 = _sliced_to_array(_rest, 1), ref = _rest1[0];
     var color = getColorByName(name);
+    var getHoverStyles = function getHoverStyles() {
+        if (iconButtonHoverBgClass) return {};
+        if (iconButtonHoverIntensity) {
+            var opacity = iconButtonHoverIntensity / 100;
+            return {
+                "--hover-bg": "rgba(0,0,0,".concat(opacity, ")"),
+                "--active-bg": "rgba(0,0,0,".concat(Math.min(opacity + 0.2, 1), ")")
+            };
+        }
+        return {};
+    };
     if (iconButton) {
         var height = parseHeightWidth(iconButtonHeightClass);
         var width = parseHeightWidth(iconButtonWidthClass);
@@ -516,8 +527,11 @@ var ButtonBase = React2.forwardRef(function(_0, _1) {
                 minHeight: height,
                 minWidth: width,
                 color: color.startsWith("linear") ? "white" : color
+            }, iconButtonHoverIntensity && {
+                "--hover-bg": "rgba(0,0,0,".concat(iconButtonHoverIntensity / 100, ")"),
+                "--active-bg": "rgba(0,0,0,".concat(Math.min(iconButtonHoverIntensity / 100 + 0.2, 1), ")")
             }, style),
-            className: "\n            inline-flex items-center justify-center\n            transition-all duration-200\n            focus-visible:outline focus-visible:outline-2 focus-visible:outline-white\n            ".concat(iconButtonRadiusClass || "rounded-md", "\n            ").concat(iconButtonBgPaddingClass || "p-[2px]", "\n            ").concat(iconButtonBgClass || "bg-white/10", "\n            hover:opacity-85 active:opacity-70\n            ").concat(className || "", "\n          ")
+            className: "\n  inline-flex items-center justify-center\n  transition-all duration-200\n  ".concat(iconButtonRadiusClass || "rounded-md", "\n  ").concat(iconButtonBgPaddingClass || "p-[2px]", "\n  ").concat(iconButtonBgClass || "bg-white/10", "\n\n  ").concat(iconButtonHoverBgClass ? iconButtonHoverBgClass : iconButtonHoverIntensity ? "hover:bg-[var(--hover-bg)] active:bg-[var(--active-bg)]" : "hover:opacity-85 active:opacity-70", "\n\n  ").concat(className || "", "\n")
         }, props), {
             children: children
         }));
@@ -532,7 +546,10 @@ var ButtonBase = React2.forwardRef(function(_0, _1) {
         }, style) : style,
         className: "\n          inline-flex items-center justify-center\n          whitespace-nowrap\n          font-medium\n          text-[14px]\n          transition-all duration-200\n          cursor-pointer\n          focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-400\n          disabled:pointer-events-none disabled:opacity-50\n          ".concat(!name ? variantClasses[variant] : "", "\n          ").concat(sizeClasses[size], "\n          ").concat(className || "", "\n        ")
     }, props), {
-        children: children
+        children: /* @__PURE__ */ jsx2("span", {
+            className: "".concat(iconButtonBgPaddingClass || "p-[2px]", " flex items-center justify-center"),
+            children: children
+        })
     }));
 });
 ButtonBase.displayName = "Button";
@@ -815,7 +832,7 @@ var FormContainer = function FormContainer(param) {
 FormContainer.displayName = "FormContainer";
 // src/components/Input.tsx
 import React5 from "react";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var Input = React5.forwardRef(function(_0, _1) {
     var _ref = [
         _0,
@@ -832,14 +849,12 @@ var Input = React5.forwardRef(function(_0, _1) {
         if (props.disabled) return;
         onChange === null || onChange === void 0 ? void 0 : onChange(e);
     };
-    return /* @__PURE__ */ jsxs4("div", {
-        "data-testid": testId,
-        className: "flex flex-col w-full mb-4",
+    return /* @__PURE__ */ jsxs4(Fragment2, {
         children: [
             /* @__PURE__ */ jsx6("input", _object_spread({
                 ref: ref,
-                onChange: handleChange,
                 "data-testid": testId ? "".concat(testId, "-input") : void 0,
+                onChange: handleChange,
                 className: "\n            w-full max-w-full min-w-0\n            h-[44px]\n            px-3\n            text-base\n            rounded-md\n            border\n            outline-none\n            box-border\n            transition-all duration-200\n\n            ".concat(hasError ? "border-red-500 focus:border-red-600 focus:ring-2 focus:ring-red-100" : "border-[#D9D9D9] focus:border-blue-500 focus:ring-2 focus:ring-blue-100 hover:border-gray-400 focus:border-blue-500", "\n\n            disabled:bg-gray-100\n            disabled:text-gray-400\n            disabled:border-gray-200\n            disabled:cursor-not-allowed\n\n            file:py-2 file:px-3 file:cursor-pointer\n\n            placeholder:text-gray-400\n\n            ").concat(className, "\n          ")
             }, props)),
             hasError && errorMessage && /* @__PURE__ */ jsx6("span", {
@@ -859,7 +874,7 @@ import { createPortal } from "react-dom";
 import { useState as useState3, useEffect as useEffect2, useRef } from "react";
 import { HiOutlineClock, HiChevronDown, HiChevronLeft, HiChevronRight } from "react-icons/hi";
 import { HiCalendarDays } from "react-icons/hi2";
-import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var convertToDateString = function convertToDateString(date) {
     if (!date) return "";
     var year = date.year;
@@ -1960,7 +1975,7 @@ var Calendar = function Calendar(param) {
                                 marginBottom: scale * 24,
                                 width: "100%"
                             },
-                            children: enableRangeSelection ? /* @__PURE__ */ jsxs5(Fragment2, {
+                            children: enableRangeSelection ? /* @__PURE__ */ jsxs5(Fragment3, {
                                 children: [
                                     /* @__PURE__ */ jsxs5("button", {
                                         type: "button",
@@ -2030,7 +2045,7 @@ var Calendar = function Calendar(param) {
                                         ]
                                     })
                                 ]
-                            }) : /* @__PURE__ */ jsxs5(Fragment2, {
+                            }) : /* @__PURE__ */ jsxs5(Fragment3, {
                                 children: [
                                     /* @__PURE__ */ jsxs5("button", {
                                         type: "button",
@@ -2162,7 +2177,7 @@ var Calendar = function Calendar(param) {
                                 ]
                             })
                         }),
-                        !showTimeSelector ? /* @__PURE__ */ jsxs5(Fragment2, {
+                        !showTimeSelector ? /* @__PURE__ */ jsxs5(Fragment3, {
                             children: [
                                 /* @__PURE__ */ jsx7("div", {
                                     className: "grid grid-cols-7",
@@ -2235,7 +2250,7 @@ var Calendar = function Calendar(param) {
 };
 Calendar.displayName = "Calendar";
 // src/components/Filter.tsx
-import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var DEFAULT_ACTIVITY_OPTIONS = [
     {
         label: "Select Activity",
@@ -2534,7 +2549,7 @@ var MahatiActivity = function MahatiActivity(param) {
             return document.removeEventListener("mousedown", handler);
         };
     }, []);
-    return /* @__PURE__ */ jsxs6(Fragment3, {
+    return /* @__PURE__ */ jsxs6(Fragment4, {
         children: [
             /* @__PURE__ */ jsxs6("div", {
                 "data-testid": testId ? "".concat(testId, "-trigger") : void 0,
@@ -2622,7 +2637,7 @@ var MahatiStatus = function MahatiStatus(param) {
             return document.removeEventListener("mousedown", handler);
         };
     }, []);
-    return /* @__PURE__ */ jsxs6(Fragment3, {
+    return /* @__PURE__ */ jsxs6(Fragment4, {
         children: [
             /* @__PURE__ */ jsxs6("div", {
                 "data-testid": testId ? "".concat(testId, "-trigger") : void 0,
@@ -2686,7 +2701,7 @@ MahatiStatus.displayName = "MahatiStatus";
 MahatiSearch.displayName = "MahatiSearch";
 // src/components/TabbedInterface.tsx
 import { useEffect as useEffect4, useState as useState5 } from "react";
-import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var getFontFamily = function getFontFamily(font) {
     if (!font) return "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif";
     var lower = font.toLowerCase().trim();
@@ -2762,7 +2777,7 @@ var TabbedInterface = function TabbedInterface(param) {
         if (!draggableTabs) return;
         setDraggingIndex(null);
     };
-    var headerButtons = /* @__PURE__ */ jsx9(Fragment4, {
+    var headerButtons = /* @__PURE__ */ jsx9(Fragment5, {
         children: tabs.map(function(tab, index) {
             var active = index === activeIndex;
             var isDragging = draggableTabs && draggingIndex === index;
@@ -2951,7 +2966,7 @@ Dropdown.displayName = "Dropdown";
 // src/components/TableWithTab.tsx
 import React10, { useEffect as useEffect6, useState as useState7 } from "react";
 import { XMarkIcon } from "@heroicons/react/24/outline";
-import { Fragment as Fragment5, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 var getFontFamily2 = function getFontFamily2(font) {
     if (!font) return "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif";
     var lower = font.toLowerCase().trim();
@@ -2972,7 +2987,7 @@ function renderCellValue(value) {
     if (Array.isArray(value)) {
         if (value.some(function(v) {
             return React10.isValidElement(v);
-        })) return /* @__PURE__ */ jsx11(Fragment5, {
+        })) return /* @__PURE__ */ jsx11(Fragment6, {
             children: value
         });
         return value.join(", ");
@@ -3221,7 +3236,7 @@ TableWithTab.displayName = "TableWithTab";
 // src/components/Table.tsx
 import React11, { useState as useState8 } from "react";
 import { ArrowDownOnSquareIcon, XMarkIcon as XMarkIcon2 } from "@heroicons/react/24/outline";
-import { Fragment as Fragment6, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 var Table = function Table(param) {
     var headers = param.headers, data = param.data, page = param.page, setPage = param.setPage, limit = param.limit, setLimit = param.setLimit, totalCount = param.totalCount, highlightRowColor = param.highlightRowColor, actions = param.actions, paginationRequired = param.paginationRequired, _param_paginationPosition = param.paginationPosition, paginationPosition = _param_paginationPosition === void 0 ? "bottom-center" : _param_paginationPosition, onDownloadPDF = param.onDownloadPDF, onDownloadExcel = param.onDownloadExcel, _param_searchable = param.searchable, searchable = _param_searchable === void 0 ? false : _param_searchable, _param_searchTerm = param.searchTerm, searchTerm = _param_searchTerm === void 0 ? "" : _param_searchTerm, onResetSearch = param.onResetSearch, onSearch = param.onSearch, _param_searchModeOptions = param.searchModeOptions, searchModeOptions = _param_searchModeOptions === void 0 ? [
         "includes",
@@ -3293,7 +3308,7 @@ var Table = function Table(param) {
         if (Array.isArray(value)) {
             if (value.some(function(item) {
                 return React11.isValidElement(item);
-            })) return /* @__PURE__ */ jsx12(Fragment6, {
+            })) return /* @__PURE__ */ jsx12(Fragment7, {
                 children: value
             });
             return value.join(", ");
@@ -3313,7 +3328,7 @@ var Table = function Table(param) {
         }
         return String(value);
     };
-    return /* @__PURE__ */ jsxs10(Fragment6, {
+    return /* @__PURE__ */ jsxs10(Fragment7, {
         children: [
             (searchable || onDownloadExcel || onDownloadPDF) && /* @__PURE__ */ jsxs10("div", {
                 className: "mb-3 flex flex-wrap justify-between gap-3",
@@ -3484,7 +3499,7 @@ var Table = function Table(param) {
     });
 };
 // src/components/MahatiChartAnalyticsWidget.tsx
-import { useMemo as useMemo3, useState as useState12 } from "react";
+import { useMemo as useMemo3, useState as useState12, useEffect as useEffect9 } from "react";
 // src/components/ChartDropdown.tsx
 import { useEffect as useEffect7, useMemo, useRef as useRef4, useState as useState9 } from "react";
 import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
@@ -5637,7 +5652,7 @@ var CalendarHeatmapChart = function CalendarHeatmapChart(param) {
 };
 CalendarHeatmapChart.displayName = "CalendarHeatmapChart";
 // src/components/LollipopChart.tsx
-import { Fragment as Fragment7, jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
 var DEFAULT_COLORS = [
     "rgba(37,99,235,1)",
     "rgba(16,185,129,1)",
@@ -5718,7 +5733,7 @@ var LollipopChart = function LollipopChart(param) {
                 className: "flex-1 flex flex-col gap-4 py-4 min-h-[300px] relative overflow-visible",
                 children: /* @__PURE__ */ jsx20("div", {
                     className: "w-full overflow-x-visible lg:overflow-x-auto",
-                    children: orientation === "horizontal" ? /* @__PURE__ */ jsxs17(Fragment7, {
+                    children: orientation === "horizontal" ? /* @__PURE__ */ jsxs17(Fragment8, {
                         children: [
                             /* @__PURE__ */ jsxs17("div", {
                                 className: "flex flex-col gap-4 relative pl-[140px] w-full min-w-[800px] lg:min-w-0",
@@ -6101,7 +6116,7 @@ var ColumnChart = function ColumnChart(param) {
 ColumnChart.displayName = "ColumnChart";
 // src/components/KPIChart.tsx
 import React16, { useMemo as useMemo2, useState as useState10, useRef as useRef5, useEffect as useEffect8 } from "react";
-import { Fragment as Fragment8, jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
 var createLinearPath = function createLinearPath(points) {
     if (points.length === 0) return "";
     if (points.length === 1) return "M ".concat(points[0].x, ",").concat(points[0].y);
@@ -6542,7 +6557,7 @@ var KPIChart = function KPIChart(param) {
                                     transition: "d 0.4s ease-in-out, stroke 0.3s ease-in-out"
                                 }
                             }),
-                            hoveredIndex !== null && points[hoveredIndex] && !isNaN(points[hoveredIndex].x) && /* @__PURE__ */ jsxs19(Fragment8, {
+                            hoveredIndex !== null && points[hoveredIndex] && !isNaN(points[hoveredIndex].x) && /* @__PURE__ */ jsxs19(Fragment9, {
                                 children: [
                                     /* @__PURE__ */ jsx22("line", {
                                         x1: points[hoveredIndex].x,
@@ -7153,7 +7168,7 @@ var StackBarChart = function StackBarChart(param) {
 };
 StackBarChart.displayName = "StackBarChart";
 // src/components/MahatiChartAnalyticsWidget.tsx
-import { Fragment as Fragment9, jsx as jsx25, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx25, jsxs as jsxs22 } from "react/jsx-runtime";
 var assetSrc3 = function assetSrc3(m) {
     if (typeof m === "string") return m;
     var anyM = m;
@@ -7261,6 +7276,12 @@ var MahatiChartAnalyticsWidget = function MahatiChartAnalyticsWidget(param) {
     var _useState12 = _sliced_to_array(useState12(initialChartType), 2), chartType = _useState12[0], setChartType = _useState12[1];
     var _useState121 = _sliced_to_array(useState12("Project 1"), 2), selectedGanttProject = _useState121[0], setSelectedGanttProject = _useState121[1];
     var _useState122 = _sliced_to_array(useState12("Project 1"), 2), selectedCalendarHeatmapProject = _useState122[0], setSelectedCalendarHeatmapProject = _useState122[1];
+    var _useState123 = _sliced_to_array(useState12(selectedFilters), 2), localFilters = _useState123[0], setLocalFilters = _useState123[1];
+    useEffect9(function() {
+        setLocalFilters(selectedFilters);
+    }, [
+        selectedFilters
+    ]);
     var currentFilters = useMemo3(function() {
         if (chartFilters && chartFilters[chartType]) return chartFilters[chartType] || [];
         return filters;
@@ -7299,8 +7320,8 @@ var MahatiChartAnalyticsWidget = function MahatiChartAnalyticsWidget(param) {
     var currentGanttData = useMemo3(function() {
         if (chartType === "gantt" && ganttData) {
             var _ganttData_year;
-            var year = selectedFilters["SelectYear"] || "2026";
-            var type = selectedFilters["SelectType"] || "Development";
+            var year = localFilters["SelectYear"] || "2026";
+            var type = localFilters["SelectType"] || "Development";
             var baseData = (_ganttData_year = ganttData[year]) === null || _ganttData_year === void 0 ? void 0 : _ganttData_year[type];
             if (!baseData) return void 0;
             if (selectedGanttProject === "Project 2") {
@@ -7332,8 +7353,8 @@ var MahatiChartAnalyticsWidget = function MahatiChartAnalyticsWidget(param) {
     ]);
     var currentHorizontalBarTopPerformer = useMemo3(function() {
         if (chartType !== "horizontalbar" || !horizontalBarData) return void 0;
-        var selectedYear = selectedFilters["SelectYear"] || "2026";
-        var selectedMonth = selectedFilters["SelectMonth"] || "January";
+        var selectedYear = localFilters["SelectYear"] || "2026";
+        var selectedMonth = localFilters["SelectMonth"] || "January";
         var yearData = horizontalBarData[selectedYear];
         var monthData = yearData === null || yearData === void 0 ? void 0 : yearData[selectedMonth];
         if (!monthData) return void 0;
@@ -7407,8 +7428,8 @@ var MahatiChartAnalyticsWidget = function MahatiChartAnalyticsWidget(param) {
             }
         };
         if (chartType !== "calendarheatmap" || !calendarheatmapData) return empty;
-        var year = selectedFilters["SelectYear"] || "2026";
-        var type = selectedFilters["SelectType"] || "Development";
+        var year = localFilters["SelectYear"] || "2026";
+        var type = localFilters["SelectType"] || "Development";
         var project = selectedCalendarHeatmapProject;
         if (!((_calendarheatmapData_project = calendarheatmapData[project]) === null || _calendarheatmapData_project === void 0 ? void 0 : (_calendarheatmapData_project_year = _calendarheatmapData_project[year]) === null || _calendarheatmapData_project_year === void 0 ? void 0 : _calendarheatmapData_project_year[type])) return empty;
         var yearData = calendarheatmapData[project][year][type];
@@ -7521,9 +7542,9 @@ var MahatiChartAnalyticsWidget = function MahatiChartAnalyticsWidget(param) {
     };
     var currentBulletData = useMemo3(function() {
         if (!bulletData) return null;
-        var year = selectedFilters.SelectYear || "2026";
-        var month = selectedFilters.SelectMonth || "January";
-        var type = selectedFilters.SelectType || "Sales";
+        var year = localFilters.SelectYear || "2026";
+        var month = localFilters.SelectMonth || "January";
+        var type = localFilters.SelectType || "Sales";
         var yearData = bulletData[year];
         if (yearData) {
             var typeData = yearData[type];
@@ -7808,9 +7829,10 @@ var MahatiChartAnalyticsWidget = function MahatiChartAnalyticsWidget(param) {
                                 },
                                 children: /* @__PURE__ */ jsx25(ChartDropdown, {
                                     options: options,
-                                    value: selectedFilters[filter.id],
+                                    value: localFilters[filter.id],
                                     onSelect: function onSelect(val) {
-                                        return onFiltersChange(_object_spread_props(_object_spread({}, selectedFilters), _define_property({}, filter.id, String(val))));
+                                        var updated = _object_spread_props(_object_spread({}, localFilters), _define_property({}, filter.id, String(val)));
+                                        setLocalFilters(updated);
                                     },
                                     variant: "mahatiFilter",
                                     label: filter.label
@@ -7820,7 +7842,8 @@ var MahatiChartAnalyticsWidget = function MahatiChartAnalyticsWidget(param) {
                         /* @__PURE__ */ jsx25("button", {
                             type: "button",
                             onClick: function onClick() {
-                                return onApplyFilters === null || onApplyFilters === void 0 ? void 0 : onApplyFilters(selectedFilters);
+                                onApplyFilters === null || onApplyFilters === void 0 ? void 0 : onApplyFilters(localFilters);
+                                onFiltersChange(localFilters);
                             },
                             className: "w-[77px] h-[30px] rounded border border-[rgba(23,97,163,1)] bg-gradient-to-r from-[rgba(23,97,163,1)] to-[rgba(77,175,131,1)] text-white text-sm font-medium cursor-pointer transition-opacity hover:opacity-90",
                             children: "Apply"
@@ -8103,8 +8126,8 @@ var MahatiChartAnalyticsWidget = function MahatiChartAnalyticsWidget(param) {
                                 children: [
                                     function() {
                                         var _gaugeData_gauges, _gaugeData_sy_sm2, _gaugeData_sy;
-                                        var sy = selectedFilters["SelectYear"] || "2026";
-                                        var sm2 = selectedFilters["SelectMonth"] || "January";
+                                        var sy = localFilters["SelectYear"] || "2026";
+                                        var sm2 = localFilters["SelectMonth"] || "January";
                                         var currentGauge = ((_gaugeData_gauges = gaugeData.gauges) === null || _gaugeData_gauges === void 0 ? void 0 : _gaugeData_gauges.length) > 0 ? gaugeData.gauges[0] : null;
                                         if (((_gaugeData_sy = gaugeData[sy]) === null || _gaugeData_sy === void 0 ? void 0 : (_gaugeData_sy_sm2 = _gaugeData_sy[sm2]) === null || _gaugeData_sy_sm2 === void 0 ? void 0 : _gaugeData_sy_sm2.length) > 0) currentGauge = gaugeData[sy][sm2][0];
                                         if (!currentGauge) return null;
@@ -8254,9 +8277,9 @@ var MahatiChartAnalyticsWidget = function MahatiChartAnalyticsWidget(param) {
                                 children: [
                                     function() {
                                         var _riskGaugeData_gauges, _riskGaugeData_sy_sm2_st, _riskGaugeData_sy_sm2, _riskGaugeData_sy;
-                                        var sy = selectedFilters["SelectYear"] || "2026";
-                                        var sm2 = selectedFilters["SelectMonth"] || "January";
-                                        var st = selectedFilters["SelectType"] || "Credit Score";
+                                        var sy = localFilters["SelectYear"] || "2026";
+                                        var sm2 = localFilters["SelectMonth"] || "January";
+                                        var st = localFilters["SelectType"] || "Credit Score";
                                         var currentRiskGauge = ((_riskGaugeData_gauges = riskGaugeData.gauges) === null || _riskGaugeData_gauges === void 0 ? void 0 : _riskGaugeData_gauges.length) > 0 ? riskGaugeData.gauges[0] : null;
                                         if (((_riskGaugeData_sy = riskGaugeData[sy]) === null || _riskGaugeData_sy === void 0 ? void 0 : (_riskGaugeData_sy_sm2 = _riskGaugeData_sy[sm2]) === null || _riskGaugeData_sy_sm2 === void 0 ? void 0 : (_riskGaugeData_sy_sm2_st = _riskGaugeData_sy_sm2[st]) === null || _riskGaugeData_sy_sm2_st === void 0 ? void 0 : _riskGaugeData_sy_sm2_st.length) > 0) currentRiskGauge = riskGaugeData[sy][sm2][st][0];
                                         if (!currentRiskGauge) return null;
@@ -8895,7 +8918,7 @@ var MahatiChartAnalyticsWidget = function MahatiChartAnalyticsWidget(param) {
                                                 }).findIndex(function(i) {
                                                     return i.name === topPerformer.name;
                                                 }) + 1;
-                                                return /* @__PURE__ */ jsxs22(Fragment9, {
+                                                return /* @__PURE__ */ jsxs22(Fragment10, {
                                                     children: [
                                                         /* @__PURE__ */ jsx25("div", {
                                                             className: "text-base font-semibold text-[rgba(23,97,163,1)] font-[Poppins,sans-serif] mb-5",
@@ -8975,9 +8998,9 @@ var MahatiChartAnalyticsWidget = function MahatiChartAnalyticsWidget(param) {
                                             function() {
                                                 var _columnChartData_sy_sm2, _columnChartData_sy, _columnChartData_prevYear_prevMonth, _columnChartData_prevYear;
                                                 if (!columnChartData) return null;
-                                                var sy = selectedFilters["SelectYear"] || "2026";
-                                                var sm2 = selectedFilters["SelectMonth"] || "January";
-                                                var st = selectedFilters["SelectType"] || "Category A";
+                                                var sy = localFilters["SelectYear"] || "2026";
+                                                var sm2 = localFilters["SelectMonth"] || "January";
+                                                var st = localFilters["SelectType"] || "Category A";
                                                 var typeData = (columnChartData === null || columnChartData === void 0 ? void 0 : (_columnChartData_sy = columnChartData[sy]) === null || _columnChartData_sy === void 0 ? void 0 : (_columnChartData_sy_sm2 = _columnChartData_sy[sm2]) === null || _columnChartData_sy_sm2 === void 0 ? void 0 : _columnChartData_sy_sm2[st]) || [];
                                                 var currentTotal = typeData.reduce(function(sum, item) {
                                                     return sum + item.value;
@@ -9136,8 +9159,8 @@ var MahatiChartAnalyticsWidget = function MahatiChartAnalyticsWidget(param) {
                                     function() {
                                         var _groupBarData_sy, _groupBarData_prevYear;
                                         if (!groupBarData) return null;
-                                        var sy = selectedFilters["SelectYear"] || "2026";
-                                        var sm2 = selectedFilters["SelectMonth"] || "January";
+                                        var sy = localFilters["SelectYear"] || "2026";
+                                        var sm2 = localFilters["SelectMonth"] || "January";
                                         var groups = (groupBarData === null || groupBarData === void 0 ? void 0 : (_groupBarData_sy = groupBarData[sy]) === null || _groupBarData_sy === void 0 ? void 0 : _groupBarData_sy[sm2]) || [];
                                         if (!groups.length) return null;
                                         var legends = groupBarData.legends || [];
@@ -9632,9 +9655,9 @@ var MahatiChartAnalyticsWidget = function MahatiChartAnalyticsWidget(param) {
                                             function() {
                                                 var _currentFilters_, _currentFilters_1, _currentFilters_2, _currentFilters_3, _currentFilters_4, _currentFilters_5, _yearData_month;
                                                 var f0 = (_currentFilters_ = currentFilters[0]) === null || _currentFilters_ === void 0 ? void 0 : _currentFilters_.id, f1 = (_currentFilters_1 = currentFilters[1]) === null || _currentFilters_1 === void 0 ? void 0 : _currentFilters_1.id, f2 = (_currentFilters_2 = currentFilters[2]) === null || _currentFilters_2 === void 0 ? void 0 : _currentFilters_2.id;
-                                                var year = selectedFilters[f0] || ((_currentFilters_3 = currentFilters[0]) === null || _currentFilters_3 === void 0 ? void 0 : _currentFilters_3.options[0]) || "2026";
-                                                var month = selectedFilters[f1] || ((_currentFilters_4 = currentFilters[1]) === null || _currentFilters_4 === void 0 ? void 0 : _currentFilters_4.options[0]) || "January";
-                                                var category = selectedFilters[f2] || ((_currentFilters_5 = currentFilters[2]) === null || _currentFilters_5 === void 0 ? void 0 : _currentFilters_5.options[0]) || "Category A";
+                                                var year = localFilters[f0] || ((_currentFilters_3 = currentFilters[0]) === null || _currentFilters_3 === void 0 ? void 0 : _currentFilters_3.options[0]) || "2026";
+                                                var month = localFilters[f1] || ((_currentFilters_4 = currentFilters[1]) === null || _currentFilters_4 === void 0 ? void 0 : _currentFilters_4.options[0]) || "January";
+                                                var category = localFilters[f2] || ((_currentFilters_5 = currentFilters[2]) === null || _currentFilters_5 === void 0 ? void 0 : _currentFilters_5.options[0]) || "Category A";
                                                 var yearData = (lollipopData === null || lollipopData === void 0 ? void 0 : lollipopData[year]) || {};
                                                 var catData = (yearData === null || yearData === void 0 ? void 0 : (_yearData_month = yearData[month]) === null || _yearData_month === void 0 ? void 0 : _yearData_month[category]) || [];
                                                 var bestItem = catData.length ? catData.reduce(function(max, i) {
@@ -10040,7 +10063,7 @@ var TopPerformerCard = function TopPerformerCard(param) {
 };
 // src/components/Tooltip.tsx
 import React19, { useState as useState13 } from "react";
-import { Fragment as Fragment10, jsx as jsx26, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx26, jsxs as jsxs23 } from "react/jsx-runtime";
 var Tooltip2 = function Tooltip2(param) {
     var text = param.text, _param_position = param.position, position = _param_position === void 0 ? "top" : _param_position, children = param.children, _param_variant = param.variant, variant = _param_variant === void 0 ? "default" : _param_variant, _param_className = param.className, className = _param_className === void 0 ? "" : _param_className, textColor = param.textColor, backgroundColor = param.backgroundColor, image = param.image, testId = param.testId, animation = param.animation;
     var _useState13 = _sliced_to_array(useState13(false), 2), visible = _useState13[0], setVisible = _useState13[1];
@@ -10169,7 +10192,7 @@ var Tooltip2 = function Tooltip2(param) {
             isActive: showAnimation
         }, animation.props));
     };
-    if (!hasContent) return /* @__PURE__ */ jsx26(Fragment10, {
+    if (!hasContent) return /* @__PURE__ */ jsx26(Fragment11, {
         children: children
     });
     var variantStyle = variant === "default" ? "bg-gradient-to-r from-[#1761A3] to-[#4DAF83] text-white text-[11px]" : "bg-white/95 text-gray-700 border border-gray-200 text-[13px]";
@@ -10231,7 +10254,7 @@ var Tooltip2 = function Tooltip2(param) {
 };
 Tooltip2.displayName = "Tooltip";
 // src/components/ToastMessage.tsx
-import React20, { useEffect as useEffect9 } from "react";
+import React20, { useEffect as useEffect10 } from "react";
 import ReactDOM from "react-dom";
 import { jsx as jsx27, jsxs as jsxs24 } from "react/jsx-runtime";
 var getStripGradient = function getStripGradient(type) {
@@ -10356,7 +10379,7 @@ var ToastMessage = React20.forwardRef(function(_0, _1) {
     var backgroundClass = background === "transparent" ? "bg-white" : "";
     var displayTitle = customTitle !== null && customTitle !== void 0 ? customTitle : type.charAt(0).toUpperCase() + type.slice(1);
     var hasActions = action && action.length > 0;
-    useEffect9(function() {
+    useEffect10(function() {
         if (!onClose) return;
         if (duration <= 0) return;
         var timer = setTimeout(onClose, duration);
@@ -10454,7 +10477,7 @@ var ToastMessage = React20.forwardRef(function(_0, _1) {
 });
 ToastMessage.displayName = "ToastMessage";
 // src/components/ConfettiExplosion.tsx
-import { useState as useState14, useEffect as useEffect10, useRef as useRef6, useMemo as useMemo4 } from "react";
+import { useState as useState14, useEffect as useEffect11, useRef as useRef6, useMemo as useMemo4 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
 var ConfettiExplosion = function ConfettiExplosion(param) {
     var testId = param.testId, isActive = param.isActive, _param_particleCount = param.particleCount, particleCount = _param_particleCount === void 0 ? 150 : _param_particleCount, _param_duration = param.duration, duration = _param_duration === void 0 ? 4e3 : _param_duration, _param_colors = param.colors, colors = _param_colors === void 0 ? [
@@ -10479,7 +10502,7 @@ var ConfettiExplosion = function ConfettiExplosion(param) {
     }, [
         JSON.stringify(colors)
     ]);
-    useEffect10(function() {
+    useEffect11(function() {
         if (isActive) {
             var newParticles = Array.from({
                 length: particleCount
@@ -10592,7 +10615,7 @@ var ConfettiExplosion = function ConfettiExplosion(param) {
 };
 ConfettiExplosion.displayName = "ConfettiExplosion";
 // src/components/RealisticConfetti.tsx
-import { useState as useState15, useEffect as useEffect11, useRef as useRef7, useMemo as useMemo5 } from "react";
+import { useState as useState15, useEffect as useEffect12, useRef as useRef7, useMemo as useMemo5 } from "react";
 import { jsx as jsx29 } from "react/jsx-runtime";
 var RealisticConfetti = function RealisticConfetti(param) {
     var testId = param.testId, isActive = param.isActive, _param_particleCount = param.particleCount, particleCount = _param_particleCount === void 0 ? 150 : _param_particleCount, _param_duration = param.duration, duration = _param_duration === void 0 ? 4e3 : _param_duration, _param_colors = param.colors, colors = _param_colors === void 0 ? [
@@ -10617,7 +10640,7 @@ var RealisticConfetti = function RealisticConfetti(param) {
     }, [
         JSON.stringify(colors)
     ]);
-    useEffect11(function() {
+    useEffect12(function() {
         if (isActive) {
             var newParticles = Array.from({
                 length: particleCount
@@ -10786,10 +10809,12 @@ var CircularSpinner = function CircularSpinner(param) {
                         left: offset,
                         opacity: opacity,
                         borderWidth: Math.max(2, ringSize / 12),
+                        borderColor: "rgba(0,0,0,0.1)",
                         borderTopColor: color,
-                        animation: "circularSpin ".concat(speed + i * 0.3, "s linear infinite")
+                        animation: "spin ".concat(speed + i * 0.3, "s linear infinite"),
+                        animationDelay: "".concat(i * 0.2, "s")
                     },
-                    className: "absolute border border-transparent rounded-full"
+                    className: "absolute border border-solid rounded-full"
                 }, i);
             }),
             /* @__PURE__ */ jsx30(SrOnly, {
@@ -10936,16 +10961,16 @@ var CardWithLoading = function CardWithLoading(param) {
     });
 };
 // src/components/NestedDropdown.tsx
-import { useEffect as useEffect12, useRef as useRef8, useState as useState16 } from "react";
+import { useEffect as useEffect13, useRef as useRef8, useState as useState16 } from "react";
 import { ChevronDown as ChevronDown4, X as X3, Loader2 } from "lucide-react";
-import { Fragment as Fragment11, jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
 function SearchableDropdown(param) {
     var label = param.label, options = param.options, value = param.value, onChange = param.onChange, _param_placeholder = param.placeholder, placeholder = _param_placeholder === void 0 ? "search here" : _param_placeholder, testId = param.testId;
     var _find;
     var _useState16 = _sliced_to_array(useState16(false), 2), open = _useState16[0], setOpen = _useState16[1];
     var _useState161 = _sliced_to_array(useState16(""), 2), search = _useState161[0], setSearch = _useState161[1];
     var ref = useRef8(null);
-    useEffect12(function() {
+    useEffect13(function() {
         var h = function h(e) {
             return ref.current && !ref.current.contains(e.target) && setOpen(false);
         };
@@ -11040,7 +11065,7 @@ function MultiSelectDropdown(param) {
             return v !== val;
         }));
     };
-    useEffect12(function() {
+    useEffect13(function() {
         var handler = function handler(e) {
             if (ref.current && !ref.current.contains(e.target)) {
                 setOpen(false);
@@ -11166,7 +11191,7 @@ function CascadingDropdown(param) {
     var _data_find, _level2_find;
     var _useState16 = _sliced_to_array(useState16(false), 2), open = _useState16[0], setOpen = _useState16[1];
     var ref = useRef8(null);
-    useEffect12(function() {
+    useEffect13(function() {
         var handler = function handler(e) {
             if (ref.current && !ref.current.contains(e.target)) {
                 setOpen(false);
@@ -11271,7 +11296,7 @@ function GroupedDropdown(param) {
     var _param_label = param.label, label = _param_label === void 0 ? "Grouped Dropdown" : _param_label, groups = param.groups, values = param.values, onChange = param.onChange, testId = param.testId;
     var _useState16 = _sliced_to_array(useState16(false), 2), open = _useState16[0], setOpen = _useState16[1];
     var ref = useRef8(null);
-    useEffect12(function() {
+    useEffect13(function() {
         var handler = function handler(e) {
             if (ref.current && !ref.current.contains(e.target)) {
                 setOpen(false);
@@ -11398,7 +11423,7 @@ function AvatarDropdown(param) {
     var _param_label = param.label, label = _param_label === void 0 ? "Select Avatar" : _param_label, _param_placeholder = param.placeholder, placeholder = _param_placeholder === void 0 ? "Choose user" : _param_placeholder, options = param.options, value = param.value, testId = param.testId, onChange = param.onChange;
     var _useState16 = _sliced_to_array(useState16(false), 2), open = _useState16[0], setOpen = _useState16[1];
     var ref = useRef8(null);
-    useEffect12(function() {
+    useEffect13(function() {
         var handler = function handler(e) {
             if (ref.current && !ref.current.contains(e.target)) {
                 setOpen(false);
@@ -11431,7 +11456,7 @@ function AvatarDropdown(param) {
                 children: [
                     /* @__PURE__ */ jsx31("span", {
                         className: "flex items-center gap-[10px]",
-                        children: selected ? /* @__PURE__ */ jsxs26(Fragment11, {
+                        children: selected ? /* @__PURE__ */ jsxs26(Fragment12, {
                             children: [
                                 /* @__PURE__ */ jsx31("img", {
                                     src: selected.image,
@@ -11488,7 +11513,7 @@ function AvatarMultiSelectDropdown(param) {
     var _param_label = param.label, label = _param_label === void 0 ? "Avatar Multi Select" : _param_label, _param_placeholder = param.placeholder, placeholder = _param_placeholder === void 0 ? "Select users" : _param_placeholder, options = param.options, values = param.values, testId = param.testId, onChange = param.onChange;
     var _useState16 = _sliced_to_array(useState16(false), 2), open = _useState16[0], setOpen = _useState16[1];
     var ref = useRef8(null);
-    useEffect12(function() {
+    useEffect13(function() {
         var handler = function handler(e) {
             if (ref.current && !ref.current.contains(e.target)) {
                 setOpen(false);
@@ -11615,7 +11640,7 @@ function AsyncDropdown(param) {
     var _useState162 = _sliced_to_array(useState16([]), 2), options = _useState162[0], setOptions = _useState162[1];
     var _useState163 = _sliced_to_array(useState16(false), 2), loading = _useState163[0], setLoading = _useState163[1];
     var ref = useRef8(null);
-    useEffect12(function() {
+    useEffect13(function() {
         var handler = function handler(e) {
             if (ref.current && !ref.current.contains(e.target)) {
                 setOpen(false);
@@ -11626,7 +11651,7 @@ function AsyncDropdown(param) {
             return document.removeEventListener("mousedown", handler);
         };
     }, []);
-    useEffect12(function() {
+    useEffect13(function() {
         if (!open) return;
         setLoading(true);
         loadOptions(search).then(setOptions).finally(function() {
@@ -11720,7 +11745,7 @@ function AsyncDropdown(param) {
     });
 }
 // src/components/TextToAudio.tsx
-import { useEffect as useEffect13, useRef as useRef9, useState as useState17 } from "react";
+import { useEffect as useEffect14, useRef as useRef9, useState as useState17 } from "react";
 import { jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
 var ControlIcon = function ControlIcon(param) {
     var src = param.src;
@@ -12021,23 +12046,23 @@ var TexttoAudio = function TexttoAudio(param) {
         (_textAreaRef_current = textAreaRef.current) === null || _textAreaRef_current === void 0 ? void 0 : _textAreaRef_current.setSelectionRange(0, 0);
         utteranceRef.current = null;
     };
-    useEffect13(function() {
+    useEffect14(function() {
         return function() {
             window.speechSynthesis.cancel();
             stopTimer();
         };
     }, []);
-    useEffect13(function() {
+    useEffect14(function() {
         volumeRef.current = volume;
     }, [
         volume
     ]);
-    useEffect13(function() {
+    useEffect14(function() {
         speedRef.current = speed;
     }, [
         speed
     ]);
-    useEffect13(function() {
+    useEffect14(function() {
         if (!playing) return;
         window.speechSynthesis.cancel();
         stopTimer();
@@ -12045,7 +12070,7 @@ var TexttoAudio = function TexttoAudio(param) {
     }, [
         volume
     ]);
-    useEffect13(function() {
+    useEffect14(function() {
         if (!text.trim()) {
             setDuration(0);
             setCurrentTime(0);
@@ -12059,7 +12084,7 @@ var TexttoAudio = function TexttoAudio(param) {
     }, [
         text
     ]);
-    useEffect13(function() {
+    useEffect14(function() {
         if (!baseDurationRef.current) return;
         var progress = duration === 0 ? 0 : currentTime / duration;
         var newDuration = baseDurationRef.current / speed;
@@ -12074,7 +12099,7 @@ var TexttoAudio = function TexttoAudio(param) {
     }, [
         speed
     ]);
-    useEffect13(function() {
+    useEffect14(function() {
         if (!autoPlayRef.current) return;
         if (!text.trim()) return;
         autoPlayRef.current = false;
@@ -12412,7 +12437,7 @@ var TexttoAudio = function TexttoAudio(param) {
     });
 };
 // src/components/Notifications.tsx
-import { useEffect as useEffect14, useRef as useRef10, useState as useState18 } from "react";
+import { useEffect as useEffect15, useRef as useRef10, useState as useState18 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 import { X as X4 } from "lucide-react";
 import { jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
@@ -12421,7 +12446,7 @@ var MahatiLocationAccessModal = function MahatiLocationAccessModal(param) {
     var ref = useRef10(null);
     var _useState18 = _sliced_to_array(useState18("prompt"), 2), status = _useState18[0], setStatus = _useState18[1];
     var _useState181 = _sliced_to_array(useState18(null), 2), location = _useState181[0], setLocation = _useState181[1];
-    useEffect14(function() {
+    useEffect15(function() {
         if (!navigator.permissions) return;
         navigator.permissions.query({
             name: "geolocation"
@@ -12432,7 +12457,7 @@ var MahatiLocationAccessModal = function MahatiLocationAccessModal(param) {
             };
         });
     }, []);
-    useEffect14(function() {
+    useEffect15(function() {
         if (status === "granted" && location) {
             onAllow === null || onAllow === void 0 ? void 0 : onAllow(location.coords);
             onClose();
@@ -12451,7 +12476,7 @@ var MahatiLocationAccessModal = function MahatiLocationAccessModal(param) {
             enableHighAccuracy: true
         });
     };
-    useEffect14(function() {
+    useEffect15(function() {
         if (!isOpen) return;
         var h = function h(e) {
             var _ref_current;
@@ -12561,7 +12586,7 @@ var MahatiCameraAccessModal = function MahatiCameraAccessModal(param) {
             });
         })();
     };
-    useEffect14(function() {
+    useEffect15(function() {
         if (!isOpen) return;
         var handler = function handler(e) {
             var _cardRef_current;
@@ -12592,7 +12617,8 @@ var MahatiCameraAccessModal = function MahatiCameraAccessModal(param) {
                     onClick: onClose,
                     className: "absolute right-5 top-5 flex h-8 w-8 items-center justify-center rounded-full bg-white shadow-[0_2px_6px_rgba(0,0,0,0.15)]",
                     children: /* @__PURE__ */ jsx33(X4, {
-                        size: 16
+                        size: 16,
+                        color: "black"
                     })
                 }),
                 image && /* @__PURE__ */ jsx33("div", {
@@ -12677,7 +12703,7 @@ var MahatiMicrophoneAccessModal = function MahatiMicrophoneAccessModal(param) {
             });
         })();
     };
-    useEffect14(function() {
+    useEffect15(function() {
         if (!isOpen) return;
         var handler = function handler(e) {
             var _cardRef_current;
@@ -12808,7 +12834,7 @@ var MahatiPromotionModal = function MahatiPromotionModal(_0) {
     ]);
     var ref = useRef10(null);
     var _useState18 = _sliced_to_array(useState18(""), 2), email = _useState18[0], setEmail = _useState18[1];
-    useEffect14(function() {
+    useEffect15(function() {
         if (!isOpen) return;
         var handler = function handler(e) {
             var _ref_current;
@@ -12828,7 +12854,7 @@ var MahatiPromotionModal = function MahatiPromotionModal(_0) {
     var handleCta = function handleCta() {
         onCtaClick === null || onCtaClick === void 0 ? void 0 : onCtaClick(email);
         if (ctaLink) {
-            openInNewTab ? window.open(ctaLink, "_blank") : window.location.href = ctaLink;
+            openInNewTab ? window.open(ctaLink, "_blank") : window.location.assign(ctaLink);
         }
         onClose();
     };
@@ -12851,7 +12877,7 @@ var MahatiPromotionModal = function MahatiPromotionModal(_0) {
 var MahatiPromotionModalV2Modal = function MahatiPromotionModalV2Modal(param) {
     var isOpen = param.isOpen, testId = param.testId, onClose = param.onClose, headerTitle = param.headerTitle, title = param.title, description = param.description, ctaText = param.ctaText, onCtaClick = param.onCtaClick, ctaLink = param.ctaLink, _param_openInNewTab = param.openInNewTab, openInNewTab = _param_openInNewTab === void 0 ? false : _param_openInNewTab, _param_showBadgeImage = param.showBadgeImage, showBadgeImage = _param_showBadgeImage === void 0 ? false : _param_showBadgeImage, badgeImageSrc = param.badgeImageSrc;
     var ref = useRef10(null);
-    useEffect14(function() {
+    useEffect15(function() {
         if (!isOpen) return;
         var handler = function handler(e) {
             var _ref_current;
@@ -12932,7 +12958,7 @@ var MahatiPromotionModalV2Modal = function MahatiPromotionModalV2Modal(param) {
 var MahatiPromotionModalV3Modal = function MahatiPromotionModalV3Modal(param) {
     var isOpen = param.isOpen, testId = param.testId, onClose = param.onClose, title = param.title, description = param.description, ctaText = param.ctaText, onCtaClick = param.onCtaClick, _param_secondaryText = param.secondaryText, secondaryText = _param_secondaryText === void 0 ? "Later" : _param_secondaryText, onSecondaryClick = param.onSecondaryClick, imageSrc = param.imageSrc, ctaLink = param.ctaLink, _param_openInNewTab = param.openInNewTab, openInNewTab = _param_openInNewTab === void 0 ? false : _param_openInNewTab;
     var ref = useRef10(null);
-    useEffect14(function() {
+    useEffect15(function() {
         if (!isOpen) return;
         var handler = function handler(e) {
             var _ref_current;