@algorithm-shift/design-system 1.3.104 → 1.3.106

package/dist/index.mjs

@@ -577,7 +577,8 @@ var Breadcrumb = ({ list = [], className, style }) => {
 var Breadcrumb_default = Breadcrumb;
 
 // src/components/Basic/ButtonGroup/ButtonGroup.tsx
-import { ChevronDown } from "lucide-react";
+import { useMemo as useMemo2 } from "react";
+import { ChevronDown, MoreVertical, Loader2 } from "lucide-react";
 import Link2 from "next/link";
 
 // src/components/ui/dropdown-menu.tsx
@@ -698,50 +699,220 @@ function DropdownMenuSubContent({
 
 // src/components/Basic/ButtonGroup/ButtonGroup.tsx
 import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
-function ButtonGroup({ style, textContent, className, list = [], onGroupItemClick, onClick }) {
-  const data = Array.isArray(list) ? list : [];
-  const bgColor = style?.backgroundColor || "";
-  return /* @__PURE__ */ jsxs7("div", { className: "inline-flex rounded-md overflow-hidden border border-teal-200 bg-teal-700 items-center focus:ring-0", style: { backgroundColor: bgColor }, children: [
-    /* @__PURE__ */ jsx17(
+var ButtonGroup = ({
+  textContent,
+  // Dropdown items
+  data = [],
+  dataKey = "id",
+  dataLabel = "name",
+  // Styling
+  className,
+  style,
+  variant = "default",
+  buttonSize = "default",
+  buttonVariant,
+  dropdownVariant,
+  // Layout
+  orientation = "horizontal",
+  showDropdownIcon = true,
+  dropdownIcon,
+  alignDropdown = "end",
+  // Behavior
+  onItemSelect,
+  onClick,
+  // Advanced
+  disabled = false,
+  loading = false,
+  emptyStateText = "No items available",
+  maxItems,
+  showSeparator = false,
+  ...restProps
+}) => {
+  const dataSource = useMemo2(() => {
+    if (data) {
+      if (Array.isArray(data)) {
+        return data.length > 0 ? data : [];
+      }
+      return [data];
+    }
+    return [];
+  }, [data]);
+  const formattedItems = useMemo2(() => {
+    if (!dataSource.length) return [];
+    return dataSource.map((item, index) => {
+      if (typeof item === "string") {
+        return {
+          id: index,
+          value: item,
+          label: item,
+          name: item
+        };
+      }
+      const value = item[dataKey] ?? item.id ?? item.value ?? index;
+      const label = item[dataLabel] ?? item.label ?? item.name ?? String(value);
+      const url = item.url ?? item.href;
+      return {
+        ...item,
+        id: item.id ?? value,
+        value,
+        label,
+        name: label,
+        url
+      };
+    });
+  }, [dataSource, dataKey, dataLabel]);
+  const displayItems = useMemo2(() => {
+    if (maxItems && maxItems > 0) {
+      return formattedItems.slice(0, maxItems);
+    }
+    return formattedItems;
+  }, [formattedItems, maxItems]);
+  const buttonText = textContent || "Button";
+  const mainButtonVariant = buttonVariant ?? variant;
+  const dropdownButtonVariant = dropdownVariant ?? variant;
+  const handleMainButtonClick = (e) => {
+    if (disabled || loading) return;
+    onClick?.(e);
+  };
+  const handleItemClick = (item, index) => {
+    if (item.disabled) return;
+    if (item.onClick) {
+      item.onClick();
+    }
+    onItemSelect?.({
+      item,
+      index
+    });
+  };
+  const renderDropdownIcon = () => {
+    if (!showDropdownIcon) return null;
+    if (dropdownIcon) {
+      return dropdownIcon;
+    }
+    return orientation === "horizontal" ? /* @__PURE__ */ jsx17(ChevronDown, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx17(MoreVertical, { className: "w-4 h-4" });
+  };
+  const containerClasses = cn(
+    "inline-flex items-center",
+    orientation === "horizontal" ? "flex-row" : "flex-col h-full",
+    "rounded-md overflow-hidden",
+    "border border-border",
+    "bg-background",
+    "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2"
+  );
+  const mainButtonClasses = cn(
+    className,
+    orientation === "horizontal" ? "rounded-none border-l-0 border-t-0 border-r last:border-r-0" : "rounded-none border-t-0 border-b last:border-b-0",
+    "focus:ring-0 focus-visible:ring-0"
+  );
+  const dropdownButtonClasses = cn(
+    "rounded-none",
+    "focus:ring-0 focus-visible:ring-0",
+    "shadow-none"
+  );
+  if (!displayItems.length) {
+    return /* @__PURE__ */ jsx17("div", { className: containerClasses, style, children: /* @__PURE__ */ jsx17(
       Button,
       {
-        className: `rounded-none border-r px-4 py-2 text-whit focus:ring-0 ${className || ""}`,
-        style: { backgroundColor: bgColor },
-        onClick: (e) => onClick?.(e),
-        children: textContent || "Button"
+        variant: mainButtonVariant,
+        size: buttonSize,
+        className: mainButtonClasses,
+        onClick: handleMainButtonClick,
+        disabled: disabled || loading,
+        style,
+        children: loading ? /* @__PURE__ */ jsxs7("span", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx17(Loader2, { className: "w-4 h-4 animate-spin" }),
+          buttonText
+        ] }) : buttonText
       }
-    ),
-    /* @__PURE__ */ jsxs7(DropdownMenu, { children: [
-      /* @__PURE__ */ jsx17(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx17(
-        Button,
-        {
-          className: "rounded-none bg-teal-700 px-4 py-2 text-white ring-0 shadow-none hover:bg-teal-600 focus:ring-0",
-          "aria-label": "Open Dropdown",
-          style: { backgroundColor: bgColor },
-          children: /* @__PURE__ */ jsx17(ChevronDown, { className: "w-4 h-4" })
-        }
-      ) }),
-      /* @__PURE__ */ jsx17(
-        DropdownMenuContent,
-        {
-          align: "end",
-          className: "bg-white min-w-[120px]",
-          children: data.map((item) => /* @__PURE__ */ jsx17(
-            DropdownMenuItem,
+    ) });
+  }
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      className: containerClasses,
+      style,
+      ...restProps,
+      children: [
+        /* @__PURE__ */ jsx17(
+          Button,
+          {
+            variant: mainButtonVariant,
+            size: buttonSize,
+            className: mainButtonClasses,
+            onClick: handleMainButtonClick,
+            disabled: disabled || loading,
+            style,
+            children: loading ? /* @__PURE__ */ jsxs7("span", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx17("span", { className: "animate-spin", children: "\u23F3" }),
+              buttonText
+            ] }) : buttonText
+          }
+        ),
+        /* @__PURE__ */ jsxs7(DropdownMenu, { children: [
+          /* @__PURE__ */ jsx17(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx17(
+            Button,
             {
-              className: "text-black",
-              onSelect: () => onGroupItemClick?.({
-                item
-              }),
-              children: /* @__PURE__ */ jsx17(Link2, { href: item.url || "#", children: item.header })
-            },
-            item.id
-          ))
-        }
-      )
-    ] })
-  ] });
-}
+              variant: dropdownButtonVariant,
+              size: buttonSize,
+              className: dropdownButtonClasses,
+              disabled: disabled || loading,
+              "aria-label": "Open dropdown menu",
+              children: renderDropdownIcon()
+            }
+          ) }),
+          /* @__PURE__ */ jsxs7(
+            DropdownMenuContent,
+            {
+              align: alignDropdown,
+              className: "min-w-[120px] max-h-[300px] overflow-y-auto",
+              children: [
+                displayItems.map((item, index) => {
+                  if (item.separator || showSeparator && index > 0 && index % 3 === 0) {
+                    return /* @__PURE__ */ jsx17(DropdownMenuSeparator, {}, `separator-${index}`);
+                  }
+                  const itemContent = item.url || item.href ? /* @__PURE__ */ jsx17(
+                    Link2,
+                    {
+                      href: item.url || item.href || "#",
+                      className: "flex items-center w-full",
+                      onClick: (e) => {
+                        if (item.disabled) {
+                          e.preventDefault();
+                          return;
+                        }
+                        handleItemClick(item, index);
+                      },
+                      children: item.label || item.name || String(item.value)
+                    }
+                  ) : /* @__PURE__ */ jsx17("span", { className: "flex items-center w-full", children: item.label || item.name || String(item.value) });
+                  return /* @__PURE__ */ jsx17(
+                    DropdownMenuItem,
+                    {
+                      className: cn(
+                        "cursor-pointer",
+                        item.disabled && "opacity-50 cursor-not-allowed"
+                      ),
+                      disabled: item.disabled,
+                      onSelect: () => {
+                        if (!item.disabled) {
+                          handleItemClick(item, index);
+                        }
+                      },
+                      children: itemContent
+                    },
+                    item.id ?? item.value ?? index
+                  );
+                }),
+                displayItems.length === 0 && /* @__PURE__ */ jsx17(DropdownMenuItem, { disabled: true, className: "text-muted-foreground", children: emptyStateText })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+var ButtonGroup_default = ButtonGroup;
 
 // src/components/Basic/Icon/Icon.tsx
 import { useEffect as useEffect3, useState as useState5 } from "react";
@@ -1534,7 +1705,7 @@ function MultiCheckbox({
 import { useEffect as useEffect13 } from "react";
 
 // src/components/Global/TinyMceEditor.tsx
-import { useMemo as useMemo2, useRef as useRef3 } from "react";
+import { useMemo as useMemo3, useRef as useRef3 } from "react";
 import { Editor } from "@tinymce/tinymce-react";
 import { jsx as jsx33 } from "react/jsx-runtime";
 function MyEditor({
@@ -1554,7 +1725,7 @@ function MyEditor({
     }
     return trimmedHtml;
   }
-  const isDefaultToolbar = useMemo2(() => {
+  const isDefaultToolbar = useMemo3(() => {
     let toolbar = "undo redo | formatselect | bold italic forecolor";
     if (isDefault) {
       toolbar = "undo redo | blocks | bold italic forecolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help";
@@ -1762,7 +1933,7 @@ function SelectScrollDownButton({
 }
 
 // src/components/Inputs/Dropdown/LazyDropdown.tsx
-import { useState as useState8, useRef as useRef5, useEffect as useEffect15, useMemo as useMemo3 } from "react";
+import { useState as useState8, useRef as useRef5, useEffect as useEffect15, useMemo as useMemo4 } from "react";
 import { XSquareIcon } from "lucide-react";
 
 // src/hooks/useLazyDropdown.ts
@@ -2064,7 +2235,7 @@ function LazySelectDropdown({
     axiosInstance,
     enforceStrictQueryParams
   });
-  const selectedOption = useMemo3(() => lazyOptions.find((opt) => opt.value === value), [lazyOptions, value]);
+  const selectedOption = useMemo4(() => lazyOptions.find((opt) => opt.value === value), [lazyOptions, value]);
   useEffect15(() => {
     const handleClickOutside = (e) => {
       if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
@@ -2497,12 +2668,12 @@ var FileInput = ({ className, style, ...props }) => {
 var FileInput_default = FileInput;
 
 // src/components/Inputs/DatePicker/DatePicker.tsx
-import * as React7 from "react";
+import * as React8 from "react";
 import { format } from "date-fns";
 import { Calendar1Icon, XSquareIcon as XSquareIcon2 } from "lucide-react";
 
 // src/components/ui/calendar.tsx
-import * as React6 from "react";
+import * as React7 from "react";
 import {
   ChevronDownIcon as ChevronDownIcon2,
   ChevronLeftIcon,
@@ -2662,8 +2833,8 @@ function CalendarDayButton({
   ...props
 }) {
   const defaultClassNames = getDefaultClassNames();
-  const ref = React6.useRef(null);
-  React6.useEffect(() => {
+  const ref = React7.useRef(null);
+  React7.useEffect(() => {
     if (modifiers.focused) ref.current?.focus();
   }, [modifiers.focused]);
   return /* @__PURE__ */ jsx43(
@@ -2757,25 +2928,25 @@ function DateTimePicker({
   const isAutocomplete = props.isAutocomplete ?? false;
   const minDate = resolveDate(minimumDate, customMinimumDate);
   const maxDate = resolveDate(maximumDate, customMaximumDate);
-  const [date, setDate] = React7.useState(() => {
+  const [date, setDate] = React8.useState(() => {
     if (!props.value) return void 0;
     const d = new Date(props.value);
     return isNaN(d.getTime()) ? void 0 : d;
   });
   const initialHours = date ? date.getHours() : 0;
   const initialMinutes = date ? date.getMinutes() : 0;
-  const [hours, setHours] = React7.useState(initialHours);
-  const [minutes, setMinutes] = React7.useState(initialMinutes);
-  const [amPm, setAmPm] = React7.useState("AM");
-  const displayHours = React7.useMemo(() => {
+  const [hours, setHours] = React8.useState(initialHours);
+  const [minutes, setMinutes] = React8.useState(initialMinutes);
+  const [amPm, setAmPm] = React8.useState("AM");
+  const displayHours = React8.useMemo(() => {
     if (hours === 0) return 12;
     if (hours > 12) return hours - 12;
     return hours;
   }, [hours]);
-  React7.useEffect(() => {
+  React8.useEffect(() => {
     setAmPm(hours >= 12 ? "PM" : "AM");
   }, [hours]);
-  React7.useEffect(() => {
+  React8.useEffect(() => {
     if (!props.value) {
       setDate(void 0);
       return;
@@ -2787,8 +2958,8 @@ function DateTimePicker({
       setMinutes(d.getMinutes());
     }
   }, [props.value]);
-  const [year, setYear] = React7.useState(date ? date.getFullYear() : (/* @__PURE__ */ new Date()).getFullYear());
-  React7.useEffect(() => {
+  const [year, setYear] = React8.useState(date ? date.getFullYear() : (/* @__PURE__ */ new Date()).getFullYear());
+  React8.useEffect(() => {
     if (!date) return;
     const newDate = new Date(date);
     newDate.setFullYear(year);
@@ -2891,7 +3062,7 @@ function DateTimePicker({
   for (let y = currentYear - 50; y <= currentYear + 10; y++) {
     yearOptions.push(y);
   }
-  const displayValue = React7.useMemo(() => {
+  const displayValue = React8.useMemo(() => {
     if (!date) return "";
     try {
       if (mode === "date") return format(date, "dd-MM-yyyy");
@@ -2902,11 +3073,11 @@ function DateTimePicker({
     }
   }, [date, mode]);
   const isInputDisabled = isDisabled || !isEditable;
-  const [calendarMonthState, setCalendarMonthState] = React7.useState(() => {
+  const [calendarMonthState, setCalendarMonthState] = React8.useState(() => {
     const currentMonth = (/* @__PURE__ */ new Date()).getMonth();
     return date ? new Date(date.getFullYear(), date.getMonth()) : new Date(year, currentMonth);
   });
-  React7.useEffect(() => {
+  React8.useEffect(() => {
     setCalendarMonthState(new Date(year, calendarMonthState.getMonth()));
   }, [year]);
   const handleToday = () => {
@@ -3052,12 +3223,12 @@ function DateTimePicker({
 }
 
 // src/components/Inputs/DateRange/DateRange.tsx
-import React8, { useEffect as useEffect23 } from "react";
+import React9, { useEffect as useEffect23 } from "react";
 import { addDays, format as format2 } from "date-fns";
 import { Fragment as Fragment17, jsx as jsx46, jsxs as jsxs26 } from "react/jsx-runtime";
 var DateRange = ({ className, style, ...props }) => {
   const isDateRange = (val) => !!val && val.from instanceof Date;
-  const [date, setDate] = React8.useState(
+  const [date, setDate] = React9.useState(
     isDateRange(props.value) ? props.value : {
       from: /* @__PURE__ */ new Date(),
       to: addDays(/* @__PURE__ */ new Date(), 7)
@@ -3171,7 +3342,7 @@ var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
 var TextInputGroup_default = TextInputGroup;
 
 // src/components/Inputs/Multiselect/MultiSelect.tsx
-import { useState as useState10, useRef as useRef7, useEffect as useEffect25, useMemo as useMemo5 } from "react";
+import { useState as useState10, useRef as useRef7, useEffect as useEffect25, useMemo as useMemo6 } from "react";
 import { XIcon, XSquareIcon as XSquareIcon3 } from "lucide-react";
 import { Fragment as Fragment19, jsx as jsx48, jsxs as jsxs28 } from "react/jsx-runtime";
 function LazyMultiSelectDropdown({
@@ -3244,7 +3415,7 @@ function LazyMultiSelectDropdown({
         return unique;
     }
   };
-  const selectedOptions = useMemo5(() => {
+  const selectedOptions = useMemo6(() => {
     return normalizedValue.map((id2) => {
       const fromLazy = lazyOptions.find((opt) => opt.value === id2);
       if (fromLazy) return fromLazy;
@@ -3394,7 +3565,7 @@ function LazyMultiSelectDropdown({
 }
 
 // src/components/ui/data-table.tsx
-import * as React10 from "react";
+import * as React11 from "react";
 import { faEllipsisH } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon as FontAwesomeIcon3 } from "@fortawesome/react-fontawesome";
 import {
@@ -3495,7 +3666,7 @@ function TableCell({ className, ...props }) {
 import { createColumnHelper } from "@tanstack/react-table";
 
 // src/lib/table/cellRendererFactory.tsx
-import React9 from "react";
+import React10 from "react";
 import * as LucideIcons2 from "lucide-react";
 import { Star as Star2 } from "lucide-react";
 import Image from "next/image";
@@ -3583,9 +3754,9 @@ var getContrastColor = (bg) => {
 };
 var sanitizeValue = (val) => {
   if (val == null) return null;
-  if (React9.isValidElement(val)) return val;
+  if (React10.isValidElement(val)) return val;
   if (typeof val === "string" || typeof val === "number") return val;
-  if (Array.isArray(val)) return val.map((v, i) => /* @__PURE__ */ jsx50(React9.Fragment, { children: sanitizeValue(v) }, i));
+  if (Array.isArray(val)) return val.map((v, i) => /* @__PURE__ */ jsx50(React10.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;
@@ -3842,10 +4013,10 @@ function DataTable({
   enableRowSelection = false,
   getRowSelection
 }) {
-  const [columnFilters, setColumnFilters] = React10.useState([]);
-  const [columnVisibility, setColumnVisibility] = React10.useState({});
-  const [manualSort, setManualSort] = React10.useState(null);
-  const [searchTerm, setSearchTerm] = React10.useState("");
+  const [columnFilters, setColumnFilters] = React11.useState([]);
+  const [columnVisibility, setColumnVisibility] = React11.useState({});
+  const [manualSort, setManualSort] = React11.useState(null);
+  const [searchTerm, setSearchTerm] = React11.useState("");
   const tableData = Array.isArray(data) ? data : [];
   const finalCols = [...columns];
   if (enableRowSelection) {
@@ -3871,8 +4042,8 @@ function DataTable({
     });
   }
   const dynamicCols = useDynamicColumns({ columns: finalCols, enableRowSelection });
-  const [rowSelection, setRowSelection] = React10.useState({});
-  const [localPageSize, setLocalPageSize] = React10.useState(pageSize);
+  const [rowSelection, setRowSelection] = React11.useState({});
+  const [localPageSize, setLocalPageSize] = React11.useState(pageSize);
   const table = useReactTable({
     data: tableData,
     columns: dynamicCols,
@@ -3937,7 +4108,7 @@ function DataTable({
     onPageChange?.(currentPageIndex, newSize);
     setLocalPageSize(newSize);
   };
-  const pageSizeOptions = React10.useMemo(() => {
+  const pageSizeOptions = React11.useMemo(() => {
     const options = [5, 10, 20, 50, 100].filter((size) => size < totalRecords);
     if (options.length === 0) {
       options.push(5);
@@ -4132,7 +4303,7 @@ function DataTable({
         return /* @__PURE__ */ jsxs30(
           TableCell,
           {
-            className: `break-words whitespace-normal align-top ${meta?.cellClass ?? ""} ${isClickable ? "cursor-pointer hover:bg-gray-100 underline text-blue-500" : ""} relative py-2`,
+            className: `break-words whitespace-normal align-top ${meta?.cellClass ?? ""} ${isClickable ? "cursor-pointer hover:bg-gray-100 underline text-blue-500" : ""} relative py-2 `,
             style: {
               width: cell.column.getSize(),
               minWidth: cell.column.columnDef.minSize,
@@ -4146,7 +4317,7 @@ function DataTable({
             },
             children: [
               flexRender(cell.column.columnDef.cell, cell.getContext()),
-              isLastCell && rowActions && rowActions.length > 0 && /* @__PURE__ */ jsx51("div", { className: "absolute bg-[#fff] p-1 px-4 inset-y-0 right-0 flex items-center opacity-0 group-hover:opacity-100 transition-opacity duration-200 shadow-lg rounded", children: rowActions.map((action) => {
+              isLastCell && rowActions && rowActions.length > 0 && /* @__PURE__ */ jsx51("div", { className: "absolute p-1 px-2 inset-y-0 right-0 flex items-center transition-opacity duration-200", children: rowActions.map((action) => {
                 const isDelete = action.id === "delete" || action.icon === "delete";
                 return /* @__PURE__ */ jsx51(
                   "button",
@@ -4281,7 +4452,7 @@ var Table2 = ({
         onCellClick?.({ id: cell.id, column: cell, columnId });
       },
       onDeleteRow: (cell) => {
-        onDeleteRow?.(cell.id);
+        onDeleteRow?.({ id: cell.id });
       }
     }
   ) });
@@ -4500,7 +4671,7 @@ var CustomPagination = ({
 var Pagination_default = CustomPagination;
 
 // src/components/DataDisplay/HistoryTimeline/HistoryTimeline.tsx
-import { useMemo as useMemo7 } from "react";
+import { useMemo as useMemo8 } from "react";
 import { LoaderCircle, Info } from "lucide-react";
 
 // src/components/ui/accordion.tsx
@@ -4626,7 +4797,7 @@ var HistoryTimeline = ({
   createdAtKey,
   ...props
 }) => {
-  const data = useMemo7(() => {
+  const data = useMemo8(() => {
     if (Array.isArray(props.data)) {
       return props.data;
     }
@@ -4703,7 +4874,7 @@ var HistoryTimeline = ({
 var HistoryTimeline_default = HistoryTimeline;
 
 // src/components/Navigation/Tabs/Tabs.tsx
-import { useCallback as useCallback4, useMemo as useMemo8, useState as useState12 } from "react";
+import { useCallback as useCallback4, useMemo as useMemo9, useState as useState12 } from "react";
 import { ChevronDown as ChevronDown2, Menu } from "lucide-react";
 import Link3 from "next/link";
 import { usePathname, useRouter } from "next/navigation";
@@ -4926,7 +5097,7 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
     });
     return sortMenus(rootMenus);
   }
-  const rawTabs = useMemo8(() => {
+  const rawTabs = useMemo9(() => {
     if (!Array.isArray(tabs)) return [];
     if (source === "manual") return Array.isArray(tabs) ? tabs : [];
     return groupMenus(tabs);
@@ -5125,7 +5296,7 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
 var Tabs_default = Tabs;
 
 // src/components/Navigation/Stages/Stages.tsx
-import React11, { useEffect as useEffect26, useState as useState13 } from "react";
+import React12, { useEffect as useEffect26, useState as useState13 } from "react";
 
 // src/components/ui/tooltip.tsx
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
@@ -5320,7 +5491,7 @@ var StagesComponent = ({
                 }
               }
               const stageKey = typeof stage[dataKey] === "string" ? stage[dataKey] : JSON.stringify(stage[dataKey]);
-              return /* @__PURE__ */ jsx61(React11.Fragment, { children: /* @__PURE__ */ jsxs38(Tooltip, { delayDuration: 500, disableHoverableContent: true, children: [
+              return /* @__PURE__ */ jsx61(React12.Fragment, { children: /* @__PURE__ */ jsxs38(Tooltip, { delayDuration: 500, disableHoverableContent: true, children: [
                 /* @__PURE__ */ jsx61(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx61(
                   "button",
                   {
@@ -5389,17 +5560,17 @@ import { jsx as jsx64, jsxs as jsxs40 } from "react/jsx-runtime";
 import { jsx as jsx65 } from "react/jsx-runtime";
 
 // src/components/Navigation/Navbar/Navbar.tsx
-import { useCallback as useCallback5, useMemo as useMemo9, useState as useState14, useEffect as useEffect27 } from "react";
+import { useCallback as useCallback5, useMemo as useMemo10, useState as useState14, useEffect as useEffect27 } from "react";
 import { Bell, Search as Search2, Menu as Menu2 } from "lucide-react";
 import Image3 from "next/image";
 import Link4 from "next/link";
 import { useRouter as useRouter2 } from "next/navigation";
 
 // src/components/ui/avatar.tsx
-import * as React12 from "react";
+import * as React13 from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import { jsx as jsx66 } from "react/jsx-runtime";
-var Avatar = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx66(
+var Avatar = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx66(
   AvatarPrimitive.Root,
   {
     ref,
@@ -5411,7 +5582,7 @@ var Avatar = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
   }
 ));
 Avatar.displayName = AvatarPrimitive.Root.displayName;
-var AvatarImage = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx66(
+var AvatarImage = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx66(
   AvatarPrimitive.Image,
   {
     ref,
@@ -5420,7 +5591,7 @@ var AvatarImage = React12.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-var AvatarFallback = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx66(
+var AvatarFallback = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx66(
   AvatarPrimitive.Fallback,
   {
     ref,
@@ -5483,7 +5654,7 @@ function Navbar({
     },
     [isBuilder]
   );
-  const formattedMenu = useMemo9(() => {
+  const formattedMenu = useMemo10(() => {
     if (source === "state" && navList?.length) {
       return navList.map((i) => ({
         ...i,
@@ -5565,7 +5736,7 @@ function Navbar({
 }
 
 // src/components/Chart/BarChart.tsx
-import React13, { useEffect as useEffect28, useMemo as useMemo10, useState as useState15, useCallback as useCallback6 } from "react";
+import React14, { useEffect as useEffect28, useMemo as useMemo11, useState as useState15, useCallback as useCallback6 } from "react";
 import axios3 from "axios";
 import {
   BarChart,
@@ -5693,7 +5864,7 @@ var ChartComponent = ({
     if (rawMeta && (newPage < 1 || newPage > rawMeta.pages)) return;
     setCurrentPage(newPage);
   };
-  const data = useMemo10(() => {
+  const data = useMemo11(() => {
     if (!Array.isArray(effectiveData) || effectiveData.length === 0 || !dataKey || !dataLabel) {
       return [];
     }
@@ -5881,10 +6052,10 @@ var ChartComponent = ({
     ] }) })
   ] });
 };
-var BarChart_default = React13.memo(ChartComponent);
+var BarChart_default = React14.memo(ChartComponent);
 
 // src/components/Chart/PieChart.tsx
-import React14, { useEffect as useEffect29, useMemo as useMemo11, useState as useState16 } from "react";
+import React15, { useEffect as useEffect29, useMemo as useMemo12, useState as useState16 } from "react";
 import axios4 from "axios";
 import {
   PieChart,
@@ -6010,7 +6181,7 @@ var DonutChart = ({
       cancelled = true;
     };
   }, [apiUrl]);
-  const data = useMemo11(() => {
+  const data = useMemo12(() => {
     if (!Array.isArray(effectiveData) || effectiveData.length === 0) return [];
     return effectiveData.map((item) => ({
       ...item,
@@ -6019,11 +6190,11 @@ var DonutChart = ({
       [dataLabel]: item[dataLabel] ?? "Unknown"
     }));
   }, [effectiveData, dataKey, dataLabel]);
-  const total = useMemo11(
+  const total = useMemo12(
     () => data.reduce((sum, d) => sum + (d[dataKey] ?? 0), 0),
     [data, dataKey]
   );
-  const formattedTotal = useMemo11(() => {
+  const formattedTotal = useMemo12(() => {
     if (total >= 1e6) {
       return `${(total / 1e6).toFixed(1)}M`;
     }
@@ -6032,7 +6203,7 @@ var DonutChart = ({
     }
     return total.toString();
   }, [total]);
-  const chartData = useMemo11(() => {
+  const chartData = useMemo12(() => {
     if (total === 0) return data;
     const sortedData = [...data].sort((a, b) => (b[dataKey] ?? 0) - (a[dataKey] ?? 0));
     const minAngle = 360 / Math.max(12, sortedData.length);
@@ -6060,7 +6231,7 @@ var DonutChart = ({
     const timeout = setTimeout(() => setMounted(true), 100);
     return () => clearTimeout(timeout);
   }, []);
-  const renderLegends = useMemo11(() => {
+  const renderLegends = useMemo12(() => {
     if (!showLegends) return null;
     return /* @__PURE__ */ jsx69("div", { className: "flex flex-wrap justify-center gap-2 mt-4 w-full max-w-4xl", children: chartData.map((d, index) => {
       const actualValue = data.find(
@@ -6188,7 +6359,7 @@ var DonutChart = ({
     renderLegends
   ] });
 };
-var PieChart_default = React14.memo(DonutChart);
+var PieChart_default = React15.memo(DonutChart);
 
 // src/components/Blocks/EmailComposer.tsx
 import { jsx as jsx70, jsxs as jsxs44 } from "react/jsx-runtime";
@@ -6297,7 +6468,7 @@ export {
   BarChart_default as BarChart,
   Breadcrumb_default as Breadcrumb,
   Button_default as Button,
-  ButtonGroup,
+  ButtonGroup_default as ButtonGroup,
   Checkbox_default as Checkbox,
   Container_default as Container,
   DateTimePicker as DatePicker,