@deepnoid/ui 0.1.18 → 0.1.20

package/dist/index.js

@@ -110,6 +110,7 @@ __export(index_exports, {
   CheckBox: () => checkbox_default,
   Chip: () => chip_default,
   DateTimePicker: () => dateTimePicker_default,
+  FormTable: () => form_table_default,
   Icon: () => Icon_default,
   IconButton: () => icon_button_default,
   Input: () => input_default,
@@ -128,6 +129,7 @@ __export(index_exports, {
   Toast: () => toast_default,
   ToastProvider: () => ToastProvider,
   Tooltip: () => tooltip_default,
+  Tree: () => tree_default,
   deepnoidUi: () => deepnoidUi,
   iconTemplate: () => iconTemplate,
   tv: () => tv,
@@ -576,23 +578,89 @@ var template = {
       }
     );
   },
-  // ----------------------------------- old ---------------------------------
-  // ** Status **
-  plus: ({ className, fill }) => {
+  exclamation: ({ className, fill }) => {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "svg",
       {
-        width: "24",
-        height: "24",
-        viewBox: "0 0 24 24",
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "18",
+        height: "18",
+        viewBox: "0 0 18 18",
         fill: "none",
+        className,
+        children: fill ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "path",
+            {
+              d: "M11.264 2.37077C11.2832 2.37715 11.3024 2.38353 11.3223 2.3901C12.3182 2.72483 13.1824 3.30575 13.9306 4.03468C13.9575 4.06039 13.9843 4.08609 14.0119 4.11257C14.1806 4.27693 14.33 4.45208 14.4754 4.63713C14.4981 4.66509 14.5208 4.69305 14.5442 4.72185C15.0188 5.31801 15.3774 6.01161 15.6224 6.73137C15.6303 6.75453 15.6382 6.77768 15.6464 6.80155C16.1308 8.2413 16.1125 9.82918 15.6224 11.2641C15.6105 11.2995 15.6105 11.2995 15.5983 11.3356C15.3948 11.9315 15.1066 12.5059 14.7335 13.0141C14.7221 13.0297 14.7107 13.0453 14.6989 13.0614C14.313 13.5865 13.8736 14.0779 13.3571 14.4772C13.3155 14.5109 13.3155 14.5109 13.273 14.5454C12.6801 15.0224 11.982 15.3801 11.264 15.6247C11.2408 15.6326 11.2177 15.6406 11.1938 15.6487C9.43757 16.2402 7.50979 16.0678 5.85241 15.2592C4.96204 14.8102 4.13267 14.1489 3.52213 13.3583C3.49962 13.3305 3.47711 13.3028 3.45392 13.2742C2.32855 11.8738 1.85507 9.99621 2.03839 8.22438C2.17342 7.0638 2.58402 5.9339 3.26407 4.98139C3.27714 4.96288 3.29022 4.94436 3.30369 4.92529C3.51689 4.62523 3.75292 4.35545 4.00958 4.09206C4.03773 4.06274 4.06588 4.03342 4.09403 4.00409C4.26597 3.8279 4.44681 3.67012 4.6404 3.5183C4.6683 3.49563 4.69621 3.47296 4.72496 3.4496C6.54339 2.00006 9.08031 1.63201 11.264 2.37077Z",
+              fill: "currentColor"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "path",
+            {
+              d: "M9.36648 5.85289C9.53634 5.9647 9.6533 6.12598 9.71812 6.32867C9.73452 6.40467 9.74201 6.47516 9.74238 6.55312C9.74254 6.57462 9.74269 6.59612 9.74284 6.61826C9.7429 6.64157 9.74296 6.66489 9.74302 6.68891C9.74315 6.71368 9.74329 6.73845 9.74344 6.76397C9.74385 6.84591 9.7441 6.92785 9.74431 7.00979C9.7444 7.03785 9.74448 7.06592 9.74457 7.09484C9.74497 7.22817 9.74528 7.3615 9.74545 7.49483C9.74568 7.66315 9.74639 7.83146 9.74732 7.99978C9.74787 8.11787 9.74805 8.23596 9.74812 8.35405C9.74823 8.41042 9.74847 8.46679 9.74886 8.52316C9.75351 9.23268 9.75351 9.23268 9.54833 9.48966C9.39246 9.65505 9.20768 9.73677 8.98973 9.75C8.78199 9.74035 8.59485 9.64627 8.44906 9.48814C8.28258 9.27909 8.24899 9.03597 8.25049 8.7678C8.25038 8.7429 8.25027 8.718 8.25015 8.69234C8.24987 8.61081 8.25006 8.5293 8.25027 8.44777C8.25023 8.39068 8.25017 8.33358 8.25009 8.27649C8.24999 8.15716 8.25013 8.03783 8.25043 7.9185C8.25079 7.76594 8.25058 7.6134 8.2502 7.46085C8.24997 7.34306 8.25004 7.22527 8.25021 7.10748C8.25025 7.05125 8.2502 6.99501 8.25005 6.93877C8.24989 6.86005 8.25014 6.78135 8.25049 6.70263C8.25036 6.67965 8.25023 6.65668 8.2501 6.63301C8.25225 6.37163 8.32078 6.1648 8.48128 5.96879C8.72644 5.71507 9.07274 5.68973 9.36648 5.85289Z",
+              fill: "white"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "path",
+            {
+              d: "M9.34541 10.8369C9.52938 10.9471 9.67125 11.1068 9.73271 11.3148C9.77656 11.529 9.73613 11.7317 9.62145 11.916C9.49889 12.0867 9.3528 12.1846 9.14957 12.2412C8.92053 12.2704 8.73922 12.2283 8.55045 12.0972C8.38043 11.959 8.27865 11.7781 8.25072 11.5592C8.24266 11.3506 8.30179 11.162 8.43381 10.9998C8.68322 10.7451 9.02878 10.6749 9.34541 10.8369Z",
+              fill: "white"
+            }
+          )
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "path",
+            {
+              d: "M5.03711 3.84082C6.60875 2.5881 8.77805 2.2038 10.7188 2.72754L11.1035 2.84473L11.1064 2.8457C11.125 2.85187 11.144 2.85694 11.1631 2.86328V2.86426C11.9606 3.13233 12.6739 3.57547 13.3125 4.14258L13.582 4.39258L13.585 4.39551L13.666 4.47363C13.7385 4.54442 13.8078 4.61844 13.876 4.69629L14.082 4.94629L14.0869 4.95215L14.1562 5.03711C14.5346 5.51326 14.8361 6.06221 15.0586 6.6416L15.1494 6.89258V6.89355L15.1738 6.96387C15.5931 8.21222 15.6047 9.58552 15.2295 10.8506L15.1494 11.1025L15.1484 11.1045C15.1368 11.1391 15.1363 11.1401 15.125 11.1738C14.9596 11.6581 14.7354 12.1232 14.4541 12.542L14.3301 12.7178L14.3291 12.7197C14.3181 12.7348 14.3072 12.7501 14.2959 12.7656C13.9281 13.2659 13.5205 13.7197 13.0518 14.082L13.3457 14.4629L13.0508 14.0811L13.042 14.0889L12.958 14.1572C12.4859 14.5367 11.9342 14.8378 11.3535 15.0605L11.1025 15.1514H11.1016C11.0793 15.159 11.0571 15.1669 11.0342 15.1748C9.51234 15.6873 7.84224 15.5817 6.36426 14.9443L6.07129 14.8096C5.3482 14.4439 4.67072 13.9288 4.1377 13.3203L3.91797 13.0527L3.91016 13.0439L3.84277 12.959H3.8418C2.81057 11.6744 2.36571 9.93549 2.53516 8.28223C2.64545 7.33424 2.95228 6.41319 3.44727 5.60938L3.6709 5.27148L3.67285 5.26953C3.6858 5.2512 3.69858 5.23275 3.71191 5.21387L3.71094 5.21289C3.85636 5.00834 4.01615 4.81758 4.18945 4.62891L4.36816 4.44141L4.37012 4.43848C4.39734 4.41013 4.42493 4.38187 4.45215 4.35352C4.52879 4.27498 4.60794 4.19996 4.69043 4.12695L4.94922 3.91211L4.95605 3.90625C4.98272 3.88459 5.00872 3.86211 5.03613 3.83984L5.03711 3.84082Z",
+              stroke: "currentColor"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "path",
+            {
+              d: "M9.36648 5.85289C9.53634 5.9647 9.6533 6.12598 9.71812 6.32867C9.73452 6.40467 9.74201 6.47516 9.74238 6.55312C9.74254 6.57462 9.74269 6.59612 9.74284 6.61826C9.7429 6.64157 9.74296 6.66489 9.74302 6.68891C9.74315 6.71368 9.74329 6.73845 9.74344 6.76397C9.74385 6.84591 9.7441 6.92785 9.74431 7.00979C9.7444 7.03785 9.74448 7.06592 9.74457 7.09484C9.74497 7.22817 9.74528 7.3615 9.74545 7.49483C9.74568 7.66315 9.74639 7.83146 9.74732 7.99978C9.74787 8.11787 9.74805 8.23596 9.74812 8.35405C9.74823 8.41042 9.74847 8.46679 9.74886 8.52316C9.75351 9.23268 9.75351 9.23268 9.54833 9.48966C9.39246 9.65505 9.20768 9.73677 8.98973 9.75C8.78199 9.74035 8.59485 9.64627 8.44906 9.48814C8.28258 9.27909 8.24899 9.03597 8.25049 8.7678C8.25038 8.7429 8.25027 8.718 8.25015 8.69234C8.24987 8.61081 8.25006 8.5293 8.25027 8.44777C8.25023 8.39068 8.25017 8.33358 8.25009 8.27649C8.24999 8.15716 8.25013 8.03783 8.25043 7.9185C8.25079 7.76594 8.25058 7.6134 8.2502 7.46085C8.24997 7.34306 8.25004 7.22527 8.25021 7.10748C8.25025 7.05125 8.2502 6.99501 8.25005 6.93877C8.24989 6.86005 8.25014 6.78135 8.25049 6.70263C8.25036 6.67965 8.25023 6.65668 8.2501 6.63301C8.25225 6.37163 8.32078 6.1648 8.48128 5.96879C8.72644 5.71507 9.07274 5.68973 9.36648 5.85289Z",
+              fill: "currentColor"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "path",
+            {
+              d: "M9.34541 10.8369C9.52938 10.9471 9.67125 11.1068 9.73271 11.3148C9.77656 11.529 9.73613 11.7317 9.62145 11.916C9.49889 12.0867 9.3528 12.1846 9.14957 12.2412C8.92053 12.2704 8.73922 12.2283 8.55045 12.0972C8.38043 11.959 8.27865 11.7781 8.25072 11.5592C8.24266 11.3506 8.30179 11.162 8.43381 10.9998C8.68322 10.7451 9.02878 10.6749 9.34541 10.8369Z",
+              fill: "currentColor"
+            }
+          )
+        ] })
+      }
+    );
+  },
+  close: ({ className }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "svg",
+      {
         xmlns: "http://www.w3.org/2000/svg",
+        width: "27",
+        height: "27",
+        viewBox: "0 0 27 27",
+        fill: "none",
         className,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 4.5V19.5M19.5 12H4.5", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M6.24339 6.2645C6.39943 6.10887 6.61095 6.02146 6.83149 6.02146C7.05203 6.02146 7.26355 6.10887 7.41959 6.2645L13.4893 12.3255L19.5589 6.2645C19.6351 6.18285 19.727 6.11736 19.8291 6.07194C19.9312 6.02652 20.0414 6.0021 20.1531 6.00013C20.2648 5.99816 20.3758 6.01869 20.4795 6.06048C20.5831 6.10228 20.6772 6.16449 20.7562 6.2434C20.8353 6.32232 20.8976 6.41632 20.9394 6.51979C20.9813 6.62327 21.0018 6.73411 20.9999 6.84569C20.9979 6.95727 20.9734 7.06732 20.928 7.16926C20.8825 7.27119 20.8169 7.36294 20.7351 7.43902L14.6655 13.5L20.7351 19.561C20.8169 19.6371 20.8825 19.7288 20.928 19.8307C20.9734 19.9327 20.9979 20.0427 20.9999 20.1543C21.0018 20.2659 20.9813 20.3767 20.9394 20.4802C20.8976 20.5837 20.8353 20.6777 20.7562 20.7566C20.6772 20.8355 20.5831 20.8977 20.4795 20.9395C20.3758 20.9813 20.2648 21.0018 20.1531 20.9999C20.0414 20.9979 19.9312 20.9735 19.8291 20.9281C19.727 20.8826 19.6351 20.8172 19.5589 20.7355L13.4893 14.6745L7.41959 20.7355C7.26183 20.8823 7.05317 20.9622 6.83757 20.9584C6.62196 20.9546 6.41626 20.8674 6.26378 20.7151C6.1113 20.5629 6.02396 20.3575 6.02016 20.1422C6.01635 19.9269 6.09638 19.7185 6.24339 19.561L12.313 13.5L6.24339 7.43902C6.08754 7.2832 6 7.07198 6 6.85176C6 6.63154 6.08754 6.42032 6.24339 6.2645Z",
+            fill: "currentColor"
+          }
+        )
       }
     );
   },
-  close: ({ className, fill }) => {
+  // ----------------------------------- old ---------------------------------
+  // ** Status **
+  plus: ({ className, fill }) => {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "svg",
       {
@@ -602,7 +670,7 @@ var template = {
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
         className,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M6 18L18 6M6 6L18 18", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 4.5V19.5M19.5 12H4.5", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" })
       }
     );
   },
@@ -5890,7 +5958,7 @@ var input_default = Input;
 var inputStyle = tv(
   {
     slots: {
-      base: ["group/input", "flex"],
+      base: ["group/input", "flex select-none"],
       vertical: ["flex-col"],
       horizon: ["flex-row", "gap-0"],
       label: ["flex", "items-center", "font-bold", "text-body-foreground", "min-w-[80px]"],
@@ -6774,7 +6842,9 @@ var TableBody = ({
   checkedRows,
   onCheckRow,
   emptyContent,
-  classNames
+  isLoading,
+  classNames,
+  className
 }) => {
   const generateColumnStyles = (0, import_react13.useCallback)((column) => {
     const alignClass = column.align ? `text-${column.align}` : "text-left";
@@ -6812,8 +6882,8 @@ var TableBody = ({
   );
   const hasRows = rows.length > 0;
   const colSpan = (columns.length || 1) + (selectableRows ? 1 : 0);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("tbody", { className: slots.tbody({ class: classNames == null ? void 0 : classNames.tbody }), children: [
-    hasRows && rows.map((row, rowIndex) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("tbody", { className: clsx(slots.tbody({ class: classNames == null ? void 0 : classNames.tbody }), className), children: [
+    !isLoading && hasRows && rows.map((row, rowIndex) => {
       const isRowChecked = checkedRows.has(rowIndex);
       return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), "aria-checked": isRowChecked, children: [
         columns.map((column) => /* @__PURE__ */ (0, import_react14.createElement)("td", { ...getCellProps(column, row), key: column.field })),
@@ -6827,7 +6897,7 @@ var TableBody = ({
         ) }) })
       ] }, rowIndex);
     }),
-    !hasRows && emptyContent && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("tr", { className: clsx(slots.tr({ class: classNames == null ? void 0 : classNames.tr }), "border-none"), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("td", { colSpan, className: slots.empty({ class: classNames == null ? void 0 : classNames.empty }), children: emptyContent }) })
+    !isLoading && !hasRows && emptyContent && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("tr", { className: clsx(slots.tr({ class: classNames == null ? void 0 : classNames.tr }), "border-none"), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("td", { colSpan, className: slots.empty({ class: classNames == null ? void 0 : classNames.empty }), children: emptyContent }) })
   ] });
 };
 var table_body_default = TableBody;
@@ -7168,13 +7238,14 @@ var Table = (0, import_react17.forwardRef)((originalProps, ref) => {
     pagination,
     onPageChange,
     emptyContent,
+    isLoading,
     className,
     color
   } = { ...props, ...variantProps };
   const [checkedRows, setCheckedRows] = (0, import_react17.useState)(/* @__PURE__ */ new Set());
   const divRef = (0, import_react17.useRef)(null);
   const { page, perPage } = pagination || { page: 1, perPage: 10 };
-  const showPagination = pagination && typeof totalData === "number";
+  const showPagination = pagination && typeof totalData === "number" && !isLoading;
   (0, import_react17.useImperativeHandle)(ref, () => ({
     checkedRows,
     setCheckedRows
@@ -7193,7 +7264,7 @@ var Table = (0, import_react17.forwardRef)((originalProps, ref) => {
   };
   const slots = (0, import_react17.useMemo)(() => tableStyle(variantProps), [variantProps]);
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { ref: divRef, "data-table": "base", className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(scrollArea_default, { size: size === "xl" ? "lg" : size, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("table", { className: slots.table({ class: classNames == null ? void 0 : classNames.table }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(scrollArea_default, { direction: "x", size: size === "xl" ? "lg" : size, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("table", { className: slots.table({ class: classNames == null ? void 0 : classNames.table }), children: [
       /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         table_head_default,
         {
@@ -7217,7 +7288,12 @@ var Table = (0, import_react17.forwardRef)((originalProps, ref) => {
           checkedRows,
           onCheckRow: handleCheck,
           emptyContent,
-          classNames
+          isLoading,
+          classNames,
+          className: clsx(
+            "transition-all duration-150 ease-out",
+            isLoading ? "-translate-y-2 opacity-0" : "translate-y-0 opacity-100"
+          )
         }
       )
     ] }) }),
@@ -7451,18 +7527,59 @@ var tableStyle = (0, import_tailwind_variants15.tv)({
   }
 });
 
+// src/components/table/form-table.tsx
+var import_react18 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var DEFAULT_COLUMN_CLASSES = [
+  "w-[120px] h-[50px] px-[10px] font-bold text-md text-body-foreground border-r border-neutral-light",
+  "px-[10px]"
+];
+var FormTableRow = ({ columns, columnClasses = [] }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("tr", { className: "border-neutral-light border-b", children: columns.map((col, index) => {
+  var _a;
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("td", { className: (_a = columnClasses[index]) != null ? _a : DEFAULT_COLUMN_CLASSES[index], children: col }, index);
+}) });
+var FormTable = (0, import_react18.forwardRef)(
+  ({ rows, onSubmit, footer, classNames }, ref) => {
+    const slots = (0, import_react18.useMemo)(() => formTableStyle(), []);
+    const content = /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("table", { className: slots.table({ class: classNames == null ? void 0 : classNames.table }), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("tbody", { children: rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(FormTableRow, { ...row }, i)) }) }),
+      footer && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: footer })
+    ] });
+    if (onSubmit) {
+      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        "form",
+        {
+          ref,
+          onSubmit,
+          className: slots.base({ class: classNames == null ? void 0 : classNames.base }),
+          children: content
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: content });
+  }
+);
+FormTable.displayName = "FormTable";
+var form_table_default = FormTable;
+var formTableStyle = tv({
+  slots: {
+    base: ["flex", "flex-col", "gap-[30px]"],
+    table: ["w-full", "table-fixed", "border", "border-neutral-light"]
+  }
+});
+
 // src/components/select/select.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/components/select/useSelect.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 var useSelect = ({ options, defaultOption, onChange }) => {
-  const [selectedOption, setSelectedOption] = (0, import_react18.useState)(defaultOption);
-  const [targetRect, setTargetRect] = (0, import_react18.useState)(null);
-  const [optionWrapperHeight, setOptionWrapperHeight] = (0, import_react18.useState)(0);
-  const selectWrapperRef = (0, import_react18.useRef)(null);
-  const optionWrapperRef = (0, import_react18.useRef)(null);
+  const [selectedOption, setSelectedOption] = (0, import_react19.useState)(defaultOption);
+  const [targetRect, setTargetRect] = (0, import_react19.useState)(null);
+  const [optionWrapperHeight, setOptionWrapperHeight] = (0, import_react19.useState)(0);
+  const selectWrapperRef = (0, import_react19.useRef)(null);
+  const optionWrapperRef = (0, import_react19.useRef)(null);
   const calculatePositionWithScroll = (targetRect2, optionWrapperHeight2) => {
     const scrollTop = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;
     const scrollLeft = window.scrollX || document.documentElement.scrollLeft || document.body.scrollLeft;
@@ -7485,7 +7602,7 @@ var useSelect = ({ options, defaultOption, onChange }) => {
     setSelectedOption(option);
     handleToggleSelect();
   };
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     const onClickOutside = (e) => {
       if (optionWrapperRef.current && !optionWrapperRef.current.contains(e.target)) {
         setTargetRect(null);
@@ -7494,7 +7611,7 @@ var useSelect = ({ options, defaultOption, onChange }) => {
     window.addEventListener("mousedown", onClickOutside);
     return () => window.removeEventListener("mousedown", onClickOutside);
   }, []);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (optionWrapperRef.current) {
       setOptionWrapperHeight(optionWrapperRef.current.getBoundingClientRect().height);
     }
@@ -7512,10 +7629,10 @@ var useSelect = ({ options, defaultOption, onChange }) => {
 };
 
 // src/components/select/option.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var Option = (props) => {
   const { base, option, icon } = optionStyle(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     "div",
     {
       title: props.option.value,
@@ -7525,8 +7642,8 @@ var Option = (props) => {
         props.isSelected && (node == null ? void 0 : node.scrollIntoView());
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: option(), children: props.children }),
-        props.isSelected && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: icon(), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon_default, { name: "check", size: props.size }) })
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: option(), children: props.children }),
+        props.isSelected && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: icon(), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon_default, { name: "check", size: props.size }) })
       ]
     }
   );
@@ -7577,11 +7694,11 @@ var optionStyle = tv({
 });
 
 // src/components/select/select.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var Select = (0, import_react19.forwardRef)((originalProps, ref) => {
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var Select = (0, import_react20.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, select.variantKeys);
   const { classNames, options, defaultOption, onChange, ...inputProps } = props;
-  const slots = (0, import_react19.useMemo)(() => select({ ...variantProps }), [variantProps]);
+  const slots = (0, import_react20.useMemo)(() => select({ ...variantProps }), [variantProps]);
   const {
     targetRect,
     selectedOption,
@@ -7597,19 +7714,19 @@ var Select = (0, import_react19.forwardRef)((originalProps, ref) => {
     onChange
   });
   const position = targetRect ? calculatePositionWithScroll(targetRect, optionWrapperHeight) : null;
-  const getBaseProps = (0, import_react19.useCallback)(
+  const getBaseProps = (0, import_react20.useCallback)(
     () => ({
       className: slots.base({ class: classNames == null ? void 0 : classNames.base })
     }),
     [slots, classNames]
   );
-  const getLabelProps = (0, import_react19.useCallback)(
+  const getLabelProps = (0, import_react20.useCallback)(
     () => ({
       className: slots.label({ class: classNames == null ? void 0 : classNames.label })
     }),
     [slots, classNames]
   );
-  const getSelectWrapperProps = (0, import_react19.useCallback)(
+  const getSelectWrapperProps = (0, import_react20.useCallback)(
     () => ({
       className: slots.selectWrapper({ class: classNames == null ? void 0 : classNames.selectWrapper }),
       ref: selectWrapperRef,
@@ -7617,7 +7734,7 @@ var Select = (0, import_react19.forwardRef)((originalProps, ref) => {
     }),
     [slots, classNames]
   );
-  const getSelectProps = (0, import_react19.useCallback)(
+  const getSelectProps = (0, import_react20.useCallback)(
     () => ({
       ...inputProps,
       ref,
@@ -7628,30 +7745,30 @@ var Select = (0, import_react19.forwardRef)((originalProps, ref) => {
     }),
     [slots, classNames, inputProps, selectedOption, ref]
   );
-  const getOptionsWrapperProps = (0, import_react19.useCallback)(
+  const getOptionsWrapperProps = (0, import_react20.useCallback)(
     () => ({
       className: slots.optionsWrapper({ class: classNames == null ? void 0 : classNames.optionsWrapper }),
       ref: optionWrapperRef
     }),
     [slots, classNames]
   );
-  const getErrorMessageProps = (0, import_react19.useCallback)(
+  const getErrorMessageProps = (0, import_react20.useCallback)(
     () => ({
       className: slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })
     }),
     [slots, classNames]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { ...getBaseProps(), children: [
-      props.label && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { ...getLabelProps(), children: props.label }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { "data-expanded": !!targetRect, ...getSelectWrapperProps(), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("input", { ...getSelectProps() }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon_default, { name: !!targetRect ? "arrow-triangle-up" : "arrow-triangle-down", size: originalProps.size, fill: true })
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { ...getBaseProps(), children: [
+      props.label && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { ...getLabelProps(), children: props.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { "data-expanded": !!targetRect, ...getSelectWrapperProps(), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("input", { ...getSelectProps() }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon_default, { name: !!targetRect ? "arrow-triangle-up" : "arrow-triangle-down", size: originalProps.size, fill: true })
       ] }),
-      props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { ...getErrorMessageProps(), children: props.errorMessage })
+      props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { ...getErrorMessageProps(), children: props.errorMessage })
     ] }),
-    targetRect && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, { children: (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    targetRect && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, { children: (0, import_react_dom.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         "div",
         {
           ...getOptionsWrapperProps(),
@@ -7661,7 +7778,7 @@ var Select = (0, import_react19.forwardRef)((originalProps, ref) => {
             left: position == null ? void 0 : position.left,
             width: targetRect.width
           },
-          children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             option_default,
             {
               variant: originalProps.variant,
@@ -7810,16 +7927,16 @@ var select = tv({
 });
 
 // src/components/chip/chip.tsx
-var import_react20 = require("react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var Chip = (0, import_react20.forwardRef)((originalProps, ref) => {
+var import_react21 = require("react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var Chip = (0, import_react21.forwardRef)((originalProps, ref) => {
   var _a;
   const [rawProps, variantProps] = mapPropsVariants(originalProps, chipStyle.variantKeys);
   const props = { ...rawProps, ...variantProps };
   const Component = props.onClick ? "button" : "div";
-  const slots = (0, import_react20.useMemo)(() => chipStyle({ ...variantProps }), [variantProps]);
-  const renderIcon = (name) => name ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon_default, { name, fill: true, size: props.size, className: slots.icon() }) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  const slots = (0, import_react21.useMemo)(() => chipStyle({ ...variantProps }), [variantProps]);
+  const renderIcon = (name) => name ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon_default, { name, fill: true, size: props.size, className: slots.icon() }) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     Component,
     {
       ref,
@@ -7995,13 +8112,13 @@ var chipStyle = tv({
 });
 
 // src/components/radio/radio.tsx
-var import_react21 = require("react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var Radio = (0, import_react21.forwardRef)((originalProps, ref) => {
+var import_react22 = require("react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var Radio = (0, import_react22.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, radioStyle.variantKeys);
   const { children, classNames, labelPosition = "end", ...inputProps } = props;
-  const slots = (0, import_react21.useMemo)(() => radioStyle({ ...variantProps }), [variantProps]);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  const slots = (0, import_react22.useMemo)(() => radioStyle({ ...variantProps }), [variantProps]);
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     "label",
     {
       className: clsx(
@@ -8009,9 +8126,9 @@ var Radio = (0, import_react21.forwardRef)((originalProps, ref) => {
         labelPosition === "start" && slots.labelReverse({ class: classNames == null ? void 0 : classNames.labelReverse })
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("input", { ...inputProps, type: "radio", ref }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: slots.outerDot({ class: classNames == null ? void 0 : classNames.outerDot }), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: slots.innerDot({ class: classNames == null ? void 0 : classNames.innerDot }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: slots.labelWrapper({ class: classNames == null ? void 0 : classNames.labelWrapper }), children: children && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children }) })
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("input", { ...inputProps, type: "radio", ref }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: slots.outerDot({ class: classNames == null ? void 0 : classNames.outerDot }), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: slots.innerDot({ class: classNames == null ? void 0 : classNames.innerDot }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: slots.labelWrapper({ class: classNames == null ? void 0 : classNames.labelWrapper }), children: children && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children }) })
       ]
     }
   );
@@ -8151,21 +8268,21 @@ var radioStyle = tv({
 });
 
 // src/components/switch/switch.tsx
-var import_react22 = require("react");
-var import_tailwind_variants20 = require("tailwind-variants");
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var Switch = (0, import_react22.forwardRef)((originalProps, ref) => {
+var import_react23 = require("react");
+var import_tailwind_variants21 = require("tailwind-variants");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var Switch = (0, import_react23.forwardRef)((originalProps, ref) => {
   const [rawProps, variantProps] = mapPropsVariants(originalProps, switchStyle.variantKeys);
   const { size, color, isDisabled, disableAnimation, id, classNames, ...inputProps } = { ...rawProps, ...variantProps };
-  const slots = (0, import_react22.useMemo)(() => switchStyle({ ...variantProps }), [variantProps]);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("label", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("input", { ...inputProps, id, ref, type: "checkbox", disabled: isDisabled, className: "hidden" }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: slots.outerWrapper({ class: classNames == null ? void 0 : classNames.outerWrapper }), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: slots.thumb({ class: classNames == null ? void 0 : classNames.thumb }) }) }) })
+  const slots = (0, import_react23.useMemo)(() => switchStyle({ ...variantProps }), [variantProps]);
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("label", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("input", { ...inputProps, id, ref, type: "checkbox", disabled: isDisabled, className: "hidden" }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: slots.outerWrapper({ class: classNames == null ? void 0 : classNames.outerWrapper }), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: slots.thumb({ class: classNames == null ? void 0 : classNames.thumb }) }) }) })
   ] });
 });
 Switch.displayName = "Switch";
 var switch_default = Switch;
-var switchStyle = (0, import_tailwind_variants20.tv)({
+var switchStyle = (0, import_tailwind_variants21.tv)({
   slots: {
     base: ["group/switch", "relative", "max-w-fit", "inline-flex", "items-center", "justify-start", "cursor-pointer"],
     outerWrapper: [
@@ -8270,7 +8387,7 @@ var switchStyle = (0, import_tailwind_variants20.tv)({
 });
 
 // src/components/tooltip/tooltip.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 var import_react_dom2 = require("react-dom");
 
 // src/components/tooltip/tooltip-utils.ts
@@ -8393,11 +8510,11 @@ var getTailStyles = (placement) => {
 };
 
 // src/components/tooltip/useTooltip.ts
-var import_react23 = require("react");
+var import_react24 = require("react");
 var useTooltip = ({ placement, offset, targetRect }) => {
-  const [tooltipPosition, setTooltipPosition] = (0, import_react23.useState)({ x: 0, y: 0 });
-  const tooltipRef = (0, import_react23.useRef)(null);
-  (0, import_react23.useEffect)(() => {
+  const [tooltipPosition, setTooltipPosition] = (0, import_react24.useState)({ x: 0, y: 0 });
+  const tooltipRef = (0, import_react24.useRef)(null);
+  (0, import_react24.useEffect)(() => {
     if (targetRect && tooltipRef.current) {
       const { width, height } = tooltipRef.current.getBoundingClientRect();
       const scrollX = window.scrollX;
@@ -8427,29 +8544,29 @@ var useTooltip = ({ placement, offset, targetRect }) => {
 };
 
 // src/components/tooltip/tooltip.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var Tooltip = (0, import_react24.forwardRef)((originalProps, ref) => {
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var Tooltip = (0, import_react25.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, tooltipStyle.variantKeys);
   const { placement = "top", offset = 5, delay = 100, persistent = false, classNames } = props;
-  const slots = (0, import_react24.useMemo)(() => tooltipStyle({ ...variantProps }), [variantProps]);
-  const [targetRect, setTargetRect] = (0, import_react24.useState)(null);
+  const slots = (0, import_react25.useMemo)(() => tooltipStyle({ ...variantProps }), [variantProps]);
+  const [targetRect, setTargetRect] = (0, import_react25.useState)(null);
   const { tooltipPosition, tooltipRef } = useTooltip({
     placement,
     offset,
     delay,
     targetRect
   });
-  const childrenRef = (0, import_react24.useRef)(null);
-  const delayTimeoutRef = (0, import_react24.useRef)(null);
-  const getProps = (0, import_react24.useCallback)(
+  const childrenRef = (0, import_react25.useRef)(null);
+  const delayTimeoutRef = (0, import_react25.useRef)(null);
+  const getProps = (0, import_react25.useCallback)(
     (slotKey, classNameKey) => ({
       className: slots[slotKey]({ class: classNames == null ? void 0 : classNames[classNameKey] })
     }),
     [slots, classNames]
   );
-  const getBaseProps = (0, import_react24.useCallback)(() => getProps("base", "base"), [getProps]);
-  const getContentProps = (0, import_react24.useCallback)(() => getProps("content", "content"), [getProps]);
-  const showTooltip = (0, import_react24.useCallback)(() => {
+  const getBaseProps = (0, import_react25.useCallback)(() => getProps("base", "base"), [getProps]);
+  const getContentProps = (0, import_react25.useCallback)(() => getProps("content", "content"), [getProps]);
+  const showTooltip = (0, import_react25.useCallback)(() => {
     if (childrenRef.current) {
       const rect = childrenRef.current.getBoundingClientRect();
       setTargetRect({
@@ -8462,16 +8579,16 @@ var Tooltip = (0, import_react24.forwardRef)((originalProps, ref) => {
       });
     }
   }, []);
-  const hideTooltip = (0, import_react24.useCallback)(() => {
+  const hideTooltip = (0, import_react25.useCallback)(() => {
     if (!persistent) {
       delayTimeoutRef.current = window.setTimeout(() => setTargetRect(null), delay);
     }
   }, [persistent, delay]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (persistent) showTooltip();
   }, [persistent, showTooltip]);
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "div",
       {
         ref: (node) => {
@@ -8488,7 +8605,7 @@ var Tooltip = (0, import_react24.forwardRef)((originalProps, ref) => {
       }
     ),
     targetRect && (0, import_react_dom2.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
         "div",
         {
           ref: tooltipRef,
@@ -8501,7 +8618,7 @@ var Tooltip = (0, import_react24.forwardRef)((originalProps, ref) => {
           },
           children: [
             props.content,
-            variantProps.tail && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            variantProps.tail && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
               "div",
               {
                 className: `absolute h-2 w-2 rotate-45 bg-inherit ${getTailClassName(placement)}`,
@@ -8552,110 +8669,29 @@ var tooltipStyle = tv({
 });
 
 // src/components/modal/modal.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_react_dom3 = require("react-dom");
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var Modal = (0, import_react25.forwardRef)((originalProps, ref) => {
-  const [props, variantProps] = mapPropsVariants(originalProps, modal.variantKeys);
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var Modal = (0, import_react26.forwardRef)((props, ref) => {
+  const [localProps, variantProps] = mapPropsVariants(props, modal.variantKeys);
   const {
     classNames,
     isOpen,
-    icon,
     title,
-    subTitle,
     content,
     confirmButtonText,
     cancelButtonText,
-    showCloseButton,
-    isDismissable = true,
+    showCloseButton = true,
     isKeyboardDismissDisabled = false,
     onConfirm,
     onCancel
-  } = props;
-  const slots = (0, import_react25.useMemo)(() => modal({ ...variantProps }), [...Object.values(variantProps)]);
-  const getBackdropProps = (0, import_react25.useCallback)(
-    () => ({
-      className: slots.backdrop({ class: classNames == null ? void 0 : classNames.backdrop }),
-      onClick: (e) => {
-        if (isDismissable && e.target === e.currentTarget && onCancel) {
-          onCancel();
-        }
-      }
-    }),
-    [slots, classNames == null ? void 0 : classNames.backdrop, isDismissable, onCancel]
-  );
-  const getModalWrapperProps = (0, import_react25.useCallback)(
-    () => ({
-      className: slots.modalWrapper({ class: classNames == null ? void 0 : classNames.modalWrapper }),
-      "data-icon-visibility": typeof icon !== "undefined"
-    }),
-    [slots, classNames == null ? void 0 : classNames.modalWrapper, icon]
-  );
-  const getIconProps = (0, import_react25.useCallback)(
-    () => ({
-      className: slots.icon({ class: [classNames == null ? void 0 : classNames.icon] })
-    }),
-    [slots, classNames == null ? void 0 : classNames.icon]
-  );
-  const getCloseIconProps = (0, import_react25.useCallback)(
-    () => ({
-      className: slots.closeIcon({ class: [classNames == null ? void 0 : classNames.closeIcon, showCloseButton ? "" : "hidden"] })
-    }),
-    [slots, classNames == null ? void 0 : classNames.closeIcon, showCloseButton]
-  );
-  const getBodyWrapperProps = (0, import_react25.useCallback)(
-    () => ({
-      className: slots.bodyWrapper({ class: classNames == null ? void 0 : classNames.bodyWrapper })
-    }),
-    [slots, classNames == null ? void 0 : classNames.bodyWrapper]
-  );
-  const getTitleWrapperProps = (0, import_react25.useCallback)(
-    () => ({
-      className: slots.titleWrapper({ class: classNames == null ? void 0 : classNames.titleWrapper })
-    }),
-    [slots, classNames == null ? void 0 : classNames.titleWrapper]
-  );
-  const getTitleProps = (0, import_react25.useCallback)(
-    () => ({
-      className: slots.title({ class: classNames == null ? void 0 : classNames.title })
-    }),
-    [slots, classNames == null ? void 0 : classNames.title]
-  );
-  const getSubTitleProps = (0, import_react25.useCallback)(
-    () => ({
-      className: slots.subTitle({ class: classNames == null ? void 0 : classNames.subTitle })
-    }),
-    [slots, classNames == null ? void 0 : classNames.subTitle]
-  );
-  const getBodyProps = (0, import_react25.useCallback)(
-    () => ({
-      className: slots.body({ class: classNames == null ? void 0 : classNames.body })
-    }),
-    [slots, classNames == null ? void 0 : classNames.body]
-  );
-  const getContentProps = (0, import_react25.useCallback)(
-    () => ({
-      className: slots.content({ class: classNames == null ? void 0 : classNames.content })
-    }),
-    [slots, classNames == null ? void 0 : classNames.content]
-  );
-  const getFooterWrapperProps = (0, import_react25.useCallback)(
-    () => ({
-      className: slots.footerWrapper({ class: classNames == null ? void 0 : classNames.footerWrapper })
-    }),
-    [slots, classNames == null ? void 0 : classNames.footerWrapper]
-  );
-  (0, import_react25.useEffect)(() => {
-    if (isOpen) {
-      document.body.classList.add("overflow-hidden");
-    } else {
-      document.body.classList.remove("overflow-hidden");
-    }
+  } = localProps;
+  const slots = (0, import_react26.useMemo)(() => modal(variantProps), [variantProps]);
+  (0, import_react26.useEffect)(() => {
+    document.body.classList.toggle("overflow-hidden", !!isOpen);
     if (!isOpen || isKeyboardDismissDisabled) return;
     const handleKeyDown = (e) => {
-      if (e.key === "Escape" && onCancel) {
-        onCancel();
-      }
+      if (e.key === "Escape") onCancel == null ? void 0 : onCancel();
     };
     document.addEventListener("keydown", handleKeyDown);
     return () => {
@@ -8663,82 +8699,83 @@ var Modal = (0, import_react25.forwardRef)((originalProps, ref) => {
       document.body.classList.remove("overflow-hidden");
     };
   }, [isOpen, isKeyboardDismissDisabled, onCancel]);
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_jsx_runtime26.Fragment, { children: isOpen && (0, import_react_dom3.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { ...getBackdropProps(), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { ref, ...getModalWrapperProps(), children: [
-      typeof icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { ...getIconProps(), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon_default, { name: icon, className: "h-[80px] w-[80px]" }) }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { ...getIconProps(), children: icon }),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { ...getBodyWrapperProps(), children: [
-        showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon_default, { name: "close", ...getCloseIconProps(), onClick: onCancel }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { ...getBodyProps(), children: [
-          (title || subTitle) && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { ...getTitleWrapperProps(), children: [
-            title && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { ...getTitleProps(), children: title }),
-            subTitle && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { ...getSubTitleProps(), children: subTitle })
-          ] }),
-          content && typeof content === "string" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { ...getContentProps(), children: content }) : content,
-          (cancelButtonText || confirmButtonText) && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { ...getFooterWrapperProps(), children: [
-            cancelButtonText && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(button_default, { variant: "outline", color: originalProps.color, fullWidth: true, onClick: onCancel, children: cancelButtonText }),
-            confirmButtonText && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(button_default, { size: "md", color: originalProps.color, fullWidth: true, onClick: onConfirm, children: confirmButtonText })
+  if (!isOpen) return null;
+  return (0, import_react_dom3.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(backdrop_default, { open: true }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: slots.modalWrapper({ class: classNames == null ? void 0 : classNames.modalWrapper }), children: [
+        showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          Icon_default,
+          {
+            size: "xl",
+            name: "close",
+            className: slots.closeIcon({ class: classNames == null ? void 0 : classNames.closeIcon }),
+            onClick: onCancel
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: slots.title({ class: classNames == null ? void 0 : classNames.title }), children: title }),
+          typeof content === "string" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: slots.content({ class: classNames == null ? void 0 : classNames.content }), children: content }) : content,
+          (cancelButtonText || confirmButtonText) && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: slots.footer({ class: classNames == null ? void 0 : classNames.footer }), children: [
+            cancelButtonText && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(button_default, { variant: "soft", color: "neutral", fullWidth: true, onClick: onCancel, children: cancelButtonText }),
+            confirmButtonText && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(button_default, { color: props.color, fullWidth: true, onClick: onConfirm, children: confirmButtonText })
           ] })
         ] })
-      ] })
-    ] }) }),
+      ] }) })
+    ] }),
     document.body
-  ) });
+  );
 });
 Modal.displayName = "Modal";
 var modal_default = Modal;
 var modal = tv({
   slots: {
-    backdrop: ["relative w-screen h-screen fixed inset-0 bg-black/60", "z-[900]"],
-    modalWrapper: ["group/modal", "absolute", "top-1/2", "-translate-y-1/2", "left-1/2", "-translate-x-1/2"],
-    icon: ["absolute", "top-[-40px]", "left-1/2", "-translate-x-1/2", "z-10"],
-    closeIcon: [
+    base: [
+      "group/modal",
       "absolute",
-      "top-[20px]",
-      "right-[20px]",
-      "cursor-pointer",
-      "z-10",
-      "group-data-[icon-visibility=true]/modal:top-[80px]"
+      "top-1/2",
+      "-translate-y-1/2",
+      "left-1/2",
+      "-translate-x-1/2",
+      "z-[50]",
+      "bg-body-background"
     ],
-    titleWrapper: ["relative", "flex", "flex-col", "gap-[10px]"],
-    title: "text-h5 text-center text-foreground",
-    subTitle: "text-lg text-center text-neutral-dark",
-    bodyWrapper: [
-      "min-w-[400px]",
-      "flex flex-col justify-center",
-      "p-[20px]",
+    modalWrapper: [
+      "min-w-[450px]",
+      "flex",
+      "flex-col",
+      "justify-center",
+      "p-[30px]",
       "bg-background",
-      "shadow-drop shadow-foreground/20 rounded-xxlg",
+      "shadow-drop",
+      "shadow-foreground/20",
+      "rounded-xlg",
       "overflow-hidden",
       "group-data-[icon-visibility=true]/modal:mt-[0]",
       "group-data-[icon-visibility=true]/modal:pt-[60px]"
     ],
-    body: ["flex", "flex-col", "gap-[20px]"],
-    content: ["text-md text-center", "break-words", "bg-neutral-soft", "rounded-[5px]", "p-[10px]"],
-    footerWrapper: ["flex gap-[20px]"]
+    wrapper: ["flex", "flex-col", "gap-[30px]"],
+    title: ["text-xl", "font-extrabold", "text-foreground"],
+    content: ["text-md", "font-bold", "text-center", "break-words", "bg-neutral-soft", "rounded-[5px]", "p-[10px]"],
+    footer: ["flex", "gap-[10px]"],
+    closeIcon: [
+      "absolute",
+      "top-[30px]",
+      "right-[30px]",
+      "cursor-pointer",
+      "z-60",
+      "group-data-[icon-visibility=true]/modal:top-[80px]"
+    ]
   },
   variants: {
     color: {
-      primary: {
-        icon: "text-primary-main"
-      },
-      secondary: {
-        icon: "text-secondary-main"
-      },
-      neutral: {
-        icon: "text-neutral-main"
-      },
-      success: {
-        icon: "text-success-main"
-      },
-      info: {
-        icon: "text-info-main"
-      },
-      warning: {
-        icon: "text-warning-main"
-      },
-      danger: {
-        icon: "text-danger-main"
-      }
+      primary: {},
+      secondary: {},
+      neutral: {},
+      success: {},
+      info: {},
+      warning: {},
+      danger: {}
     }
   },
   defaultVariants: {
@@ -8747,15 +8784,15 @@ var modal = tv({
 });
 
 // src/components/list/list.tsx
-var import_react26 = require("react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var List = (0, import_react26.forwardRef)((originalProps, ref) => {
+var import_react27 = require("react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var List = (0, import_react27.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, listStyle.variantKeys);
   const { children, classNames } = props;
-  const slots = (0, import_react26.useMemo)(() => listStyle(variantProps), [variantProps]);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: import_react26.Children.map(children, (child) => {
-    if (!(0, import_react26.isValidElement)(child)) return child;
-    return (0, import_react26.cloneElement)(child, {
+  const slots = (0, import_react27.useMemo)(() => listStyle(variantProps), [variantProps]);
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: import_react27.Children.map(children, (child) => {
+    if (!(0, import_react27.isValidElement)(child)) return child;
+    return (0, import_react27.cloneElement)(child, {
       ...variantProps,
       ...child.props
     });
@@ -8792,9 +8829,9 @@ var listStyle = tv({
 });
 
 // src/components/list/listItem.tsx
-var import_react27 = require("react");
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var ListItem = (0, import_react27.forwardRef)((props, ref) => {
+var import_react28 = require("react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var ListItem = (0, import_react28.forwardRef)((props, ref) => {
   const [rawProps, variantProps] = mapPropsVariants(props, listItemStyle.variantKeys);
   const {
     title,
@@ -8806,19 +8843,19 @@ var ListItem = (0, import_react27.forwardRef)((props, ref) => {
     classNames,
     onClick
   } = { ...rawProps, ...variantProps };
-  const slots = (0, import_react27.useMemo)(() => listItemStyle(variantProps), [variantProps]);
+  const slots = (0, import_react28.useMemo)(() => listItemStyle(variantProps), [variantProps]);
   const iconSize = ["lg", "xl"].includes(size) ? "lg" : "md";
   const avatarSize = iconSize;
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), "data-selected": selected, onClick, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
-      avatar && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(avatar_default, { ...avatar, variant: "round", size: avatarSize }),
-      startIconName && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon_default, { name: startIconName, fill: true, size, className: slots.startIcon({ class: classNames == null ? void 0 : classNames.startIcon }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: slots.titleWrapper({ class: classNames == null ? void 0 : classNames.titleWrapper }), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: slots.title({ class: classNames == null ? void 0 : classNames.title }), children: title }),
-        subTitle && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: slots.subTitle({ class: classNames == null ? void 0 : classNames.subTitle }), children: subTitle })
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), "data-selected": selected, onClick, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
+      avatar && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(avatar_default, { ...avatar, variant: "round", size: avatarSize }),
+      startIconName && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon_default, { name: startIconName, fill: true, size, className: slots.startIcon({ class: classNames == null ? void 0 : classNames.startIcon }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: slots.titleWrapper({ class: classNames == null ? void 0 : classNames.titleWrapper }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: slots.title({ class: classNames == null ? void 0 : classNames.title }), children: title }),
+        subTitle && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: slots.subTitle({ class: classNames == null ? void 0 : classNames.subTitle }), children: subTitle })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon_default, { name: "right-chevron", size: iconSize, className: slots.icon({ class: classNames == null ? void 0 : classNames.icon }) })
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon_default, { name: "right-chevron", size: iconSize, className: slots.icon({ class: classNames == null ? void 0 : classNames.icon }) })
   ] });
 });
 ListItem.displayName = "ListItem";
@@ -8986,41 +9023,56 @@ var listItemStyle = tv({
 });
 
 // src/components/toast/toast.tsx
-var import_react28 = require("react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var Toast = (0, import_react28.forwardRef)((originalProps, ref) => {
+var import_react29 = require("react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var Toast = (0, import_react29.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, toast.variantKeys);
-  const { width = 300, placement, classNames, showIcon = true, showCloseButton = true, onClose, ...toastProps } = props;
-  const slots = (0, import_react28.useMemo)(() => toast({ ...variantProps }), [variantProps]);
-  const toastRef = (0, import_react28.useRef)(null);
-  (0, import_react28.useImperativeHandle)(
+  const {
+    title,
+    content,
+    width = 300,
+    placement,
+    classNames,
+    showIcon = true,
+    showCloseButton = true,
+    hasShadow = true,
+    disableAnimation,
+    onClose
+  } = { ...props, ...variantProps };
+  const slots = (0, import_react29.useMemo)(() => toast({ ...variantProps }), [variantProps]);
+  const toastRef = (0, import_react29.useRef)(null);
+  (0, import_react29.useImperativeHandle)(
     ref,
     () => ({
       getWidth: () => {
-        if (toastRef.current) {
-          return toastRef.current.offsetWidth;
-        }
+        var _a;
+        return (_a = toastRef.current) == null ? void 0 : _a.offsetWidth;
       }
     }),
     []
   );
-  const getBaseProps = (0, import_react28.useCallback)(
-    () => ({
-      className: slots.base({
-        class: [
-          classNames == null ? void 0 : classNames.base,
-          width ? `w-[${width}px]` : "",
-          (placement == null ? void 0 : placement.includes("top")) ? "animate-slideInFromTop" : "animate-slideInFromBottom"
-        ]
-      })
-    }),
-    [slots, classNames == null ? void 0 : classNames.base]
+  const animationClass = (placement == null ? void 0 : placement.includes("top")) ? "animate-slideInFromTop" : "animate-slideInFromBottom";
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+    "div",
+    {
+      ref: toastRef,
+      className: clsx(
+        slots.base({ class: classNames == null ? void 0 : classNames.base }),
+        width && `w-[${width}px]`,
+        animationClass,
+        disableAnimation && "!animate-none"
+      ),
+      style: hasShadow ? { boxShadow: "0px 6px 18px rgba(0, 0, 0, 0.10)" } : {},
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
+          showIcon && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon_default, { name: originalProps.icon || "info-circle", fill: true, className: "mt-[2px]" }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: slots.title({ class: classNames == null ? void 0 : classNames.title }), children: title }),
+          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon_default, { name: "close", className: "cursor-pointer", onClick: onClose })
+        ] }),
+        content && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { children: content })
+      ]
+    }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { ref: toastRef, ...getBaseProps(), children: [
-    showIcon && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon_default, { name: originalProps.icon || "info-circle", fill: true, className: "mt-[2px]" }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex-1 select-none", children: props.content }),
-    showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon_default, { name: "close", className: "cursor-pointer mt-[2px]", onClick: onClose })
-  ] });
 });
 Toast.displayName = "Toast";
 var toast_default = Toast;
@@ -9031,15 +9083,18 @@ var toast = tv({
       "inline-flex",
       "items-start",
       "border",
-      "rounded-md",
+      "rounded-[5px]",
       "text-md",
       "p-[10px]",
       "gap-[5px]",
       "z-0",
       "transition-all",
       "duration-300",
-      "overflow-auto"
+      "overflow-auto",
+      "select-none"
     ],
+    wrapper: ["flex", "items-center", "gap-[5px]"],
+    title: ["font-bold", "truncate"],
     content: [
       "absolute",
       "top-0",
@@ -9053,43 +9108,73 @@ var toast = tv({
     ]
   },
   variants: {
+    variant: {
+      solid: {},
+      outline: {}
+    },
     color: {
-      primary: {
-        base: "bg-primary-soft border-primary-light text-primary-main"
-      },
-      secondary: {
-        base: "bg-secondary-soft border-secondary-light text-secondary-main"
-      },
-      default: {
-        base: "bg-default-soft border-default-light text-default-main"
-      },
-      success: {
-        base: "bg-success-soft border-success-light text-success-main"
-      },
-      info: {
-        base: "bg-info-soft border-info-light text-info-main"
-      },
-      warning: {
-        base: "bg-warning-soft border-warning-light text-warning-main"
-      },
-      danger: {
-        base: "bg-danger-soft border-danger-light text-danger-main"
+      primary: {},
+      secondary: {},
+      success: {},
+      info: {},
+      warning: {},
+      danger: {}
+    }
+  },
+  compoundVariants: [
+    {
+      variant: "solid",
+      color: "primary",
+      class: {
+        base: ["bg-primary-soft", "border-primary-main", "text-primary-main"]
       }
     },
-    disableAnimation: {
-      true: {
-        base: "animate-none"
+    {
+      variant: "solid",
+      color: "secondary",
+      class: {
+        base: ["bg-secondary-soft", "border-secondary-main", "text-secondary-main"]
+      }
+    },
+    {
+      variant: "solid",
+      color: "success",
+      class: {
+        base: ["bg-success-soft", "border-success-main", "text-success-main"]
+      }
+    },
+    {
+      variant: "solid",
+      color: "info",
+      class: {
+        base: ["bg-info-soft", "border-info-main", "text-info-main"]
+      }
+    },
+    {
+      variant: "solid",
+      color: "warning",
+      class: {
+        base: ["bg-warning-soft", "border-warning-main", "text-warning-main"]
+      }
+    },
+    {
+      variant: "solid",
+      color: "danger",
+      class: {
+        base: ["bg-danger-soft", "border-danger-main", "text-danger-main"]
       }
     }
-  },
+  ],
   defaultVariants: {
-    color: "default",
+    variant: "solid",
+    color: "primary",
+    hasShadow: true,
     disableAnimation: false
   }
 });
 
 // src/components/toast/use-toast.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 
 // src/components/toast/toast-utils.ts
 var getToastPosition = (placement, width, offset) => {
@@ -9128,10 +9213,10 @@ var getToastPosition = (placement, width, offset) => {
 };
 
 // src/components/toast/use-toast.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var ToastContext = (0, import_react29.createContext)(null);
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var ToastContext = (0, import_react30.createContext)(null);
 var useToast = () => {
-  const context = (0, import_react29.useContext)(ToastContext);
+  const context = (0, import_react30.useContext)(ToastContext);
   if (!context) {
     throw new Error("useToast must be used within a ToastProvider");
   }
@@ -9141,68 +9226,56 @@ var ToastProvider = ({
   globalOptions,
   children
 }) => {
-  const [toasts, setToasts] = (0, import_react29.useState)([]);
-  const [containerStyle, setContainerStyle] = (0, import_react29.useState)({});
-  const toastRef = (0, import_react29.useRef)(null);
-  const addToast = (0, import_react29.useCallback)((content, options) => {
-    const id = Date.now() + Math.floor(Math.random() * 1e5);
-    const newToast = {
-      id,
-      content,
-      ...options
-    };
-    setToasts((prevToasts) => [...prevToasts, newToast]);
-    setTimeout(() => {
-      setToasts((prevToasts) => prevToasts.filter((toast2) => toast2.id !== id));
-    }, options.duration || 3e3);
-  }, []);
-  const removeToast = (0, import_react29.useCallback)((id) => {
+  const [toasts, setToasts] = (0, import_react30.useState)([]);
+  const [containerStyle, setContainerStyle] = (0, import_react30.useState)({});
+  const toastRef = (0, import_react30.useRef)(null);
+  const addToast = (0, import_react30.useCallback)(
+    (title, options = {}) => {
+      const id = Date.now() + Math.floor(Math.random() * 1e5);
+      const newToast = {
+        id,
+        title,
+        duration: 3e3,
+        ...globalOptions,
+        ...options
+      };
+      setToasts((prev) => [...prev, newToast]);
+      setTimeout(() => {
+        setToasts((prevToasts) => prevToasts.filter((toast2) => toast2.id !== id));
+      }, newToast.duration || 3e3);
+    },
+    [globalOptions]
+  );
+  const removeToast = (0, import_react30.useCallback)((id) => {
     setToasts((prevToasts) => prevToasts.filter((toast2) => toast2.id !== id));
   }, []);
-  const value = {
-    default: (content, options) => addToast(content, { type: "default", icon: "info-circle", color: "default", ...globalOptions, ...options }),
-    info: (content, options) => addToast(content, { type: "info", icon: "info-circle", color: "info", ...globalOptions, ...options }),
-    success: (content, options) => addToast(content, { type: "success", icon: "check-circle", color: "success", ...globalOptions, ...options }),
-    warning: (content, options) => addToast(content, {
-      type: "warning",
-      icon: "exclamation-triangle",
-      color: "warning",
-      ...globalOptions,
-      ...options
-    }),
-    error: (content, options) => addToast(content, { type: "error", icon: "exclamation-circle", color: "danger", ...globalOptions, ...options })
-  };
-  (0, import_react29.useEffect)(() => {
+  const contextValue = addToast;
+  (0, import_react30.useEffect)(() => {
     var _a;
-    const width = (globalOptions == null ? void 0 : globalOptions.width) ? globalOptions == null ? void 0 : globalOptions.width : typeof ((_a = toastRef.current) == null ? void 0 : _a.getWidth) === "function" ? toastRef.current.getWidth() : 300;
+    const width = (globalOptions == null ? void 0 : globalOptions.width) ? globalOptions.width : typeof ((_a = toastRef.current) == null ? void 0 : _a.getWidth) === "function" ? toastRef.current.getWidth() : 300;
     const offset = 20;
-    const calculatePosition = () => {
-      const placement = (globalOptions == null ? void 0 : globalOptions.placement) || "bottom-right";
-      const { top, left, bottom, right } = getToastPosition(placement, width, offset);
-      setContainerStyle({
-        position: "fixed",
-        top: top !== void 0 ? `${top}px` : void 0,
-        left: left !== void 0 ? `${left}px` : void 0,
-        bottom: bottom !== void 0 ? `${bottom}px` : void 0,
-        right: right !== void 0 ? `${right}px` : void 0
-      });
-    };
-    calculatePosition();
-    window.addEventListener("resize", calculatePosition);
-    return () => window.removeEventListener("resize", calculatePosition);
+    const placement = (globalOptions == null ? void 0 : globalOptions.placement) || "bottom-right";
+    const { top, left, bottom, right } = getToastPosition(placement, width, offset);
+    setContainerStyle({
+      position: "fixed",
+      top: top !== void 0 ? `${top}px` : void 0,
+      left: left !== void 0 ? `${left}px` : void 0,
+      bottom: bottom !== void 0 ? `${bottom}px` : void 0,
+      right: right !== void 0 ? `${right}px` : void 0
+    });
   }, [globalOptions == null ? void 0 : globalOptions.placement, globalOptions == null ? void 0 : globalOptions.width]);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(ToastContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(ToastContext.Provider, { value: contextValue, children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { id: "deepnoid-toast-container", className: "flex flex-col gap-[10px]", style: containerStyle, children: toasts.map((toast2) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(toast_default, { ref: toastRef, onClose: () => removeToast(toast2.id), ...toast2 }, toast2.id)) })
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { id: "deepnoid-toast-container", className: "flex flex-col gap-[10px]", style: containerStyle, children: toasts.map((toast2) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(toast_default, { ref: toastRef, onClose: () => removeToast(toast2.id), ...toast2 }, toast2.id)) })
   ] });
 };
 
 // src/components/dateTimePicker/dateTimePicker.tsx
-var import_react33 = __toESM(require("react"));
+var import_react34 = __toESM(require("react"));
 var import_react_dom4 = require("react-dom");
 
 // src/components/dateTimePicker/useDateTimePicker.tsx
-var import_react30 = require("react");
+var import_react31 = require("react");
 
 // src/components/dateTimePicker/util.ts
 var formatDateToString = (date) => {
@@ -9218,17 +9291,17 @@ var formatStringToDate = (date) => {
 
 // src/components/dateTimePicker/useDateTimePicker.tsx
 var useDatePicker = ({ initialDate, initialTime }) => {
-  const [selectedDate, setSelectedDate] = (0, import_react30.useState)(
+  const [selectedDate, setSelectedDate] = (0, import_react31.useState)(
     initialDate ? formatDateToString(initialDate) : ""
   );
-  const [selectedTime, setSelectedTime] = (0, import_react30.useState)(initialTime ? initialTime : "");
-  const [targetRect, setTargetRect] = (0, import_react30.useState)(null);
-  const [popupWidth, setPopupWidth] = (0, import_react30.useState)(0);
-  const [popupHeight, setPopupHeight] = (0, import_react30.useState)(0);
-  const [isFocusInput, setIsFocusInput] = (0, import_react30.useState)(false);
-  const dateInputRef = (0, import_react30.useRef)(null);
-  const datePickerWrapperRef = (0, import_react30.useRef)(null);
-  const datePickerRef = (0, import_react30.useRef)(null);
+  const [selectedTime, setSelectedTime] = (0, import_react31.useState)(initialTime ? initialTime : "");
+  const [targetRect, setTargetRect] = (0, import_react31.useState)(null);
+  const [popupWidth, setPopupWidth] = (0, import_react31.useState)(0);
+  const [popupHeight, setPopupHeight] = (0, import_react31.useState)(0);
+  const [isFocusInput, setIsFocusInput] = (0, import_react31.useState)(false);
+  const dateInputRef = (0, import_react31.useRef)(null);
+  const datePickerWrapperRef = (0, import_react31.useRef)(null);
+  const datePickerRef = (0, import_react31.useRef)(null);
   const DATE_PICKER_GAP = 4;
   const calculatePositionWithScroll = (targetRect2) => {
     if (targetRect2 && popupWidth && popupHeight) {
@@ -9261,7 +9334,7 @@ var useDatePicker = ({ initialDate, initialTime }) => {
   const handleBlueInput = () => {
     setIsFocusInput(false);
   };
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     const onClickOutside = (e) => {
       if (datePickerRef.current && !datePickerRef.current.contains(e.target) && datePickerWrapperRef.current && !datePickerWrapperRef.current.contains(e.target)) {
         setTargetRect(null);
@@ -9270,7 +9343,7 @@ var useDatePicker = ({ initialDate, initialTime }) => {
     window.addEventListener("mousedown", onClickOutside);
     return () => window.removeEventListener("mousedown", onClickOutside);
   }, []);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     if (datePickerWrapperRef.current) {
       setPopupHeight(datePickerWrapperRef.current.getBoundingClientRect().height);
       setPopupWidth(datePickerWrapperRef.current.getBoundingClientRect().width);
@@ -9295,19 +9368,19 @@ var useDatePicker = ({ initialDate, initialTime }) => {
 };
 
 // src/components/dateTimePicker/calendar.tsx
-var import_react31 = __toESM(require("react"));
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var Calendar = (0, import_react31.forwardRef)((originalProps, ref) => {
+var import_react32 = __toESM(require("react"));
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var Calendar = (0, import_react32.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, calendarStyle.variantKeys);
   const { selectedDate, classNames, highlightWeekend = true, onChangeDate, ...inputProps } = props;
-  const [currentDate, setCurrentDate] = (0, import_react31.useState)(selectedDate ? new Date(selectedDate) : /* @__PURE__ */ new Date());
+  const [currentDate, setCurrentDate] = (0, import_react32.useState)(selectedDate ? new Date(selectedDate) : /* @__PURE__ */ new Date());
   const daysOfWeek = ["S", "M", "T", "W", "T", "F", "S"];
-  (0, import_react31.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (selectedDate) {
       setCurrentDate(new Date(selectedDate));
     }
   }, [selectedDate]);
-  const getCalendarDates = (0, import_react31.useCallback)(() => {
+  const getCalendarDates = (0, import_react32.useCallback)(() => {
     const year = currentDate.getFullYear();
     const month = currentDate.getMonth();
     const firstDayOfMonth = new Date(year, month, 1).getDay();
@@ -9353,17 +9426,17 @@ var Calendar = (0, import_react31.forwardRef)((originalProps, ref) => {
       onChangeDate(formatted);
     }
   };
-  (0, import_react31.useImperativeHandle)(ref, () => ({
+  (0, import_react32.useImperativeHandle)(ref, () => ({
     getSelectedDate: () => selectedDate
   }));
-  const slots = (0, import_react31.useMemo)(() => calendarStyle({ ...variantProps }), [variantProps]);
-  const getBaseProps = (0, import_react31.useCallback)(
+  const slots = (0, import_react32.useMemo)(() => calendarStyle({ ...variantProps }), [variantProps]);
+  const getBaseProps = (0, import_react32.useCallback)(
     () => ({
       className: `${slots.base({ class: classNames == null ? void 0 : classNames.base })}`
     }),
     [slots, classNames]
   );
-  const getDateTitleProps = (0, import_react31.useCallback)(
+  const getDateTitleProps = (0, import_react32.useCallback)(
     (index) => {
       return {
         className: `${slots.dateTitle({
@@ -9375,7 +9448,7 @@ var Calendar = (0, import_react31.forwardRef)((originalProps, ref) => {
     },
     [slots, classNames, highlightWeekend]
   );
-  const getDateProps = (0, import_react31.useCallback)(
+  const getDateProps = (0, import_react32.useCallback)(
     (dateObj) => {
       const today = /* @__PURE__ */ new Date();
       const isToday = today.getDate() === dateObj.date && today.getMonth() === currentDate.getMonth() && today.getFullYear() === currentDate.getFullYear();
@@ -9397,18 +9470,18 @@ var Calendar = (0, import_react31.forwardRef)((originalProps, ref) => {
     [slots, classNames, selectedDate, currentDate, highlightWeekend]
   );
   const calendarDates = getCalendarDates();
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_jsx_runtime31.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { ...getBaseProps(), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "calendar-header flex justify-between items-center mb-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon_default, { name: "brace-left", size: "md", className: "cursor-pointer", onClick: handlePrevMonth }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-h6 font-semibold", children: currentDate.toLocaleString("default", { year: "numeric", month: "2-digit" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon_default, { name: "brace-right", size: "md", className: "cursor-pointer", onClick: handleNextMonth })
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { ...getBaseProps(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "calendar-header flex justify-between items-center mb-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon_default, { name: "brace-left", size: "md", className: "cursor-pointer", onClick: handlePrevMonth }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-h6 font-semibold", children: currentDate.toLocaleString("default", { year: "numeric", month: "2-digit" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon_default, { name: "brace-right", size: "md", className: "cursor-pointer", onClick: handleNextMonth })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "grid grid-cols-7 gap-2 text-center", children: daysOfWeek.map((day, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { ...getDateTitleProps(index), children: day }, `${day}-${index}`)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "grid grid-cols-7 gap-[5px] text-center mt-2", children: calendarDates.map((week, weekIndex) => {
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "grid grid-cols-7 gap-2 text-center", children: daysOfWeek.map((day, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ...getDateTitleProps(index), children: day }, `${day}-${index}`)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "grid grid-cols-7 gap-[5px] text-center mt-2", children: calendarDates.map((week, weekIndex) => {
       const hasCurrentMonthDates = week.some((dateObj) => dateObj.currentMonth);
       if (!hasCurrentMonthDates) return null;
-      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react31.default.Fragment, { children: week.map((dateObj, index) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { ...getDateProps(dateObj), children: dateObj.date }, index);
+      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react32.default.Fragment, { children: week.map((dateObj, index) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ...getDateProps(dateObj), children: dateObj.date }, index);
       }) }, weekIndex);
     }) })
   ] }) });
@@ -9479,22 +9552,22 @@ var calendarStyle = tv({
 });
 
 // src/components/dateTimePicker/timePicker.tsx
-var import_react32 = require("react");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_react33 = require("react");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var TimePicker = ({ color = "primary", selectedTime, isFocusInput, onChangeTime }) => {
   const TOTAL_HOURS = 12;
   const TOTAL_MINUTES = 60;
   const ITEM_HEIGHT = 30;
   const PERIODS = ["AM", "PM"];
-  const [selectedHour, setSelectedHour] = (0, import_react32.useState)("01");
-  const [selectedMinute, setSelectedMinute] = (0, import_react32.useState)("00");
-  const [selectedPeriod, setSelectedPeriod] = (0, import_react32.useState)("AM");
-  const hourRef = (0, import_react32.useRef)(null);
-  const minuteRef = (0, import_react32.useRef)(null);
-  const periodRef = (0, import_react32.useRef)(null);
+  const [selectedHour, setSelectedHour] = (0, import_react33.useState)("01");
+  const [selectedMinute, setSelectedMinute] = (0, import_react33.useState)("00");
+  const [selectedPeriod, setSelectedPeriod] = (0, import_react33.useState)("AM");
+  const hourRef = (0, import_react33.useRef)(null);
+  const minuteRef = (0, import_react33.useRef)(null);
+  const periodRef = (0, import_react33.useRef)(null);
   const hoursArray = [...Array(TOTAL_HOURS).keys()].map((i) => (i + 1).toString().padStart(2, "0"));
   const minutesArray = [...Array(TOTAL_MINUTES).keys()].map((i) => i.toString().padStart(2, "0"));
-  (0, import_react32.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     if (selectedTime) {
       const { formattedHour, minute, period } = parseAndFormatTime(selectedTime);
       setSelectedHour(formattedHour);
@@ -9505,7 +9578,7 @@ var TimePicker = ({ color = "primary", selectedTime, isFocusInput, onChangeTime
       scrollToSelectedTime();
     }
   }, [selectedTime, isFocusInput]);
-  (0, import_react32.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     scrollToSelectedTime();
   }, []);
   const parseAndFormatTime = (time) => {
@@ -9542,8 +9615,8 @@ var TimePicker = ({ color = "primary", selectedTime, isFocusInput, onChangeTime
       onChangeTime(formattedTime);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex h-[200px] p-[10px] gap-[5px] border border-neutral-main rounded-md bg-background shadow-lg", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(list_default, { ref: periodRef, classNames: { base: "overflow-y-auto scrollbar-hide" }, children: PERIODS.map((period, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex h-[200px] p-[10px] gap-[5px] border border-neutral-main rounded-md bg-background shadow-lg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(list_default, { ref: periodRef, classNames: { base: "overflow-y-auto scrollbar-hide" }, children: PERIODS.map((period, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       listItem_default,
       {
         color,
@@ -9557,7 +9630,7 @@ var TimePicker = ({ color = "primary", selectedTime, isFocusInput, onChangeTime
       },
       `${period}-${index}`
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(list_default, { ref: hourRef, classNames: { base: "overflow-y-auto scrollbar-hide" }, children: hoursArray.map((hour, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(list_default, { ref: hourRef, classNames: { base: "overflow-y-auto scrollbar-hide" }, children: hoursArray.map((hour, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       listItem_default,
       {
         color,
@@ -9571,7 +9644,7 @@ var TimePicker = ({ color = "primary", selectedTime, isFocusInput, onChangeTime
       },
       `${hour}-${index}`
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(list_default, { ref: minuteRef, classNames: { base: "overflow-y-auto scrollbar-hide" }, children: minutesArray.map((minute, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(list_default, { ref: minuteRef, classNames: { base: "overflow-y-auto scrollbar-hide" }, children: minutesArray.map((minute, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       listItem_default,
       {
         color,
@@ -9590,8 +9663,8 @@ var TimePicker = ({ color = "primary", selectedTime, isFocusInput, onChangeTime
 var timePicker_default = TimePicker;
 
 // src/components/dateTimePicker/dateTimePicker.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
-var DatePicker = (0, import_react33.forwardRef)((originalProps, ref) => {
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var DatePicker = (0, import_react34.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, dateTimePickerStyle.variantKeys);
   const {
     classNames,
@@ -9605,7 +9678,7 @@ var DatePicker = (0, import_react33.forwardRef)((originalProps, ref) => {
     onChangeTime,
     ...inputProps
   } = props;
-  const slots = (0, import_react33.useMemo)(() => dateTimePickerStyle({ ...variantProps }), [variantProps]);
+  const slots = (0, import_react34.useMemo)(() => dateTimePickerStyle({ ...variantProps }), [variantProps]);
   const {
     selectedDate,
     selectedTime,
@@ -9626,32 +9699,32 @@ var DatePicker = (0, import_react33.forwardRef)((originalProps, ref) => {
     initialTime: typeof value === "string" ? value : void 0
   });
   const position = targetRect ? calculatePositionWithScroll(targetRect) : null;
-  const getBaseProps = (0, import_react33.useCallback)(
+  const getBaseProps = (0, import_react34.useCallback)(
     () => ({
       className: slots.base({ class: classNames == null ? void 0 : classNames.base })
     }),
     [slots, classNames]
   );
-  const getLabelProps = (0, import_react33.useCallback)(
+  const getLabelProps = (0, import_react34.useCallback)(
     () => ({
       className: slots.label({ class: classNames == null ? void 0 : classNames.label })
     }),
     [slots, classNames]
   );
-  const getInnerWrapperProps = (0, import_react33.useCallback)(
+  const getInnerWrapperProps = (0, import_react34.useCallback)(
     () => ({
       className: slots.innerWrapper({ class: classNames == null ? void 0 : classNames.innerWrapper })
     }),
     [slots, classNames]
   );
-  const getInputWrapperProps = (0, import_react33.useCallback)(
+  const getInputWrapperProps = (0, import_react34.useCallback)(
     () => ({
       className: slots.inputWrapper({ class: classNames == null ? void 0 : classNames.inputWrapper }),
       ref: datePickerRef
     }),
     [slots, classNames]
   );
-  const getInputProps = (0, import_react33.useCallback)(
+  const getInputProps = (0, import_react34.useCallback)(
     () => ({
       ...inputProps,
       ref: ref || dateInputRef,
@@ -9682,33 +9755,33 @@ var DatePicker = (0, import_react33.forwardRef)((originalProps, ref) => {
     }),
     [inputProps, ref, dateInputRef, slots, classNames == null ? void 0 : classNames.input, selectedDate, selectedTime, type, value]
   );
-  const getContentProps = (0, import_react33.useCallback)(
+  const getContentProps = (0, import_react34.useCallback)(
     () => ({
       className: slots.content({ class: classNames == null ? void 0 : classNames.content }),
       size: originalProps.size
     }),
     [slots, classNames, originalProps.size]
   );
-  const getErrorMessageProps = (0, import_react33.useCallback)(
+  const getErrorMessageProps = (0, import_react34.useCallback)(
     () => ({
       className: slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })
     }),
     [slots, classNames]
   );
   const renderStartContent = () => {
-    if (import_react33.default.isValidElement(startContent)) {
+    if (import_react34.default.isValidElement(startContent)) {
       const existingProps = startContent.props;
       const mergedProps = {
         ...getContentProps(),
         className: `${getContentProps().className || ""} ${existingProps.className || ""}`.trim()
       };
-      return import_react33.default.cloneElement(startContent, mergedProps);
+      return import_react34.default.cloneElement(startContent, mergedProps);
     } else {
       const contentProps = getContentProps();
-      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ...contentProps, children: startContent });
+      return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { ...contentProps, children: startContent });
     }
   };
-  const renderDateTimePickerIcon = () => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ...getContentProps(), onClick: handleToggleDatePicker, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  const renderDateTimePickerIcon = () => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { ...getContentProps(), onClick: handleToggleDatePicker, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     Icon_default,
     {
       name: type === "time" ? "clock" : "calendar",
@@ -9718,18 +9791,18 @@ var DatePicker = (0, import_react33.forwardRef)((originalProps, ref) => {
     }
   ) });
   const renderContentWithIcon = () => {
-    if (import_react33.default.isValidElement(endContent)) {
+    if (import_react34.default.isValidElement(endContent)) {
       const existingProps = endContent.props;
       const mergedProps = {
         ...getContentProps(),
         className: `${getContentProps().className || ""} ${existingProps.className || ""}`.trim()
       };
-      return import_react33.default.cloneElement(endContent, mergedProps);
+      return import_react34.default.cloneElement(endContent, mergedProps);
     } else if (errorMessage) {
       const iconProps = { ...getContentProps(), className: getContentProps().className };
-      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ...iconProps, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon_default, { name: "exclamation-circle", fill: true, size: originalProps.size }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { ...iconProps, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon_default, { name: "exclamation-circle", fill: true, size: originalProps.size }) });
     } else {
-      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx_runtime34.Fragment, {});
     }
   };
   const renderEndContent = () => {
@@ -9744,20 +9817,20 @@ var DatePicker = (0, import_react33.forwardRef)((originalProps, ref) => {
         return renderContentWithIcon();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { ...getBaseProps(), children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("label", { ...getLabelProps(), children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { ...getInnerWrapperProps(), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { ...getInputWrapperProps(), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { ...getBaseProps(), children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("label", { ...getLabelProps(), children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { ...getInnerWrapperProps(), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { ...getInputWrapperProps(), children: [
           startContent && renderStartContent(),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("input", { ...getInputProps() }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("input", { ...getInputProps() }),
           renderEndContent()
         ] }),
-        errorMessage && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { ...getErrorMessageProps(), children: errorMessage })
+        errorMessage && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { ...getErrorMessageProps(), children: errorMessage })
       ] })
     ] }),
-    targetRect && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children: (0, import_react_dom4.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+    targetRect && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx_runtime34.Fragment, { children: (0, import_react_dom4.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
         "div",
         {
           ref: datePickerWrapperRef,
@@ -9768,7 +9841,7 @@ var DatePicker = (0, import_react33.forwardRef)((originalProps, ref) => {
             zIndex: 1e3
           },
           children: [
-            type === "date" && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            type === "date" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
               calendar_default,
               {
                 color: originalProps.color,
@@ -9780,7 +9853,7 @@ var DatePicker = (0, import_react33.forwardRef)((originalProps, ref) => {
                 }
               }
             ),
-            type === "time" && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            type === "time" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
               timePicker_default,
               {
                 color: originalProps.color,
@@ -9928,6 +10001,79 @@ var dateTimePickerStyle = tv({
     }
   ]
 });
+
+// src/components/tree/tree.tsx
+var import_react35 = require("react");
+
+// src/assets/images/cogwheel.png
+var cogwheel_default = "./cogwheel-U2B3CWEL.png";
+
+// src/assets/images/folder.svg
+var folder_default = "./folder-RO3QTLGS.svg";
+
+// src/components/tree/tree.tsx
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var TreeNodeItem = (0, import_react35.forwardRef)(({ node, depth }, _ref) => {
+  var _a;
+  const [isOpen, setIsOpen] = (0, import_react35.useState)(false);
+  const slots = (0, import_react35.useMemo)(() => treeStyle(), []);
+  const toggleOpen = (0, import_react35.useCallback)(() => {
+    setIsOpen((prev) => !prev);
+  }, []);
+  const handleClick = () => {
+    var _a2;
+    toggleOpen();
+    (_a2 = node.onClick) == null ? void 0 : _a2.call(node);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: depth > 1 ? "ml-[30px]" : "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: slots.label(), onClick: handleClick, children: [
+      node.children && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        Icon_default,
+        {
+          name: "right-chevron",
+          className: `text-neutral-main transition-transform duration-150 ${isOpen ? "rotate-90" : "rotate-0"}`
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("img", { src: folder_default, alt: "folder", width: 25, height: 25 }),
+      node.label
+    ] }),
+    isOpen && ((_a = node.children) == null ? void 0 : _a.map((child) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TreeNodeItem, { node: child, depth: depth + 1 }, child.id)))
+  ] });
+});
+var Tree = (0, import_react35.forwardRef)(({ headerContent, group }, ref) => {
+  const { label, data, onClick } = group;
+  const slots = (0, import_react35.useMemo)(() => treeStyle(), []);
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: slots.base(), ref, children: [
+    headerContent && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { children: headerContent }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: slots.label(), onClick, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("img", { src: cogwheel_default, alt: "cogwheel", width: 25, height: 25 }),
+        label
+      ] }),
+      data.map((node) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TreeNodeItem, { node, depth: 1 }, node.id))
+    ] })
+  ] });
+});
+TreeNodeItem.displayName = "TreeNodeItem";
+Tree.displayName = "Tree";
+var tree_default = Tree;
+var treeStyle = tv({
+  slots: {
+    base: ["border", "border-neutral-light", "rounded-xl", "p-[20px]", "flex", "flex-col", "gap-[20px]"],
+    label: [
+      "flex",
+      "items-center",
+      "gap-[5px]",
+      "text-md",
+      "font-bold",
+      "text-body-foreground",
+      "hover:bg-neutral-soft",
+      "p-[5px]",
+      "rounded-[5px]",
+      "cursor-pointer"
+    ]
+  }
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Avatar,
@@ -9938,6 +10084,7 @@ var dateTimePickerStyle = tv({
   CheckBox,
   Chip,
   DateTimePicker,
+  FormTable,
   Icon,
   IconButton,
   Input,
@@ -9956,6 +10103,7 @@ var dateTimePickerStyle = tv({
   Toast,
   ToastProvider,
   Tooltip,
+  Tree,
   deepnoidUi,
   iconTemplate,
   tv,