@sustaina/shared-ui 1.34.0 → 1.36.0

package/dist/index.js

@@ -4,7 +4,7 @@ var clsx2 = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
-var React26 = require('react');
+var React25 = require('react');
 var lucideReact = require('lucide-react');
 var reactDom = require('react-dom');
 var SelectPrimitive = require('@radix-ui/react-select');
@@ -84,7 +84,7 @@ function _interopNamespace(e) {
 
 var clsx2__default = /*#__PURE__*/_interopDefault(clsx2);
 var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
-var React26__namespace = /*#__PURE__*/_interopNamespace(React26);
+var React25__namespace = /*#__PURE__*/_interopNamespace(React25);
 var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
 var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
 var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
@@ -269,48 +269,55 @@ function cn(...args) {
   return tailwindMerge.twMerge(clsx2.clsx(args));
 }
 var ArrowIcon = ({
-  width = "1em",
-  height = "1em",
+  size = "1em",
+  width,
+  height,
   fill = "none",
+  color = "#127035",
   ...props
 }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 14 9",
-    width,
-    height,
+    width: width ?? size,
+    height: height ?? size,
     fill,
     ...props,
-    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0.293 0.723L6.79 8.723L13.293 0.723H0.293Z", fill: props.color || "#127035" })
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0.293 0.723L6.79 8.723L13.293 0.723H0.293Z", fill: color })
   }
 );
 var arrow_default = ArrowIcon;
-var SuiCalendarIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+var DecreaseIcon = ({
+  size = 16,
+  color = "currentColor",
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
-    width: "1em",
-    height: "1em",
-    fill: "none",
-    viewBox: "0 0 25 25",
+    viewBox: "0 0 9 4",
+    width: size,
+    height: size,
+    className,
+    fill: color,
     ...props,
-    children: /* @__PURE__ */ jsxRuntime.jsx(
-      "path",
-      {
-        fill: "currentColor",
-        d: "M8.504 11.205H5.837v2.4h2.667zm5.333 0h-2.666v2.4h2.666zm5.334 0h-2.667v2.4h2.667zm2.666-8.4h-1.333v-2.4h-2.667v2.4H7.171v-2.4H4.504v2.4H3.17c-1.48 0-2.654 1.08-2.654 2.4l-.013 16.8c0 1.32 1.187 2.4 2.667 2.4h18.666c1.467 0 2.667-1.08 2.667-2.4v-16.8c0-1.32-1.2-2.4-2.667-2.4m0 19.2H3.171v-13.2h18.666z"
-      }
-    )
+    children: /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "0.572754", y: "0.441406", width: "7.57659", height: "2.75347", fill: color })
   }
 );
-var calendar_default = SuiCalendarIcon;
-var SuiCalendarIcon2 = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
+var decrease_default = DecreaseIcon;
+var FiltersIcon = ({
+  size = 24,
+  color = "#379A2A",
+  strokeWidth = 1.5,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsxs(
   "svg",
   {
-    width: "20",
-    height: "20",
-    viewBox: "0 0 20 20",
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     ...props,
@@ -318,9 +325,9 @@ var SuiCalendarIcon2 = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
       /* @__PURE__ */ jsxRuntime.jsx(
         "path",
         {
-          d: "M6.66666 1.66675V5.00008",
-          stroke: "currentColor",
-          strokeWidth: "1.5",
+          d: "M10 18H14",
+          stroke: color,
+          strokeWidth,
           strokeLinecap: "round",
           strokeLinejoin: "round"
         }
@@ -328,9 +335,9 @@ var SuiCalendarIcon2 = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
       /* @__PURE__ */ jsxRuntime.jsx(
         "path",
         {
-          d: "M13.3333 1.66675V5.00008",
-          stroke: "currentColor",
-          strokeWidth: "1.5",
+          d: "M11 6H3",
+          stroke: color,
+          strokeWidth,
           strokeLinecap: "round",
           strokeLinejoin: "round"
         }
@@ -338,9 +345,9 @@ var SuiCalendarIcon2 = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
       /* @__PURE__ */ jsxRuntime.jsx(
         "path",
         {
-          d: "M15.8333 3.33325H4.16667C3.24619 3.33325 2.5 4.07944 2.5 4.99992V16.6666C2.5 17.5871 3.24619 18.3333 4.16667 18.3333H15.8333C16.7538 18.3333 17.5 17.5871 17.5 16.6666V4.99992C17.5 4.07944 16.7538 3.33325 15.8333 3.33325Z",
-          stroke: "currentColor",
-          strokeWidth: "1.5",
+          d: "M15 6H21",
+          stroke: color,
+          strokeWidth,
           strokeLinecap: "round",
           strokeLinejoin: "round"
         }
@@ -348,9 +355,9 @@ var SuiCalendarIcon2 = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
       /* @__PURE__ */ jsxRuntime.jsx(
         "path",
         {
-          d: "M2.5 8.33325H17.5",
-          stroke: "currentColor",
-          strokeWidth: "1.5",
+          d: "M18 9V3",
+          stroke: color,
+          strokeWidth,
           strokeLinecap: "round",
           strokeLinejoin: "round"
         }
@@ -358,111 +365,413 @@ var SuiCalendarIcon2 = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
       /* @__PURE__ */ jsxRuntime.jsx(
         "path",
         {
-          d: "M6.66666 11.6667H6.67499",
-          stroke: "currentColor",
-          strokeWidth: "1.5",
+          d: "M7 12H15",
+          stroke: color,
+          strokeWidth,
           strokeLinecap: "round",
           strokeLinejoin: "round"
         }
+      )
+    ]
+  }
+);
+var filters_default = FiltersIcon;
+var InformationIcon = ({
+  size = 16,
+  color = "currentColor",
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 34 34",
+    width: size,
+    height: size,
+    className,
+    fill: color,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("g", { clipPath: "url(#clip0_789_42722)", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M16.7158 33.4883C7.61916 33.4883 0.21582 26.0849 0.21582 16.9883C0.21582 7.89162 7.61916 0.488281 16.7158 0.488281C25.8125 0.488281 33.2158 7.89162 33.2158 16.9883C33.2158 26.0849 25.8125 33.4883 16.7158 33.4883ZM16.7158 1.80093C8.34112 1.80093 1.52847 8.61358 1.52847 16.9883C1.52847 25.363 8.34112 32.1756 16.7158 32.1756C25.0905 32.1756 31.9032 25.363 31.9032 16.9883C31.9032 8.61358 25.0905 1.80093 16.7158 1.80093Z",
+            fill: color
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M18.9999 21.0838H13.5393V20.5325C13.5393 19.6005 13.6443 18.8523 13.8543 18.2747C14.0643 17.6972 14.3794 17.1721 14.7994 16.6864C15.2195 16.2139 16.1514 15.3606 17.6085 14.153C18.3829 13.5229 18.7767 12.9454 18.7767 12.4203C18.7767 11.8952 18.6192 11.4883 18.3042 11.1864C17.9892 10.8845 17.5166 10.7532 16.8865 10.7532C16.204 10.7532 15.6395 10.9764 15.1932 11.4227C14.7469 11.869 14.4581 12.6566 14.34 13.7723L8.76123 13.0766C8.95813 11.0289 9.69321 9.37496 10.9927 8.12794C12.2923 6.88093 14.2744 6.25085 16.9653 6.25085C19.0524 6.25085 20.7457 6.68403 22.019 7.5635C23.7648 8.74489 24.6312 10.3069 24.6312 12.2759C24.6312 13.0898 24.408 13.8773 23.9617 14.6256C23.5154 15.3869 22.5966 16.3057 21.2051 17.3952C20.2338 18.1566 19.63 18.7735 19.3674 19.2461C19.118 19.7055 18.9868 20.3225 18.9868 21.0575L18.9999 21.0838ZM13.3555 22.5408H19.2099V27.6995H13.3555V22.5408Z",
+            fill: color
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_789_42722", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "33", height: "33", fill: "white", transform: "translate(0.21582 0.488281)" }) }) })
+    ]
+  }
+);
+var information_default = InformationIcon;
+var NotFoundIcon = ({
+  width = 24,
+  height = 24,
+  fill = "currentColor",
+  className = "",
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    viewBox: "0 0 106 100",
+    xmlns: "http://www.w3.org/2000/svg",
+    width,
+    height,
+    fill,
+    className,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M44.7381 99.6137C69.3718 99.6137 89.3413 95.8824 89.3413 91.2795C89.3413 86.6767 69.3718 82.9453 44.7381 82.9453C20.1043 82.9453 0.134766 86.6767 0.134766 91.2795C0.134766 95.8824 20.1043 99.6137 44.7381 99.6137Z",
+          fill: "#B0DFAA"
+        }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
         "path",
         {
-          d: "M10 11.6667H10.0083",
-          stroke: "currentColor",
-          strokeWidth: "1.5",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M80.4202 66.795L64.6801 47.4233C63.9249 46.5114 62.8209 45.9595 61.6584 45.9595H27.8163C26.6545 45.9595 25.5505 46.5114 24.7953 47.4233L9.05579 66.795V76.9154H80.4209V66.795H80.4202Z",
+          fill: "#CEE5D6"
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
         "path",
         {
-          d: "M13.3333 11.6667H13.3417",
-          stroke: "currentColor",
-          strokeWidth: "1.5",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M22.3913 20.957H67.0841C67.782 20.957 68.4514 21.2343 68.9449 21.7278C69.4384 22.2213 69.7157 22.8907 69.7157 23.5886V84.9991C69.7157 85.6971 69.4384 86.3664 68.9449 86.8599C68.4514 87.3534 67.782 87.6307 67.0841 87.6307H22.3913C21.6934 87.6307 21.0241 87.3534 20.5305 86.8599C20.037 86.3664 19.7598 85.6971 19.7598 84.9991V23.5886C19.7598 22.8907 20.037 22.2213 20.5305 21.7278C21.0241 21.2343 21.6934 20.957 22.3913 20.957V20.957Z",
+          fill: "#F9F9F9"
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
         "path",
         {
-          d: "M6.66666 15H6.67499",
-          stroke: "currentColor",
-          strokeWidth: "1.5",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M28.2124 27.5049H61.2631C61.612 27.5049 61.9467 27.6435 62.1935 27.8903C62.4402 28.137 62.5789 28.4717 62.5789 28.8207V45.2398C62.5789 45.5887 62.4402 45.9234 62.1935 46.1702C61.9467 46.4169 61.612 46.5555 61.2631 46.5555H28.2124C27.8634 46.5555 27.5288 46.4169 27.282 46.1702C27.0353 45.9234 26.8966 45.5887 26.8966 45.2398V28.8207C26.8966 28.4717 27.0353 28.137 27.282 27.8903C27.5288 27.6435 27.8634 27.5049 28.2124 27.5049ZM28.3848 53.6983H61.0907C61.4854 53.6983 61.8639 53.8551 62.143 54.1342C62.4221 54.4133 62.5789 54.7918 62.5789 55.1865C62.5789 55.5811 62.4221 55.9597 62.143 56.2387C61.8639 56.5178 61.4854 56.6746 61.0907 56.6746H28.3848C27.9901 56.6746 27.6116 56.5178 27.3325 56.2387C27.0534 55.9597 26.8966 55.5811 26.8966 55.1865C26.8966 54.7918 27.0534 54.4133 27.3325 54.1342C27.6116 53.8551 27.9901 53.6983 28.3848 53.6983ZM28.3848 61.4371H61.0907C61.4855 61.4371 61.8641 61.5939 62.1432 61.8731C62.4224 62.1522 62.5792 62.5308 62.5792 62.9256C62.5792 63.3204 62.4224 63.699 62.1432 63.9781C61.8641 64.2573 61.4855 64.4141 61.0907 64.4141H28.3848C27.99 64.4141 27.6114 64.2573 27.3323 63.9781C27.0531 63.699 26.8963 63.3204 26.8963 62.9256C26.8963 62.5308 27.0531 62.1522 27.3323 61.8731C27.6114 61.5939 27.99 61.4371 28.3848 61.4371ZM80.2749 90.0569C79.7651 92.0772 77.9743 93.5832 75.844 93.5832H13.6315C11.5012 93.5832 9.71044 92.0766 9.20123 90.0569C9.10411 89.6718 9.05505 89.2763 9.05518 88.8792V66.7957H26.3696C28.2822 66.7957 29.8236 68.4062 29.8236 70.3615V70.3878C29.8236 72.3424 31.3828 73.9207 33.2953 73.9207H56.1802C58.0927 73.9207 59.6519 72.3279 59.6519 70.3726V70.3647C59.6519 68.4095 61.1933 66.795 63.1058 66.795H80.4203V88.8799C80.4203 89.2858 80.3697 89.6799 80.2749 90.0569Z",
+          fill: "#DDEEE3"
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
         "path",
         {
-          d: "M10 15H10.0083",
-          stroke: "currentColor",
-          strokeWidth: "1.5",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M82.4512 22.0242L77.9577 23.7676C77.8423 23.8125 77.7165 23.8239 77.5949 23.8005C77.4733 23.7771 77.3608 23.7198 77.2703 23.6353C77.1797 23.5507 77.1149 23.4424 77.0833 23.3226C77.0516 23.2029 77.0544 23.0767 77.0913 22.9584L78.3656 18.8749C76.6623 16.938 75.6624 14.5762 75.6624 12.0275C75.6624 5.45185 82.3189 0.121582 90.5308 0.121582C98.7406 0.121582 105.398 5.45185 105.398 12.0275C105.398 18.6032 98.7413 23.9334 90.5301 23.9334C87.5512 23.9334 84.7775 23.2321 82.4512 22.0242Z",
+          fill: "#DDEEE3"
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
         "path",
         {
-          d: "M13.3333 15H13.3417",
-          stroke: "currentColor",
-          strokeWidth: "1.5",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
+          d: "M96.3874 14.1776C97.4226 14.1776 98.2617 13.3484 98.2617 12.3256C98.2617 11.3028 97.4226 10.4736 96.3874 10.4736C95.3522 10.4736 94.5131 11.3028 94.5131 12.3256C94.5131 13.3484 95.3522 14.1776 96.3874 14.1776Z",
+          fill: "white"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M86.5479 13.9459H82.7992L84.7058 10.7051L86.5479 13.9459ZM88.8906 10.7051H92.1702V13.9459H88.8906V10.7051Z",
+          fill: "white"
         }
       )
     ]
   }
 );
-var calendar2_default = SuiCalendarIcon2;
-var SuiCheckIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
+var not_found_default = NotFoundIcon;
+var PlusIcon = ({ size = 16, color = "currentColor", className, ...props }) => /* @__PURE__ */ jsxRuntime.jsxs(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
-    width: "1em",
-    height: "1em",
+    viewBox: "0 0 9 9",
+    width: size,
+    height: size,
+    className,
+    fill: color,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M3.12305 8.23047L3.12305 0.653882L5.87652 0.653882L5.87652 8.23047L3.12305 8.23047Z",
+          fill: color
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M3.12305 8.23047L3.12305 0.653882L5.87652 0.653882L5.87652 8.23047L3.12305 8.23047Z",
+          fill: color
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M0.710938 3.06641L8.28752 3.06641V5.81988L0.710937 5.81988L0.710938 3.06641Z",
+          fill: color
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M0.710938 3.06641L8.28752 3.06641V5.81988L0.710937 5.81988L0.710938 3.06641Z",
+          fill: color
+        }
+      )
+    ]
+  }
+);
+var plus_default = PlusIcon;
+var CustomFieldIcon = ({
+  size = 16,
+  color = "currentColor",
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 30 30",
     fill: "none",
-    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg",
+    className,
     ...props,
     children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("g", { clipPath: "url(#check_svg__a)", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("g", { clipPath: "url(#clip0_14170_63977)", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "path",
           {
-            fill: "currentColor",
-            d: "M10.976.043c9.629-.793 16.248 9.583 11.392 18.002-4.252 7.37-14.736 8.025-19.907 1.26C-3.276 11.799 1.616.815 10.976.044m5.59 7.791c-.284.048-.555.25-.775.428l-5.159 4.944c-.188.033-2.31-2.268-2.865-2.51-1.413-.619-2.427 1.01-1.22 2.22.73.733 2.573 2.531 3.354 3.044.407.267.853.335 1.295.104 1.429-1.295 2.87-2.6 4.249-3.948.647-.633 1.63-1.47 2.186-2.112.825-.95.12-2.369-1.065-2.169"
+            d: "M9.16987 12.9149C11.2388 12.9149 12.9159 11.2378 12.9159 9.1689C12.9159 7.10001 11.2388 5.42285 9.16987 5.42285C7.10099 5.42285 5.42383 7.10001 5.42383 9.1689C5.42383 11.2378 7.10099 12.9149 9.16987 12.9149Z",
+            fill: color
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
           "path",
           {
-            fill: "#fff",
-            d: "M16.567 7.835c1.186-.2 1.89 1.218 1.065 2.169-.557.64-1.54 1.479-2.187 2.112-1.379 1.348-2.818 2.653-4.248 3.948-.442.23-.889.162-1.295-.105-.782-.512-2.625-2.31-3.355-3.043-1.206-1.21-.192-2.84 1.221-2.221.556.243 2.677 2.544 2.865 2.51l5.16-4.943c.219-.178.489-.38.774-.429z"
+            d: "M16.4128 13.2318C16.8305 13.6494 17.5139 13.6494 17.9315 13.2318L19.7877 11.3757L21.6438 13.2318C22.0614 13.6494 22.7448 13.6494 23.1625 13.2318C23.5801 12.8142 23.5801 12.1308 23.1625 11.7131L21.3063 9.85699L23.1625 8.00084C23.5801 7.5832 23.5801 6.8998 23.1625 6.48217C22.7448 6.06454 22.0614 6.06454 21.6438 6.48217L19.7877 8.33832L17.9315 6.48217C17.5139 6.06454 16.8305 6.06454 16.4128 6.48217C15.9952 6.8998 15.9952 7.5832 16.4128 8.00084L18.269 9.85699L16.4128 11.7131C15.9952 12.1308 15.9952 12.8142 16.4128 13.2318Z",
+            fill: color
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M12.375 17.0664H5.96284C5.49688 17.0664 5.11914 17.4441 5.11914 17.9101V24.3223C5.11914 24.7882 5.49688 25.166 5.11914 25.166H12.375C12.841 25.166 13.2187 24.7882 13.2187 24.3223V17.9101C13.2187 17.4441 12.841 17.0664 12.375 17.0664Z",
+            fill: color
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16.1816 24.6089H25.8315L21.0055 17.623L16.1816 24.6089Z", fill: color }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M28.1017 0H1.89833C0.852141 0 0 0.852141 0 1.89833V28.1017C0 29.1479 0.852141 30 1.89833 30H28.1017C29.1479 30 30 29.1479 30 28.1017V1.89833C30 0.852141 29.1479 0 28.1017 0ZM27.8907 27.8907H2.10926V2.10926H27.8907V27.8907Z",
+            fill: color
           }
         )
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "check_svg__a", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "#fff", d: "M0 0h24v24H0z" }) }) })
+      /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_14170_63977", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "30", height: "30", fill: "white" }) }) })
     ]
   }
 );
-var check_default = SuiCheckIcon;
-var SuiDotsVerticalIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
+var custom_field_default = CustomFieldIcon;
+var SuiCalendarIcon = ({
+  size = "1em",
+  width,
+  height,
+  color = "currentColor",
+  fill = "none",
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
-    width: "1em",
-    height: "1em",
-    fill: "none",
     viewBox: "0 0 25 25",
+    width: width ?? size,
+    height: height ?? size,
+    fill,
     ...props,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#dots-vertical_svg__a)", children: /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
+    children: /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: color,
+        d: "M8.504 11.205H5.837v2.4h2.667zm5.333 0h-2.666v2.4h2.666zm5.334 0h-2.667v2.4h2.667zm2.666-8.4h-1.333v-2.4h-2.667v2.4H7.171v-2.4H4.504v2.4H3.17c-1.48 0-2.654 1.08-2.654 2.4l-.013 16.8c0 1.32 1.187 2.4 2.667 2.4h18.666c1.467 0 2.667-1.08 2.667-2.4v-16.8c0-1.32-1.2-2.4-2.667-2.4m0 19.2H3.171v-13.2h18.666z"
+      }
+    )
+  }
+);
+var calendar_default = SuiCalendarIcon;
+var SuiCalendarIcon2 = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M6.66666 1.66675V5.00008",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M13.3333 1.66675V5.00008",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M15.8333 3.33325H4.16667C3.24619 3.33325 2.5 4.07944 2.5 4.99992V16.6666C2.5 17.5871 3.24619 18.3333 4.16667 18.3333H15.8333C16.7538 18.3333 17.5 17.5871 17.5 16.6666V4.99992C17.5 4.07944 16.7538 3.33325 15.8333 3.33325Z",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M2.5 8.33325H17.5",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M6.66666 11.6667H6.67499",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M10 11.6667H10.0083",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M13.3333 11.6667H13.3417",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M6.66666 15H6.67499",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M10 15H10.0083",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M13.3333 15H13.3417",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    ]
+  }
+);
+var calendar2_default = SuiCalendarIcon2;
+var SuiCheckIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("g", { clipPath: "url(#check_svg__a)", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            fill: "currentColor",
+            d: "M10.976.043c9.629-.793 16.248 9.583 11.392 18.002-4.252 7.37-14.736 8.025-19.907 1.26C-3.276 11.799 1.616.815 10.976.044m5.59 7.791c-.284.048-.555.25-.775.428l-5.159 4.944c-.188.033-2.31-2.268-2.865-2.51-1.413-.619-2.427 1.01-1.22 2.22.73.733 2.573 2.531 3.354 3.044.407.267.853.335 1.295.104 1.429-1.295 2.87-2.6 4.249-3.948.647-.633 1.63-1.47 2.186-2.112.825-.95.12-2.369-1.065-2.169"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            fill: "#fff",
+            d: "M16.567 7.835c1.186-.2 1.89 1.218 1.065 2.169-.557.64-1.54 1.479-2.187 2.112-1.379 1.348-2.818 2.653-4.248 3.948-.442.23-.889.162-1.295-.105-.782-.512-2.625-2.31-3.355-3.043-1.206-1.21-.192-2.84 1.221-2.221.556.243 2.677 2.544 2.865 2.51l5.16-4.943c.219-.178.489-.38.774-.429z"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "check_svg__a", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "#fff", d: "M0 0h24v24H0z" }) }) })
+    ]
+  }
+);
+var check_default = SuiCheckIcon;
+var SuiDotsVerticalIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 25 25",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#dots-vertical_svg__a)", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
           fill: "currentColor",
           d: "M12.504 9.03a3.373 3.373 0 0 1 3.375 3.375 3.373 3.373 0 0 1-3.375 3.375 3.373 3.373 0 0 1-3.375-3.375 3.373 3.373 0 0 1 3.375-3.375M9.129 4.155a3.373 3.373 0 0 0 3.375 3.375 3.373 3.373 0 0 0 3.375-3.375A3.373 3.373 0 0 0 12.504.78a3.373 3.373 0 0 0-3.375 3.375m0 16.5a3.373 3.373 0 0 0 3.375 3.375 3.373 3.373 0 0 0 3.375-3.375 3.373 3.373 0 0 0-3.375-3.375 3.373 3.373 0 0 0-3.375 3.375"
         }
@@ -556,155 +865,6 @@ var SuiFilterIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
   }
 );
 var filter_default = SuiFilterIcon;
-var FiltersIcon = ({
-  size = 24,
-  color = "#379A2A",
-  strokeWidth = 1.5,
-  ...props
-}) => /* @__PURE__ */ jsxRuntime.jsxs(
-  "svg",
-  {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    ...props,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          d: "M10 18H14",
-          stroke: color,
-          strokeWidth,
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          d: "M11 6H3",
-          stroke: color,
-          strokeWidth,
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          d: "M15 6H21",
-          stroke: color,
-          strokeWidth,
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          d: "M18 9V3",
-          stroke: color,
-          strokeWidth,
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          d: "M7 12H15",
-          stroke: color,
-          strokeWidth,
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      )
-    ]
-  }
-);
-var filters_default = FiltersIcon;
-var NotFoundIcon = ({
-  width = 24,
-  height = 24,
-  fill = "currentColor",
-  className = "",
-  ...props
-}) => /* @__PURE__ */ jsxRuntime.jsxs(
-  "svg",
-  {
-    viewBox: "0 0 106 100",
-    xmlns: "http://www.w3.org/2000/svg",
-    width,
-    height,
-    fill,
-    className,
-    ...props,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          d: "M44.7381 99.6137C69.3718 99.6137 89.3413 95.8824 89.3413 91.2795C89.3413 86.6767 69.3718 82.9453 44.7381 82.9453C20.1043 82.9453 0.134766 86.6767 0.134766 91.2795C0.134766 95.8824 20.1043 99.6137 44.7381 99.6137Z",
-          fill: "#B0DFAA"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          fillRule: "evenodd",
-          clipRule: "evenodd",
-          d: "M80.4202 66.795L64.6801 47.4233C63.9249 46.5114 62.8209 45.9595 61.6584 45.9595H27.8163C26.6545 45.9595 25.5505 46.5114 24.7953 47.4233L9.05579 66.795V76.9154H80.4209V66.795H80.4202Z",
-          fill: "#CEE5D6"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          fillRule: "evenodd",
-          clipRule: "evenodd",
-          d: "M22.3913 20.957H67.0841C67.782 20.957 68.4514 21.2343 68.9449 21.7278C69.4384 22.2213 69.7157 22.8907 69.7157 23.5886V84.9991C69.7157 85.6971 69.4384 86.3664 68.9449 86.8599C68.4514 87.3534 67.782 87.6307 67.0841 87.6307H22.3913C21.6934 87.6307 21.0241 87.3534 20.5305 86.8599C20.037 86.3664 19.7598 85.6971 19.7598 84.9991V23.5886C19.7598 22.8907 20.037 22.2213 20.5305 21.7278C21.0241 21.2343 21.6934 20.957 22.3913 20.957V20.957Z",
-          fill: "#F9F9F9"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          fillRule: "evenodd",
-          clipRule: "evenodd",
-          d: "M28.2124 27.5049H61.2631C61.612 27.5049 61.9467 27.6435 62.1935 27.8903C62.4402 28.137 62.5789 28.4717 62.5789 28.8207V45.2398C62.5789 45.5887 62.4402 45.9234 62.1935 46.1702C61.9467 46.4169 61.612 46.5555 61.2631 46.5555H28.2124C27.8634 46.5555 27.5288 46.4169 27.282 46.1702C27.0353 45.9234 26.8966 45.5887 26.8966 45.2398V28.8207C26.8966 28.4717 27.0353 28.137 27.282 27.8903C27.5288 27.6435 27.8634 27.5049 28.2124 27.5049ZM28.3848 53.6983H61.0907C61.4854 53.6983 61.8639 53.8551 62.143 54.1342C62.4221 54.4133 62.5789 54.7918 62.5789 55.1865C62.5789 55.5811 62.4221 55.9597 62.143 56.2387C61.8639 56.5178 61.4854 56.6746 61.0907 56.6746H28.3848C27.9901 56.6746 27.6116 56.5178 27.3325 56.2387C27.0534 55.9597 26.8966 55.5811 26.8966 55.1865C26.8966 54.7918 27.0534 54.4133 27.3325 54.1342C27.6116 53.8551 27.9901 53.6983 28.3848 53.6983ZM28.3848 61.4371H61.0907C61.4855 61.4371 61.8641 61.5939 62.1432 61.8731C62.4224 62.1522 62.5792 62.5308 62.5792 62.9256C62.5792 63.3204 62.4224 63.699 62.1432 63.9781C61.8641 64.2573 61.4855 64.4141 61.0907 64.4141H28.3848C27.99 64.4141 27.6114 64.2573 27.3323 63.9781C27.0531 63.699 26.8963 63.3204 26.8963 62.9256C26.8963 62.5308 27.0531 62.1522 27.3323 61.8731C27.6114 61.5939 27.99 61.4371 28.3848 61.4371ZM80.2749 90.0569C79.7651 92.0772 77.9743 93.5832 75.844 93.5832H13.6315C11.5012 93.5832 9.71044 92.0766 9.20123 90.0569C9.10411 89.6718 9.05505 89.2763 9.05518 88.8792V66.7957H26.3696C28.2822 66.7957 29.8236 68.4062 29.8236 70.3615V70.3878C29.8236 72.3424 31.3828 73.9207 33.2953 73.9207H56.1802C58.0927 73.9207 59.6519 72.3279 59.6519 70.3726V70.3647C59.6519 68.4095 61.1933 66.795 63.1058 66.795H80.4203V88.8799C80.4203 89.2858 80.3697 89.6799 80.2749 90.0569Z",
-          fill: "#DDEEE3"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          fillRule: "evenodd",
-          clipRule: "evenodd",
-          d: "M82.4512 22.0242L77.9577 23.7676C77.8423 23.8125 77.7165 23.8239 77.5949 23.8005C77.4733 23.7771 77.3608 23.7198 77.2703 23.6353C77.1797 23.5507 77.1149 23.4424 77.0833 23.3226C77.0516 23.2029 77.0544 23.0767 77.0913 22.9584L78.3656 18.8749C76.6623 16.938 75.6624 14.5762 75.6624 12.0275C75.6624 5.45185 82.3189 0.121582 90.5308 0.121582C98.7406 0.121582 105.398 5.45185 105.398 12.0275C105.398 18.6032 98.7413 23.9334 90.5301 23.9334C87.5512 23.9334 84.7775 23.2321 82.4512 22.0242Z",
-          fill: "#DDEEE3"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          d: "M96.3874 14.1776C97.4226 14.1776 98.2617 13.3484 98.2617 12.3256C98.2617 11.3028 97.4226 10.4736 96.3874 10.4736C95.3522 10.4736 94.5131 11.3028 94.5131 12.3256C94.5131 13.3484 95.3522 14.1776 96.3874 14.1776Z",
-          fill: "white"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          fillRule: "evenodd",
-          clipRule: "evenodd",
-          d: "M86.5479 13.9459H82.7992L84.7058 10.7051L86.5479 13.9459ZM88.8906 10.7051H92.1702V13.9459H88.8906V10.7051Z",
-          fill: "white"
-        }
-      )
-    ]
-  }
-);
-var not_found_default = NotFoundIcon;
 var SuiSettingIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
   "svg",
   {
@@ -776,49 +936,195 @@ var SuiWarningIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
     ]
   }
 );
-var warning_default = SuiWarningIcon;
-var TrashIcon = ({
-  size = 16,
-  color = "currentColor",
-  className,
-  ...props
-}) => /* @__PURE__ */ jsxRuntime.jsxs(
+var warning_default = SuiWarningIcon;
+var TrashIcon = ({ size = 16, color = "currentColor", className, ...props }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    viewBox: "0 0 17 15",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    fill: "none",
+    className,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("g", { clipPath: "url(#clip0_336_302483)", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M3.49371 2.12043C3.38318 1.44249 3.66212 0.708651 4.43068 0.529533C4.94459 0.409578 7.77168 0.42749 8.38456 0.492081C9.25207 0.583811 9.64966 1.36813 9.5125 2.12097C10.3748 2.22627 11.9484 1.85067 12.6087 2.44664C13.1053 2.89498 13.1452 3.75638 12.64 4.21232C12.2707 4.54558 12.1422 4.28179 12.0664 4.92282C11.7412 7.68938 11.6509 10.4907 11.3494 13.2605C11.2452 13.9135 10.7718 14.3401 10.0646 14.3895C7.73175 14.5534 5.1836 14.2619 2.8276 14.3873C2.09203 14.2587 1.75116 13.8364 1.64178 13.1655L0.878435 4.54558C0.710025 4.38221 0.481427 4.33281 0.310702 4.15532C-0.221151 3.60006 -0.0434807 2.66593 0.639999 2.29358C0.702502 2.25938 0.998811 2.12043 1.03411 2.12043H3.49371ZM4.30394 2.12043H8.70228C8.71964 1.8333 8.70691 1.36813 8.32321 1.30951C7.19122 1.38116 5.90586 1.20367 4.79238 1.30246C4.28831 1.34696 4.29815 1.71931 4.30394 2.12043ZM12.0415 3.0589C12.0172 3.03068 11.8812 2.9574 11.8419 2.94926L1.26329 2.93243C0.749379 2.95794 0.749379 3.72598 1.26329 3.75149H11.7429C12.1029 3.75312 12.2429 3.29338 12.0415 3.0589ZM11.2487 4.56295H1.75753L2.51508 13.1612C2.5608 13.4597 2.68754 13.5498 2.9989 13.5759C5.22817 13.762 7.7468 13.4293 10.0073 13.5759L10.3823 13.4391L11.2487 4.56295Z",
+            fill: color
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M4.22952 5.50209C4.41761 5.72137 4.34006 6.27067 4.36263 6.54477C4.51599 8.36961 4.73649 10.3719 4.77121 12.1892C4.78568 12.9404 3.98125 12.8953 3.90254 12.4047C3.84698 10.417 3.54836 8.42443 3.49164 6.43947C3.48586 6.23159 3.45576 5.67469 3.54894 5.52542C3.66411 5.34088 4.08426 5.33274 4.22952 5.50263V5.50209Z",
+            fill: color
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M9.43711 5.50146C9.55575 5.63933 9.52045 6.22879 9.51466 6.43776C9.45852 8.42272 9.15932 10.4153 9.10376 12.4029C9.02447 12.8936 8.21946 12.9381 8.23509 12.1875C8.27213 10.3681 8.48973 8.37007 8.64367 6.54306C8.67492 6.17234 8.50941 5.28598 9.18941 5.37771C9.24497 5.38531 9.40412 5.46238 9.43711 5.50092V5.50146Z",
+            fill: color
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M6.83313 5.50252C6.90547 5.58611 6.90142 5.68218 6.91068 5.78314C7.10224 7.89891 6.76253 10.266 6.90837 12.4083C6.88985 12.8822 6.11551 12.8806 6.09814 12.4083L6.15312 5.52478C6.31575 5.34783 6.6734 5.31689 6.83313 5.50252Z",
+            fill: color
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_3678_200811", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "17", height: "15", fill: "white", transform: "translate(0.728516 0.726562)" }) }) })
+    ]
+  }
+);
+var trash_default = TrashIcon;
+var RoleIcon = ({ size = 16, color = "currentColor", className, ...props }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    viewBox: "0 0 30 31",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    className,
+    fill: color,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("g", { clipPath: "url(#clip0_8249_21508)", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M28.1017 30.1367H1.89833C0.852141 30.1367 0 29.2846 0 28.2384V2.03505C0 0.98886 0.852141 0.136719 1.89833 0.136719H28.1017C29.1479 0.136719 30 0.98886 30 2.03505V28.2384C30 29.2846 29.1479 30.1367 28.1017 30.1367ZM2.10926 28.0275H27.8907V2.24598H2.10926V28.0275Z",
+            fill: color
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M8.63326 12.0173C8.90535 12.1649 9.20276 12.167 9.49172 12.0552L13.1471 8.87026C13.493 8.38092 13.0058 7.70595 12.3624 7.72704C12.2612 7.73126 12.1325 7.77345 12.0292 7.79454L9.1226 10.2582C8.97074 10.2814 8.11438 9.29844 7.75791 9.21618C6.88679 9.0158 6.22237 9.77303 6.78976 10.4164C6.98381 10.6357 8.416 11.9013 8.63536 12.0194L8.63326 12.0173Z",
+            fill: color
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M8.63326 22.4313C8.90535 22.579 9.20276 22.5811 9.49172 22.4693L13.1471 19.2843C13.493 18.795 13.0058 18.12 12.3624 18.1411C12.2612 18.1453 12.1325 18.1875 12.0292 18.2086L9.1226 20.6722C8.97074 20.6954 8.11438 19.7125 7.75791 19.6302C6.88679 19.4299 6.22237 20.1871 6.78976 20.8304C6.98381 21.0498 8.416 22.3153 8.63536 22.4335L8.63326 22.4313Z",
+            fill: color
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M22.5775 9.00586H15.3322C14.8663 9.00586 14.4885 9.3836 14.4885 9.84956V10.5688C14.4885 11.0348 14.8663 11.4125 15.3322 11.4125H22.5775C23.0435 11.4125 23.4212 11.0348 23.4212 10.5688V9.84956C23.4212 9.3836 23.0435 9.00586 22.5775 9.00586Z",
+            fill: color
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M22.5775 19.2715H15.3322C14.8663 19.2715 14.4885 19.6492 14.4885 20.1152V20.8344C14.4885 21.3004 14.8663 21.6781 15.3322 21.6781H22.5775C23.0435 21.6781 23.4212 21.3004 23.4212 20.8344V20.1152C23.4212 19.6492 23.0435 19.2715 22.5775 19.2715Z",
+            fill: color
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M22.5775 14.1387H15.3322C14.8663 14.1387 14.4885 14.5164 14.4885 14.9824V15.7016C14.4885 16.1676 14.8663 16.5453 15.3322 16.5453H22.5775C23.0435 16.5453 23.4212 16.1676 23.4212 15.7016V14.9824C23.4212 14.5164 23.0435 14.1387 22.5775 14.1387Z",
+            fill: color
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_8249_21508", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "30", height: "30", fill: color, transform: "translate(0 0.136719)" }) }) })
+    ]
+  }
+);
+var role_default = RoleIcon;
+var UserIcon = ({ size = 16, color = "currentColor", className, ...props }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    viewBox: "0 0 31 31",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    className,
+    fill: color,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("g", { clipPath: "url(#clip0_6640_79285)", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M15.5 0.832031C7.22905 0.832031 0.5 7.56108 0.5 15.832C0.5 24.103 7.22905 30.832 15.5 30.832C23.7709 30.832 30.5 24.103 30.5 15.832C30.5 7.56108 23.7709 0.832031 15.5 0.832031ZM15.5 28.7053C8.40089 28.7053 2.62675 22.9311 2.62675 15.832C2.62675 8.73292 8.40089 2.95879 15.5 2.95879C22.5991 2.95879 28.3732 8.73292 28.3732 15.832C28.3732 22.9311 22.5991 28.7053 15.5 28.7053Z",
+            fill: color
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M19.5281 15.6953C20.483 14.7489 21.0742 13.4389 21.0742 11.9905C21.0742 9.11304 18.7327 6.77148 15.8552 6.77148C12.9777 6.77148 10.6361 9.11304 10.6361 11.9905C10.6361 13.5154 11.2933 14.8893 12.3397 15.8442C9.37922 17.2543 7.3269 20.2764 7.3269 23.7685C7.3269 24.3555 7.8033 24.8319 8.39028 24.8319C8.97727 24.8319 9.45366 24.3555 9.45366 23.7685C9.45366 20.3848 11.9973 17.586 15.2725 17.1756C15.4639 17.1968 15.6595 17.2096 15.8552 17.2096C16.1274 17.2096 16.3954 17.1883 16.657 17.1479C20.0619 17.4329 22.7459 20.2913 22.7459 23.7685C22.7459 24.3555 23.2223 24.8319 23.8093 24.8319C24.3962 24.8319 24.8726 24.3555 24.8726 23.7685C24.8726 20.1466 22.6672 17.0331 19.5302 15.6953H19.5281ZM12.7629 11.9905C12.7629 10.2849 14.1495 8.89824 15.8552 8.89824C17.5608 8.89824 18.9475 10.2849 18.9475 11.9905C18.9475 13.4644 17.9096 14.6979 16.5272 15.0063C16.3848 14.9999 16.2423 14.9956 16.0976 14.9956C15.8339 14.9956 15.5723 15.0084 15.315 15.0318C13.8667 14.7766 12.7608 13.5112 12.7608 11.9884L12.7629 11.9905Z",
+            fill: color
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_6640_79285", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "30", height: "30", fill: color, transform: "translate(0.5 0.832031)" }) }) })
+    ]
+  }
+);
+var user_default = UserIcon;
+var PlusIcon2 = ({ size = 16, color = "currentColor", className, ...props }) => /* @__PURE__ */ jsxRuntime.jsxs(
   "svg",
   {
     viewBox: "0 0 17 15",
     xmlns: "http://www.w3.org/2000/svg",
-    width: size,
-    height: size,
-    fill: "none",
-    className,
+    className: `${className} w-[${size}px] h-[${size}px]`,
+    fill: color,
+    preserveAspectRatio: "xMidYMid meet",
     ...props,
     children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("g", { clipPath: "url(#clip0_336_302483)", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("g", { clipPath: "url(#clip0_3678_200811)", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "path",
           {
-            d: "M3.49371 2.12043C3.38318 1.44249 3.66212 0.708651 4.43068 0.529533C4.94459 0.409578 7.77168 0.42749 8.38456 0.492081C9.25207 0.583811 9.64966 1.36813 9.5125 2.12097C10.3748 2.22627 11.9484 1.85067 12.6087 2.44664C13.1053 2.89498 13.1452 3.75638 12.64 4.21232C12.2707 4.54558 12.1422 4.28179 12.0664 4.92282C11.7412 7.68938 11.6509 10.4907 11.3494 13.2605C11.2452 13.9135 10.7718 14.3401 10.0646 14.3895C7.73175 14.5534 5.1836 14.2619 2.8276 14.3873C2.09203 14.2587 1.75116 13.8364 1.64178 13.1655L0.878435 4.54558C0.710025 4.38221 0.481427 4.33281 0.310702 4.15532C-0.221151 3.60006 -0.0434807 2.66593 0.639999 2.29358C0.702502 2.25938 0.998811 2.12043 1.03411 2.12043H3.49371ZM4.30394 2.12043H8.70228C8.71964 1.8333 8.70691 1.36813 8.32321 1.30951C7.19122 1.38116 5.90586 1.20367 4.79238 1.30246C4.28831 1.34696 4.29815 1.71931 4.30394 2.12043ZM12.0415 3.0589C12.0172 3.03068 11.8812 2.9574 11.8419 2.94926L1.26329 2.93243C0.749379 2.95794 0.749379 3.72598 1.26329 3.75149H11.7429C12.1029 3.75312 12.2429 3.29338 12.0415 3.0589ZM11.2487 4.56295H1.75753L2.51508 13.1612C2.5608 13.4597 2.68754 13.5498 2.9989 13.5759C5.22817 13.762 7.7468 13.4293 10.0073 13.5759L10.3823 13.4391L11.2487 4.56295Z",
+            d: "M7.4394 7.51422C8.61928 7.38916 10.0254 7.55139 11.2183 7.54802C12.2462 7.76433 13.0834 8.73098 13.161 9.83283C13.2839 11.5938 13.064 13.5135 13.161 15.2947C13.1384 15.4874 12.9962 15.6395 12.8313 15.7105L5.74231 15.7274C5.50956 15.7172 5.30591 15.5009 5.29621 15.2609C5.39319 13.4933 5.17338 11.587 5.29621 9.83283C5.37703 8.67014 6.32417 7.63251 7.4394 7.51084V7.51422Z",
             fill: color
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
           "path",
           {
-            d: "M4.22952 5.50209C4.41761 5.72137 4.34006 6.27067 4.36263 6.54477C4.51599 8.36961 4.73649 10.3719 4.77121 12.1892C4.78568 12.9404 3.98125 12.8953 3.90254 12.4047C3.84698 10.417 3.54836 8.42443 3.49164 6.43947C3.48586 6.23159 3.45576 5.67469 3.54894 5.52542C3.66411 5.34088 4.08426 5.33274 4.22952 5.50263V5.50209Z",
+            d: "M8.92617 0.740824C11.315 0.507611 12.9895 3.18111 11.7547 5.35777C10.6071 7.37557 7.79155 7.35867 6.67955 5.31383C5.63867 3.40081 6.83148 0.946998 8.92617 0.740824Z",
             fill: color
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
           "path",
           {
-            d: "M9.43711 5.50146C9.55575 5.63933 9.52045 6.22879 9.51466 6.43776C9.45852 8.42272 9.15932 10.4153 9.10376 12.4029C9.02447 12.8936 8.21946 12.9381 8.23509 12.1875C8.27213 10.3681 8.48973 8.37007 8.64367 6.54306C8.67492 6.17234 8.50941 5.28598 9.18941 5.37771C9.24497 5.38531 9.40412 5.46238 9.43711 5.50092V5.50146Z",
+            d: "M2.04411 15.7226C1.31355 15.6314 0.815737 14.9588 0.770481 14.2219C0.71876 13.3668 0.715527 12.0656 0.770481 11.2138C0.831899 10.2844 1.41053 9.40896 2.22513 9.04055C2.94276 8.71608 3.74443 8.83776 4.50408 8.8141C4.41357 9.20955 4.32629 9.59485 4.30366 10.0038C4.21638 11.7039 4.37155 13.4817 4.30366 15.1886L4.40387 15.7226H2.04087H2.04411Z",
             fill: color
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
           "path",
           {
-            d: "M6.83313 5.50252C6.90547 5.58611 6.90142 5.68218 6.91068 5.78314C7.10224 7.89891 6.76253 10.266 6.90837 12.4083C6.88985 12.8822 6.11551 12.8806 6.09814 12.4083L6.15312 5.52478C6.31575 5.34783 6.6734 5.31689 6.83313 5.50252Z",
+            d: "M14.0531 15.7236L14.1533 15.1895C14.0854 13.4827 14.2406 11.7049 14.1533 10.0048C14.1339 9.5958 14.0434 9.21049 13.9529 8.81504C14.7125 8.8387 15.5142 8.71365 16.2318 9.0415C17.0497 9.41329 17.6283 10.2887 17.6865 11.2148C17.7414 12.0665 17.7414 13.3678 17.6865 14.2229C17.6445 14.8887 17.1079 15.7236 16.4129 15.7236H14.0499H14.0531Z",
+            fill: color
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M3.77045 3.60682C6.00737 3.34318 7.16139 6.2161 5.44491 7.67284C3.89975 8.98424 1.64019 7.61876 1.8988 5.55364C2.0184 4.58361 2.833 3.71835 3.77045 3.60682Z",
+            fill: color
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M14.0789 3.60555C16.5033 3.31826 17.528 6.61366 15.5044 7.86085C13.788 8.91875 11.7321 7.22542 12.2848 5.22114C12.5111 4.39983 13.2546 3.70357 14.0789 3.60555Z",
             fill: color
           }
         )
@@ -827,7 +1133,39 @@ var TrashIcon = ({
     ]
   }
 );
-var trash_default = TrashIcon;
+var user_friend_default = PlusIcon2;
+var PlusIcon3 = ({ size = 16, color = "currentColor", className, ...props }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    viewBox: "0 0 16 18",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    className,
+    fill: color,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("g", { clipPath: "url(#clip0_2001_145027)", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M15.6777 17.4958C15.5882 17.5711 15.3981 17.6249 15.2751 17.6249H0.545811C0.310948 17.5819 0.143189 17.3128 0.109638 17.0976C0.0201661 16.3551 0.0649018 14.5473 0.255029 13.8263C0.691202 12.1368 2.31287 10.8132 4.13585 10.6948C6.66342 10.5334 9.35875 10.8239 11.8975 10.6948C15.3869 11.136 16.2145 14.063 15.8566 17.0438C15.8454 17.173 15.7671 17.4097 15.6665 17.4958H15.6777Z",
+            fill: color
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M7.40161 0.396418C11.1147 0.0305414 13.6982 3.70007 11.7969 6.82078C9.89563 9.94149 5.26548 9.50029 3.87867 6.27196C2.79383 3.74311 4.52734 0.686967 7.40161 0.396418Z",
+            fill: color
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_2001_145027", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "15.87", height: "17.25", fill: "white", transform: "translate(0.0649414 0.375)" }) }) })
+    ]
+  }
+);
+var user_alone_default = PlusIcon3;
 var AuditFooter = ({
   createdAt,
   createdBy,
@@ -934,7 +1272,7 @@ function AccordionContent({
   );
 }
 var ExpandCollapse = ({ title, children, portalId }) => {
-  const [isOpen, setIsOpen] = React26.useState(false);
+  const [isOpen, setIsOpen] = React25.useState(false);
   const Panel = /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -1044,31 +1382,31 @@ function makeNewRow(field) {
   };
 }
 function useAdvanceSearch({ fields, limitRows }) {
-  const [rows, setRows] = React26.useState([makeNewRow(fields[0])]);
-  const updateRows = React26.useCallback((next) => {
+  const [rows, setRows] = React25.useState([makeNewRow(fields[0])]);
+  const updateRows = React25.useCallback((next) => {
     setRows(next);
   }, []);
-  const operatorsForField = React26.useCallback(
+  const operatorsForField = React25.useCallback(
     (fieldName) => {
       const t = getFieldType(fields, fieldName);
       return OPERATOR_MAP[t];
     },
     [fields]
   );
-  const addRow = React26.useCallback(() => {
+  const addRow = React25.useCallback(() => {
     if (limitRows && rows.length >= limitRows) return;
     const lastRow = rows[rows.length - 1];
     const lastField = fields.find((f) => f.name === lastRow?.fieldName) ?? fields[0];
     updateRows([...rows, makeNewRow(lastField)]);
   }, [rows, fields, updateRows, limitRows]);
-  const removeRow = React26.useCallback(
+  const removeRow = React25.useCallback(
     (id) => {
       if (rows.length === 1) return;
       updateRows(rows.filter((r) => r.id !== id));
     },
     [rows, updateRows]
   );
-  const clearRow = React26.useCallback(
+  const clearRow = React25.useCallback(
     (id) => {
       updateRows(
         rows.map((r) => {
@@ -1101,10 +1439,10 @@ function useAdvanceSearch({ fields, limitRows }) {
     },
     [rows, fields, updateRows]
   );
-  const clearAllRow = React26.useCallback(() => {
+  const clearAllRow = React25.useCallback(() => {
     updateRows([makeNewRow(fields[0])]);
   }, [fields, updateRows]);
-  const changeField = React26.useCallback(
+  const changeField = React25.useCallback(
     (id, fieldName) => {
       updateRows(
         rows.map((r) => {
@@ -1116,7 +1454,7 @@ function useAdvanceSearch({ fields, limitRows }) {
     },
     [rows, fields, updateRows]
   );
-  const changeOperator = React26.useCallback(
+  const changeOperator = React25.useCallback(
     (id, operator) => {
       updateRows(
         rows.map((r) => {
@@ -1150,7 +1488,7 @@ function useAdvanceSearch({ fields, limitRows }) {
     },
     [rows, updateRows]
   );
-  const changeValue = React26.useCallback(
+  const changeValue = React25.useCallback(
     (id, which, val) => {
       updateRows(
         rows.map((r) => {
@@ -1162,7 +1500,7 @@ function useAdvanceSearch({ fields, limitRows }) {
     },
     [rows, updateRows]
   );
-  const fieldOptions = React26.useMemo(
+  const fieldOptions = React25.useMemo(
     () => fields.map((f) => ({
       value: f.name,
       label: f.label ?? f.name
@@ -1357,7 +1695,7 @@ var OPERATOR_LABEL = {
   containsAll: "Contains all of"
 };
 var OperatorSelect = ({ row, operators, onChangeOperator, error }) => {
-  React26__namespace.default.useEffect(() => {
+  React25__namespace.default.useEffect(() => {
     if (!operators.length) return;
     if (!operators.includes(row.operator)) {
       onChangeOperator(operators[0]);
@@ -1393,15 +1731,15 @@ function Label2({ className, ...props }) {
   );
 }
 var Form = reactHookForm.FormProvider;
-var FormFieldContext = React26__namespace.createContext({});
+var FormFieldContext = React25__namespace.createContext({});
 var FormField = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.Controller, { ...props }) });
 };
 var useFormField = () => {
-  const fieldContext = React26__namespace.useContext(FormFieldContext);
-  const itemContext = React26__namespace.useContext(FormItemContext);
+  const fieldContext = React25__namespace.useContext(FormFieldContext);
+  const itemContext = React25__namespace.useContext(FormItemContext);
   const { getFieldState } = reactHookForm.useFormContext();
   const formState = reactHookForm.useFormState({ name: fieldContext.name });
   const fieldState = getFieldState(fieldContext.name, formState);
@@ -1418,9 +1756,9 @@ var useFormField = () => {
     ...fieldState
   };
 };
-var FormItemContext = React26__namespace.createContext({});
+var FormItemContext = React25__namespace.createContext({});
 function FormItem({ className, ...props }) {
-  const id = React26__namespace.useId();
+  const id = React25__namespace.useId();
   return /* @__PURE__ */ jsxRuntime.jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "form-item", className: cn("grid gap-2", className), ...props }) });
 }
 function FormLabel({ className, ...props }) {
@@ -1524,7 +1862,7 @@ var Spinner = ({ className, variant, size = "default", ...props }) => /* @__PURE
     ]
   }
 );
-var InputPrimitive = React26__namespace.forwardRef(
+var InputPrimitive = React25__namespace.forwardRef(
   ({ className, type = "text", ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "input",
@@ -1563,7 +1901,7 @@ var inputVariants = classVarianceAuthority.cva("", {
     appearance: "filled"
   }
 });
-var Input = React26__namespace.forwardRef(
+var Input = React25__namespace.forwardRef(
   ({
     className,
     wrapperClassName,
@@ -1596,8 +1934,8 @@ var Input = React26__namespace.forwardRef(
       onChange: onChangeProp
     } = rest;
     const ariaInvalid = invalid ?? ariaInvalidProp;
-    const messageId = React26__namespace.useId();
-    const handleChange = React26__namespace.useCallback(
+    const messageId = React25__namespace.useId();
+    const handleChange = React25__namespace.useCallback(
       (event) => {
         onChangeProp?.(event);
         onValueChange?.(event.target.value);
@@ -1940,20 +2278,20 @@ function DatePicker({
   className,
   ...props
 }) {
-  const today = React26__namespace.useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
-  const [displayed, setDisplayed] = React26__namespace.useState(
+  const today = React25__namespace.useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
+  const [displayed, setDisplayed] = React25__namespace.useState(
     selectedDate ? new Date(selectedDate) : /* @__PURE__ */ new Date()
   );
   minDate = clampToDay(minDate);
   maxDate = clampToDay(maxDate);
-  const disabledSet = React26__namespace.useMemo(() => {
+  const disabledSet = React25__namespace.useMemo(() => {
     const s = /* @__PURE__ */ new Set();
     disabledDates?.forEach((d) => s.add(startOfDay(d).toISOString()));
     return s;
   }, [disabledDates]);
   const displayYear = displayed.getFullYear();
   const displayMonth = displayed.getMonth();
-  const weekdays = React26__namespace.useMemo(() => {
+  const weekdays = React25__namespace.useMemo(() => {
     const labels = [];
     for (let i = 0; i < 7; i++) {
       const idx = i;
@@ -1962,7 +2300,7 @@ function DatePicker({
     }
     return labels;
   }, [callbacks]);
-  const grid = React26__namespace.useMemo(() => buildCalendarGrid(displayed, true), [displayed]);
+  const grid = React25__namespace.useMemo(() => buildCalendarGrid(displayed, true), [displayed]);
   const isDateDisabled = (date) => {
     const d = startOfDay(date);
     if (minDate && d < minDate) return true;
@@ -1972,7 +2310,7 @@ function DatePicker({
   };
   const minYear = minDate?.getFullYear();
   const maxYear = maxDate?.getFullYear();
-  const getMonthLabel = React26__namespace.useCallback(
+  const getMonthLabel = React25__namespace.useCallback(
     (year, monthIndex) => {
       const label = callbacks?.monthLabel?.(year, monthIndex);
       if (label === null || label === void 0) {
@@ -1982,7 +2320,7 @@ function DatePicker({
     },
     [callbacks]
   );
-  const getYearLabel = React26__namespace.useCallback(
+  const getYearLabel = React25__namespace.useCallback(
     (year) => {
       const label = callbacks?.yearLabel?.(year);
       if (label === null || label === void 0) return String(year);
@@ -1990,7 +2328,7 @@ function DatePicker({
     },
     [callbacks]
   );
-  const clampMonthToBounds = React26__namespace.useCallback(
+  const clampMonthToBounds = React25__namespace.useCallback(
     (year, monthIndex) => {
       let output = monthIndex;
       if (typeof minYear === "number" && year === minYear && minDate) {
@@ -2005,7 +2343,7 @@ function DatePicker({
     },
     [maxDate, minDate, maxYear, minYear]
   );
-  const yearOptions = React26__namespace.useMemo(() => {
+  const yearOptions = React25__namespace.useMemo(() => {
     const fallbackWindow = 50;
     const start = typeof minYear === "number" ? minYear : displayYear - fallbackWindow;
     const end = typeof maxYear === "number" ? maxYear : displayYear + fallbackWindow;
@@ -2026,7 +2364,7 @@ function DatePicker({
     }
     return years;
   }, [displayYear, maxYear, minYear, selectedDate]);
-  const monthOptions = React26__namespace.useMemo(() => {
+  const monthOptions = React25__namespace.useMemo(() => {
     const months = Array.from({ length: 12 }, (_, monthIndex) => {
       const disabled = typeof minYear === "number" && displayYear === minYear && minDate && monthIndex < minDate.getMonth() || typeof maxYear === "number" && displayYear === maxYear && maxDate && monthIndex > maxDate.getMonth();
       return {
@@ -2045,7 +2383,7 @@ function DatePicker({
     }
     return months.sort((a, b) => a.value - b.value).filter((option, index, arr) => index === 0 || option.value !== arr[index - 1].value);
   }, [displayMonth, displayYear, getMonthLabel, maxDate, maxYear, minDate, minYear]);
-  const handleMonthSelect = React26__namespace.useCallback((nextValue) => {
+  const handleMonthSelect = React25__namespace.useCallback((nextValue) => {
     const nextMonth = Number.parseInt(nextValue, 10);
     if (Number.isNaN(nextMonth)) return;
     setDisplayed((prev) => {
@@ -2055,7 +2393,7 @@ function DatePicker({
       return next;
     });
   }, []);
-  const handleYearSelect = React26__namespace.useCallback(
+  const handleYearSelect = React25__namespace.useCallback(
     (nextValue) => {
       const nextYear = Number.parseInt(nextValue, 10);
       if (Number.isNaN(nextYear)) return;
@@ -2203,14 +2541,14 @@ var DatePicker2 = ({
   ariaLabel,
   ...calendarProps
 }) => {
-  const [open, setOpen] = React26__namespace.default.useState(false);
-  const parser = React26__namespace.default.useMemo(() => valueParser ?? defaultValueParser, [valueParser]);
-  const outputFormatter = React26__namespace.default.useMemo(() => valueFormatter ?? defaultValueFormatter, [valueFormatter]);
-  const labelFormatter = React26__namespace.default.useMemo(
+  const [open, setOpen] = React25__namespace.default.useState(false);
+  const parser = React25__namespace.default.useMemo(() => valueParser ?? defaultValueParser, [valueParser]);
+  const outputFormatter = React25__namespace.default.useMemo(() => valueFormatter ?? defaultValueFormatter, [valueFormatter]);
+  const labelFormatter = React25__namespace.default.useMemo(
     () => displayFormatter ?? defaultDisplayFormatter,
     [displayFormatter]
   );
-  const parsedValue = React26__namespace.default.useMemo(() => {
+  const parsedValue = React25__namespace.default.useMemo(() => {
     if (value === null || value === void 0) return void 0;
     if (value instanceof Date) return value;
     const parsed = parser(value);
@@ -2219,26 +2557,26 @@ var DatePicker2 = ({
   const buttonLabel = parsedValue ? labelFormatter(parsedValue) : placeholder2;
   const buttonAriaLabel = ariaLabel ?? (parsedValue ? `Change date, current selection ${labelFormatter(parsedValue)}` : "Open date picker");
   const shouldShowClear = allowClear && !disabled && !!parsedValue;
-  const handleClose = React26__namespace.default.useCallback(() => setOpen(false), []);
-  const emitChange = React26__namespace.default.useCallback(
+  const handleClose = React25__namespace.default.useCallback(() => setOpen(false), []);
+  const emitChange = React25__namespace.default.useCallback(
     (next) => {
       onChange?.(next);
       onValueChange?.(next ? outputFormatter(next) : void 0);
     },
     [onChange, onValueChange, outputFormatter]
   );
-  const handleSelect = React26__namespace.default.useCallback(
+  const handleSelect = React25__namespace.default.useCallback(
     (next) => {
       emitChange(next);
       if (closeOnSelect && next) handleClose();
     },
     [closeOnSelect, emitChange, handleClose]
   );
-  const handleClear = React26__namespace.default.useCallback(() => {
+  const handleClear = React25__namespace.default.useCallback(() => {
     emitChange(void 0);
     handleClose();
   }, [emitChange, handleClose]);
-  const handleOpenChange = React26__namespace.default.useCallback(
+  const handleOpenChange = React25__namespace.default.useCallback(
     (nextOpen) => {
       if (disabled && nextOpen) return;
       setOpen(nextOpen);
@@ -2428,15 +2766,15 @@ function MonthCal({
   onYearBackward,
   onYearForward
 }) {
-  const today = React26__namespace.useMemo(() => {
+  const today = React25__namespace.useMemo(() => {
     const now = /* @__PURE__ */ new Date();
     now.setDate(1);
     now.setHours(0, 0, 0, 0);
     return now;
   }, []);
-  const selectedMonthDate = React26__namespace.useMemo(() => normalizeMonth(selectedDate), [selectedDate]);
-  const min = React26__namespace.useMemo(() => normalizeMonth(minDate), [minDate]);
-  const max = React26__namespace.useMemo(() => normalizeMonth(maxDate), [maxDate]);
+  const selectedMonthDate = React25__namespace.useMemo(() => normalizeMonth(selectedDate), [selectedDate]);
+  const min = React25__namespace.useMemo(() => normalizeMonth(minDate), [minDate]);
+  const max = React25__namespace.useMemo(() => normalizeMonth(maxDate), [maxDate]);
   let effectiveMin = min;
   if (min && max && min > max) {
     effectiveMin = max;
@@ -2445,10 +2783,10 @@ function MonthCal({
   const minMonth = effectiveMin?.getMonth();
   const maxYear = max?.getFullYear();
   const maxMonth = max?.getMonth();
-  const [menuYear, setMenuYear] = React26__namespace.useState(
+  const [menuYear, setMenuYear] = React25__namespace.useState(
     () => selectedMonthDate?.getFullYear() ?? today.getFullYear()
   );
-  React26__namespace.useEffect(() => {
+  React25__namespace.useEffect(() => {
     if (selectedMonthDate) {
       const year = selectedMonthDate.getFullYear();
       if (year !== menuYear) {
@@ -2456,7 +2794,7 @@ function MonthCal({
       }
     }
   }, [selectedMonthDate, menuYear]);
-  React26__namespace.useEffect(() => {
+  React25__namespace.useEffect(() => {
     if (typeof minYear === "number" && menuYear < minYear) {
       setMenuYear(minYear);
       return;
@@ -2467,7 +2805,7 @@ function MonthCal({
   }, [minYear, maxYear, menuYear]);
   const disablePrevYear = typeof minYear === "number" ? menuYear <= minYear : false;
   const disableNextYear = typeof maxYear === "number" ? menuYear >= maxYear : false;
-  const yearOptions = React26__namespace.useMemo(() => {
+  const yearOptions = React25__namespace.useMemo(() => {
     const fallbackWindow = 50;
     const start = typeof minYear === "number" ? minYear : menuYear - fallbackWindow;
     const end = typeof maxYear === "number" ? maxYear : menuYear + fallbackWindow;
@@ -2481,7 +2819,7 @@ function MonthCal({
     }
     return years;
   }, [maxYear, menuYear, minYear]);
-  const formatYearLabel = React26__namespace.useCallback(
+  const formatYearLabel = React25__namespace.useCallback(
     (year) => {
       const raw = callbacks?.yearLabel?.(year);
       if (raw === null || raw === void 0) return String(year);
@@ -2489,7 +2827,7 @@ function MonthCal({
     },
     [callbacks]
   );
-  const handleYearSelect = React26__namespace.useCallback(
+  const handleYearSelect = React25__namespace.useCallback(
     (nextValue) => {
       const nextYear = Number.parseInt(nextValue, 10);
       if (Number.isNaN(nextYear)) return;
@@ -2499,7 +2837,7 @@ function MonthCal({
     },
     [maxYear, minYear]
   );
-  const disabledPairs = React26__namespace.useMemo(() => {
+  const disabledPairs = React25__namespace.useMemo(() => {
     if (!disabledDates?.length) return [];
     const pairs = [];
     disabledDates.forEach((date) => {
@@ -2644,14 +2982,14 @@ var MonthPicker2 = ({
   ariaLabel,
   ...calendarProps
 }) => {
-  const [open, setOpen] = React26__namespace.default.useState(false);
-  const parser = React26__namespace.default.useMemo(() => valueParser ?? defaultValueParser2, [valueParser]);
-  const outputFormatter = React26__namespace.default.useMemo(() => valueFormatter ?? defaultValueFormatter2, [valueFormatter]);
-  const labelFormatter = React26__namespace.default.useMemo(
+  const [open, setOpen] = React25__namespace.default.useState(false);
+  const parser = React25__namespace.default.useMemo(() => valueParser ?? defaultValueParser2, [valueParser]);
+  const outputFormatter = React25__namespace.default.useMemo(() => valueFormatter ?? defaultValueFormatter2, [valueFormatter]);
+  const labelFormatter = React25__namespace.default.useMemo(
     () => displayFormatter ?? defaultDisplayFormatter2,
     [displayFormatter]
   );
-  const parsedValue = React26__namespace.default.useMemo(() => {
+  const parsedValue = React25__namespace.default.useMemo(() => {
     if (value === null || value === void 0) return void 0;
     if (value instanceof Date) return normalizeMonth2(value);
     if (typeof value === "string") {
@@ -2663,8 +3001,8 @@ var MonthPicker2 = ({
   const buttonLabel = parsedValue ? labelFormatter(parsedValue) : placeholder2;
   const buttonAriaLabel = ariaLabel ?? (parsedValue ? `Change month, current selection ${labelFormatter(parsedValue)}` : "Open month picker");
   const shouldShowClear = allowClear && !disabled && !!parsedValue;
-  const handleClose = React26__namespace.default.useCallback(() => setOpen(false), []);
-  const emitChange = React26__namespace.default.useCallback(
+  const handleClose = React25__namespace.default.useCallback(() => setOpen(false), []);
+  const emitChange = React25__namespace.default.useCallback(
     (next) => {
       const normalized = next ? normalizeMonth2(next) : void 0;
       onChange?.(normalized);
@@ -2672,18 +3010,18 @@ var MonthPicker2 = ({
     },
     [onChange, onValueChange, outputFormatter]
   );
-  const handleSelect = React26__namespace.default.useCallback(
+  const handleSelect = React25__namespace.default.useCallback(
     (next) => {
       emitChange(next);
       if (closeOnSelect && next) handleClose();
     },
     [closeOnSelect, emitChange, handleClose]
   );
-  const handleClear = React26__namespace.default.useCallback(() => {
+  const handleClear = React25__namespace.default.useCallback(() => {
     emitChange(void 0);
     handleClose();
   }, [emitChange, handleClose]);
-  const handleOpenChange = React26__namespace.default.useCallback(
+  const handleOpenChange = React25__namespace.default.useCallback(
     (nextOpen) => {
       if (disabled && nextOpen) return;
       setOpen(nextOpen);
@@ -2894,23 +3232,23 @@ var LookupSelect = ({
   dropdownPortalId,
   multiple = false
 }) => {
-  const [inputValue, setInputValue] = React26.useState("");
-  const inputRef = React26.useRef(null);
-  const [suggestions, setSuggestions] = React26.useState([]);
-  const [optionLabels, setOptionLabels] = React26.useState({});
-  const [loading, setLoading] = React26.useState(false);
-  const [fetchError, setFetchError] = React26.useState(null);
-  const [isDropdownOpen, setIsDropdownOpen] = React26.useState(false);
-  const containerRef = React26.useRef(null);
-  const fetchDelayRef = React26.useRef(null);
-  const requestIdRef = React26.useRef(0);
-  const [dropdownStyles, setDropdownStyles] = React26.useState();
-  const dropdownContentRef = React26.useRef(null);
-  const assignDropdownContentRef = React26.useCallback((node) => {
+  const [inputValue, setInputValue] = React25.useState("");
+  const inputRef = React25.useRef(null);
+  const [suggestions, setSuggestions] = React25.useState([]);
+  const [optionLabels, setOptionLabels] = React25.useState({});
+  const [loading, setLoading] = React25.useState(false);
+  const [fetchError, setFetchError] = React25.useState(null);
+  const [isDropdownOpen, setIsDropdownOpen] = React25.useState(false);
+  const containerRef = React25.useRef(null);
+  const fetchDelayRef = React25.useRef(null);
+  const requestIdRef = React25.useRef(0);
+  const [dropdownStyles, setDropdownStyles] = React25.useState();
+  const dropdownContentRef = React25.useRef(null);
+  const assignDropdownContentRef = React25.useCallback((node) => {
     dropdownContentRef.current = node;
   }, []);
-  const [activeSuggestionIndex, setActiveSuggestionIndex] = React26.useState(-1);
-  const dropdownPortalElement = React26.useMemo(() => {
+  const [activeSuggestionIndex, setActiveSuggestionIndex] = React25.useState(-1);
+  const dropdownPortalElement = React25.useMemo(() => {
     if (typeof document === "undefined") return null;
     if (dropdownPortalId) {
       const element = document.getElementById(dropdownPortalId);
@@ -2921,7 +3259,7 @@ var LookupSelect = ({
   const limitReached = multiple && value.length >= maxTags;
   const selectedValue = !multiple && value.length > 0 ? value[0] : void 0;
   const selectedLabel = selectedValue ? optionLabels[selectedValue] ?? selectedValue : void 0;
-  const upsertOptionLabels = React26.useCallback((options) => {
+  const upsertOptionLabels = React25.useCallback((options) => {
     setOptionLabels((prev) => {
       let next = null;
       options.forEach((opt) => {
@@ -2934,7 +3272,7 @@ var LookupSelect = ({
       return next ?? prev;
     });
   }, []);
-  const addTag = React26.useCallback(
+  const addTag = React25.useCallback(
     (val) => {
       const trimmed = val.trim();
       if (!trimmed) return;
@@ -2951,7 +3289,7 @@ var LookupSelect = ({
     },
     [value, onChange, maxTags, multiple]
   );
-  const removeTag = React26.useCallback(
+  const removeTag = React25.useCallback(
     (index) => {
       if (index < 0) return;
       const newTags = value.filter((_, i) => i !== index);
@@ -2959,14 +3297,14 @@ var LookupSelect = ({
     },
     [value, onChange]
   );
-  const handleClear = React26.useCallback(() => {
+  const handleClear = React25.useCallback(() => {
     setInputValue("");
     setSuggestions([]);
     setIsDropdownOpen(false);
     setFetchError(null);
     if (onClear) onClear();
   }, [onClear]);
-  const handleSuggestionSelect = React26.useCallback(
+  const handleSuggestionSelect = React25.useCallback(
     (option) => {
       upsertOptionLabels([option]);
       addTag(option.value);
@@ -2981,7 +3319,7 @@ var LookupSelect = ({
     },
     [addTag, multiple, upsertOptionLabels]
   );
-  const handleKeyDown = React26.useCallback(
+  const handleKeyDown = React25.useCallback(
     (e) => {
       if (e.key === "ArrowDown" && suggestions.length > 0) {
         e.preventDefault();
@@ -3008,7 +3346,7 @@ var LookupSelect = ({
     },
     [suggestions, activeSuggestionIndex, handleSuggestionSelect, inputValue, removeTag, value.length]
   );
-  const updateDropdownPosition = React26.useCallback(() => {
+  const updateDropdownPosition = React25.useCallback(() => {
     if (!dropdownPortalElement || !containerRef.current) return;
     const rect = containerRef.current.getBoundingClientRect();
     setDropdownStyles({
@@ -3019,7 +3357,7 @@ var LookupSelect = ({
       zIndex: 50
     });
   }, [dropdownPortalElement]);
-  React26.useEffect(() => {
+  React25.useEffect(() => {
     if (!fetchSuggestions) return;
     if (fetchDelayRef.current) {
       clearTimeout(fetchDelayRef.current);
@@ -3060,7 +3398,7 @@ var LookupSelect = ({
       }
     };
   }, [inputValue, fetchSuggestions, suggestionDebounce, upsertOptionLabels]);
-  React26.useEffect(() => {
+  React25.useEffect(() => {
     if (!fetchSuggestions) return;
     if (value.length === 0) return;
     const unresolvedValues = value.filter((v) => !optionLabels[v]);
@@ -3070,7 +3408,7 @@ var LookupSelect = ({
     }).catch(() => {
     });
   }, [value, fetchSuggestions, optionLabels, upsertOptionLabels]);
-  React26.useEffect(() => {
+  React25.useEffect(() => {
     const handleDocumentClick = (event) => {
       const target = event.target;
       if (containerRef.current?.contains(target)) return;
@@ -3082,11 +3420,11 @@ var LookupSelect = ({
       document.removeEventListener("mousedown", handleDocumentClick);
     };
   }, []);
-  React26.useEffect(() => {
+  React25.useEffect(() => {
     if (!limitReached) return;
     setIsDropdownOpen(false);
   }, [limitReached]);
-  React26.useEffect(() => {
+  React25.useEffect(() => {
     if (!dropdownPortalElement) return;
     if (!isDropdownOpen) return;
     updateDropdownPosition();
@@ -3098,7 +3436,7 @@ var LookupSelect = ({
       window.removeEventListener("scroll", handleReposition, true);
     };
   }, [dropdownPortalElement, isDropdownOpen, updateDropdownPosition]);
-  React26.useEffect(() => {
+  React25.useEffect(() => {
     if (suggestions.length === 0) {
       setActiveSuggestionIndex(-1);
       return;
@@ -3933,7 +4271,7 @@ var AdvanceSearch = ({
   shortDateFormat,
   filterFieldMap = FILTER_FIELD_MAP
 }) => {
-  const fieldsData = React26.useMemo(() => {
+  const fieldsData = React25.useMemo(() => {
     if (fields.length === 0) throw new Error("fields cannot be an empty array");
     return fields || [];
   }, [fields]);
@@ -3953,8 +4291,8 @@ var AdvanceSearch = ({
     defaultValues: {}
   });
   const { handleSubmit, unregister, resetField, getValues, clearErrors, setError } = form;
-  const [operatorErrors, setOperatorErrors] = React26__namespace.default.useState({});
-  const clearOperatorError = React26.useCallback(
+  const [operatorErrors, setOperatorErrors] = React25__namespace.default.useState({});
+  const clearOperatorError = React25.useCallback(
     (rowId) => {
       setOperatorErrors((prev) => {
         if (!(rowId in prev)) return prev;
@@ -3964,7 +4302,7 @@ var AdvanceSearch = ({
     },
     [setOperatorErrors]
   );
-  const clearValue = React26.useCallback(
+  const clearValue = React25.useCallback(
     (rowId, which) => {
       const fieldName = `${which}_${rowId}`;
       resetField(fieldName, { defaultValue: void 0 });
@@ -3974,14 +4312,14 @@ var AdvanceSearch = ({
     },
     [resetField, clearErrors]
   );
-  const parseRangeValue = React26.useCallback((raw, fieldType) => {
+  const parseRangeValue = React25.useCallback((raw, fieldType) => {
     if (!raw) return void 0;
     if (Array.isArray(raw)) return void 0;
     const normalized = fieldType === "datemonth" ? `${raw}-01` : raw;
     const parsed = dateFns.parseISO(normalized);
     return dateFns.isValid(parsed) ? parsed : void 0;
   }, []);
-  const onSubmit = React26.useCallback(() => {
+  const onSubmit = React25.useCallback(() => {
     const operatorValidation = {};
     rows.forEach((r) => {
       const ops = operatorsForField(r.fieldName);
@@ -4217,11 +4555,11 @@ function resetVisibleTableState(payload) {
   table.setSorting(prevState.sorting.filter((s) => isVisible(s.id)));
 }
 var useHover = () => {
-  const [hovering, setHovering] = React26.useState(false);
-  const prevRef = React26.useRef(null);
-  const onMouseEnter = React26.useCallback(() => setHovering(true), []);
-  const onMouseLeave = React26.useCallback(() => setHovering(false), []);
-  const nodeRefCallback = React26.useCallback(
+  const [hovering, setHovering] = React25.useState(false);
+  const prevRef = React25.useRef(null);
+  const onMouseEnter = React25.useCallback(() => setHovering(true), []);
+  const onMouseLeave = React25.useCallback(() => setHovering(false), []);
+  const nodeRefCallback = React25.useCallback(
     (node) => {
       if (prevRef.current) {
         prevRef.current.removeEventListener("mouseenter", onMouseEnter);
@@ -4249,15 +4587,15 @@ var useIntersectionObserver = ({
   initialIsIntersecting = false,
   onChange
 } = {}) => {
-  const [ref, setRef] = React26.useState(null);
-  const [state, setState] = React26.useState(() => ({
+  const [ref, setRef] = React25.useState(null);
+  const [state, setState] = React25.useState(() => ({
     isIntersecting: initialIsIntersecting,
     entry: void 0
   }));
-  const callbackRef = React26.useRef(null);
+  const callbackRef = React25.useRef(null);
   callbackRef.current = onChange;
   const frozen = state.entry?.isIntersecting && freezeOnceVisible;
-  React26.useEffect(() => {
+  React25.useEffect(() => {
     if (!ref) return;
     if (!("IntersectionObserver" in window)) return;
     if (frozen) return;
@@ -4287,8 +4625,8 @@ var useIntersectionObserver = ({
     frozen,
     freezeOnceVisible
   ]);
-  const prevRef = React26.useRef(null);
-  React26.useEffect(() => {
+  const prevRef = React25.useRef(null);
+  React25.useEffect(() => {
     if (!ref && state.entry?.target && !freezeOnceVisible && !frozen && prevRef.current !== state.entry.target) {
       prevRef.current = state.entry.target;
       setState({ isIntersecting: initialIsIntersecting, entry: void 0 });
@@ -4305,8 +4643,8 @@ var isValidMediaQueryString = (query) => {
   return query !== "not all";
 };
 var useMediaQuery = ({ query }) => {
-  const [matches, setMatches] = React26.useState(false);
-  React26.useEffect(() => {
+  const [matches, setMatches] = React25.useState(false);
+  React25.useEffect(() => {
     if (typeof window === "undefined") {
       return;
     }
@@ -4342,8 +4680,8 @@ var useTruncated = ({
   onChange,
   resizeDetectDelay = 150
 }) => {
-  const [isTruncated, setIsTruncated] = React26.useState(false);
-  React26.useEffect(() => {
+  const [isTruncated, setIsTruncated] = React25.useState(false);
+  React25.useEffect(() => {
     const element = elementRef.current;
     if (!element) return;
     const checkTruncate = debounce(() => {
@@ -4371,22 +4709,29 @@ var useControllableState = ({
   defaultValue,
   value
 }) => {
-  const [internalValue, setInternalValue] = React26__namespace.useState(value ?? defaultValue);
-  React26__namespace.useEffect(() => {
-    if (value !== internalValue) {
-      setInternalValue(value);
-    }
-  }, [value]);
-  const updateState = React26__namespace.useCallback((nextValue) => {
-    setInternalValue(nextValue);
-  }, []);
+  const isControlled = typeof value !== "undefined";
+  const [internalValue, setInternalValue] = React25__namespace.useState(() => {
+    return isControlled ? value : defaultValue;
+  });
+  React25__namespace.useEffect(() => {
+    if (!isControlled) return;
+    setInternalValue(value);
+  }, [isControlled, value]);
+  const setValue = React25__namespace.useCallback(
+    (nextValue) => {
+      if (isControlled) return;
+      setInternalValue(nextValue);
+    },
+    [isControlled]
+  );
   return {
-    value: internalValue,
-    updateState
+    value: isControlled ? value : internalValue,
+    setValue,
+    isControlled
   };
 };
 var useControllableState_default = useControllableState;
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React26.useLayoutEffect : React26.useEffect;
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React25.useLayoutEffect : React25.useEffect;
 var HeaderCell = ({
   rootClassName,
   labelClassName,
@@ -4489,7 +4834,7 @@ function TableHeader({ className, ...props }) {
     "thead",
     {
       "data-slot": "table-header",
-      className: cn("[&_tr]:border-b bg-[#f7f4f4]", className),
+      className: cn("[&_tr]:border-b bg-sus-gray-2", className),
       ...props
     }
   );
@@ -4523,7 +4868,7 @@ function TableHead({ className, ...props }) {
     {
       "data-slot": "table-head",
       className: cn(
-        "text-foreground h-9 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] hover:bg-gray-200 bg-[#F0F0F0] truncate",
+        "text-foreground h-9 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5 hover:bg-gray-200 bg-[#F0F0F0] truncate",
         className
       ),
       ...props
@@ -4536,7 +4881,7 @@ function TableCell({ className, ...props }) {
     {
       "data-slot": "table-cell",
       className: cn(
-        "p-2 h-10 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] border-b truncate",
+        "p-2 h-10 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5 border-b truncate",
         className
       ),
       ...props
@@ -4584,7 +4929,7 @@ var ColumnSeparator = ({ show, className, ...props }) => {
     }
   );
 };
-var ColumnSeparator_default = React26__namespace.default.memo(ColumnSeparator);
+var ColumnSeparator_default = React25__namespace.default.memo(ColumnSeparator);
 var StatusContentSlot = ({
   content,
   icon,
@@ -4603,7 +4948,7 @@ var StatusContentSlot = ({
     content
   ] });
 };
-var StatusContentSlot_default = React26__namespace.default.memo(StatusContentSlot);
+var StatusContentSlot_default = React25__namespace.default.memo(StatusContentSlot);
 var stateOptions = [
   "columnFilters",
   "globalFilter",
@@ -4656,9 +5001,9 @@ var modelOptions = [
   "getCenterVisibleLeafColumns"
 ];
 var DataTableDevTool = ({ table }) => {
-  const [open, setOpen] = React26.useState(false);
-  const [visibleStates, setVisibleStates] = React26.useState([]);
-  const [visibleModels, setVisibleModels] = React26.useState([]);
+  const [open, setOpen] = React25.useState(false);
+  const [visibleStates, setVisibleStates] = React25.useState([]);
+  const [visibleModels, setVisibleModels] = React25.useState([]);
   const tableState = table.getState();
   const toggleValue = (arr, value) => arr.includes(value) ? arr.filter((v) => v !== value) : [...arr, value];
   const getCircularReplacer = () => {
@@ -4915,14 +5260,14 @@ var DataTable = ({
       columnResizeMode: columnResizing?.enabled ? columnResizing?.resizeMode ?? "onChange" : "onChange"
     })
   });
-  const tableContainerRef = React26.useRef(null);
+  const tableContainerRef = React25.useRef(null);
   const isTableEmpty = table.getCoreRowModel().rows.length === 0;
   const isTableEmptyAfterFiltering = table.getRowModel().rows.length === 0;
   const isFiltering = table.getState().columnFilters.length > 0 || !!table.getState().globalFilter;
   const leftVisibleLeftColumns = table.getLeftVisibleLeafColumns();
   const centerVisibleLeafColumns = table.getCenterVisibleLeafColumns();
   const rightVisibleLeafColumns = table.getRightVisibleLeafColumns();
-  const { isSomeColumnsFilterable, filterableColumns } = React26.useMemo(() => {
+  const { isSomeColumnsFilterable, filterableColumns } = React25.useMemo(() => {
     const mergedColumns = [
       ...leftVisibleLeftColumns,
       ...centerVisibleLeafColumns,
@@ -4933,7 +5278,7 @@ var DataTable = ({
     );
     return { isSomeColumnsFilterable: isSomeColumnsFilterable2, filterableColumns: mergedColumns };
   }, [centerVisibleLeafColumns, leftVisibleLeftColumns, rightVisibleLeafColumns]);
-  const autoStatusKey = React26.useMemo(() => {
+  const autoStatusKey = React25.useMemo(() => {
     if (isInitialLoading) return "initialLoading";
     if (isTableEmpty) return "emptyData";
     if (isTableEmptyAfterFiltering) return "emptyFilteredData";
@@ -4951,14 +5296,14 @@ var DataTable = ({
     scrollFetch?.hasMore,
     scrollFetch?.isFetchingMore
   ]);
-  const activeStatusContentComputed = React26.useMemo(() => {
+  const activeStatusContentComputed = React25.useMemo(() => {
     if (!activeStatusContent) return autoStatusKey;
     if (typeof activeStatusContent === "function") {
       return activeStatusContent({ defaultComputedValue: autoStatusKey });
     }
     return activeStatusContent;
   }, [activeStatusContent, autoStatusKey]);
-  const fetchMoreOnScrollReached = React26.useCallback(
+  const fetchMoreOnScrollReached = React25.useCallback(
     (containerRefElement) => {
       if (!scrollFetch?.enabled || !containerRefElement || scrollFetch?.isFetchingMore || !scrollFetch?.hasMore || !scrollFetch?.fetchMore) {
         return;
@@ -4992,14 +5337,14 @@ var DataTable = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [scrollFetch?.enabled, scrollFetch?.isFetchingMore, scrollFetch?.hasMore, scrollFetch?.fetchMore]
   );
-  React26.useEffect(() => {
+  React25.useEffect(() => {
     if (!tableRef) return;
     tableRef.current = table;
     return () => {
       tableRef.current = null;
     };
   }, [tableRef, table]);
-  React26.useEffect(() => {
+  React25.useEffect(() => {
     fetchMoreOnScrollReached(tableContainerRef.current);
   }, [fetchMoreOnScrollReached]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -5129,7 +5474,7 @@ var DataTable = ({
             ),
             /* @__PURE__ */ jsxRuntime.jsx(TableBody, { ...components?.tableBodyProps, children: table.getRowModel().rows.map((row) => {
               const tableDataRowProps = typeof components?.tableDataRowProps === "function" ? components.tableDataRowProps({ row, table }) || {} : components?.tableDataRowProps || {};
-              return /* @__PURE__ */ React26.createElement(
+              return /* @__PURE__ */ React25.createElement(
                 TableRow,
                 {
                   "data-testid": `table-data-row-${row.id}`,
@@ -5542,6 +5887,11 @@ var defaultResource = {
           description: "Unsaved changes. Do you want to leave this page?",
           confirm_text: "Leave"
         },
+        "confirm.reset_form": {
+          title: "Confirmation",
+          description: "Unsaved changes. If you continue, all changes will be lost.",
+          confirm_text: "Reset"
+        },
         "confirm.remove": {
           title: "Confirmation",
           description: "Are you sure you want to remove this item?",
@@ -5602,11 +5952,11 @@ function DialogAlert({
 }) {
   const alignClass = align === "start" ? "justify-start" : align === "end" ? "justify-end" : "justify-center";
   const { t } = reactI18next.useTranslation();
-  const handleCancel = React26.useCallback(() => {
+  const handleCancel = React25.useCallback(() => {
     onCancel?.();
     onOpenChange(false);
   }, [onCancel, onOpenChange]);
-  const handleConfirm = React26.useCallback(() => {
+  const handleConfirm = React25.useCallback(() => {
     let func = onConfirm;
     if (variant === "success" && showCancel === false) {
       func = onConfirm ?? onCancel;
@@ -5781,6 +6131,12 @@ var DIALOG_ALERT_TEMPLATES = {
     description: "confirm.leave_page.description",
     confirmText: "confirm.leave_page.confirm_text"
   },
+  "confirm.reset_form": {
+    variant: "confirm",
+    title: "confirm.reset_form.title",
+    description: "confirm.reset_form.description",
+    confirmText: "confirm.reset_form.confirm_text"
+  },
   "confirm.remove": {
     variant: "confirm",
     title: "confirm.remove.title",
@@ -5830,7 +6186,7 @@ var DialogAlertProvider = ({ children, i18nResource, i18nLang }) => {
   const open = useDialogAlertStore((state) => state.open);
   const setOpen = useDialogAlertStore((state) => state.setOpen);
   const dialogProps = useDialogAlertStore((state) => state.dialogProps);
-  React26.useEffect(() => {
+  React25.useEffect(() => {
     if (!i18nResource) {
       i18n_default.changeLanguage("sharedui");
       return;
@@ -5940,8 +6296,8 @@ var defaultOperatorShortcuts = {
 };
 var DEFAULT_DEBOUNCE = 200;
 function useKeyboardNavigation(itemsLength, onSelect, isLocked) {
-  const [selectedIndex, setSelectedIndex] = React26.useState(0);
-  React26.useEffect(() => {
+  const [selectedIndex, setSelectedIndex] = React25.useState(0);
+  React25.useEffect(() => {
     const handler = (event) => {
       if (event.key === "ArrowDown") {
         event.preventDefault();
@@ -5964,10 +6320,10 @@ function useKeyboardNavigation(itemsLength, onSelect, isLocked) {
   return [selectedIndex, setSelectedIndex];
 }
 function useDropdownPosition(clientRect, itemsCount) {
-  const [rect, setRect] = React26.useState(null);
-  const [style, setStyle] = React26.useState({});
-  const ref = React26.useRef(null);
-  React26.useEffect(() => {
+  const [rect, setRect] = React25.useState(null);
+  const [style, setStyle] = React25.useState({});
+  const ref = React25.useRef(null);
+  React25.useEffect(() => {
     if (!clientRect) return;
     const update = () => {
       const nextRect = clientRect();
@@ -5984,7 +6340,7 @@ function useDropdownPosition(clientRect, itemsCount) {
       resizeObserver.disconnect();
     };
   }, [clientRect]);
-  React26.useLayoutEffect(() => {
+  React25.useLayoutEffect(() => {
     if (!rect || !ref.current) return;
     const dropdown = ref.current;
     const dropdownRect = dropdown.getBoundingClientRect();
@@ -6011,15 +6367,15 @@ var SuggestionList = ({
   debounceMs = DEFAULT_DEBOUNCE,
   query
 }) => {
-  const [items, setItems] = React26.useState([]);
-  const [isLoading, setIsLoading] = React26.useState(false);
-  const fetchId = React26.useRef(0);
-  const debounceHandle = React26.useRef(null);
-  const itemRefs = React26.useRef([]);
+  const [items, setItems] = React25.useState([]);
+  const [isLoading, setIsLoading] = React25.useState(false);
+  const fetchId = React25.useRef(0);
+  const debounceHandle = React25.useRef(null);
+  const itemRefs = React25.useRef([]);
   const { ref, style, rect } = useDropdownPosition(clientRect, items.length);
-  const normalizedMap = React26.useMemo(() => mapItem, [mapItem]);
-  const normalizeItem = React26.useMemo(() => normalizeToken, [normalizeToken]);
-  React26.useEffect(() => {
+  const normalizedMap = React25.useMemo(() => mapItem, [mapItem]);
+  const normalizeItem = React25.useMemo(() => normalizeToken, [normalizeToken]);
+  React25.useEffect(() => {
     const runFetch = (input) => {
       fetchId.current += 1;
       const currentId = fetchId.current;
@@ -6050,7 +6406,7 @@ var SuggestionList = ({
       fetchId.current += 1;
     };
   }, [query, fetchItems, normalizedMap, normalizeItem, debounceMs]);
-  const handleSelect = React26.useMemo(
+  const handleSelect = React25.useMemo(
     () => (item) => {
       if (isLoading) return;
       command(item);
@@ -6065,10 +6421,10 @@ var SuggestionList = ({
     },
     isLoading
   );
-  React26.useEffect(() => {
+  React25.useEffect(() => {
     setSelectedIndex(0);
   }, [items, setSelectedIndex]);
-  React26.useEffect(() => {
+  React25.useEffect(() => {
     const element = itemRefs.current[selectedIndex];
     if (element) element.scrollIntoView({ block: "nearest" });
   }, [selectedIndex]);
@@ -6116,8 +6472,8 @@ var DISALLOWED_MARKS = ["bold", "italic", "link"];
 var SUGGESTION_DEBOUNCE = 200;
 var DEFAULT_CHIP_CLASS = "outline-1 outline-muted bg-muted/40 text-foreground";
 var TokenView = ({ node, editor, getPos }) => {
-  const [isFocused, setIsFocused] = React26__namespace.default.useState(false);
-  React26__namespace.default.useEffect(() => {
+  const [isFocused, setIsFocused] = React25__namespace.default.useState(false);
+  React25__namespace.default.useEffect(() => {
     const handler = () => {
       const { from, to } = editor.state.selection;
       const position = getPos();
@@ -6668,6 +7024,8 @@ __export(ui_exports, {
   Input: () => Input,
   InputPrimitive: () => InputPrimitive,
   Label: () => Label2,
+  ListContainer: () => container_default,
+  ListHeader: () => header_default,
   MonthPicker: () => MonthPicker,
   Popover: () => Popover,
   PopoverAnchor: () => PopoverAnchor,
@@ -6744,6 +7102,76 @@ __export(ui_exports, {
   useFormField: () => useFormField,
   useSidebar: () => useSidebar
 });
+var ListContainer = ({ className, isLeftExpanded, children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "h-[calc(100vh-140px)] min-w-full overflow-hidden rounded-2xl border border-slate-300 bg-white shadow-lg transition-all duration-300 ease-in-out",
+        {
+          "w-full": isLeftExpanded,
+          "md:w-full": isLeftExpanded,
+          "w-full lg:w-1/2": !isLeftExpanded
+        },
+        className
+      ),
+      style: {
+        position: "relative",
+        transitionProperty: "width, transform",
+        transitionDuration: "300ms"
+      },
+      children
+    }
+  );
+};
+var container_default = ListContainer;
+var ListHeader = ({
+  title,
+  titleIcon,
+  isExpanded = false,
+  bgColor = "bg-[#82B495]",
+  textClassName = "text-white",
+  onSettingClick,
+  onExpandClick,
+  rightActions,
+  className
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "list-header", className: cn("rounded-t-lg px-4 py-2", bgColor, className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2 text-lg", textClassName), children: [
+      titleIcon,
+      title
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: rightActions ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      onSettingClick && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: onSettingClick,
+          title: "Settings",
+          className: "rounded p-1 hover:cursor-pointer hover:bg-white/20",
+          children: /* @__PURE__ */ jsxRuntime.jsx(setting_default, { className: "text-white" })
+        }
+      ),
+      onSettingClick && onExpandClick && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("h-8 w-px", textClassName.replace("text-", "bg-")) }),
+      onExpandClick && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          "data-testid": "list-expand-button",
+          onClick: onExpandClick,
+          title: isExpanded ? "Collapse" : "Expand",
+          className: "rounded p-1 hover:cursor-pointer hover:bg-white/20",
+          children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center gap-0.5 text-white", children: isExpanded ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4 -ml-2" })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-4 w-4 -ml-2" })
+          ] }) })
+        }
+      )
+    ] }) })
+  ] }) });
+};
+var header_default = ListHeader;
 function RadioGroupRoot({
   children,
   ...props
@@ -7032,21 +7460,21 @@ function ToolbarPlugin({
   acceptImageMimeTypes
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const [state, setState] = React26.useState(initialToolbarState);
-  const fileInputRef = React26.useRef(null);
-  const [isLinkDialogOpen, setLinkDialogOpen] = React26.useState(false);
-  const [editingExistingLink, setEditingExistingLink] = React26.useState(false);
-  const [linkNodeKey, setLinkNodeKey] = React26.useState(null);
-  const [isImageDialogOpen, setImageDialogOpen] = React26.useState(false);
-  const [editingExistingImage, setEditingExistingImage] = React26.useState(false);
-  const [imageNodeKey, setImageNodeKey] = React26.useState(null);
+  const [state, setState] = React25.useState(initialToolbarState);
+  const fileInputRef = React25.useRef(null);
+  const [isLinkDialogOpen, setLinkDialogOpen] = React25.useState(false);
+  const [editingExistingLink, setEditingExistingLink] = React25.useState(false);
+  const [linkNodeKey, setLinkNodeKey] = React25.useState(null);
+  const [isImageDialogOpen, setImageDialogOpen] = React25.useState(false);
+  const [editingExistingImage, setEditingExistingImage] = React25.useState(false);
+  const [imageNodeKey, setImageNodeKey] = React25.useState(null);
   const linkForm = reactHookForm.useForm({
     defaultValues: { url: "", label: "" }
   });
   const imageForm = reactHookForm.useForm({
     defaultValues: { url: "", alt: "", width: "", height: "" }
   });
-  const openImageDialog = React26.useCallback(() => {
+  const openImageDialog = React25.useCallback(() => {
     if (disabled || !allowImageUrlInsert) {
       return;
     }
@@ -7080,7 +7508,7 @@ function ToolbarPlugin({
     setImageNodeKey(targetImage?.getKey() ?? null);
     setImageDialogOpen(true);
   }, [allowImageUrlInsert, disabled, editor, imageForm]);
-  const closeImageDialog = React26.useCallback(() => {
+  const closeImageDialog = React25.useCallback(() => {
     setImageDialogOpen(false);
     setEditingExistingImage(false);
     setImageNodeKey(null);
@@ -7089,7 +7517,7 @@ function ToolbarPlugin({
       editor.focus();
     }, 0);
   }, [editor, imageForm]);
-  const openLinkDialog = React26.useCallback(() => {
+  const openLinkDialog = React25.useCallback(() => {
     if (disabled) {
       return;
     }
@@ -7129,7 +7557,7 @@ function ToolbarPlugin({
     setLinkNodeKey(detectedLink?.getKey() ?? null);
     setLinkDialogOpen(true);
   }, [disabled, editor, linkForm]);
-  const closeLinkDialog = React26.useCallback(() => {
+  const closeLinkDialog = React25.useCallback(() => {
     setLinkDialogOpen(false);
     setEditingExistingLink(false);
     setLinkNodeKey(null);
@@ -7170,7 +7598,7 @@ function ToolbarPlugin({
     });
     closeLinkDialog();
   });
-  const handleRemoveLink = React26.useCallback(() => {
+  const handleRemoveLink = React25.useCallback(() => {
     editor.focus();
     editor.update(() => {
       if (linkNodeKey) {
@@ -7187,7 +7615,7 @@ function ToolbarPlugin({
     });
     closeLinkDialog();
   }, [closeLinkDialog, editor, linkNodeKey]);
-  const handleLinkDialogOpenChange = React26.useCallback(
+  const handleLinkDialogOpenChange = React25.useCallback(
     (open) => {
       if (open) {
         setLinkDialogOpen(true);
@@ -7197,7 +7625,7 @@ function ToolbarPlugin({
     },
     [closeLinkDialog]
   );
-  const updateToolbar = React26.useCallback(() => {
+  const updateToolbar = React25.useCallback(() => {
     const selection = lexical.$getSelection();
     if (!lexical.$isRangeSelection(selection)) {
       return;
@@ -7237,7 +7665,7 @@ function ToolbarPlugin({
       isLink: hasLink
     }));
   }, []);
-  React26__namespace.useEffect(() => {
+  React25__namespace.useEffect(() => {
     return utils.mergeRegister(
       editor.registerCommand(
         lexical.CAN_UNDO_COMMAND,
@@ -7268,7 +7696,7 @@ function ToolbarPlugin({
       })
     );
   }, [editor, updateToolbar]);
-  const applyBlock = React26.useCallback(
+  const applyBlock = React25.useCallback(
     (nextBlock) => {
       if (disabled) {
         return;
@@ -7330,7 +7758,7 @@ function ToolbarPlugin({
     },
     [disabled, editor, state.blockType]
   );
-  const toggleFormat = React26.useCallback(
+  const toggleFormat = React25.useCallback(
     (format5) => {
       if (disabled) {
         return;
@@ -7339,10 +7767,10 @@ function ToolbarPlugin({
     },
     [disabled, editor]
   );
-  const toggleLink = React26.useCallback(() => {
+  const toggleLink = React25.useCallback(() => {
     openLinkDialog();
   }, [openLinkDialog]);
-  const applyElementFormat = React26.useCallback(
+  const applyElementFormat = React25.useCallback(
     (format5) => {
       if (disabled) {
         return;
@@ -7353,7 +7781,7 @@ function ToolbarPlugin({
   );
   const canInsertImage = allowImageUrlInsert || Boolean(onImageUpload);
   const imageAccept = acceptImageMimeTypes ?? DEFAULT_IMAGE_ACCEPT;
-  const handleInsertImage = React26.useCallback(() => {
+  const handleInsertImage = React25.useCallback(() => {
     if (disabled || !canInsertImage) {
       return;
     }
@@ -7364,7 +7792,7 @@ function ToolbarPlugin({
     }
     openImageDialog();
   }, [canInsertImage, disabled, editor, onImageUpload, openImageDialog]);
-  const handleFileChange = React26.useCallback(
+  const handleFileChange = React25.useCallback(
     async (event) => {
       if (!onImageUpload) {
         return;
@@ -7454,7 +7882,7 @@ function ToolbarPlugin({
     });
     closeImageDialog();
   });
-  const handleImageDialogOpenChange = React26.useCallback(
+  const handleImageDialogOpenChange = React25.useCallback(
     (open) => {
       if (open) {
         setImageDialogOpen(true);
@@ -7464,7 +7892,7 @@ function ToolbarPlugin({
     },
     [closeImageDialog]
   );
-  const handleRemoveImage = React26.useCallback(() => {
+  const handleRemoveImage = React25.useCallback(() => {
     if (!imageNodeKey) {
       closeImageDialog();
       return;
@@ -7823,7 +8251,7 @@ function ControlledValuePlugin({
   trackAppliedValue
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React26__namespace.useEffect(() => {
+  React25__namespace.useEffect(() => {
     if (value == null || trackAppliedValue.current === value) {
       return;
     }
@@ -7847,14 +8275,14 @@ function ControlledValuePlugin({
 }
 function EditableStatePlugin({ editable }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React26__namespace.useEffect(() => {
+  React25__namespace.useEffect(() => {
     editor.setEditable(editable);
   }, [editor, editable]);
   return null;
 }
 function ImagesPlugin() {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React26__namespace.useEffect(() => {
+  React25__namespace.useEffect(() => {
     return editor.registerCommand(
       INSERT_IMAGE_COMMAND,
       (payload) => {
@@ -7873,7 +8301,7 @@ function ImagesPlugin() {
   }, [editor]);
   return null;
 }
-var RichText = React26.forwardRef(function RichText2({
+var RichText = React25.forwardRef(function RichText2({
   value,
   defaultValue,
   onChange,
@@ -7892,11 +8320,11 @@ var RichText = React26.forwardRef(function RichText2({
   id,
   ...rest
 }, ref) {
-  const initialSerializedStateRef = React26.useRef(void 0);
+  const initialSerializedStateRef = React25.useRef(void 0);
   if (initialSerializedStateRef.current === void 0) {
     initialSerializedStateRef.current = parseSerializedEditorState(value ?? defaultValue);
   }
-  const initialConfig = React26.useMemo(
+  const initialConfig = React25.useMemo(
     () => ({
       namespace: "RichTextEditor",
       editable: !(readOnly || disabled),
@@ -7909,8 +8337,8 @@ var RichText = React26.forwardRef(function RichText2({
     }),
     [disabled, readOnly]
   );
-  const appliedValueRef = React26.useRef(value ?? defaultValue);
-  const handleChange = React26.useCallback(
+  const appliedValueRef = React25.useRef(value ?? defaultValue);
+  const handleChange = React25.useCallback(
     (editorState, editor) => {
       const serialized = JSON.stringify(editorState.toJSON());
       appliedValueRef.current = serialized;
@@ -8099,13 +8527,13 @@ function SheetDescription({
   );
 }
 function useIsMobile(breakpoint = 768) {
-  const [isMobile, setIsMobile] = React26.useState(() => {
+  const [isMobile, setIsMobile] = React25.useState(() => {
     if (typeof window === "undefined") {
       return false;
     }
     return window.innerWidth < breakpoint;
   });
-  React26.useEffect(() => {
+  React25.useEffect(() => {
     function onResize() {
       setIsMobile(window.innerWidth < breakpoint);
     }
@@ -8135,9 +8563,9 @@ var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_MOBILE = "18rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
-var SidebarContext = React26__namespace.createContext(null);
+var SidebarContext = React25__namespace.createContext(null);
 function useSidebar() {
-  const context = React26__namespace.useContext(SidebarContext);
+  const context = React25__namespace.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
@@ -8153,10 +8581,10 @@ function SidebarProvider({
   ...props
 }) {
   const isMobile = useIsMobile();
-  const [openMobile, setOpenMobile] = React26__namespace.useState(false);
-  const [_open, _setOpen] = React26__namespace.useState(defaultOpen);
+  const [openMobile, setOpenMobile] = React25__namespace.useState(false);
+  const [_open, _setOpen] = React25__namespace.useState(defaultOpen);
   const open = openProp ?? _open;
-  const setOpen = React26__namespace.useCallback(
+  const setOpen = React25__namespace.useCallback(
     (value) => {
       const openState = typeof value === "function" ? value(open) : value;
       if (setOpenProp) {
@@ -8168,10 +8596,10 @@ function SidebarProvider({
     },
     [setOpenProp, open]
   );
-  const toggleSidebar = React26__namespace.useCallback(() => {
+  const toggleSidebar = React25__namespace.useCallback(() => {
     return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
   }, [isMobile, setOpen, setOpenMobile]);
-  React26__namespace.useEffect(() => {
+  React25__namespace.useEffect(() => {
     const handleKeyDown = (event) => {
       if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
         event.preventDefault();
@@ -8182,7 +8610,7 @@ function SidebarProvider({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [toggleSidebar]);
   const state = open ? "expanded" : "collapsed";
-  const contextValue = React26__namespace.useMemo(
+  const contextValue = React25__namespace.useMemo(
     () => ({
       state,
       open,
@@ -8624,7 +9052,7 @@ function SidebarMenuSkeleton({
   showIcon = false,
   ...props
 }) {
-  const width = React26__namespace.useMemo(() => {
+  const width = React25__namespace.useMemo(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`;
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -8889,10 +9317,10 @@ var FormulaEditor = ({
   fieldState,
   mode = "edit"
 }) => {
-  const [isExpanded, setIsExpanded] = React26.useState(false);
-  const lastEmittedValueRef = React26.useRef(null);
-  const ignorePropValueRef = React26.useRef(false);
-  const normalizedConfigs = React26.useMemo(() => {
+  const [isExpanded, setIsExpanded] = React25.useState(false);
+  const lastEmittedValueRef = React25.useRef(null);
+  const ignorePropValueRef = React25.useRef(false);
+  const normalizedConfigs = React25.useMemo(() => {
     const configsToUse = tokenConfigs?.length ? tokenConfigs : DEFAULT_TOKEN_CONFIGS;
     return configsToUse.map((config) => ({
       ...config,
@@ -8901,18 +9329,18 @@ var FormulaEditor = ({
       outputType: config.outputType ?? config.type
     }));
   }, [tokenConfigs]);
-  const prefixMap = React26.useMemo(() => buildPrefixMap(normalizedConfigs), [normalizedConfigs]);
-  const configLookup = React26.useMemo(() => {
+  const prefixMap = React25.useMemo(() => buildPrefixMap(normalizedConfigs), [normalizedConfigs]);
+  const configLookup = React25.useMemo(() => {
     const lookup = /* @__PURE__ */ new Map();
     normalizedConfigs.forEach((config) => lookup.set(config.prefix, config));
     return lookup;
   }, [normalizedConfigs]);
-  const allowedOperators = React26.useMemo(() => operators.map((operator) => operator.value), [operators]);
+  const allowedOperators = React25.useMemo(() => operators.map((operator) => operator.value), [operators]);
   const displayError = errorMessage ?? fieldState?.error?.message;
   const hasError = Boolean(displayError);
   const isEditorReadOnly = mode === "display";
   const isEditorDisabled = disabled || loading || isEditorReadOnly;
-  const convertValueToContent = React26.useCallback(
+  const convertValueToContent = React25.useCallback(
     (input) => {
       if (!input) return "";
       const trimmed = input.trim();
@@ -8924,8 +9352,8 @@ var FormulaEditor = ({
     },
     [configLookup, prefixMap]
   );
-  const resolvedContent = React26.useMemo(() => convertValueToContent(value), [convertValueToContent, value]);
-  const extensions = React26.useMemo(
+  const resolvedContent = React25.useMemo(() => convertValueToContent(value), [convertValueToContent, value]);
+  const extensions = React25.useMemo(
     () => [
       StarterKit__default.default.configure({ bold: false, italic: false }),
       Token.configure({ configs: normalizedConfigs, onSelect: onSelectSuggestion }),
@@ -8957,11 +9385,11 @@ var FormulaEditor = ({
       }
     }
   });
-  React26.useEffect(() => {
+  React25.useEffect(() => {
     if (!editor) return;
     editor.setEditable(!isEditorDisabled);
   }, [editor, isEditorDisabled]);
-  React26.useEffect(() => {
+  React25.useEffect(() => {
     if (!editor || resolvedContent === void 0) return;
     if (ignorePropValueRef.current && typeof value === "string" && value === lastEmittedValueRef.current) {
       ignorePropValueRef.current = false;
@@ -9093,7 +9521,7 @@ function SortableRow({
     id: value,
     disabled: name === "columns.0.id"
   });
-  const style = React26__namespace.useMemo(
+  const style = React25__namespace.useMemo(
     () => ({
       transform: utilities.CSS.Transform.toString(transform),
       transition
@@ -9205,8 +9633,8 @@ var GridSettingsModal = ({
   onClose,
   onSaveColumns
 }) => {
-  const [isDragging, setIsDragging] = React26.useState(false);
-  const scrollRef = React26.useRef(null);
+  const [isDragging, setIsDragging] = React25.useState(false);
+  const scrollRef = React25.useRef(null);
   const form = reactHookForm.useForm({
     resolver: zod$1.zodResolver(GridSettingsSchema),
     defaultValues: { columns: currentColumns },
@@ -9218,7 +9646,7 @@ var GridSettingsModal = ({
     name: "columns",
     keyName: "fieldId"
   });
-  React26.useEffect(() => {
+  React25.useEffect(() => {
     if (isOpen) {
       form.reset({ columns: currentColumns });
     }
@@ -9495,7 +9923,7 @@ function getCandidateWidths({
   }
   return DEVICE_SIZES;
 }
-var Image2 = React26__namespace.forwardRef(function Image3({
+var Image2 = React25__namespace.forwardRef(function Image3({
   src,
   alt,
   width,
@@ -9525,34 +9953,34 @@ var Image2 = React26__namespace.forwardRef(function Image3({
   } = imgProps;
   const widthNumber = toNumber(width);
   const heightNumber = toNumber(height);
-  React26__namespace.useEffect(() => {
+  React25__namespace.useEffect(() => {
     if (!fill && (!widthNumber || !heightNumber)) {
       console.warn(
         "[Image] When `fill` is false you should provide both `width` and `height` to prevent layout shifts."
       );
     }
   }, [fill, heightNumber, widthNumber]);
-  const candidateWidths = React26__namespace.useMemo(
+  const candidateWidths = React25__namespace.useMemo(
     () => getCandidateWidths({ width: widthNumber, sizes, fill }),
     [fill, sizes, widthNumber]
   );
   const largestWidth = candidateWidths[candidateWidths.length - 1] ?? widthNumber ?? DEVICE_SIZES[DEVICE_SIZES.length - 1];
-  const computedSrc = React26__namespace.useMemo(() => {
+  const computedSrc = React25__namespace.useMemo(() => {
     if (unoptimized) {
       return src;
     }
     return loader({ src, width: largestWidth, quality });
   }, [largestWidth, loader, quality, src, unoptimized]);
-  const computedSrcSet = React26__namespace.useMemo(() => {
+  const computedSrcSet = React25__namespace.useMemo(() => {
     if (unoptimized) {
       return void 0;
     }
     return candidateWidths.map((currentWidth) => `${loader({ src, width: currentWidth, quality })} ${currentWidth}w`).join(", ");
   }, [candidateWidths, loader, quality, src, unoptimized]);
   const sizesValue = sizes ?? (fill ? "100vw" : widthNumber ? `${widthNumber}px` : void 0);
-  const [isLoaded, setIsLoaded] = React26__namespace.useState(false);
-  const internalRef = React26__namespace.useRef(null);
-  const setRefs = React26__namespace.useCallback(
+  const [isLoaded, setIsLoaded] = React25__namespace.useState(false);
+  const internalRef = React25__namespace.useRef(null);
+  const setRefs = React25__namespace.useCallback(
     (node) => {
       internalRef.current = node;
       if (!ref) {
@@ -9566,7 +9994,7 @@ var Image2 = React26__namespace.forwardRef(function Image3({
     },
     [ref]
   );
-  React26__namespace.useEffect(() => {
+  React25__namespace.useEffect(() => {
     const image = internalRef.current;
     if (!image) {
       return;
@@ -9578,7 +10006,7 @@ var Image2 = React26__namespace.forwardRef(function Image3({
       setIsLoaded(false);
     }
   }, [onLoadingComplete, src]);
-  const handleLoad = React26__namespace.useCallback(
+  const handleLoad = React25__namespace.useCallback(
     (event) => {
       setIsLoaded(true);
       onLoadProp?.(event);
@@ -9590,7 +10018,7 @@ var Image2 = React26__namespace.forwardRef(function Image3({
   const fetchPriority = priority ? "high" : fetchPriorityProp;
   const decoding = decodingProp ?? "async";
   const resolvedObjectFit = objectFit ?? (fill ? "cover" : void 0);
-  const wrapperStyle = React26__namespace.useMemo(
+  const wrapperStyle = React25__namespace.useMemo(
     () => ({
       position: "relative",
       display: fill ? "block" : "inline-block",
@@ -9600,7 +10028,7 @@ var Image2 = React26__namespace.forwardRef(function Image3({
     }),
     [fill, height, width]
   );
-  const imageStyle = React26__namespace.useMemo(
+  const imageStyle = React25__namespace.useMemo(
     () => ({
       width: fill ? "100%" : formatDimension(width) ?? void 0,
       height: fill ? "100%" : formatDimension(height) ?? void 0,
@@ -9661,107 +10089,47 @@ var Image2 = React26__namespace.forwardRef(function Image3({
   );
 });
 Image2.displayName = "Image";
-var ListTable = ({ onTableReady, children }) => {
-  React26__namespace.useEffect(() => {
-    if (onTableReady) {
-      onTableReady({ ready: true });
-    }
-  }, [onTableReady]);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full w-full items-center justify-center", children: children ?? "Provide your table implementation here." });
-};
-var table_default = ListTable;
-var ListContainer = ({ className, isLeftExpanded, children }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: cn(
-        "h-[calc(100vh-140px)] min-w-full overflow-hidden rounded-2xl border border-slate-300 bg-white shadow-lg transition-all duration-300 ease-in-out",
-        {
-          "w-full": isLeftExpanded,
-          "md:w-full": isLeftExpanded,
-          "w-full lg:w-1/2": !isLeftExpanded
-        },
-        className
-      ),
-      style: {
-        position: "relative",
-        transitionProperty: "width, transform",
-        transitionDuration: "300ms"
-      },
-      children
-    }
-  );
-};
-var container_default = ListContainer;
-var ListHeader = ({
+var MainListContainer = ({
   title,
   titleIcon,
-  isExpanded = false,
-  bgColor = "bg-[#82B495]",
-  textClassName = "text-white",
+  isExpanded = true,
   onSettingClick,
   onExpandClick,
-  rightActions,
-  className
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "list-header", className: cn("rounded-t-lg px-4 py-2", bgColor, className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2 text-lg", textClassName), children: [
-      titleIcon,
-      title
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: rightActions ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      onSettingClick && /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          onClick: onSettingClick,
-          title: "Settings",
-          className: "rounded p-1 hover:cursor-pointer hover:bg-white/20",
-          children: /* @__PURE__ */ jsxRuntime.jsx(setting_default, { className: "text-white" })
-        }
-      ),
-      onSettingClick && onExpandClick && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("h-8 w-px", textClassName.replace("text-", "bg-")) }),
-      onExpandClick && /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          "data-testid": "list-expand-button",
-          onClick: onExpandClick,
-          title: isExpanded ? "Collapse" : "Expand",
-          className: "rounded p-1 hover:cursor-pointer hover:bg-white/20",
-          children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center gap-[2px] text-white", children: isExpanded ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-4 w-4" }),
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4 -ml-2" })
-          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" }),
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-4 w-4 -ml-2" })
-          ] }) })
-        }
-      )
-    ] }) })
-  ] }) });
-};
-var header_default = ListHeader;
-var List = ({
-  isLeftExpanded,
-  handleSettingClick,
-  handleExpandClick,
-  onTableReady,
-  children
+  children,
+  slots,
+  classNames,
+  renderHeader
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(container_default, { className: "flex flex-col bg-white shadow-lg", isLeftExpanded, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      header_default,
-      {
-        title: "Previous Example",
-        isExpanded: isLeftExpanded,
-        onSettingClick: handleSettingClick,
-        onExpandClick: handleExpandClick,
-        titleIcon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleUserRound, { className: "h-6 w-6 text-white" })
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full", children: /* @__PURE__ */ jsxRuntime.jsx(table_default, { onTableReady, children }) })
-  ] });
+  const Container = slots?.Container ?? container_default;
+  const Header2 = slots?.Header ?? header_default;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Container,
+    {
+      isLeftExpanded: isExpanded,
+      className: cn("flex flex-col bg-white shadow-lg", classNames?.root),
+      children: [
+        renderHeader ? renderHeader({
+          title,
+          titleIcon,
+          isExpanded,
+          onSettingClick,
+          onExpandClick
+        }) : Header2 ? /* @__PURE__ */ jsxRuntime.jsx(
+          Header2,
+          {
+            title,
+            titleIcon,
+            isExpanded,
+            onSettingClick,
+            onExpandClick
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex-1 flex flex-col relative min-h-0", classNames?.content), children })
+      ]
+    }
+  );
 };
-var List_default = List;
+var MainListContainer_default = MainListContainer;
 var InfoIcon = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
@@ -9807,7 +10175,7 @@ var InfoIcon = (props) => {
     }
   );
 };
-var InfoIcon_default = React26__namespace.default.memo(InfoIcon);
+var InfoIcon_default = React25__namespace.default.memo(InfoIcon);
 var Navbar = ({
   className,
   title,
@@ -9832,7 +10200,7 @@ var Navbar = ({
 }) => {
   const { isMobile, isTablet, isDesktop } = useScreenSize_default();
   const Icon2 = lucideReact.CircleHelp;
-  const shouldShowSeparator = !separatorDisable && React26.isValidElement(searchButton);
+  const shouldShowSeparator = !separatorDisable && React25.isValidElement(searchButton);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "nav",
     {
@@ -9843,8 +10211,8 @@ var Navbar = ({
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5", children: [
           headImageURL !== "" ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: headImageURL, alt: "", className: cn("w-full h-full", headImageURLClassName) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-            React26.isValidElement(title) ? title : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-white text-xl font-bold", children: title }),
-            React26.isValidElement(subTitle) ? subTitle : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-white text-sm font-semibold", children: subTitle })
+            React25.isValidElement(title) ? title : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-white text-xl font-bold", children: title }),
+            React25.isValidElement(subTitle) ? subTitle : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-white text-sm font-semibold", children: subTitle })
           ] }),
           tooltipTitle && /* @__PURE__ */ jsxRuntime.jsxs(Tooltip2, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger2, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("button", { className: "text-white hover:opacity-80 ", children: /* @__PURE__ */ jsxRuntime.jsx(InfoIcon_default, { className: "w-4" }) }) }),
@@ -9875,10 +10243,10 @@ var Navbar = ({
                       ),
                       children: [
                         tooltipTitle && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-                          React26.isValidElement(tooltipIcon) ? tooltipIcon : /* @__PURE__ */ jsxRuntime.jsx(Icon2, { size: 32, "aria-hidden": "true" }),
+                          React25.isValidElement(tooltipIcon) ? tooltipIcon : /* @__PURE__ */ jsxRuntime.jsx(Icon2, { size: 32, "aria-hidden": "true" }),
                           /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-bold", children: tooltipTitle })
                         ] }),
-                        React26.isValidElement(tooltipdescription) && tooltipdescription
+                        React25.isValidElement(tooltipdescription) && tooltipdescription
                       ]
                     }
                   ),
@@ -9933,13 +10301,13 @@ var Navbar = ({
             }
           ),
           shouldShowSeparator && /* @__PURE__ */ jsxRuntime.jsx("div", { role: "separator", className: "ml-1 w-[1px] h-10 bg-white" }),
-          React26.isValidElement(searchButton) ? searchButton : ""
+          React25.isValidElement(searchButton) ? searchButton : ""
         ] })
       ]
     }
   );
 };
-var navbar_default = React26__namespace.default.memo(Navbar);
+var navbar_default = React25__namespace.default.memo(Navbar);
 var usePreventPageLeaveStore = zustand.create((set) => ({
   isPreventing: false,
   setPreventing: (value) => set({ isPreventing: value })
@@ -9949,7 +10317,7 @@ var usePreventPageLeaveStore_default = usePreventPageLeaveStore;
 // src/components/prevent-page-leave/PreventPageLeave.tsx
 var PreventPageLeave = ({ children }) => {
   const { isPreventing } = usePreventPageLeaveStore();
-  React26.useEffect(() => {
+  React25.useEffect(() => {
     if (!isPreventing || typeof window === "undefined") {
       return;
     }
@@ -9967,11 +10335,76 @@ var PreventPageLeave = ({ children }) => {
 var PreventPageLeave_default = PreventPageLeave;
 var usePreventPageLeave = ({ isPrevening }) => {
   const setPreventing = usePreventPageLeaveStore_default((state) => state.setPreventing);
-  React26.useEffect(() => {
+  React25.useEffect(() => {
     setPreventing(isPrevening);
   }, [isPrevening, setPreventing]);
 };
 var usePreventPageLeave_default = usePreventPageLeave;
+var DefaultHeader = ({
+  title,
+  subtitle,
+  icon,
+  classNames,
+  rightActions
+}) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-start justify-between gap-3", classNames?.header), children: [
+  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+    icon ? /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "w-10 h-10 rounded-full bg-sus-green-50 flex items-center justify-center",
+          classNames?.iconWrapper
+        ),
+        children: icon
+      }
+    ) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+      subtitle ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-xs text-gray-500", classNames?.subtitle), children: subtitle }) : null,
+      title ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-lg font-semibold text-sus-green-1", classNames?.title), children: title }) : null
+    ] })
+  ] }),
+  rightActions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: rightActions }) : null
+] });
+var RightPanelContainer = ({
+  title,
+  subtitle,
+  icon,
+  rightActions,
+  children,
+  isExpanded = false,
+  className,
+  classNames,
+  slots,
+  renderHeader
+}) => {
+  const Container = slots?.Container ?? container_default;
+  const Header2 = slots?.Header ?? DefaultHeader;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Container,
+    {
+      isLeftExpanded: isExpanded,
+      className: cn(
+        "flex flex-col bg-white border border-slate-300 min-w-full",
+        className,
+        classNames?.root
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex-1 flex min-h-0 px-4 py-6 justify-center", classNames?.body), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full max-w-3xl overflow-auto", classNames?.content), children: [
+        renderHeader ? renderHeader({ title, subtitle, icon, rightActions, classNames }) : Header2 ? /* @__PURE__ */ jsxRuntime.jsx(
+          Header2,
+          {
+            title,
+            subtitle,
+            icon,
+            rightActions,
+            classNames
+          }
+        ) : null,
+        children
+      ] }) })
+    }
+  );
+};
+var RightPanelContainer_default = RightPanelContainer;
 
 // src/components/cropperModal/type.ts
 var CropperModalError = class extends Error {
@@ -10108,20 +10541,20 @@ var CropperModal = ({
   title,
   props
 }) => {
-  const [isLoading, setIsLoading] = React26.useState(false);
-  const [crop, setCrop] = React26.useState({ x: 0, y: 0 });
-  const [zoom, setZoom] = React26.useState();
-  const [croppedAreaPixels, setCroppedAreaPixels] = React26.useState(null);
-  const handleClose = React26.useCallback(() => {
+  const [isLoading, setIsLoading] = React25.useState(false);
+  const [crop, setCrop] = React25.useState({ x: 0, y: 0 });
+  const [zoom, setZoom] = React25.useState();
+  const [croppedAreaPixels, setCroppedAreaPixels] = React25.useState(null);
+  const handleClose = React25.useCallback(() => {
     onOpenChange(false);
   }, [onOpenChange]);
-  const handleCancel = React26.useCallback(() => {
+  const handleCancel = React25.useCallback(() => {
     if (onCancel) {
       onCancel();
     }
     handleClose();
   }, [handleClose, onCancel]);
-  const handleCropComplete = React26.useCallback((_, croppedAreaPixels2) => {
+  const handleCropComplete = React25.useCallback((_, croppedAreaPixels2) => {
     setCroppedAreaPixels(croppedAreaPixels2);
   }, []);
   const handleConfirm = async () => {
@@ -10229,7 +10662,7 @@ function isFragment(object) {
 var isValidText = (val) => ["string", "number"].includes(typeof val);
 function toArray(children, option = {}) {
   let ret = [];
-  React26__namespace.Children.forEach(children, (child) => {
+  React25__namespace.Children.forEach(children, (child) => {
     if ((child === void 0 || child === null) && !option.keepEmpty) {
       return;
     }
@@ -10243,9 +10676,9 @@ function toArray(children, option = {}) {
   });
   return ret;
 }
-var MeasureText = React26__namespace.forwardRef(({ style, children }, ref) => {
-  const spanRef = React26__namespace.useRef(null);
-  React26__namespace.useImperativeHandle(ref, () => ({
+var MeasureText = React25__namespace.forwardRef(({ style, children }, ref) => {
+  const spanRef = React25__namespace.useRef(null);
+  React25__namespace.useImperativeHandle(ref, () => ({
     isExceed: () => {
       const span = spanRef.current;
       return span.scrollHeight > span.clientHeight;
@@ -10303,19 +10736,19 @@ var lineClipStyle = {
 };
 function EllipsisMeasure(props) {
   const { enableMeasure, width, text, children, rows, expanded, miscDeps, onEllipsis } = props;
-  const nodeList = React26__namespace.useMemo(() => toArray(text), [text]);
-  const nodeLen = React26__namespace.useMemo(() => getNodesLen(nodeList), [text]);
-  const fullContent = React26__namespace.useMemo(() => children(nodeList, false), [text]);
-  const [ellipsisCutIndex, setEllipsisCutIndex] = React26__namespace.useState(null);
-  const cutMidRef = React26__namespace.useRef(null);
-  const measureWhiteSpaceRef = React26__namespace.useRef(null);
-  const needEllipsisRef = React26__namespace.useRef(null);
-  const descRowsEllipsisRef = React26__namespace.useRef(null);
-  const symbolRowEllipsisRef = React26__namespace.useRef(null);
-  const [canEllipsis, setCanEllipsis] = React26__namespace.useState(false);
-  const [needEllipsis, setNeedEllipsis] = React26__namespace.useState(STATUS_MEASURE_NONE);
-  const [ellipsisHeight, setEllipsisHeight] = React26__namespace.useState(0);
-  const [parentWhiteSpace, setParentWhiteSpace] = React26__namespace.useState(null);
+  const nodeList = React25__namespace.useMemo(() => toArray(text), [text]);
+  const nodeLen = React25__namespace.useMemo(() => getNodesLen(nodeList), [text]);
+  const fullContent = React25__namespace.useMemo(() => children(nodeList, false), [text]);
+  const [ellipsisCutIndex, setEllipsisCutIndex] = React25__namespace.useState(null);
+  const cutMidRef = React25__namespace.useRef(null);
+  const measureWhiteSpaceRef = React25__namespace.useRef(null);
+  const needEllipsisRef = React25__namespace.useRef(null);
+  const descRowsEllipsisRef = React25__namespace.useRef(null);
+  const symbolRowEllipsisRef = React25__namespace.useRef(null);
+  const [canEllipsis, setCanEllipsis] = React25__namespace.useState(false);
+  const [needEllipsis, setNeedEllipsis] = React25__namespace.useState(STATUS_MEASURE_NONE);
+  const [ellipsisHeight, setEllipsisHeight] = React25__namespace.useState(0);
+  const [parentWhiteSpace, setParentWhiteSpace] = React25__namespace.useState(null);
   useIsomorphicLayoutEffect(() => {
     if (enableMeasure && width && nodeLen) {
       setNeedEllipsis(STATUS_MEASURE_PREPARE);
@@ -10358,7 +10791,7 @@ function EllipsisMeasure(props) {
       setEllipsisCutIndex(isOverflow ? [minIndex, targetMidIndex] : [targetMidIndex, maxIndex]);
     }
   }, [ellipsisCutIndex, cutMidIndex]);
-  const finalContent = React26__namespace.useMemo(() => {
+  const finalContent = React25__namespace.useMemo(() => {
     if (!enableMeasure) {
       return children(nodeList, false);
     }
@@ -10449,10 +10882,10 @@ var Truncated = ({
   tooltipProps,
   tooltipContentProps
 }) => {
-  const elementRef = React26__namespace.useRef(null);
-  const [open, setOpen] = React26__namespace.useState(false);
-  const [isTruncated, setIsTruncated] = React26__namespace.useState(false);
-  const [measureWidth, setMeasureWidth] = React26__namespace.useState(0);
+  const elementRef = React25__namespace.useRef(null);
+  const [open, setOpen] = React25__namespace.useState(false);
+  const [isTruncated, setIsTruncated] = React25__namespace.useState(false);
+  const [measureWidth, setMeasureWidth] = React25__namespace.useState(0);
   const Comp = as;
   const normalizedChildren = typeof children === "string" ? children.replace(/>/g, ">\u200B") : children;
   const lineClampLines = typeof ellipsis === "number" ? ellipsis : typeof ellipsis === "object" ? ellipsis?.lineClamp ?? 3 : null;
@@ -10477,13 +10910,13 @@ var Truncated = ({
       setIsTruncated(false);
     }
   }, [enableMeasure]);
-  const truncationClass = React26__namespace.useMemo(() => {
+  const truncationClass = React25__namespace.useMemo(() => {
     if (!ellipsis) return "";
     if (typeof ellipsis === "number") return `line-clamp-${ellipsis}`;
     if (typeof ellipsis === "object") return `line-clamp-${lineClampLines ?? 3}`;
     return "truncate";
   }, [ellipsis, lineClampLines]);
-  const clampedStyle = React26__namespace.useMemo(() => {
+  const clampedStyle = React25__namespace.useMemo(() => {
     if (!lineClampLines) return style;
     return {
       ...style,
@@ -10545,7 +10978,7 @@ var Truncated = ({
   );
 };
 var truncated_default = Truncated;
-var InputPrimitive2 = React26__namespace.forwardRef(
+var InputPrimitive2 = React25__namespace.forwardRef(
   ({ className, type = "text", ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "input",
@@ -10584,7 +11017,7 @@ var inputVariants2 = classVarianceAuthority.cva("", {
     appearance: "filled"
   }
 });
-var Input2 = React26__namespace.forwardRef(
+var Input2 = React25__namespace.forwardRef(
   ({
     className,
     wrapperClassName,
@@ -10617,8 +11050,8 @@ var Input2 = React26__namespace.forwardRef(
       onChange: onChangeProp
     } = rest;
     const ariaInvalid = invalid ?? ariaInvalidProp;
-    const messageId = React26__namespace.useId();
-    const handleChange = React26__namespace.useCallback(
+    const messageId = React25__namespace.useId();
+    const handleChange = React25__namespace.useCallback(
       (event) => {
         onChangeProp?.(event);
         onValueChange?.(event.target.value);
@@ -10746,8 +11179,8 @@ var ActionMenu = ({
   actionButtonClassName,
   separatorClassName
 }) => {
-  const [open, setOpen] = React26.useState(false);
-  const isAllowed = React26.useCallback(
+  const [open, setOpen] = React25.useState(false);
+  const isAllowed = React25.useCallback(
     (requiredPermission) => {
       if (!checkPermissionFunc || requiredPermission === void 0) {
         return true;
@@ -10756,7 +11189,7 @@ var ActionMenu = ({
     },
     [checkPermissionFunc]
   );
-  const filteredButtons = React26.useMemo(() => {
+  const filteredButtons = React25.useMemo(() => {
     return buttons.filter((btn) => isAllowed(btn.requiredPermission));
   }, [buttons, isAllowed]);
   if (buttons.length === 0) {
@@ -11011,13 +11444,13 @@ var useFieldNames = ({
   fieldNames
 }) => {
   const { label: labelFieldKey = "label", value: valueFieldKey = "value" } = fieldNames || {};
-  const getLabelField = React26__namespace.default.useCallback(
+  const getLabelField = React25__namespace.default.useCallback(
     (option) => {
       return option?.[labelFieldKey];
     },
     [labelFieldKey]
   );
-  const getValueField = React26__namespace.default.useCallback(
+  const getValueField = React25__namespace.default.useCallback(
     (option) => {
       return option?.[valueFieldKey];
     },
@@ -11049,11 +11482,11 @@ var VirtualizedCommand = ({
   onFocus
 }) => {
   const { getLabelField, getValueField } = useFieldNames_default({ fieldNames });
-  const internalOptions = React26__namespace.useMemo(() => options ?? [], [options]);
-  const [filteredOptions, setFilteredOptions] = React26__namespace.useState(internalOptions);
-  const [focusedIndex, setFocusedIndex] = React26__namespace.useState(0);
-  const [isKeyboardNavActive, setIsKeyboardNavActive] = React26__namespace.useState(false);
-  const parentRef = React26__namespace.useRef(null);
+  const internalOptions = React25__namespace.useMemo(() => options ?? [], [options]);
+  const [filteredOptions, setFilteredOptions] = React25__namespace.useState(internalOptions);
+  const [focusedIndex, setFocusedIndex] = React25__namespace.useState(0);
+  const [isKeyboardNavActive, setIsKeyboardNavActive] = React25__namespace.useState(false);
+  const parentRef = React25__namespace.useRef(null);
   const virtualizer = reactVirtual.useVirtualizer({
     count: filteredOptions.length,
     getScrollElement: () => parentRef.current,
@@ -11061,14 +11494,14 @@ var VirtualizedCommand = ({
     overscan: 2
   });
   const virtualOptions = virtualizer.getVirtualItems();
-  const dynamicHeight = React26__namespace.useMemo(() => {
+  const dynamicHeight = React25__namespace.useMemo(() => {
     const contentHeight = filteredOptions.length * ROW_HEIGHT;
     if (contentHeight <= 0) {
       return MIN_HEIGHT_EMPTY;
     }
     return Math.max(ROW_HEIGHT, Math.min(height, contentHeight));
   }, [filteredOptions.length, height]);
-  const scrollToIndex = React26__namespace.useCallback(
+  const scrollToIndex = React25__namespace.useCallback(
     (index) => {
       virtualizer.scrollToIndex(index, {
         align: "center"
@@ -11076,7 +11509,7 @@ var VirtualizedCommand = ({
     },
     [virtualizer]
   );
-  const handleSearch = React26__namespace.useCallback(
+  const handleSearch = React25__namespace.useCallback(
     (search) => {
       setIsKeyboardNavActive(false);
       setFilteredOptions(
@@ -11091,7 +11524,7 @@ var VirtualizedCommand = ({
     },
     [filterOption, getLabelField, internalOptions]
   );
-  const handleKeyDown = React26__namespace.useCallback(
+  const handleKeyDown = React25__namespace.useCallback(
     (event) => {
       switch (event.key) {
         case "ArrowDown": {
@@ -11126,7 +11559,7 @@ var VirtualizedCommand = ({
     },
     [filteredOptions, focusedIndex, getValueField, onSelect, scrollToIndex]
   );
-  React26__namespace.useEffect(() => {
+  React25__namespace.useEffect(() => {
     if (value) {
       const option = filteredOptions.find((option2) => {
         const optionValue = getValueField(option2);
@@ -11238,40 +11671,71 @@ var ComboboxInner = ({
   notFoundContent,
   searchPlaceholder,
   showSearch,
+  open,
+  showValueWhenNoMatch,
+  onOpenChange,
+  onClear,
   ...props
 }, ref) => {
   const { getLabelField, getValueField } = useFieldNames_default({ fieldNames });
-  const [open, setOpen] = React26__namespace.useState(false);
-  const { value: selectedValue, updateState: setSelectedValue } = useControllableState_default({
+  const { value: openPopover, setValue: setOpenPopover } = useControllableState_default({
+    defaultValue: false,
+    value: open
+  });
+  const { value: selectedValue, setValue: setSelectedValue } = useControllableState_default({
     defaultValue,
     value
   });
-  const renderValue = React26__namespace.useMemo(() => {
-    if (!selectedValue) return placeholder2;
-    const selectedOptionFound = options?.find((option) => {
+  const currentSelectedOption = React25__namespace.useMemo(() => {
+    return options?.find((option) => {
       const optionValue = getValueField(option);
       return optionValue === selectedValue;
     });
-    return selectedOptionFound ? getLabelField(selectedOptionFound) : null;
-  }, [getLabelField, getValueField, options, placeholder2, selectedValue]);
-  const handleSelect = React26__namespace.useCallback(
+  }, [getValueField, options, selectedValue]);
+  const renderValue = React25__namespace.useMemo(() => {
+    if (!selectedValue) return placeholder2;
+    if (currentSelectedOption) {
+      return getLabelField(currentSelectedOption);
+    }
+    if (showValueWhenNoMatch) {
+      return selectedValue;
+    }
+    return null;
+  }, [currentSelectedOption, getLabelField, placeholder2, selectedValue, showValueWhenNoMatch]);
+  const handleSelect = React25__namespace.useCallback(
     (selected, option) => {
       setSelectedValue(selected);
-      setOpen(false);
+      setOpenPopover(false);
       if (typeof onSelect === "function") {
         onSelect(selected, option);
       }
+      if (typeof onOpenChange === "function") {
+        onOpenChange(false);
+      }
     },
-    [onSelect, setSelectedValue]
+    [onOpenChange, onSelect, setOpenPopover, setSelectedValue]
   );
-  const handleClear = React26__namespace.useCallback(
+  const handleOpenPopover = React25__namespace.useCallback(
+    (isOpen) => {
+      if (disabled) return;
+      setOpenPopover(isOpen);
+      if (typeof onOpenChange === "function") {
+        onOpenChange(isOpen);
+      }
+    },
+    [disabled, onOpenChange, setOpenPopover]
+  );
+  const handleClear = React25__namespace.useCallback(
     (event) => {
       event.stopPropagation();
       setSelectedValue(void 0);
+      if (typeof onClear === "function") {
+        onClear(selectedValue, currentSelectedOption);
+      }
     },
-    [setSelectedValue]
+    [currentSelectedOption, onClear, selectedValue, setSelectedValue]
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: (next) => !disabled && setOpen(next), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: openPopover, onOpenChange: handleOpenPopover, children: [
     /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
@@ -11279,7 +11743,7 @@ var ComboboxInner = ({
         name,
         type: "button",
         role: "combobox",
-        "aria-expanded": open,
+        "aria-expanded": openPopover,
         className: cn(
           "flex items-center justify-between gap-2 rounded-md border bg-white px-3 h-9 text-sm whitespace-nowrap shadow-xs outline-none border-input",
           "disabled:cursor-not-allowed disabled:opacity-50",
@@ -11289,7 +11753,7 @@ var ComboboxInner = ({
           "transition-all",
           className
         ),
-        "data-state": open ? "open" : "closed",
+        "data-state": openPopover ? "open" : "closed",
         disabled,
         onFocus,
         onBlur,
@@ -11350,7 +11814,7 @@ var ComboboxInner = ({
     )
   ] });
 };
-var Combobox = React26__namespace.forwardRef(ComboboxInner);
+var Combobox = React25__namespace.forwardRef(ComboboxInner);
 var Combobox_default = Combobox;
 var TruncatedMouseEnterDiv = ({
   value,
@@ -11359,8 +11823,8 @@ var TruncatedMouseEnterDiv = ({
   tooltipContentProps,
   arrowClassName
 }) => {
-  const textRef = React26.useRef(null);
-  const [isTruncated, setIsTruncated] = React26.useState(false);
+  const textRef = React25.useRef(null);
+  const [isTruncated, setIsTruncated] = React25.useState(false);
   const checkTruncation = () => {
     if (textRef.current) {
       const { scrollWidth, clientWidth } = textRef.current;
@@ -11437,10 +11901,12 @@ exports.CommandSeparator = CommandSeparator;
 exports.CommandShortcut = CommandShortcut;
 exports.CropperModal = CropperModal;
 exports.CropperModalError = CropperModalError;
+exports.CustomFieldIcon = custom_field_default;
 exports.DIALOG_ALERT_I18N_SUBNAMESPACE = DIALOG_ALERT_I18N_SUBNAMESPACE;
 exports.DIALOG_ALERT_TEMPLATES = DIALOG_ALERT_TEMPLATES;
 exports.DataTable = DataTable_default;
 exports.DatePicker = DatePicker2;
+exports.DecreaseIcon = decrease_default;
 exports.Dialog = Dialog;
 exports.DialogAlert = DialogAlert;
 exports.DialogAlertProvider = DialogAlertProvider;
@@ -11466,17 +11932,16 @@ exports.FormulaEditor = FormulaEditor;
 exports.GridSettingsModal = GridSettingsModal_default;
 exports.HeaderCell = HeaderCell_default;
 exports.Image = Image2;
+exports.InformationIcon = information_default;
 exports.Input = Input;
 exports.InputNumber = InputNumber_default;
 exports.Label = Label2;
-exports.List = List_default;
-exports.ListContainer = container_default;
-exports.ListHeader = header_default;
-exports.ListTable = table_default;
 exports.LookupSelect = LookupSelect;
+exports.MainListContainer = MainListContainer_default;
 exports.MonthPicker = MonthPicker2;
 exports.Navbar = navbar_default;
 exports.NotFoundIcon = not_found_default;
+exports.PlusIcon = plus_default;
 exports.Popover = Popover;
 exports.PopoverAnchor = PopoverAnchor;
 exports.PopoverArrow = PopoverArrow;
@@ -11487,6 +11952,8 @@ exports.RadioGroupItem = RadioGroupItem;
 exports.RadioGroupRoot = RadioGroupRoot;
 exports.RadioLabel = RadioLabel;
 exports.RichText = RichText;
+exports.RightPanelContainer = RightPanelContainer_default;
+exports.RoleIcon = role_default;
 exports.Select = Select;
 exports.SelectContent = SelectContent;
 exports.SelectGroup = SelectGroup;
@@ -11553,6 +12020,9 @@ exports.TrashIcon = trash_default;
 exports.Truncated = truncated_default;
 exports.TruncatedMouseEnterDiv = truncatedMouseEnterDiv_default;
 exports.UI = ui_exports;
+exports.UserAloneIcon = user_alone_default;
+exports.UserFriendIcon = user_friend_default;
+exports.UserIcon = user_default;
 exports.VirtualizedCommand = VirtualizedCommand_default;
 exports.booleanToSelectValue = booleanToSelectValue;
 exports.buildPrefixMap = buildPrefixMap;