@ceed/cds 1.14.0 → 1.15.0-next.10

package/dist/index.cjs

@@ -117,6 +117,7 @@ __export(index_exports, {
   Divider: () => Divider,
   Drawer: () => Drawer,
   Dropdown: () => import_joy14.Dropdown,
+  FilterableCheckboxGroup: () => FilterableCheckboxGroup,
   FormControl: () => FormControl,
   FormHelperText: () => FormHelperText,
   FormLabel: () => FormLabel,
@@ -3527,8 +3528,10 @@ TableBody.displayName = "TableBody";
 
 // src/components/Pagination/Pagination.tsx
 var import_react27 = __toESM(require("react"));
-var import_ChevronLeft2 = __toESM(require("@mui/icons-material/ChevronLeft"));
-var import_ChevronRight2 = __toESM(require("@mui/icons-material/ChevronRight"));
+var import_ChevronLeftRounded = __toESM(require("@mui/icons-material/ChevronLeftRounded"));
+var import_ChevronRightRounded = __toESM(require("@mui/icons-material/ChevronRightRounded"));
+var import_FirstPageRounded = __toESM(require("@mui/icons-material/FirstPageRounded"));
+var import_LastPageRounded = __toESM(require("@mui/icons-material/LastPageRounded"));
 var import_joy35 = require("@mui/joy");
 var PaginationButton = (0, import_joy35.styled)(Button_default, {
   name: "Pagination",
@@ -3587,6 +3590,7 @@ function Pagination(props) {
     onPageChange,
     rowCount,
     size = "md",
+    variant = "standard",
     ...innerProps
   } = props;
   const [paginationModel, setPaginationModel] = useControlledState(
@@ -3613,6 +3617,87 @@ function Pagination(props) {
       setPaginationModel({ ...paginationModel, page: lastPage });
     }
   }, [rowCount, paginationModel, lastPage, setPaginationModel]);
+  const pageOptions = Array.from({ length: lastPage }, (_, i) => ({
+    label: `${i + 1}`,
+    value: `${i + 1}`
+  }));
+  if (variant === "compact") {
+    return /* @__PURE__ */ import_react27.default.createElement(PaginationRoot, { ...innerProps }, /* @__PURE__ */ import_react27.default.createElement(PaginationContainer, { direction: "row", size, alignItems: "center" }, /* @__PURE__ */ import_react27.default.createElement(Stack_default, { direction: "row" }, /* @__PURE__ */ import_react27.default.createElement(
+      PaginationIconButton,
+      {
+        size,
+        variant: "plain",
+        color: "neutral",
+        onClick: () => handlePageChange(firstPage),
+        disabled: paginationModel.page === firstPage,
+        "aria-label": "First page"
+      },
+      /* @__PURE__ */ import_react27.default.createElement(import_FirstPageRounded.default, null)
+    ), /* @__PURE__ */ import_react27.default.createElement(
+      PaginationIconButton,
+      {
+        size,
+        variant: "plain",
+        color: "neutral",
+        onClick: () => handlePageChange(paginationModel.page - 1),
+        disabled: paginationModel.page === firstPage,
+        "aria-label": "Previous page"
+      },
+      /* @__PURE__ */ import_react27.default.createElement(import_ChevronLeftRounded.default, null)
+    )), /* @__PURE__ */ import_react27.default.createElement(
+      Autocomplete_default,
+      {
+        size,
+        value: `${paginationModel.page}`,
+        onChange: (event) => {
+          if (event.target.value) {
+            handlePageChange(parseInt(event.target.value, 10));
+          }
+        },
+        options: pageOptions,
+        sx: {
+          width: {
+            sm: "80px",
+            md: "100px",
+            lg: "120px"
+          }[size]
+        }
+      }
+    ), /* @__PURE__ */ import_react27.default.createElement(
+      Typography_default,
+      {
+        level: `body-${size}`,
+        sx: (theme) => ({
+          color: theme.palette.text.secondary,
+          fontWeight: 500
+        })
+      },
+      "/ ",
+      lastPage
+    ), /* @__PURE__ */ import_react27.default.createElement(Stack_default, { direction: "row" }, /* @__PURE__ */ import_react27.default.createElement(
+      PaginationIconButton,
+      {
+        size,
+        variant: "plain",
+        color: "neutral",
+        onClick: () => handlePageChange(paginationModel.page + 1),
+        disabled: paginationModel.page === lastPage,
+        "aria-label": "Next page"
+      },
+      /* @__PURE__ */ import_react27.default.createElement(import_ChevronRightRounded.default, null)
+    ), /* @__PURE__ */ import_react27.default.createElement(
+      PaginationIconButton,
+      {
+        size,
+        variant: "plain",
+        color: "neutral",
+        onClick: () => handlePageChange(lastPage),
+        disabled: paginationModel.page === lastPage,
+        "aria-label": "Last page"
+      },
+      /* @__PURE__ */ import_react27.default.createElement(import_LastPageRounded.default, null)
+    ))));
+  }
   return /* @__PURE__ */ import_react27.default.createElement(PaginationRoot, { ...innerProps }, /* @__PURE__ */ import_react27.default.createElement(PaginationContainer, { direction: "row", size, alignItems: "center" }, /* @__PURE__ */ import_react27.default.createElement(
     PaginationIconButton,
     {
@@ -3623,7 +3708,7 @@ function Pagination(props) {
       disabled: paginationModel.page === firstPage,
       "aria-label": "Previous page"
     },
-    /* @__PURE__ */ import_react27.default.createElement(import_ChevronLeft2.default, null)
+    /* @__PURE__ */ import_react27.default.createElement(import_ChevronLeftRounded.default, null)
   ), paginationModel.page !== firstPage && /* @__PURE__ */ import_react27.default.createElement(PaginationButton, { size, variant: "plain", color: "neutral", onClick: () => handlePageChange(firstPage) }, firstPage), isMoreBeforePages && /* @__PURE__ */ import_react27.default.createElement(
     PaginationButton,
     {
@@ -3634,7 +3719,7 @@ function Pagination(props) {
       "aria-label": "More previous pages"
     },
     "..."
-  ), beforePages.map((p) => /* @__PURE__ */ import_react27.default.createElement(PaginationButton, { key: p, size, variant: "plain", color: "neutral", onClick: () => handlePageChange(p) }, p)), /* @__PURE__ */ import_react27.default.createElement(PaginationButton, { active: "active", size, "aria-current": "page" }, paginationModel.page), afterPages.map((p) => /* @__PURE__ */ import_react27.default.createElement(PaginationButton, { key: p, size, variant: "plain", color: "neutral", onClick: () => handlePageChange(p) }, p)), isMoreAfterPages && /* @__PURE__ */ import_react27.default.createElement(
+  ), beforePages.map((p) => /* @__PURE__ */ import_react27.default.createElement(PaginationButton, { key: p, size, variant: "plain", color: "neutral", onClick: () => handlePageChange(p) }, p)), /* @__PURE__ */ import_react27.default.createElement(PaginationButton, { active: "true", size, "aria-current": "page" }, paginationModel.page), afterPages.map((p) => /* @__PURE__ */ import_react27.default.createElement(PaginationButton, { key: p, size, variant: "plain", color: "neutral", onClick: () => handlePageChange(p) }, p)), isMoreAfterPages && /* @__PURE__ */ import_react27.default.createElement(
     PaginationButton,
     {
       size,
@@ -3654,7 +3739,7 @@ function Pagination(props) {
       disabled: paginationModel.page === lastPage,
       "aria-label": "Next page"
     },
-    /* @__PURE__ */ import_react27.default.createElement(import_ChevronRight2.default, null)
+    /* @__PURE__ */ import_react27.default.createElement(import_ChevronRightRounded.default, null)
   )));
 }
 Pagination.displayName = "Pagination";
@@ -4497,11 +4582,248 @@ var InsetDrawer = (0, import_joy43.styled)(import_joy43.Drawer)(({ theme }) => (
   }
 }));
 
+// src/components/FilterableCheckboxGroup/FilterableCheckboxGroup.tsx
+var import_react34 = __toESM(require("react"));
+var import_Search = __toESM(require("@mui/icons-material/Search"));
+var import_react_virtual3 = require("@tanstack/react-virtual");
+function LabelWithTooltip(props) {
+  const { label, size } = props;
+  const labelContentRef = (0, import_react34.useRef)(null);
+  const [isOverflowing, setIsOverflowing] = (0, import_react34.useState)(false);
+  const labelContent = /* @__PURE__ */ import_react34.default.createElement(
+    "span",
+    {
+      ref: labelContentRef,
+      style: {
+        textOverflow: "ellipsis",
+        overflow: "hidden",
+        whiteSpace: "nowrap",
+        display: "block",
+        position: "relative",
+        zIndex: 1,
+        cursor: "pointer"
+      }
+    },
+    label
+  );
+  (0, import_react34.useEffect)(() => {
+    const element = labelContentRef.current;
+    if (element) {
+      setIsOverflowing(element.scrollWidth > element.clientWidth);
+    }
+  }, [label]);
+  if (isOverflowing) {
+    return /* @__PURE__ */ import_react34.default.createElement(Tooltip_default, { variant: "solid", size, title: label, placement: "bottom-start" }, labelContent);
+  }
+  return labelContent;
+}
+function FilterableCheckboxGroup(props) {
+  const {
+    value,
+    options,
+    label,
+    placeholder,
+    helperText,
+    size = "md",
+    required,
+    onChange,
+    maxHeight = 300,
+    disabled
+  } = props;
+  const [searchTerm, setSearchTerm] = (0, import_react34.useState)("");
+  const [sortedOptions, setSortedOptions] = (0, import_react34.useState)(options);
+  const [internalValue, setInternalValue] = useControlledState(
+    value,
+    value ?? [],
+    (0, import_react34.useCallback)((newValue) => onChange?.(newValue), [onChange])
+  );
+  const parentRef = (0, import_react34.useRef)(null);
+  const isInitialSortRef = (0, import_react34.useRef)(false);
+  const filteredOptions = (0, import_react34.useMemo)(() => {
+    if (!searchTerm) return sortedOptions;
+    return sortedOptions.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()));
+  }, [sortedOptions, searchTerm]);
+  const itemSize = (0, import_react34.useMemo)(() => {
+    switch (size) {
+      case "sm":
+        return 28;
+      case "md":
+        return 32;
+      case "lg":
+        return 36;
+    }
+  }, [size]);
+  const noOptionsFontSize = (0, import_react34.useMemo)(() => {
+    switch (size) {
+      case "sm":
+        return "14px";
+      case "md":
+        return "16px";
+      case "lg":
+        return "18px";
+    }
+  }, [size]);
+  const virtualizer = (0, import_react_virtual3.useVirtualizer)({
+    count: filteredOptions.length,
+    estimateSize: () => itemSize,
+    measureElement: (element) => element.clientHeight,
+    getScrollElement: () => parentRef.current,
+    overscan: 5
+  });
+  const items = virtualizer.getVirtualItems();
+  (0, import_react34.useEffect)(() => {
+    if (isInitialSortRef.current) return;
+    const initialValue = value ?? [];
+    const sorted = [...options].sort((a, b) => {
+      const aSelected = initialValue.includes(a.value);
+      const bSelected = initialValue.includes(b.value);
+      if (aSelected !== bSelected) {
+        return aSelected ? -1 : 1;
+      }
+      const aIsAlpha = /^[a-zA-Z]/.test(a.label);
+      const bIsAlpha = /^[a-zA-Z]/.test(b.label);
+      if (aIsAlpha !== bIsAlpha) {
+        return aIsAlpha ? -1 : 1;
+      }
+      return a.label.localeCompare(b.label);
+    });
+    setSortedOptions(sorted);
+    isInitialSortRef.current = true;
+  }, [options, value]);
+  (0, import_react34.useEffect)(() => {
+    virtualizer.measure();
+  }, [virtualizer, filteredOptions]);
+  const handleSearchChange = (0, import_react34.useCallback)((event) => {
+    setSearchTerm(event.target.value);
+  }, []);
+  const handleCheckboxChange = (0, import_react34.useCallback)(
+    (optionValue) => (event) => {
+      const checked = event.target.checked;
+      const newValue = checked ? [...internalValue, optionValue] : internalValue.filter((v) => v !== optionValue);
+      setInternalValue(newValue);
+    },
+    [internalValue, setInternalValue]
+  );
+  const handleSelectAll = (0, import_react34.useCallback)(
+    (event) => {
+      const checked = event.target.checked;
+      const enabledOptions = filteredOptions.filter((option) => !option.disabled);
+      const disabledSelectedValues = internalValue.filter(
+        (v) => filteredOptions.some((opt) => opt.value === v && opt.disabled)
+      );
+      if (checked) {
+        const enabledValues = enabledOptions.map((option) => option.value);
+        setInternalValue([...disabledSelectedValues, ...enabledValues]);
+      } else {
+        setInternalValue(disabledSelectedValues);
+      }
+    },
+    [filteredOptions, internalValue, setInternalValue]
+  );
+  const enabledFilteredOptions = (0, import_react34.useMemo)(() => filteredOptions.filter((option) => !option.disabled), [filteredOptions]);
+  const isAllSelected = enabledFilteredOptions.length > 0 && enabledFilteredOptions.every((option) => internalValue.includes(option.value));
+  const isIndeterminate = !isAllSelected && enabledFilteredOptions.some((option) => internalValue.includes(option.value));
+  return /* @__PURE__ */ import_react34.default.createElement("div", { style: { width: "100%" } }, /* @__PURE__ */ import_react34.default.createElement(
+    Input_default,
+    {
+      label,
+      helperText,
+      required,
+      variant: "outlined",
+      color: "neutral",
+      placeholder,
+      value: searchTerm,
+      onChange: handleSearchChange,
+      size,
+      disabled,
+      endDecorator: /* @__PURE__ */ import_react34.default.createElement(import_Search.default, null)
+    }
+  ), filteredOptions.length === 0 ? /* @__PURE__ */ import_react34.default.createElement(
+    Stack_default,
+    {
+      sx: (theme) => ({
+        padding: "20px 12px",
+        justifyContent: "center",
+        alignItems: "center",
+        fontSize: noOptionsFontSize,
+        color: theme.palette.neutral.softDisabledColor
+      })
+    },
+    "No options found."
+  ) : /* @__PURE__ */ import_react34.default.createElement(
+    "div",
+    {
+      ref: parentRef,
+      style: {
+        overflow: "auto",
+        maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight,
+        padding: "8px 0px",
+        marginTop: "8px"
+      }
+    },
+    !searchTerm && /* @__PURE__ */ import_react34.default.createElement(
+      Checkbox_default,
+      {
+        label: "Select all",
+        checked: isAllSelected,
+        indeterminate: isIndeterminate,
+        onChange: handleSelectAll,
+        size,
+        disabled,
+        slotProps: {
+          action: {
+            sx: { top: 0, left: 0, bottom: 0, right: 0 }
+          }
+        },
+        sx: { width: "100%", height: itemSize }
+      }
+    ),
+    /* @__PURE__ */ import_react34.default.createElement(
+      Stack_default,
+      {
+        sx: {
+          height: `${virtualizer.getTotalSize()}px`,
+          position: "relative"
+        }
+      },
+      items.map((virtualRow) => {
+        const option = filteredOptions[virtualRow.index];
+        return /* @__PURE__ */ import_react34.default.createElement(
+          Checkbox_default,
+          {
+            key: virtualRow.key,
+            label: /* @__PURE__ */ import_react34.default.createElement(LabelWithTooltip, { label: option.label, size }),
+            checked: internalValue.includes(option.value),
+            onChange: handleCheckboxChange(option.value),
+            size,
+            disabled: disabled || option.disabled,
+            slotProps: {
+              action: {
+                sx: { top: 0, left: 0, bottom: 0, right: 0 }
+                // NOTE: 불필요한 좌우 스크롤 방지
+              }
+            },
+            sx: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: `${virtualRow.size}px`,
+              transform: `translateY(${virtualRow.start}px)`
+            }
+          }
+        );
+      })
+    )
+  ));
+}
+FilterableCheckboxGroup.displayName = "FilterableCheckboxGroup";
+
 // src/components/Grid/Grid.tsx
 var import_joy44 = require("@mui/joy");
 
 // src/components/IconMenuButton/IconMenuButton.tsx
-var import_react34 = __toESM(require("react"));
+var import_react35 = __toESM(require("react"));
 var import_joy45 = require("@mui/joy");
 function IconMenuButton(props) {
   const {
@@ -4515,7 +4837,7 @@ function IconMenuButton(props) {
     placement = "bottom"
   } = props;
   if (!items.length) {
-    return /* @__PURE__ */ import_react34.default.createElement(
+    return /* @__PURE__ */ import_react35.default.createElement(
       import_joy45.IconButton,
       {
         component: props.buttonComponent ?? "button",
@@ -4529,7 +4851,7 @@ function IconMenuButton(props) {
       icon
     );
   }
-  return /* @__PURE__ */ import_react34.default.createElement(Dropdown_default, null, /* @__PURE__ */ import_react34.default.createElement(
+  return /* @__PURE__ */ import_react35.default.createElement(Dropdown_default, null, /* @__PURE__ */ import_react35.default.createElement(
     import_joy45.MenuButton,
     {
       slots: { root: import_joy45.IconButton },
@@ -4546,19 +4868,19 @@ function IconMenuButton(props) {
       }
     },
     icon
-  ), /* @__PURE__ */ import_react34.default.createElement(Menu, { placement, size }, items.map((i) => /* @__PURE__ */ import_react34.default.createElement(MenuItem, { key: i.text, component: i.component, ...i.componentProps ?? {} }, i.text))));
+  ), /* @__PURE__ */ import_react35.default.createElement(Menu, { placement, size }, items.map((i) => /* @__PURE__ */ import_react35.default.createElement(MenuItem, { key: i.text, component: i.component, ...i.componentProps ?? {} }, i.text))));
 }
 IconMenuButton.displayName = "IconMenuButton";
 
 // src/components/Markdown/Markdown.tsx
-var import_react35 = __toESM(require("react"));
+var import_react36 = __toESM(require("react"));
 var import_joy46 = require("@mui/joy");
 var import_joy47 = require("@mui/joy");
 var import_remark_gfm = __toESM(require("remark-gfm"));
-var LazyReactMarkdown = (0, import_react35.lazy)(() => import("react-markdown"));
+var LazyReactMarkdown = (0, import_react36.lazy)(() => import("react-markdown"));
 var Markdown = (props) => {
-  const [rehypeAccent2, setRehypeAccent] = (0, import_react35.useState)(null);
-  (0, import_react35.useEffect)(() => {
+  const [rehypeAccent2, setRehypeAccent] = (0, import_react36.useState)(null);
+  (0, import_react36.useEffect)(() => {
     const loadRehypeAccent = async () => {
       const module2 = await Promise.resolve().then(() => (init_rehype_accent(), rehype_accent_exports));
       setRehypeAccent(() => module2.rehypeAccent);
@@ -4580,12 +4902,12 @@ var Markdown = (props) => {
   if (!rehypeAccent2) {
     return null;
   }
-  return /* @__PURE__ */ import_react35.default.createElement(Typography, { component: "div", color, textColor, level: defaultLevel, ...innerProps }, /* @__PURE__ */ import_react35.default.createElement(
-    import_react35.Suspense,
+  return /* @__PURE__ */ import_react36.default.createElement(Typography, { component: "div", color, textColor, level: defaultLevel, ...innerProps }, /* @__PURE__ */ import_react36.default.createElement(
+    import_react36.Suspense,
     {
-      fallback: fallback || /* @__PURE__ */ import_react35.default.createElement(Typography, null, /* @__PURE__ */ import_react35.default.createElement(import_joy46.Skeleton, null, content || ""))
+      fallback: fallback || /* @__PURE__ */ import_react36.default.createElement(Typography, null, /* @__PURE__ */ import_react36.default.createElement(import_joy46.Skeleton, null, content || ""))
     },
-    /* @__PURE__ */ import_react35.default.createElement(
+    /* @__PURE__ */ import_react36.default.createElement(
       LazyReactMarkdown,
       {
         ...markdownOptions,
@@ -4593,15 +4915,15 @@ var Markdown = (props) => {
         rehypePlugins: [[rehypeAccent2, { accentColor }]],
         remarkPlugins: [import_remark_gfm.default],
         components: {
-          h1: ({ children }) => /* @__PURE__ */ import_react35.default.createElement(Typography, { color, textColor, level: "h1" }, children),
-          h2: ({ children }) => /* @__PURE__ */ import_react35.default.createElement(Typography, { color, textColor, level: "h2" }, children),
-          h3: ({ children }) => /* @__PURE__ */ import_react35.default.createElement(Typography, { color, textColor, level: "h3" }, children),
-          h4: ({ children }) => /* @__PURE__ */ import_react35.default.createElement(Typography, { color, textColor, level: "h4" }, children),
-          p: ({ children, node }) => /* @__PURE__ */ import_react35.default.createElement(Typography, { color, textColor, level: defaultLevel, ...node?.properties }, children),
-          a: ({ children, href }) => /* @__PURE__ */ import_react35.default.createElement(import_joy47.Link, { href, target: defaultLinkAction }, children),
-          hr: () => /* @__PURE__ */ import_react35.default.createElement(Divider, null),
-          b: ({ children }) => /* @__PURE__ */ import_react35.default.createElement(Typography, { fontWeight: boldFontWeight }, children),
-          strong: ({ children }) => /* @__PURE__ */ import_react35.default.createElement(Typography, { fontWeight: boldFontWeight }, children),
+          h1: ({ children }) => /* @__PURE__ */ import_react36.default.createElement(Typography, { color, textColor, level: "h1" }, children),
+          h2: ({ children }) => /* @__PURE__ */ import_react36.default.createElement(Typography, { color, textColor, level: "h2" }, children),
+          h3: ({ children }) => /* @__PURE__ */ import_react36.default.createElement(Typography, { color, textColor, level: "h3" }, children),
+          h4: ({ children }) => /* @__PURE__ */ import_react36.default.createElement(Typography, { color, textColor, level: "h4" }, children),
+          p: ({ children, node }) => /* @__PURE__ */ import_react36.default.createElement(Typography, { color, textColor, level: defaultLevel, ...node?.properties }, children),
+          a: ({ children, href }) => /* @__PURE__ */ import_react36.default.createElement(import_joy47.Link, { href, target: defaultLinkAction }, children),
+          hr: () => /* @__PURE__ */ import_react36.default.createElement(Divider, null),
+          b: ({ children }) => /* @__PURE__ */ import_react36.default.createElement(Typography, { fontWeight: boldFontWeight }, children),
+          strong: ({ children }) => /* @__PURE__ */ import_react36.default.createElement(Typography, { fontWeight: boldFontWeight }, children),
           ...markdownOptions?.components
         }
       }
@@ -4611,7 +4933,7 @@ var Markdown = (props) => {
 Markdown.displayName = "Markdown";
 
 // src/components/MenuButton/MenuButton.tsx
-var import_react36 = __toESM(require("react"));
+var import_react37 = __toESM(require("react"));
 var import_joy48 = require("@mui/joy");
 var import_ExpandMore = __toESM(require("@mui/icons-material/ExpandMore"));
 function MenuButton(props) {
@@ -4629,7 +4951,7 @@ function MenuButton(props) {
     placement = "bottom"
   } = props;
   if (!items.length) {
-    return /* @__PURE__ */ import_react36.default.createElement(
+    return /* @__PURE__ */ import_react37.default.createElement(
       import_joy48.Button,
       {
         component: props.buttonComponent ?? "button",
@@ -4640,12 +4962,12 @@ function MenuButton(props) {
         loading,
         startDecorator,
         ...props.buttonComponentProps ?? {},
-        endDecorator: showIcon ? /* @__PURE__ */ import_react36.default.createElement(import_react36.default.Fragment, null, endDecorator, /* @__PURE__ */ import_react36.default.createElement(import_ExpandMore.default, null)) : /* @__PURE__ */ import_react36.default.createElement(import_react36.default.Fragment, null, endDecorator)
+        endDecorator: showIcon ? /* @__PURE__ */ import_react37.default.createElement(import_react37.default.Fragment, null, endDecorator, /* @__PURE__ */ import_react37.default.createElement(import_ExpandMore.default, null)) : /* @__PURE__ */ import_react37.default.createElement(import_react37.default.Fragment, null, endDecorator)
       },
       buttonText
     );
   }
-  return /* @__PURE__ */ import_react36.default.createElement(Dropdown_default, null, /* @__PURE__ */ import_react36.default.createElement(
+  return /* @__PURE__ */ import_react37.default.createElement(Dropdown_default, null, /* @__PURE__ */ import_react37.default.createElement(
     import_joy48.MenuButton,
     {
       component: props.buttonComponent ?? "button",
@@ -4656,15 +4978,15 @@ function MenuButton(props) {
       loading,
       startDecorator,
       ...props.buttonComponentProps ?? {},
-      endDecorator: showIcon ? /* @__PURE__ */ import_react36.default.createElement(import_react36.default.Fragment, null, endDecorator, /* @__PURE__ */ import_react36.default.createElement(import_ExpandMore.default, null)) : /* @__PURE__ */ import_react36.default.createElement(import_react36.default.Fragment, null, endDecorator)
+      endDecorator: showIcon ? /* @__PURE__ */ import_react37.default.createElement(import_react37.default.Fragment, null, endDecorator, /* @__PURE__ */ import_react37.default.createElement(import_ExpandMore.default, null)) : /* @__PURE__ */ import_react37.default.createElement(import_react37.default.Fragment, null, endDecorator)
     },
     buttonText
-  ), /* @__PURE__ */ import_react36.default.createElement(Menu, { placement, size }, items.map((i) => /* @__PURE__ */ import_react36.default.createElement(MenuItem, { key: i.text, component: i.component, ...i.componentProps ?? {} }, i.text))));
+  ), /* @__PURE__ */ import_react37.default.createElement(Menu, { placement, size }, items.map((i) => /* @__PURE__ */ import_react37.default.createElement(MenuItem, { key: i.text, component: i.component, ...i.componentProps ?? {} }, i.text))));
 }
 MenuButton.displayName = "MenuButton";
 
 // src/components/MonthPicker/MonthPicker.tsx
-var import_react37 = __toESM(require("react"));
+var import_react38 = __toESM(require("react"));
 var import_CalendarToday3 = __toESM(require("@mui/icons-material/CalendarToday"));
 var import_joy49 = require("@mui/joy");
 var import_base4 = require("@mui/base");
@@ -4719,7 +5041,7 @@ function parseDate3(dateString, format) {
   const result = new Date(year, month, day);
   return result;
 }
-var MonthPicker = (0, import_react37.forwardRef)((inProps, ref) => {
+var MonthPicker = (0, import_react38.forwardRef)((inProps, ref) => {
   const props = (0, import_joy49.useThemeProps)({ props: inProps, name: "MonthPicker" });
   const {
     onChange,
@@ -4746,14 +5068,14 @@ var MonthPicker = (0, import_react37.forwardRef)((inProps, ref) => {
     locale,
     ...innerProps
   } = props;
-  const innerRef = (0, import_react37.useRef)(null);
-  const buttonRef = (0, import_react37.useRef)(null);
+  const innerRef = (0, import_react38.useRef)(null);
+  const buttonRef = (0, import_react38.useRef)(null);
   const [value, setValue, isControlled] = useControlledState(
     props.value,
     props.defaultValue || "",
-    (0, import_react37.useCallback)((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
+    (0, import_react38.useCallback)((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
   );
-  const getFormattedDisplayValue = (0, import_react37.useCallback)(
+  const getFormattedDisplayValue = (0, import_react38.useCallback)(
     (inputValue) => {
       if (!inputValue) return "";
       try {
@@ -4764,19 +5086,19 @@ var MonthPicker = (0, import_react37.forwardRef)((inProps, ref) => {
     },
     [format, displayFormat, locale]
   );
-  const [displayValue, setDisplayValue] = (0, import_react37.useState)(() => getFormattedDisplayValue(value));
-  const [anchorEl, setAnchorEl] = (0, import_react37.useState)(null);
+  const [displayValue, setDisplayValue] = (0, import_react38.useState)(() => getFormattedDisplayValue(value));
+  const [anchorEl, setAnchorEl] = (0, import_react38.useState)(null);
   const open = Boolean(anchorEl);
-  (0, import_react37.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     if (!anchorEl) {
       innerRef.current?.blur();
     }
   }, [anchorEl, innerRef]);
-  (0, import_react37.useImperativeHandle)(ref, () => innerRef.current, [innerRef]);
-  (0, import_react37.useEffect)(() => {
+  (0, import_react38.useImperativeHandle)(ref, () => innerRef.current, [innerRef]);
+  (0, import_react38.useEffect)(() => {
     setDisplayValue(getFormattedDisplayValue(value));
   }, [value, getFormattedDisplayValue]);
-  const handleChange = (0, import_react37.useCallback)(
+  const handleChange = (0, import_react38.useCallback)(
     (event) => {
       const newValue = event.target.value;
       setValue(newValue);
@@ -4786,21 +5108,21 @@ var MonthPicker = (0, import_react37.forwardRef)((inProps, ref) => {
     },
     [setValue, getFormattedDisplayValue, isControlled]
   );
-  const handleCalendarToggle = (0, import_react37.useCallback)(
+  const handleCalendarToggle = (0, import_react38.useCallback)(
     (event) => {
       setAnchorEl(anchorEl ? null : event.currentTarget);
       innerRef.current?.focus();
     },
     [anchorEl, setAnchorEl, innerRef]
   );
-  const handleInputMouseDown = (0, import_react37.useCallback)(
+  const handleInputMouseDown = (0, import_react38.useCallback)(
     (event) => {
       event.preventDefault();
       buttonRef.current?.focus();
     },
     [buttonRef]
   );
-  return /* @__PURE__ */ import_react37.default.createElement(MonthPickerRoot, null, /* @__PURE__ */ import_react37.default.createElement(import_base4.FocusTrap, { open: true }, /* @__PURE__ */ import_react37.default.createElement(import_react37.default.Fragment, null, /* @__PURE__ */ import_react37.default.createElement(
+  return /* @__PURE__ */ import_react38.default.createElement(MonthPickerRoot, null, /* @__PURE__ */ import_react38.default.createElement(import_base4.FocusTrap, { open: true }, /* @__PURE__ */ import_react38.default.createElement(import_react38.default.Fragment, null, /* @__PURE__ */ import_react38.default.createElement(
     Input_default,
     {
       ...innerProps,
@@ -4830,7 +5152,7 @@ var MonthPicker = (0, import_react37.forwardRef)((inProps, ref) => {
         // NOTE: placeholder char 를 텍스트로 표시하므로 동일한 너비를 가지는 mono font 를 사용해야 이질감이 없다.
         fontFamily: "monospace"
       },
-      endDecorator: /* @__PURE__ */ import_react37.default.createElement(
+      endDecorator: /* @__PURE__ */ import_react38.default.createElement(
         IconButton_default,
         {
           ref: buttonRef,
@@ -4842,12 +5164,12 @@ var MonthPicker = (0, import_react37.forwardRef)((inProps, ref) => {
           "aria-expanded": open,
           disabled
         },
-        /* @__PURE__ */ import_react37.default.createElement(import_CalendarToday3.default, null)
+        /* @__PURE__ */ import_react38.default.createElement(import_CalendarToday3.default, null)
       ),
       label,
       helperText
     }
-  ), open && /* @__PURE__ */ import_react37.default.createElement(import_base4.ClickAwayListener, { onClickAway: () => setAnchorEl(null) }, /* @__PURE__ */ import_react37.default.createElement(
+  ), open && /* @__PURE__ */ import_react38.default.createElement(import_base4.ClickAwayListener, { onClickAway: () => setAnchorEl(null) }, /* @__PURE__ */ import_react38.default.createElement(
     StyledPopper3,
     {
       id: "month-picker-popper",
@@ -4866,7 +5188,7 @@ var MonthPicker = (0, import_react37.forwardRef)((inProps, ref) => {
       "aria-label": "Calendar Tooltip",
       "aria-expanded": open
     },
-    /* @__PURE__ */ import_react37.default.createElement(CalendarSheet3, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ import_react37.default.createElement(
+    /* @__PURE__ */ import_react38.default.createElement(CalendarSheet3, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ import_react38.default.createElement(
       Calendar_default,
       {
         view: "month",
@@ -4887,14 +5209,14 @@ var MonthPicker = (0, import_react37.forwardRef)((inProps, ref) => {
         disablePast,
         locale
       }
-    ), /* @__PURE__ */ import_react37.default.createElement(
+    ), /* @__PURE__ */ import_react38.default.createElement(
       DialogActions_default,
       {
         sx: {
           p: 1
         }
       },
-      /* @__PURE__ */ import_react37.default.createElement(
+      /* @__PURE__ */ import_react38.default.createElement(
         Button_default,
         {
           size,
@@ -4917,7 +5239,7 @@ var MonthPicker = (0, import_react37.forwardRef)((inProps, ref) => {
 });
 
 // src/components/MonthRangePicker/MonthRangePicker.tsx
-var import_react38 = __toESM(require("react"));
+var import_react39 = __toESM(require("react"));
 var import_react_imask3 = require("react-imask");
 var import_CalendarToday4 = __toESM(require("@mui/icons-material/CalendarToday"));
 var import_joy50 = require("@mui/joy");
@@ -4975,9 +5297,9 @@ var parseDates2 = (str) => {
 var formatToPattern3 = (format) => {
   return `${format} - ${format}`.replace(/YYYY/g, "Y").replace(/MM/g, "m").replace(/[^YMm\s]/g, (match) => `${match}\``);
 };
-var TextMaskAdapter7 = import_react38.default.forwardRef(function TextMaskAdapter8(props, ref) {
+var TextMaskAdapter7 = import_react39.default.forwardRef(function TextMaskAdapter8(props, ref) {
   const { onChange, format, ...other } = props;
-  return /* @__PURE__ */ import_react38.default.createElement(
+  return /* @__PURE__ */ import_react39.default.createElement(
     import_react_imask3.IMaskInput,
     {
       ...other,
@@ -5005,7 +5327,7 @@ var TextMaskAdapter7 = import_react38.default.forwardRef(function TextMaskAdapte
     }
   );
 });
-var MonthRangePicker = (0, import_react38.forwardRef)((inProps, ref) => {
+var MonthRangePicker = (0, import_react39.forwardRef)((inProps, ref) => {
   const props = (0, import_joy50.useThemeProps)({ props: inProps, name: "MonthRangePicker" });
   const {
     onChange,
@@ -5025,35 +5347,35 @@ var MonthRangePicker = (0, import_react38.forwardRef)((inProps, ref) => {
     size,
     ...innerProps
   } = props;
-  const innerRef = (0, import_react38.useRef)(null);
+  const innerRef = (0, import_react39.useRef)(null);
   const [value, setValue] = useControlledState(
     props.value,
     props.defaultValue || "",
-    (0, import_react38.useCallback)((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
+    (0, import_react39.useCallback)((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
   );
-  const [anchorEl, setAnchorEl] = (0, import_react38.useState)(null);
+  const [anchorEl, setAnchorEl] = (0, import_react39.useState)(null);
   const open = Boolean(anchorEl);
-  const calendarValue = (0, import_react38.useMemo)(() => value ? parseDates2(value) : void 0, [value]);
-  (0, import_react38.useEffect)(() => {
+  const calendarValue = (0, import_react39.useMemo)(() => value ? parseDates2(value) : void 0, [value]);
+  (0, import_react39.useEffect)(() => {
     if (!anchorEl) {
       innerRef.current?.blur();
     }
   }, [anchorEl, innerRef]);
-  (0, import_react38.useImperativeHandle)(ref, () => innerRef.current, [innerRef]);
-  const handleChange = (0, import_react38.useCallback)(
+  (0, import_react39.useImperativeHandle)(ref, () => innerRef.current, [innerRef]);
+  const handleChange = (0, import_react39.useCallback)(
     (event) => {
       setValue(event.target.value);
     },
     [setValue]
   );
-  const handleCalendarToggle = (0, import_react38.useCallback)(
+  const handleCalendarToggle = (0, import_react39.useCallback)(
     (event) => {
       setAnchorEl(anchorEl ? null : event.currentTarget);
       innerRef.current?.focus();
     },
     [anchorEl, setAnchorEl, innerRef]
   );
-  const handleCalendarChange = (0, import_react38.useCallback)(
+  const handleCalendarChange = (0, import_react39.useCallback)(
     ([date1, date2]) => {
       if (!date1 || !date2) return;
       setValue(formatValueString4([date1, date2], format));
@@ -5061,7 +5383,7 @@ var MonthRangePicker = (0, import_react38.forwardRef)((inProps, ref) => {
     },
     [setValue, setAnchorEl, format]
   );
-  return /* @__PURE__ */ import_react38.default.createElement(MonthRangePickerRoot, null, /* @__PURE__ */ import_react38.default.createElement(import_base5.FocusTrap, { open: true }, /* @__PURE__ */ import_react38.default.createElement(import_react38.default.Fragment, null, /* @__PURE__ */ import_react38.default.createElement(
+  return /* @__PURE__ */ import_react39.default.createElement(MonthRangePickerRoot, null, /* @__PURE__ */ import_react39.default.createElement(import_base5.FocusTrap, { open: true }, /* @__PURE__ */ import_react39.default.createElement(import_react39.default.Fragment, null, /* @__PURE__ */ import_react39.default.createElement(
     Input_default,
     {
       ...innerProps,
@@ -5083,7 +5405,7 @@ var MonthRangePicker = (0, import_react38.forwardRef)((inProps, ref) => {
         // NOTE: placeholder char 를 텍스트로 표시하므로 동일한 너비를 가지는 mono font 를 사용해야 이질감이 없다.
         fontFamily: "monospace"
       },
-      endDecorator: /* @__PURE__ */ import_react38.default.createElement(
+      endDecorator: /* @__PURE__ */ import_react39.default.createElement(
         IconButton_default,
         {
           variant: "plain",
@@ -5093,12 +5415,12 @@ var MonthRangePicker = (0, import_react38.forwardRef)((inProps, ref) => {
           "aria-haspopup": "dialog",
           "aria-expanded": open
         },
-        /* @__PURE__ */ import_react38.default.createElement(import_CalendarToday4.default, null)
+        /* @__PURE__ */ import_react39.default.createElement(import_CalendarToday4.default, null)
       ),
       label,
       helperText
     }
-  ), open && /* @__PURE__ */ import_react38.default.createElement(import_base5.ClickAwayListener, { onClickAway: () => setAnchorEl(null) }, /* @__PURE__ */ import_react38.default.createElement(
+  ), open && /* @__PURE__ */ import_react39.default.createElement(import_base5.ClickAwayListener, { onClickAway: () => setAnchorEl(null) }, /* @__PURE__ */ import_react39.default.createElement(
     StyledPopper4,
     {
       id: "month-range-picker-popper",
@@ -5117,7 +5439,7 @@ var MonthRangePicker = (0, import_react38.forwardRef)((inProps, ref) => {
       "aria-label": "Calendar Tooltip",
       "aria-expanded": open
     },
-    /* @__PURE__ */ import_react38.default.createElement(CalendarSheet4, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ import_react38.default.createElement(
+    /* @__PURE__ */ import_react39.default.createElement(CalendarSheet4, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ import_react39.default.createElement(
       Calendar_default,
       {
         view: "month",
@@ -5130,14 +5452,14 @@ var MonthRangePicker = (0, import_react38.forwardRef)((inProps, ref) => {
         disableFuture,
         disablePast
       }
-    ), /* @__PURE__ */ import_react38.default.createElement(
+    ), /* @__PURE__ */ import_react39.default.createElement(
       DialogActions_default,
       {
         sx: {
           p: 1
         }
       },
-      /* @__PURE__ */ import_react38.default.createElement(
+      /* @__PURE__ */ import_react39.default.createElement(
         Button_default,
         {
           size,
@@ -5156,7 +5478,7 @@ var MonthRangePicker = (0, import_react38.forwardRef)((inProps, ref) => {
 MonthRangePicker.displayName = "MonthRangePicker";
 
 // src/components/NavigationGroup/NavigationGroup.tsx
-var import_react39 = __toESM(require("react"));
+var import_react40 = __toESM(require("react"));
 var import_joy51 = require("@mui/joy");
 var AccordionSummary2 = (0, import_joy51.styled)(import_joy51.AccordionSummary, {
   name: "NavigationGroup",
@@ -5180,11 +5502,11 @@ var AccordionDetails2 = (0, import_joy51.styled)(import_joy51.AccordionDetails,
 }));
 function NavigationGroup(props) {
   const { title, children, startDecorator, level, ...rest } = props;
-  return /* @__PURE__ */ import_react39.default.createElement(import_joy51.Accordion, { ...rest }, /* @__PURE__ */ import_react39.default.createElement(AccordionSummary2, { useIcon: !!startDecorator, level }, /* @__PURE__ */ import_react39.default.createElement(import_joy51.Stack, { direction: "row", gap: 4 }, startDecorator, title)), /* @__PURE__ */ import_react39.default.createElement(AccordionDetails2, null, children));
+  return /* @__PURE__ */ import_react40.default.createElement(import_joy51.Accordion, { ...rest }, /* @__PURE__ */ import_react40.default.createElement(AccordionSummary2, { useIcon: !!startDecorator, level }, /* @__PURE__ */ import_react40.default.createElement(import_joy51.Stack, { direction: "row", gap: 4 }, startDecorator, title)), /* @__PURE__ */ import_react40.default.createElement(AccordionDetails2, null, children));
 }
 
 // src/components/NavigationItem/NavigationItem.tsx
-var import_react40 = __toESM(require("react"));
+var import_react41 = __toESM(require("react"));
 var import_joy52 = require("@mui/joy");
 var ListItemButton = (0, import_joy52.styled)(import_joy52.ListItemButton, {
   name: "NavigationItem",
@@ -5213,7 +5535,7 @@ function NavigationItem(props) {
   const handleClick = () => {
     onClick?.(id);
   };
-  return /* @__PURE__ */ import_react40.default.createElement(import_joy52.ListItem, { ...rest }, /* @__PURE__ */ import_react40.default.createElement(
+  return /* @__PURE__ */ import_react41.default.createElement(import_joy52.ListItem, { ...rest }, /* @__PURE__ */ import_react41.default.createElement(
     ListItemButton,
     {
       level,
@@ -5222,21 +5544,21 @@ function NavigationItem(props) {
       "aria-current": selected,
       onClick: handleClick
     },
-    startDecorator && /* @__PURE__ */ import_react40.default.createElement(import_joy52.ListItemDecorator, null, startDecorator),
+    startDecorator && /* @__PURE__ */ import_react41.default.createElement(import_joy52.ListItemDecorator, null, startDecorator),
     children
   ));
 }
 
 // src/components/Navigator/Navigator.tsx
-var import_react41 = __toESM(require("react"));
+var import_react42 = __toESM(require("react"));
 function Navigator(props) {
   const { items, level = 0, onSelect } = props;
   const handleItemClick = (id) => {
     onSelect?.(id);
   };
-  return /* @__PURE__ */ import_react41.default.createElement("div", null, items.map((item, index) => {
+  return /* @__PURE__ */ import_react42.default.createElement("div", null, items.map((item, index) => {
     if (item.type === "item") {
-      return /* @__PURE__ */ import_react41.default.createElement(
+      return /* @__PURE__ */ import_react42.default.createElement(
         NavigationItem,
         {
           key: item.id,
@@ -5249,7 +5571,7 @@ function Navigator(props) {
         item.title
       );
     } else if (item.type === "group") {
-      return /* @__PURE__ */ import_react41.default.createElement(
+      return /* @__PURE__ */ import_react42.default.createElement(
         NavigationGroup,
         {
           key: `${item.title}-${index}`,
@@ -5267,16 +5589,16 @@ function Navigator(props) {
 Navigator.displayName = "Navigator";
 
 // src/components/PercentageInput/PercentageInput.tsx
-var import_react42 = __toESM(require("react"));
+var import_react43 = __toESM(require("react"));
 var import_react_number_format2 = require("react-number-format");
 var import_joy53 = require("@mui/joy");
 var padDecimal = (value, decimalScale) => {
   const [integer, decimal = ""] = `${value}`.split(".");
   return Number(`${integer}${decimal.padEnd(decimalScale, "0")}`);
 };
-var TextMaskAdapter9 = import_react42.default.forwardRef(function TextMaskAdapter10(props, ref) {
+var TextMaskAdapter9 = import_react43.default.forwardRef(function TextMaskAdapter10(props, ref) {
   const { onChange, min, max, ...innerProps } = props;
-  return /* @__PURE__ */ import_react42.default.createElement(
+  return /* @__PURE__ */ import_react43.default.createElement(
     import_react_number_format2.NumericFormat,
     {
       ...innerProps,
@@ -5301,7 +5623,7 @@ var PercentageInputRoot = (0, import_joy53.styled)(Input_default, {
   slot: "Root",
   overridesResolver: (props, styles) => styles.root
 })({});
-var PercentageInput = import_react42.default.forwardRef(
+var PercentageInput = import_react43.default.forwardRef(
   function PercentageInput2(inProps, ref) {
     const props = (0, import_joy53.useThemeProps)({ props: inProps, name: "PercentageInput" });
     const {
@@ -5324,18 +5646,18 @@ var PercentageInput = import_react42.default.forwardRef(
     const [_value, setValue] = useControlledState(
       props.value,
       props.defaultValue,
-      (0, import_react42.useCallback)((value2) => onChange?.({ target: { name, value: value2 } }), [onChange, name])
+      (0, import_react43.useCallback)((value2) => onChange?.({ target: { name, value: value2 } }), [onChange, name])
     );
-    const [internalError, setInternalError] = (0, import_react42.useState)(
+    const [internalError, setInternalError] = (0, import_react43.useState)(
       max && _value && _value > max || min && _value && _value < min
     );
-    const value = (0, import_react42.useMemo)(() => {
+    const value = (0, import_react43.useMemo)(() => {
       if (_value && useMinorUnit) {
         return _value / Math.pow(10, maxDecimalScale);
       }
       return _value;
     }, [_value, useMinorUnit, maxDecimalScale]);
-    const handleChange = (0, import_react42.useCallback)(
+    const handleChange = (0, import_react43.useCallback)(
       (event) => {
         if (event.target.value === "") {
           setValue(void 0);
@@ -5352,7 +5674,7 @@ var PercentageInput = import_react42.default.forwardRef(
       },
       [setValue, useMinorUnit, maxDecimalScale, min, max]
     );
-    return /* @__PURE__ */ import_react42.default.createElement(
+    return /* @__PURE__ */ import_react43.default.createElement(
       PercentageInputRoot,
       {
         ...innerProps,
@@ -5393,15 +5715,15 @@ var RadioGroup = MotionRadioGroup;
 RadioGroup.displayName = "RadioGroup";
 
 // src/components/RadioList/RadioList.tsx
-var import_react43 = __toESM(require("react"));
+var import_react44 = __toESM(require("react"));
 function RadioList(props) {
   const { items, ...innerProps } = props;
-  return /* @__PURE__ */ import_react43.default.createElement(RadioGroup, { ...innerProps }, items.map((item) => /* @__PURE__ */ import_react43.default.createElement(Radio, { key: `${item.value}`, value: item.value, label: item.label })));
+  return /* @__PURE__ */ import_react44.default.createElement(RadioGroup, { ...innerProps }, items.map((item) => /* @__PURE__ */ import_react44.default.createElement(Radio, { key: `${item.value}`, value: item.value, label: item.label })));
 }
 RadioList.displayName = "RadioList";
 
 // src/components/Stepper/Stepper.tsx
-var import_react44 = __toESM(require("react"));
+var import_react45 = __toESM(require("react"));
 var import_joy55 = require("@mui/joy");
 var import_Check = __toESM(require("@mui/icons-material/Check"));
 var import_framer_motion28 = require("framer-motion");
@@ -5430,7 +5752,7 @@ function Stepper(props) {
     stepOrientation = "horizontal"
   } = props;
   const effectiveStepOrientation = orientation === "vertical" ? "horizontal" : stepOrientation;
-  return /* @__PURE__ */ import_react44.default.createElement(
+  return /* @__PURE__ */ import_react45.default.createElement(
     MotionStepper,
     {
       orientation,
@@ -5469,23 +5791,23 @@ function Stepper(props) {
       const completed = activeStep > i + 1;
       const disabled = activeStep < i + 1;
       const hasContent = step.label || step.extraContent;
-      return /* @__PURE__ */ import_react44.default.createElement(
+      return /* @__PURE__ */ import_react45.default.createElement(
         Step,
         {
           key: `step-${i}`,
-          indicator: /* @__PURE__ */ import_react44.default.createElement(StepIndicator, { variant: disabled ? "outlined" : "solid", color: disabled ? "neutral" : "primary" }, completed ? /* @__PURE__ */ import_react44.default.createElement(import_Check.default, null) : step.indicatorContent),
+          indicator: /* @__PURE__ */ import_react45.default.createElement(StepIndicator, { variant: disabled ? "outlined" : "solid", color: disabled ? "neutral" : "primary" }, completed ? /* @__PURE__ */ import_react45.default.createElement(import_Check.default, null) : step.indicatorContent),
           active,
           completed,
           disabled,
           orientation: effectiveStepOrientation
         },
-        hasContent && /* @__PURE__ */ import_react44.default.createElement(
+        hasContent && /* @__PURE__ */ import_react45.default.createElement(
           Stack_default,
           {
             sx: orientation === "horizontal" && effectiveStepOrientation === "vertical" ? { alignItems: "center" } : {}
           },
-          step.label && /* @__PURE__ */ import_react44.default.createElement(Typography_default, { level: "title-sm" }, step.label),
-          step.extraContent && /* @__PURE__ */ import_react44.default.createElement(Typography_default, { level: "body-xs" }, step.extraContent)
+          step.label && /* @__PURE__ */ import_react45.default.createElement(Typography_default, { level: "title-sm" }, step.label),
+          step.extraContent && /* @__PURE__ */ import_react45.default.createElement(Typography_default, { level: "body-xs" }, step.extraContent)
         )
       );
     })
@@ -5494,7 +5816,7 @@ function Stepper(props) {
 Stepper.displayName = "Stepper";
 
 // src/components/Switch/Switch.tsx
-var import_react45 = __toESM(require("react"));
+var import_react46 = __toESM(require("react"));
 var import_joy56 = require("@mui/joy");
 var import_framer_motion29 = require("framer-motion");
 var MotionSwitch = (0, import_framer_motion29.motion)(import_joy56.Switch);
@@ -5516,14 +5838,14 @@ var StyledThumb = (0, import_joy56.styled)(import_framer_motion29.motion.div)({
     right: "var(--Switch-thumbOffset)"
   }
 });
-var Thumb = (props) => /* @__PURE__ */ import_react45.default.createElement(StyledThumb, { ...props, layout: true, transition: spring });
+var Thumb = (props) => /* @__PURE__ */ import_react46.default.createElement(StyledThumb, { ...props, layout: true, transition: spring });
 var spring = {
   type: "spring",
   stiffness: 700,
   damping: 30
 };
 var Switch = (props) => {
-  return /* @__PURE__ */ import_react45.default.createElement(
+  return /* @__PURE__ */ import_react46.default.createElement(
     MotionSwitch,
     {
       ...props,
@@ -5537,7 +5859,7 @@ var Switch = (props) => {
 Switch.displayName = "Switch";
 
 // src/components/Tabs/Tabs.tsx
-var import_react46 = __toESM(require("react"));
+var import_react47 = __toESM(require("react"));
 var import_joy57 = require("@mui/joy");
 var StyledTabs = (0, import_joy57.styled)(import_joy57.Tabs)(({ theme }) => ({
   backgroundColor: theme.palette.background.body
@@ -5553,15 +5875,15 @@ var StyledTab = (0, import_joy57.styled)(import_joy57.Tab)(({ theme }) => ({
     backgroundColor: theme.palette.background.body
   }
 }));
-var Tab = (0, import_react46.forwardRef)(function Tab2({ startDecorator, endDecorator, children, ...props }, ref) {
-  return /* @__PURE__ */ import_react46.default.createElement(StyledTab, { ...props, ref }, startDecorator, children, endDecorator);
+var Tab = (0, import_react47.forwardRef)(function Tab2({ startDecorator, endDecorator, children, ...props }, ref) {
+  return /* @__PURE__ */ import_react47.default.createElement(StyledTab, { ...props, ref }, startDecorator, children, endDecorator);
 });
 Tab.displayName = "Tab";
 var TabList = import_joy57.TabList;
 var TabPanel = import_joy57.TabPanel;
 
 // src/components/ThemeProvider/ThemeProvider.tsx
-var import_react47 = __toESM(require("react"));
+var import_react48 = __toESM(require("react"));
 var import_joy58 = require("@mui/joy");
 var colorScheme = {
   palette: {
@@ -5811,12 +6133,12 @@ var defaultTheme = (0, import_joy58.extendTheme)({
 });
 function ThemeProvider(props) {
   const theme = props.theme || defaultTheme;
-  return /* @__PURE__ */ import_react47.default.createElement(import_react47.default.Fragment, null, /* @__PURE__ */ import_react47.default.createElement(import_joy58.CssVarsProvider, { theme }, /* @__PURE__ */ import_react47.default.createElement(import_joy58.CssBaseline, null), props.children));
+  return /* @__PURE__ */ import_react48.default.createElement(import_react48.default.Fragment, null, /* @__PURE__ */ import_react48.default.createElement(import_joy58.CssVarsProvider, { theme }, /* @__PURE__ */ import_react48.default.createElement(import_joy58.CssBaseline, null), props.children));
 }
 ThemeProvider.displayName = "ThemeProvider";
 
 // src/components/Uploader/Uploader.tsx
-var import_react48 = __toESM(require("react"));
+var import_react49 = __toESM(require("react"));
 var import_joy59 = require("@mui/joy");
 var import_CloudUploadRounded = __toESM(require("@mui/icons-material/CloudUploadRounded"));
 var import_UploadFileRounded = __toESM(require("@mui/icons-material/UploadFileRounded"));
@@ -5893,7 +6215,7 @@ var getFileSize = (n) => {
 };
 var Preview = (props) => {
   const { files, uploaded, onDelete } = props;
-  return /* @__PURE__ */ import_react48.default.createElement(PreviewRoot, { gap: 1 }, [...uploaded, ...files].map((file) => /* @__PURE__ */ import_react48.default.createElement(UploadCard, { key: file.name, size: "sm", color: "neutral" }, /* @__PURE__ */ import_react48.default.createElement(Stack_default, { direction: "row", alignItems: "center", gap: 2 }, /* @__PURE__ */ import_react48.default.createElement(UploadFileIcon, null), /* @__PURE__ */ import_react48.default.createElement(Stack_default, { flex: "1", sx: { overflow: "hidden" } }, /* @__PURE__ */ import_react48.default.createElement(
+  return /* @__PURE__ */ import_react49.default.createElement(PreviewRoot, { gap: 1 }, [...uploaded, ...files].map((file) => /* @__PURE__ */ import_react49.default.createElement(UploadCard, { key: file.name, size: "sm", color: "neutral" }, /* @__PURE__ */ import_react49.default.createElement(Stack_default, { direction: "row", alignItems: "center", gap: 2 }, /* @__PURE__ */ import_react49.default.createElement(UploadFileIcon, null), /* @__PURE__ */ import_react49.default.createElement(Stack_default, { flex: "1", sx: { overflow: "hidden" } }, /* @__PURE__ */ import_react49.default.createElement(
     Typography_default,
     {
       level: "body-sm",
@@ -5905,7 +6227,7 @@ var Preview = (props) => {
       }
     },
     file.name
-  ), !!file.size && /* @__PURE__ */ import_react48.default.createElement(Typography_default, { level: "body-xs", fontWeight: "300", lineHeight: "1.33", textColor: "text.tertiary" }, getFileSize(file.size))), /* @__PURE__ */ import_react48.default.createElement(IconButton_default, { onClick: () => onDelete?.(file) }, /* @__PURE__ */ import_react48.default.createElement(ClearIcon2, null))))));
+  ), !!file.size && /* @__PURE__ */ import_react49.default.createElement(Typography_default, { level: "body-xs", fontWeight: "300", lineHeight: "1.33", textColor: "text.tertiary" }, getFileSize(file.size))), /* @__PURE__ */ import_react49.default.createElement(IconButton_default, { onClick: () => onDelete?.(file) }, /* @__PURE__ */ import_react49.default.createElement(ClearIcon2, null))))));
 };
 var UploaderRoot = (0, import_joy59.styled)(Stack_default, {
   name: "Uploader",
@@ -5948,7 +6270,7 @@ var UploaderIcon = (0, import_joy59.styled)(import_CloudUploadRounded.default, {
     }
   })
 );
-var Uploader = import_react48.default.memo(
+var Uploader = import_react49.default.memo(
   (props) => {
     const {
       accept,
@@ -5965,14 +6287,14 @@ var Uploader = import_react48.default.memo(
       error: errorProp,
       helperText: helperTextProp
     } = props;
-    const dropZoneRef = (0, import_react48.useRef)(null);
-    const inputRef = (0, import_react48.useRef)(null);
-    const [errorText, setErrorText] = (0, import_react48.useState)();
-    const [files, setFiles] = (0, import_react48.useState)([]);
-    const [uploaded, setUploaded] = (0, import_react48.useState)(props.uploaded || []);
-    const [previewState, setPreviewState] = (0, import_react48.useState)("idle");
-    const accepts = (0, import_react48.useMemo)(() => accept.split(",").map((accept2) => accept2.trim()), [accept]);
-    const parsedAccepts = (0, import_react48.useMemo)(
+    const dropZoneRef = (0, import_react49.useRef)(null);
+    const inputRef = (0, import_react49.useRef)(null);
+    const [errorText, setErrorText] = (0, import_react49.useState)();
+    const [files, setFiles] = (0, import_react49.useState)([]);
+    const [uploaded, setUploaded] = (0, import_react49.useState)(props.uploaded || []);
+    const [previewState, setPreviewState] = (0, import_react49.useState)("idle");
+    const accepts = (0, import_react49.useMemo)(() => accept.split(",").map((accept2) => accept2.trim()), [accept]);
+    const parsedAccepts = (0, import_react49.useMemo)(
       () => accepts.flatMap((type) => {
         if (["image/*", "video/*", "audio/*"].includes(type)) {
           return ALL_EXTENSIONS_BY_TYPE[type];
@@ -5981,7 +6303,7 @@ var Uploader = import_react48.default.memo(
       }),
       [accepts]
     );
-    const helperText = (0, import_react48.useMemo)(() => {
+    const helperText = (0, import_react49.useMemo)(() => {
       if (helperTextProp) {
         return helperTextProp;
       }
@@ -6011,12 +6333,12 @@ var Uploader = import_react48.default.memo(
       }
       return helperTexts.join(", ");
     }, [accepts, maxFileTotalSize, maxCount, helperTextProp]);
-    const error = (0, import_react48.useMemo)(() => !!errorText || errorProp, [errorProp, errorText]);
-    const showDropZone = (0, import_react48.useMemo)(
+    const error = (0, import_react49.useMemo)(() => !!errorText || errorProp, [errorProp, errorText]);
+    const showDropZone = (0, import_react49.useMemo)(
       () => !maxCount || maxCount && [...uploaded, ...files].length !== maxCount,
       [files, maxCount, uploaded]
     );
-    const addFiles = (0, import_react48.useCallback)(
+    const addFiles = (0, import_react49.useCallback)(
       (uploads) => {
         try {
           const types = parsedAccepts.map((type) => type.replace(".", "")) || [];
@@ -6061,7 +6383,7 @@ var Uploader = import_react48.default.memo(
       },
       [files, uploaded, maxCount, parsedAccepts, maxFileSize, maxFileTotalSize, name, onChange]
     );
-    (0, import_react48.useEffect)(() => {
+    (0, import_react49.useEffect)(() => {
       if (!dropZoneRef.current || disabled) {
         return;
       }
@@ -6099,7 +6421,7 @@ var Uploader = import_react48.default.memo(
       );
       return () => cleanup?.();
     }, [disabled, addFiles]);
-    (0, import_react48.useEffect)(() => {
+    (0, import_react49.useEffect)(() => {
       if (inputRef.current && minCount) {
         if (files.length < minCount) {
           inputRef.current.setCustomValidity(`At least ${minCount} files are required.`);
@@ -6108,14 +6430,14 @@ var Uploader = import_react48.default.memo(
         }
       }
     }, [inputRef, files, minCount]);
-    const handleFileChanged = (0, import_react48.useCallback)(
+    const handleFileChanged = (0, import_react49.useCallback)(
       (event) => {
         const files2 = Array.from(event.target.files || []);
         addFiles(files2);
       },
       [addFiles]
     );
-    const handleDeleteFile = (0, import_react48.useCallback)(
+    const handleDeleteFile = (0, import_react49.useCallback)(
       (deletedFile) => {
         if (deletedFile instanceof File) {
           setFiles((current) => {
@@ -6135,10 +6457,10 @@ var Uploader = import_react48.default.memo(
       },
       [name, onChange, onDelete]
     );
-    const handleUploaderButtonClick = (0, import_react48.useCallback)(() => {
+    const handleUploaderButtonClick = (0, import_react49.useCallback)(() => {
       inputRef.current?.click();
     }, []);
-    const uploader = /* @__PURE__ */ import_react48.default.createElement(
+    const uploader = /* @__PURE__ */ import_react49.default.createElement(
       FileDropZone,
       {
         state: previewState,
@@ -6147,8 +6469,8 @@ var Uploader = import_react48.default.memo(
         ref: dropZoneRef,
         onClick: handleUploaderButtonClick
       },
-      /* @__PURE__ */ import_react48.default.createElement(Stack_default, { alignItems: "center", gap: 1 }, /* @__PURE__ */ import_react48.default.createElement(UploaderIcon, { state: previewState, error: !!(error || errorText), disabled })),
-      /* @__PURE__ */ import_react48.default.createElement(
+      /* @__PURE__ */ import_react49.default.createElement(Stack_default, { alignItems: "center", gap: 1 }, /* @__PURE__ */ import_react49.default.createElement(UploaderIcon, { state: previewState, error: !!(error || errorText), disabled })),
+      /* @__PURE__ */ import_react49.default.createElement(
         VisuallyHiddenInput,
         {
           disabled,
@@ -6171,7 +6493,7 @@ var Uploader = import_react48.default.memo(
         }
       )
     );
-    return /* @__PURE__ */ import_react48.default.createElement(UploaderRoot, null, showDropZone && /* @__PURE__ */ import_react48.default.createElement(FormControl_default, { size, error: !!(error || errorText), disabled, required: !!minCount }, label && /* @__PURE__ */ import_react48.default.createElement(FormLabel_default, null, label), uploader, /* @__PURE__ */ import_react48.default.createElement(FormHelperText_default, null, /* @__PURE__ */ import_react48.default.createElement(Stack_default, null, errorText && /* @__PURE__ */ import_react48.default.createElement("div", null, errorText), /* @__PURE__ */ import_react48.default.createElement("div", null, helperText)))), [...uploaded, ...files].length > 0 && /* @__PURE__ */ import_react48.default.createElement(Preview, { files, uploaded, onDelete: handleDeleteFile }));
+    return /* @__PURE__ */ import_react49.default.createElement(UploaderRoot, null, showDropZone && /* @__PURE__ */ import_react49.default.createElement(FormControl_default, { size, error: !!(error || errorText), disabled, required: !!minCount }, label && /* @__PURE__ */ import_react49.default.createElement(FormLabel_default, null, label), uploader, /* @__PURE__ */ import_react49.default.createElement(FormHelperText_default, null, /* @__PURE__ */ import_react49.default.createElement(Stack_default, null, errorText && /* @__PURE__ */ import_react49.default.createElement("div", null, errorText), /* @__PURE__ */ import_react49.default.createElement("div", null, helperText)))), [...uploaded, ...files].length > 0 && /* @__PURE__ */ import_react49.default.createElement(Preview, { files, uploaded, onDelete: handleDeleteFile }));
   }
 );
 Uploader.displayName = "Uploader";