unifyedx-storybook-new 0.1.39 → 0.1.40

package/dist/unifyedx-storybook-new.es.js

@@ -5,9 +5,6 @@ import { Popover as Popover$1, PopoverButton, PopoverPanel, Transition, Dialog,
 import { motion, AnimatePresence } from 'framer-motion';
 import { useFloating, offset as offset$2, flip as flip$2, shift as shift$2, autoUpdate as autoUpdate$1, useClick, useDismiss, useInteractions, FloatingPortal } from '@floating-ui/react';
 import { unstable_batchedUpdates, createPortal } from 'react-dom';
-import { CKEditor } from '@ckeditor/ckeditor5-react';
-import { Essentials, Paragraph, Heading, Alignment, BlockQuote, Bold, Italic, Underline, Strikethrough, Link, List, Indent, IndentBlock, Table, SourceEditing, Undo, ClassicEditor } from 'ckeditor5';
-import 'ckeditor5/ckeditor5.css';
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -126,11 +123,11 @@ const createLucideIcon = (iconName, iconNode) => {
  */
 
 
-const __iconNode$o = [
+const __iconNode$w = [
   ["path", { d: "m12 19-7-7 7-7", key: "1l729n" }],
   ["path", { d: "M19 12H5", key: "x3x0zl" }]
 ];
-const ArrowLeft = createLucideIcon("arrow-left", __iconNode$o);
+const ArrowLeft = createLucideIcon("arrow-left", __iconNode$w);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -140,13 +137,13 @@ const ArrowLeft = createLucideIcon("arrow-left", __iconNode$o);
  */
 
 
-const __iconNode$n = [
+const __iconNode$v = [
   ["path", { d: "M8 2v4", key: "1cmpym" }],
   ["path", { d: "M16 2v4", key: "4m81vk" }],
   ["rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", key: "1hopcy" }],
   ["path", { d: "M3 10h18", key: "8toen8" }]
 ];
-const Calendar$1 = createLucideIcon("calendar", __iconNode$n);
+const Calendar$1 = createLucideIcon("calendar", __iconNode$v);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -156,8 +153,8 @@ const Calendar$1 = createLucideIcon("calendar", __iconNode$n);
  */
 
 
-const __iconNode$m = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
-const Check = createLucideIcon("check", __iconNode$m);
+const __iconNode$u = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+const Check = createLucideIcon("check", __iconNode$u);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -167,8 +164,8 @@ const Check = createLucideIcon("check", __iconNode$m);
  */
 
 
-const __iconNode$l = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$l);
+const __iconNode$t = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$t);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -178,11 +175,11 @@ const ChevronDown = createLucideIcon("chevron-down", __iconNode$l);
  */
 
 
-const __iconNode$k = [
+const __iconNode$s = [
   ["path", { d: "m17 18-6-6 6-6", key: "1yerx2" }],
   ["path", { d: "M7 6v12", key: "1p53r6" }]
 ];
-const ChevronFirst = createLucideIcon("chevron-first", __iconNode$k);
+const ChevronFirst = createLucideIcon("chevron-first", __iconNode$s);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -192,11 +189,11 @@ const ChevronFirst = createLucideIcon("chevron-first", __iconNode$k);
  */
 
 
-const __iconNode$j = [
+const __iconNode$r = [
   ["path", { d: "m7 18 6-6-6-6", key: "lwmzdw" }],
   ["path", { d: "M17 6v12", key: "1o0aio" }]
 ];
-const ChevronLast = createLucideIcon("chevron-last", __iconNode$j);
+const ChevronLast = createLucideIcon("chevron-last", __iconNode$r);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -206,8 +203,8 @@ const ChevronLast = createLucideIcon("chevron-last", __iconNode$j);
  */
 
 
-const __iconNode$i = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
-const ChevronLeft = createLucideIcon("chevron-left", __iconNode$i);
+const __iconNode$q = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
+const ChevronLeft = createLucideIcon("chevron-left", __iconNode$q);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -217,8 +214,8 @@ const ChevronLeft = createLucideIcon("chevron-left", __iconNode$i);
  */
 
 
-const __iconNode$h = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$h);
+const __iconNode$p = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$p);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -228,11 +225,11 @@ const ChevronRight = createLucideIcon("chevron-right", __iconNode$h);
  */
 
 
-const __iconNode$g = [
+const __iconNode$o = [
   ["path", { d: "m7 15 5 5 5-5", key: "1hf1tw" }],
   ["path", { d: "m7 9 5-5 5 5", key: "sgt6xg" }]
 ];
-const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$g);
+const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$o);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -242,11 +239,11 @@ const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$g);
  */
 
 
-const __iconNode$f = [
+const __iconNode$n = [
   ["path", { d: "M21.801 10A10 10 0 1 1 17 3.335", key: "yps3ct" }],
   ["path", { d: "m9 11 3 3L22 4", key: "1pflzl" }]
 ];
-const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$f);
+const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$n);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -256,12 +253,12 @@ const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$f);
  */
 
 
-const __iconNode$e = [
+const __iconNode$m = [
   ["path", { d: "M12 13v8", key: "1l5pq0" }],
   ["path", { d: "M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242", key: "1pljnt" }],
   ["path", { d: "m8 17 4-4 4 4", key: "1quai1" }]
 ];
-const CloudUpload = createLucideIcon("cloud-upload", __iconNode$e);
+const CloudUpload = createLucideIcon("cloud-upload", __iconNode$m);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -271,12 +268,36 @@ const CloudUpload = createLucideIcon("cloud-upload", __iconNode$e);
  */
 
 
-const __iconNode$d = [
+const __iconNode$l = [
+  ["path", { d: "M10.5 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v5.5", key: "1g2yzs" }],
+  ["path", { d: "m14.3 19.6 1-.4", key: "11sv9r" }],
+  ["path", { d: "M15 3v7.5", key: "7lm50a" }],
+  ["path", { d: "m15.2 16.9-.9-.3", key: "1t7mvx" }],
+  ["path", { d: "m16.6 21.7.3-.9", key: "1j67ps" }],
+  ["path", { d: "m16.8 15.3-.4-1", key: "1ei7r6" }],
+  ["path", { d: "m19.1 15.2.3-.9", key: "18r7jp" }],
+  ["path", { d: "m19.6 21.7-.4-1", key: "z2vh2" }],
+  ["path", { d: "m20.7 16.8 1-.4", key: "19m87a" }],
+  ["path", { d: "m21.7 19.4-.9-.3", key: "1qgwi9" }],
+  ["path", { d: "M9 3v18", key: "fh3hqa" }],
+  ["circle", { cx: "18", cy: "18", r: "3", key: "1xkwt0" }]
+];
+const Columns3Cog = createLucideIcon("columns-3-cog", __iconNode$l);
+
+/**
+ * @license lucide-react v0.525.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$k = [
   ["circle", { cx: "12", cy: "12", r: "1", key: "41hilf" }],
   ["circle", { cx: "12", cy: "5", r: "1", key: "gxeob9" }],
   ["circle", { cx: "12", cy: "19", r: "1", key: "lyex9k" }]
 ];
-const EllipsisVertical = createLucideIcon("ellipsis-vertical", __iconNode$d);
+const EllipsisVertical = createLucideIcon("ellipsis-vertical", __iconNode$k);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -286,12 +307,12 @@ const EllipsisVertical = createLucideIcon("ellipsis-vertical", __iconNode$d);
  */
 
 
-const __iconNode$c = [
+const __iconNode$j = [
   ["path", { d: "M12 17h.01", key: "p32p05" }],
   ["path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z", key: "1mlx9k" }],
   ["path", { d: "M9.1 9a3 3 0 0 1 5.82 1c0 2-3 3-3 3", key: "mhlwft" }]
 ];
-const FileQuestionMark = createLucideIcon("file-question-mark", __iconNode$c);
+const FileQuestionMark = createLucideIcon("file-question-mark", __iconNode$j);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -301,7 +322,42 @@ const FileQuestionMark = createLucideIcon("file-question-mark", __iconNode$c);
  */
 
 
-const __iconNode$b = [
+const __iconNode$i = [
+  ["path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z", key: "1rqfz7" }],
+  ["path", { d: "M14 2v4a2 2 0 0 0 2 2h4", key: "tnqrlb" }],
+  ["path", { d: "M8 13h2", key: "yr2amv" }],
+  ["path", { d: "M14 13h2", key: "un5t4a" }],
+  ["path", { d: "M8 17h2", key: "2yhykz" }],
+  ["path", { d: "M14 17h2", key: "10kma7" }]
+];
+const FileSpreadsheet = createLucideIcon("file-spreadsheet", __iconNode$i);
+
+/**
+ * @license lucide-react v0.525.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$h = [
+  ["path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z", key: "1rqfz7" }],
+  ["path", { d: "M14 2v4a2 2 0 0 0 2 2h4", key: "tnqrlb" }],
+  ["path", { d: "M10 9H8", key: "b1mrlr" }],
+  ["path", { d: "M16 13H8", key: "t4e002" }],
+  ["path", { d: "M16 17H8", key: "z1uh3a" }]
+];
+const FileText = createLucideIcon("file-text", __iconNode$h);
+
+/**
+ * @license lucide-react v0.525.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$g = [
   [
     "path",
     {
@@ -310,7 +366,7 @@ const __iconNode$b = [
     }
   ]
 ];
-const Folder = createLucideIcon("folder", __iconNode$b);
+const Folder = createLucideIcon("folder", __iconNode$g);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -320,7 +376,7 @@ const Folder = createLucideIcon("folder", __iconNode$b);
  */
 
 
-const __iconNode$a = [
+const __iconNode$f = [
   ["circle", { cx: "9", cy: "12", r: "1", key: "1vctgf" }],
   ["circle", { cx: "9", cy: "5", r: "1", key: "hp0tcf" }],
   ["circle", { cx: "9", cy: "19", r: "1", key: "fkjjf6" }],
@@ -328,7 +384,7 @@ const __iconNode$a = [
   ["circle", { cx: "15", cy: "5", r: "1", key: "19l28e" }],
   ["circle", { cx: "15", cy: "19", r: "1", key: "f4zoj3" }]
 ];
-const GripVertical = createLucideIcon("grip-vertical", __iconNode$a);
+const GripVertical = createLucideIcon("grip-vertical", __iconNode$f);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -338,12 +394,12 @@ const GripVertical = createLucideIcon("grip-vertical", __iconNode$a);
  */
 
 
-const __iconNode$9 = [
+const __iconNode$e = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "M12 16v-4", key: "1dtifu" }],
   ["path", { d: "M12 8h.01", key: "e9boi3" }]
 ];
-const Info = createLucideIcon("info", __iconNode$9);
+const Info = createLucideIcon("info", __iconNode$e);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -353,8 +409,12 @@ const Info = createLucideIcon("info", __iconNode$9);
  */
 
 
-const __iconNode$8 = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
-const LoaderCircle = createLucideIcon("loader-circle", __iconNode$8);
+const __iconNode$d = [
+  ["path", { d: "M3 6h18", key: "d0wm0j" }],
+  ["path", { d: "M7 12h10", key: "b7w52i" }],
+  ["path", { d: "M10 18h4", key: "1ulq68" }]
+];
+const ListFilter = createLucideIcon("list-filter", __iconNode$d);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -364,12 +424,23 @@ const LoaderCircle = createLucideIcon("loader-circle", __iconNode$8);
  */
 
 
-const __iconNode$7 = [
+const __iconNode$c = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
+const LoaderCircle = createLucideIcon("loader-circle", __iconNode$c);
+
+/**
+ * @license lucide-react v0.525.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$b = [
   ["path", { d: "m16 17 5-5-5-5", key: "1bji2h" }],
   ["path", { d: "M21 12H9", key: "dn1m92" }],
   ["path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4", key: "1uf3rs" }]
 ];
-const LogOut = createLucideIcon("log-out", __iconNode$7);
+const LogOut = createLucideIcon("log-out", __iconNode$b);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -379,12 +450,12 @@ const LogOut = createLucideIcon("log-out", __iconNode$7);
  */
 
 
-const __iconNode$6 = [
+const __iconNode$a = [
   ["path", { d: "M4 12h16", key: "1lakjw" }],
   ["path", { d: "M4 18h16", key: "19g7jn" }],
   ["path", { d: "M4 6h16", key: "1o0s65" }]
 ];
-const Menu = createLucideIcon("menu", __iconNode$6);
+const Menu = createLucideIcon("menu", __iconNode$a);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -394,11 +465,11 @@ const Menu = createLucideIcon("menu", __iconNode$6);
  */
 
 
-const __iconNode$5 = [
+const __iconNode$9 = [
   ["path", { d: "M6 8L2 12L6 16", key: "kyvwex" }],
   ["path", { d: "M2 12H22", key: "1m8cig" }]
 ];
-const MoveLeft = createLucideIcon("move-left", __iconNode$5);
+const MoveLeft = createLucideIcon("move-left", __iconNode$9);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -408,11 +479,62 @@ const MoveLeft = createLucideIcon("move-left", __iconNode$5);
  */
 
 
-const __iconNode$4 = [
+const __iconNode$8 = [
+  ["path", { d: "M5 12h14", key: "1ays0h" }],
+  ["path", { d: "M12 5v14", key: "s699le" }]
+];
+const Plus = createLucideIcon("plus", __iconNode$8);
+
+/**
+ * @license lucide-react v0.525.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$7 = [
+  [
+    "path",
+    {
+      d: "M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2",
+      key: "143wyd"
+    }
+  ],
+  ["path", { d: "M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6", key: "1itne7" }],
+  ["rect", { x: "6", y: "14", width: "12", height: "8", rx: "1", key: "1ue0tg" }]
+];
+const Printer = createLucideIcon("printer", __iconNode$7);
+
+/**
+ * @license lucide-react v0.525.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$6 = [
+  ["path", { d: "M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8", key: "14sxne" }],
+  ["path", { d: "M3 3v5h5", key: "1xhq8a" }],
+  ["path", { d: "M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16", key: "1hlbsb" }],
+  ["path", { d: "M16 16h5v5", key: "ccwih5" }]
+];
+const RefreshCcw = createLucideIcon("refresh-ccw", __iconNode$6);
+
+/**
+ * @license lucide-react v0.525.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$5 = [
   ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
 ];
-const Search = createLucideIcon("search", __iconNode$4);
+const Search = createLucideIcon("search", __iconNode$5);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -422,14 +544,29 @@ const Search = createLucideIcon("search", __iconNode$4);
  */
 
 
-const __iconNode$3 = [
+const __iconNode$4 = [
   ["path", { d: "M3 6h18", key: "d0wm0j" }],
   ["path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6", key: "4alrt4" }],
   ["path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2", key: "v07s0e" }],
   ["line", { x1: "10", x2: "10", y1: "11", y2: "17", key: "1uufr5" }],
   ["line", { x1: "14", x2: "14", y1: "11", y2: "17", key: "xtxkd" }]
 ];
-const Trash2 = createLucideIcon("trash-2", __iconNode$3);
+const Trash2 = createLucideIcon("trash-2", __iconNode$4);
+
+/**
+ * @license lucide-react v0.525.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$3 = [
+  ["path", { d: "M3 6h18", key: "d0wm0j" }],
+  ["path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6", key: "4alrt4" }],
+  ["path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2", key: "v07s0e" }]
+];
+const Trash = createLucideIcon("trash", __iconNode$3);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -681,7 +818,7 @@ const Avatar = ({
     showIcon && /* @__PURE__ */ jsx("span", { className: "avatar-icon", children: /* @__PURE__ */ jsx(User, {}) })
   ] });
 };
-const AvatarGroup = ({ children, max = 4, truncatedMessage = "Members", ...props }) => {
+const AvatarGroup$1 = ({ children, max = 4, truncatedMessage = "Members", ...props }) => {
   const avatars = React__default.Children.toArray(children);
   const visibleAvatars = avatars.slice(0, max);
   const hiddenCount = avatars.length - max;
@@ -69508,7 +69645,7 @@ const AvatarGroupDisplay = ({
       "div",
       {
         className: "flex items-center justify-between p-3 border border-dashed border-gray-400 rounded-lg hover:bg-gray-50",
-        children: /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500", children: "Not shared with anyone yet." })
+        children: /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500", children: "Not shared with anyone yet....." })
       }
     );
   }
@@ -69669,9 +69806,9 @@ const InviteFlow = ({
       case ADD_USERS_GROUPS_ROLES_MODAL.INTEREST:
         return "Add Audience";
       case ADD_USERS_GROUPS_ROLES_MODAL.ARTICLE:
-        return "Add Users, Groups or Roles";
+        return "Add Users, Groups or Roles test";
       default:
-        return "Add User, Groups or Roles";
+        return "Add User, Groups or Roles test";
     }
   };
   const isDisabled = useMemo(() => {
@@ -74993,78 +75130,1629 @@ function TreeView({
   ] });
 }
 
-const baseConfig = {
-  licenseKey: "GPL",
-  placeholder: "Write something here...",
-  plugins: [
-    Essentials,
-    Paragraph,
-    Heading,
-    Alignment,
-    BlockQuote,
-    Bold,
-    Italic,
-    Underline,
-    Strikethrough,
-    Link,
-    List,
-    Indent,
-    IndentBlock,
-    Table,
-    SourceEditing,
-    Undo
-  ],
-  toolbar: [
-    "sourceEditing",
-    "|",
-    "bold",
-    "italic",
-    "underline",
-    "strikethrough",
-    "|",
-    "link",
-    "bulletedList",
-    "numberedList",
-    "blockQuote",
-    "|",
-    "alignment",
-    "outdent",
-    "indent",
-    "|",
-    "insertTable",
-    "|",
-    "undo",
-    "redo"
-  ]
-};
-const CustomCKEditor = ({ value, onChange, config = {} }) => {
-  const mergedConfig = {
-    ...baseConfig,
-    ...config,
-    toolbar: config.toolbar ?? baseConfig.toolbar,
-    placeholder: config.placeholder ?? baseConfig.placeholder
-  };
-  return /* @__PURE__ */ jsx(
-    CKEditor,
-    {
-      editor: ClassicEditor,
-      config: mergedConfig,
-      data: value,
-      onReady: (editor) => {
-        if (mergedConfig.height) {
-          editor.ui.view.editable.element.style.minHeight = mergedConfig.height;
+function SectionRenderer({ item, data: initialData, updateHandler, validationErrors = {} }) {
+  console.log(item);
+  const [section, setSection] = React__default.useState(item);
+  const [data, setData] = React__default.useState(() => {
+    const sectionData = initialData && initialData[item.key] || {};
+    console.log("Initial Section data for", item.key, sectionData);
+    return sectionData;
+  });
+  const prevInitialDataRef = useRef(initialData);
+  useEffect(() => {
+    if (prevInitialDataRef.current !== initialData) {
+      prevInitialDataRef.current = initialData;
+      const sectionData = initialData && initialData[item.key] || {};
+      console.log("Updated Section data for", item.key, sectionData);
+      setData(sectionData);
+    }
+  }, [initialData, item.key]);
+  console.log("Section data", data);
+  const prevDataRef = useRef(data);
+  useEffect(() => {
+    if (prevDataRef.current !== data && updateHandler && typeof updateHandler === "function") {
+      prevDataRef.current = data;
+      updateHandler(section.key, data);
+    }
+  }, [section.key, data, updateHandler]);
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { style: { marginBottom: "20px" }, children: [
+    /* @__PURE__ */ jsxs(
+      "h2",
+      {
+        style: {
+          fontSize: "20px",
+          fontWeight: "bold",
+          marginBottom: "10px"
+        },
+        children: [
+          section.title,
+          " - ",
+          section.type
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("p", { style: { fontSize: "14px", marginBottom: "10px" }, children: section.description }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: section.fields.map((field, idx) => /* @__PURE__ */ jsxs("div", { style: { marginBottom: "10px" }, children: [
+      /* @__PURE__ */ jsxs(
+        "label",
+        {
+          style: {
+            display: "block",
+            fontWeight: "600",
+            marginBottom: "5px"
+          },
+          children: [
+            field.label,
+            " ",
+            field.required && /* @__PURE__ */ jsx("span", { style: { color: "red" }, children: "*" })
+          ]
         }
-      },
-      onChange: (_, editor) => onChange(editor.getData())
+      ),
+      field.fieldtype === "text" && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "text",
+            name: field.key,
+            defaultValue: field.default,
+            placeholder: field.placeholder,
+            value: data[field.key] || "",
+            onChange: (e) => {
+              const newData = { ...data, [field.key]: e.target.value };
+              setData(newData);
+              if (updateHandler) {
+                updateHandler(section.key, newData);
+              }
+            },
+            required: field.required,
+            className: `w-full ${validationErrors[section.key]?.[field.key] ? "border-red-500" : ""}`
+          }
+        ),
+        validationErrors[section.key]?.[field.key] && /* @__PURE__ */ jsx("div", { style: { color: "#ef4444", fontSize: "12px", marginTop: "2px" }, children: validationErrors[section.key][field.key] })
+      ] }),
+      field.fieldtype === "textarea" && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            name: field.key,
+            defaultValue: field.default,
+            placeholder: field.placeholder,
+            value: data[field.key] || "",
+            onChange: (e) => {
+              const newData = { ...data, [field.key]: e.target.value };
+              setData(newData);
+              if (updateHandler) {
+                updateHandler(section.key, newData);
+              }
+            },
+            rows: 3,
+            required: field.required,
+            className: `w-full ${validationErrors[section.key]?.[field.key] ? "border-red-500" : ""}`
+          }
+        ),
+        validationErrors[section.key]?.[field.key] && /* @__PURE__ */ jsx("div", { style: { color: "#ef4444", fontSize: "12px", marginTop: "2px" }, children: validationErrors[section.key][field.key] })
+      ] }),
+      field.fieldtype === "number" && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "number",
+            name: field.key,
+            defaultValue: field.default,
+            placeholder: field.placeholder,
+            value: data[field.key] || "",
+            onChange: (e) => {
+              const newData = { ...data, [field.key]: e.target.value };
+              setData(newData);
+              if (updateHandler) {
+                updateHandler(section.key, newData);
+              }
+            },
+            required: field.required,
+            className: `w-full ${validationErrors[section.key]?.[field.key] ? "border-red-500" : ""}`
+          }
+        ),
+        validationErrors[section.key]?.[field.key] && /* @__PURE__ */ jsx("div", { style: { color: "#ef4444", fontSize: "12px", marginTop: "2px" }, children: validationErrors[section.key][field.key] })
+      ] }),
+      field.fieldtype === "checkbox" && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            name: field.key,
+            checked: Boolean(data[field.key] || field.default),
+            onChange: (checked) => {
+              const newData = { ...data, [field.key]: checked };
+              setData(newData);
+              if (updateHandler) {
+                updateHandler(section.key, newData);
+              }
+            },
+            label: field.placeholder || field.label,
+            className: "w-full"
+          }
+        ),
+        validationErrors[section.key]?.[field.key] && /* @__PURE__ */ jsx("div", { style: { color: "#ef4444", fontSize: "12px", marginTop: "2px" }, children: validationErrors[section.key][field.key] })
+      ] }),
+      field.fieldtype === "select" && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(
+          Select,
+          {
+            name: field.key,
+            defaultValue: field.default,
+            value: data[field.key] || "",
+            onChange: (value) => {
+              const newData = { ...data, [field.key]: value };
+              setData(newData);
+              if (updateHandler) {
+                updateHandler(section.key, newData);
+              }
+            },
+            options: field.options || [],
+            placeholder: field.placeholder || `Select ${field.label}`,
+            required: field.required,
+            className: `w-full ${validationErrors[section.key]?.[field.key] ? "border-red-500" : ""}`
+          }
+        ),
+        validationErrors[section.key]?.[field.key] && /* @__PURE__ */ jsx("div", { style: { color: "#ef4444", fontSize: "12px", marginTop: "2px" }, children: validationErrors[section.key][field.key] })
+      ] }),
+      field.fieldtype === "email" && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "email",
+            name: field.key,
+            defaultValue: field.default,
+            placeholder: field.placeholder || "Enter email address",
+            value: data[field.key] || "",
+            onChange: (e) => {
+              const newData = { ...data, [field.key]: e.target.value };
+              setData(newData);
+              if (updateHandler) {
+                updateHandler(section.key, newData);
+              }
+            },
+            required: field.required,
+            className: `w-full ${validationErrors[section.key]?.[field.key] ? "border-red-500" : ""}`
+          }
+        ),
+        validationErrors[section.key]?.[field.key] && /* @__PURE__ */ jsx("div", { style: { color: "#ef4444", fontSize: "12px", marginTop: "2px" }, children: validationErrors[section.key][field.key] })
+      ] }),
+      field.fieldtype === "url" && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "url",
+            name: field.key,
+            defaultValue: field.default,
+            placeholder: field.placeholder || "Enter URL",
+            value: data[field.key] || "",
+            onChange: (e) => {
+              const newData = { ...data, [field.key]: e.target.value };
+              setData(newData);
+              if (updateHandler) {
+                updateHandler(section.key, newData);
+              }
+            },
+            required: field.required,
+            className: `w-full ${validationErrors[section.key]?.[field.key] ? "border-red-500" : ""}`
+          }
+        ),
+        validationErrors[section.key]?.[field.key] && /* @__PURE__ */ jsx("div", { style: { color: "#ef4444", fontSize: "12px", marginTop: "2px" }, children: validationErrors[section.key][field.key] })
+      ] }),
+      field.fieldtype === "password" && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "password",
+            name: field.key,
+            defaultValue: field.default,
+            placeholder: field.placeholder || "Enter password",
+            value: data[field.key] || "",
+            onChange: (e) => {
+              const newData = { ...data, [field.key]: e.target.value };
+              setData(newData);
+              if (updateHandler) {
+                updateHandler(section.key, newData);
+              }
+            },
+            required: field.required,
+            className: `w-full ${validationErrors[section.key]?.[field.key] ? "border-red-500" : ""}`
+          }
+        ),
+        validationErrors[section.key]?.[field.key] && /* @__PURE__ */ jsx("div", { style: { color: "#ef4444", fontSize: "12px", marginTop: "2px" }, children: validationErrors[section.key][field.key] })
+      ] }),
+      field.fieldtype === "multiselect" && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(
+          MultiSelect,
+          {
+            selectedItems: data[field.key] || [],
+            onSelectionChange: (selectedItems) => {
+              const newData = { ...data, [field.key]: selectedItems };
+              setData(newData);
+              if (updateHandler) {
+                updateHandler(section.key, newData);
+              }
+            },
+            options: field.options || [],
+            placeholder: field.placeholder || `Select ${field.label}`,
+            className: `w-full ${validationErrors[section.key]?.[field.key] ? "border-red-500" : ""}`
+          }
+        ),
+        validationErrors[section.key]?.[field.key] && /* @__PURE__ */ jsx("div", { style: { color: "#ef4444", fontSize: "12px", marginTop: "2px" }, children: validationErrors[section.key][field.key] })
+      ] }),
+      field.fieldtype === "toggle" && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(
+          ToggleSwitch,
+          {
+            checked: Boolean(data[field.key] || field.default),
+            onChange: (isOn) => {
+              console.log("Toggle changed:", field.key, isOn);
+              const newData = { ...data, [field.key]: isOn };
+              setData(newData);
+              if (updateHandler) {
+                updateHandler(section.key, newData);
+              }
+            },
+            label: field.placeholder || field.label
+          }
+        ),
+        validationErrors[section.key]?.[field.key] && /* @__PURE__ */ jsx("div", { style: { color: "#ef4444", fontSize: "12px", marginTop: "2px" }, children: validationErrors[section.key][field.key] })
+      ] }),
+      field.fieldtype === "date" && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+        DatePicker,
+        {
+          label: field.label,
+          value: data[field.key] ? new Date(data[field.key]) : null,
+          onChange: (date) => {
+            const newData = { ...data, [field.key]: date ? date.toISOString().split("T")[0] : "" };
+            setData(newData);
+            if (updateHandler) {
+              updateHandler(section.key, newData);
+            }
+          },
+          placeholder: field.placeholder || "Select date",
+          error: validationErrors[section.key]?.[field.key],
+          className: "w-full"
+        }
+      ) }),
+      field.fieldtype === "daterange" && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+        DateRangePicker$1,
+        {
+          label: field.label,
+          value: data[field.key] || { from: null, to: null },
+          onChange: (dateRange) => {
+            const newData = { ...data, [field.key]: dateRange };
+            setData(newData);
+            if (updateHandler) {
+              updateHandler(section.key, newData);
+            }
+          },
+          placeholder: field.placeholder || "Select date range",
+          error: validationErrors[section.key]?.[field.key],
+          className: "w-full"
+        }
+      ) }),
+      field.fieldtype === "radio" && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(
+          RadioGroup,
+          {
+            selectedValue: data[field.key] || "",
+            onValueChange: (value) => {
+              const newData = { ...data, [field.key]: value };
+              setData(newData);
+              if (updateHandler) {
+                updateHandler(section.key, newData);
+              }
+            },
+            options: field.options || [],
+            className: "w-full"
+          }
+        ),
+        validationErrors[section.key]?.[field.key] && /* @__PURE__ */ jsx("div", { style: { color: "#ef4444", fontSize: "12px", marginTop: "2px" }, children: validationErrors[section.key][field.key] })
+      ] }),
+      field.fieldtype === "search" && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(
+          SearchBar,
+          {
+            value: data[field.key] || "",
+            onChange: (value) => {
+              const newData = { ...data, [field.key]: value };
+              setData(newData);
+              if (updateHandler) {
+                updateHandler(section.key, newData);
+              }
+            },
+            placeholder: field.placeholder || `Search ${field.label}`,
+            className: `w-full ${validationErrors[section.key]?.[field.key] ? "border-red-500" : ""}`
+          }
+        ),
+        validationErrors[section.key]?.[field.key] && /* @__PURE__ */ jsx("div", { style: { color: "#ef4444", fontSize: "12px", marginTop: "2px" }, children: validationErrors[section.key][field.key] })
+      ] }),
+      (field.fieldtype === "datetime" || field.fieldtype === "datetime-local") && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "datetime-local",
+            name: field.key,
+            defaultValue: field.default,
+            placeholder: field.placeholder || "Select date and time",
+            value: data[field.key] || "",
+            onChange: (e) => {
+              const newData = { ...data, [field.key]: e.target.value };
+              setData(newData);
+              if (updateHandler) {
+                updateHandler(section.key, newData);
+              }
+            },
+            required: field.required,
+            className: `w-full ${validationErrors[section.key]?.[field.key] ? "border-red-500" : ""}`
+          }
+        ),
+        validationErrors[section.key]?.[field.key] && /* @__PURE__ */ jsx("div", { style: { color: "#ef4444", fontSize: "12px", marginTop: "2px" }, children: validationErrors[section.key][field.key] })
+      ] }),
+      field.fieldtype === "time" && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "time",
+            name: field.key,
+            defaultValue: field.default,
+            placeholder: field.placeholder || "Select time",
+            value: data[field.key] || "",
+            onChange: (e) => {
+              const newData = { ...data, [field.key]: e.target.value };
+              setData(newData);
+              if (updateHandler) {
+                updateHandler(section.key, newData);
+              }
+            },
+            required: field.required,
+            className: `w-full ${validationErrors[section.key]?.[field.key] ? "border-red-500" : ""}`
+          }
+        ),
+        validationErrors[section.key]?.[field.key] && /* @__PURE__ */ jsx("div", { style: { color: "#ef4444", fontSize: "12px", marginTop: "2px" }, children: validationErrors[section.key][field.key] })
+      ] }),
+      field.fieldtype === "color" && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "color",
+            name: field.key,
+            defaultValue: field.default || "#000000",
+            value: data[field.key] || "#000000",
+            onChange: (e) => {
+              const newData = { ...data, [field.key]: e.target.value };
+              setData(newData);
+              if (updateHandler) {
+                updateHandler(section.key, newData);
+              }
+            },
+            className: `w-full h-10 ${validationErrors[section.key]?.[field.key] ? "border-red-500" : ""}`
+          }
+        ),
+        validationErrors[section.key]?.[field.key] && /* @__PURE__ */ jsx("div", { style: { color: "#ef4444", fontSize: "12px", marginTop: "2px" }, children: validationErrors[section.key][field.key] })
+      ] }),
+      field.fieldtype === "range" && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "range",
+            name: field.key,
+            defaultValue: field.default || field.min || 0,
+            value: data[field.key] || field.min || 0,
+            onChange: (e) => {
+              const newData = { ...data, [field.key]: e.target.value };
+              setData(newData);
+              if (updateHandler) {
+                updateHandler(section.key, newData);
+              }
+            },
+            min: field.min || 0,
+            max: field.max || 100,
+            step: field.step || 1,
+            className: `w-full ${validationErrors[section.key]?.[field.key] ? "border-red-500" : ""}`
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm text-gray-500 mt-1", children: [
+          /* @__PURE__ */ jsx("span", { children: field.min || 0 }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            "Current: ",
+            data[field.key] || field.min || 0
+          ] }),
+          /* @__PURE__ */ jsx("span", { children: field.max || 100 })
+        ] }),
+        validationErrors[section.key]?.[field.key] && /* @__PURE__ */ jsx("div", { style: { color: "#ef4444", fontSize: "12px", marginTop: "2px" }, children: validationErrors[section.key][field.key] })
+      ] }),
+      field.fieldtype === "file" && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "file",
+            name: field.key,
+            onChange: (e) => {
+              const file = e.target.files[0];
+              const newData = { ...data, [field.key]: file ? file.name : "" };
+              setData(newData);
+              if (updateHandler) {
+                updateHandler(section.key, newData);
+              }
+            },
+            accept: field.accept,
+            className: `w-full ${validationErrors[section.key]?.[field.key] ? "border-red-500" : ""}`
+          }
+        ),
+        validationErrors[section.key]?.[field.key] && /* @__PURE__ */ jsx("div", { style: { color: "#ef4444", fontSize: "12px", marginTop: "2px" }, children: validationErrors[section.key][field.key] })
+      ] }),
+      field.info && /* @__PURE__ */ jsx(
+        "p",
+        {
+          style: {
+            fontSize: "12px",
+            color: "#666",
+            marginTop: "5px"
+          },
+          children: field.info
+        }
+      )
+    ] }, idx)) })
+  ] }) });
+}
+
+const AvatarGroup = ({ children }) => /* @__PURE__ */ jsx("div", { className: "flex -space-x-2", children });
+function DataTableRenderer({ item, data: initialData, updateHandler, validationErrors = {} }) {
+  console.log(`[DynamicConfig/DataTableRenderer] Component loaded for section: ${item.key}`);
+  const [section, setSection] = useState(item);
+  const [audienceRowId, setAudienceRowId] = useState(null);
+  const [audienceFieldName, setAudienceFieldName] = useState(null);
+  console.log(`[DataTableRenderer] ${section.key} - Received props:`, { item, initialData });
+  const [data, setData] = useState(() => {
+    const existingData = initialData && initialData[section.key] || [];
+    const result = existingData.length > 0 ? existingData : [{ id: 0 }];
+    console.log(`[DataTableRenderer] ${section.key} - Initial data:`, result);
+    return result;
+  });
+  const prevInitialDataRef = useRef(initialData);
+  useEffect(() => {
+    console.log(`[DataTableRenderer] ${section.key} - Checking for initialData changes`);
+    console.log(`[DataTableRenderer] ${section.key} - Previous:`, prevInitialDataRef.current);
+    console.log(`[DataTableRenderer] ${section.key} - Current:`, initialData);
+    if (prevInitialDataRef.current !== initialData) {
+      prevInitialDataRef.current = initialData;
+      const existingData = initialData && initialData[section.key] || [];
+      const newData = existingData.length > 0 ? existingData : [{ id: 0 }];
+      console.log(`[DataTableRenderer] ${section.key} - Setting new data:`, newData);
+      setData(newData);
+    }
+  }, [initialData, section.key]);
+  const prevDataRef = useRef(data);
+  const updateTimeoutRef = useRef(null);
+  useEffect(() => {
+    if (prevDataRef.current !== data && updateHandler && typeof updateHandler === "function") {
+      prevDataRef.current = data;
+      if (updateTimeoutRef.current) {
+        clearTimeout(updateTimeoutRef.current);
+      }
+      updateTimeoutRef.current = setTimeout(() => {
+        updateHandler(section.key, data);
+      }, 300);
     }
-  );
-};
+  }, [section.key, data, updateHandler]);
+  useEffect(() => {
+    return () => {
+      if (updateTimeoutRef.current) {
+        clearTimeout(updateTimeoutRef.current);
+      }
+    };
+  }, []);
+  const getFieldRenderer = (field) => {
+    const updateFieldValue = (rowIndex, value) => {
+      console.log(`[DataTableRenderer] updateFieldValue called with:`, { rowIndex, value, type: typeof value });
+      setData((prevData) => {
+        const newData = [...prevData];
+        newData[rowIndex][field.key] = value;
+        return newData;
+      });
+    };
+    const getFieldError = (rowIndex) => {
+      return validationErrors[section.key]?.[rowIndex]?.[field.key];
+    };
+    const renderError = (rowIndex) => {
+      const error = getFieldError(rowIndex);
+      return error ? /* @__PURE__ */ jsx("div", { className: "text-red-500 text-xs mt-1", children: error }) : null;
+    };
+    switch (field.fieldtype) {
+      case "text":
+        return (props, rowIndex) => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: props[field.key] || "",
+              onChange: (e) => updateFieldValue(rowIndex, e.target.value),
+              placeholder: field.placeholder || `Enter ${field.label}`,
+              required: field.required,
+              className: `w-full ${getFieldError(rowIndex) ? "border-red-500" : ""}`
+            }
+          ),
+          renderError(rowIndex)
+        ] });
+      case "textarea":
+        return (props, rowIndex) => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              value: props[field.key] || "",
+              onChange: (e) => updateFieldValue(rowIndex, e.target.value),
+              placeholder: field.placeholder || `Enter ${field.label}`,
+              required: field.required,
+              className: `w-full ${getFieldError(rowIndex) ? "border-red-500" : ""}`,
+              rows: 3
+            }
+          ),
+          renderError(rowIndex)
+        ] });
+      case "number":
+        return (props, rowIndex) => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "number",
+              value: props[field.key] || "",
+              onChange: (e) => updateFieldValue(rowIndex, e.target.value),
+              placeholder: field.placeholder || `Enter ${field.label}`,
+              required: field.required,
+              className: `w-full ${getFieldError(rowIndex) ? "border-red-500" : ""}`
+            }
+          ),
+          renderError(rowIndex)
+        ] });
+      case "email":
+        return (props, rowIndex) => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "email",
+              value: props[field.key] || "",
+              onChange: (e) => updateFieldValue(rowIndex, e.target.value),
+              placeholder: field.placeholder || "Enter email address",
+              required: field.required,
+              className: `w-full ${getFieldError(rowIndex) ? "border-red-500" : ""}`
+            }
+          ),
+          renderError(rowIndex)
+        ] });
+      case "url":
+        return (props, rowIndex) => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "url",
+              value: props[field.key] || "",
+              onChange: (e) => updateFieldValue(rowIndex, e.target.value),
+              placeholder: field.placeholder || "Enter URL",
+              required: field.required,
+              className: `w-full ${getFieldError(rowIndex) ? "border-red-500" : ""}`
+            }
+          ),
+          renderError(rowIndex)
+        ] });
+      case "password":
+        return (props, rowIndex) => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "password",
+              value: props[field.key] || "",
+              onChange: (e) => updateFieldValue(rowIndex, e.target.value),
+              placeholder: field.placeholder || "Enter password",
+              required: field.required,
+              className: `w-full ${getFieldError(rowIndex) ? "border-red-500" : ""}`
+            }
+          ),
+          renderError(rowIndex)
+        ] });
+      case "select":
+      case "dropdown":
+        return (props, rowIndex) => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(
+            Select,
+            {
+              value: props[field.key] || "",
+              onChange: (value) => updateFieldValue(rowIndex, value),
+              options: field.options || [],
+              placeholder: field.placeholder || `Select ${field.label}`,
+              required: field.required,
+              className: `w-full ${getFieldError(rowIndex) ? "border-red-500" : ""}`
+            }
+          ),
+          renderError(rowIndex)
+        ] });
+      case "multiselect":
+        return (props, rowIndex) => {
+          const currentValue = props[field.key] || [];
+          return /* @__PURE__ */ jsx(
+            MultiSelect,
+            {
+              selectedItems: currentValue,
+              onSelectionChange: (selectedItems) => updateFieldValue(rowIndex, selectedItems),
+              options: field.options || [],
+              placeholder: field.placeholder || `Select ${field.label}`,
+              className: "w-full"
+            }
+          );
+        };
+      case "checkbox":
+      case "boolean":
+        return (props, rowIndex) => /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: Boolean(props[field.key]),
+            onChange: (checked) => updateFieldValue(rowIndex, checked),
+            label: field.placeholder || field.label,
+            className: "w-full"
+          }
+        );
+      case "toggle":
+      case "switch":
+        return (props, rowIndex) => /* @__PURE__ */ jsx(
+          ToggleSwitch,
+          {
+            isOn: Boolean(props[field.key]),
+            onToggle: (isOn) => updateFieldValue(rowIndex, isOn),
+            label: field.placeholder || field.label,
+            className: "w-full"
+          }
+        );
+      case "date":
+        return (props, rowIndex) => /* @__PURE__ */ jsx(
+          DatePicker,
+          {
+            selectedDate: props[field.key] ? new Date(props[field.key]) : null,
+            onDateChange: (date) => updateFieldValue(rowIndex, date ? date.toISOString().split("T")[0] : ""),
+            placeholder: field.placeholder || "Select date",
+            className: "w-full"
+          }
+        );
+      case "datetime":
+        return (props, rowIndex) => /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "datetime-local",
+            value: props[field.key] || "",
+            onChange: (e) => updateFieldValue(rowIndex, e.target.value),
+            placeholder: field.placeholder || "Select date and time",
+            required: field.required,
+            className: "w-full"
+          }
+        );
+      case "time":
+        return (props, rowIndex) => /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "time",
+            value: props[field.key] || "",
+            onChange: (e) => updateFieldValue(rowIndex, e.target.value),
+            placeholder: field.placeholder || "Select time",
+            required: field.required,
+            className: "w-full"
+          }
+        );
+      case "radio":
+        return (props, rowIndex) => /* @__PURE__ */ jsx(
+          RadioGroup,
+          {
+            selectedValue: props[field.key] || "",
+            onValueChange: (value) => updateFieldValue(rowIndex, value),
+            options: field.options || [],
+            className: "w-full"
+          }
+        );
+      case "search":
+        return (props, rowIndex) => /* @__PURE__ */ jsx(
+          SearchBar,
+          {
+            value: props[field.key] || "",
+            onChange: (value) => updateFieldValue(rowIndex, value),
+            placeholder: field.placeholder || `Search ${field.label}`,
+            className: "w-full"
+          }
+        );
+      case "audience":
+        return (props, rowIndex) => {
+          const audienceData = props[field.key] || { users: [], groups: [], roles: [] };
+          const allAudience = [
+            ...audienceData.users || [],
+            ...audienceData.groups || [],
+            ...audienceData.roles || []
+          ];
+          return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(AvatarGroup, { children: allAudience.length > 0 ? allAudience.slice(0, 3).map((aud, idx) => /* @__PURE__ */ jsx(
+              Avatar,
+              {
+                size: "small",
+                name: aud.name || aud.displayName || aud.id,
+                src: aud.avatarUrl
+              },
+              idx
+            )) : null }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: "text-indigo-600 font-semibold hover:text-indigo-800",
+                onClick: () => {
+                  setAudienceFieldName(field.key);
+                  setAudienceRowId(rowIndex);
+                },
+                children: allAudience.length > 0 ? "Edit" : "Assign"
+              }
+            )
+          ] });
+        };
+      case "color":
+        return (props, rowIndex) => /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "color",
+            value: props[field.key] || "#000000",
+            onChange: (e) => updateFieldValue(rowIndex, e.target.value),
+            className: "w-full h-10"
+          }
+        );
+      case "range":
+        return (props, rowIndex) => /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "range",
+              value: props[field.key] || field.min || 0,
+              onChange: (e) => updateFieldValue(rowIndex, e.target.value),
+              min: field.min || 0,
+              max: field.max || 100,
+              step: field.step || 1,
+              className: "w-full"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-500", children: props[field.key] || field.min || 0 })
+        ] });
+      case "file":
+        return (props, rowIndex) => /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "file",
+            onChange: (e) => {
+              const file = e.target.files[0];
+              updateFieldValue(rowIndex, file ? file.name : "");
+            },
+            accept: field.accept,
+            className: "w-full"
+          }
+        );
+      case "hidden":
+        return (props, rowIndex) => /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "hidden",
+            value: props[field.key] || "",
+            onChange: (e) => updateFieldValue(rowIndex, e.target.value)
+          }
+        );
+      // Default fallback for unknown field types
+      default:
+        return (props, rowIndex) => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: props[field.key] || "",
+              onChange: (e) => updateFieldValue(rowIndex, e.target.value),
+              placeholder: field.placeholder || `Enter ${field.label}`,
+              required: field.required,
+              className: `w-full ${getFieldError(rowIndex) ? "border-red-500" : ""}`
+            }
+          ),
+          renderError(rowIndex)
+        ] });
+    }
+  };
+  const addBlankRow = useCallback(() => {
+    console.log("[DataTableRenderer] Adding blank row");
+    setData((prevData) => {
+      console.log("[DataTableRenderer] Current data before add:", prevData);
+      const blankRow = {
+        id: prevData.length
+        // Assign next available ID
+      };
+      section.fields.forEach((field) => {
+        if (field.fieldtype === "audience") {
+          blankRow[field.key] = { users: [], groups: [], roles: [] };
+        } else {
+          blankRow[field.key] = field.default || "";
+        }
+      });
+      console.log("[DataTableRenderer] New blank row:", blankRow);
+      const newData = [...prevData, blankRow];
+      console.log("[DataTableRenderer] Updated data:", newData);
+      return newData;
+    });
+  }, [section.fields]);
+  const removeRow = useCallback((index) => {
+    setData((prevData) => {
+      if (prevData.length <= 1) {
+        return prevData;
+      }
+      const newData = [...prevData];
+      newData.splice(index, 1);
+      return newData;
+    });
+  }, []);
+  const [draggedIndex, setDraggedIndex] = useState(null);
+  const handleDragStart = useCallback((e, index) => {
+    setDraggedIndex(index);
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("text/html", "");
+  }, []);
+  const handleDragOver = useCallback((e) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+  }, []);
+  const handleDrop = useCallback((e, dropIndex) => {
+    e.preventDefault();
+    if (draggedIndex === null || draggedIndex === dropIndex) return;
+    setData((prevData) => {
+      const newData = [...prevData];
+      const draggedItem = newData[draggedIndex];
+      newData.splice(draggedIndex, 1);
+      newData.splice(dropIndex, 0, draggedItem);
+      return newData;
+    });
+    setDraggedIndex(null);
+  }, [draggedIndex]);
+  const handleDragEnd = useCallback(() => {
+    setDraggedIndex(null);
+  }, []);
+  const handleAddAudience = useCallback((selectedEntities) => {
+    console.log("[DataTableRenderer] handleAddAudience called with:", selectedEntities);
+    setData((prevData) => {
+      const newData = [...prevData];
+      if (audienceRowId !== null && audienceFieldName && newData[audienceRowId]) {
+        const pendingInvites = selectedEntities.pendingInvites || [];
+        const users = pendingInvites.filter((invite) => invite.type === "User");
+        const groups = pendingInvites.filter((invite) => invite.type === "Group");
+        const roles = pendingInvites.filter((invite) => invite.type === "Role");
+        newData[audienceRowId][audienceFieldName] = {
+          users: [...newData[audienceRowId][audienceFieldName]?.users || [], ...users],
+          groups: [...newData[audienceRowId][audienceFieldName]?.groups || [], ...groups],
+          roles: [...newData[audienceRowId][audienceFieldName]?.roles || [], ...roles]
+        };
+        console.log("[DataTableRenderer] Updated audience data:", newData[audienceRowId][audienceFieldName]);
+      }
+      return newData;
+    });
+    setAudienceRowId(null);
+    setAudienceFieldName(null);
+  }, [audienceRowId, audienceFieldName]);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("h2", { style: { fontSize: "20px", fontWeight: "bold", marginBottom: "10px" }, children: section.title }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "bg-black text-white px-6 py-2 rounded-2xl cursor-pointer hover:bg-gray-800",
+            onClick: addBlankRow,
+            children: "Add"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("p", { style: { fontSize: "14px", marginBottom: "10px" }, children: section.description })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: "min-w-full bg-white border border-gray-300", children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "bg-gray-50", children: [
+        /* @__PURE__ */ jsx("th", { className: "px-4 py-2 w-10" }),
+        section.fields.map((field, idx) => /* @__PURE__ */ jsx(
+          "th",
+          {
+            className: "px-4 py-2 text-left text-sm font-medium text-gray-700",
+            children: field.label || field.key
+          },
+          idx
+        )),
+        /* @__PURE__ */ jsx("th", { className: "px-4 py-2 w-16" })
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ jsxs(
+        "tr",
+        {
+          className: `hover:bg-gray-50 ${draggedIndex === rowIndex ? "opacity-50" : ""}`,
+          draggable: true,
+          onDragStart: (e) => handleDragStart(e, rowIndex),
+          onDragOver: handleDragOver,
+          onDrop: (e) => handleDrop(e, rowIndex),
+          onDragEnd: handleDragEnd,
+          children: [
+            /* @__PURE__ */ jsx("td", { className: "px-4 py-2 ", children: /* @__PURE__ */ jsx("div", { className: "cursor-move text-gray-400 hover:text-gray-600", children: /* @__PURE__ */ jsx(GripVertical, { size: 16 }) }) }),
+            section.fields.map((field, fieldIndex) => /* @__PURE__ */ jsx("td", { className: "px-4 py-2 ", children: getFieldRenderer(field)(row, rowIndex) }, fieldIndex)),
+            /* @__PURE__ */ jsx("td", { className: "px-4 py-2 ", children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => removeRow(rowIndex),
+                className: "text-red-500 hover:text-red-700",
+                title: "Delete row",
+                children: /* @__PURE__ */ jsx(Trash, { size: 16 })
+              }
+            ) })
+          ]
+        },
+        rowIndex
+      )) })
+    ] }) }),
+    audienceRowId !== null && (() => {
+      const existingAudienceData = data[audienceRowId] && data[audienceRowId][audienceFieldName] ? {
+        users: data[audienceRowId][audienceFieldName].users || [],
+        groups: data[audienceRowId][audienceFieldName].groups || [],
+        roles: data[audienceRowId][audienceFieldName].roles || []
+      } : { users: [], groups: [], roles: [] };
+      console.log("[DataTableRenderer] Opening modal with existing data:", existingAudienceData);
+      console.log("[DataTableRenderer] Row data:", data[audienceRowId]);
+      console.log("[DataTableRenderer] Field name:", audienceFieldName);
+      return /* @__PURE__ */ jsx(
+        AddUserGroupsRolesModal,
+        {
+          isOpen: true,
+          onClose: () => {
+            setAudienceRowId(null);
+            setAudienceFieldName(null);
+          },
+          onFinalSubmit: handleAddAudience,
+          existingShares: existingAudienceData,
+          allowedPermissions: ["view", "remove"]
+        }
+      );
+    })()
+  ] });
+}
+
+const UnknownType = ({ item }) => /* @__PURE__ */ jsxs("div", { className: "p-3 rounded-xl border border-dashed text-sm opacity-70", children: [
+  "Unknown type:",
+  " ",
+  /* @__PURE__ */ jsx("span", { className: "font-mono", children: String(item?.type ?? "N/A") })
+] });
+const REGISTRY = /* @__PURE__ */ Object.create(null);
+REGISTRY.section = SectionRenderer;
+REGISTRY.datatable = DataTableRenderer;
+function toType(input) {
+  if (typeof input === "string") return input.trim();
+  if (input && typeof input === "object")
+    return String(input.type || "").trim();
+  return "";
+}
+function getComponentForType(input) {
+  const t = toType(input);
+  const C = REGISTRY[t] || REGISTRY[t.toLowerCase?.()] || UnknownType;
+  return C;
+}
+function renderByType(input, props = {}) {
+  const C = getComponentForType(input);
+  const pass = input && typeof input === "object" ? { item: input, ...props } : props;
+  return /* @__PURE__ */ jsx(C, { ...pass });
+}
+function register(type, component) {
+  if (!type || !component) return;
+  const key = String(type).trim();
+  REGISTRY[key] = component;
+  REGISTRY[key.toLowerCase()] = component;
+}
+function ConfigRenderFactory(input, props = {}) {
+  return renderByType(input, props);
+}
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
 function Mt(t){if(typeof document=="undefined")return;let o=document.head||document.getElementsByTagName("head")[0],e=document.createElement("style");e.type="text/css",o.firstChild?o.insertBefore(e,o.firstChild):o.appendChild(e),e.styleSheet?e.styleSheet.cssText=t:e.appendChild(document.createTextNode(t));}Mt(`:root{--toastify-color-light: #fff;--toastify-color-dark: #121212;--toastify-color-info: #3498db;--toastify-color-success: #07bc0c;--toastify-color-warning: #f1c40f;--toastify-color-error: hsl(6, 78%, 57%);--toastify-color-transparent: rgba(255, 255, 255, .7);--toastify-icon-color-info: var(--toastify-color-info);--toastify-icon-color-success: var(--toastify-color-success);--toastify-icon-color-warning: var(--toastify-color-warning);--toastify-icon-color-error: var(--toastify-color-error);--toastify-container-width: fit-content;--toastify-toast-width: 320px;--toastify-toast-offset: 16px;--toastify-toast-top: max(var(--toastify-toast-offset), env(safe-area-inset-top));--toastify-toast-right: max(var(--toastify-toast-offset), env(safe-area-inset-right));--toastify-toast-left: max(var(--toastify-toast-offset), env(safe-area-inset-left));--toastify-toast-bottom: max(var(--toastify-toast-offset), env(safe-area-inset-bottom));--toastify-toast-background: #fff;--toastify-toast-padding: 14px;--toastify-toast-min-height: 64px;--toastify-toast-max-height: 800px;--toastify-toast-bd-radius: 6px;--toastify-toast-shadow: 0px 4px 12px rgba(0, 0, 0, .1);--toastify-font-family: sans-serif;--toastify-z-index: 9999;--toastify-text-color-light: #757575;--toastify-text-color-dark: #fff;--toastify-text-color-info: #fff;--toastify-text-color-success: #fff;--toastify-text-color-warning: #fff;--toastify-text-color-error: #fff;--toastify-spinner-color: #616161;--toastify-spinner-color-empty-area: #e0e0e0;--toastify-color-progress-light: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);--toastify-color-progress-dark: #bb86fc;--toastify-color-progress-info: var(--toastify-color-info);--toastify-color-progress-success: var(--toastify-color-success);--toastify-color-progress-warning: var(--toastify-color-warning);--toastify-color-progress-error: var(--toastify-color-error);--toastify-color-progress-bgo: .2}.Toastify__toast-container{z-index:var(--toastify-z-index);-webkit-transform:translate3d(0,0,var(--toastify-z-index));position:fixed;width:var(--toastify-container-width);box-sizing:border-box;color:#fff;display:flex;flex-direction:column}.Toastify__toast-container--top-left{top:var(--toastify-toast-top);left:var(--toastify-toast-left)}.Toastify__toast-container--top-center{top:var(--toastify-toast-top);left:50%;transform:translate(-50%);align-items:center}.Toastify__toast-container--top-right{top:var(--toastify-toast-top);right:var(--toastify-toast-right);align-items:end}.Toastify__toast-container--bottom-left{bottom:var(--toastify-toast-bottom);left:var(--toastify-toast-left)}.Toastify__toast-container--bottom-center{bottom:var(--toastify-toast-bottom);left:50%;transform:translate(-50%);align-items:center}.Toastify__toast-container--bottom-right{bottom:var(--toastify-toast-bottom);right:var(--toastify-toast-right);align-items:end}.Toastify__toast{--y: 0;position:relative;touch-action:none;width:var(--toastify-toast-width);min-height:var(--toastify-toast-min-height);box-sizing:border-box;margin-bottom:1rem;padding:var(--toastify-toast-padding);border-radius:var(--toastify-toast-bd-radius);box-shadow:var(--toastify-toast-shadow);max-height:var(--toastify-toast-max-height);font-family:var(--toastify-font-family);z-index:0;display:flex;flex:1 auto;align-items:center;word-break:break-word}@media only screen and (max-width: 480px){.Toastify__toast-container{width:100vw;left:env(safe-area-inset-left);margin:0}.Toastify__toast-container--top-left,.Toastify__toast-container--top-center,.Toastify__toast-container--top-right{top:env(safe-area-inset-top);transform:translate(0)}.Toastify__toast-container--bottom-left,.Toastify__toast-container--bottom-center,.Toastify__toast-container--bottom-right{bottom:env(safe-area-inset-bottom);transform:translate(0)}.Toastify__toast-container--rtl{right:env(safe-area-inset-right);left:initial}.Toastify__toast{--toastify-toast-width: 100%;margin-bottom:0;border-radius:0}}.Toastify__toast-container[data-stacked=true]{width:var(--toastify-toast-width)}.Toastify__toast--stacked{position:absolute;width:100%;transform:translate3d(0,var(--y),0) scale(var(--s));transition:transform .3s}.Toastify__toast--stacked[data-collapsed] .Toastify__toast-body,.Toastify__toast--stacked[data-collapsed] .Toastify__close-button{transition:opacity .1s}.Toastify__toast--stacked[data-collapsed=false]{overflow:visible}.Toastify__toast--stacked[data-collapsed=true]:not(:last-child)>*{opacity:0}.Toastify__toast--stacked:after{content:"";position:absolute;left:0;right:0;height:calc(var(--g) * 1px);bottom:100%}.Toastify__toast--stacked[data-pos=top]{top:0}.Toastify__toast--stacked[data-pos=bot]{bottom:0}.Toastify__toast--stacked[data-pos=bot].Toastify__toast--stacked:before{transform-origin:top}.Toastify__toast--stacked[data-pos=top].Toastify__toast--stacked:before{transform-origin:bottom}.Toastify__toast--stacked:before{content:"";position:absolute;left:0;right:0;bottom:0;height:100%;transform:scaleY(3);z-index:-1}.Toastify__toast--rtl{direction:rtl}.Toastify__toast--close-on-click{cursor:pointer}.Toastify__toast-icon{margin-inline-end:10px;width:22px;flex-shrink:0;display:flex}.Toastify--animate{animation-fill-mode:both;animation-duration:.5s}.Toastify--animate-icon{animation-fill-mode:both;animation-duration:.3s}.Toastify__toast-theme--dark{background:var(--toastify-color-dark);color:var(--toastify-text-color-dark)}.Toastify__toast-theme--light,.Toastify__toast-theme--colored.Toastify__toast--default{background:var(--toastify-color-light);color:var(--toastify-text-color-light)}.Toastify__toast-theme--colored.Toastify__toast--info{color:var(--toastify-text-color-info);background:var(--toastify-color-info)}.Toastify__toast-theme--colored.Toastify__toast--success{color:var(--toastify-text-color-success);background:var(--toastify-color-success)}.Toastify__toast-theme--colored.Toastify__toast--warning{color:var(--toastify-text-color-warning);background:var(--toastify-color-warning)}.Toastify__toast-theme--colored.Toastify__toast--error{color:var(--toastify-text-color-error);background:var(--toastify-color-error)}.Toastify__progress-bar-theme--light{background:var(--toastify-color-progress-light)}.Toastify__progress-bar-theme--dark{background:var(--toastify-color-progress-dark)}.Toastify__progress-bar--info{background:var(--toastify-color-progress-info)}.Toastify__progress-bar--success{background:var(--toastify-color-progress-success)}.Toastify__progress-bar--warning{background:var(--toastify-color-progress-warning)}.Toastify__progress-bar--error{background:var(--toastify-color-progress-error)}.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info,.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success,.Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning,.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error{background:var(--toastify-color-transparent)}.Toastify__close-button{color:#fff;position:absolute;top:6px;right:6px;background:transparent;outline:none;border:none;padding:0;cursor:pointer;opacity:.7;transition:.3s ease;z-index:1}.Toastify__toast--rtl .Toastify__close-button{left:6px;right:unset}.Toastify__close-button--light{color:#000;opacity:.3}.Toastify__close-button>svg{fill:currentColor;height:16px;width:14px}.Toastify__close-button:hover,.Toastify__close-button:focus{opacity:1}@keyframes Toastify__trackProgress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.Toastify__progress-bar{position:absolute;bottom:0;left:0;width:100%;height:100%;z-index:1;opacity:.7;transform-origin:left}.Toastify__progress-bar--animated{animation:Toastify__trackProgress linear 1 forwards}.Toastify__progress-bar--controlled{transition:transform .2s}.Toastify__progress-bar--rtl{right:0;left:initial;transform-origin:right;border-bottom-left-radius:initial}.Toastify__progress-bar--wrp{position:absolute;overflow:hidden;bottom:0;left:0;width:100%;height:5px;border-bottom-left-radius:var(--toastify-toast-bd-radius);border-bottom-right-radius:var(--toastify-toast-bd-radius)}.Toastify__progress-bar--wrp[data-hidden=true]{opacity:0}.Toastify__progress-bar--bg{opacity:var(--toastify-color-progress-bgo);width:100%;height:100%}.Toastify__spinner{width:20px;height:20px;box-sizing:border-box;border:2px solid;border-radius:100%;border-color:var(--toastify-spinner-color-empty-area);border-right-color:var(--toastify-spinner-color);animation:Toastify__spin .65s linear infinite}@keyframes Toastify__bounceInRight{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(3000px,0,0)}60%{opacity:1;transform:translate3d(-25px,0,0)}75%{transform:translate3d(10px,0,0)}90%{transform:translate3d(-5px,0,0)}to{transform:none}}@keyframes Toastify__bounceOutRight{20%{opacity:1;transform:translate3d(-20px,var(--y),0)}to{opacity:0;transform:translate3d(2000px,var(--y),0)}}@keyframes Toastify__bounceInLeft{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(-3000px,0,0)}60%{opacity:1;transform:translate3d(25px,0,0)}75%{transform:translate3d(-10px,0,0)}90%{transform:translate3d(5px,0,0)}to{transform:none}}@keyframes Toastify__bounceOutLeft{20%{opacity:1;transform:translate3d(20px,var(--y),0)}to{opacity:0;transform:translate3d(-2000px,var(--y),0)}}@keyframes Toastify__bounceInUp{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,3000px,0)}60%{opacity:1;transform:translate3d(0,-20px,0)}75%{transform:translate3d(0,10px,0)}90%{transform:translate3d(0,-5px,0)}to{transform:translateZ(0)}}@keyframes Toastify__bounceOutUp{20%{transform:translate3d(0,calc(var(--y) - 10px),0)}40%,45%{opacity:1;transform:translate3d(0,calc(var(--y) + 20px),0)}to{opacity:0;transform:translate3d(0,-2000px,0)}}@keyframes Toastify__bounceInDown{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,-3000px,0)}60%{opacity:1;transform:translate3d(0,25px,0)}75%{transform:translate3d(0,-10px,0)}90%{transform:translate3d(0,5px,0)}to{transform:none}}@keyframes Toastify__bounceOutDown{20%{transform:translate3d(0,calc(var(--y) - 10px),0)}40%,45%{opacity:1;transform:translate3d(0,calc(var(--y) + 20px),0)}to{opacity:0;transform:translate3d(0,2000px,0)}}.Toastify__bounce-enter--top-left,.Toastify__bounce-enter--bottom-left{animation-name:Toastify__bounceInLeft}.Toastify__bounce-enter--top-right,.Toastify__bounce-enter--bottom-right{animation-name:Toastify__bounceInRight}.Toastify__bounce-enter--top-center{animation-name:Toastify__bounceInDown}.Toastify__bounce-enter--bottom-center{animation-name:Toastify__bounceInUp}.Toastify__bounce-exit--top-left,.Toastify__bounce-exit--bottom-left{animation-name:Toastify__bounceOutLeft}.Toastify__bounce-exit--top-right,.Toastify__bounce-exit--bottom-right{animation-name:Toastify__bounceOutRight}.Toastify__bounce-exit--top-center{animation-name:Toastify__bounceOutUp}.Toastify__bounce-exit--bottom-center{animation-name:Toastify__bounceOutDown}@keyframes Toastify__zoomIn{0%{opacity:0;transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes Toastify__zoomOut{0%{opacity:1}50%{opacity:0;transform:translate3d(0,var(--y),0) scale3d(.3,.3,.3)}to{opacity:0}}.Toastify__zoom-enter{animation-name:Toastify__zoomIn}.Toastify__zoom-exit{animation-name:Toastify__zoomOut}@keyframes Toastify__flipIn{0%{transform:perspective(400px) rotateX(90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotateX(-20deg);animation-timing-function:ease-in}60%{transform:perspective(400px) rotateX(10deg);opacity:1}80%{transform:perspective(400px) rotateX(-5deg)}to{transform:perspective(400px)}}@keyframes Toastify__flipOut{0%{transform:translate3d(0,var(--y),0) perspective(400px)}30%{transform:translate3d(0,var(--y),0) perspective(400px) rotateX(-20deg);opacity:1}to{transform:translate3d(0,var(--y),0) perspective(400px) rotateX(90deg);opacity:0}}.Toastify__flip-enter{animation-name:Toastify__flipIn}.Toastify__flip-exit{animation-name:Toastify__flipOut}@keyframes Toastify__slideInRight{0%{transform:translate3d(110%,0,0);visibility:visible}to{transform:translate3d(0,var(--y),0)}}@keyframes Toastify__slideInLeft{0%{transform:translate3d(-110%,0,0);visibility:visible}to{transform:translate3d(0,var(--y),0)}}@keyframes Toastify__slideInUp{0%{transform:translate3d(0,110%,0);visibility:visible}to{transform:translate3d(0,var(--y),0)}}@keyframes Toastify__slideInDown{0%{transform:translate3d(0,-110%,0);visibility:visible}to{transform:translate3d(0,var(--y),0)}}@keyframes Toastify__slideOutRight{0%{transform:translate3d(0,var(--y),0)}to{visibility:hidden;transform:translate3d(110%,var(--y),0)}}@keyframes Toastify__slideOutLeft{0%{transform:translate3d(0,var(--y),0)}to{visibility:hidden;transform:translate3d(-110%,var(--y),0)}}@keyframes Toastify__slideOutDown{0%{transform:translate3d(0,var(--y),0)}to{visibility:hidden;transform:translate3d(0,500px,0)}}@keyframes Toastify__slideOutUp{0%{transform:translate3d(0,var(--y),0)}to{visibility:hidden;transform:translate3d(0,-500px,0)}}.Toastify__slide-enter--top-left,.Toastify__slide-enter--bottom-left{animation-name:Toastify__slideInLeft}.Toastify__slide-enter--top-right,.Toastify__slide-enter--bottom-right{animation-name:Toastify__slideInRight}.Toastify__slide-enter--top-center{animation-name:Toastify__slideInDown}.Toastify__slide-enter--bottom-center{animation-name:Toastify__slideInUp}.Toastify__slide-exit--top-left,.Toastify__slide-exit--bottom-left{animation-name:Toastify__slideOutLeft;animation-timing-function:ease-in;animation-duration:.3s}.Toastify__slide-exit--top-right,.Toastify__slide-exit--bottom-right{animation-name:Toastify__slideOutRight;animation-timing-function:ease-in;animation-duration:.3s}.Toastify__slide-exit--top-center{animation-name:Toastify__slideOutUp;animation-timing-function:ease-in;animation-duration:.3s}.Toastify__slide-exit--bottom-center{animation-name:Toastify__slideOutDown;animation-timing-function:ease-in;animation-duration:.3s}@keyframes Toastify__spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}
 `);var L=t=>typeof t=="number"&&!isNaN(t),N=t=>typeof t=="string",P=t=>typeof t=="function",mt=t=>N(t)||L(t),B=t=>N(t)||P(t)?t:null,pt=(t,o)=>t===false||L(t)&&t>0?t:o,z=t=>isValidElement(t)||N(t)||P(t)||L(t);function Z(t,o,e=300){let{scrollHeight:r,style:s}=t;requestAnimationFrame(()=>{s.minHeight="initial",s.height=r+"px",s.transition=`all ${e}ms`,requestAnimationFrame(()=>{s.height="0",s.padding="0",s.margin="0",setTimeout(o,e);});});}function $({enter:t,exit:o,appendPosition:e=false,collapse:r=true,collapseDuration:s=300}){return function({children:a,position:d,preventExitTransition:c,done:T,nodeRef:g,isIn:v,playToast:x}){let C=e?`${t}--${d}`:t,S=e?`${o}--${d}`:o,E=useRef(0);return useLayoutEffect(()=>{let f=g.current,p=C.split(" "),b=n=>{n.target===g.current&&(x(),f.removeEventListener("animationend",b),f.removeEventListener("animationcancel",b),E.current===0&&n.type!=="animationcancel"&&f.classList.remove(...p));};(()=>{f.classList.add(...p),f.addEventListener("animationend",b),f.addEventListener("animationcancel",b);})();},[]),useEffect(()=>{let f=g.current,p=()=>{f.removeEventListener("animationend",p),r?Z(f,T,s):T();};v||(c?p():(()=>{E.current=1,f.className+=` ${S}`,f.addEventListener("animationend",p);})());},[v]),React__default.createElement(React__default.Fragment,null,a)}}function J(t,o){return {content:tt(t.content,t.props),containerId:t.props.containerId,id:t.props.toastId,theme:t.props.theme,type:t.props.type,data:t.props.data||{},isLoading:t.props.isLoading,icon:t.props.icon,reason:t.removalReason,status:o}}function tt(t,o,e=false){return isValidElement(t)&&!N(t.type)?cloneElement(t,{closeToast:o.closeToast,toastProps:o,data:o.data,isPaused:e}):P(t)?t({closeToast:o.closeToast,toastProps:o,data:o.data,isPaused:e}):t}function yt({closeToast:t,theme:o,ariaLabel:e="close"}){return React__default.createElement("button",{className:`Toastify__close-button Toastify__close-button--${o}`,type:"button",onClick:r=>{r.stopPropagation(),t(true);},"aria-label":e},React__default.createElement("svg",{"aria-hidden":"true",viewBox:"0 0 14 16"},React__default.createElement("path",{fillRule:"evenodd",d:"M7.71 8.23l3.75 3.75-1.48 1.48-3.75-3.75-3.75 3.75L1 11.98l3.75-3.75L1 4.48 2.48 3l3.75 3.75L9.98 3l1.48 1.48-3.75 3.75z"})))}function gt({delay:t,isRunning:o,closeToast:e,type:r="default",hide:s,className:l,controlledProgress:a,progress:d,rtl:c,isIn:T,theme:g}){let v=s||a&&d===0,x={animationDuration:`${t}ms`,animationPlayState:o?"running":"paused"};a&&(x.transform=`scaleX(${d})`);let C=clsx("Toastify__progress-bar",a?"Toastify__progress-bar--controlled":"Toastify__progress-bar--animated",`Toastify__progress-bar-theme--${g}`,`Toastify__progress-bar--${r}`,{["Toastify__progress-bar--rtl"]:c}),S=P(l)?l({rtl:c,type:r,defaultClassName:C}):clsx(C,l),E={[a&&d>=1?"onTransitionEnd":"onAnimationEnd"]:a&&d<1?null:()=>{T&&e();}};return React__default.createElement("div",{className:"Toastify__progress-bar--wrp","data-hidden":v},React__default.createElement("div",{className:`Toastify__progress-bar--bg Toastify__progress-bar-theme--${g} Toastify__progress-bar--${r}`}),React__default.createElement("div",{role:"progressbar","aria-hidden":v?"true":"false","aria-label":"notification timer",className:S,style:x,...E}))}var Xt=1,at=()=>`${Xt++}`;function _t(t,o,e){let r=1,s=0,l=[],a=[],d=o,c=new Map,T=new Set,g=i=>(T.add(i),()=>T.delete(i)),v=()=>{a=Array.from(c.values()),T.forEach(i=>i());},x=({containerId:i,toastId:n,updateId:u})=>{let h=i?i!==t:t!==1,m=c.has(n)&&u==null;return h||m},C=(i,n)=>{c.forEach(u=>{var h;(n==null||n===u.props.toastId)&&((h=u.toggle)==null||h.call(u,i));});},S=i=>{var n,u;(u=(n=i.props)==null?void 0:n.onClose)==null||u.call(n,i.removalReason),i.isActive=false;},E=i=>{if(i==null)c.forEach(S);else {let n=c.get(i);n&&S(n);}v();},f=()=>{s-=l.length,l=[];},p=i=>{var m,_;let{toastId:n,updateId:u}=i.props,h=u==null;i.staleId&&c.delete(i.staleId),i.isActive=true,c.set(n,i),v(),e(J(i,h?"added":"updated")),h&&((_=(m=i.props).onOpen)==null||_.call(m));};return {id:t,props:d,observe:g,toggle:C,removeToast:E,toasts:c,clearQueue:f,buildToast:(i,n)=>{if(x(n))return;let{toastId:u,updateId:h,data:m,staleId:_,delay:k}=n,M=h==null;M&&s++;let A={...d,style:d.toastStyle,key:r++,...Object.fromEntries(Object.entries(n).filter(([D,Y])=>Y!=null)),toastId:u,updateId:h,data:m,isIn:false,className:B(n.className||d.toastClassName),progressClassName:B(n.progressClassName||d.progressClassName),autoClose:n.isLoading?false:pt(n.autoClose,d.autoClose),closeToast(D){c.get(u).removalReason=D,E(u);},deleteToast(){let D=c.get(u);if(D!=null){if(e(J(D,"removed")),c.delete(u),s--,s<0&&(s=0),l.length>0){p(l.shift());return}v();}}};A.closeButton=d.closeButton,n.closeButton===false||z(n.closeButton)?A.closeButton=n.closeButton:n.closeButton===true&&(A.closeButton=z(d.closeButton)?d.closeButton:true);let R={content:i,props:A,staleId:_};d.limit&&d.limit>0&&s>d.limit&&M?l.push(R):L(k)?setTimeout(()=>{p(R);},k):p(R);},setProps(i){d=i;},setToggle:(i,n)=>{let u=c.get(i);u&&(u.toggle=n);},isToastActive:i=>{var n;return (n=c.get(i))==null?void 0:n.isActive},getSnapshot:()=>a}}var I=new Map,F=[],st=new Set,Vt=t=>st.forEach(o=>o(t)),bt=()=>I.size>0;function Qt(){F.forEach(t=>nt(t.content,t.options)),F=[];}var vt=(t,{containerId:o})=>{var e;return (e=I.get(o||1))==null?void 0:e.toasts.get(t)};function X(t,o){var r;if(o)return !!((r=I.get(o))!=null&&r.isToastActive(t));let e=false;return I.forEach(s=>{s.isToastActive(t)&&(e=true);}),e}function ht(t){if(!bt()){F=F.filter(o=>t!=null&&o.options.toastId!==t);return}if(t==null||mt(t))I.forEach(o=>{o.removeToast(t);});else if(t&&("containerId"in t||"id"in t)){let o=I.get(t.containerId);o?o.removeToast(t.id):I.forEach(e=>{e.removeToast(t.id);});}}var Ct=(t={})=>{I.forEach(o=>{o.props.limit&&(!t.containerId||o.id===t.containerId)&&o.clearQueue();});};function nt(t,o){z(t)&&(bt()||F.push({content:t,options:o}),I.forEach(e=>{e.buildToast(t,o);}));}function xt(t){var o;(o=I.get(t.containerId||1))==null||o.setToggle(t.id,t.fn);}function rt(t,o){I.forEach(e=>{(o==null||!(o!=null&&o.containerId)||(o==null?void 0:o.containerId)===e.id)&&e.toggle(t,o==null?void 0:o.id);});}function Et(t){let o=t.containerId||1;return {subscribe(e){let r=_t(o,t,Vt);I.set(o,r);let s=r.observe(e);return Qt(),()=>{s(),I.delete(o);}},setProps(e){var r;(r=I.get(o))==null||r.setProps(e);},getSnapshot(){var e;return (e=I.get(o))==null?void 0:e.getSnapshot()}}}function Pt(t){return st.add(t),()=>{st.delete(t);}}function Wt(t){return t&&(N(t.toastId)||L(t.toastId))?t.toastId:at()}function U(t,o){return nt(t,o),o.toastId}function V(t,o){return {...o,type:o&&o.type||t,toastId:Wt(o)}}function Q(t){return (o,e)=>U(o,V(t,e))}function y(t,o){return U(t,V("default",o))}y.loading=(t,o)=>U(t,V("default",{isLoading:true,autoClose:false,closeOnClick:false,closeButton:false,draggable:false,...o}));function Gt(t,{pending:o,error:e,success:r},s){let l;o&&(l=N(o)?y.loading(o,s):y.loading(o.render,{...s,...o}));let a={isLoading:null,autoClose:null,closeOnClick:null,closeButton:null,draggable:null},d=(T,g,v)=>{if(g==null){y.dismiss(l);return}let x={type:T,...a,...s,data:v},C=N(g)?{render:g}:g;return l?y.update(l,{...x,...C}):y(C.render,{...x,...C}),v},c=P(t)?t():t;return c.then(T=>d("success",r,T)).catch(T=>d("error",e,T)),c}y.promise=Gt;y.success=Q("success");y.info=Q("info");y.error=Q("error");y.warning=Q("warning");y.warn=y.warning;y.dark=(t,o)=>U(t,V("default",{theme:"dark",...o}));function qt(t){ht(t);}y.dismiss=qt;y.clearWaitingQueue=Ct;y.isActive=X;y.update=(t,o={})=>{let e=vt(t,o);if(e){let{props:r,content:s}=e,l={delay:100,...r,...o,toastId:o.toastId||t,updateId:at()};l.toastId!==t&&(l.staleId=t);let a=l.render||s;delete l.render,U(a,l);}};y.done=t=>{y.update(t,{progress:1});};y.onChange=Pt;y.play=t=>rt(true,t);y.pause=t=>rt(false,t);function It(t){var a;let{subscribe:o,getSnapshot:e,setProps:r}=useRef(Et(t)).current;r(t);let s=(a=useSyncExternalStore(o,e,e))==null?void 0:a.slice();function l(d){if(!s)return [];let c=new Map;return t.newestOnTop&&s.reverse(),s.forEach(T=>{let{position:g}=T.props;c.has(g)||c.set(g,[]),c.get(g).push(T);}),Array.from(c,T=>d(T[0],T[1]))}return {getToastToRender:l,isToastActive:X,count:s==null?void 0:s.length}}function At(t){let[o,e]=useState(false),[r,s]=useState(false),l=useRef(null),a=useRef({start:0,delta:0,removalDistance:0,canCloseOnClick:true,canDrag:false,didMove:false}).current,{autoClose:d,pauseOnHover:c,closeToast:T,onClick:g,closeOnClick:v}=t;xt({id:t.toastId,containerId:t.containerId,fn:e}),useEffect(()=>{if(t.pauseOnFocusLoss)return x(),()=>{C();}},[t.pauseOnFocusLoss]);function x(){document.hasFocus()||p(),window.addEventListener("focus",f),window.addEventListener("blur",p);}function C(){window.removeEventListener("focus",f),window.removeEventListener("blur",p);}function S(m){if(t.draggable===true||t.draggable===m.pointerType){b();let _=l.current;a.canCloseOnClick=true,a.canDrag=true,_.style.transition="none",t.draggableDirection==="x"?(a.start=m.clientX,a.removalDistance=_.offsetWidth*(t.draggablePercent/100)):(a.start=m.clientY,a.removalDistance=_.offsetHeight*(t.draggablePercent===80?t.draggablePercent*1.5:t.draggablePercent)/100);}}function E(m){let{top:_,bottom:k,left:M,right:A}=l.current.getBoundingClientRect();m.nativeEvent.type!=="touchend"&&t.pauseOnHover&&m.clientX>=M&&m.clientX<=A&&m.clientY>=_&&m.clientY<=k?p():f();}function f(){e(true);}function p(){e(false);}function b(){a.didMove=false,document.addEventListener("pointermove",n),document.addEventListener("pointerup",u);}function i(){document.removeEventListener("pointermove",n),document.removeEventListener("pointerup",u);}function n(m){let _=l.current;if(a.canDrag&&_){a.didMove=true,o&&p(),t.draggableDirection==="x"?a.delta=m.clientX-a.start:a.delta=m.clientY-a.start,a.start!==m.clientX&&(a.canCloseOnClick=false);let k=t.draggableDirection==="x"?`${a.delta}px, var(--y)`:`0, calc(${a.delta}px + var(--y))`;_.style.transform=`translate3d(${k},0)`,_.style.opacity=`${1-Math.abs(a.delta/a.removalDistance)}`;}}function u(){i();let m=l.current;if(a.canDrag&&a.didMove&&m){if(a.canDrag=false,Math.abs(a.delta)>a.removalDistance){s(true),t.closeToast(true),t.collapseAll();return}m.style.transition="transform 0.2s, opacity 0.2s",m.style.removeProperty("transform"),m.style.removeProperty("opacity");}}let h={onPointerDown:S,onPointerUp:E};return d&&c&&(h.onMouseEnter=p,t.stacked||(h.onMouseLeave=f)),v&&(h.onClick=m=>{g&&g(m),a.canCloseOnClick&&T(true);}),{playToast:f,pauseToast:p,isRunning:o,preventExitTransition:r,toastRef:l,eventHandlers:h}}var Ot=typeof window!="undefined"?useLayoutEffect:useEffect;var G=({theme:t,type:o,isLoading:e,...r})=>React__default.createElement("svg",{viewBox:"0 0 24 24",width:"100%",height:"100%",fill:t==="colored"?"currentColor":`var(--toastify-icon-color-${o})`,...r});function ao(t){return React__default.createElement(G,{...t},React__default.createElement("path",{d:"M23.32 17.191L15.438 2.184C14.728.833 13.416 0 11.996 0c-1.42 0-2.733.833-3.443 2.184L.533 17.448a4.744 4.744 0 000 4.368C1.243 23.167 2.555 24 3.975 24h16.05C22.22 24 24 22.044 24 19.632c0-.904-.251-1.746-.68-2.44zm-9.622 1.46c0 1.033-.724 1.823-1.698 1.823s-1.698-.79-1.698-1.822v-.043c0-1.028.724-1.822 1.698-1.822s1.698.79 1.698 1.822v.043zm.039-12.285l-.84 8.06c-.057.581-.408.943-.897.943-.49 0-.84-.367-.896-.942l-.84-8.065c-.057-.624.25-1.095.779-1.095h1.91c.528.005.84.476.784 1.1z"}))}function so(t){return React__default.createElement(G,{...t},React__default.createElement("path",{d:"M12 0a12 12 0 1012 12A12.013 12.013 0 0012 0zm.25 5a1.5 1.5 0 11-1.5 1.5 1.5 1.5 0 011.5-1.5zm2.25 13.5h-4a1 1 0 010-2h.75a.25.25 0 00.25-.25v-4.5a.25.25 0 00-.25-.25h-.75a1 1 0 010-2h1a2 2 0 012 2v4.75a.25.25 0 00.25.25h.75a1 1 0 110 2z"}))}function no(t){return React__default.createElement(G,{...t},React__default.createElement("path",{d:"M12 0a12 12 0 1012 12A12.014 12.014 0 0012 0zm6.927 8.2l-6.845 9.289a1.011 1.011 0 01-1.43.188l-4.888-3.908a1 1 0 111.25-1.562l4.076 3.261 6.227-8.451a1 1 0 111.61 1.183z"}))}function ro(t){return React__default.createElement(G,{...t},React__default.createElement("path",{d:"M11.983 0a12.206 12.206 0 00-8.51 3.653A11.8 11.8 0 000 12.207 11.779 11.779 0 0011.8 24h.214A12.111 12.111 0 0024 11.791 11.766 11.766 0 0011.983 0zM10.5 16.542a1.476 1.476 0 011.449-1.53h.027a1.527 1.527 0 011.523 1.47 1.475 1.475 0 01-1.449 1.53h-.027a1.529 1.529 0 01-1.523-1.47zM11 12.5v-6a1 1 0 012 0v6a1 1 0 11-2 0z"}))}function io(){return React__default.createElement("div",{className:"Toastify__spinner"})}var W={info:so,warning:ao,success:no,error:ro,spinner:io},lo=t=>t in W;function Nt({theme:t,type:o,isLoading:e,icon:r}){let s=null,l={theme:t,type:o};return r===false||(P(r)?s=r({...l,isLoading:e}):isValidElement(r)?s=cloneElement(r,l):e?s=W.spinner():lo(o)&&(s=W[o](l))),s}var wt=t=>{let{isRunning:o,preventExitTransition:e,toastRef:r,eventHandlers:s,playToast:l}=At(t),{closeButton:a,children:d,autoClose:c,onClick:T,type:g,hideProgressBar:v,closeToast:x,transition:C,position:S,className:E,style:f,progressClassName:p,updateId:b,role:i,progress:n,rtl:u,toastId:h,deleteToast:m,isIn:_,isLoading:k,closeOnClick:M,theme:A,ariaLabel:R}=t,D=clsx("Toastify__toast",`Toastify__toast-theme--${A}`,`Toastify__toast--${g}`,{["Toastify__toast--rtl"]:u},{["Toastify__toast--close-on-click"]:M}),Y=P(E)?E({rtl:u,position:S,type:g,defaultClassName:D}):clsx(D,E),ft=Nt(t),dt=!!n||!c,j={closeToast:x,type:g,theme:A},H=null;return a===false||(P(a)?H=a(j):isValidElement(a)?H=cloneElement(a,j):H=yt(j)),React__default.createElement(C,{isIn:_,done:m,position:S,preventExitTransition:e,nodeRef:r,playToast:l},React__default.createElement("div",{id:h,tabIndex:0,onClick:T,"data-in":_,className:Y,...s,style:f,ref:r,..._&&{role:i,"aria-label":R}},ft!=null&&React__default.createElement("div",{className:clsx("Toastify__toast-icon",{["Toastify--animate-icon Toastify__zoom-enter"]:!k})},ft),tt(d,t,!o),H,!t.customProgressBar&&React__default.createElement(gt,{...b&&!dt?{key:`p-${b}`}:{},rtl:u,theme:A,delay:c,isRunning:o,isIn:_,closeToast:x,hide:v,type:g,className:p,controlledProgress:dt,progress:n||0})))};var K=(t,o=false)=>({enter:`Toastify--animate Toastify__${t}-enter`,exit:`Toastify--animate Toastify__${t}-exit`,appendPosition:o}),lt=$(K("bounce",true)),mo=$(K("slide",true));var _o={position:"top-right",transition:lt,autoClose:5e3,closeButton:true,pauseOnHover:true,pauseOnFocusLoss:true,draggable:"touch",draggablePercent:80,draggableDirection:"x",role:"alert",theme:"light","aria-label":"Notifications Alt+T",hotKeys:t=>t.altKey&&t.code==="KeyT"};function Lt(t){let o={..._o,...t},e=t.stacked,[r,s]=useState(true),l=useRef(null),{getToastToRender:a,isToastActive:d,count:c}=It(o),{className:T,style:g,rtl:v,containerId:x,hotKeys:C}=o;function S(f){let p=clsx("Toastify__toast-container",`Toastify__toast-container--${f}`,{["Toastify__toast-container--rtl"]:v});return P(T)?T({position:f,rtl:v,defaultClassName:p}):clsx(p,B(T))}function E(){e&&(s(true),y.play());}return Ot(()=>{var f;if(e){let p=l.current.querySelectorAll('[data-in="true"]'),b=12,i=(f=o.position)==null?void 0:f.includes("top"),n=0,u=0;Array.from(p).reverse().forEach((h,m)=>{let _=h;_.classList.add("Toastify__toast--stacked"),m>0&&(_.dataset.collapsed=`${r}`),_.dataset.pos||(_.dataset.pos=i?"top":"bot");let k=n*(r?.2:1)+(r?0:b*m);_.style.setProperty("--y",`${i?k:k*-1}px`),_.style.setProperty("--g",`${b}`),_.style.setProperty("--s",`${1-(r?u:0)}`),n+=_.offsetHeight,u+=.025;});}},[r,c,e]),useEffect(()=>{function f(p){var i;let b=l.current;C(p)&&((i=b.querySelector('[tabIndex="0"]'))==null||i.focus(),s(false),y.pause()),p.key==="Escape"&&(document.activeElement===b||b!=null&&b.contains(document.activeElement))&&(s(true),y.play());}return document.addEventListener("keydown",f),()=>{document.removeEventListener("keydown",f);}},[C]),React__default.createElement("section",{ref:l,className:"Toastify",id:x,onMouseEnter:()=>{e&&(s(false),y.pause());},onMouseLeave:E,"aria-live":"polite","aria-atomic":"false","aria-relevant":"additions text","aria-label":o["aria-label"]},a((f,p)=>{let b=p.length?{...g}:{...g,pointerEvents:"none"};return React__default.createElement("div",{tabIndex:-1,className:S(f),"data-stacked":e,style:b,key:`c-${f}`},p.map(({content:i,props:n})=>React__default.createElement(wt,{...n,stacked:e,collapseAll:E,isIn:d(n.toastId,n.containerId),key:`t-${n.key}`},i)))}))}
 
+function DynamicConfig({
+  appid,
+  configdata = null,
+  disableApi = false
+}) {
+  const [config, setConfig] = React__default.useState(configdata);
+  const [data, setData] = React__default.useState(null);
+  const [loading, setLoading] = useState(false);
+  const [validationErrors, setValidationErrors] = useState({});
+  const configEndPoint = `${gatewayBase()}/unifyedxappmodulemanagement/api/v1/appmanager/${appid}/configuration`;
+  const updateEndPoint = configEndPoint;
+  const [reload, setReload] = useState(1);
+  const transformApiResponse = (apiResponse) => {
+    if (!configdata || !configdata.configuration) {
+      return apiResponse;
+    }
+    const transformedData = {};
+    const configurationData = apiResponse?.configuration || {};
+    configdata.configuration.forEach((section) => {
+      if (section.key && section.type === "datatable" && section.key === "newsFeeds") {
+        const newsFeeds = configurationData.newsFeeds || [];
+        const transformedRows = newsFeeds.map((nf, index) => {
+          let audienceData = { users: [], groups: [], roles: [] };
+          if (nf.audience) {
+            if (Array.isArray(nf.audience)) {
+              audienceData = { users: [], groups: [], roles: [] };
+            } else if (typeof nf.audience === "object") {
+              audienceData = {
+                users: nf.audience.users || [],
+                groups: nf.audience.groups || [],
+                roles: nf.audience.roles || []
+              };
+            }
+          }
+          const transformedRow = {
+            id: nf.id || 0,
+            category: nf.category || "",
+            url: nf.url || "",
+            // Keep as 'url' to match config.json
+            audience: audienceData
+          };
+          return transformedRow;
+        });
+        if (transformedRows.length === 0) {
+          const emptyRow = { id: 0 };
+          if (section.fields) {
+            section.fields.forEach((field) => {
+              if (field.fieldtype === "audience") {
+                emptyRow[field.key] = { users: [], groups: [], roles: [] };
+              } else {
+                emptyRow[field.key] = field.default || "";
+              }
+            });
+          }
+          transformedRows.push(emptyRow);
+        }
+        transformedData[section.key] = transformedRows;
+      } else if (section.key) {
+        transformedData[section.key] = configurationData[section.key] || {};
+      }
+    });
+    return transformedData;
+  };
+  const initializeEmptyData = () => {
+    if (configdata && configdata.configuration) {
+      const configDataState = {};
+      configdata.configuration.forEach((section) => {
+        if (section.key) {
+          if (section.type === "datatable") {
+            const emptyRow = { id: 0 };
+            if (section.fields) {
+              section.fields.forEach((field) => {
+                if (field.fieldtype === "audience") {
+                  emptyRow[field.key] = { users: [], groups: [], roles: [] };
+                } else {
+                  emptyRow[field.key] = field.default || "";
+                }
+              });
+            }
+            configDataState[section.key] = [emptyRow];
+          } else if (section.type === "section") {
+            const sectionData = {};
+            if (section.fields && Array.isArray(section.fields)) {
+              section.fields.forEach((field) => {
+                if (field.key) {
+                  sectionData[field.key] = field.default || "";
+                }
+              });
+            }
+            configDataState[section.key] = sectionData;
+          } else {
+            configDataState[section.key] = {};
+          }
+        }
+      });
+      setData(configDataState);
+    }
+  };
+  useEffect(() => {
+    if (disableApi) {
+      setLoading(false);
+      return;
+    }
+    const fetchData = async () => {
+      try {
+        setLoading(true);
+        let response = await axiosGet(configEndPoint);
+        if (response) {
+          const transformedData = transformApiResponse(response);
+          setData(transformedData);
+        } else {
+          initializeEmptyData();
+        }
+      } catch (error) {
+        console.error("Error fetching configuration:", error);
+        let errorMessage = "Failed to load configuration";
+        if (error.response) {
+          const status = error.response.status;
+          const serverMessage = error.response.data?.message || error.response.data?.error;
+          if (status === 400) {
+            errorMessage = serverMessage || "Invalid request. Please check the application ID.";
+          } else if (status === 401) {
+            errorMessage = "You are not authorized to access this configuration.";
+          } else if (status === 403) {
+            errorMessage = "Access denied. You don't have permission to view this configuration.";
+          } else if (status === 404) {
+            errorMessage = "Configuration not found. It may not exist yet or the application ID is incorrect.";
+          } else if (status >= 500) {
+            errorMessage = serverMessage || "Server error. Please try again later.";
+          } else {
+            errorMessage = serverMessage || `Failed to load configuration (Error ${status})`;
+          }
+        } else if (error.request) {
+          errorMessage = "Network error. Please check your connection and try again.";
+        } else {
+          errorMessage = error.message || "An unexpected error occurred while loading configuration.";
+        }
+        y.error(errorMessage, {
+          autoClose: 6e3,
+          hideProgressBar: false,
+          closeOnClick: true,
+          pauseOnHover: true,
+          draggable: true
+        });
+        initializeEmptyData();
+      } finally {
+        setLoading(false);
+      }
+    };
+    if (configdata) {
+      setConfig(configdata);
+      if (appid) {
+        fetchData();
+      } else {
+        initializeEmptyData();
+      }
+    }
+  }, [configdata, reload, appid, disableApi]);
+  const handleSectionChange = (name, sectiondata) => {
+    setData((prev) => {
+      const newData = {
+        ...prev,
+        [name]: sectiondata
+      };
+      return newData;
+    });
+    setValidationErrors((prevErrors) => {
+      const newErrors = { ...prevErrors };
+      if (newErrors[name]) {
+        delete newErrors[name];
+      }
+      return newErrors;
+    });
+  };
+  const validateRequiredFields = () => {
+    const errors = {};
+    if (!config || !data) {
+      return errors;
+    }
+    config.configuration.forEach((section) => {
+      if (section.type === "section") {
+        section.fields.forEach((field) => {
+          if (field.required) {
+            const value = data[section.key]?.[field.key];
+            if (!value || typeof value === "string" && value.trim() === "") {
+              if (!errors[section.key]) errors[section.key] = {};
+              errors[section.key][field.key] = `${field.label} is required`;
+            }
+          }
+        });
+      } else if (section.type === "datatable") {
+        const tableData = data[section.key];
+        if (Array.isArray(tableData)) {
+          tableData.forEach((row, rowIndex) => {
+            section.fields.forEach((field) => {
+              if (field.required) {
+                const value = row[field.key];
+                if (!value || typeof value === "string" && value.trim() === "") {
+                  if (!errors[section.key]) errors[section.key] = {};
+                  if (!errors[section.key][rowIndex]) errors[section.key][rowIndex] = {};
+                  errors[section.key][rowIndex][field.key] = `${field.label} is required`;
+                }
+              }
+            });
+          });
+        }
+      }
+    });
+    return errors;
+  };
+  const hasValidationErrors = (errors) => {
+    return Object.keys(errors).length > 0;
+  };
+  const handleSave = () => {
+    const errors = validateRequiredFields();
+    setValidationErrors(errors);
+    if (hasValidationErrors(errors)) {
+      let errorCount = 0;
+      let errorDetails = [];
+      Object.keys(errors).forEach((sectionKey) => {
+        if (typeof errors[sectionKey] === "object") {
+          Object.keys(errors[sectionKey]).forEach((itemKey) => {
+            if (typeof errors[sectionKey][itemKey] === "object") {
+              Object.keys(errors[sectionKey][itemKey]).forEach((fieldKey) => {
+                errorCount++;
+                errorDetails.push(`${sectionKey} row ${parseInt(itemKey) + 1}: ${errors[sectionKey][itemKey][fieldKey]}`);
+              });
+            } else {
+              errorCount++;
+              errorDetails.push(`${sectionKey}: ${errors[sectionKey][itemKey]}`);
+            }
+          });
+        }
+      });
+      const errorMessage = errorCount === 1 ? "Please fill in the required field before saving" : `Please fill in all ${errorCount} required fields before saving`;
+      y.error(errorMessage, {
+        autoClose: 6e3,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true
+      });
+      return;
+    }
+    const saveData = async () => {
+      try {
+        setLoading(true);
+        const transformedPayload = {};
+        if (data) {
+          Object.keys(data).forEach((key) => {
+            if (key === "newsFeeds" && Array.isArray(data[key])) {
+              transformedPayload[key] = data[key].map((item) => {
+                let audienceData = { users: [], groups: [], roles: [] };
+                if (item.audience) {
+                  if (typeof item.audience === "object" && !Array.isArray(item.audience)) {
+                    audienceData = {
+                      users: item.audience.users || [],
+                      groups: item.audience.groups || [],
+                      roles: item.audience.roles || []
+                    };
+                  }
+                }
+                return {
+                  id: item.id || 0,
+                  category: item.category || "",
+                  url: item.url || "",
+                  // Keep as 'url' to match API and config
+                  audience: audienceData
+                };
+              });
+            } else {
+              transformedPayload[key] = data[key];
+            }
+          });
+        }
+        let response = await axiosPost(updateEndPoint, transformedPayload);
+        if (response && response.data?.status != "fail") {
+          setValidationErrors({});
+          const successMessage = response.message || "Configuration has been saved successfully";
+          y.success(successMessage, {
+            autoClose: 4e3,
+            hideProgressBar: false,
+            closeOnClick: true,
+            pauseOnHover: true,
+            draggable: true
+          });
+        } else {
+          throw new Error("No response received from server");
+        }
+      } catch (error) {
+        let errorMessage = "Failed to save configuration";
+        if (error.response) {
+          const status = error.response.status;
+          const serverMessage = error.response.data?.message || error.response.data?.error;
+          if (status === 400) {
+            errorMessage = serverMessage || "Invalid configuration data. Please check your inputs.";
+          } else if (status === 401) {
+            errorMessage = "You are not authorized to save this configuration.";
+          } else if (status === 403) {
+            errorMessage = "Access denied. You don't have permission to save this configuration.";
+          } else if (status === 404) {
+            errorMessage = "Configuration endpoint not found. Please contact support.";
+          } else if (status >= 500) {
+            errorMessage = serverMessage || "Server error. Please try again later.";
+          } else {
+            errorMessage = serverMessage || `Failed to save configuration (Error ${status})`;
+          }
+        } else if (error.request) {
+          errorMessage = "Network error. Please check your connection and try again.";
+        } else {
+          errorMessage = error.message || "An unexpected error occurred while saving.";
+        }
+        y.error(errorMessage, {
+          autoClose: 8e3,
+          hideProgressBar: false,
+          closeOnClick: true,
+          pauseOnHover: true,
+          draggable: true
+        });
+      } finally {
+        setLoading(false);
+      }
+    };
+    saveData();
+  };
+  const handleCancel = () => {
+    const hasUnsavedChanges = validationErrors && Object.keys(validationErrors).length > 0;
+    if (hasUnsavedChanges) {
+      const confirmed = window.confirm(
+        "You have validation errors that will be lost. Are you sure you want to cancel?"
+      );
+      if (!confirmed) {
+        return;
+      }
+    }
+    setValidationErrors({});
+    setData(null);
+    setReload((prev) => prev + 1);
+    y.info("Configuration changes cancelled", {
+      autoClose: 2e3,
+      hideProgressBar: false,
+      closeOnClick: true,
+      pauseOnHover: true,
+      draggable: true
+    });
+  };
+  if (!config?.configuration && !configdata?.configuration) {
+    return /* @__PURE__ */ jsxs("div", { className: "min-h-screen flex items-center justify-center", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-gray-500", children: "No configuration available" }),
+      /* @__PURE__ */ jsx(
+        Lt,
+        {
+          position: "top-right",
+          autoClose: 5e3,
+          hideProgressBar: false,
+          newestOnTop: false,
+          closeOnClick: true,
+          rtl: false,
+          pauseOnFocusLoss: true,
+          draggable: true,
+          pauseOnHover: true,
+          theme: "light"
+        }
+      )
+    ] });
+  }
+  const configurationSections = configdata?.configuration || config?.configuration;
+  useEffect(() => {
+    if (disableApi && configdata) {
+      const transformedData = transformApiResponse(configdata);
+      setData(transformedData);
+    } else if (disableApi && !configdata) {
+      initializeEmptyData();
+    }
+  }, [disableApi, configdata]);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "dynamic-config bg-white border rounded-t-2xl border-gray-300 w-full h-[calc(100vh-350px)] overflow-y-auto",
+        style: { padding: "20px", fontFamily: "Arial, sans-serif" },
+        children: [
+          loading && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center mb-4 p-4 bg-blue-50 border border-blue-200 rounded", children: [
+            /* @__PURE__ */ jsx(Spinner, { size: "small" }),
+            /* @__PURE__ */ jsx("span", { className: "ml-2 text-blue-700", children: "Loading configuration..." })
+          ] }),
+          configurationSections?.map((section, index) => {
+            const C = getComponentForType(section.type);
+            if (C && C !== "UnknownType") {
+              return /* @__PURE__ */ jsx(
+                C,
+                {
+                  item: section,
+                  data,
+                  updateHandler: handleSectionChange,
+                  validationErrors
+                },
+                index
+              );
+            }
+          })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "w-full gap-5 bg-white flex justify-end py-3 px-7 rounded-t-md rounded-b-2xl border border-gray-300", children: [
+      /* @__PURE__ */ jsx(
+        UnifyedCoreButton,
+        {
+          category: "secondary",
+          onClick: handleCancel,
+          label: "Cancel",
+          disabled: loading
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        UnifyedCoreButton,
+        {
+          category: "primary",
+          onClick: handleSave,
+          disabled: loading,
+          label: loading ? "Saving..." : "Apply",
+          type: "submit"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      Lt,
+      {
+        position: "top-right",
+        autoClose: 5e3,
+        hideProgressBar: false,
+        newestOnTop: false,
+        closeOnClick: true,
+        rtl: false,
+        pauseOnFocusLoss: true,
+        draggable: true,
+        pauseOnHover: true,
+        theme: "light",
+        style: { zIndex: 9999 }
+      }
+    )
+  ] });
+}
+
+const DynamicConfig_stories = {
+  title: "Utils/Configuration/DynamicConfig",
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component: "DynamicConfig is a powerful configuration component that automatically generates UI forms based on JSON schema. It handles API calls, data transformation, and form validation."
+      }
+    }
+  }
+};
+
+const FullConfigPage = ({
+  config,
+  appid = "default-app",
+  disableApi = false
+}) => {
+  const [activeTab, setActiveTab] = useState(0);
+  const {
+    pageHeader = {},
+    appletHeader = {},
+    breadcrumb = [],
+    overview = {},
+    configuration = []
+  } = config;
+  const defaultPageHeader = {
+    heading: "App Details",
+    subHeading: "View app details and customize configurations to align with institutional requirements.",
+    isLeftArrow: true,
+    ...pageHeader
+  };
+  const defaultAppletHeader = {
+    heading: "Application",
+    subHeading: "Application configuration and details",
+    tags: [],
+    ...appletHeader
+  };
+  const defaultOverview = {
+    about: "This application provides comprehensive functionality for your organization.",
+    images: {
+      desktop: "https://via.placeholder.com/600x400?text=Desktop+View",
+      mobile1: "https://via.placeholder.com/200x400?text=Mobile+View+1",
+      mobile2: "https://via.placeholder.com/200x400?text=Mobile+View+2"
+    },
+    features: [
+      {
+        title: "Feature 1",
+        description: "Description of feature 1"
+      },
+      {
+        title: "Feature 2",
+        description: "Description of feature 2"
+      }
+    ],
+    ...overview
+  };
+  const tabs = [
+    { label: "Overview", content: renderOverview(defaultOverview) },
+    { label: "Configuration", content: /* @__PURE__ */ jsx(DynamicConfig, { appid, configdata: { configuration }, disableApi }) }
+  ];
+  function renderIcon(icon) {
+    if (!icon) {
+      return "📱";
+    }
+    if (icon.includes("<svg")) {
+      return /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: icon } });
+    }
+    return icon;
+  }
+  function renderOverview(overviewData) {
+    return /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-2xl p-1", children: [
+      /* @__PURE__ */ jsxs("section", { className: "mb-8", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold mb-2", children: "About" }),
+        /* @__PURE__ */ jsx("p", { className: "text-gray-700 text-base", children: overviewData.about })
+      ] }),
+      /* @__PURE__ */ jsxs("section", { className: "flex flex-row gap-6 justify-center items-center mb-8", children: [
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: overviewData.images.desktop,
+            alt: "Desktop View",
+            className: "rounded-xl border border-gray-200 w-[340px] h-[220px] object-cover"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: overviewData.images.mobile1,
+            alt: "Mobile View 1",
+            className: "rounded-2xl border border-gray-200 w-[120px] h-[220px] object-cover"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: overviewData.images.mobile2,
+            alt: "Mobile View 2",
+            className: "rounded-2xl border border-gray-200 w-[120px] h-[220px] object-cover"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("section", { children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-4", children: "Key Features" }),
+        /* @__PURE__ */ jsx("ul", { className: "space-y-3", children: overviewData.features.map((feature, index) => /* @__PURE__ */ jsxs("li", { children: [
+          /* @__PURE__ */ jsx("span", { className: "font-semibold", children: feature.title }),
+          /* @__PURE__ */ jsx("br", {}),
+          /* @__PURE__ */ jsx("span", { className: "text-gray-700", children: feature.description })
+        ] }, index)) })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "full-config-page", children: [
+    /* @__PURE__ */ jsxs("div", { className: "py-3 flex items-center gap-4", children: [
+      defaultPageHeader.isLeftArrow && /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "cursor-pointer flex-shrink-0 mt-1",
+          "aria-label": "Go back",
+          onClick: () => window.history.back(),
+          children: /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M19 12H5M12 19l-7-7 7-7", stroke: "#6b7280", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0", children: [
+        /* @__PURE__ */ jsx("h1", { className: "text-[18px] font-semibold leading-tight truncate m-0", children: defaultPageHeader.heading }),
+        /* @__PURE__ */ jsx("p", { className: "text-[13px] font-normal text-[#6b7280] opacity-90 mt-1 truncate mb-0", children: defaultPageHeader.subHeading })
+      ] })
+    ] }),
+    breadcrumb && breadcrumb.length > 0 && /* @__PURE__ */ jsx("nav", { className: "flex gap-2 items-center text-[13px] text-[#6b7280] mb-4", "aria-label": "Breadcrumb", children: breadcrumb.map((item, index) => /* @__PURE__ */ jsxs("span", { className: "flex items-center", children: [
+      index > 0 && /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", style: { margin: "0 2px" }, children: /* @__PURE__ */ jsx("path", { d: "M9 18L15 12L9 6", stroke: "#6b7280", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+      item.isCurrent ? /* @__PURE__ */ jsx("span", { className: "font-semibold text-[#252525]", children: item.text }) : /* @__PURE__ */ jsx("a", { href: item.href, className: "hover:text-[#1f6ed4] cursor-pointer", style: { textDecoration: "none" }, children: item.text })
+    ] }, index)) }),
+    /* @__PURE__ */ jsxs("div", { className: "bg-[#ffffff] border border-[#eef2f6] rounded-[12px] px-6 py-5 flex gap-4 items-start mb-4 shadow-sm", children: [
+      /* @__PURE__ */ jsx("div", { className: "icon w-[72px] h-[72px] rounded-full flex items-center justify-center bg-[#F5F5F6] text-[#1C274C] font-bold text-[18px]", children: renderIcon(defaultAppletHeader.icon) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-[18px] font-semibold m-0 leading-tight truncate", children: defaultAppletHeader.heading }),
+        /* @__PURE__ */ jsx("p", { className: "text-[13px] text-[#767676] mt-1 mb-0 max-w-[800px] leading-normal", children: defaultAppletHeader.subHeading }),
+        /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: defaultAppletHeader.tags && defaultAppletHeader.tags.map((tag, index) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "pill inline-block px-[10px] py-[6px] rounded-[14px] text-[11px] border border-[#e6e9ee] text-[#767676] font-semibold mt-1",
+            children: tag
+          },
+          index
+        )) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "bg-white border border-gray-300 rounded-2xl w-full mt-5 ", children: [
+      /* @__PURE__ */ jsx("div", { className: "border-b border-gray-200", children: /* @__PURE__ */ jsx("nav", { className: "flex space-x-8", "aria-label": "Tabs", children: tabs.map((tab, index) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setActiveTab(index),
+          className: `${activeTab === index ? "border-black text-black" : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"} whitespace-nowrap py-3 px-6 border-b-2 font-medium text-sm transition-colors duration-200`,
+          children: tab.label
+        },
+        index
+      )) }) }),
+      /* @__PURE__ */ jsx("div", { className: "p-6 h-full overflow-y-auto", children: tabs[activeTab].content })
+    ] })
+  ] });
+};
+
 function ToastProvider({ children }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     children,
@@ -75143,5 +76831,169 @@ const notify = {
   )
 };
 
-export { AddUserGroupsRolesModal, Avatar, AvatarGroup, Badge, Breadcrumbs, Button$1 as Button, Checkbox, CustomCKEditor, CustomDialog, DatePicker, DateRangePicker$1 as DateRangePicker, FileUploadModal, FullScreenLoader, GenericFilter, Input, Modal, MultiSelect, OptionsMenu, PageHeader, PageLayout, Pagination, RadioGroup, SearchBar, Select, Sidebar, Spinner, Textarea, ToastProvider, ToggleSwitch, Tooltip, TreeView, UnifyedCoreButton, WizardModal, adGroupsListSearchApi, axiosDelete, axiosGet, axiosPatch, axiosPost, axiosPut, cookies$1 as cookies, createHttpClient, directoryPermissionsApi, filePermissionsApi, gateWayUrl, gatewayBase, getBaseUrl, getSnapshot, http, localStore, myDriveGatewayBaseV2, notify, provisioningBase, rbacBase, searchRolesApi, sessionStore, userSearchBase };
+const CustomGridToolbar = ({
+  heading = "Data Grid",
+  subheading = "",
+  totalCount = 0,
+  gridRef,
+  onAdd,
+  onFilterOpen,
+  addBtnText = "Add",
+  // Feature toggles
+  showSearch = true,
+  showColumnChooser = true,
+  showFilter = false,
+  showPrint = false,
+  showExcel = false,
+  showPdf = false,
+  showRefresh = false,
+  showAdd = false,
+  // Additional props
+  searchPlaceholder = "Search...",
+  handleRefreshClick = () => {
+  },
+  handleSearchChange = () => {
+  }
+}) => {
+  const handleAction = (action, event) => {
+    const grid = gridRef?.current;
+    console.log("Grid Ref:", gridRef);
+    console.log("the grid", grid?.value);
+    if (!grid) {
+      console.warn("Grid reference is not available");
+      return;
+    }
+    switch (action) {
+      case "ColumnChooser":
+        if (event) {
+          const target = event.currentTarget || event.target;
+          if (target && typeof target.getBoundingClientRect === "function") {
+            const rect = target.getBoundingClientRect();
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+            let x = rect.left - 130;
+            let y = rect.bottom - 80;
+            x = Math.max(10, Math.min(x, viewportWidth - 320));
+            y = Math.max(10, Math.min(y, viewportHeight - 400));
+            grid.columnChooserModule?.openColumnChooser(x, y);
+          } else {
+            const fallbackX = Math.min(1240, window.innerWidth - 320);
+            grid.columnChooserModule?.openColumnChooser(fallbackX, 55);
+          }
+        } else {
+          grid.columnChooserModule?.openColumnChooser();
+        }
+        break;
+      case "Print":
+        grid.print?.();
+        break;
+      case "Excel":
+        grid.excelExport?.({ fileName: `${heading}.xlsx` });
+        break;
+      case "Pdf":
+        grid.pdfExport?.({ fileName: `${heading}.pdf` });
+        break;
+      case "Refresh":
+        handleRefreshClick();
+        break;
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center flex-wrap justify-between w-full px-4 py-2 bg-red border-t border-gray-400/50 rounded-t-2xl shadow", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col ", children: [
+      /* @__PURE__ */ jsxs("div", { className: "text-lg font-semibold text-gray-800", children: [
+        heading,
+        " (",
+        totalCount,
+        ")"
+      ] }),
+      subheading && /* @__PURE__ */ jsx("div", { className: "text-sm font-light", children: subheading })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      showSearch && /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(
+        SearchBar,
+        {
+          placeholder: searchPlaceholder,
+          onDebouncedChange: (searchValue) => {
+            handleSearchChange(searchValue);
+          }
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+          showColumnChooser && /* @__PURE__ */ jsx(
+            UnifyedCoreButton,
+            {
+              icon: Columns3Cog,
+              onClick: (e) => handleAction("ColumnChooser", e),
+              size: "small",
+              ariaLabel: "Column Chooser",
+              category: "secondary"
+            }
+          ),
+          showFilter && /* @__PURE__ */ jsx(
+            UnifyedCoreButton,
+            {
+              icon: ListFilter,
+              onClick: onFilterOpen,
+              size: "small",
+              ariaLabel: "Filters",
+              category: "secondary"
+            }
+          ),
+          showPrint && /* @__PURE__ */ jsx(
+            UnifyedCoreButton,
+            {
+              icon: Printer,
+              onClick: () => handleAction("Print"),
+              ariaLabel: "Print",
+              size: "small",
+              category: "secondary"
+            }
+          ),
+          showExcel && /* @__PURE__ */ jsx(
+            UnifyedCoreButton,
+            {
+              icon: FileSpreadsheet,
+              onClick: () => handleAction("Excel"),
+              ariaLabel: "Excel Download",
+              size: "small",
+              category: "secondary"
+            }
+          ),
+          showPdf && /* @__PURE__ */ jsx(
+            UnifyedCoreButton,
+            {
+              icon: FileText,
+              onClick: () => handleAction("Pdf"),
+              ariaLabel: "Pdf Download",
+              size: "small",
+              category: "secondary"
+            }
+          ),
+          showRefresh && /* @__PURE__ */ jsx(
+            UnifyedCoreButton,
+            {
+              icon: RefreshCcw,
+              onClick: () => handleAction("Refresh"),
+              ariaLabel: "Refresh",
+              size: "small",
+              category: "secondary"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { children: showAdd && onAdd && /* @__PURE__ */ jsx(
+          UnifyedCoreButton,
+          {
+            label: addBtnText,
+            icon: Plus,
+            onClick: onAdd,
+            size: "small"
+          }
+        ) })
+      ] })
+    ] })
+  ] });
+};
+
+export { AddUserGroupsRolesModal, Avatar, AvatarGroup$1 as AvatarGroup, Badge, Breadcrumbs, Button$1 as Button, Checkbox, ConfigRenderFactory, CustomDialog, CustomGridToolbar, DataTableRenderer, DatePicker, DateRangePicker$1 as DateRangePicker, DynamicConfig, DynamicConfig_stories as DynamicConfigStory, FileUploadModal, FullConfigPage, FullScreenLoader, GenericFilter, Input, Modal, MultiSelect, OptionsMenu, PageHeader, PageLayout, Pagination, RadioGroup, SearchBar, SectionRenderer, Select, Sidebar, Spinner, Textarea, ToastProvider, ToggleSwitch, Tooltip, TreeView, UnifyedCoreButton, WizardModal, adGroupsListSearchApi, axiosDelete, axiosGet, axiosPatch, axiosPost, axiosPut, cookies$1 as cookies, createHttpClient, directoryPermissionsApi, filePermissionsApi, gateWayUrl, gatewayBase, getBaseUrl, getComponentForType, getSnapshot, http, localStore, myDriveGatewayBaseV2, notify, provisioningBase, rbacBase, register, renderByType, searchRolesApi, sessionStore, userSearchBase };
 //# sourceMappingURL=unifyedx-storybook-new.es.js.map