@deepnoid/ui 0.1.19 → 0.1.21

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" })
       }
     );
   },
@@ -5873,7 +5941,18 @@ var Input = (0, import_react9.forwardRef)((originalProps, ref) => {
               ),
               children: [
                 startContent && renderStartContent(),
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("input", { ...inputProps, ref: ref || inputRef, className: slots.input({ class: classNames == null ? void 0 : classNames.input }), size: 0 }),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  "input",
+                  {
+                    ...inputProps,
+                    ref: ref || inputRef,
+                    className: clsx(
+                      slots.input({ class: classNames == null ? void 0 : classNames.input }),
+                      inputProps.readOnly ? "!text-body-foreground placeholder:text-body-foreground" : ""
+                    ),
+                    size: 0
+                  }
+                ),
                 renderEndContent()
               ]
             }
@@ -5890,7 +5969,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]"],
@@ -5921,7 +6000,7 @@ var inputStyle = tv(
       ],
       helperText: ["text-neutral-main", "group-has-[:hover]/input:text-neutral-dark"],
       errorText: ["text-danger-main"],
-      readonly: ["pointer-events-none"]
+      readonly: ["pointer-events-none", "!text-body-foreground"]
     },
     variants: {
       variant: {
@@ -6734,7 +6813,7 @@ var checkboxStyle = tv({
 
 // src/components/table/table-head.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var TableHead = ({ columns, slots, size, selectableRows, isCheckedAll, classNames, onCheckAll }) => {
+var TableHead = ({ columns, slots, size, rowCheckbox, isCheckedAll, classNames, onCheckAll }) => {
   const handleClickCheckAll = (e) => {
     e.preventDefault();
     onCheckAll(!isCheckedAll);
@@ -6753,7 +6832,7 @@ var TableHead = ({ columns, slots, size, selectableRows, isCheckedAll, className
     },
     `${column.field}${index}thead`
   ));
-  const renderSelectAllCheckbox = () => selectableRows && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("th", { className: slots.th({ class: classNames == null ? void 0 : classNames.th }), onClick: handleClickCheckAll, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(checkbox_default, { size, checked: isCheckedAll }) }) });
+  const renderSelectAllCheckbox = () => rowCheckbox && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("th", { className: slots.th({ class: classNames == null ? void 0 : classNames.th }), onClick: handleClickCheckAll, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(checkbox_default, { size, checked: isCheckedAll }) }) });
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("thead", { className: slots.thead({ class: classNames == null ? void 0 : classNames.thead }), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
     renderColumnHeaders(),
     renderSelectAllCheckbox()
@@ -6770,9 +6849,10 @@ var TableBody = ({
   columns,
   rows,
   size,
-  selectableRows,
+  rowCheckbox,
   checkedRows,
   onCheckRow,
+  onRowClick,
   emptyContent,
   isLoading,
   classNames,
@@ -6813,21 +6893,30 @@ var TableBody = ({
     [classNames == null ? void 0 : classNames.td, generateColumnStyles, slots]
   );
   const hasRows = rows.length > 0;
-  const colSpan = (columns.length || 1) + (selectableRows ? 1 : 0);
+  const colSpan = (columns.length || 1) + (rowCheckbox ? 1 : 0);
   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 })),
-        selectableRows && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("td", { className: slots.td({ class: classNames == null ? void 0 : classNames.td }), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-          checkbox_default,
-          {
-            size,
-            checked: isRowChecked,
-            onChange: (e) => onCheckRow(rowIndex, e.target.checked)
-          }
-        ) }) })
-      ] }, rowIndex);
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+        "tr",
+        {
+          className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }),
+          "aria-checked": isRowChecked,
+          onClick: () => onRowClick ? onRowClick(row) : void 0,
+          children: [
+            columns.map((column) => /* @__PURE__ */ (0, import_react14.createElement)("td", { ...getCellProps(column, row), key: column.field })),
+            rowCheckbox && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("td", { className: slots.td({ class: classNames == null ? void 0 : classNames.td }), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              checkbox_default,
+              {
+                size,
+                checked: isRowChecked,
+                onChange: (e) => onCheckRow(rowIndex, e.target.checked)
+              }
+            ) }) })
+          ]
+        },
+        rowIndex
+      );
     }),
     !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 }) })
   ] });
@@ -7165,7 +7254,8 @@ var Table = (0, import_react17.forwardRef)((originalProps, ref) => {
     rows,
     columns,
     size,
-    selectableRows,
+    rowCheckbox,
+    onRowClick,
     totalData,
     pagination,
     onPageChange,
@@ -7202,7 +7292,7 @@ var Table = (0, import_react17.forwardRef)((originalProps, ref) => {
         {
           columns,
           size,
-          selectableRows,
+          rowCheckbox,
           isCheckedAll: checkedRows.size === rows.length && rows.length > 0,
           onCheckAll: handleCheckAll,
           classNames,
@@ -7216,8 +7306,9 @@ var Table = (0, import_react17.forwardRef)((originalProps, ref) => {
           rows,
           columns,
           size,
-          selectableRows,
+          rowCheckbox,
           checkedRows,
+          onRowClick,
           onCheckRow: handleCheck,
           emptyContent,
           isLoading,
@@ -7459,362 +7550,376 @@ 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_react_dom = require("react-dom");
-
-// src/components/select/useSelect.tsx
-var import_react18 = 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 calculatePositionWithScroll = (targetRect2, optionWrapperHeight2) => {
-    const scrollTop = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;
-    const scrollLeft = window.scrollX || document.documentElement.scrollLeft || document.body.scrollLeft;
-    const spaceBelow = window.innerHeight - (targetRect2.y + targetRect2.height + 4);
-    const spaceAbove = targetRect2.y - 4;
-    const top = spaceBelow < optionWrapperHeight2 && spaceAbove > optionWrapperHeight2 ? targetRect2.y - optionWrapperHeight2 - 4 : targetRect2.y + targetRect2.height + 4;
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var Select = (0, import_react19.forwardRef)((originalProps, ref) => {
+  var _a;
+  const [props, variantProps] = mapPropsVariants(originalProps, select.variantKeys);
+  const {
+    label,
+    options,
+    helperText,
+    errorText,
+    classNames,
+    defaultSelectedOptions = [],
+    onChange,
+    multiple,
+    ...inputProps
+  } = props;
+  const slots = (0, import_react19.useMemo)(() => select({ ...variantProps }), [variantProps]);
+  const [selectedOptions, setSelectedOptions] = (0, import_react19.useState)(defaultSelectedOptions);
+  const [targetRect, setTargetRect] = (0, import_react19.useState)(null);
+  const [optionWrapperHeight, setOptionWrapperHeight] = (0, import_react19.useState)(0);
+  const [isVisible, setIsVisible] = (0, import_react19.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react19.useState)(false);
+  const selectWrapperRef = (0, import_react19.useRef)(null);
+  const optionWrapperRef = (0, import_react19.useRef)(null);
+  const handleToggleSelect = () => {
+    if (isOpen) {
+      setIsOpen(false);
+      setTimeout(() => setIsVisible(false), 150);
+    } else {
+      if (selectWrapperRef.current) {
+        const rect = selectWrapperRef.current.getBoundingClientRect();
+        setTargetRect(rect);
+        setIsVisible(true);
+        requestAnimationFrame(() => setIsOpen(true));
+      }
+    }
+  };
+  const calculatePositionWithScroll = (rect, height) => {
+    const scrollTop = window.scrollY;
+    const scrollLeft = window.scrollX;
+    const spaceBelow = window.innerHeight - (rect.y + rect.height + 4);
+    const spaceAbove = rect.y - 4;
+    const top = spaceBelow < height && spaceAbove > height ? rect.y - height - 4 : rect.y + rect.height + 4;
     return {
       top: top + scrollTop,
-      left: targetRect2.x + scrollLeft
+      left: rect.x + scrollLeft
     };
   };
-  const handleToggleSelect = () => {
-    if (selectWrapperRef.current) {
-      const rect = selectWrapperRef.current.getBoundingClientRect();
-      setTargetRect((prevRect) => prevRect ? null : { x: rect.x, y: rect.y, width: rect.width, height: rect.height });
-    }
-  };
   const handleChangeOption = (option) => {
-    onChange == null ? void 0 : onChange(option);
-    setSelectedOption(option);
-    handleToggleSelect();
+    let nextOptions;
+    if (multiple) {
+      const exists = selectedOptions.some((o) => o.key === option.key);
+      nextOptions = exists ? selectedOptions.filter((o) => o.key !== option.key) : [...selectedOptions, option];
+    } else {
+      nextOptions = [option];
+      setIsOpen(false);
+      setTimeout(() => setIsVisible(false), 150);
+    }
+    setSelectedOptions(nextOptions);
+    onChange == null ? void 0 : onChange(nextOptions);
   };
-  (0, import_react18.useEffect)(() => {
-    const onClickOutside = (e) => {
-      if (optionWrapperRef.current && !optionWrapperRef.current.contains(e.target)) {
-        setTargetRect(null);
+  (0, import_react19.useEffect)(() => {
+    const handleClickOutside = (e) => {
+      var _a2;
+      if (optionWrapperRef.current && !optionWrapperRef.current.contains(e.target) && !((_a2 = selectWrapperRef.current) == null ? void 0 : _a2.contains(e.target))) {
+        setIsOpen(false);
+        setTimeout(() => setIsVisible(false), 150);
       }
     };
-    window.addEventListener("mousedown", onClickOutside);
-    return () => window.removeEventListener("mousedown", onClickOutside);
+    window.addEventListener("mousedown", handleClickOutside);
+    return () => window.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (optionWrapperRef.current) {
       setOptionWrapperHeight(optionWrapperRef.current.getBoundingClientRect().height);
     }
   }, [targetRect]);
-  return {
-    selectedOption,
-    targetRect,
-    optionWrapperHeight,
-    selectWrapperRef,
-    optionWrapperRef,
-    handleToggleSelect,
-    handleChangeOption,
-    calculatePositionWithScroll
-  };
-};
-
-// src/components/select/option.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var Option = (props) => {
-  const { base, option, icon } = optionStyle(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-    "div",
-    {
-      title: props.option.value,
-      className: base(),
-      onClick: () => props.onClick(props.option),
-      ref: (node) => {
-        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 }) })
-      ]
-    }
-  );
-};
-var option_default = Option;
-var optionStyle = tv({
-  slots: {
-    base: ["w-full", "flex", "items-center", "justify-between", , "overflow-hidden"],
-    option: ["text-ellipsis overflow-hidden "],
-    icon: ""
-  },
-  variants: {
-    variant: {
-      solid: {},
-      normal: {},
-      line: {}
-    },
-    color: {
-      primary: {
-        base: ["border-primary-main", "hover:bg-primary-soft", "hover:text-primary-main"],
-        icon: "text-primary-main"
-      },
-      secondary: {
-        base: ["border-secondary-main", "hover:bg-secondary-soft", "hover:text-secondary-main"],
-        icon: "text-secondary-main"
-      }
-    },
-    size: {
-      sm: {
-        base: "text-sm px-[6px] py-[4.5px]"
-      },
-      md: {
-        base: "text-md px-[8px] py-[6.5px]"
-      },
-      lg: {
-        base: "text-lg px-[10px] py-[8px]"
-      },
-      xl: {
-        base: "text-xl px-[10px] py-[8px]"
-      }
-    }
-  },
-  defaultVariants: {
-    variant: "normal",
-    color: "primary",
-    size: "md"
-  }
-});
-
-// src/components/select/select.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var Select = (0, import_react19.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 {
-    targetRect,
-    selectedOption,
-    optionWrapperHeight,
-    selectWrapperRef,
-    optionWrapperRef,
-    handleToggleSelect,
-    handleChangeOption,
-    calculatePositionWithScroll
-  } = useSelect({
-    options,
-    defaultOption,
-    onChange
-  });
   const position = targetRect ? calculatePositionWithScroll(targetRect, optionWrapperHeight) : null;
-  const getBaseProps = (0, import_react19.useCallback)(
-    () => ({
-      className: slots.base({ class: classNames == null ? void 0 : classNames.base })
-    }),
-    [slots, classNames]
-  );
-  const getLabelProps = (0, import_react19.useCallback)(
-    () => ({
-      className: slots.label({ class: classNames == null ? void 0 : classNames.label })
-    }),
-    [slots, classNames]
-  );
-  const getSelectWrapperProps = (0, import_react19.useCallback)(
-    () => ({
-      className: slots.selectWrapper({ class: classNames == null ? void 0 : classNames.selectWrapper }),
-      ref: selectWrapperRef,
-      onClick: handleToggleSelect
-    }),
-    [slots, classNames]
-  );
-  const getSelectProps = (0, import_react19.useCallback)(
-    () => ({
-      ...inputProps,
-      ref,
-      className: slots.select({ class: classNames == null ? void 0 : classNames.select }),
-      value: (selectedOption == null ? void 0 : selectedOption.value) || "",
-      readOnly: true,
-      size: 0
-    }),
-    [slots, classNames, inputProps, selectedOption, ref]
-  );
-  const getOptionsWrapperProps = (0, import_react19.useCallback)(
-    () => ({
-      className: slots.optionsWrapper({ class: classNames == null ? void 0 : classNames.optionsWrapper }),
-      ref: optionWrapperRef
-    }),
-    [slots, classNames]
-  );
-  const getErrorMessageProps = (0, import_react19.useCallback)(
-    () => ({
-      className: slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })
-    }),
-    [slots, classNames]
-  );
+  const displayValue = multiple ? selectedOptions.map((opt) => opt.value).join(", ") : ((_a = selectedOptions[0]) == null ? void 0 : _a.value) || "";
+  const Option = ({
+    option,
+    isSelected,
+    onClick
+  }) => {
+    const slot = select({ ...variantProps, isSelected });
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { title: option.value, onClick, className: clsx(slot.option({ class: classNames == null ? void 0 : classNames.option })), children: [
+      option.value,
+      isSelected && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon_default, { name: "check", size: originalProps.size })
+    ] });
+  };
   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 })
-      ] }),
-      props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime21.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.jsxs)(
+      "div",
+      {
+        className: clsx(
+          slots.base({ class: classNames == null ? void 0 : classNames.base }),
+          variantProps.direction === "horizon" ? slots.horizon({ class: classNames == null ? void 0 : classNames.horizon }) : slots.vertical({ class: classNames == null ? void 0 : classNames.vertical })
+        ),
+        children: [
+          label && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+              "div",
+              {
+                "data-expanded": isOpen,
+                className: clsx(
+                  slots.selectWrapper({ class: classNames == null ? void 0 : classNames.selectWrapper }),
+                  inputProps.readOnly ? slots.readonly({ class: classNames == null ? void 0 : classNames.readonly }) : ""
+                ),
+                ref: selectWrapperRef,
+                onClick: handleToggleSelect,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                    "input",
+                    {
+                      ...inputProps,
+                      ref,
+                      className: clsx(
+                        slots.select({ class: classNames == null ? void 0 : classNames.select }),
+                        inputProps.readOnly ? "!text-body-foreground placeholder:text-body-foreground" : ""
+                      ),
+                      value: displayValue,
+                      readOnly: true,
+                      size: 0
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                    Icon_default,
+                    {
+                      name: "brace-up",
+                      size: originalProps.size,
+                      className: `transition-transform duration-200 ${isOpen ? "rotate-0" : "rotate-180"}`
+                    }
+                  )
+                ]
+              }
+            ),
+            helperText && !errorText && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: slots.helperText({ class: classNames == null ? void 0 : classNames.helperText }), children: helperText }),
+            errorText && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: clsx("error", slots.errorText({ class: classNames == null ? void 0 : classNames.errorText })), children: errorText })
+          ] })
+        ]
+      }
+    ),
+    isVisible && (0, import_react_dom.createPortal)(
       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         "div",
         {
-          ...getOptionsWrapperProps(),
+          ref: optionWrapperRef,
+          className: slots.optionsWrapper({ class: classNames == null ? void 0 : classNames.optionsWrapper }),
           style: {
             position: "absolute",
             top: position == null ? void 0 : position.top,
             left: position == null ? void 0 : position.left,
-            width: targetRect.width
+            width: targetRect == null ? void 0 : targetRect.width,
+            zIndex: 1e3,
+            opacity: isOpen ? 1 : 0,
+            transform: isOpen ? "translateY(0)" : "translateY(-0.25rem)",
+            transition: "opacity 150ms ease-out, transform 150ms ease-out"
           },
-          children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-            option_default,
-            {
-              variant: originalProps.variant,
-              size: originalProps.size,
-              color: originalProps.color,
-              option,
-              isSelected: (selectedOption == null ? void 0 : selectedOption.key) === option.key,
-              onClick: () => handleChangeOption(option),
-              children: option.value
-            },
-            option.key
-          ))
+          children: options.map((option) => {
+            const isSelected = selectedOptions.some((o) => o.key === option.key);
+            return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              Option,
+              {
+                option,
+                isSelected,
+                onClick: () => handleChangeOption(option)
+              },
+              option.key
+            );
+          })
         }
       ),
       document.body
-    ) })
+    )
   ] });
 });
 Select.displayName = "Select";
 var select_default = Select;
 var select = tv({
   slots: {
-    base: ["group/select", "flex flex-col"],
-    label: ["flex", "items-center"],
+    base: ["group/select", "flex"],
+    vertical: ["flex-col"],
+    horizon: ["flex-row", "gap-0"],
+    label: ["flex", "items-center", "font-bold", "text-body-foreground", "min-w-[80px]"],
+    wrapper: ["flex", "flex-col"],
     selectWrapper: [
       "flex",
       "items-center",
-      "bg-transparent",
-      "border-neutral-main",
-      "transition duration-200",
-      "group-has-[p]/select:border-danger-main",
-      "group-has-[p]/select:text-danger-main",
-      "group-has-[p]/select:bg-danger-soft"
+      "justify-between",
+      "border",
+      "cursor-pointer",
+      "text-neutral-main",
+      "hover:bg-trans-soft",
+      "group-has-[p.error]/select:border-danger-main",
+      "group-has-[p.error]/select:bg-danger-soft",
+      "group-has-[p.error]/select:text-danger-main",
+      "group-has-[p.error]/select:hover:bg-danger-soft"
     ],
     select: [
-      "w-full",
       "bg-transparent",
-      "text-foreground",
-      "cursor-inherit",
-      "cursor-pointer",
+      "w-full",
+      "outline-none",
       "placeholder:text-neutral-main",
-      "group-has-[p]/select:text-danger-main",
-      "focus-visible:outline-none"
+      "text-neutral-dark",
+      "group-has-[p.error]/select:text-danger-main",
+      "group-has-[p.error]/select:placeholder:text-danger-main"
     ],
-    optionsWrapper: ["w-[240px]", "border", "bg-background", "cursor-pointer", "overflow-y-auto"],
-    errorMessage: ["text-danger-main"]
+    optionsWrapper: ["border", "rounded", "bg-white", "shadow", "overflow-auto"],
+    option: ["flex", "justify-between", "items-center", "cursor-pointer"],
+    helperText: ["text-neutral-main"],
+    errorText: ["text-danger-main"],
+    readonly: ["pointer-events-none", "!bg-trans-soft"]
   },
   variants: {
-    variant: {
-      solid: {
-        selectWrapper: "bg-trans-soft hover:bg-trans-light data-[expanded=true]:bg-trans-light group-has-[p]/select:bg-danger-soft"
-      },
-      normal: {
-        selectWrapper: "border hover:bg-trans-soft data-[expanded=true]:bg-trans-soft"
-      },
-      line: {
-        selectWrapper: "border-b !rounded-none hover:bg-trans-soft data-[expanded=true]:bg-trans-soft",
-        optionsWrapper: "!rounded-none"
-      }
-    },
     color: {
       primary: {
-        selectWrapper: "data-[expanded=true]:border-primary-main text-primary-main",
-        optionsWrapper: "border-primary-main",
-        select: "data-[expanded=true]:text-primary-main"
+        selectWrapper: ["hover:text-primary-main"],
+        option: ["hover:bg-primary-soft", "hover:text-primary-main"]
       },
       secondary: {
-        selectWrapper: "data-[expanded=true]:border-secondary-main text-secondary-main",
-        optionsWrapper: "border-secondary-main",
-        select: "data-[expanded=true]:text-secondary-main"
+        selectWrapper: ["hover:text-secondary-main"],
+        select: ["text-secondary-main"],
+        option: ["hover:bg-secondary-soft", "hover:text-secondary-main"]
       }
     },
     size: {
       sm: {
-        base: "text-sm gap-[6px]",
-        selectWrapper: "w-[240px] h-[24px] px-[6px] py-[4.5px] gap-[6px] rounded-sm",
-        optionsWrapper: "max-h-[96px] rounded-sm",
-        errorMessage: "text-sm"
+        base: ["text-sm", "gap-[4px]"],
+        label: ["text-sm"],
+        wrapper: ["gap-[4px]"],
+        selectWrapper: ["w-[240px]", "h-[24px]", "rounded-sm", "px-[4px]"],
+        select: ["text-sm"],
+        option: ["px-[4px]", "py-[3px]", "text-sm"],
+        helperText: ["text-sm"],
+        errorText: ["text-sm"]
       },
       md: {
-        base: "text-md gap-[8px]",
-        selectWrapper: "w-[240px] h-[30px] px-[8px] py-[6.5px] gap-[8px] rounded-md",
-        optionsWrapper: "max-h-[120px] rounded-md",
-        errorMessage: "text-md"
+        base: ["text-md", "gap-[6px]", "rounded-md"],
+        label: ["text-md"],
+        wrapper: ["gap-[6px]"],
+        selectWrapper: ["w-[240px]", "h-[32px]", "rounded-md", "px-[6px]"],
+        select: ["text-md"],
+        option: ["px-[6px]", "py-[5.5px]", "text-md"],
+        helperText: ["text-sm"],
+        errorText: ["text-sm"]
       },
       lg: {
-        base: "text-lg gap-[10px]",
-        selectWrapper: "w-[240px] h-[36px] px-[10px] py-[8px] gap-[10px] rounded-lg",
-        optionsWrapper: "max-h-[144px] rounded-lg",
-        errorMessage: "text-lg"
+        base: ["text-lg", "gap-[8px]"],
+        label: ["text-lg"],
+        wrapper: ["gap-[8px]"],
+        selectWrapper: ["w-[240px]", "h-[40px]", "rounded-lg", "px-[8px]"],
+        select: ["text-lg"],
+        option: ["px-[8px]", "py-[8px]", "text-lg"],
+        helperText: ["text-md"],
+        errorText: ["text-md"]
       },
       xl: {
-        base: "text-lg gap-[10px]",
-        selectWrapper: "w-[240px] h-[36px] px-[10px] py-[8px] gap-[10px] rounded-xl",
-        optionsWrapper: "max-h-[144px] rounded-xl",
-        errorMessage: "text-xl"
+        base: ["text-xl", "gap-[10px]"],
+        label: ["text-xl"],
+        wrapper: ["gap-[10px]"],
+        selectWrapper: ["w-[240px]", "h-[50px]", "rounded-lg", "px-[10px]"],
+        select: ["text-xl"],
+        option: ["px-[10px]", "py-[11.5px]"],
+        helperText: ["text-md"],
+        errorText: ["text-md"]
       }
     },
-    radius: {
-      default: "",
-      none: {
-        selectWrapper: "rounded-none",
-        optionsWrapper: "rounded-none"
-      },
-      full: {
-        selectWrapper: "rounded-full"
-      }
+    direction: {
+      vertical: "",
+      horizon: ""
     },
-    fullWidth: {
+    full: {
       true: {
-        selectWrapper: "w-full",
-        optionsWrapper: "w-full"
+        base: ["w-full"],
+        wrapper: ["w-full"],
+        selectWrapper: ["w-full"]
       }
     },
-    isDisabled: {
+    disabled: {
       true: {
-        base: "cursor-default",
-        selectWrapper: "bg-neutral-soft border-neutral-light text-neutral-light pointer-events-none",
-        select: "text-neutral-light focus:text-neutral-light",
-        label: "text-neutral-light"
+        base: ["pointer-events-none"],
+        selectWrapper: [
+          "bg-neutral-soft",
+          "border-neutral-light",
+          "group-has-[p.error]/select:text-danger-light",
+          "group-has-[p.error]/select:bg-danger-soft",
+          "group-has-[p.error]/select:border-danger-light"
+        ],
+        select: [
+          "text-neutral-light",
+          "placeholder:text-neutral-light",
+          "group-has-[p.error]/select:text-danger-light",
+          "group-has-[p.error]/select:placeholder:text-danger-light"
+        ],
+        helperText: ["!text-neutral-light"],
+        errorText: ["!text-danger-light"]
       }
     },
-    isRequired: {
-      true: {
-        label: "after:content-['*'] after:text-danger-main after:ml-0.5"
-      }
+    isSelected: {
+      true: "",
+      false: ""
     }
   },
-  defaultVariants: {
-    variant: "solid",
-    color: "primary",
-    size: "md",
-    fullWidth: false,
-    isDisabled: false,
-    isRequired: false
-  },
   compoundVariants: [
     {
-      isDisabled: true,
-      isRequired: true,
+      color: "primary",
+      isSelected: true,
       class: {
-        label: "after:text-danger-light"
+        option: "bg-primary-soft text-primary-main"
+      }
+    },
+    {
+      color: "secondary",
+      isSelected: true,
+      class: {
+        option: "bg-secondary-soft text-secondary-main"
       }
     }
-  ]
+  ],
+  defaultVariants: {
+    color: "primary",
+    size: "md",
+    direction: "vertical",
+    disabled: false,
+    readonly: false
+  }
 });
 
 // src/components/chip/chip.tsx
@@ -8563,107 +8668,26 @@ var tooltipStyle = tv({
 var import_react25 = 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 Modal = (0, import_react25.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]
-  );
+  } = localProps;
+  const slots = (0, import_react25.useMemo)(() => modal(variantProps), [variantProps]);
   (0, import_react25.useEffect)(() => {
-    if (isOpen) {
-      document.body.classList.add("overflow-hidden");
-    } else {
-      document.body.classList.remove("overflow-hidden");
-    }
+    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 () => {
@@ -8671,82 +8695,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_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(backdrop_default, { open: true }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: slots.modalWrapper({ class: classNames == null ? void 0 : classNames.modalWrapper }), children: [
+        showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          Icon_default,
+          {
+            size: "xl",
+            name: "close",
+            className: slots.closeIcon({ class: classNames == null ? void 0 : classNames.closeIcon }),
+            onClick: onCancel
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: slots.title({ class: classNames == null ? void 0 : classNames.title }), children: title }),
+          typeof content === "string" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: slots.content({ class: classNames == null ? void 0 : classNames.content }), children: content }) : content,
+          (cancelButtonText || confirmButtonText) && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: slots.footer({ class: classNames == null ? void 0 : classNames.footer }), children: [
+            cancelButtonText && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(button_default, { variant: "soft", color: "neutral", fullWidth: true, onClick: onCancel, children: cancelButtonText }),
+            confirmButtonText && /* @__PURE__ */ (0, import_jsx_runtime26.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: {
@@ -8998,37 +9023,52 @@ var import_react28 = require("react");
 var import_jsx_runtime29 = require("react/jsx-runtime");
 var Toast = (0, import_react28.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, toast.variantKeys);
-  const { width = 300, placement, classNames, showIcon = true, showCloseButton = true, onClose, ...toastProps } = props;
+  const {
+    title,
+    content,
+    width = 300,
+    placement,
+    classNames,
+    showIcon = true,
+    showCloseButton = true,
+    hasShadow = true,
+    disableAnimation,
+    onClose
+  } = { ...props, ...variantProps };
   const slots = (0, import_react28.useMemo)(() => toast({ ...variantProps }), [variantProps]);
   const toastRef = (0, import_react28.useRef)(null);
   (0, import_react28.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_runtime29.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_runtime29.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), 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: slots.title({ class: classNames == null ? void 0 : classNames.title }), children: title }),
+          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon_default, { name: "close", className: "cursor-pointer", onClick: onClose })
+        ] }),
+        content && /* @__PURE__ */ (0, import_jsx_runtime29.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;
@@ -9039,15 +9079,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",
@@ -9061,37 +9104,67 @@ 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
   }
 });
@@ -9152,54 +9225,42 @@ var ToastProvider = ({
   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 addToast = (0, import_react29.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_react29.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 })
-  };
+  const contextValue = addToast;
   (0, import_react29.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_runtime30.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)) })
   ] });
@@ -9936,6 +9997,79 @@ var dateTimePickerStyle = tv({
     }
   ]
 });
+
+// src/components/tree/tree.tsx
+var import_react34 = 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_runtime34 = require("react/jsx-runtime");
+var TreeNodeItem = (0, import_react34.forwardRef)(({ node, depth }, _ref) => {
+  var _a;
+  const [isOpen, setIsOpen] = (0, import_react34.useState)(false);
+  const slots = (0, import_react34.useMemo)(() => treeStyle(), []);
+  const toggleOpen = (0, import_react34.useCallback)(() => {
+    setIsOpen((prev) => !prev);
+  }, []);
+  const handleClick = () => {
+    var _a2;
+    toggleOpen();
+    (_a2 = node.onClick) == null ? void 0 : _a2.call(node);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: depth > 1 ? "ml-[30px]" : "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: slots.label(), onClick: handleClick, children: [
+      node.children && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        Icon_default,
+        {
+          name: "right-chevron",
+          className: `text-neutral-main transition-transform duration-150 ${isOpen ? "rotate-90" : "rotate-0"}`
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime34.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_runtime34.jsx)(TreeNodeItem, { node: child, depth: depth + 1 }, child.id)))
+  ] });
+});
+var Tree = (0, import_react34.forwardRef)(({ headerContent, group }, ref) => {
+  const { label, data, onClick } = group;
+  const slots = (0, import_react34.useMemo)(() => treeStyle(), []);
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: slots.base(), ref, children: [
+    headerContent && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { children: headerContent }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: slots.label(), onClick, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("img", { src: cogwheel_default, alt: "cogwheel", width: 25, height: 25 }),
+        label
+      ] }),
+      data.map((node) => /* @__PURE__ */ (0, import_jsx_runtime34.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,
@@ -9946,6 +10080,7 @@ var dateTimePickerStyle = tv({
   CheckBox,
   Chip,
   DateTimePicker,
+  FormTable,
   Icon,
   IconButton,
   Input,
@@ -9964,6 +10099,7 @@ var dateTimePickerStyle = tv({
   Toast,
   ToastProvider,
   Tooltip,
+  Tree,
   deepnoidUi,
   iconTemplate,
   tv,