@algorithm-shift/design-system 1.2.91 → 1.2.93

package/dist/index.js

@@ -27012,7 +27012,7 @@ var TextInput = ({ className, style, ...props }) => {
     }
   }, []);
   const handleChange = (e) => {
-    props.onChange?.(e);
+    props.onChange?.(e, e.target.name || "");
   };
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
@@ -27054,7 +27054,7 @@ var NumberInput = ({ className, style, ...props }) => {
     }
   }, []);
   const handleChange = (e) => {
-    props.onChange?.(e);
+    props.onChange?.(e, e.target.name || "");
   };
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex justify-start items-center relative", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
@@ -27097,7 +27097,7 @@ var EmailInput = ({ className, style, ...props }) => {
     }
   }, []);
   const handleChange = (e) => {
-    props.onChange?.(e);
+    props.onChange?.(e, props.name || "");
   };
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex justify-start items-center relative", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
@@ -27139,7 +27139,7 @@ var PasswordInput = ({ className, style, ...props }) => {
     }
   }, []);
   const handleChange = (e) => {
-    props.onChange?.(e);
+    props.onChange?.(e, e.target.name || "");
   };
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex justify-start items-center relative", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
@@ -27200,7 +27200,7 @@ var Textarea2 = ({ className, style, ...props }) => {
     }
   }, []);
   const handleChange = (e) => {
-    props.onChange?.(e);
+    props.onChange?.(e, e.target.name || "");
   };
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
@@ -27242,7 +27242,7 @@ var UrlInput = ({ className, style, ...props }) => {
     }
   }, []);
   const handleChange = (e) => {
-    props.onChange?.(e);
+    props.onChange?.(e, e.target.name || "");
   };
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex justify-start items-center relative", children: [
@@ -27335,7 +27335,7 @@ var CheckboxInput = ({ className, style, ...props }) => {
     }
   }, []);
   const handleChange = (value) => {
-    props.onChange?.(value);
+    props.onChange?.(value, props.name || "");
   };
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center space-x-2", children: [
@@ -27422,7 +27422,7 @@ var RadioInput = ({
     }
   }, []);
   const handleChange = (value) => {
-    onChange?.(value);
+    onChange?.(value, props.name || "");
   };
   const resolvedDefaultValue = (typeof defaultValue === "string" ? defaultValue : void 0) ?? options[0]?.value;
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
@@ -27457,7 +27457,8 @@ var MultiCheckbox = ({
   value: propValue = {},
   onChange,
   isEditable = true,
-  isDisabled = false
+  isDisabled = false,
+  ...props
 }) => {
   const list = Array.isArray(data) ? data : [];
   const [value, setValue] = (0, import_react16.useState)(propValue);
@@ -27467,14 +27468,14 @@ var MultiCheckbox = ({
   }));
   (0, import_react16.useEffect)(() => {
     if (propValue !== void 0) {
-      onChange?.(propValue);
+      onChange?.(propValue, props.name || "");
     }
   }, []);
   const handleChange = (0, import_react16.useCallback)(
     (key, checked) => {
       setValue((prev) => {
         const newValue = { ...prev, [key]: checked };
-        onChange?.(newValue);
+        onChange?.(newValue, props.name || "");
         return newValue;
       });
     },
@@ -27588,7 +27589,7 @@ function RichText({ className, style, ...props }) {
     }
   }, []);
   const handleChange = (content) => {
-    props.onChange?.(content);
+    props.onChange?.(content, props.name || "");
   };
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     "div",
@@ -27775,7 +27776,8 @@ function useLazyDropdown(config) {
     const limit = PAGE_SIZE;
     const params = { page: pageNum, limit };
     if (term) params[configRef.current.dataLabel ?? "search"] = term;
-    const res = await import_axios.default.get(configRef.current.apiUrl, {
+    const axiosClient = configRef.current.axiosInstance ?? import_axios.default;
+    const res = await axiosClient.get(configRef.current.apiUrl, {
       params,
       withCredentials: true
     });
@@ -27823,7 +27825,8 @@ function useLazyDropdown(config) {
     if (!configRef.current.apiUrl) return [];
     try {
       setLoading(true);
-      const res = await import_axios.default.get(configRef.current.apiUrl, {
+      const axiosClient = configRef.current.axiosInstance ?? import_axios.default;
+      const res = await axiosClient.get(configRef.current.apiUrl, {
         params: { [configRef.current.dataKey]: configRef.current.value },
         withCredentials: true
       });
@@ -27859,8 +27862,7 @@ function useLazyDropdown(config) {
   const reset = (0, import_react19.useCallback)(() => {
     setSearchTerm("");
     setPage(1);
-    loadPage(1, "");
-  }, [loadPage]);
+  }, []);
   (0, import_react19.useEffect)(() => {
     if (config.initialData?.length) {
       allDataRef.current = config.initialData;
@@ -27899,7 +27901,8 @@ function LazySelectDropdown({
   pageSize,
   dataKey = "id",
   dataLabel = "name",
-  errorMessage
+  errorMessage,
+  axiosInstance
 }) {
   const [isOpen, setIsOpen] = (0, import_react20.useState)(false);
   const [searchTerm, setSearchTerm] = (0, import_react20.useState)("");
@@ -27921,7 +27924,8 @@ function LazySelectDropdown({
     dataKey,
     dataLabel,
     initialData: options || [],
-    value
+    value,
+    axiosInstance
   });
   const selectedOption = lazyOptions.find((opt) => opt.value === value);
   (0, import_react20.useEffect)(() => {
@@ -27951,7 +27955,7 @@ function LazySelectDropdown({
     search(term);
   };
   const handleSelect = (optValue) => {
-    onChange?.(optValue);
+    onChange?.(optValue, id || "");
     setIsOpen(false);
     setSearchTerm("");
     reset();
@@ -28040,7 +28044,7 @@ var Dropdown = ({ className, style, ...props }) => {
     }
   }, []);
   const handleChange = (value) => {
-    props.onChange?.(value);
+    props.onChange?.(value, props.name ?? "");
   };
   const dataKey = props.dataKey || "value";
   const dataLabel = props.dataLabel || "label";
@@ -28135,7 +28139,7 @@ var SwitchToggle = ({ className, style, ...props }) => {
     }
   }, []);
   const handleChange = (value) => {
-    props.onChange?.(value);
+    props.onChange?.(value, props.name || "");
   };
   return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex items-center space-x-2 mb-2", children: [
@@ -28170,7 +28174,7 @@ var PhoneInput = ({ className, style, ...props }) => {
     }
   }, []);
   const handleChange = (val) => {
-    props.onChange?.(val);
+    props.onChange?.(val, props.name || "");
   };
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
@@ -28218,7 +28222,7 @@ var SearchInput = ({ className, style, ...props }) => {
     }
   }, []);
   const handleChange = (e) => {
-    props.onChange?.(e);
+    props.onChange?.(e, e.target.name || "");
   };
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex justify-start items-center relative", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
@@ -28257,7 +28261,7 @@ var FileInput2 = ({ className, style, ...props }) => {
     }
   }, []);
   const handleChange = (e) => {
-    props.onChange?.(e);
+    props.onChange?.(e, props.name || "");
   };
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "d-flex items-center relative align-middle", children: [
     /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
@@ -28315,7 +28319,7 @@ function DatePicker({ className, style, ...props }) {
     }
   }, []);
   const handleChange = (e) => {
-    props.onChange?.(e);
+    props.onChange?.(e, e.target.name || "");
   };
   const toDateInputValue = (value) => {
     if (!value) return "";
@@ -28588,7 +28592,7 @@ var DateRange = ({ className, style, ...props }) => {
   const handleChange = (value) => {
     setDate(value);
     if (value) {
-      props.onChange?.(value);
+      props.onChange?.(value, props.name || "");
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
@@ -28642,7 +28646,7 @@ var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
     }
   }, []);
   const handleChange = (e) => {
-    props.onChange?.(e);
+    props.onChange?.(e, e.target.name || "");
   };
   return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
@@ -28929,12 +28933,13 @@ var MultiSelect = ({
   const [open, setOpen] = React8.useState(false);
   React8.useEffect(() => {
     if (value) {
-      onChange(value);
+      onChange(value, props.name || "");
     }
   }, []);
   const toggleOption = (val) => {
     onChange(
-      value?.includes(val) ? value.filter((v) => v !== val) : [...value || [], val]
+      value?.includes(val) ? value.filter((v) => v !== val) : [...value || [], val],
+      props.name || ""
     );
   };
   const selectedLabels = React8.useMemo(
@@ -29010,7 +29015,7 @@ var MultiSelect = ({
 var MultiSelect_default = MultiSelect;
 
 // src/components/ui/data-table.tsx
-var React9 = __toESM(require("react"));
+var React10 = __toESM(require("react"));
 var import_free_solid_svg_icons2 = require("@fortawesome/free-solid-svg-icons");
 var import_react_fontawesome3 = require("@fortawesome/react-fontawesome");
 var import_react_table2 = require("@tanstack/react-table");
@@ -29104,6 +29109,7 @@ function TableCell({ className, ...props }) {
 var import_react_table = require("@tanstack/react-table");
 
 // src/lib/table/cellRendererFactory.tsx
+var import_react29 = __toESM(require("react"));
 var import_image3 = __toESM(require("next/image"));
 
 // src/lib/dayjs-setup.ts
@@ -29184,6 +29190,22 @@ var getContrastColor = (bg) => {
   const brightness = (r * 299 + g * 587 + b * 114) / 1e3;
   return brightness > 160 ? "#000000" : "#FFFFFF";
 };
+var sanitizeValue = (val) => {
+  if (val == null) return null;
+  if (import_react29.default.isValidElement(val)) return val;
+  if (typeof val === "string" || typeof val === "number") return val;
+  if (Array.isArray(val)) return val.map((v, i) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_react29.default.Fragment, { children: sanitizeValue(v) }, i));
+  if (typeof val === "object") {
+    if ("name" in val && typeof val.name === "string") return val.name;
+    if ("label" in val && typeof val.label === "string") return val.label;
+    try {
+      return JSON.stringify(val);
+    } catch {
+      return "[object]";
+    }
+  }
+  return String(val);
+};
 var cellRendererFactory = (renderer, rendererProps, value, row, customRenderers = {}, format2, customFormatters = {}) => {
   const formattedValue = valueFormatter(value, format2, customFormatters);
   switch (renderer) {
@@ -29335,13 +29357,15 @@ var useDynamicColumns = (config, customRenderers = {}, customFormatters = {}) =>
   return config.columns.map((col) => {
     const accessorKey = col.accessorKey ?? col.id;
     const accessorFn = (row) => {
+      if (!row) return null;
       if (Object.prototype.hasOwnProperty.call(row, accessorKey)) {
-        return row[accessorKey];
+        return sanitizeValue(row[accessorKey]);
       }
       if (accessorKey.includes(".")) {
-        return getValueByPath(row, accessorKey);
+        const val = getValueByPath(row, accessorKey);
+        return sanitizeValue(val);
       }
-      return row[accessorKey];
+      return sanitizeValue(row[accessorKey]);
     };
     return columnHelper.accessor(accessorFn, {
       id: col.id ?? accessorKey,
@@ -29386,13 +29410,13 @@ function DataTable({
   onDeleteRow,
   rowActions
 }) {
-  const [columnFilters, setColumnFilters] = React9.useState([]);
-  const [columnVisibility, setColumnVisibility] = React9.useState({});
-  const [manualSort, setManualSort] = React9.useState(null);
-  const [searchTerm, setSearchTerm] = React9.useState("");
+  const [columnFilters, setColumnFilters] = React10.useState([]);
+  const [columnVisibility, setColumnVisibility] = React10.useState({});
+  const [manualSort, setManualSort] = React10.useState(null);
+  const [searchTerm, setSearchTerm] = React10.useState("");
   const dynamicCols = useDynamicColumns({ columns });
   const table = (0, import_react_table2.useReactTable)({
-    data,
+    data: data ?? [],
     columns: dynamicCols,
     state: {
       columnFilters,
@@ -29605,7 +29629,7 @@ function DataTable({
         return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
           TableCell,
           {
-            className: `${meta?.cellClass ?? ""} ${isClickable ? "cursor-pointer hover:bg-gray-100" : ""} relative`,
+            className: `${meta?.cellClass ?? ""} ${isClickable ? "cursor-pointer hover:bg-gray-100 underline text-blue-500" : ""} relative`,
             style: meta?.cellStyle,
             onClick: () => {
               if (isClickable && onCellClick) {
@@ -29949,12 +29973,12 @@ var CustomPagination = ({
 var Pagination_default = CustomPagination;
 
 // src/components/Navigation/Tabs/Tabs.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 var import_link5 = __toESM(require("next/link"));
 var import_navigation3 = require("next/navigation");
 var import_jsx_runtime57 = require("react/jsx-runtime");
 var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuilder = false, source, parentKey, menuNameKey, menuUrlKey, loading }) => {
-  const [openIndex, setOpenIndex] = (0, import_react29.useState)(null);
+  const [openIndex, setOpenIndex] = (0, import_react30.useState)(null);
   function groupMenus(menus = []) {
     const menuMap = /* @__PURE__ */ new Map();
     menus.forEach((menu) => {
@@ -29987,7 +30011,7 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
     });
     return sortMenus(rootMenus);
   }
-  const rawTabs = (0, import_react29.useMemo)(() => {
+  const rawTabs = (0, import_react30.useMemo)(() => {
     if (!Array.isArray(tabs)) return [];
     if (source === "manual") return Array.isArray(tabs) ? tabs : [];
     return groupMenus(tabs);
@@ -30000,9 +30024,9 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
     return pathname === path || path !== "/" && pathname?.startsWith(path);
   };
   const router = (0, import_navigation3.useRouter)();
-  const [showExitDialog, setShowExitDialog] = (0, import_react29.useState)(false);
-  const [pendingUrl, setPendingUrl] = (0, import_react29.useState)(null);
-  const handleBuilderExit = (0, import_react29.useCallback)(
+  const [showExitDialog, setShowExitDialog] = (0, import_react30.useState)(false);
+  const [pendingUrl, setPendingUrl] = (0, import_react30.useState)(null);
+  const handleBuilderExit = (0, import_react30.useCallback)(
     (e, url) => {
       if (isBuilder) {
         e.preventDefault();
@@ -30157,10 +30181,10 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
 var Tabs_default = Tabs;
 
 // src/components/Navigation/Stages/Stages.tsx
-var import_react30 = __toESM(require("react"));
+var import_react31 = __toESM(require("react"));
 var import_jsx_runtime58 = require("react/jsx-runtime");
 var StagesComponent = ({ stages, isShowBtn, buttonText, className, style, onStageChange, currentStage, dataKey = "key", dataLabel = "header", loading }) => {
-  const [activeStage, setActiveStage] = (0, import_react30.useState)(currentStage || (stages && stages.length > 0 ? stages[0].key : null));
+  const [activeStage, setActiveStage] = (0, import_react31.useState)(currentStage || (stages && stages.length > 0 ? stages[0].key : null));
   const nextStage = () => {
     if (!stages || stages.length === 0) return;
     const currentIndex = stages.findIndex((stage) => stage[dataKey] === activeStage);
@@ -30192,7 +30216,7 @@ var StagesComponent = ({ stages, isShowBtn, buttonText, className, style, onStag
       const currentIndex = stages.findIndex((s) => s[dataKey] === activeStage);
       const isCompleted = isAllStagesCompleted || index < currentIndex;
       const isActive = !isAllStagesCompleted && index === currentIndex;
-      return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_react30.default.Fragment, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_react31.default.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
           "button",
           {
@@ -30240,10 +30264,10 @@ var import_jsx_runtime61 = require("react/jsx-runtime");
 var import_jsx_runtime62 = require("react/jsx-runtime");
 
 // src/components/ui/avatar.tsx
-var React11 = __toESM(require("react"));
+var React12 = __toESM(require("react"));
 var AvatarPrimitive = __toESM(require("@radix-ui/react-avatar"));
 var import_jsx_runtime63 = require("react/jsx-runtime");
-var Avatar = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+var Avatar = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
   AvatarPrimitive.Root,
   {
     ref,
@@ -30255,7 +30279,7 @@ var Avatar = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
   }
 ));
 Avatar.displayName = AvatarPrimitive.Root.displayName;
-var AvatarImage = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+var AvatarImage = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
   AvatarPrimitive.Image,
   {
     ref,
@@ -30264,7 +30288,7 @@ var AvatarImage = React11.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-var AvatarFallback = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+var AvatarFallback = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
   AvatarPrimitive.Fallback,
   {
     ref,
@@ -30282,7 +30306,7 @@ var import_link6 = __toESM(require("next/link"));
 var import_image4 = __toESM(require("next/image"));
 var import_navigation4 = require("next/navigation");
 var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
-var import_react31 = require("react");
+var import_react32 = require("react");
 var import_jsx_runtime64 = require("react/jsx-runtime");
 function Navbar({
   style,
@@ -30303,9 +30327,9 @@ function Navbar({
 }) {
   const isMobileView = canvasMode === "mobile" || canvasMode === "tablet";
   const router = (0, import_navigation4.useRouter)();
-  const [showExitDialog, setShowExitDialog] = (0, import_react31.useState)(false);
-  const [pendingUrl, setPendingUrl] = (0, import_react31.useState)(null);
-  const handleBuilderExit = (0, import_react31.useCallback)(
+  const [showExitDialog, setShowExitDialog] = (0, import_react32.useState)(false);
+  const [pendingUrl, setPendingUrl] = (0, import_react32.useState)(null);
+  const handleBuilderExit = (0, import_react32.useCallback)(
     (e, url) => {
       if (isBuilder) {
         e.preventDefault();
@@ -30321,7 +30345,7 @@ function Navbar({
       router.push(pendingUrl);
     }
   };
-  const formatedMenu = (0, import_react31.useMemo)(() => {
+  const formatedMenu = (0, import_react32.useMemo)(() => {
     if (source === "state" && navList && navList.length) {
       return navList.map((i) => ({ ...i, header: i.name || "Menu" }));
     }
@@ -30424,7 +30448,7 @@ function Navbar({
 }
 
 // src/components/Chart/BarChart.tsx
-var import_react32 = __toESM(require("react"));
+var import_react33 = __toESM(require("react"));
 var import_recharts = require("recharts");
 var import_jsx_runtime65 = require("react/jsx-runtime");
 var ChartComponent = ({ className, style, loading, ...props }) => {
@@ -30485,10 +30509,10 @@ var ChartComponent = ({ className, style, loading, ...props }) => {
     )
   ] }) }) });
 };
-var BarChart_default = import_react32.default.memo(ChartComponent);
+var BarChart_default = import_react33.default.memo(ChartComponent);
 
 // src/components/Chart/PieChart.tsx
-var import_react33 = __toESM(require("react"));
+var import_react34 = __toESM(require("react"));
 var import_recharts2 = require("recharts");
 var import_jsx_runtime66 = require("react/jsx-runtime");
 var getRandomColor = () => {
@@ -30510,18 +30534,18 @@ var DonutChart = ({ className, style, loading, ...props }) => {
   const showLegends = props.showLegends ?? true;
   const labelType = props.labelType || "inside";
   const canvasMode = props.canvasMode;
-  const data = (0, import_react33.useMemo)(() => {
+  const data = (0, import_react34.useMemo)(() => {
     if (!Array.isArray(props.data)) return [];
     return props.data.map((item) => ({ ...item, color: getRandomColor() }));
   }, [props.data]);
-  const total = (0, import_react33.useMemo)(() => data.reduce((sum, d) => sum + d.value, 0), [data]);
+  const total = (0, import_react34.useMemo)(() => data.reduce((sum, d) => sum + d.value, 0), [data]);
   const forceMobile = canvasMode === "mobile" || canvasMode === "tablet";
-  const [mounted, setMounted] = (0, import_react33.useState)(false);
-  (0, import_react33.useEffect)(() => {
+  const [mounted, setMounted] = (0, import_react34.useState)(false);
+  (0, import_react34.useEffect)(() => {
     const timeout = setTimeout(() => setMounted(true), 100);
     return () => clearTimeout(timeout);
   }, []);
-  const renderLegends = (0, import_react33.useMemo)(() => {
+  const renderLegends = (0, import_react34.useMemo)(() => {
     if (!showLegends) return null;
     return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_jsx_runtime66.Fragment, { children: data.map((d) => /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
       "div",
@@ -30609,7 +30633,7 @@ var DonutChart = ({ className, style, loading, ...props }) => {
     }
   );
 };
-var PieChart_default = import_react33.default.memo(DonutChart);
+var PieChart_default = import_react34.default.memo(DonutChart);
 
 // src/components/Blocks/EmailComposer.tsx
 var import_jsx_runtime67 = require("react/jsx-runtime");