@crediblemark/build 0.25.0 → 0.25.2

package/dist/no-external.js

@@ -159,7 +159,7 @@ var init_styles_module2 = __esm({
     "use strict";
     init_react_import();
     init_css_module_data2();
-    styles_module_default2 = { "InputWrapper": "_InputWrapper_1xuyz_1", "InputWrapper--object": "_InputWrapper--object_1xuyz_1", "InputWrapper--array": "_InputWrapper--array_1xuyz_1", "Input-label": "_Input-label_1xuyz_18", "Input-label--noChildren": "_Input-label--noChildren_1xuyz_29", "Input-labelIcon": "_Input-labelIcon_1xuyz_33", "Input-disabledIcon": "_Input-disabledIcon_1xuyz_40", "Input-input": "_Input-input_1xuyz_45", "Input": "_Input_1xuyz_1", "Input--readOnly": "_Input--readOnly_1xuyz_101", "Input-radioGroupItems": "_Input-radioGroupItems_1xuyz_112", "Input-radio": "_Input-radio_1xuyz_112", "Input-radioInner": "_Input-radioInner_1xuyz_129", "Input-radioInput": "_Input-radioInput_1xuyz_174" };
+    styles_module_default2 = { "InputWrapper": "_InputWrapper_rcfsp_1", "InputWrapper--object": "_InputWrapper--object_rcfsp_1", "InputWrapper--array": "_InputWrapper--array_rcfsp_1", "Input-label": "_Input-label_rcfsp_18", "Input-label--noChildren": "_Input-label--noChildren_rcfsp_30", "Input-labelIcon": "_Input-labelIcon_rcfsp_34", "Input-disabledIcon": "_Input-disabledIcon_rcfsp_41", "Input-input": "_Input-input_rcfsp_46", "Input": "_Input_rcfsp_1", "Input--readOnly": "_Input--readOnly_rcfsp_102", "Input-radioGroupItems": "_Input-radioGroupItems_rcfsp_113", "Input-radio": "_Input-radio_rcfsp_113", "Input-radioInner": "_Input-radioInner_rcfsp_130", "Input-radioInput": "_Input-radioInput_rcfsp_175" };
   }
 });
 
@@ -776,46 +776,67 @@ var init_image = __esm({
   }
 });
 
+// node_modules/lucide-react/dist/esm/icons/inbox.js
+var __iconNode25, Inbox;
+var init_inbox = __esm({
+  "node_modules/lucide-react/dist/esm/icons/inbox.js"() {
+    "use strict";
+    init_react_import();
+    init_createLucideIcon();
+    __iconNode25 = [
+      ["polyline", { points: "22 12 16 12 14 15 10 15 8 12 2 12", key: "o97t9d" }],
+      [
+        "path",
+        {
+          d: "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z",
+          key: "oot6mr"
+        }
+      ]
+    ];
+    Inbox = createLucideIcon("inbox", __iconNode25);
+  }
+});
+
 // node_modules/lucide-react/dist/esm/icons/info.js
-var __iconNode25, Info;
+var __iconNode26, Info;
 var init_info = __esm({
   "node_modules/lucide-react/dist/esm/icons/info.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode25 = [
+    __iconNode26 = [
       ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
       ["path", { d: "M12 16v-4", key: "1dtifu" }],
       ["path", { d: "M12 8h.01", key: "e9boi3" }]
     ];
-    Info = createLucideIcon("info", __iconNode25);
+    Info = createLucideIcon("info", __iconNode26);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/italic.js
-var __iconNode26, Italic;
+var __iconNode27, Italic;
 var init_italic = __esm({
   "node_modules/lucide-react/dist/esm/icons/italic.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode26 = [
+    __iconNode27 = [
       ["line", { x1: "19", x2: "10", y1: "4", y2: "4", key: "15jd3p" }],
       ["line", { x1: "14", x2: "5", y1: "20", y2: "20", key: "bu0au3" }],
       ["line", { x1: "15", x2: "9", y1: "4", y2: "20", key: "uljnxc" }]
     ];
-    Italic = createLucideIcon("italic", __iconNode26);
+    Italic = createLucideIcon("italic", __iconNode27);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/layers.js
-var __iconNode27, Layers;
+var __iconNode28, Layers;
 var init_layers = __esm({
   "node_modules/lucide-react/dist/esm/icons/layers.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode27 = [
+    __iconNode28 = [
       [
         "path",
         {
@@ -838,83 +859,83 @@ var init_layers = __esm({
         }
       ]
     ];
-    Layers = createLucideIcon("layers", __iconNode27);
+    Layers = createLucideIcon("layers", __iconNode28);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/layout-dashboard.js
-var __iconNode28, LayoutDashboard;
+var __iconNode29, LayoutDashboard;
 var init_layout_dashboard = __esm({
   "node_modules/lucide-react/dist/esm/icons/layout-dashboard.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode28 = [
+    __iconNode29 = [
       ["rect", { width: "7", height: "9", x: "3", y: "3", rx: "1", key: "10lvy0" }],
       ["rect", { width: "7", height: "5", x: "14", y: "3", rx: "1", key: "16une8" }],
       ["rect", { width: "7", height: "9", x: "14", y: "12", rx: "1", key: "1hutg5" }],
       ["rect", { width: "7", height: "5", x: "3", y: "16", rx: "1", key: "ldoo1y" }]
     ];
-    LayoutDashboard = createLucideIcon("layout-dashboard", __iconNode28);
+    LayoutDashboard = createLucideIcon("layout-dashboard", __iconNode29);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/layout-grid.js
-var __iconNode29, LayoutGrid;
+var __iconNode30, LayoutGrid;
 var init_layout_grid = __esm({
   "node_modules/lucide-react/dist/esm/icons/layout-grid.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode29 = [
+    __iconNode30 = [
       ["rect", { width: "7", height: "7", x: "3", y: "3", rx: "1", key: "1g98yp" }],
       ["rect", { width: "7", height: "7", x: "14", y: "3", rx: "1", key: "6d4xhi" }],
       ["rect", { width: "7", height: "7", x: "14", y: "14", rx: "1", key: "nxv5o0" }],
       ["rect", { width: "7", height: "7", x: "3", y: "14", rx: "1", key: "1bb6yr" }]
     ];
-    LayoutGrid = createLucideIcon("layout-grid", __iconNode29);
+    LayoutGrid = createLucideIcon("layout-grid", __iconNode30);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/layout-template.js
-var __iconNode30, LayoutTemplate;
+var __iconNode31, LayoutTemplate;
 var init_layout_template = __esm({
   "node_modules/lucide-react/dist/esm/icons/layout-template.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode30 = [
+    __iconNode31 = [
       ["rect", { width: "18", height: "7", x: "3", y: "3", rx: "1", key: "f1a2em" }],
       ["rect", { width: "9", height: "7", x: "3", y: "14", rx: "1", key: "jqznyg" }],
       ["rect", { width: "5", height: "7", x: "16", y: "14", rx: "1", key: "q5h2i8" }]
     ];
-    LayoutTemplate = createLucideIcon("layout-template", __iconNode30);
+    LayoutTemplate = createLucideIcon("layout-template", __iconNode31);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/link.js
-var __iconNode31, Link;
+var __iconNode32, Link;
 var init_link = __esm({
   "node_modules/lucide-react/dist/esm/icons/link.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode31 = [
+    __iconNode32 = [
       ["path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71", key: "1cjeqo" }],
       ["path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71", key: "19qd67" }]
     ];
-    Link = createLucideIcon("link", __iconNode31);
+    Link = createLucideIcon("link", __iconNode32);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/list-ordered.js
-var __iconNode32, ListOrdered;
+var __iconNode33, ListOrdered;
 var init_list_ordered = __esm({
   "node_modules/lucide-react/dist/esm/icons/list-ordered.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode32 = [
+    __iconNode33 = [
       ["path", { d: "M11 5h10", key: "1cz7ny" }],
       ["path", { d: "M11 12h10", key: "1438ji" }],
       ["path", { d: "M11 19h10", key: "11t30w" }],
@@ -922,18 +943,18 @@ var init_list_ordered = __esm({
       ["path", { d: "M4 9h2", key: "r1h2o0" }],
       ["path", { d: "M6.5 20H3.4c0-1 2.6-1.925 2.6-3.5a1.5 1.5 0 0 0-2.6-1.02", key: "xtkcd5" }]
     ];
-    ListOrdered = createLucideIcon("list-ordered", __iconNode32);
+    ListOrdered = createLucideIcon("list-ordered", __iconNode33);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/list.js
-var __iconNode33, List;
+var __iconNode34, List;
 var init_list = __esm({
   "node_modules/lucide-react/dist/esm/icons/list.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode33 = [
+    __iconNode34 = [
       ["path", { d: "M3 5h.01", key: "18ugdj" }],
       ["path", { d: "M3 12h.01", key: "nlz23k" }],
       ["path", { d: "M3 19h.01", key: "noohij" }],
@@ -941,65 +962,65 @@ var init_list = __esm({
       ["path", { d: "M8 12h13", key: "1za7za" }],
       ["path", { d: "M8 19h13", key: "m83p4d" }]
     ];
-    List = createLucideIcon("list", __iconNode33);
+    List = createLucideIcon("list", __iconNode34);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/lock-open.js
-var __iconNode34, LockOpen;
+var __iconNode35, LockOpen;
 var init_lock_open = __esm({
   "node_modules/lucide-react/dist/esm/icons/lock-open.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode34 = [
+    __iconNode35 = [
       ["rect", { width: "18", height: "11", x: "3", y: "11", rx: "2", ry: "2", key: "1w4ew1" }],
       ["path", { d: "M7 11V7a5 5 0 0 1 9.9-1", key: "1mm8w8" }]
     ];
-    LockOpen = createLucideIcon("lock-open", __iconNode34);
+    LockOpen = createLucideIcon("lock-open", __iconNode35);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/lock.js
-var __iconNode35, Lock;
+var __iconNode36, Lock;
 var init_lock = __esm({
   "node_modules/lucide-react/dist/esm/icons/lock.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode35 = [
+    __iconNode36 = [
       ["rect", { width: "18", height: "11", x: "3", y: "11", rx: "2", ry: "2", key: "1w4ew1" }],
       ["path", { d: "M7 11V7a5 5 0 0 1 10 0v4", key: "fwvmzm" }]
     ];
-    Lock = createLucideIcon("lock", __iconNode35);
+    Lock = createLucideIcon("lock", __iconNode36);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/maximize-2.js
-var __iconNode36, Maximize2;
+var __iconNode37, Maximize2;
 var init_maximize_2 = __esm({
   "node_modules/lucide-react/dist/esm/icons/maximize-2.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode36 = [
+    __iconNode37 = [
       ["path", { d: "M15 3h6v6", key: "1q9fwt" }],
       ["path", { d: "m21 3-7 7", key: "1l2asr" }],
       ["path", { d: "m3 21 7-7", key: "tjx5ai" }],
       ["path", { d: "M9 21H3v-6", key: "wtvkvv" }]
     ];
-    Maximize2 = createLucideIcon("maximize-2", __iconNode36);
+    Maximize2 = createLucideIcon("maximize-2", __iconNode37);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/megaphone.js
-var __iconNode37, Megaphone;
+var __iconNode38, Megaphone;
 var init_megaphone = __esm({
   "node_modules/lucide-react/dist/esm/icons/megaphone.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode37 = [
+    __iconNode38 = [
       [
         "path",
         {
@@ -1010,63 +1031,63 @@ var init_megaphone = __esm({
       ["path", { d: "M6 14a12 12 0 0 0 2.4 7.2 2 2 0 0 0 3.2-2.4A8 8 0 0 1 10 14", key: "1853fq" }],
       ["path", { d: "M8 6v8", key: "15ugcq" }]
     ];
-    Megaphone = createLucideIcon("megaphone", __iconNode37);
+    Megaphone = createLucideIcon("megaphone", __iconNode38);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/minimize-2.js
-var __iconNode38, Minimize2;
+var __iconNode39, Minimize2;
 var init_minimize_2 = __esm({
   "node_modules/lucide-react/dist/esm/icons/minimize-2.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode38 = [
+    __iconNode39 = [
       ["path", { d: "m14 10 7-7", key: "oa77jy" }],
       ["path", { d: "M20 10h-6V4", key: "mjg0md" }],
       ["path", { d: "m3 21 7-7", key: "tjx5ai" }],
       ["path", { d: "M4 14h6v6", key: "rmj7iw" }]
     ];
-    Minimize2 = createLucideIcon("minimize-2", __iconNode38);
+    Minimize2 = createLucideIcon("minimize-2", __iconNode39);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/minus.js
-var __iconNode39, Minus;
+var __iconNode40, Minus;
 var init_minus = __esm({
   "node_modules/lucide-react/dist/esm/icons/minus.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode39 = [["path", { d: "M5 12h14", key: "1ays0h" }]];
-    Minus = createLucideIcon("minus", __iconNode39);
+    __iconNode40 = [["path", { d: "M5 12h14", key: "1ays0h" }]];
+    Minus = createLucideIcon("minus", __iconNode40);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/monitor.js
-var __iconNode40, Monitor;
+var __iconNode41, Monitor;
 var init_monitor = __esm({
   "node_modules/lucide-react/dist/esm/icons/monitor.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode40 = [
+    __iconNode41 = [
       ["rect", { width: "20", height: "14", x: "2", y: "3", rx: "2", key: "48i651" }],
       ["line", { x1: "8", x2: "16", y1: "21", y2: "21", key: "1svkeh" }],
       ["line", { x1: "12", x2: "12", y1: "17", y2: "21", key: "vw1qmm" }]
     ];
-    Monitor = createLucideIcon("monitor", __iconNode40);
+    Monitor = createLucideIcon("monitor", __iconNode41);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/moon.js
-var __iconNode41, Moon;
+var __iconNode42, Moon;
 var init_moon = __esm({
   "node_modules/lucide-react/dist/esm/icons/moon.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode41 = [
+    __iconNode42 = [
       [
         "path",
         {
@@ -1075,63 +1096,63 @@ var init_moon = __esm({
         }
       ]
     ];
-    Moon = createLucideIcon("moon", __iconNode41);
+    Moon = createLucideIcon("moon", __iconNode42);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/panel-left.js
-var __iconNode42, PanelLeft;
+var __iconNode43, PanelLeft;
 var init_panel_left = __esm({
   "node_modules/lucide-react/dist/esm/icons/panel-left.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode42 = [
+    __iconNode43 = [
       ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
       ["path", { d: "M9 3v18", key: "fh3hqa" }]
     ];
-    PanelLeft = createLucideIcon("panel-left", __iconNode42);
+    PanelLeft = createLucideIcon("panel-left", __iconNode43);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/panel-right.js
-var __iconNode43, PanelRight;
+var __iconNode44, PanelRight;
 var init_panel_right = __esm({
   "node_modules/lucide-react/dist/esm/icons/panel-right.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode43 = [
+    __iconNode44 = [
       ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
       ["path", { d: "M15 3v18", key: "14nvp0" }]
     ];
-    PanelRight = createLucideIcon("panel-right", __iconNode43);
+    PanelRight = createLucideIcon("panel-right", __iconNode44);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/plus.js
-var __iconNode44, Plus;
+var __iconNode45, Plus;
 var init_plus = __esm({
   "node_modules/lucide-react/dist/esm/icons/plus.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode44 = [
+    __iconNode45 = [
       ["path", { d: "M5 12h14", key: "1ays0h" }],
       ["path", { d: "M12 5v14", key: "s699le" }]
     ];
-    Plus = createLucideIcon("plus", __iconNode44);
+    Plus = createLucideIcon("plus", __iconNode45);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/quote.js
-var __iconNode45, Quote;
+var __iconNode46, Quote;
 var init_quote = __esm({
   "node_modules/lucide-react/dist/esm/icons/quote.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode45 = [
+    __iconNode46 = [
       [
         "path",
         {
@@ -1147,65 +1168,65 @@ var init_quote = __esm({
         }
       ]
     ];
-    Quote = createLucideIcon("quote", __iconNode45);
+    Quote = createLucideIcon("quote", __iconNode46);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/rectangle-ellipsis.js
-var __iconNode46, RectangleEllipsis;
+var __iconNode47, RectangleEllipsis;
 var init_rectangle_ellipsis = __esm({
   "node_modules/lucide-react/dist/esm/icons/rectangle-ellipsis.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode46 = [
+    __iconNode47 = [
       ["rect", { width: "20", height: "12", x: "2", y: "6", rx: "2", key: "9lu3g6" }],
       ["path", { d: "M12 12h.01", key: "1mp3jc" }],
       ["path", { d: "M17 12h.01", key: "1m0b6t" }],
       ["path", { d: "M7 12h.01", key: "eqddd0" }]
     ];
-    RectangleEllipsis = createLucideIcon("rectangle-ellipsis", __iconNode46);
+    RectangleEllipsis = createLucideIcon("rectangle-ellipsis", __iconNode47);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/redo-2.js
-var __iconNode47, Redo2;
+var __iconNode48, Redo2;
 var init_redo_2 = __esm({
   "node_modules/lucide-react/dist/esm/icons/redo-2.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode47 = [
+    __iconNode48 = [
       ["path", { d: "m15 14 5-5-5-5", key: "12vg1m" }],
       ["path", { d: "M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13", key: "6uklza" }]
     ];
-    Redo2 = createLucideIcon("redo-2", __iconNode47);
+    Redo2 = createLucideIcon("redo-2", __iconNode48);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/search.js
-var __iconNode48, Search;
+var __iconNode49, Search;
 var init_search = __esm({
   "node_modules/lucide-react/dist/esm/icons/search.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode48 = [
+    __iconNode49 = [
       ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
       ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
     ];
-    Search = createLucideIcon("search", __iconNode48);
+    Search = createLucideIcon("search", __iconNode49);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/settings.js
-var __iconNode49, Settings;
+var __iconNode50, Settings;
 var init_settings = __esm({
   "node_modules/lucide-react/dist/esm/icons/settings.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode49 = [
+    __iconNode50 = [
       [
         "path",
         {
@@ -1215,18 +1236,18 @@ var init_settings = __esm({
       ],
       ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
     ];
-    Settings = createLucideIcon("settings", __iconNode49);
+    Settings = createLucideIcon("settings", __iconNode50);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/shapes.js
-var __iconNode50, Shapes;
+var __iconNode51, Shapes;
 var init_shapes = __esm({
   "node_modules/lucide-react/dist/esm/icons/shapes.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode50 = [
+    __iconNode51 = [
       [
         "path",
         {
@@ -1237,18 +1258,18 @@ var init_shapes = __esm({
       ["rect", { x: "3", y: "14", width: "7", height: "7", rx: "1", key: "1bkyp8" }],
       ["circle", { cx: "17.5", cy: "17.5", r: "3.5", key: "w3z12y" }]
     ];
-    Shapes = createLucideIcon("shapes", __iconNode50);
+    Shapes = createLucideIcon("shapes", __iconNode51);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/sliders-horizontal.js
-var __iconNode51, SlidersHorizontal;
+var __iconNode52, SlidersHorizontal;
 var init_sliders_horizontal = __esm({
   "node_modules/lucide-react/dist/esm/icons/sliders-horizontal.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode51 = [
+    __iconNode52 = [
       ["path", { d: "M10 5H3", key: "1qgfaw" }],
       ["path", { d: "M12 19H3", key: "yhmn1j" }],
       ["path", { d: "M14 3v4", key: "1sua03" }],
@@ -1259,65 +1280,65 @@ var init_sliders_horizontal = __esm({
       ["path", { d: "M8 10v4", key: "tgpxqk" }],
       ["path", { d: "M8 12H3", key: "a7s4jb" }]
     ];
-    SlidersHorizontal = createLucideIcon("sliders-horizontal", __iconNode51);
+    SlidersHorizontal = createLucideIcon("sliders-horizontal", __iconNode52);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/smartphone.js
-var __iconNode52, Smartphone;
+var __iconNode53, Smartphone;
 var init_smartphone = __esm({
   "node_modules/lucide-react/dist/esm/icons/smartphone.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode52 = [
+    __iconNode53 = [
       ["rect", { width: "14", height: "20", x: "5", y: "2", rx: "2", ry: "2", key: "1yt0o3" }],
       ["path", { d: "M12 18h.01", key: "mhygvu" }]
     ];
-    Smartphone = createLucideIcon("smartphone", __iconNode52);
+    Smartphone = createLucideIcon("smartphone", __iconNode53);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/square-code.js
-var __iconNode53, SquareCode;
+var __iconNode54, SquareCode;
 var init_square_code = __esm({
   "node_modules/lucide-react/dist/esm/icons/square-code.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode53 = [
+    __iconNode54 = [
       ["path", { d: "m10 9-3 3 3 3", key: "1oro0q" }],
       ["path", { d: "m14 15 3-3-3-3", key: "bz13h7" }],
       ["rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", key: "h1oib" }]
     ];
-    SquareCode = createLucideIcon("square-code", __iconNode53);
+    SquareCode = createLucideIcon("square-code", __iconNode54);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/strikethrough.js
-var __iconNode54, Strikethrough;
+var __iconNode55, Strikethrough;
 var init_strikethrough = __esm({
   "node_modules/lucide-react/dist/esm/icons/strikethrough.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode54 = [
+    __iconNode55 = [
       ["path", { d: "M16 4H9a3 3 0 0 0-2.83 4", key: "43sutm" }],
       ["path", { d: "M14 12a4 4 0 0 1 0 8H6", key: "nlfj13" }],
       ["line", { x1: "4", x2: "20", y1: "12", y2: "12", key: "1e0a9i" }]
     ];
-    Strikethrough = createLucideIcon("strikethrough", __iconNode54);
+    Strikethrough = createLucideIcon("strikethrough", __iconNode55);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/sun.js
-var __iconNode55, Sun;
+var __iconNode56, Sun;
 var init_sun = __esm({
   "node_modules/lucide-react/dist/esm/icons/sun.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode55 = [
+    __iconNode56 = [
       ["circle", { cx: "12", cy: "12", r: "4", key: "4exip2" }],
       ["path", { d: "M12 2v2", key: "tus03m" }],
       ["path", { d: "M12 20v2", key: "1lh1kg" }],
@@ -1328,190 +1349,190 @@ var init_sun = __esm({
       ["path", { d: "m6.34 17.66-1.41 1.41", key: "1m8zz5" }],
       ["path", { d: "m19.07 4.93-1.41 1.41", key: "1shlcs" }]
     ];
-    Sun = createLucideIcon("sun", __iconNode55);
+    Sun = createLucideIcon("sun", __iconNode56);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/tablet.js
-var __iconNode56, Tablet;
+var __iconNode57, Tablet;
 var init_tablet = __esm({
   "node_modules/lucide-react/dist/esm/icons/tablet.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode56 = [
+    __iconNode57 = [
       ["rect", { width: "16", height: "20", x: "4", y: "2", rx: "2", ry: "2", key: "76otgf" }],
       ["line", { x1: "12", x2: "12.01", y1: "18", y2: "18", key: "1dp563" }]
     ];
-    Tablet = createLucideIcon("tablet", __iconNode56);
+    Tablet = createLucideIcon("tablet", __iconNode57);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/text-align-center.js
-var __iconNode57, TextAlignCenter;
+var __iconNode58, TextAlignCenter;
 var init_text_align_center = __esm({
   "node_modules/lucide-react/dist/esm/icons/text-align-center.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode57 = [
+    __iconNode58 = [
       ["path", { d: "M21 5H3", key: "1fi0y6" }],
       ["path", { d: "M17 12H7", key: "16if0g" }],
       ["path", { d: "M19 19H5", key: "vjpgq2" }]
     ];
-    TextAlignCenter = createLucideIcon("text-align-center", __iconNode57);
+    TextAlignCenter = createLucideIcon("text-align-center", __iconNode58);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/text-align-end.js
-var __iconNode58, TextAlignEnd;
+var __iconNode59, TextAlignEnd;
 var init_text_align_end = __esm({
   "node_modules/lucide-react/dist/esm/icons/text-align-end.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode58 = [
+    __iconNode59 = [
       ["path", { d: "M21 5H3", key: "1fi0y6" }],
       ["path", { d: "M21 12H9", key: "dn1m92" }],
       ["path", { d: "M21 19H7", key: "4cu937" }]
     ];
-    TextAlignEnd = createLucideIcon("text-align-end", __iconNode58);
+    TextAlignEnd = createLucideIcon("text-align-end", __iconNode59);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/text-align-justify.js
-var __iconNode59, TextAlignJustify;
+var __iconNode60, TextAlignJustify;
 var init_text_align_justify = __esm({
   "node_modules/lucide-react/dist/esm/icons/text-align-justify.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode59 = [
+    __iconNode60 = [
       ["path", { d: "M3 5h18", key: "1u36vt" }],
       ["path", { d: "M3 12h18", key: "1i2n21" }],
       ["path", { d: "M3 19h18", key: "awlh7x" }]
     ];
-    TextAlignJustify = createLucideIcon("text-align-justify", __iconNode59);
+    TextAlignJustify = createLucideIcon("text-align-justify", __iconNode60);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/text-align-start.js
-var __iconNode60, TextAlignStart;
+var __iconNode61, TextAlignStart;
 var init_text_align_start = __esm({
   "node_modules/lucide-react/dist/esm/icons/text-align-start.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode60 = [
+    __iconNode61 = [
       ["path", { d: "M21 5H3", key: "1fi0y6" }],
       ["path", { d: "M15 12H3", key: "6jk70r" }],
       ["path", { d: "M17 19H3", key: "z6ezky" }]
     ];
-    TextAlignStart = createLucideIcon("text-align-start", __iconNode60);
+    TextAlignStart = createLucideIcon("text-align-start", __iconNode61);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/toy-brick.js
-var __iconNode61, ToyBrick;
+var __iconNode62, ToyBrick;
 var init_toy_brick = __esm({
   "node_modules/lucide-react/dist/esm/icons/toy-brick.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode61 = [
+    __iconNode62 = [
       ["rect", { width: "18", height: "12", x: "3", y: "8", rx: "1", key: "158fvp" }],
       ["path", { d: "M10 8V5c0-.6-.4-1-1-1H6a1 1 0 0 0-1 1v3", key: "s0042v" }],
       ["path", { d: "M19 8V5c0-.6-.4-1-1-1h-3a1 1 0 0 0-1 1v3", key: "9wmeh2" }]
     ];
-    ToyBrick = createLucideIcon("toy-brick", __iconNode61);
+    ToyBrick = createLucideIcon("toy-brick", __iconNode62);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/trash.js
-var __iconNode62, Trash;
+var __iconNode63, Trash;
 var init_trash = __esm({
   "node_modules/lucide-react/dist/esm/icons/trash.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode62 = [
+    __iconNode63 = [
       ["path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6", key: "miytrc" }],
       ["path", { d: "M3 6h18", key: "d0wm0j" }],
       ["path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2", key: "e791ji" }]
     ];
-    Trash = createLucideIcon("trash", __iconNode62);
+    Trash = createLucideIcon("trash", __iconNode63);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/type.js
-var __iconNode63, Type;
+var __iconNode64, Type;
 var init_type = __esm({
   "node_modules/lucide-react/dist/esm/icons/type.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode63 = [
+    __iconNode64 = [
       ["path", { d: "M12 4v16", key: "1654pz" }],
       ["path", { d: "M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2", key: "e0r10z" }],
       ["path", { d: "M9 20h6", key: "s66wpe" }]
     ];
-    Type = createLucideIcon("type", __iconNode63);
+    Type = createLucideIcon("type", __iconNode64);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/underline.js
-var __iconNode64, Underline;
+var __iconNode65, Underline;
 var init_underline = __esm({
   "node_modules/lucide-react/dist/esm/icons/underline.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode64 = [
+    __iconNode65 = [
       ["path", { d: "M6 4v6a6 6 0 0 0 12 0V4", key: "9kb039" }],
       ["line", { x1: "4", x2: "20", y1: "20", y2: "20", key: "nun2al" }]
     ];
-    Underline = createLucideIcon("underline", __iconNode64);
+    Underline = createLucideIcon("underline", __iconNode65);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/undo-2.js
-var __iconNode65, Undo2;
+var __iconNode66, Undo2;
 var init_undo_2 = __esm({
   "node_modules/lucide-react/dist/esm/icons/undo-2.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode65 = [
+    __iconNode66 = [
       ["path", { d: "M9 14 4 9l5-5", key: "102s5s" }],
       ["path", { d: "M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11", key: "f3b9sd" }]
     ];
-    Undo2 = createLucideIcon("undo-2", __iconNode65);
+    Undo2 = createLucideIcon("undo-2", __iconNode66);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/x.js
-var __iconNode66, X;
+var __iconNode67, X;
 var init_x = __esm({
   "node_modules/lucide-react/dist/esm/icons/x.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode66 = [
+    __iconNode67 = [
       ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
       ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
     ];
-    X = createLucideIcon("x", __iconNode66);
+    X = createLucideIcon("x", __iconNode67);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/zap.js
-var __iconNode67, Zap;
+var __iconNode68, Zap;
 var init_zap = __esm({
   "node_modules/lucide-react/dist/esm/icons/zap.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode67 = [
+    __iconNode68 = [
       [
         "path",
         {
@@ -1520,40 +1541,40 @@ var init_zap = __esm({
         }
       ]
     ];
-    Zap = createLucideIcon("zap", __iconNode67);
+    Zap = createLucideIcon("zap", __iconNode68);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/zoom-in.js
-var __iconNode68, ZoomIn;
+var __iconNode69, ZoomIn;
 var init_zoom_in = __esm({
   "node_modules/lucide-react/dist/esm/icons/zoom-in.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode68 = [
+    __iconNode69 = [
       ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }],
       ["line", { x1: "21", x2: "16.65", y1: "21", y2: "16.65", key: "13gj7c" }],
       ["line", { x1: "11", x2: "11", y1: "8", y2: "14", key: "1vmskp" }],
       ["line", { x1: "8", x2: "14", y1: "11", y2: "11", key: "durymu" }]
     ];
-    ZoomIn = createLucideIcon("zoom-in", __iconNode68);
+    ZoomIn = createLucideIcon("zoom-in", __iconNode69);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/zoom-out.js
-var __iconNode69, ZoomOut;
+var __iconNode70, ZoomOut;
 var init_zoom_out = __esm({
   "node_modules/lucide-react/dist/esm/icons/zoom-out.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode69 = [
+    __iconNode70 = [
       ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }],
       ["line", { x1: "21", x2: "16.65", y1: "21", y2: "16.65", key: "13gj7c" }],
       ["line", { x1: "8", x2: "14", y1: "11", y2: "11", key: "durymu" }]
     ];
-    ZoomOut = createLucideIcon("zoom-out", __iconNode69);
+    ZoomOut = createLucideIcon("zoom-out", __iconNode70);
   }
 });
 
@@ -1595,6 +1616,7 @@ var init_lucide_react = __esm({
     init_heading_6();
     init_heading();
     init_image();
+    init_inbox();
     init_info();
     init_italic();
     init_layout_dashboard();
@@ -3849,7 +3871,7 @@ var init_FieldLabel = __esm({
       return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(El, { className, children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `${getClassName2("label")} ${!children ? styles_module_default2["Input-label--noChildren"] : ""}`, children: [
           icon ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: getClassName2("labelIcon"), children: icon }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, {}),
-          label,
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: getClassName2("labelText"), children: label }),
           readOnly && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: getClassName2("disabledIcon"), title: "Read-only", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Lock, { size: "12" }) })
         ] }),
         children
@@ -5124,7 +5146,7 @@ var init_DefaultField = __esm({
               id,
               min: field.type === "number" ? field.min : void 0,
               max: field.type === "number" ? field.max : void 0,
-              placeholder: field.type === "text" || field.type === "number" ? field.placeholder : void 0,
+              placeholder: field.type === "text" || field.type === "number" ? field.placeholder || label || name : void 0,
               step: field.type === "number" ? field.step : void 0
             }
           )
@@ -6979,7 +7001,7 @@ var init_styles_module11 = __esm({
     "use strict";
     init_react_import();
     init_css_module_data13();
-    styles_module_default11 = { "ArrayField": "_ArrayField_19wby_5", "ArrayField--isDraggingFrom": "_ArrayField--isDraggingFrom_19wby_13", "ArrayField-addButton": "_ArrayField-addButton_19wby_18", "ArrayField--hasItems": "_ArrayField--hasItems_19wby_33", "ArrayField-inner": "_ArrayField-inner_19wby_59", "ArrayFieldItem": "_ArrayFieldItem_19wby_67", "ArrayFieldItem--isDragging": "_ArrayFieldItem--isDragging_19wby_78", "ArrayFieldItem--isExpanded": "_ArrayFieldItem--isExpanded_19wby_82", "ArrayFieldItem-summary": "_ArrayFieldItem-summary_19wby_97", "ArrayFieldItem--noFields": "_ArrayFieldItem--noFields_19wby_122", "ArrayField--addDisabled": "_ArrayField--addDisabled_19wby_131", "ArrayFieldItem-body": "_ArrayFieldItem-body_19wby_170", "ArrayFieldItem-fieldset": "_ArrayFieldItem-fieldset_19wby_179", "ArrayFieldItem-rhs": "_ArrayFieldItem-rhs_19wby_187", "ArrayFieldItem-actions": "_ArrayFieldItem-actions_19wby_193" };
+    styles_module_default11 = { "ArrayField": "_ArrayField_rvhj3_5", "ArrayField--isDraggingFrom": "_ArrayField--isDraggingFrom_rvhj3_13", "ArrayField-addButton": "_ArrayField-addButton_rvhj3_18", "ArrayField--hasItems": "_ArrayField--hasItems_rvhj3_33", "ArrayField-inner": "_ArrayField-inner_rvhj3_59", "ArrayFieldItem": "_ArrayFieldItem_rvhj3_67", "ArrayFieldItem--isDragging": "_ArrayFieldItem--isDragging_rvhj3_78", "ArrayFieldItem--isExpanded": "_ArrayFieldItem--isExpanded_rvhj3_82", "ArrayFieldItem-summary": "_ArrayFieldItem-summary_rvhj3_97", "ArrayFieldItem--noFields": "_ArrayFieldItem--noFields_rvhj3_122", "ArrayField--addDisabled": "_ArrayField--addDisabled_rvhj3_131", "ArrayFieldItem-body": "_ArrayFieldItem-body_rvhj3_170", "ArrayFieldItem-fieldset": "_ArrayFieldItem-fieldset_rvhj3_179", "ArrayFieldItem-rhs": "_ArrayFieldItem-rhs_rvhj3_187", "ArrayFieldItem-actions": "_ArrayFieldItem-actions_rvhj3_193" };
   }
 });
 
@@ -8309,11 +8331,11 @@ function RichTextRender({
 }) {
   const { tiptap = {}, options } = field;
   const { extensions = [] } = tiptap;
-  const loadedExtensions = (0, import_react67.useMemo)(
+  const loadedExtensions = (0, import_react66.useMemo)(
     () => [CredBuildRichText.configure(options), ...extensions],
     [extensions, options]
   );
-  const normalized = (0, import_react67.useMemo)(() => {
+  const normalized = (0, import_react66.useMemo)(() => {
     if (typeof content === "object" && content?.type === "doc") {
       return content;
     }
@@ -8331,18 +8353,18 @@ function RichTextRender({
     }
     return { type: "doc", content: [] };
   }, [content, loadedExtensions]);
-  const html = (0, import_react67.useMemo)(() => {
+  const html = (0, import_react66.useMemo)(() => {
     return (0, import_html.generateHTML)(normalized, loadedExtensions);
   }, [normalized, loadedExtensions]);
   return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: getClassName24(), children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "rich-text", dangerouslySetInnerHTML: { __html: html } }) });
 }
-var import_html, import_react67, import_jsx_runtime63, getClassName24;
+var import_html, import_react66, import_jsx_runtime63, getClassName24;
 var init_Render = __esm({
   "components/RichTextEditor/components/Render.tsx"() {
     "use strict";
     init_react_import();
     import_html = require("@tiptap/html");
-    import_react67 = require("react");
+    import_react66 = require("react");
     init_get_class_name_factory();
     init_styles_module10();
     init_extension();
@@ -8465,7 +8487,8 @@ var SliderField = ({
   step = 1,
   unit = "px",
   defaultValue = 0,
-  useUnits = true
+  useUnits = true,
+  style = {}
 }) => {
   const parseValue = (val) => {
     if (typeof val === "number") return val;
@@ -8496,7 +8519,7 @@ var SliderField = ({
     const newUnit = e.target.value;
     onChange(`${numericValue}${newUnit}`);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { style: { padding: "8px 0" }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { style: { padding: "0", ...style }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("style", { dangerouslySetInnerHTML: { __html: `
                 .cb-slider-input {
                     -webkit-appearance: none;
@@ -8601,7 +8624,7 @@ var SliderField = ({
 
 // components/AutoField/fields/ResponsiveSliderField/index.tsx
 init_react_import();
-var import_react53 = require("react");
+init_store2();
 var import_jsx_runtime57 = require("react/jsx-runtime");
 var DesktopIcon = () => /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
   /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", ry: "2" }),
@@ -8626,7 +8649,39 @@ var ResponsiveSliderField = ({
   step = 1,
   defaultValue = 0
 }) => {
-  const [mode, setMode] = (0, import_react53.useState)("desktop");
+  const setUi = useAppStore((s) => s.setUi);
+  const viewportsState = useAppStore((s) => s.state.ui.viewports);
+  const zoomConfig = useAppStore((s) => s.zoomConfig);
+  const setZoomConfig = useAppStore((s) => s.setZoomConfig);
+  const viewportConfigOptions = useAppStore((s) => s.viewports);
+  const getModeFromWidth = (width) => {
+    if (width === "100%") return "desktop";
+    const w = typeof width === "string" ? parseInt(width) : width;
+    if (w <= 480) return "mobile";
+    if (w <= 900) return "tablet";
+    return "desktop";
+  };
+  const mode = getModeFromWidth(viewportsState.current.width);
+  const changeGlobalViewport = (targetMode) => {
+    const targetIcon = targetMode === "mobile" ? "Smartphone" : targetMode === "tablet" ? "Tablet" : "Monitor";
+    const matched = viewportConfigOptions.find((v) => v.icon === targetIcon) || viewportConfigOptions.find((v) => {
+      if (targetMode === "mobile") return v.width !== "100%" && parseInt(String(v.width)) <= 480;
+      if (targetMode === "tablet") return v.width !== "100%" && parseInt(String(v.width)) > 480 && parseInt(String(v.width)) <= 900;
+      return v.width === "100%" || parseInt(String(v.width)) > 900;
+    }) || viewportConfigOptions[0];
+    const isFullWidth = matched.width === "100%";
+    const uiViewport = {
+      ...matched,
+      height: matched.height || "auto",
+      zoom: isFullWidth ? 1 : zoomConfig.zoom
+    };
+    if (isFullWidth) {
+      setZoomConfig({ ...zoomConfig, zoom: 1 });
+    }
+    setUi({
+      viewports: { ...viewportsState, current: uiViewport }
+    });
+  };
   const getCurrentValue = () => {
     const val = value?.[mode];
     if (val !== void 0 && val !== null) {
@@ -8654,34 +8709,37 @@ var ResponsiveSliderField = ({
       [mode]: newVal
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "2px" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "0px" }, children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("label", { style: {
-        fontSize: "10px",
-        fontWeight: 500,
-        color: "var(--cb-silver-muted, #71717a)",
-        display: "flex",
-        alignItems: "center",
-        gap: "4px"
-      }, children: [
-        label,
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("span", { style: { fontSize: "9px", opacity: 0.5, fontWeight: "400" }, children: [
-          "(",
-          mode,
-          ")"
-        ] })
-      ] }),
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "2px", width: "100%" }, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "2px" }, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("label", { style: {
+      fontSize: "10px",
+      fontWeight: 600,
+      color: "var(--cb-silver-muted, #71717a)",
+      display: "flex",
+      alignItems: "center",
+      gap: "4px",
+      textTransform: "uppercase",
+      letterSpacing: "0.05em"
+    }, children: [
+      label,
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("span", { style: { fontSize: "9px", opacity: 0.5, fontWeight: "400" }, children: [
+        "(",
+        mode,
+        ")"
+      ] })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px", width: "100%" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { style: {
         display: "flex",
         backgroundColor: "var(--cb-bg-panel, #f1f5f9)",
         borderRadius: "4px",
         padding: "1px",
-        border: "1px solid var(--cb-border, #e2e8f0)"
+        border: "1px solid var(--cb-border, #e2e8f0)",
+        flexShrink: 0
       }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
           "button",
           {
-            onClick: () => setMode("desktop"),
+            onClick: () => changeGlobalViewport("desktop"),
             style: {
               padding: "2px 5px",
               border: "none",
@@ -8701,7 +8759,7 @@ var ResponsiveSliderField = ({
         /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
           "button",
           {
-            onClick: () => setMode("tablet"),
+            onClick: () => changeGlobalViewport("tablet"),
             style: {
               padding: "2px 5px",
               border: "none",
@@ -8721,7 +8779,7 @@ var ResponsiveSliderField = ({
         /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
           "button",
           {
-            onClick: () => setMode("mobile"),
+            onClick: () => changeGlobalViewport("mobile"),
             style: {
               padding: "2px 5px",
               border: "none",
@@ -8738,20 +8796,20 @@ var ResponsiveSliderField = ({
             children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(MobileIcon, {})
           }
         )
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-      SliderField,
-      {
-        value: getCurrentValue(),
-        onChange: handleChange,
-        unit,
-        max,
-        min,
-        step,
-        useUnits: false
-      }
-    )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+        SliderField,
+        {
+          value: getCurrentValue(),
+          onChange: handleChange,
+          unit,
+          max,
+          min,
+          step,
+          useUnits: false
+        }
+      ) })
+    ] })
   ] });
 };
 
@@ -8834,23 +8892,23 @@ var styles_module_default14 = { "Drawer": "_Drawer_1bd7y_1", "Drawer-draggable":
 // components/Drawer/index.tsx
 init_get_class_name_factory();
 init_DragIcon();
-var import_react55 = require("react");
+var import_react54 = require("react");
 init_generate_id();
 
 // components/DragDropContext/context.tsx
 init_react_import();
-var import_react54 = require("react");
-var dragListenerContext = (0, import_react54.createContext)({
+var import_react53 = require("react");
+var dragListenerContext = (0, import_react53.createContext)({
   dragListeners: {}
 });
 function useDragListener(type, fn, deps = []) {
-  const { setDragListeners } = (0, import_react54.useContext)(dragListenerContext);
-  const id = (0, import_react54.useId)();
-  const fnRef = (0, import_react54.useRef)(fn);
-  (0, import_react54.useEffect)(() => {
+  const { setDragListeners } = (0, import_react53.useContext)(dragListenerContext);
+  const id = (0, import_react53.useId)();
+  const fnRef = (0, import_react53.useRef)(fn);
+  (0, import_react53.useEffect)(() => {
     fnRef.current = fn;
   }, [fn]);
-  (0, import_react54.useEffect)(() => {
+  (0, import_react53.useEffect)(() => {
     if (setDragListeners) {
       const wrappedFn = ((...args) => {
         return fnRef.current(...args);
@@ -8871,7 +8929,7 @@ function useDragListener(type, fn, deps = []) {
 
 // components/Drawer/index.tsx
 init_use_safe_id();
-var import_react56 = require("@dnd-kit/react");
+var import_react55 = require("@dnd-kit/react");
 var import_jsx_runtime59 = require("react/jsx-runtime");
 var getClassName21 = get_class_name_factory_default("Drawer", styles_module_default14);
 var getClassNameItem2 = get_class_name_factory_default("DrawerItem", styles_module_default14);
@@ -8882,7 +8940,7 @@ var DrawerItemInner = ({
   dragRef,
   isDragDisabled
 }) => {
-  const CustomInner = (0, import_react55.useMemo)(
+  const CustomInner = (0, import_react54.useMemo)(
     () => children || (({ children: children2 }) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: getClassNameItem2("default"), children: children2 })),
     [children]
   );
@@ -8908,7 +8966,7 @@ var DrawerItemDraggable = ({
   id,
   isDragDisabled
 }) => {
-  const { ref } = (0, import_react56.useDraggable)({
+  const { ref } = (0, import_react55.useDraggable)({
     id,
     data: { componentType: name },
     disabled: isDragDisabled,
@@ -8937,7 +8995,7 @@ var DrawerItem = ({
   isDragDisabled
 }) => {
   const resolvedId = id || name;
-  const [dynamicId, setDynamicId] = (0, import_react55.useState)(generateId(resolvedId));
+  const [dynamicId, setDynamicId] = (0, import_react54.useState)(generateId(resolvedId));
   if (typeof index !== "undefined") {
     console.error(
       "Warning: The `index` prop on Drawer.Item is deprecated and no longer required."
@@ -8977,7 +9035,7 @@ var Drawer = ({
     );
   }
   const id = useSafeId();
-  const { ref } = (0, import_react56.useDroppable)({
+  const { ref } = (0, import_react55.useDroppable)({
     id,
     type: "void",
     collisionPriority: 0
@@ -8999,11 +9057,11 @@ Drawer.Item = DrawerItem;
 
 // components/DropZone/index.tsx
 init_react_import();
-var import_react75 = require("react");
+var import_react74 = require("react");
 
 // components/DraggableComponent/index.tsx
 init_react_import();
-var import_react59 = require("react");
+var import_react58 = require("react");
 
 // css-module:/home/crediblemark/Project/Credibuild/components/DraggableComponent/styles.module.css#css-module
 init_react_import();
@@ -9019,12 +9077,12 @@ var import_react_dom2 = require("react-dom");
 
 // components/DropZone/context.tsx
 init_react_import();
-var import_react57 = require("react");
+var import_react56 = require("react");
 init_store2();
 var import_zustand5 = require("zustand");
 var import_jsx_runtime60 = require("react/jsx-runtime");
-var dropZoneContext = (0, import_react57.createContext)(null);
-var ZoneStoreContext = (0, import_react57.createContext)(
+var dropZoneContext = (0, import_react56.createContext)(null);
+var ZoneStoreContext = (0, import_react56.createContext)(
   (0, import_zustand5.createStore)(() => ({
     zoneDepthIndex: {},
     nextZoneDepthIndex: {},
@@ -9052,7 +9110,7 @@ var DropZoneProvider = ({
   value
 }) => {
   const dispatch = useAppStore((s) => s.dispatch);
-  const registerZone = (0, import_react57.useCallback)(
+  const registerZone = (0, import_react56.useCallback)(
     (zoneCompound) => {
       dispatch({
         type: "registerZone",
@@ -9061,7 +9119,7 @@ var DropZoneProvider = ({
     },
     [dispatch]
   );
-  const memoValue = (0, import_react57.useMemo)(
+  const memoValue = (0, import_react56.useMemo)(
     () => ({
       registerZone,
       ...value
@@ -9101,11 +9159,11 @@ init_use_context_store();
 
 // lib/dnd/use-on-drag-finished.ts
 init_react_import();
-var import_react58 = require("react");
+var import_react57 = require("react");
 init_store2();
 var useOnDragFinished = (cb, _deps = []) => {
   const appStore = useAppStoreApi();
-  return (0, import_react58.useCallback)(() => {
+  return (0, import_react57.useCallback)(() => {
     let dispose = () => {
     };
     const processDragging = (isDragging2) => {
@@ -9198,10 +9256,10 @@ var DraggableComponent = ({
   const overrides = useAppStore((s) => s.overrides);
   const dispatch = useAppStore((s) => s.dispatch);
   const iframe = useAppStore((s) => s.iframe);
-  const lastMeasureRef = (0, import_react59.useRef)(0);
-  const ctx = (0, import_react59.useContext)(dropZoneContext);
-  const [localZones, setLocalZones] = (0, import_react59.useState)({});
-  const registerLocalZone = (0, import_react59.useCallback)(
+  const lastMeasureRef = (0, import_react58.useRef)(0);
+  const ctx = (0, import_react58.useContext)(dropZoneContext);
+  const [localZones, setLocalZones] = (0, import_react58.useState)({});
+  const registerLocalZone = (0, import_react58.useCallback)(
     (zoneCompound2, active) => {
       ctx?.registerLocalZone?.(zoneCompound2, active);
       setLocalZones((obj) => ({
@@ -9211,7 +9269,7 @@ var DraggableComponent = ({
     },
     [setLocalZones, ctx]
   );
-  const unregisterLocalZone = (0, import_react59.useCallback)(
+  const unregisterLocalZone = (0, import_react58.useCallback)(
     (zoneCompound2) => {
       ctx?.unregisterLocalZone?.(zoneCompound2);
       setLocalZones((obj) => {
@@ -9232,9 +9290,9 @@ var DraggableComponent = ({
       return s.permissions.getPermissions({ item });
     })
   );
-  const zoneStore = (0, import_react59.useContext)(ZoneStoreContext);
-  const [dragAxis, setDragAxis] = (0, import_react59.useState)(userDragAxis || autoDragAxis);
-  const dynamicCollisionDetector = (0, import_react59.useMemo)(
+  const zoneStore = (0, import_react58.useContext)(ZoneStoreContext);
+  const [dragAxis, setDragAxis] = (0, import_react58.useState)(userDragAxis || autoDragAxis);
+  const dynamicCollisionDetector = (0, import_react58.useMemo)(
     () => createDynamicCollisionDetector(dragAxis),
     [dragAxis]
   );
@@ -9266,7 +9324,7 @@ var DraggableComponent = ({
     },
     feedback: "clone"
   });
-  (0, import_react59.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     const isEnabled = zoneStore.getState().enabledIndex[zoneCompound];
     sortable.droppable.disabled = !isEnabled;
     sortable.draggable.disabled = !permissions.drag;
@@ -9282,9 +9340,9 @@ var DraggableComponent = ({
     }
     return cleanup;
   }, [permissions.drag, zoneCompound, sortable.draggable, sortable.droppable, zoneStore]);
-  const [, setRerender] = (0, import_react59.useState)(0);
-  const ref = (0, import_react59.useRef)(null);
-  const refSetter = (0, import_react59.useCallback)(
+  const [, setRerender] = (0, import_react58.useState)(0);
+  const ref = (0, import_react58.useRef)(null);
+  const refSetter = (0, import_react58.useCallback)(
     (el) => {
       sortableRef(el);
       if (ref.current !== el) {
@@ -9297,13 +9355,13 @@ var DraggableComponent = ({
     },
     [itemRef, sortableRef]
   );
-  const [portalEl, setPortalEl] = (0, import_react59.useState)();
-  (0, import_react59.useEffect)(() => {
+  const [portalEl, setPortalEl] = (0, import_react58.useState)();
+  (0, import_react58.useEffect)(() => {
     setPortalEl(
       iframe.enabled ? ref.current?.ownerDocument.body : ref.current?.closest("[data-credbuild-preview]") ?? document.body
     );
   }, [iframe.enabled]);
-  const getStyle = (0, import_react59.useCallback)(() => {
+  const getStyle = (0, import_react58.useCallback)(() => {
     if (!ref.current) return;
     const el = ref.current;
     const rect = el.getBoundingClientRect();
@@ -9334,23 +9392,23 @@ var DraggableComponent = ({
     };
     return style2;
   }, [iframe.enabled]);
-  const [style, setStyle] = (0, import_react59.useState)();
-  const lastRectRef = (0, import_react59.useRef)(null);
-  const syncRafRef = (0, import_react59.useRef)(null);
-  const sync = (0, import_react59.useCallback)(() => {
+  const [style, setStyle] = (0, import_react58.useState)();
+  const lastRectRef = (0, import_react58.useRef)(null);
+  const syncRafRef = (0, import_react58.useRef)(null);
+  const sync = (0, import_react58.useCallback)(() => {
     setStyle(getStyle());
     if (itemRef) {
       assignRefs([itemRef], ref.current);
     }
   }, [getStyle, itemRef]);
-  const scheduleSync = (0, import_react59.useCallback)(() => {
+  const scheduleSync = (0, import_react58.useCallback)(() => {
     if (syncRafRef.current != null) return;
     syncRafRef.current = requestAnimationFrame(() => {
       syncRafRef.current = null;
       sync();
     });
   }, [sync]);
-  (0, import_react59.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     return () => {
       if (syncRafRef.current != null) {
         cancelAnimationFrame(syncRafRef.current);
@@ -9358,7 +9416,7 @@ var DraggableComponent = ({
       }
     };
   }, []);
-  (0, import_react59.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     if (ref.current) {
       const observer = new ResizeObserver(() => {
         scheduleSync();
@@ -9371,37 +9429,37 @@ var DraggableComponent = ({
   }, [scheduleSync, itemRef]);
   const registerNode = useAppStore((s) => s.nodes.registerNode);
   const unregisterNode = useAppStore((s) => s.nodes.unregisterNode);
-  const hideOverlay = (0, import_react59.useCallback)(() => {
+  const hideOverlay = (0, import_react58.useCallback)(() => {
     setIsVisible(false);
   }, []);
-  const showOverlay = (0, import_react59.useCallback)(() => {
+  const showOverlay = (0, import_react58.useCallback)(() => {
     setIsVisible(true);
   }, []);
-  const nodeHandleRef = (0, import_react59.useRef)({
+  const nodeHandleRef = (0, import_react58.useRef)({
     sync: () => null,
     hideOverlay: () => null,
     showOverlay: () => null
   });
-  (0, import_react59.useLayoutEffect)(() => {
+  (0, import_react58.useLayoutEffect)(() => {
     nodeHandleRef.current.sync = sync;
     nodeHandleRef.current.hideOverlay = hideOverlay;
     nodeHandleRef.current.showOverlay = showOverlay;
   }, [hideOverlay, showOverlay, sync]);
-  (0, import_react59.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     registerNode(id, nodeHandleRef.current);
     return () => {
       unregisterNode(id);
     };
   }, [id, registerNode, unregisterNode]);
-  const CustomActionBar = (0, import_react59.useMemo)(
+  const CustomActionBar = (0, import_react58.useMemo)(
     () => overrides.actionBar || DefaultActionBar,
     [overrides.actionBar]
   );
-  const CustomOverlay = (0, import_react59.useMemo)(
+  const CustomOverlay = (0, import_react58.useMemo)(
     () => overrides.componentOverlay || DefaultOverlay,
     [overrides.componentOverlay]
   );
-  const onClick = (0, import_react59.useCallback)(
+  const onClick = (0, import_react58.useCallback)(
     (e) => {
       const userIsDragging = !!zoneStore.getState().draggedItem;
       if (userIsDragging) {
@@ -9430,7 +9488,7 @@ var DraggableComponent = ({
     [index, zoneCompound, isSelected, _experimentalFullScreenCanvas, dispatch, zoneStore]
   );
   const appStore = useAppStoreApi();
-  const onSelectParent = (0, import_react59.useCallback)(() => {
+  const onSelectParent = (0, import_react58.useCallback)(() => {
     const { nodes, zones } = appStore.getState().state.indexes;
     const node = nodes[id];
     const parentNode = node?.parentId ? nodes[node?.parentId] : null;
@@ -9451,26 +9509,26 @@ var DraggableComponent = ({
       }
     });
   }, [appStore, dispatch, id]);
-  const onDuplicate = (0, import_react59.useCallback)(() => {
+  const onDuplicate = (0, import_react58.useCallback)(() => {
     dispatch({
       type: "duplicate",
       sourceIndex: index,
       sourceZone: zoneCompound
     });
   }, [index, zoneCompound, dispatch]);
-  const onDelete = (0, import_react59.useCallback)(() => {
+  const onDelete = (0, import_react58.useCallback)(() => {
     dispatch({
       type: "remove",
       index,
       zone: zoneCompound
     });
   }, [index, zoneCompound, dispatch]);
-  const [hover, setHover] = (0, import_react59.useState)(false);
+  const [hover, setHover] = (0, import_react58.useState)(false);
   const indicativeHover = useContextStore(
     ZoneStoreContext,
     (s) => s.hoveringComponent === id
   );
-  (0, import_react59.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     if (!ref.current) {
       return;
     }
@@ -9517,10 +9575,10 @@ var DraggableComponent = ({
     zoneStore,
     id
   ]);
-  const [isVisible, setIsVisible] = (0, import_react59.useState)(false);
-  const [dragFinished, setDragFinished] = (0, import_react59.useState)(true);
-  const [_, startTransition] = (0, import_react59.useTransition)();
-  (0, import_react59.useEffect)(() => {
+  const [isVisible, setIsVisible] = (0, import_react58.useState)(false);
+  const [dragFinished, setDragFinished] = (0, import_react58.useState)(true);
+  const [_, startTransition] = (0, import_react58.useTransition)();
+  (0, import_react58.useEffect)(() => {
     startTransition(() => {
       if (hover || indicativeHover || isSelected) {
         scheduleSync();
@@ -9531,9 +9589,9 @@ var DraggableComponent = ({
       }
     });
   }, [hover, indicativeHover, isSelected, iframe, scheduleSync]);
-  const [thisWasDragging, setThisWasDragging] = (0, import_react59.useState)(false);
+  const [thisWasDragging, setThisWasDragging] = (0, import_react58.useState)(false);
   const onDragFinished = useOnDragFinished(
-    (0, import_react59.useCallback)(
+    (0, import_react58.useCallback)(
       (finished) => {
         if (finished) {
           startTransition(() => {
@@ -9547,15 +9605,15 @@ var DraggableComponent = ({
       [sync, startTransition]
     )
   );
-  (0, import_react59.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     if (thisIsDragging) {
       setThisWasDragging(true);
     }
   }, [thisIsDragging]);
-  (0, import_react59.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     if (thisWasDragging) return onDragFinished();
   }, [thisWasDragging, onDragFinished]);
-  (0, import_react59.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     if (!dragFinished || !(isSelected || thisIsDragging)) return;
     const el = ref.current;
     if (!el) return;
@@ -9592,7 +9650,7 @@ var DraggableComponent = ({
       cancelAnimationFrame(frame);
     };
   }, [dragFinished, isSelected, thisIsDragging, scheduleSync]);
-  const syncActionsPosition = (0, import_react59.useCallback)(
+  const syncActionsPosition = (0, import_react58.useCallback)(
     (el) => {
       if (el) {
         const view = el.ownerDocument.defaultView;
@@ -9617,7 +9675,7 @@ var DraggableComponent = ({
     },
     []
   );
-  (0, import_react59.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     if (userDragAxis) {
       setDragAxis(userDragAxis);
       return;
@@ -9631,11 +9689,11 @@ var DraggableComponent = ({
     }
     setDragAxis(autoDragAxis);
   }, [ref, userDragAxis, autoDragAxis]);
-  const parentAction = (0, import_react59.useMemo)(
+  const parentAction = (0, import_react58.useMemo)(
     () => ctx?.areaId && ctx?.areaId !== "root" && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ActionBar.Action, { onClick: onSelectParent, label: "Select parent", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(CornerLeftUp, { size: 16 }) }),
     [ctx?.areaId, onSelectParent]
   );
-  const nextContextValue = (0, import_react59.useMemo)(
+  const nextContextValue = (0, import_react58.useMemo)(
     () => ({
       ...ctx,
       areaId: id,
@@ -9750,12 +9808,12 @@ var styles_module_default16 = { "DropZone": "_DropZone_1vmgt_1", "DropZone--hasC
 
 // components/DropZone/index.tsx
 init_store2();
-var import_react76 = require("@dnd-kit/react");
+var import_react75 = require("@dnd-kit/react");
 var import_collision2 = require("@dnd-kit/collision");
 
 // components/DropZone/lib/use-min-empty-height.ts
 init_react_import();
-var import_react60 = require("react");
+var import_react59 = require("react");
 init_use_context_store();
 init_store2();
 var getNumItems = (appStore, zoneCompound) => appStore.getState().state.indexes.zones[zoneCompound].contentIds.length;
@@ -9765,17 +9823,17 @@ var useMinEmptyHeight = ({
   ref
 }) => {
   const appStore = useAppStoreApi();
-  const [prevHeight, setPrevHeight] = (0, import_react60.useState)(0);
-  const [isAnimating, setIsAnimating] = (0, import_react60.useState)(false);
+  const [prevHeight, setPrevHeight] = (0, import_react59.useState)(0);
+  const [isAnimating, setIsAnimating] = (0, import_react59.useState)(false);
   const { draggedItem, isZone } = useContextStore(ZoneStoreContext, (s) => {
     return {
       draggedItem: s.draggedItem?.data.zone === zoneCompound ? s.draggedItem : null,
       isZone: s.draggedItem?.data.zone === zoneCompound
     };
   });
-  const numItems = (0, import_react60.useRef)(0);
+  const numItems = (0, import_react59.useRef)(0);
   const onDragFinished = useOnDragFinished(
-    (0, import_react60.useCallback)(
+    (0, import_react59.useCallback)(
       (finished) => {
         if (finished) {
           const newNumItems = getNumItems(appStore, zoneCompound);
@@ -9804,7 +9862,7 @@ var useMinEmptyHeight = ({
       [appStore, zoneCompound]
     )
   );
-  (0, import_react60.useEffect)(() => {
+  (0, import_react59.useEffect)(() => {
     if (draggedItem && ref.current) {
       if (isZone) {
         const rect = ref.current.getBoundingClientRect();
@@ -9821,15 +9879,15 @@ var useMinEmptyHeight = ({
 
 // components/DropZone/lib/use-content-with-preview.ts
 init_react_import();
-var import_react63 = require("react");
+var import_react62 = require("react");
 
 // lib/dnd/use-rendered-callback.ts
 init_react_import();
-var import_react61 = require("@dnd-kit/react");
-var import_react62 = require("react");
+var import_react60 = require("@dnd-kit/react");
+var import_react61 = require("react");
 function useRenderedCallback(callback, _deps = []) {
-  const manager = (0, import_react61.useDragDropManager)();
-  return (0, import_react62.useCallback)(
+  const manager = (0, import_react60.useDragDropManager)();
+  return (0, import_react61.useCallback)(
     async (...args) => {
       await manager?.renderer.rendering;
       return callback(...args);
@@ -9843,18 +9901,18 @@ init_insert();
 init_use_context_store();
 init_store2();
 var useContentIdsWithPreview = (contentIds, zoneCompound) => {
-  const zoneStore = (0, import_react63.useContext)(ZoneStoreContext);
+  const zoneStore = (0, import_react62.useContext)(ZoneStoreContext);
   const preview = useContextStore(
     ZoneStoreContext,
     (s) => s.previewIndex[zoneCompound]
   );
   const isDragging = useAppStore((s) => s.state.ui.isDragging);
-  const [contentIdsWithPreview, setContentIdsWithPreview] = (0, import_react63.useState)(contentIds);
-  const [localPreview, setLocalPreview] = (0, import_react63.useState)(
+  const [contentIdsWithPreview, setContentIdsWithPreview] = (0, import_react62.useState)(contentIds);
+  const [localPreview, setLocalPreview] = (0, import_react62.useState)(
     preview
   );
   const updateContent = useRenderedCallback(
-    (0, import_react63.useCallback)(
+    (0, import_react62.useCallback)(
       (contentIds2, preview2, isDragging2, draggedItemId, previewExists) => {
         if (isDragging2 && !previewExists) {
           return;
@@ -9887,7 +9945,7 @@ var useContentIdsWithPreview = (contentIds, zoneCompound) => {
       []
     )
   );
-  (0, import_react63.useEffect)(() => {
+  (0, import_react62.useEffect)(() => {
     const s = zoneStore.getState();
     const draggedItemId = s.draggedItem?.id;
     const previewExists = Object.keys(s.previewIndex || {}).length > 0;
@@ -9904,17 +9962,17 @@ var useContentIdsWithPreview = (contentIds, zoneCompound) => {
 
 // components/DropZone/lib/use-drag-axis.ts
 init_react_import();
-var import_react64 = require("react");
+var import_react63 = require("react");
 init_store2();
 var GRID_DRAG_AXIS = "dynamic";
 var FLEX_ROW_DRAG_AXIS = "x";
 var DEFAULT_DRAG_AXIS = "y";
 var useDragAxis = (ref, collisionAxis) => {
   const status = useAppStore((s) => s.status);
-  const [dragAxis, setDragAxis] = (0, import_react64.useState)(
+  const [dragAxis, setDragAxis] = (0, import_react63.useState)(
     collisionAxis || DEFAULT_DRAG_AXIS
   );
-  const calculateDragAxis = (0, import_react64.useCallback)(() => {
+  const calculateDragAxis = (0, import_react63.useCallback)(() => {
     if (ref.current) {
       const computedStyle = window.getComputedStyle(ref.current);
       if (computedStyle.display === "grid") {
@@ -9926,7 +9984,7 @@ var useDragAxis = (ref, collisionAxis) => {
       }
     }
   }, [ref]);
-  (0, import_react64.useEffect)(() => {
+  (0, import_react63.useEffect)(() => {
     const onViewportChange = () => {
       calculateDragAxis();
     };
@@ -9935,7 +9993,7 @@ var useDragAxis = (ref, collisionAxis) => {
       window.removeEventListener("viewportchange", onViewportChange);
     };
   }, [calculateDragAxis]);
-  (0, import_react64.useEffect)(calculateDragAxis, [status, collisionAxis, calculateDragAxis]);
+  (0, import_react63.useEffect)(calculateDragAxis, [status, collisionAxis, calculateDragAxis]);
   return [dragAxis, calculateDragAxis];
 };
 
@@ -9945,8 +10003,8 @@ var import_shallow6 = require("zustand/react/shallow");
 
 // components/Render/context.tsx
 init_react_import();
-var import_react65 = __toESM(require("react"));
-var renderContext = import_react65.default.createContext({
+var import_react64 = __toESM(require("react"));
+var renderContext = import_react64.default.createContext({
   config: { components: {} },
   data: { root: {}, content: [] },
   metadata: {}
@@ -9957,7 +10015,7 @@ init_react_import();
 
 // lib/field-transforms/use-field-transforms.tsx
 init_react_import();
-var import_react66 = require("react");
+var import_react65 = require("react");
 init_map_fields();
 
 // lib/field-transforms/build-mappers.ts
@@ -9986,14 +10044,14 @@ function buildMappers(transforms, readOnly, forceReadOnly) {
 
 // lib/field-transforms/use-field-transforms.tsx
 function useFieldTransforms(config, item, transforms, readOnly, forceReadOnly) {
-  const mappers = (0, import_react66.useMemo)(
+  const mappers = (0, import_react65.useMemo)(
     () => buildMappers(transforms, readOnly, forceReadOnly),
     [transforms, readOnly, forceReadOnly]
   );
-  const transformedProps = (0, import_react66.useMemo)(() => {
+  const transformedProps = (0, import_react65.useMemo)(() => {
     return mapFields(item, mappers, config).props;
   }, [config, item, mappers]);
-  const mergedProps = (0, import_react66.useMemo)(
+  const mergedProps = (0, import_react65.useMemo)(
     () => ({ ...item.props, ...transformedProps }),
     [item.props, transformedProps]
   );
@@ -10034,11 +10092,11 @@ init_store2();
 
 // components/SlotRender/server.tsx
 init_react_import();
-var import_react69 = require("react");
+var import_react68 = require("react");
 
 // components/RichTextEditor/lib/use-richtext-props.tsx
 init_react_import();
-var import_react68 = require("react");
+var import_react67 = require("react");
 
 // components/RichTextEditor/components/RenderFallback.tsx
 init_react_import();
@@ -10101,10 +10159,10 @@ var findAllRichtextKeys = (fields, path = []) => {
   return result;
 };
 function useRichtextProps(fields, props) {
-  const richtextKeys = (0, import_react68.useMemo)(() => findAllRichtextKeys(fields), [fields]);
-  const richtextProps = (0, import_react68.useMemo)(() => {
+  const richtextKeys = (0, import_react67.useMemo)(() => findAllRichtextKeys(fields), [fields]);
+  const richtextProps = (0, import_react67.useMemo)(() => {
     if (!richtextKeys?.length) return {};
-    const RichTextRender3 = (0, import_react68.lazy)(
+    const RichTextRender3 = (0, import_react67.lazy)(
       () => Promise.resolve().then(() => (init_Render(), Render_exports)).then((m) => ({
         default: m.RichTextRender
       }))
@@ -10112,7 +10170,7 @@ function useRichtextProps(fields, props) {
     let result = { ...props };
     for (const { path, field } of richtextKeys) {
       result = mapDeep(result, path, (content) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
-        import_react68.Suspense,
+        import_react67.Suspense,
         {
           fallback: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(RichTextRenderFallback, { content }),
           children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(RichTextRender3, { content, field })
@@ -10148,7 +10206,7 @@ var Item2 = ({
     }
   );
 };
-var SlotRender = (0, import_react69.forwardRef)(
+var SlotRender = (0, import_react68.forwardRef)(
   function SlotRenderInternal({ className, style, content, config, metadata, as }, ref) {
     const El = as ?? "div";
     return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(El, { className, style, ref, children: content.map((item) => {
@@ -10199,16 +10257,16 @@ init_flatten_node();
 
 // lib/field-transforms/use-field-transforms-tracked.tsx
 init_react_import();
-var import_react70 = require("react");
+var import_react69 = require("react");
 init_map_fields();
 function useFieldTransformsTracked(config, item, transforms, readOnly, forceReadOnly) {
-  const prevProps = (0, import_react70.useRef)(null);
-  const prevResult = (0, import_react70.useRef)(item.props);
-  const mappers = (0, import_react70.useMemo)(
+  const prevProps = (0, import_react69.useRef)(null);
+  const prevResult = (0, import_react69.useRef)(item.props);
+  const mappers = (0, import_react69.useMemo)(
     () => buildMappers(transforms, readOnly, forceReadOnly),
     [transforms, readOnly, forceReadOnly]
   );
-  const transformedProps = (0, import_react70.useMemo)(() => {
+  const transformedProps = (0, import_react69.useMemo)(() => {
     const changedProps = {};
     const componentConfig = item.type === "root" ? config.root : config.components?.[item.type];
     let changeIncludesSlot = false;
@@ -10233,7 +10291,7 @@ function useFieldTransformsTracked(config, item, transforms, readOnly, forceRead
     prevResult.current = { ...prevResult.current, ...mapped };
     return prevResult.current;
   }, [config, item, mappers]);
-  const mergedProps = (0, import_react70.useMemo)(
+  const mergedProps = (0, import_react69.useMemo)(
     () => ({ ...item.props, ...transformedProps }),
     [item.props, transformedProps]
   );
@@ -10245,7 +10303,7 @@ init_react_import();
 
 // components/InlineTextField/index.tsx
 init_react_import();
-var import_react71 = require("react");
+var import_react70 = require("react");
 
 // lib/overlay-portal/index.tsx
 init_react_import();
@@ -10326,10 +10384,10 @@ var InlineTextFieldInternal = ({
   isReadOnly,
   opts = {}
 }) => {
-  const ref = (0, import_react71.useRef)(null);
+  const ref = (0, import_react70.useRef)(null);
   const appStoreApi = useAppStoreApi();
   const disableLineBreaks = opts.disableLineBreaks ?? false;
-  (0, import_react71.useEffect)(() => {
+  (0, import_react70.useEffect)(() => {
     const appStore = appStoreApi.getState();
     const data = appStore.state.indexes.nodes[componentId].data;
     const componentConfig = appStore.getComponentConfig(data.type);
@@ -10374,8 +10432,8 @@ var InlineTextFieldInternal = ({
       };
     }
   }, [appStoreApi, ref, value, disableLineBreaks, componentId, propPath]);
-  const [isHovering, setIsHovering] = (0, import_react71.useState)(false);
-  const [isFocused, setIsFocused] = (0, import_react71.useState)(false);
+  const [isHovering, setIsHovering] = (0, import_react70.useState)(false);
+  const [isFocused, setIsFocused] = (0, import_react70.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
     "span",
     {
@@ -10412,7 +10470,7 @@ var InlineTextFieldInternal = ({
     }
   );
 };
-var InlineTextField = (0, import_react71.memo)(InlineTextFieldInternal);
+var InlineTextField = (0, import_react70.memo)(InlineTextFieldInternal);
 
 // lib/field-transforms/default-transforms/inline-text-transform.tsx
 var import_jsx_runtime68 = require("react/jsx-runtime");
@@ -10467,19 +10525,19 @@ init_react_import();
 init_EditorFallback();
 init_store2();
 init_set_deep();
-var import_react72 = require("react");
+var import_react71 = require("react");
 var import_jsx_runtime69 = require("react/jsx-runtime");
-var Editor3 = (0, import_react72.lazy)(
+var Editor3 = (0, import_react71.lazy)(
   () => Promise.resolve().then(() => (init_Editor(), Editor_exports)).then((m) => ({
     default: m.Editor
   }))
 );
-var RichTextRender2 = (0, import_react72.lazy)(
+var RichTextRender2 = (0, import_react71.lazy)(
   () => Promise.resolve().then(() => (init_Render(), Render_exports)).then((m) => ({
     default: m.RichTextRender
   }))
 );
-var InlineEditorWrapper = (0, import_react72.memo)(
+var InlineEditorWrapper = (0, import_react71.memo)(
   ({
     value,
     componentId,
@@ -10487,7 +10545,7 @@ var InlineEditorWrapper = (0, import_react72.memo)(
     field,
     id
   }) => {
-    const portalRef = (0, import_react72.useRef)(null);
+    const portalRef = (0, import_react71.useRef)(null);
     const appStoreApi = useAppStoreApi();
     const onClickHandler = (e) => {
       e.preventDefault();
@@ -10502,14 +10560,14 @@ var InlineEditorWrapper = (0, import_react72.memo)(
       );
       appStoreApi.getState().setUi({ itemSelector });
     };
-    (0, import_react72.useEffect)(() => {
+    (0, import_react71.useEffect)(() => {
       if (!portalRef.current) return;
       const cleanup = registerOverlayPortal(portalRef.current, {
         disableDragOnFocus: true
       });
       return () => cleanup?.();
     }, []);
-    const handleChange = (0, import_react72.useCallback)(
+    const handleChange = (0, import_react71.useCallback)(
       async (content, ui) => {
         const appStore = appStoreApi.getState();
         const node = appStore.state.indexes.nodes[componentId];
@@ -10532,7 +10590,7 @@ var InlineEditorWrapper = (0, import_react72.memo)(
       },
       [appStoreApi, componentId, propPath]
     );
-    const handleFocus = (0, import_react72.useCallback)(
+    const handleFocus = (0, import_react71.useCallback)(
       (editor) => {
         appStoreApi.setState({
           currentRichText: {
@@ -10547,7 +10605,7 @@ var InlineEditorWrapper = (0, import_react72.memo)(
       [field, componentId, appStoreApi, id]
     );
     if (!field.contentEditable)
-      return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_react72.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(RichTextRenderFallback, { content: value }), children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(RichTextRender2, { content: value, field }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_react71.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(RichTextRenderFallback, { content: value }), children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(RichTextRender2, { content: value, field }) });
     const editorProps = {
       content: value,
       onChange: handleChange,
@@ -10563,7 +10621,7 @@ var InlineEditorWrapper = (0, import_react72.memo)(
         ref: portalRef,
         onClick: onClickHandler,
         onClickCapture: onClickCaptureHandler,
-        children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_react72.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(EditorFallback, { ...editorProps }), children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Editor3, { ...editorProps }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_react71.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(EditorFallback, { ...editorProps }), children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Editor3, { ...editorProps }) })
       }
     );
   }
@@ -10593,7 +10651,7 @@ var getRichTextTransform = () => ({
 // components/MemoizeComponent/index.tsx
 init_react_import();
 var import_fast_equals3 = require("fast-equals");
-var import_react73 = require("react");
+var import_react72 = require("react");
 
 // lib/shallow-equal.ts
 init_react_import();
@@ -10627,7 +10685,7 @@ var RenderComponent = ({
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Component, { ...renderProps });
 };
-var MemoizeComponent = (0, import_react73.memo)(RenderComponent, (prev, next) => {
+var MemoizeComponent = (0, import_react72.memo)(RenderComponent, (prev, next) => {
   let credbuildEquals = true;
   if ("credbuild" in prev.componentProps && "credbuild" in next.componentProps) {
     credbuildEquals = (0, import_fast_equals3.deepEqual)(prev.componentProps.credbuild, next.componentProps.credbuild);
@@ -10637,7 +10695,7 @@ var MemoizeComponent = (0, import_react73.memo)(RenderComponent, (prev, next) =>
 
 // components/DropZone/VirtualizedDropZone.tsx
 init_react_import();
-var import_react74 = require("react");
+var import_react73 = require("react");
 init_store2();
 var import_react_virtual = require("@tanstack/react-virtual");
 init_use_context_store();
@@ -10672,7 +10730,7 @@ var VirtualizedDropZone = ({
 }) => {
   const selectedId = useAppStore((s) => s.selectedItem?.props.id ?? null);
   const frame = getFrame();
-  const zoneStore = (0, import_react74.useContext)(ZoneStoreContext);
+  const zoneStore = (0, import_react73.useContext)(ZoneStoreContext);
   const draggedItemId = useContextStore(ZoneStoreContext, (s) => {
     const draggedId = s.draggedItem?.id;
     return draggedId ? String(draggedId) : null;
@@ -10685,9 +10743,9 @@ var VirtualizedDropZone = ({
     return null;
   });
   const iframeWindow = frame?.defaultView;
-  const measureRefsRef = (0, import_react74.useRef)(/* @__PURE__ */ new Map());
+  const measureRefsRef = (0, import_react73.useRef)(/* @__PURE__ */ new Map());
   const appStoreApi = useAppStoreApi();
-  const resolveIndex = (0, import_react74.useCallback)(
+  const resolveIndex = (0, import_react73.useCallback)(
     (targetId) => {
       if (!targetId || targetId === "root") {
         return -1;
@@ -10711,7 +10769,7 @@ var VirtualizedDropZone = ({
     },
     [appStoreApi, contentIds]
   );
-  const pinnedIndexes = (0, import_react74.useMemo)(() => {
+  const pinnedIndexes = (0, import_react73.useMemo)(() => {
     const nextPinnedIndexes = /* @__PURE__ */ new Set();
     [selectedId, draggedItemId, dragTargetParentId].forEach((targetId) => {
       const currentIndex = resolveIndex(targetId);
@@ -10721,7 +10779,7 @@ var VirtualizedDropZone = ({
     });
     return Array.from(nextPinnedIndexes).sort((a, b) => a - b);
   }, [dragTargetParentId, draggedItemId, resolveIndex, selectedId]);
-  const rangeExtractor = (0, import_react74.useCallback)(
+  const rangeExtractor = (0, import_react73.useCallback)(
     (range) => {
       const indexes = (0, import_react_virtual.defaultRangeExtractor)(range);
       pinnedIndexes.forEach((index) => {
@@ -10746,7 +10804,7 @@ var VirtualizedDropZone = ({
     rangeExtractor,
     initialOffset: () => iframeWindow ? iframeWindow.scrollY : 0
   });
-  (0, import_react74.useEffect)(() => {
+  (0, import_react73.useEffect)(() => {
     zoneStore.getState().registerRootVirtualizer(zoneCompound, {
       resolveIndex: (targetId) => resolveIndex(targetId),
       virtualizer
@@ -10755,7 +10813,7 @@ var VirtualizedDropZone = ({
       zoneStore.getState().unregisterRootVirtualizer(zoneCompound);
     };
   }, [resolveIndex, virtualizer, zoneCompound, zoneStore]);
-  const getMeasureRef = (0, import_react74.useCallback)((componentId) => {
+  const getMeasureRef = (0, import_react73.useCallback)((componentId) => {
     const cachedRef = measureRefsRef.current.get(componentId);
     if (cachedRef) {
       return cachedRef;
@@ -10772,7 +10830,7 @@ var VirtualizedDropZone = ({
     measureRefsRef.current.set(componentId, measureRef);
     return measureRef;
   }, []);
-  (0, import_react74.useEffect)(() => {
+  (0, import_react73.useEffect)(() => {
     const validIds = new Set(contentIds);
     Array.from(measureRefsRef.current.keys()).forEach((componentId) => {
       if (!validIds.has(componentId)) {
@@ -10782,7 +10840,7 @@ var VirtualizedDropZone = ({
   }, [contentIds]);
   const virtualItems = virtualizer.getVirtualItems();
   const totalSize = virtualizer.getTotalSize();
-  const renderedItems = (0, import_react74.useMemo)(() => {
+  const renderedItems = (0, import_react73.useMemo)(() => {
     const items = [];
     let previousEnd = 0;
     let previousIndex = -1;
@@ -10857,9 +10915,9 @@ var DropZoneChild = ({
   itemRef
 }) => {
   const metadata = useAppStore((s) => s.metadata);
-  const ctx = (0, import_react75.useContext)(dropZoneContext);
+  const ctx = (0, import_react74.useContext)(dropZoneContext);
   const { depth = 1 } = ctx ?? {};
-  const zoneStore = (0, import_react75.useContext)(ZoneStoreContext);
+  const zoneStore = (0, import_react74.useContext)(ZoneStoreContext);
   const nodeProps = useAppStore(
     (0, import_shallow6.useShallow)((s) => {
       return s.state.indexes.nodes[componentId]?.flatData.props;
@@ -10872,7 +10930,7 @@ var DropZoneChild = ({
     (0, import_shallow6.useShallow)((s) => s.state.indexes.nodes[componentId]?.data.readOnly)
   );
   const appStore = useAppStoreApi();
-  const item = (0, import_react75.useMemo)(() => {
+  const item = (0, import_react74.useMemo)(() => {
     if (nodeProps) {
       const expanded = expandNode({
         type: nodeType,
@@ -10894,7 +10952,7 @@ var DropZoneChild = ({
   const componentConfig = useAppStore(
     (s) => item?.type ? s.config.components[item.type] : null
   );
-  const credbuildProps = (0, import_react75.useMemo)(
+  const credbuildProps = (0, import_react74.useMemo)(
     () => ({
       renderDropZone: DropZoneEditPure,
       isEditing: true,
@@ -10911,7 +10969,7 @@ var DropZoneChild = ({
     (s) => s.selectedItem?.props.id === componentId || false
   );
   let label = componentConfig?.label ?? item?.type.toString() ?? "Component";
-  const defaultsProps = (0, import_react75.useMemo)(
+  const defaultsProps = (0, import_react74.useMemo)(
     () => ({
       ...componentConfig?.defaultProps,
       ...item?.props,
@@ -10921,14 +10979,14 @@ var DropZoneChild = ({
     }),
     [componentConfig?.defaultProps, item?.props, credbuildProps]
   );
-  const defaultedNode = (0, import_react75.useMemo)(
+  const defaultedNode = (0, import_react74.useMemo)(
     () => ({ type: item?.type ?? nodeType, props: defaultsProps }),
     [item?.type, nodeType, defaultsProps]
   );
   const config = useAppStore((s) => s.config);
   const plugins = useAppStore((s) => s.plugins);
   const userFieldTransforms = useAppStore((s) => s.fieldTransforms);
-  const combinedFieldTransforms = (0, import_react75.useMemo)(
+  const combinedFieldTransforms = (0, import_react74.useMemo)(
     () => ({
       ...getSlotTransform(DropZoneEditPure, (slotProps) => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ContextSlotRender, { componentId, zone: slotProps.zone })),
       ...getInlineTextTransform(),
@@ -11001,8 +11059,8 @@ var DropZoneChild = ({
     }
   );
 };
-var DropZoneChildMemo = (0, import_react75.memo)(DropZoneChild);
-var DropZoneEdit = (0, import_react75.forwardRef)(
+var DropZoneChildMemo = (0, import_react74.memo)(DropZoneChild);
+var DropZoneEdit = (0, import_react74.forwardRef)(
   function DropZoneEditInternal({
     zone,
     allow,
@@ -11013,7 +11071,7 @@ var DropZoneEdit = (0, import_react75.forwardRef)(
     collisionAxis,
     as
   }, userRef) {
-    const ctx = (0, import_react75.useContext)(dropZoneContext);
+    const ctx = (0, import_react74.useContext)(dropZoneContext);
     const appStoreApi = useAppStoreApi();
     const {
       // These all need setting via context
@@ -11046,14 +11104,14 @@ var DropZoneEdit = (0, import_react75.forwardRef)(
         return s.state.indexes.zones[zoneCompound]?.type;
       })
     );
-    (0, import_react75.useEffect)(() => {
+    (0, import_react74.useEffect)(() => {
       if (!zoneType || zoneType === "dropzone") {
         if (ctx?.registerZone) {
           ctx?.registerZone(zoneCompound);
         }
       }
     }, [zoneType, appStoreApi, ctx, zoneCompound]);
-    (0, import_react75.useEffect)(() => {
+    (0, import_react74.useEffect)(() => {
       if (zoneType === "dropzone") {
         if (zoneCompound !== rootDroppableId) {
           console.warn(
@@ -11062,11 +11120,11 @@ var DropZoneEdit = (0, import_react75.forwardRef)(
         }
       }
     }, [zoneType, zoneCompound]);
-    const contentIds = (0, import_react75.useMemo)(() => {
+    const contentIds = (0, import_react74.useMemo)(() => {
       return zoneContentIds || [];
     }, [zoneContentIds]);
-    const ref = (0, import_react75.useRef)(null);
-    const acceptsTarget = (0, import_react75.useCallback)(
+    const ref = (0, import_react74.useRef)(null);
+    const acceptsTarget = (0, import_react74.useCallback)(
       (componentType) => {
         if (!componentType) {
           return true;
@@ -11102,7 +11160,7 @@ var DropZoneEdit = (0, import_react75.forwardRef)(
       }
       return _isEnabled;
     });
-    (0, import_react75.useEffect)(() => {
+    (0, import_react74.useEffect)(() => {
       if (registerLocalZone) {
         registerLocalZone(zoneCompound, targetAccepted || isEnabled);
       }
@@ -11117,8 +11175,8 @@ var DropZoneEdit = (0, import_react75.forwardRef)(
       zoneCompound
     );
     const isDropEnabled = isEnabled && (preview ? contentIdsWithPreview.length === 1 : contentIdsWithPreview.length === 0);
-    const zoneStore = (0, import_react75.useContext)(ZoneStoreContext);
-    (0, import_react75.useEffect)(() => {
+    const zoneStore = (0, import_react74.useContext)(ZoneStoreContext);
+    (0, import_react74.useEffect)(() => {
       const { enabledIndex } = zoneStore.getState();
       zoneStore.setState({
         enabledIndex: { ...enabledIndex, [zoneCompound]: isEnabled }
@@ -11137,7 +11195,7 @@ var DropZoneEdit = (0, import_react75.forwardRef)(
         path: path || []
       }
     };
-    const { ref: dropRef } = (0, import_react76.useDroppable)(droppableConfig);
+    const { ref: dropRef } = (0, import_react75.useDroppable)(droppableConfig);
     const isAreaSelected = useAppStore(
       (s) => s?.selectedItem && areaId === s?.selectedItem.props.id
     );
@@ -11147,7 +11205,7 @@ var DropZoneEdit = (0, import_react75.forwardRef)(
       userMinEmptyHeight,
       ref
     });
-    const setRefs = (0, import_react75.useCallback)(
+    const setRefs = (0, import_react74.useCallback)(
       (node) => {
         assignRefs([ref, dropRef, userRef], node);
       },
@@ -11220,7 +11278,7 @@ var DropZoneRenderItem = ({
 }) => {
   const Component = config.components[item.type];
   const props = useSlots(config, item, (slotProps) => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(SlotRenderPure, { ...slotProps, config, metadata }));
-  const nextContextValue = (0, import_react75.useMemo)(
+  const nextContextValue = (0, import_react74.useMemo)(
     () => ({
       areaId: props.id,
       depth: 1
@@ -11242,19 +11300,19 @@ var DropZoneRenderItem = ({
   ) }, props.id);
 };
 var DropZoneRenderPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(DropZoneRender, { ...props });
-var DropZoneRender = (0, import_react75.forwardRef)(
+var DropZoneRender = (0, import_react74.forwardRef)(
   function DropZoneRenderInternal({ className, style, zone, as }, ref) {
-    const ctx = (0, import_react75.useContext)(dropZoneContext);
+    const ctx = (0, import_react74.useContext)(dropZoneContext);
     const { areaId = "root" } = ctx || {};
-    const { config, data, metadata } = (0, import_react75.useContext)(renderContext);
+    const { config, data, metadata } = (0, import_react74.useContext)(renderContext);
     let zoneCompound = `${areaId}:${zone}`;
-    const content = (0, import_react75.useMemo)(() => {
+    const content = (0, import_react74.useMemo)(() => {
       if (zoneCompound !== rootDroppableId) {
         return setupZone(data, zoneCompound).zones[zoneCompound];
       }
       return data?.content || [];
     }, [data, zoneCompound]);
-    (0, import_react75.useEffect)(() => {
+    (0, import_react74.useEffect)(() => {
       if (!content) {
         if (ctx?.registerZone) {
           ctx?.registerZone(zoneCompound);
@@ -11283,9 +11341,9 @@ var DropZoneRender = (0, import_react75.forwardRef)(
   }
 );
 var DropZonePure = (props) => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(DropZone, { ...props });
-var DropZone = (0, import_react75.forwardRef)(
+var DropZone = (0, import_react74.forwardRef)(
   function DropZone2(props, ref) {
-    const ctx = (0, import_react75.useContext)(dropZoneContext);
+    const ctx = (0, import_react74.useContext)(dropZoneContext);
     if (ctx?.mode === "edit") {
       return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_jsx_runtime72.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(DropZoneEdit, { ...props, ref }) });
     }
@@ -11298,7 +11356,7 @@ init_IconButton2();
 
 // components/CredBuild/index.tsx
 init_react_import();
-var import_react102 = require("react");
+var import_react101 = require("react");
 init_store2();
 
 // components/CredBuild/components/Fields/index.tsx
@@ -11315,7 +11373,7 @@ var styles_module_default18 = { "CredBuildFields": "_CredBuildFields_53gu7_1", "
 
 // components/CredBuild/components/Fields/index.tsx
 init_lib();
-var import_react77 = require("react");
+var import_react76 = require("react");
 init_fields();
 var import_shallow7 = require("zustand/react/shallow");
 var import_jsx_runtime73 = require("react/jsx-runtime");
@@ -11384,15 +11442,15 @@ var FieldsChildInner = ({ fieldName }) => {
     })
   );
   const appStore = useAppStoreApi();
-  const onChange = (0, import_react77.useCallback)(
+  const onChange = (0, import_react76.useCallback)(
     async (value, updatedUi) => {
       createOnChange(fieldName, appStore)(value, updatedUi);
     },
     [fieldName, appStore]
   );
   const { visible = true } = field ?? {};
-  const fieldStore = (0, import_react77.useContext)(fieldContextStore.ctx);
-  (0, import_react77.useEffect)(() => {
+  const fieldStore = (0, import_react76.useContext)(fieldContextStore.ctx);
+  (0, import_react76.useEffect)(() => {
     return appStore.subscribe(
       (s) => {
         const data = s.getCurrentData();
@@ -11418,13 +11476,13 @@ var FieldsChildInner = ({ fieldName }) => {
 };
 var FieldsChild = ({ fieldName }) => {
   const appStore = useAppStoreApi();
-  const initialValue = (0, import_react77.useMemo)(() => {
+  const initialValue = (0, import_react76.useMemo)(() => {
     const value = appStore.getState().getCurrentData().props?.[fieldName];
     return { [fieldName]: value };
   }, [appStore, fieldName]);
   return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(fieldContextStore.Provider, { value: initialValue, children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(FieldsChildInner, { fieldName }) });
 };
-var FieldsChildMemo = (0, import_react77.memo)(FieldsChild);
+var FieldsChildMemo = (0, import_react76.memo)(FieldsChild);
 var FieldsInternal = ({ wrapFields = true }) => {
   const overrides = useAppStore((s) => s.overrides);
   const componentResolving = useAppStore((s) => {
@@ -11445,7 +11503,7 @@ var FieldsInternal = ({ wrapFields = true }) => {
     })
   );
   const isLoading = fieldsLoading || componentResolving;
-  const Wrapper = (0, import_react77.useMemo)(() => overrides.fields || DefaultFields, [overrides]);
+  const Wrapper = (0, import_react76.useMemo)(() => overrides.fields || DefaultFields, [overrides]);
   return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
     "form",
     {
@@ -11460,14 +11518,14 @@ var FieldsInternal = ({ wrapFields = true }) => {
     }
   );
 };
-var Fields = (0, import_react77.memo)(FieldsInternal);
+var Fields = (0, import_react76.memo)(FieldsInternal);
 
 // components/CredBuild/components/Components/index.tsx
 init_react_import();
 
 // lib/use-component-list.tsx
 init_react_import();
-var import_react79 = require("react");
+var import_react78 = require("react");
 
 // components/ComponentList/index.tsx
 init_react_import();
@@ -11478,10 +11536,9 @@ var styles_module_default19 = { "ComponentList": "_ComponentList_10tqo_1", "Comp
 
 // components/ComponentList/index.tsx
 init_get_class_name_factory();
-var import_react78 = require("react");
+var import_react77 = require("react");
 init_store2();
 init_lucide_react();
-var import_react_virtual2 = require("@tanstack/react-virtual");
 var import_jsx_runtime74 = require("react/jsx-runtime");
 var getClassName28 = get_class_name_factory_default("ComponentList", styles_module_default19);
 var ComponentListItem = ({
@@ -11494,7 +11551,7 @@ var ComponentListItem = ({
       type: name
     }).insert
   );
-  (0, import_react78.useEffect)(() => {
+  (0, import_react77.useEffect)(() => {
     if (overrides.componentItem) {
       console.warn(
         "The `componentItem` override has been deprecated and renamed to `drawerItem`"
@@ -11511,16 +11568,8 @@ var ComponentList = ({
   const config = useAppStore((s) => s.config);
   const setUi = useAppStore((s) => s.setUi);
   const componentList = useAppStore((s) => s.state.ui.componentList);
-  const parentRef = (0, import_react78.useRef)(null);
   const { expanded = true } = componentList[id] || {};
   const components = Object.keys(config.components);
-  const virtualizer = (0, import_react_virtual2.useVirtualizer)({
-    count: components.length,
-    getScrollElement: () => parentRef.current,
-    estimateSize: () => 32,
-    // Estimated height of each item
-    overscan: 5
-  });
   return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: getClassName28({ isExpanded: expanded }), children: [
     title && /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
       "button",
@@ -11553,47 +11602,22 @@ var ComponentList = ({
     /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
       "div",
       {
-        ref: parentRef,
         className: getClassName28("content"),
         style: {
-          maxHeight: expanded ? "500px" : "0px",
-          overflowY: "auto",
-          transition: "max-height 0.3s ease-in-out"
+          overflow: "visible",
+          display: expanded ? "block" : "none"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-          "div",
-          {
-            style: {
-              height: `${virtualizer.getTotalSize()}px`,
-              width: "100%",
-              position: "relative"
+        children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Drawer, { children: children || components.map((componentKey, i) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+            ComponentListItem,
+            {
+              label: config.components[componentKey]["label"] ?? componentKey,
+              name: componentKey,
+              index: i
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Drawer, { children: children || virtualizer.getVirtualItems().map((virtualItem) => {
-              const componentKey = components[virtualItem.index];
-              return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                "div",
-                {
-                  style: {
-                    position: "absolute",
-                    top: 0,
-                    left: 0,
-                    width: "100%",
-                    height: `${virtualItem.size}px`,
-                    transform: `translateY(${virtualItem.start}px)`
-                  },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                    ComponentListItem,
-                    {
-                      label: config.components[componentKey]["label"] ?? componentKey,
-                      name: componentKey
-                    }
-                  )
-                },
-                virtualItem.key
-              );
-            }) })
-          }
-        )
+            componentKey
+          );
+        }) })
       }
     )
   ] });
@@ -11604,10 +11628,10 @@ ComponentList.Item = ComponentListItem;
 init_store2();
 var import_jsx_runtime75 = require("react/jsx-runtime");
 var useComponentList = () => {
-  const [componentList, setComponentList] = (0, import_react79.useState)();
+  const [componentList, setComponentList] = (0, import_react78.useState)();
   const config = useAppStore((s) => s.config);
   const uiComponentList = useAppStore((s) => s.state.ui.componentList);
-  (0, import_react79.useEffect)(() => {
+  (0, import_react78.useEffect)(() => {
     if (Object.keys(uiComponentList).length > 0) {
       const matchedComponents = [];
       let _componentList;
@@ -11679,12 +11703,23 @@ var useComponentList = () => {
 
 // components/CredBuild/components/Components/index.tsx
 init_store2();
-var import_react80 = require("react");
+var import_react79 = require("react");
+init_lucide_react();
+
+// css-module:/home/crediblemark/Project/Credibuild/components/CredBuild/components/Components/styles.module.css#css-module
+init_react_import();
+var styles_module_default20 = { "CredBuildComponents": "_CredBuildComponents_17idm_1", "CredBuildComponents-searchContainer": "_CredBuildComponents-searchContainer_17idm_7", "CredBuildComponents-searchWrapper": "_CredBuildComponents-searchWrapper_17idm_16", "CredBuildComponents-searchInput": "_CredBuildComponents-searchInput_17idm_23", "CredBuildComponents-searchIcon": "_CredBuildComponents-searchIcon_17idm_42", "CredBuildComponents-clearButton": "_CredBuildComponents-clearButton_17idm_49", "CredBuildComponents-listContainer": "_CredBuildComponents-listContainer_17idm_69", "CredBuildComponents-noResults": "_CredBuildComponents-noResults_17idm_74" };
+
+// components/CredBuild/components/Components/index.tsx
+init_lib();
 var import_jsx_runtime76 = require("react/jsx-runtime");
+var getClassName29 = get_class_name_factory_default("CredBuildComponents", styles_module_default20);
 var Components = () => {
   const overrides = useAppStore((s) => s.overrides);
+  const config = useAppStore((s) => s.config);
+  const [searchTerm, setSearchTerm] = (0, import_react79.useState)("");
   const componentList = useComponentList();
-  const Wrapper = (0, import_react80.useMemo)(() => {
+  const Wrapper = (0, import_react79.useMemo)(() => {
     if (overrides.components) {
       console.warn(
         "The `components` override has been deprecated and renamed to `drawer`"
@@ -11692,18 +11727,89 @@ var Components = () => {
     }
     return overrides.components || overrides.drawer || "div";
   }, [overrides]);
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(ComponentList, { id: "all" }) });
+  const matchingComponents = (0, import_react79.useMemo)(() => {
+    if (!searchTerm.trim()) return [];
+    return Object.keys(config.components).filter((componentKey) => {
+      const componentConf = config.components[componentKey] || {};
+      const label = componentConf["label"] ?? componentKey;
+      return label.toLowerCase().includes(searchTerm.toLowerCase()) || componentKey.toLowerCase().includes(searchTerm.toLowerCase());
+    });
+  }, [searchTerm, config.components]);
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(Wrapper, { className: getClassName29(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: getClassName29("searchContainer"), children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: getClassName29("searchWrapper"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Search, { size: 14, className: getClassName29("searchIcon") }),
+      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+        "input",
+        {
+          type: "text",
+          className: getClassName29("searchInput"),
+          placeholder: "Search blocks...",
+          value: searchTerm,
+          onChange: (e) => setSearchTerm(e.target.value)
+        }
+      ),
+      searchTerm && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+        "button",
+        {
+          type: "button",
+          className: getClassName29("clearButton"),
+          onClick: () => setSearchTerm(""),
+          title: "Clear search",
+          children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(X, { size: 12 })
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: getClassName29("listContainer"), children: searchTerm.trim() ? matchingComponents.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { style: { padding: "10px 12px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
+        "div",
+        {
+          style: {
+            fontSize: "10px",
+            fontWeight: 700,
+            color: "var(--cb-silver-muted)",
+            marginBottom: "8px",
+            textTransform: "uppercase",
+            letterSpacing: "0.05em"
+          },
+          children: [
+            "Search Results (",
+            matchingComponents.length,
+            ")"
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Drawer, { children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "2px" }, children: matchingComponents.map((componentName, i) => {
+        const componentConf = config.components[componentName] || {};
+        return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+          ComponentList.Item,
+          {
+            label: componentConf["label"] ?? componentName,
+            name: componentName,
+            index: i
+          },
+          componentName
+        );
+      }) }) })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: getClassName29("noResults"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Inbox, { size: 20, strokeWidth: 1.5 }),
+      /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { children: [
+        'No blocks found matching "',
+        searchTerm,
+        '"'
+      ] })
+    ] }) : componentList ? componentList : /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(ComponentList, { id: "all" }) })
+  ] });
 };
 
 // components/CredBuild/components/Preview/index.tsx
 init_react_import();
 init_root_droppable_id();
-var import_react83 = require("react");
+var import_react82 = require("react");
 init_store2();
 
 // components/AutoFrame/index.tsx
 init_react_import();
-var import_react81 = require("react");
+var import_react80 = require("react");
 var import_object_hash = __toESM(require("object-hash"));
 var import_react_dom3 = require("react-dom");
 var import_jsx_runtime77 = require("react/jsx-runtime");
@@ -11756,7 +11862,7 @@ var CopyHostStyles = ({
   onStylesLoaded = () => null
 }) => {
   const { document: doc, window: win } = useFrame();
-  (0, import_react81.useEffect)(() => {
+  (0, import_react80.useEffect)(() => {
     if (!win || !doc) {
       return () => {
       };
@@ -11922,8 +12028,8 @@ var CopyHostStyles = ({
   }, [debug, doc, onStylesLoaded, win]);
   return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_jsx_runtime77.Fragment, { children });
 };
-var autoFrameContext = (0, import_react81.createContext)({});
-var useFrame = () => (0, import_react81.useContext)(autoFrameContext);
+var autoFrameContext = (0, import_react80.createContext)({});
+var useFrame = () => (0, import_react80.useContext)(autoFrameContext);
 function AutoFrame({
   children,
   className,
@@ -11936,20 +12042,20 @@ function AutoFrame({
   frameRef,
   ...props
 }) {
-  const [loaded, setLoaded] = (0, import_react81.useState)(false);
-  const [ctx, setCtx] = (0, import_react81.useState)({});
-  const [mountTarget, setMountTarget] = (0, import_react81.useState)();
-  const [stylesLoaded, setStylesLoaded] = (0, import_react81.useState)(false);
-  const handleStylesLoaded = (0, import_react81.useCallback)(() => {
+  const [loaded, setLoaded] = (0, import_react80.useState)(false);
+  const [ctx, setCtx] = (0, import_react80.useState)({});
+  const [mountTarget, setMountTarget] = (0, import_react80.useState)();
+  const [stylesLoaded, setStylesLoaded] = (0, import_react80.useState)(false);
+  const handleStylesLoaded = (0, import_react80.useCallback)(() => {
     setStylesLoaded(true);
   }, []);
-  const onReadyRef = (0, import_react81.useRef)(onReady);
-  const onNotReadyRef = (0, import_react81.useRef)(onNotReady);
-  (0, import_react81.useEffect)(() => {
+  const onReadyRef = (0, import_react80.useRef)(onReady);
+  const onNotReadyRef = (0, import_react80.useRef)(onNotReady);
+  (0, import_react80.useEffect)(() => {
     onReadyRef.current = onReady;
     onNotReadyRef.current = onNotReady;
   }, [onReady, onNotReady]);
-  (0, import_react81.useEffect)(() => {
+  (0, import_react80.useEffect)(() => {
     if (frameRef.current) {
       const doc = frameRef.current.contentDocument;
       const win = frameRef.current.contentWindow;
@@ -11997,7 +12103,7 @@ var AutoFrame_default = AutoFrame;
 
 // css-module:/home/crediblemark/Project/Credibuild/components/CredBuild/components/Preview/styles.module.css#css-module
 init_react_import();
-var styles_module_default20 = { "CredBuildPreview": "_CredBuildPreview_1z08a_1", "CredBuildPreview-frame": "_CredBuildPreview-frame_1z08a_6" };
+var styles_module_default21 = { "CredBuildPreview": "_CredBuildPreview_1z08a_1", "CredBuildPreview-frame": "_CredBuildPreview-frame_1z08a_6" };
 
 // components/CredBuild/components/Preview/index.tsx
 init_lib();
@@ -12005,7 +12111,7 @@ init_lib();
 // components/Render/index.tsx
 init_react_import();
 init_root_droppable_id();
-var import_react82 = require("react");
+var import_react81 = require("react");
 var import_jsx_runtime78 = require("react/jsx-runtime");
 function Render({
   config,
@@ -12037,7 +12143,7 @@ function Render({
     (props) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(SlotRender, { ...props, config, metadata })
   );
   const richtextProps = useRichtextProps(config.root?.fields, pageProps);
-  const nextContextValue = (0, import_react82.useMemo)(
+  const nextContextValue = (0, import_react81.useMemo)(
     () => ({
       mode: "render",
       depth: 0
@@ -12071,10 +12177,10 @@ var BubbledPointerEvent = class extends BaseEvent {
 
 // components/CredBuild/components/Preview/index.tsx
 var import_jsx_runtime79 = require("react/jsx-runtime");
-var getClassName29 = get_class_name_factory_default("CredBuildPreview", styles_module_default20);
+var getClassName30 = get_class_name_factory_default("CredBuildPreview", styles_module_default21);
 var useBubbleIframeEvents = (ref) => {
   const status = useAppStore((s) => s.status);
-  (0, import_react83.useEffect)(() => {
+  (0, import_react82.useEffect)(() => {
     if (ref.current && status === "READY") {
       const iframe = ref.current;
       const handlePointerMove = (event) => {
@@ -12122,7 +12228,7 @@ var Preview = ({ id = "credbuild-preview" }) => {
   const renderData = useAppStore(
     (s) => s.state.ui.previewMode === "edit" ? null : s.state.data
   );
-  const Page = (0, import_react83.useCallback)(
+  const Page = (0, import_react82.useCallback)(
     (pageProps) => {
       const propsWithSlots = useSlots(
         config,
@@ -12141,9 +12247,9 @@ var Preview = ({ id = "credbuild-preview" }) => {
     },
     [config]
   );
-  const Frame = (0, import_react83.useMemo)(() => overrides.iframe, [overrides]);
+  const Frame = (0, import_react82.useMemo)(() => overrides.iframe, [overrides]);
   const rootProps = root.props || root;
-  const ref = (0, import_react83.useRef)(null);
+  const ref = (0, import_react82.useRef)(null);
   useBubbleIframeEvents(ref);
   const inner = !renderData ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
     Page,
@@ -12159,7 +12265,7 @@ var Preview = ({ id = "credbuild-preview" }) => {
       children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(DropZonePure, { zone: rootDroppableId })
     }
   ) : /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Render, { data: renderData, config, metadata });
-  (0, import_react83.useEffect)(() => {
+  (0, import_react82.useEffect)(() => {
     if (!iframe.enabled) {
       setStatus("READY");
     }
@@ -12167,7 +12273,7 @@ var Preview = ({ id = "credbuild-preview" }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
     "div",
     {
-      className: getClassName29(),
+      className: getClassName30(),
       id,
       "data-credbuild-preview": true,
       onClick: (e) => {
@@ -12180,7 +12286,7 @@ var Preview = ({ id = "credbuild-preview" }) => {
         AutoFrame_default,
         {
           id: "preview-frame",
-          className: getClassName29("frame"),
+          className: getClassName30("frame"),
           "data-rfd-iframe": true,
           onReady: () => {
             setStatus("READY");
@@ -12200,7 +12306,7 @@ var Preview = ({ id = "credbuild-preview" }) => {
         "div",
         {
           id: "preview-frame",
-          className: getClassName29("frame"),
+          className: getClassName30("frame"),
           ref,
           "data-credbuild-entry": true,
           children: inner
@@ -12218,19 +12324,19 @@ init_react_import();
 
 // css-module:/home/crediblemark/Project/Credibuild/components/LayerTree/styles.module.css#css-module
 init_react_import();
-var styles_module_default21 = { "LayerTree": "_LayerTree_nus40_1", "LayerTree-zoneTitle": "_LayerTree-zoneTitle_nus40_11", "LayerTree-helper": "_LayerTree-helper_nus40_17", "Layer": "_Layer_nus40_1", "Layer-inner": "_Layer-inner_nus40_29", "Layer--containsZone": "_Layer--containsZone_nus40_35", "Layer-clickable": "_Layer-clickable_nus40_39", "Layer--isSelected": "_Layer--isSelected_nus40_58", "Layer-chevron": "_Layer-chevron_nus40_79", "Layer--childIsSelected": "_Layer--childIsSelected_nus40_80", "Layer-zones": "_Layer-zones_nus40_84", "Layer-title": "_Layer-title_nus40_98", "Layer-name": "_Layer-name_nus40_107", "Layer-icon": "_Layer-icon_nus40_113", "Layer-zoneIcon": "_Layer-zoneIcon_nus40_118" };
+var styles_module_default22 = { "LayerTree": "_LayerTree_nus40_1", "LayerTree-zoneTitle": "_LayerTree-zoneTitle_nus40_11", "LayerTree-helper": "_LayerTree-helper_nus40_17", "Layer": "_Layer_nus40_1", "Layer-inner": "_Layer-inner_nus40_29", "Layer--containsZone": "_Layer--containsZone_nus40_35", "Layer-clickable": "_Layer-clickable_nus40_39", "Layer--isSelected": "_Layer--isSelected_nus40_58", "Layer-chevron": "_Layer-chevron_nus40_79", "Layer--childIsSelected": "_Layer--childIsSelected_nus40_80", "Layer-zones": "_Layer-zones_nus40_84", "Layer-title": "_Layer-title_nus40_98", "Layer-name": "_Layer-name_nus40_107", "Layer-icon": "_Layer-icon_nus40_113", "Layer-zoneIcon": "_Layer-zoneIcon_nus40_118" };
 
 // components/LayerTree/index.tsx
 init_get_class_name_factory();
 init_lucide_react();
 init_root_droppable_id();
-var import_react84 = require("react");
+var import_react83 = require("react");
 init_store2();
 init_use_context_store();
-var import_react_virtual3 = require("@tanstack/react-virtual");
+var import_react_virtual2 = require("@tanstack/react-virtual");
 var import_jsx_runtime80 = require("react/jsx-runtime");
-var getClassName30 = get_class_name_factory_default("LayerTree", styles_module_default21);
-var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default21);
+var getClassName31 = get_class_name_factory_default("LayerTree", styles_module_default22);
+var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default22);
 var DEFAULT_LAYER_ROW_HEIGHT = 32;
 var LAYER_TREE_VIRTUALIZATION_OVERSCAN = 8;
 var MIN_VIRTUALIZED_LAYER_COUNT = 25;
@@ -12327,7 +12433,7 @@ var getScrollParent = (el) => {
   }
   return null;
 };
-var Layer = (0, import_react84.forwardRef)(function Layer2({
+var Layer = (0, import_react83.forwardRef)(function Layer2({
   childIsSelected,
   dataIndex,
   depth,
@@ -12337,13 +12443,13 @@ var Layer = (0, import_react84.forwardRef)(function Layer2({
   selectedPathIds
 }, ref) {
   const dispatch = useAppStore((s) => s.dispatch);
-  const zoneStore = (0, import_react84.useContext)(ZoneStoreContext);
+  const zoneStore = (0, import_react83.useContext)(ZoneStoreContext);
   const isHovering = useContextStore(
     ZoneStoreContext,
     (s) => s.hoveringComponent === node.itemId
   );
   const containsZone = node.childZones.length > 0;
-  const setItemSelector = (0, import_react84.useCallback)(
+  const setItemSelector = (0, import_react83.useCallback)(
     (itemSelector) => {
       dispatch({ type: "setUi", ui: { itemSelector } });
     },
@@ -12445,8 +12551,8 @@ var LayerTreeZone = ({
 }) => {
   const shouldVirtualize = depth === 0 && tree.items.length >= MIN_VIRTUALIZED_LAYER_COUNT;
   return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_jsx_runtime80.Fragment, { children: [
-    tree.label && /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: getClassName30("zoneTitle"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: getClassName30("zoneIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Layers, { size: "16" }) }),
+    tree.label && /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: getClassName31("zoneTitle"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: getClassName31("zoneIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Layers, { size: "16" }) }),
       tree.label
     ] }),
     shouldVirtualize ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
@@ -12474,8 +12580,8 @@ var StaticLayerTreeItems = ({
   selectedPathIds,
   tree
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("ul", { className: getClassName30(), children: [
-    tree.items.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: getClassName30("helper"), children: "No items" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("ul", { className: getClassName31(), children: [
+    tree.items.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: getClassName31("helper"), children: "No items" }),
     tree.items.map((node) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
       Layer,
       {
@@ -12496,8 +12602,8 @@ var VirtualizedLayerTreeItems = ({
   selectedPathIds,
   tree
 }) => {
-  const listRef = (0, import_react84.useRef)(null);
-  const virtualizer = (0, import_react_virtual3.useVirtualizer)({
+  const listRef = (0, import_react83.useRef)(null);
+  const virtualizer = (0, import_react_virtual2.useVirtualizer)({
     count: tree.items.length,
     estimateSize: (index) => getEstimatedRowHeight(tree.items[index].itemId),
     getItemKey: (index) => tree.items[index].itemId,
@@ -12564,8 +12670,8 @@ var VirtualizedLayerTreeItems = ({
       )
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("ul", { className: getClassName30(), ref: listRef, children: [
-    tree.items.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: getClassName30("helper"), children: "No items" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("ul", { className: getClassName31(), ref: listRef, children: [
+    tree.items.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: getClassName31("helper"), children: "No items" }),
     renderedItems
   ] });
 };
@@ -12588,7 +12694,7 @@ var LayerTree = ({
 
 // components/CredBuild/components/Outline/index.tsx
 init_store2();
-var import_react85 = require("react");
+var import_react84 = require("react");
 
 // lib/data/find-zones-for-area.ts
 init_react_import();
@@ -12610,13 +12716,13 @@ var Outline = () => {
   const rootZones = useAppStore(
     (0, import_shallow8.useShallow)((s) => findZonesForArea(s.state, "root"))
   );
-  const selectedPathIds = (0, import_react85.useMemo)(() => {
+  const selectedPathIds = (0, import_react84.useMemo)(() => {
     const selectedPath = selectedId ? nodes[selectedId]?.path : null;
     return new Set(
       selectedPath?.map((candidate) => candidate.split(":")[0]).filter(Boolean) || []
     );
   }, [nodes, selectedId]);
-  const trees = (0, import_react85.useMemo)(
+  const trees = (0, import_react84.useMemo)(
     () => rootZones.map(
       (zoneCompound) => buildLayerTree({
         config,
@@ -12628,7 +12734,7 @@ var Outline = () => {
     ),
     [config, nodes, rootZones, zones]
   );
-  const Wrapper = (0, import_react85.useMemo)(() => outlineOverride || "div", [outlineOverride]);
+  const Wrapper = (0, import_react84.useMemo)(() => outlineOverride || "div", [outlineOverride]);
   return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
     LayerTree,
     {
@@ -12644,7 +12750,7 @@ init_default_viewports();
 
 // lib/use-loaded-overrides.ts
 init_react_import();
-var import_react86 = require("react");
+var import_react85 = require("react");
 
 // lib/load-overrides.ts
 init_react_import();
@@ -12687,7 +12793,7 @@ var useLoadedOverrides = ({
   overrides,
   plugins
 }) => {
-  return (0, import_react86.useMemo)(() => {
+  return (0, import_react85.useMemo)(() => {
     return loadOverrides({ overrides, plugins });
   }, [plugins, overrides]);
 };
@@ -12698,7 +12804,7 @@ init_permissions();
 
 // lib/use-credbuild.ts
 init_react_import();
-var import_react87 = require("react");
+var import_react86 = require("react");
 var import_zustand6 = require("zustand");
 init_make_state_public();
 init_get_item();
@@ -12802,7 +12908,7 @@ var generateUseCredBuild = (store, getState) => {
   };
   return storeData;
 };
-var UseCredBuildStoreContext = (0, import_react87.createContext)(
+var UseCredBuildStoreContext = (0, import_react86.createContext)(
   null
 );
 var convertToPickedStore = (store) => {
@@ -12816,7 +12922,7 @@ var convertToPickedStore = (store) => {
   };
 };
 var useRegisterUseCredBuildStore = (appStore) => {
-  const [useCredBuildStore] = (0, import_react87.useState)(
+  const [useCredBuildStore] = (0, import_react86.useState)(
     () => (0, import_zustand6.createStore)(
       () => generateUseCredBuild(
         convertToPickedStore(appStore.getState()),
@@ -12824,7 +12930,7 @@ var useRegisterUseCredBuildStore = (appStore) => {
       )
     )
   );
-  (0, import_react87.useEffect)(() => {
+  (0, import_react86.useEffect)(() => {
     return appStore.subscribe(
       (store) => convertToPickedStore(store),
       (pickedStore) => {
@@ -12838,7 +12944,7 @@ var useRegisterUseCredBuildStore = (appStore) => {
 };
 function createUseCredBuild() {
   return function useCredBuild2(selector) {
-    const useCredBuildApi = (0, import_react87.useContext)(UseCredBuildStoreContext);
+    const useCredBuildApi = (0, import_react86.useContext)(UseCredBuildStoreContext);
     if (!useCredBuildApi) {
       throw new Error("useCredBuild must be used inside <CredBuild>.");
     }
@@ -12850,7 +12956,7 @@ function createUseCredBuild() {
   };
 }
 function useCredBuild() {
-  (0, import_react87.useEffect)(() => {
+  (0, import_react86.useEffect)(() => {
     console.warn(
       "You're using the `useCredBuild` method without a selector, which may cause unnecessary re-renders. Replace with `createUseCredBuild` and provide a selector for improved performance."
     );
@@ -12858,7 +12964,7 @@ function useCredBuild() {
   return createUseCredBuild()((s) => s);
 }
 function useGetCredBuild() {
-  const useCredBuildApi = (0, import_react87.useContext)(UseCredBuildStoreContext);
+  const useCredBuildApi = (0, import_react86.useContext)(UseCredBuildStoreContext);
   if (!useCredBuildApi) {
     throw new Error("useCredBuildGet must be used inside <CredBuild>.");
   }
@@ -12873,33 +12979,33 @@ init_to_component();
 
 // components/CredBuild/components/Layout/index.tsx
 init_react_import();
-var import_react101 = require("react");
+var import_react100 = require("react");
 init_lib();
 
 // components/CredBuild/context.tsx
 init_react_import();
-var import_react88 = require("react");
+var import_react87 = require("react");
 var import_jsx_runtime82 = require("react/jsx-runtime");
-var propsContext = (0, import_react88.createContext)({});
+var propsContext = (0, import_react87.createContext)({});
 function PropsProvider(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(propsContext.Provider, { value: props, children: props.children });
 }
-var usePropsContext = () => (0, import_react88.useContext)(propsContext);
+var usePropsContext = () => (0, import_react87.useContext)(propsContext);
 
 // css-module:/home/crediblemark/Project/Credibuild/components/CredBuild/components/Layout/styles.module.css#css-module
 init_react_import();
-var styles_module_default22 = { "CredBuildLayout": "_CredBuildLayout_14aaz_1", "CredBuildLayout-inner": "_CredBuildLayout-inner_14aaz_8", "CredBuildLayout--leftSideBarVisible": "_CredBuildLayout--leftSideBarVisible_14aaz_29", "CredBuildLayout--rightSideBarVisible": "_CredBuildLayout--rightSideBarVisible_14aaz_33", "CredBuild--hidePlugins": "_CredBuild--hidePlugins_14aaz_37", "CredBuildLayout-item": "_CredBuildLayout-item_14aaz_43", "CredBuildLayout-header": "_CredBuildLayout-header_14aaz_49", "CredBuildLayout-left": "_CredBuildLayout-left_14aaz_54", "CredBuildLayout-editor": "_CredBuildLayout-editor_14aaz_67", "CredBuildLayout-right": "_CredBuildLayout-right_14aaz_75", "CredBuildLayout-sidebar": "_CredBuildLayout-sidebar_14aaz_92", "CredBuildPluginTab": "_CredBuildPluginTab_14aaz_107", "CredBuildPluginTab--visible": "_CredBuildPluginTab--visible_14aaz_114", "CredBuildPluginTab-body": "_CredBuildPluginTab-body_14aaz_118", "CredBuildLayout--mounted": "_CredBuildLayout--mounted_14aaz_134" };
+var styles_module_default23 = { "CredBuildLayout": "_CredBuildLayout_14aaz_1", "CredBuildLayout-inner": "_CredBuildLayout-inner_14aaz_8", "CredBuildLayout--leftSideBarVisible": "_CredBuildLayout--leftSideBarVisible_14aaz_29", "CredBuildLayout--rightSideBarVisible": "_CredBuildLayout--rightSideBarVisible_14aaz_33", "CredBuild--hidePlugins": "_CredBuild--hidePlugins_14aaz_37", "CredBuildLayout-item": "_CredBuildLayout-item_14aaz_43", "CredBuildLayout-header": "_CredBuildLayout-header_14aaz_49", "CredBuildLayout-left": "_CredBuildLayout-left_14aaz_54", "CredBuildLayout-editor": "_CredBuildLayout-editor_14aaz_67", "CredBuildLayout-right": "_CredBuildLayout-right_14aaz_75", "CredBuildLayout-sidebar": "_CredBuildLayout-sidebar_14aaz_92", "CredBuildPluginTab": "_CredBuildPluginTab_14aaz_107", "CredBuildPluginTab--visible": "_CredBuildPluginTab--visible_14aaz_114", "CredBuildPluginTab-body": "_CredBuildPluginTab-body_14aaz_118", "CredBuildLayout--mounted": "_CredBuildLayout--mounted_14aaz_134" };
 
 // lib/use-inject-css.ts
 init_react_import();
-var import_react89 = require("react");
+var import_react88 = require("react");
 var styles = ``;
 var useInjectStyleSheet = (initialStyles, iframeEnabled) => {
-  const [el, setEl] = (0, import_react89.useState)();
-  (0, import_react89.useEffect)(() => {
+  const [el, setEl] = (0, import_react88.useState)();
+  (0, import_react88.useEffect)(() => {
     setEl(document.createElement("style"));
   }, []);
-  (0, import_react89.useEffect)(() => {
+  (0, import_react88.useEffect)(() => {
     if (!el || typeof window === "undefined") {
       return;
     }
@@ -12929,12 +13035,12 @@ init_use_hotkey();
 
 // lib/use-preview-mode-hotkeys.ts
 init_react_import();
-var import_react90 = require("react");
+var import_react89 = require("react");
 init_use_hotkey();
 init_store2();
 var usePreviewModeHotkeys = () => {
   const appStore = useAppStoreApi();
-  const toggleInteractive = (0, import_react90.useCallback)(() => {
+  const toggleInteractive = (0, import_react89.useCallback)(() => {
     const dispatch = appStore.getState().dispatch;
     dispatch({
       type: "setUi",
@@ -12949,9 +13055,9 @@ var usePreviewModeHotkeys = () => {
 
 // components/DragDropContext/index.tsx
 init_react_import();
-var import_react91 = require("@dnd-kit/react");
+var import_react90 = require("@dnd-kit/react");
 init_store2();
-var import_react92 = require("react");
+var import_react91 = require("react");
 var import_dom = require("@dnd-kit/dom");
 init_get_item();
 
@@ -13298,8 +13404,8 @@ var import_jsx_runtime84 = require("react/jsx-runtime");
 var DEBUG3 = false;
 var AREA_CHANGE_DEBOUNCE_MS = 100;
 var useTempDisableFallback = (timeout3) => {
-  const lastFallbackDisable = (0, import_react92.useRef)(null);
-  return (0, import_react92.useCallback)((manager) => {
+  const lastFallbackDisable = (0, import_react91.useRef)(null);
+  return (0, import_react91.useCallback)((manager) => {
     collisionStore.setState({ fallbackEnabled: false });
     const fallbackId = generateId();
     lastFallbackDisable.current = fallbackId;
@@ -13318,9 +13424,9 @@ var DragDropContextClient = ({
   const dispatch = useAppStore((s) => s.dispatch);
   const instanceId = useAppStore((s) => s.instanceId);
   const appStore = useAppStoreApi();
-  const debouncedParamsRef = (0, import_react92.useRef)(null);
+  const debouncedParamsRef = (0, import_react91.useRef)(null);
   const tempDisableFallback = useTempDisableFallback(100);
-  const [zoneStore] = (0, import_react92.useState)(() => {
+  const [zoneStore] = (0, import_react91.useState)(() => {
     const rootVirtualizers = /* @__PURE__ */ new Map();
     return (0, import_zustand7.createStore)(() => ({
       zoneDepthIndex: {},
@@ -13359,7 +13465,7 @@ var DragDropContextClient = ({
       }
     }));
   });
-  const getChanged2 = (0, import_react92.useCallback)(
+  const getChanged2 = (0, import_react91.useCallback)(
     (params) => {
       const { zoneDepthIndex = {}, areaDepthIndex = {} } = zoneStore.getState() || {};
       const stateHasZone = Object.keys(zoneDepthIndex).length > 0;
@@ -13380,7 +13486,7 @@ var DragDropContextClient = ({
     },
     [zoneStore]
   );
-  const setDeepestAndCollide = (0, import_react92.useCallback)(
+  const setDeepestAndCollide = (0, import_react91.useCallback)(
     (params, manager) => {
       const { zoneChanged, areaChanged } = getChanged2(params);
       if (!zoneChanged && !areaChanged) return;
@@ -13404,7 +13510,7 @@ var DragDropContextClient = ({
     setDeepestDb.cancel();
     debouncedParamsRef.current = null;
   };
-  (0, import_react92.useEffect)(() => {
+  (0, import_react91.useEffect)(() => {
     if (DEBUG3) {
       return zoneStore.subscribe(
         (s) => console.log(
@@ -13415,7 +13521,7 @@ var DragDropContextClient = ({
       );
     }
   }, [zoneStore]);
-  const [plugins] = (0, import_react92.useState)(() => [
+  const [plugins] = (0, import_react91.useState)(() => [
     ...disableAutoScroll ? import_dom.defaultPreset.plugins.filter((plugin) => plugin !== import_dom.AutoScroller) : import_dom.defaultPreset.plugins,
     createNestedDroppablePlugin(
       {
@@ -13463,10 +13569,10 @@ var DragDropContextClient = ({
     )
   ]);
   const sensors = useSensors();
-  const [dragListeners, setDragListeners] = (0, import_react92.useState)({});
-  const dragMode = (0, import_react92.useRef)(null);
-  const initialSelector = (0, import_react92.useRef)(void 0);
-  const nextContextValue = (0, import_react92.useMemo)(
+  const [dragListeners, setDragListeners] = (0, import_react91.useState)({});
+  const dragMode = (0, import_react91.useRef)(null);
+  const initialSelector = (0, import_react91.useRef)(void 0);
+  const nextContextValue = (0, import_react91.useMemo)(
     () => ({
       mode: "edit",
       areaId: "root",
@@ -13482,7 +13588,7 @@ var DragDropContextClient = ({
         setDragListeners
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-        import_react91.DragDropProvider,
+        import_react90.DragDropProvider,
         {
           plugins,
           sensors,
@@ -13722,7 +13828,7 @@ var DragDropContext = ({
 
 // components/CredBuild/components/Header/index.tsx
 init_react_import();
-var import_react95 = require("react");
+var import_react94 = require("react");
 init_store2();
 init_lucide_react();
 init_Heading();
@@ -13736,12 +13842,12 @@ init_get_class_name_factory();
 
 // css-module:/home/crediblemark/Project/Credibuild/components/MenuBar/styles.module.css#css-module
 init_react_import();
-var styles_module_default23 = { "MenuBar": "_MenuBar_1m2ld_1", "MenuBar--menuOpen": "_MenuBar--menuOpen_1m2ld_14", "MenuBar-inner": "_MenuBar-inner_1m2ld_29", "MenuBar-history": "_MenuBar-history_1m2ld_45" };
+var styles_module_default24 = { "MenuBar": "_MenuBar_1m2ld_1", "MenuBar--menuOpen": "_MenuBar--menuOpen_1m2ld_14", "MenuBar-inner": "_MenuBar-inner_1m2ld_29", "MenuBar-history": "_MenuBar-history_1m2ld_45" };
 
 // components/MenuBar/index.tsx
 init_store2();
 var import_jsx_runtime85 = require("react/jsx-runtime");
-var getClassName31 = get_class_name_factory_default("MenuBar", styles_module_default23);
+var getClassName32 = get_class_name_factory_default("MenuBar", styles_module_default24);
 function MenuBar({
   menuOpen = false,
   renderHeaderActions,
@@ -13754,7 +13860,7 @@ function MenuBar({
   return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
     "div",
     {
-      className: getClassName31({ menuOpen }),
+      className: getClassName32({ menuOpen }),
       onClick: (event) => {
         const element = event.target;
         if (window.matchMedia("(min-width: 638px)").matches) {
@@ -13764,8 +13870,8 @@ function MenuBar({
           setMenuOpen(false);
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: getClassName31("inner"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: getClassName31("history"), children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: getClassName32("inner"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: getClassName32("history"), children: [
           /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
             IconButton,
             {
@@ -13802,12 +13908,12 @@ init_react_import();
 init_lucide_react();
 init_IconButton2();
 init_store2();
-var import_react93 = require("react");
+var import_react92 = require("react");
 init_lib();
 
 // css-module:/home/crediblemark/Project/Credibuild/components/ViewportControls/styles.module.css#css-module
 init_react_import();
-var styles_module_default24 = { "ViewportControls": "_ViewportControls_1e0ai_1", "ViewportControls--fullScreen": "_ViewportControls--fullScreen_1e0ai_5", "ViewportControls-toggleButton": "_ViewportControls-toggleButton_1e0ai_14", "ViewportControls--isExpanded": "_ViewportControls--isExpanded_1e0ai_38", "ViewportControls-actions": "_ViewportControls-actions_1e0ai_42", "ViewportControls-actionsInner": "_ViewportControls-actionsInner_1e0ai_46", "ViewportControls-divider": "_ViewportControls-divider_1e0ai_75", "ViewportControls-zoomSelect": "_ViewportControls-zoomSelect_1e0ai_81", "ViewportControls-zoom": "_ViewportControls-zoom_1e0ai_81", "ViewportButton-inner": "_ViewportButton-inner_1e0ai_111", "ViewportButton--isActive": "_ViewportButton--isActive_1e0ai_119" };
+var styles_module_default25 = { "ViewportControls": "_ViewportControls_gefvg_1", "ViewportControls--fullScreen": "_ViewportControls--fullScreen_gefvg_5", "ViewportControls-toggleButton": "_ViewportControls-toggleButton_gefvg_14", "ViewportControls--isExpanded": "_ViewportControls--isExpanded_gefvg_38", "ViewportControls-actions": "_ViewportControls-actions_gefvg_42", "ViewportControls-actionsInner": "_ViewportControls-actionsInner_gefvg_46", "ViewportControls-divider": "_ViewportControls-divider_gefvg_76", "ViewportControls-zoomSelect": "_ViewportControls-zoomSelect_gefvg_83", "ViewportControls-zoom": "_ViewportControls-zoom_gefvg_83", "ViewportButton-inner": "_ViewportButton-inner_gefvg_114", "ViewportButton--isActive": "_ViewportButton--isActive_gefvg_122" };
 
 // components/ViewportControls/index.tsx
 var import_jsx_runtime86 = require("react/jsx-runtime");
@@ -13817,8 +13923,8 @@ var icons = {
   Monitor: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Monitor, { size: 16 }),
   FullWidth: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Expand, { size: 16 })
 };
-var getClassName32 = get_class_name_factory_default("ViewportControls", styles_module_default24);
-var getClassNameButton = get_class_name_factory_default("ViewportButton", styles_module_default24);
+var getClassName33 = get_class_name_factory_default("ViewportControls", styles_module_default25);
+var getClassNameButton = get_class_name_factory_default("ViewportButton", styles_module_default25);
 var ActionButton = ({
   children,
   title,
@@ -13859,7 +13965,7 @@ var ViewportControls = ({
   const defaultsContainAutoZoom = defaultZoomOptions.find(
     (option) => option.value === autoZoom
   );
-  const zoomOptions = (0, import_react93.useMemo)(() => {
+  const zoomOptions = (0, import_react92.useMemo)(() => {
     const options = [
       ...defaultZoomOptions,
       ...defaultsContainAutoZoom || isNaN(autoZoom) ? [] : [
@@ -13871,20 +13977,20 @@ var ViewportControls = ({
     ].filter((a) => a.value <= (autoZoom || 1)).sort((a, b) => a.value > b.value ? 1 : -1);
     return options.length > 0 ? options : defaultZoomOptions;
   }, [autoZoom, defaultsContainAutoZoom]);
-  const [activeViewport, setActiveViewport] = (0, import_react93.useState)(
+  const [activeViewport, setActiveViewport] = (0, import_react92.useState)(
     uiViewports.current.width
   );
-  (0, import_react93.useEffect)(() => {
+  (0, import_react92.useEffect)(() => {
     setActiveViewport(uiViewports.current.width);
   }, [uiViewports.current.width, uiViewports]);
-  const [isExpanded, setIsExpanded] = (0, import_react93.useState)(false);
+  const [isExpanded, setIsExpanded] = (0, import_react92.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
     "div",
     {
-      className: getClassName32({ isExpanded, fullScreen }),
+      className: getClassName33({ isExpanded, fullScreen }),
       suppressHydrationWarning: true,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: getClassName32("actions"), children: /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: getClassName32("actionsInner"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: getClassName33("actions"), children: /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: getClassName33("actionsInner"), children: [
           viewports.map((viewport, i) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
             ActionButton,
             {
@@ -13898,7 +14004,7 @@ var ViewportControls = ({
             },
             i
           )),
-          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: getClassName32("divider") }),
+          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: getClassName33("divider") }),
           /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
             ActionButton,
             {
@@ -13933,12 +14039,12 @@ var ViewportControls = ({
               children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(ZoomIn, { size: 16 })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: getClassName32("zoom"), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: getClassName32("divider") }),
+          /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: getClassName33("zoom"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: getClassName33("divider") }),
             /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
               "select",
               {
-                className: getClassName32("zoomSelect"),
+                className: getClassName33("zoomSelect"),
                 value: zoom.toString(),
                 onClick: (e) => {
                   e.stopPropagation();
@@ -13961,7 +14067,7 @@ var ViewportControls = ({
         /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
           "button",
           {
-            className: getClassName32("toggleButton"),
+            className: getClassName33("toggleButton"),
             title: "Toggle viewport menu",
             onClick: () => setIsExpanded((s) => !s),
             children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(X, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Monitor, { size: 16 })
@@ -13977,14 +14083,14 @@ var import_shallow9 = require("zustand/react/shallow");
 
 // lib/frame-context.tsx
 init_react_import();
-var import_react94 = require("react");
+var import_react93 = require("react");
 var import_jsx_runtime87 = require("react/jsx-runtime");
-var FrameContext = (0, import_react94.createContext)(null);
+var FrameContext = (0, import_react93.createContext)(null);
 var FrameProvider = ({
   children
 }) => {
-  const frameRef = (0, import_react94.useRef)(null);
-  const value = (0, import_react94.useMemo)(
+  const frameRef = (0, import_react93.useRef)(null);
+  const value = (0, import_react93.useMemo)(
     () => ({
       frameRef
     }),
@@ -13993,7 +14099,7 @@ var FrameProvider = ({
   return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(FrameContext.Provider, { value, children });
 };
 var useCanvasFrame = () => {
-  const context = (0, import_react94.useContext)(FrameContext);
+  const context = (0, import_react93.useContext)(FrameContext);
   if (context === null) {
     throw new Error("useCanvasFrame must be used within a FrameProvider");
   }
@@ -14002,11 +14108,11 @@ var useCanvasFrame = () => {
 
 // css-module:/home/crediblemark/Project/Credibuild/components/CredBuild/components/Header/styles.module.css#css-module
 init_react_import();
-var styles_module_default25 = { "CredBuildHeader": "_CredBuildHeader_qzv5u_1", "CredBuildHeader-inner": "_CredBuildHeader-inner_qzv5u_20", "CredBuildHeader-viewportTools": "_CredBuildHeader-viewportTools_qzv5u_28", "CredBuildHeader-leftActions": "_CredBuildHeader-leftActions_qzv5u_35", "CredBuildHeader-toggle": "_CredBuildHeader-toggle_qzv5u_41", "CredBuildHeader-leftSideBarToggle": "_CredBuildHeader-leftSideBarToggle_qzv5u_47", "CredBuildHeader-rightSideBarToggle": "_CredBuildHeader-rightSideBarToggle_qzv5u_48", "CredBuildHeader-title": "_CredBuildHeader-title_qzv5u_52", "CredBuildHeader-path": "_CredBuildHeader-path_qzv5u_57", "CredBuildHeader-tools": "_CredBuildHeader-tools_qzv5u_68", "CredBuildHeader-menuButton": "_CredBuildHeader-menuButton_qzv5u_75" };
+var styles_module_default26 = { "CredBuildHeader": "_CredBuildHeader_qzv5u_1", "CredBuildHeader-inner": "_CredBuildHeader-inner_qzv5u_20", "CredBuildHeader-viewportTools": "_CredBuildHeader-viewportTools_qzv5u_28", "CredBuildHeader-leftActions": "_CredBuildHeader-leftActions_qzv5u_35", "CredBuildHeader-toggle": "_CredBuildHeader-toggle_qzv5u_41", "CredBuildHeader-leftSideBarToggle": "_CredBuildHeader-leftSideBarToggle_qzv5u_47", "CredBuildHeader-rightSideBarToggle": "_CredBuildHeader-rightSideBarToggle_qzv5u_48", "CredBuildHeader-title": "_CredBuildHeader-title_qzv5u_52", "CredBuildHeader-path": "_CredBuildHeader-path_qzv5u_57", "CredBuildHeader-tools": "_CredBuildHeader-tools_qzv5u_68", "CredBuildHeader-menuButton": "_CredBuildHeader-menuButton_qzv5u_75" };
 
 // components/CredBuild/components/Header/index.tsx
 var import_jsx_runtime88 = require("react/jsx-runtime");
-var getClassName33 = get_class_name_factory_default("CredBuildHeader", styles_module_default25);
+var getClassName34 = get_class_name_factory_default("CredBuildHeader", styles_module_default26);
 var HeaderInner = ({
   hidePlugins,
   theme
@@ -14021,7 +14127,7 @@ var HeaderInner = ({
   } = usePropsContext();
   const dispatch = useAppStore((s) => s.dispatch);
   const appStore = useAppStoreApi();
-  const defaultHeaderRender = (0, import_react95.useMemo)(() => {
+  const defaultHeaderRender = (0, import_react94.useMemo)(() => {
     if (renderHeader) {
       console.warn(
         "`renderHeader` is deprecated. Please use `overrides.header` and the `useCredBuild` hook instead"
@@ -14035,7 +14141,7 @@ var HeaderInner = ({
     }
     return DefaultOverride;
   }, [renderHeader, dispatch]);
-  const defaultHeaderActionsRender = (0, import_react95.useMemo)(() => {
+  const defaultHeaderActionsRender = (0, import_react94.useMemo)(() => {
     if (renderHeaderActions) {
       console.warn(
         "`renderHeaderActions` is deprecated. Please use `overrides.headerActions` and the `useCredBuild` hook instead."
@@ -14055,7 +14161,7 @@ var HeaderInner = ({
   const CustomHeaderActions = useAppStore(
     (s) => s.overrides.headerActions || defaultHeaderActionsRender
   );
-  const [menuOpen, setMenuOpen] = (0, import_react95.useState)(false);
+  const [menuOpen, setMenuOpen] = (0, import_react94.useState)(false);
   const rootTitle = useAppStore((s) => {
     const rootData = s.state.indexes.nodes["root"]?.data;
     return rootData.props.title ?? "";
@@ -14084,7 +14190,7 @@ var HeaderInner = ({
   );
   const { frameRef } = useCanvasFrame();
   const resetAutoZoom = useResetAutoZoom(frameRef);
-  const toggleSidebars = (0, import_react95.useCallback)(
+  const toggleSidebars = (0, import_react94.useCallback)(
     (sidebar) => {
       const widerViewport = window.matchMedia("(min-width: 638px)").matches;
       const sideBarVisible = sidebar === "left" ? leftSideBarVisible : rightSideBarVisible;
@@ -14128,13 +14234,13 @@ var HeaderInner = ({
       children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
         "header",
         {
-          className: getClassName33({
+          className: getClassName34({
             leftSideBarVisible,
             rightSideBarVisible,
             hidePlugins
           }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: getClassName33("inner"), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: getClassName33("leftActions"), children: [
+          children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: getClassName34("inner"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: getClassName34("leftActions"), children: [
               /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { style: { marginRight: "8px", display: "flex", gap: "8px", alignItems: "center" }, children: [
                 /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
                   Button,
@@ -14168,8 +14274,8 @@ var HeaderInner = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: getClassName33("toggle"), children: [
-                /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: getClassName33("leftSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: getClassName34("toggle"), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: getClassName34("leftSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
                   IconButton,
                   {
                     type: "button",
@@ -14180,7 +14286,7 @@ var HeaderInner = ({
                     children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(PanelLeft, { size: 16, focusable: "false" })
                   }
                 ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: getClassName33("rightSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: getClassName34("rightSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
                   IconButton,
                   {
                     type: "button",
@@ -14192,12 +14298,12 @@ var HeaderInner = ({
                   }
                 ) })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: getClassName33("title"), children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(Heading7, { rank: "2", size: "xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: getClassName34("title"), children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(Heading7, { rank: "2", size: "xs", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { style: { fontSize: "11px", textTransform: "uppercase", letterSpacing: "0.08em", fontWeight: 600 }, children: headerTitle || rootTitle || "Page" }),
-                headerPath && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_jsx_runtime88.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("code", { className: getClassName33("path"), style: { fontSize: "10px", opacity: 0.6, marginLeft: "8px" }, children: headerPath }) })
+                headerPath && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_jsx_runtime88.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("code", { className: getClassName34("path"), style: { fontSize: "10px", opacity: 0.6, marginLeft: "8px" }, children: headerPath }) })
               ] }) })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: getClassName33("viewportTools"), children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: getClassName34("viewportTools"), children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
               ViewportControls,
               {
                 fullScreen: _experimentalFullScreenCanvas,
@@ -14223,8 +14329,8 @@ var HeaderInner = ({
                 }
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: getClassName33("tools"), children: [
-              /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: getClassName33("menuButton"), children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: getClassName34("tools"), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: getClassName34("menuButton"), children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
                 IconButton,
                 {
                   type: "button",
@@ -14274,14 +14380,14 @@ var HeaderInner = ({
     }
   );
 };
-var Header = (0, import_react95.memo)(HeaderInner);
+var Header = (0, import_react94.memo)(HeaderInner);
 
 // components/SidebarSection/index.tsx
 init_react_import();
 
 // css-module:/home/crediblemark/Project/Credibuild/components/SidebarSection/styles.module.css#css-module
 init_react_import();
-var styles_module_default26 = { "SidebarSection": "_SidebarSection_17qyf_1", "SidebarSection-title": "_SidebarSection-title_17qyf_12", "SidebarSection--noBorderTop": "_SidebarSection--noBorderTop_17qyf_38", "SidebarSection-content": "_SidebarSection-content_17qyf_42", "SidebarSection-breadcrumbLabel": "_SidebarSection-breadcrumbLabel_17qyf_51", "SidebarSection-breadcrumbs": "_SidebarSection-breadcrumbs_17qyf_80", "SidebarSection-breadcrumb": "_SidebarSection-breadcrumb_17qyf_51", "SidebarSection-heading": "_SidebarSection-heading_17qyf_92", "SidebarSection-loadingOverlay": "_SidebarSection-loadingOverlay_17qyf_96" };
+var styles_module_default27 = { "SidebarSection": "_SidebarSection_1w6vl_1", "SidebarSection-title": "_SidebarSection-title_1w6vl_12", "SidebarSection--noBorderTop": "_SidebarSection--noBorderTop_1w6vl_38", "SidebarSection-content": "_SidebarSection-content_1w6vl_42", "SidebarSection-breadcrumbLabel": "_SidebarSection-breadcrumbLabel_1w6vl_51", "SidebarSection-breadcrumbs": "_SidebarSection-breadcrumbs_1w6vl_80", "SidebarSection-breadcrumb": "_SidebarSection-breadcrumb_1w6vl_51", "SidebarSection-heading": "_SidebarSection-heading_1w6vl_92", "SidebarSection-loadingOverlay": "_SidebarSection-loadingOverlay_1w6vl_96" };
 
 // components/SidebarSection/index.tsx
 init_get_class_name_factory();
@@ -14293,7 +14399,7 @@ init_react_import();
 
 // css-module:/home/crediblemark/Project/Credibuild/components/Breadcrumbs/styles.module.css#css-module
 init_react_import();
-var styles_module_default27 = { "Breadcrumbs": "_Breadcrumbs_1e0gb_1", "Breadcrumbs-breadcrumbLabel": "_Breadcrumbs-breadcrumbLabel_1e0gb_7", "Breadcrumbs-breadcrumb": "_Breadcrumbs-breadcrumb_1e0gb_7" };
+var styles_module_default28 = { "Breadcrumbs": "_Breadcrumbs_1e0gb_1", "Breadcrumbs-breadcrumbLabel": "_Breadcrumbs-breadcrumbLabel_1e0gb_7", "Breadcrumbs-breadcrumb": "_Breadcrumbs-breadcrumb_1e0gb_7" };
 
 // components/Breadcrumbs/index.tsx
 init_get_class_name_factory();
@@ -14301,14 +14407,14 @@ init_lucide_react();
 
 // lib/use-breadcrumbs.ts
 init_react_import();
-var import_react96 = require("react");
+var import_react95 = require("react");
 init_store2();
 var useBreadcrumbs = (renderCount) => {
   const selectedId = useAppStore((s) => s.selectedItem?.props.id);
   const config = useAppStore((s) => s.config);
   const path = useAppStore((s) => s.state.indexes.nodes[selectedId]?.path);
   const appStore = useAppStoreApi();
-  return (0, import_react96.useMemo)(() => {
+  return (0, import_react95.useMemo)(() => {
     const breadcrumbs = path?.map((zoneCompound) => {
       const [componentId] = zoneCompound.split(":");
       if (componentId === "root") {
@@ -14340,20 +14446,20 @@ var useBreadcrumbs = (renderCount) => {
 // components/Breadcrumbs/index.tsx
 init_store2();
 var import_jsx_runtime89 = require("react/jsx-runtime");
-var getClassName34 = get_class_name_factory_default("Breadcrumbs", styles_module_default27);
+var getClassName35 = get_class_name_factory_default("Breadcrumbs", styles_module_default28);
 var Breadcrumbs = ({
   children,
   numParents = 1
 }) => {
   const setUi = useAppStore((s) => s.setUi);
   const breadcrumbs = useBreadcrumbs(numParents);
-  return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: getClassName34(), children: [
-    breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: getClassName34("breadcrumb"), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: getClassName35(), children: [
+    breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: getClassName35("breadcrumb"), children: [
       /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
         "button",
         {
           type: "button",
-          className: getClassName34("breadcrumbLabel"),
+          className: getClassName35("breadcrumbLabel"),
           onClick: () => setUi({ itemSelector: breadcrumb.selector }),
           children: breadcrumb.label
         }
@@ -14366,7 +14472,7 @@ var Breadcrumbs = ({
 
 // components/SidebarSection/index.tsx
 var import_jsx_runtime90 = require("react/jsx-runtime");
-var getClassName35 = get_class_name_factory_default("SidebarSection", styles_module_default26);
+var getClassName36 = get_class_name_factory_default("SidebarSection", styles_module_default27);
 var SidebarSection = ({
   children,
   title,
@@ -14375,25 +14481,25 @@ var SidebarSection = ({
   noBorderTop,
   isLoading
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: getClassName35({ noBorderTop }), style: { background }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: getClassName35("title"), children: /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: getClassName35("breadcrumbs"), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: getClassName36({ noBorderTop }), style: { background }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: getClassName36("title"), children: /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: getClassName36("breadcrumbs"), children: [
       showBreadcrumbs && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Breadcrumbs, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: getClassName35("heading"), children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Heading7, { rank: "2", size: "xs", children: title }) })
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: getClassName36("heading"), children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Heading7, { rank: "2", size: "xs", children: title }) })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: getClassName35("content"), children }),
-    isLoading && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: getClassName35("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Loader, { size: 32 }) })
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: getClassName36("content"), children }),
+    isLoading && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: getClassName36("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Loader, { size: 32 }) })
   ] });
 };
 
 // components/CredBuild/components/Canvas/index.tsx
 init_react_import();
 init_css_box_model_esm();
-var import_react97 = require("react");
+var import_react96 = require("react");
 init_store2();
 
 // css-module:/home/crediblemark/Project/Credibuild/components/CredBuild/components/Canvas/styles.module.css#css-module
 init_react_import();
-var styles_module_default28 = { "CredBuildCanvas": "_CredBuildCanvas_1ivia_1", "CredBuildCanvas--fullScreen": "_CredBuildCanvas--fullScreen_1ivia_22", "CredBuildCanvas-inner": "_CredBuildCanvas-inner_1ivia_33", "CredBuildCanvas-root": "_CredBuildCanvas-root_1ivia_42", "CredBuildCanvas--ready": "_CredBuildCanvas--ready_1ivia_67", "CredBuildCanvas-loader": "_CredBuildCanvas-loader_1ivia_72", "CredBuildCanvas--showLoader": "_CredBuildCanvas--showLoader_1ivia_82" };
+var styles_module_default29 = { "CredBuildCanvas": "_CredBuildCanvas_1ivia_1", "CredBuildCanvas--fullScreen": "_CredBuildCanvas--fullScreen_1ivia_22", "CredBuildCanvas-inner": "_CredBuildCanvas-inner_1ivia_33", "CredBuildCanvas-root": "_CredBuildCanvas-root_1ivia_42", "CredBuildCanvas--ready": "_CredBuildCanvas--ready_1ivia_67", "CredBuildCanvas-loader": "_CredBuildCanvas-loader_1ivia_72", "CredBuildCanvas--showLoader": "_CredBuildCanvas--showLoader_1ivia_82" };
 
 // components/CredBuild/components/Canvas/index.tsx
 init_lib();
@@ -14401,7 +14507,7 @@ init_Loader();
 var import_shallow10 = require("zustand/react/shallow");
 init_default_viewports();
 var import_jsx_runtime91 = require("react/jsx-runtime");
-var getClassName36 = get_class_name_factory_default("CredBuildCanvas", styles_module_default28);
+var getClassName37 = get_class_name_factory_default("CredBuildCanvas", styles_module_default29);
 var ZOOM_ON_CHANGE = true;
 var TRANSITION_DURATION = 150;
 var Canvas = () => {
@@ -14444,17 +14550,17 @@ var Canvas = () => {
       viewports: s.state.ui.viewports
     }))
   );
-  const [showTransition, setShowTransition] = (0, import_react97.useState)(false);
-  const isResizingRef = (0, import_react97.useRef)(false);
-  const defaultRender = (0, import_react97.useMemo)(() => {
+  const [showTransition, setShowTransition] = (0, import_react96.useState)(false);
+  const isResizingRef = (0, import_react96.useRef)(false);
+  const defaultRender = (0, import_react96.useMemo)(() => {
     const CredBuildDefault = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(import_jsx_runtime91.Fragment, { children });
     return CredBuildDefault;
   }, []);
-  const CustomPreview = (0, import_react97.useMemo)(
+  const CustomPreview = (0, import_react96.useMemo)(
     () => overrides.preview || defaultRender,
     [overrides, defaultRender]
   );
-  const getFrameDimensions = (0, import_react97.useCallback)(() => {
+  const getFrameDimensions = (0, import_react96.useCallback)(() => {
     if (frameRef.current) {
       const frame = frameRef.current;
       const box = getBox(frame);
@@ -14462,7 +14568,7 @@ var Canvas = () => {
     }
     return { width: 0, height: 0 };
   }, [frameRef]);
-  (0, import_react97.useEffect)(() => {
+  (0, import_react96.useEffect)(() => {
     resetAutoZoom();
   }, [
     frameRef,
@@ -14472,7 +14578,7 @@ var Canvas = () => {
     viewports,
     resetAutoZoom
   ]);
-  (0, import_react97.useEffect)(() => {
+  (0, import_react96.useEffect)(() => {
     const { height: frameHeight } = getFrameDimensions();
     if (viewports.current.height === "auto") {
       const newRootHeight = frameHeight / zoomConfig.zoom;
@@ -14490,12 +14596,12 @@ var Canvas = () => {
     viewports,
     zoomConfig.rootHeight
   ]);
-  (0, import_react97.useEffect)(() => {
+  (0, import_react96.useEffect)(() => {
     if (ZOOM_ON_CHANGE) {
       resetAutoZoom();
     }
   }, [viewports.current.width, viewports, resetAutoZoom]);
-  (0, import_react97.useEffect)(() => {
+  (0, import_react96.useEffect)(() => {
     if (!frameRef.current) return;
     const resizeObserver = new ResizeObserver(() => {
       if (!isResizingRef.current) {
@@ -14507,14 +14613,14 @@ var Canvas = () => {
       resizeObserver.disconnect();
     };
   }, [frameRef, resetAutoZoom]);
-  const [showLoader, setShowLoader] = (0, import_react97.useState)(false);
-  (0, import_react97.useEffect)(() => {
+  const [showLoader, setShowLoader] = (0, import_react96.useState)(false);
+  (0, import_react96.useEffect)(() => {
     setTimeout(() => {
       setShowLoader(true);
     }, 500);
   }, []);
   const appStoreApi = useAppStoreApi();
-  (0, import_react97.useEffect)(() => {
+  (0, import_react96.useEffect)(() => {
     if (typeof window === "undefined") return;
     if (uiProp?.viewports?.current) return;
     const viewportWidth = window.innerWidth;
@@ -14571,7 +14677,7 @@ var Canvas = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
     "div",
     {
-      className: getClassName36({
+      className: getClassName37({
         ready: status === "READY" || !iframe.enabled || !iframe.waitForStyles,
         showLoader,
         fullScreen: _experimentalFullScreenCanvas
@@ -14586,11 +14692,11 @@ var Canvas = () => {
           });
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: getClassName36("inner"), ref: frameRef, children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: getClassName37("inner"), ref: frameRef, children: [
         /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
           "div",
           {
-            className: getClassName36("root"),
+            className: getClassName37("root"),
             style: {
               width: iframe.enabled ? viewports.current.width : "100%",
               height: !zoomConfig.rootHeight || isNaN(zoomConfig.rootHeight) ? "100%" : zoomConfig.rootHeight,
@@ -14608,7 +14714,7 @@ var Canvas = () => {
             children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(CustomPreview, { children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Preview, {}) })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: getClassName36("loader"), children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Loader, { size: 24 }) })
+        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: getClassName37("loader"), children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Loader, { size: 24 }) })
       ] })
     }
   );
@@ -14616,15 +14722,15 @@ var Canvas = () => {
 
 // lib/use-sidebar-resize.ts
 init_react_import();
-var import_react98 = require("react");
+var import_react97 = require("react");
 init_store2();
 function useSidebarResize(position, dispatch) {
-  const [width, setWidth] = (0, import_react98.useState)(null);
-  const sidebarRef = (0, import_react98.useRef)(null);
+  const [width, setWidth] = (0, import_react97.useState)(null);
+  const sidebarRef = (0, import_react97.useRef)(null);
   const storeWidth = useAppStore(
     (s) => position === "left" ? s.state.ui.leftSideBarWidth : s.state.ui.rightSideBarWidth
   );
-  (0, import_react98.useEffect)(() => {
+  (0, import_react97.useEffect)(() => {
     if (typeof window !== "undefined" && !storeWidth) {
       try {
         const savedWidths = localStorage.getItem("credbuild-sidebar-widths");
@@ -14649,12 +14755,12 @@ function useSidebarResize(position, dispatch) {
       }
     }
   }, [dispatch, position, storeWidth]);
-  (0, import_react98.useEffect)(() => {
+  (0, import_react97.useEffect)(() => {
     if (storeWidth !== void 0) {
       setWidth(storeWidth);
     }
   }, [storeWidth]);
-  const handleResizeEnd = (0, import_react98.useCallback)(
+  const handleResizeEnd = (0, import_react97.useCallback)(
     (width2) => {
       dispatch({
         type: "setUi",
@@ -14702,17 +14808,17 @@ init_react_import();
 
 // components/CredBuild/components/ResizeHandle/index.tsx
 init_react_import();
-var import_react99 = require("react");
+var import_react98 = require("react");
 init_get_class_name_factory();
 
 // css-module:/home/crediblemark/Project/Credibuild/components/CredBuild/components/ResizeHandle/styles.module.css#css-module
 init_react_import();
-var styles_module_default29 = { "ResizeHandle": "_ResizeHandle_144bf_2", "ResizeHandle--left": "_ResizeHandle--left_144bf_16", "ResizeHandle--right": "_ResizeHandle--right_144bf_20" };
+var styles_module_default30 = { "ResizeHandle": "_ResizeHandle_144bf_2", "ResizeHandle--left": "_ResizeHandle--left_144bf_16", "ResizeHandle--right": "_ResizeHandle--right_144bf_20" };
 
 // components/CredBuild/components/ResizeHandle/index.tsx
 init_lib();
 var import_jsx_runtime92 = require("react/jsx-runtime");
-var getClassName37 = get_class_name_factory_default("ResizeHandle", styles_module_default29);
+var getClassName38 = get_class_name_factory_default("ResizeHandle", styles_module_default30);
 var ResizeHandle = ({
   position,
   sidebarRef,
@@ -14721,11 +14827,11 @@ var ResizeHandle = ({
 }) => {
   const { frameRef } = useCanvasFrame();
   const resetAutoZoom = useResetAutoZoom(frameRef);
-  const handleRef = (0, import_react99.useRef)(null);
-  const isDragging = (0, import_react99.useRef)(false);
-  const startX = (0, import_react99.useRef)(0);
-  const startWidth = (0, import_react99.useRef)(0);
-  const handleMouseMove = (0, import_react99.useCallback)(
+  const handleRef = (0, import_react98.useRef)(null);
+  const isDragging = (0, import_react98.useRef)(false);
+  const startX = (0, import_react98.useRef)(0);
+  const startWidth = (0, import_react98.useRef)(0);
+  const handleMouseMove = (0, import_react98.useCallback)(
     (e) => {
       if (!isDragging.current) return;
       const delta = e.clientX - startX.current;
@@ -14736,7 +14842,7 @@ var ResizeHandle = ({
     },
     [onResize, position]
   );
-  const handleMouseUp = (0, import_react99.useCallback)(() => {
+  const handleMouseUp = (0, import_react98.useCallback)(() => {
     if (!isDragging.current) return;
     isDragging.current = false;
     document.body.style.cursor = "";
@@ -14751,7 +14857,7 @@ var ResizeHandle = ({
     onResizeEnd(finalWidth);
     resetAutoZoom();
   }, [onResizeEnd, handleMouseMove, resetAutoZoom, sidebarRef]);
-  const handleMouseDown = (0, import_react99.useCallback)(
+  const handleMouseDown = (0, import_react98.useCallback)(
     (e) => {
       isDragging.current = true;
       startX.current = e.clientX;
@@ -14772,7 +14878,7 @@ var ResizeHandle = ({
     "div",
     {
       ref: handleRef,
-      className: getClassName37({ [position]: true }),
+      className: getClassName38({ [position]: true }),
       onMouseDown: handleMouseDown
     }
   );
@@ -14783,11 +14889,11 @@ init_get_class_name_factory();
 
 // css-module:/home/crediblemark/Project/Credibuild/components/CredBuild/components/Sidebar/styles.module.css#css-module
 init_react_import();
-var styles_module_default30 = { "Sidebar": "_Sidebar_1kcif_1", "Sidebar--isVisible": "_Sidebar--isVisible_1kcif_13", "Sidebar--left": "_Sidebar--left_1kcif_17", "Sidebar--right": "_Sidebar--right_1kcif_29", "Sidebar-resizeHandle": "_Sidebar-resizeHandle_1kcif_42" };
+var styles_module_default31 = { "Sidebar": "_Sidebar_1kcif_1", "Sidebar--isVisible": "_Sidebar--isVisible_1kcif_13", "Sidebar--left": "_Sidebar--left_1kcif_17", "Sidebar--right": "_Sidebar--right_1kcif_29", "Sidebar-resizeHandle": "_Sidebar-resizeHandle_1kcif_42" };
 
 // components/CredBuild/components/Sidebar/index.tsx
 var import_jsx_runtime93 = require("react/jsx-runtime");
-var getClassName38 = get_class_name_factory_default("Sidebar", styles_module_default30);
+var getClassName39 = get_class_name_factory_default("Sidebar", styles_module_default31);
 var Sidebar = ({
   position,
   sidebarRef,
@@ -14801,11 +14907,11 @@ var Sidebar = ({
       "div",
       {
         ref: sidebarRef,
-        className: getClassName38({ [position]: true, isVisible }),
+        className: getClassName39({ [position]: true, isVisible }),
         children
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: `${getClassName38("resizeHandle")}`, children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: `${getClassName39("resizeHandle")}`, children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
       ResizeHandle,
       {
         position,
@@ -14819,7 +14925,7 @@ var Sidebar = ({
 
 // lib/use-delete-hotkeys.ts
 init_react_import();
-var import_react100 = require("react");
+var import_react99 = require("react");
 init_use_hotkey();
 init_store2();
 var isElementVisible = (element) => {
@@ -14855,7 +14961,7 @@ var shouldBlockDeleteHotkey = (e) => {
 };
 var useDeleteHotkeys = () => {
   const appStore = useAppStoreApi();
-  const deleteSelectedComponent = (0, import_react100.useCallback)(
+  const deleteSelectedComponent = (0, import_react99.useCallback)(
     (e) => {
       if (shouldBlockDeleteHotkey(e)) {
         return false;
@@ -14883,13 +14989,13 @@ init_react_import();
 
 // css-module:/home/crediblemark/Project/Credibuild/components/CredBuild/components/Nav/styles.module.css#css-module
 init_react_import();
-var styles_module_default31 = { "Nav": "_Nav_wbh7e_1", "Nav-list": "_Nav-list_wbh7e_9", "CredBuildHeader-path": "_CredBuildHeader-path_wbh7e_20", "NavItem": "_NavItem_wbh7e_38", "NavItem-link": "_NavItem-link_wbh7e_43", "NavItem-linkIcon": "_NavItem-linkIcon_wbh7e_64", "NavItem--active": "_NavItem--active_wbh7e_77", "NavItem--mobileOnly": "_NavItem--mobileOnly_wbh7e_90", "NavItem--desktopOnly": "_NavItem--desktopOnly_wbh7e_95" };
+var styles_module_default32 = { "Nav": "_Nav_wbh7e_1", "Nav-list": "_Nav-list_wbh7e_9", "CredBuildHeader-path": "_CredBuildHeader-path_wbh7e_20", "NavItem": "_NavItem_wbh7e_38", "NavItem-link": "_NavItem-link_wbh7e_43", "NavItem-linkIcon": "_NavItem-linkIcon_wbh7e_64", "NavItem--active": "_NavItem--active_wbh7e_77", "NavItem--mobileOnly": "_NavItem--mobileOnly_wbh7e_90", "NavItem--desktopOnly": "_NavItem--desktopOnly_wbh7e_95" };
 
 // components/CredBuild/components/Nav/index.tsx
 init_lib();
 var import_jsx_runtime94 = require("react/jsx-runtime");
-var getClassName39 = get_class_name_factory_default("Nav", styles_module_default31);
-var getClassNameItem3 = get_class_name_factory_default("NavItem", styles_module_default31);
+var getClassName40 = get_class_name_factory_default("Nav", styles_module_default32);
+var getClassNameItem3 = get_class_name_factory_default("NavItem", styles_module_default32);
 var MenuItem = ({
   label,
   icon,
@@ -14917,9 +15023,9 @@ var Nav = ({
   items,
   mobileActions
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("nav", { className: getClassName39(), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("ul", { className: getClassName39("list"), children: Object.entries(items).map(([key, item]) => /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(MenuItem, { ...item }, key)) }),
-    mobileActions && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: getClassName39("mobileActions"), children: mobileActions })
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("nav", { className: getClassName40(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("ul", { className: getClassName40("list"), children: Object.entries(items).map(([key, item]) => /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(MenuItem, { ...item }, key)) }),
+    mobileActions && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: getClassName40("mobileActions"), children: mobileActions })
   ] });
 };
 
@@ -14933,16 +15039,16 @@ init_lucide_react();
 
 // css-module:/home/crediblemark/Project/Credibuild/plugins/blocks/styles.module.css#css-module
 init_react_import();
-var styles_module_default32 = { "BlocksPlugin": "_BlocksPlugin_1ey1i_1" };
+var styles_module_default33 = { "BlocksPlugin": "_BlocksPlugin_1ey1i_1" };
 
 // plugins/blocks/index.tsx
 init_lib();
 var import_jsx_runtime95 = require("react/jsx-runtime");
-var getClassName40 = get_class_name_factory_default("BlocksPlugin", styles_module_default32);
+var getClassName41 = get_class_name_factory_default("BlocksPlugin", styles_module_default33);
 var blocksPlugin = () => ({
   name: "blocks",
   label: "Blocks",
-  render: () => /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: getClassName40(), children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Components, {}) }),
+  render: () => /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: getClassName41(), children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Components, {}) }),
   icon: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Shapes, {})
 });
 
@@ -14952,16 +15058,16 @@ init_lucide_react();
 
 // css-module:/home/crediblemark/Project/Credibuild/plugins/outline/styles.module.css#css-module
 init_react_import();
-var styles_module_default33 = { "OutlinePlugin": "_OutlinePlugin_q92j6_1" };
+var styles_module_default34 = { "OutlinePlugin": "_OutlinePlugin_q92j6_1" };
 
 // plugins/outline/index.tsx
 init_lib();
 var import_jsx_runtime96 = require("react/jsx-runtime");
-var getClassName41 = get_class_name_factory_default("OutlinePlugin", styles_module_default33);
+var getClassName42 = get_class_name_factory_default("OutlinePlugin", styles_module_default34);
 var outlinePlugin = () => ({
   name: "outline",
   label: "Outline",
-  render: () => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: getClassName41(), children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(Outline, {}) }),
+  render: () => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: getClassName42(), children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(Outline, {}) }),
   icon: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(List, {})
 });
 
@@ -14972,12 +15078,12 @@ init_store2();
 
 // css-module:/home/crediblemark/Project/Credibuild/plugins/fields/styles.module.css#css-module
 init_react_import();
-var styles_module_default34 = { "FieldsPlugin": "_FieldsPlugin_6as57_1", "FieldsPlugin-header": "_FieldsPlugin-header_6as57_7" };
+var styles_module_default35 = { "FieldsPlugin": "_FieldsPlugin_6as57_1", "FieldsPlugin-header": "_FieldsPlugin-header_6as57_7" };
 
 // plugins/fields/index.tsx
 init_lib();
 var import_jsx_runtime97 = require("react/jsx-runtime");
-var getClassName42 = get_class_name_factory_default("FieldsPlugin", styles_module_default34);
+var getClassName43 = get_class_name_factory_default("FieldsPlugin", styles_module_default35);
 var CurrentTitle = () => {
   const label = useAppStore((s) => {
     const selectedItem = s.selectedItem;
@@ -14988,8 +15094,8 @@ var CurrentTitle = () => {
 var fieldsPlugin = ({ desktopSideBar = "right" } = {}) => ({
   name: "fields",
   label: "Fields",
-  render: () => /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: getClassName42(), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { className: getClassName42("header"), children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(Breadcrumbs, { numParents: 2, children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(CurrentTitle, {}) }) }),
+  render: () => /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: getClassName43(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { className: getClassName43("header"), children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(Breadcrumbs, { numParents: 2, children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(CurrentTitle, {}) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(Fields, {})
   ] }),
   icon: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(RectangleEllipsis, {}),
@@ -14998,9 +15104,9 @@ var fieldsPlugin = ({ desktopSideBar = "right" } = {}) => ({
 
 // components/CredBuild/components/Layout/index.tsx
 var import_jsx_runtime98 = require("react/jsx-runtime");
-var getClassName43 = get_class_name_factory_default("CredBuild", styles_module_default22);
-var getLayoutClassName = get_class_name_factory_default("CredBuildLayout", styles_module_default22);
-var getPluginTabClassName = get_class_name_factory_default("CredBuildPluginTab", styles_module_default22);
+var getClassName44 = get_class_name_factory_default("CredBuild", styles_module_default23);
+var getLayoutClassName = get_class_name_factory_default("CredBuildLayout", styles_module_default23);
+var getPluginTabClassName = get_class_name_factory_default("CredBuildPluginTab", styles_module_default23);
 var FieldSideBar = () => {
   const title = useAppStore(
     (s) => s.selectedItem ? s.config.components[s.selectedItem.type]?.["label"] ?? s.selectedItem.type.toString() : s.config.root?.label || "Page"
@@ -15022,7 +15128,7 @@ var Layout = ({ children }) => {
     plugins,
     height
   } = usePropsContext();
-  const iframe = (0, import_react101.useMemo)(
+  const iframe = (0, import_react100.useMemo)(
     () => ({
       enabled: true,
       waitForStyles: true,
@@ -15049,7 +15155,7 @@ var Layout = ({ children }) => {
     sidebarRef: rightSidebarRef,
     handleResizeEnd: handleRightSidebarResizeEnd
   } = useSidebarResize("right", dispatch);
-  (0, import_react101.useEffect)(() => {
+  (0, import_react100.useEffect)(() => {
     if (!window.matchMedia("(min-width: 638px)").matches) {
       dispatch({
         type: "setUi",
@@ -15076,13 +15182,13 @@ var Layout = ({ children }) => {
     };
   }, [dispatch]);
   const overrides = useAppStore((s) => s.overrides);
-  const CustomCredBuild = (0, import_react101.useMemo)(
+  const CustomCredBuild = (0, import_react100.useMemo)(
     () => overrides.credbuild || DefaultOverride,
     [overrides]
   );
-  const [mounted, setMounted] = (0, import_react101.useState)(false);
-  const [theme, setTheme] = (0, import_react101.useState)("dark");
-  (0, import_react101.useEffect)(() => {
+  const [mounted, setMounted] = (0, import_react100.useState)(false);
+  const [theme, setTheme] = (0, import_react100.useState)("dark");
+  (0, import_react100.useEffect)(() => {
     setMounted(true);
     const savedTheme = localStorage.getItem("credbuild-theme");
     if (savedTheme) {
@@ -15101,7 +15207,7 @@ var Layout = ({ children }) => {
   }, []);
   const ready = useAppStore((s) => s.status === "READY");
   useMonitorHotkeys();
-  (0, import_react101.useEffect)(() => {
+  (0, import_react100.useEffect)(() => {
     if (ready && iframe.enabled) {
       const frameDoc = getFrame();
       if (frameDoc) {
@@ -15121,12 +15227,12 @@ var Layout = ({ children }) => {
   const setUi = useAppStore((s) => s.setUi);
   const currentPlugin = useAppStore((s) => s.state.ui.plugin?.current);
   const appStoreApi = useAppStoreApi();
-  const [mobilePanelHeightMode, setMobilePanelHeightMode] = (0, import_react101.useState)("toggle");
-  const hasLegacySideBarPlugin = (0, import_react101.useMemo)(
+  const [mobilePanelHeightMode, setMobilePanelHeightMode] = (0, import_react100.useState)("toggle");
+  const hasLegacySideBarPlugin = (0, import_react100.useMemo)(
     () => !!plugins?.find((p) => p.name === "legacy-side-bar"),
     [plugins]
   );
-  const pluginItems = (0, import_react101.useMemo)(() => {
+  const pluginItems = (0, import_react100.useMemo)(() => {
     const details = {};
     const defaultPlugins = [blocksPlugin(), outlinePlugin()];
     const isLegacy = (plugin) => plugin.name === "legacy-side-bar" ? -1 : 0;
@@ -15171,7 +15277,7 @@ var Layout = ({ children }) => {
     });
     return details;
   }, [plugins, currentPlugin, leftSideBarVisible, hasLegacySideBarPlugin, setUi]);
-  (0, import_react101.useEffect)(() => {
+  (0, import_react100.useEffect)(() => {
     if (!currentPlugin) {
       const names = Object.keys(pluginItems);
       setUi({ plugin: { current: names[0] } });
@@ -15184,7 +15290,7 @@ var Layout = ({ children }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(
     "div",
     {
-      className: `CredBuild ${theme === "dark" ? "dark" : ""} ${getClassName43({
+      className: `CredBuild ${theme === "dark" ? "dark" : ""} ${getClassName44({
         hidePlugins: hasLegacySideBarPlugin
       })}`,
       "data-theme": theme,
@@ -15269,7 +15375,7 @@ var Layout = ({ children }) => {
             )
           }
         ) }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { id: "credbuild-portal-root", className: getClassName43("portal") })
+        /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { id: "credbuild-portal-root", className: getClassName44("portal") })
       ]
     }
   );
@@ -15296,7 +15402,7 @@ function CredBuildProvider({ children }) {
     _experimentalFullScreenCanvas,
     _experimentalVirtualization
   } = usePropsContext();
-  const iframe = (0, import_react102.useMemo)(
+  const iframe = (0, import_react101.useMemo)(
     () => ({
       enabled: true,
       waitForStyles: true,
@@ -15304,7 +15410,7 @@ function CredBuildProvider({ children }) {
     }),
     [_iframe]
   );
-  const [generatedAppState] = (0, import_react102.useState)(() => {
+  const [generatedAppState] = (0, import_react101.useState)(() => {
     const initial = { ...defaultAppState.ui, ...initialUi };
     let clientUiState = {};
     if (Object.keys(initialData?.root || {}).length > 0 && !initialData?.root?.props) {
@@ -15351,7 +15457,7 @@ function CredBuildProvider({ children }) {
     return walkAppState(newAppState, config);
   });
   const { appendData = true } = _initialHistory || {};
-  const [blendedHistories] = (0, import_react102.useState)(
+  const [blendedHistories] = (0, import_react101.useState)(
     [
       ..._initialHistory?.histories || [],
       ...appendData ? [{ state: generatedAppState }] : []
@@ -15366,7 +15472,7 @@ function CredBuildProvider({ children }) {
       };
     })
   );
-  const initialHistoryIndex = (0, import_react102.useMemo)(() => {
+  const initialHistoryIndex = (0, import_react101.useMemo)(() => {
     if (_initialHistory?.index !== void 0 && _initialHistory?.index >= 0 && _initialHistory?.index < blendedHistories.length) {
       return _initialHistory?.index;
     }
@@ -15377,7 +15483,7 @@ function CredBuildProvider({ children }) {
     overrides,
     plugins
   });
-  const loadedFieldTransforms = (0, import_react102.useMemo)(() => {
+  const loadedFieldTransforms = (0, import_react101.useMemo)(() => {
     const _plugins = plugins || [];
     const pluginFieldTransforms = _plugins.reduce(
       (acc, plugin) => ({ ...acc, ...plugin.fieldTransforms }),
@@ -15389,7 +15495,7 @@ function CredBuildProvider({ children }) {
     };
   }, [fieldTransforms, plugins]);
   const instanceId = useSafeId();
-  const generateAppStore = (0, import_react102.useCallback)(
+  const generateAppStore = (0, import_react101.useCallback)(
     (state) => {
       return {
         instanceId,
@@ -15420,15 +15526,15 @@ function CredBuildProvider({ children }) {
       loadedFieldTransforms
     ]
   );
-  const [appStore] = (0, import_react102.useState)(
+  const [appStore] = (0, import_react101.useState)(
     () => createAppStore(generateAppStore(initialAppState))
   );
-  (0, import_react102.useEffect)(() => {
+  (0, import_react101.useEffect)(() => {
     if (process.env.NODE_ENV !== "production") {
       window.__CREDBUILD_INTERNAL_DO_NOT_USE = { appStore };
     }
   }, [appStore]);
-  (0, import_react102.useEffect)(() => {
+  (0, import_react101.useEffect)(() => {
     const state = appStore.getState().state;
     appStore.setState({
       ...generateAppStore(state)
@@ -15439,8 +15545,8 @@ function CredBuildProvider({ children }) {
     index: initialHistoryIndex,
     initialAppState
   });
-  const previousData = (0, import_react102.useRef)(null);
-  (0, import_react102.useEffect)(() => {
+  const previousData = (0, import_react101.useRef)(null);
+  (0, import_react101.useEffect)(() => {
     return appStore.subscribe(
       (s) => s.state.data,
       (data) => {
@@ -15454,7 +15560,7 @@ function CredBuildProvider({ children }) {
   }, [onChange, appStore]);
   useRegisterPermissionsSlice(appStore, permissions);
   const uCredBuildStore = useRegisterUseCredBuildStore(appStore);
-  (0, import_react102.useEffect)(() => {
+  (0, import_react101.useEffect)(() => {
     const { resolveAndCommitData } = appStore.getState();
     setTimeout(() => {
       resolveAndCommitData();
@@ -15799,6 +15905,7 @@ lucide-react/dist/esm/icons/heading-5.js:
 lucide-react/dist/esm/icons/heading-6.js:
 lucide-react/dist/esm/icons/heading.js:
 lucide-react/dist/esm/icons/image.js:
+lucide-react/dist/esm/icons/inbox.js:
 lucide-react/dist/esm/icons/info.js:
 lucide-react/dist/esm/icons/italic.js:
 lucide-react/dist/esm/icons/layers.js: