@ceed/cds 1.15.0-next.8 → 1.15.0

package/dist/index.cjs

@@ -85,26 +85,26 @@ __export(index_exports, {
   AccordionSummary: () => AccordionSummary,
   Accordions: () => Accordions,
   Alert: () => Alert,
-  AspectRatio: () => import_joy61.AspectRatio,
+  AspectRatio: () => import_joy60.AspectRatio,
   Autocomplete: () => Autocomplete,
-  AutocompleteListbox: () => import_joy61.AutocompleteListbox,
-  AutocompleteOption: () => import_joy61.AutocompleteOption,
+  AutocompleteListbox: () => import_joy60.AutocompleteListbox,
+  AutocompleteOption: () => import_joy60.AutocompleteOption,
   Avatar: () => Avatar,
   AvatarGroup: () => import_joy11.AvatarGroup,
-  Badge: () => import_joy61.Badge,
+  Badge: () => import_joy60.Badge,
   Box: () => Box,
   Breadcrumbs: () => Breadcrumbs,
   Button: () => Button,
-  ButtonGroup: () => import_joy61.ButtonGroup,
+  ButtonGroup: () => import_joy60.ButtonGroup,
   Calendar: () => Calendar,
-  Card: () => import_joy61.Card,
-  CardActions: () => import_joy61.CardActions,
-  CardContent: () => import_joy61.CardContent,
-  CardCover: () => import_joy61.CardCover,
-  CardOverflow: () => import_joy61.CardOverflow,
+  Card: () => import_joy60.Card,
+  CardActions: () => import_joy60.CardActions,
+  CardContent: () => import_joy60.CardContent,
+  CardCover: () => import_joy60.CardCover,
+  CardOverflow: () => import_joy60.CardOverflow,
   Checkbox: () => Checkbox,
-  Chip: () => import_joy61.Chip,
-  CircularProgress: () => import_joy61.CircularProgress,
+  Chip: () => import_joy60.Chip,
+  CircularProgress: () => import_joy60.CircularProgress,
   Container: () => Container,
   CurrencyInput: () => CurrencyInput,
   DataTable: () => DataTable,
@@ -121,21 +121,21 @@ __export(index_exports, {
   FormControl: () => FormControl,
   FormHelperText: () => FormHelperText,
   FormLabel: () => FormLabel,
-  Grid: () => import_joy45.Grid,
+  Grid: () => import_joy44.Grid,
   IconButton: () => IconButton,
   IconMenuButton: () => IconMenuButton,
   InfoSign: () => InfoSign,
   Input: () => Input,
   InsetDrawer: () => InsetDrawer,
-  LinearProgress: () => import_joy61.LinearProgress,
-  Link: () => import_joy61.Link,
-  List: () => import_joy61.List,
-  ListDivider: () => import_joy61.ListDivider,
-  ListItem: () => import_joy61.ListItem,
-  ListItemButton: () => import_joy61.ListItemButton,
-  ListItemContent: () => import_joy61.ListItemContent,
-  ListItemDecorator: () => import_joy61.ListItemDecorator,
-  ListSubheader: () => import_joy61.ListSubheader,
+  LinearProgress: () => import_joy60.LinearProgress,
+  Link: () => import_joy60.Link,
+  List: () => import_joy60.List,
+  ListDivider: () => import_joy60.ListDivider,
+  ListItem: () => import_joy60.ListItem,
+  ListItemButton: () => import_joy60.ListItemButton,
+  ListItemContent: () => import_joy60.ListItemContent,
+  ListItemDecorator: () => import_joy60.ListItemDecorator,
+  ListSubheader: () => import_joy60.ListSubheader,
   Markdown: () => Markdown,
   Menu: () => Menu,
   MenuButton: () => MenuButton,
@@ -158,11 +158,11 @@ __export(index_exports, {
   RadioList: () => RadioList,
   Select: () => Select,
   Sheet: () => Sheet,
-  Skeleton: () => import_joy61.Skeleton,
-  Slider: () => import_joy61.Slider,
+  Skeleton: () => import_joy60.Skeleton,
+  Slider: () => import_joy60.Slider,
   Stack: () => import_joy3.Stack,
   Step: () => Step,
-  StepButton: () => import_joy61.StepButton,
+  StepButton: () => import_joy60.StepButton,
   StepIndicator: () => StepIndicator,
   Stepper: () => Stepper,
   Switch: () => Switch,
@@ -178,84 +178,84 @@ __export(index_exports, {
   Tooltip: () => Tooltip,
   Typography: () => Typography,
   Uploader: () => Uploader,
-  accordionClasses: () => import_joy61.accordionClasses,
-  accordionDetailsClasses: () => import_joy61.accordionDetailsClasses,
-  accordionSummaryClasses: () => import_joy61.accordionSummaryClasses,
-  accordionsClasses: () => import_joy61.accordionGroupClasses,
-  alertClasses: () => import_joy61.alertClasses,
-  aspectRatioClasses: () => import_joy61.aspectRatioClasses,
-  autocompleteClasses: () => import_joy61.autocompleteClasses,
-  autocompleteListboxClasses: () => import_joy61.autocompleteListboxClasses,
-  autocompleteOptionClasses: () => import_joy61.autocompleteOptionClasses,
-  avatarClasses: () => import_joy61.avatarClasses,
-  avatarGroupClasses: () => import_joy61.avatarGroupClasses,
-  badgeClasses: () => import_joy61.badgeClasses,
-  boxClasses: () => import_joy61.boxClasses,
-  breadcrumbsClasses: () => import_joy61.breadcrumbsClasses,
-  buttonClasses: () => import_joy61.buttonClasses,
-  cardActionsClasses: () => import_joy61.cardActionsClasses,
-  cardClasses: () => import_joy61.cardClasses,
-  cardContentClasses: () => import_joy61.cardContentClasses,
-  cardCoverClasses: () => import_joy61.cardCoverClasses,
-  cardOverflowClasses: () => import_joy61.cardOverflowClasses,
-  checkboxClasses: () => import_joy61.checkboxClasses,
-  chipClasses: () => import_joy61.chipClasses,
-  circularProgressClasses: () => import_joy61.circularProgressClasses,
-  dialogActionsClasses: () => import_joy61.dialogActionsClasses,
-  dialogContentClasses: () => import_joy61.dialogContentClasses,
-  dialogTitleClasses: () => import_joy61.dialogTitleClasses,
-  dividerClasses: () => import_joy61.dividerClasses,
-  drawerClasses: () => import_joy61.drawerClasses,
-  extendTheme: () => import_joy59.extendTheme,
-  formControlClasses: () => import_joy61.formControlClasses,
-  formHelperTextClasses: () => import_joy61.formHelperTextClasses,
-  formLabelClasses: () => import_joy61.formLabelClasses,
-  gridClasses: () => import_joy61.gridClasses,
-  iconButtonClasses: () => import_joy61.iconButtonClasses,
-  inputClasses: () => import_joy61.inputClasses,
-  linearProgressClasses: () => import_joy61.linearProgressClasses,
-  linkClasses: () => import_joy61.linkClasses,
-  listClasses: () => import_joy61.listClasses,
-  listDividerClasses: () => import_joy61.listDividerClasses,
-  listItemButtonClasses: () => import_joy61.listItemButtonClasses,
-  listItemClasses: () => import_joy61.listItemClasses,
-  listItemContentClasses: () => import_joy61.listItemContentClasses,
-  listItemDecoratorClasses: () => import_joy61.listItemDecoratorClasses,
-  listSubheaderClasses: () => import_joy61.listSubheaderClasses,
-  menuButtonClasses: () => import_joy61.menuButtonClasses,
-  menuClasses: () => import_joy61.menuClasses,
-  menuItemClasses: () => import_joy61.menuItemClasses,
-  modalClasses: () => import_joy61.modalClasses,
-  modalCloseClasses: () => import_joy61.modalCloseClasses,
-  modalDialogClasses: () => import_joy61.modalDialogClasses,
-  modalOverflowClasses: () => import_joy61.modalOverflowClasses,
-  optionClasses: () => import_joy61.optionClasses,
-  radioClasses: () => import_joy61.radioClasses,
-  radioGroupClasses: () => import_joy61.radioGroupClasses,
-  selectClasses: () => import_joy61.selectClasses,
-  sheetClasses: () => import_joy61.sheetClasses,
-  skeletonClasses: () => import_joy61.skeletonClasses,
-  sliderClasses: () => import_joy61.sliderClasses,
-  stackClasses: () => import_joy61.stackClasses,
-  stepButtonClasses: () => import_joy61.stepButtonClasses,
-  stepClasses: () => import_joy61.stepClasses,
-  stepperClasses: () => import_joy61.stepperClasses,
-  styled: () => import_joy61.styled,
-  switchClasses: () => import_joy61.switchClasses,
-  tabListClasses: () => import_joy61.tabListClasses,
-  tabPanelClasses: () => import_joy61.tabPanelClasses,
-  tableClasses: () => import_joy61.tableClasses,
-  tabsClasses: () => import_joy61.tabsClasses,
-  textareaClasses: () => import_joy61.textareaClasses,
+  accordionClasses: () => import_joy60.accordionClasses,
+  accordionDetailsClasses: () => import_joy60.accordionDetailsClasses,
+  accordionSummaryClasses: () => import_joy60.accordionSummaryClasses,
+  accordionsClasses: () => import_joy60.accordionGroupClasses,
+  alertClasses: () => import_joy60.alertClasses,
+  aspectRatioClasses: () => import_joy60.aspectRatioClasses,
+  autocompleteClasses: () => import_joy60.autocompleteClasses,
+  autocompleteListboxClasses: () => import_joy60.autocompleteListboxClasses,
+  autocompleteOptionClasses: () => import_joy60.autocompleteOptionClasses,
+  avatarClasses: () => import_joy60.avatarClasses,
+  avatarGroupClasses: () => import_joy60.avatarGroupClasses,
+  badgeClasses: () => import_joy60.badgeClasses,
+  boxClasses: () => import_joy60.boxClasses,
+  breadcrumbsClasses: () => import_joy60.breadcrumbsClasses,
+  buttonClasses: () => import_joy60.buttonClasses,
+  cardActionsClasses: () => import_joy60.cardActionsClasses,
+  cardClasses: () => import_joy60.cardClasses,
+  cardContentClasses: () => import_joy60.cardContentClasses,
+  cardCoverClasses: () => import_joy60.cardCoverClasses,
+  cardOverflowClasses: () => import_joy60.cardOverflowClasses,
+  checkboxClasses: () => import_joy60.checkboxClasses,
+  chipClasses: () => import_joy60.chipClasses,
+  circularProgressClasses: () => import_joy60.circularProgressClasses,
+  dialogActionsClasses: () => import_joy60.dialogActionsClasses,
+  dialogContentClasses: () => import_joy60.dialogContentClasses,
+  dialogTitleClasses: () => import_joy60.dialogTitleClasses,
+  dividerClasses: () => import_joy60.dividerClasses,
+  drawerClasses: () => import_joy60.drawerClasses,
+  extendTheme: () => import_joy58.extendTheme,
+  formControlClasses: () => import_joy60.formControlClasses,
+  formHelperTextClasses: () => import_joy60.formHelperTextClasses,
+  formLabelClasses: () => import_joy60.formLabelClasses,
+  gridClasses: () => import_joy60.gridClasses,
+  iconButtonClasses: () => import_joy60.iconButtonClasses,
+  inputClasses: () => import_joy60.inputClasses,
+  linearProgressClasses: () => import_joy60.linearProgressClasses,
+  linkClasses: () => import_joy60.linkClasses,
+  listClasses: () => import_joy60.listClasses,
+  listDividerClasses: () => import_joy60.listDividerClasses,
+  listItemButtonClasses: () => import_joy60.listItemButtonClasses,
+  listItemClasses: () => import_joy60.listItemClasses,
+  listItemContentClasses: () => import_joy60.listItemContentClasses,
+  listItemDecoratorClasses: () => import_joy60.listItemDecoratorClasses,
+  listSubheaderClasses: () => import_joy60.listSubheaderClasses,
+  menuButtonClasses: () => import_joy60.menuButtonClasses,
+  menuClasses: () => import_joy60.menuClasses,
+  menuItemClasses: () => import_joy60.menuItemClasses,
+  modalClasses: () => import_joy60.modalClasses,
+  modalCloseClasses: () => import_joy60.modalCloseClasses,
+  modalDialogClasses: () => import_joy60.modalDialogClasses,
+  modalOverflowClasses: () => import_joy60.modalOverflowClasses,
+  optionClasses: () => import_joy60.optionClasses,
+  radioClasses: () => import_joy60.radioClasses,
+  radioGroupClasses: () => import_joy60.radioGroupClasses,
+  selectClasses: () => import_joy60.selectClasses,
+  sheetClasses: () => import_joy60.sheetClasses,
+  skeletonClasses: () => import_joy60.skeletonClasses,
+  sliderClasses: () => import_joy60.sliderClasses,
+  stackClasses: () => import_joy60.stackClasses,
+  stepButtonClasses: () => import_joy60.stepButtonClasses,
+  stepClasses: () => import_joy60.stepClasses,
+  stepperClasses: () => import_joy60.stepperClasses,
+  styled: () => import_joy60.styled,
+  switchClasses: () => import_joy60.switchClasses,
+  tabListClasses: () => import_joy60.tabListClasses,
+  tabPanelClasses: () => import_joy60.tabPanelClasses,
+  tableClasses: () => import_joy60.tableClasses,
+  tabsClasses: () => import_joy60.tabsClasses,
+  textareaClasses: () => import_joy60.textareaClasses,
   theme: () => defaultTheme,
-  tooltipClasses: () => import_joy61.tooltipClasses,
-  typographyClasses: () => import_joy61.typographyClasses,
-  useColorScheme: () => import_joy61.useColorScheme,
-  useTheme: () => import_joy61.useTheme,
-  useThemeProps: () => import_joy61.useThemeProps
+  tooltipClasses: () => import_joy60.tooltipClasses,
+  typographyClasses: () => import_joy60.typographyClasses,
+  useColorScheme: () => import_joy60.useColorScheme,
+  useTheme: () => import_joy60.useTheme,
+  useThemeProps: () => import_joy60.useThemeProps
 });
 module.exports = __toCommonJS(index_exports);
-var import_joy61 = require("@mui/joy");
+var import_joy60 = require("@mui/joy");
 
 // src/components/Accordions/Accordions.tsx
 var import_react = __toESM(require("react"));
@@ -3528,10 +3528,8 @@ TableBody.displayName = "TableBody";
 
 // src/components/Pagination/Pagination.tsx
 var import_react27 = __toESM(require("react"));
-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_ChevronLeft2 = __toESM(require("@mui/icons-material/ChevronLeft"));
+var import_ChevronRight2 = __toESM(require("@mui/icons-material/ChevronRight"));
 var import_joy35 = require("@mui/joy");
 var PaginationButton = (0, import_joy35.styled)(Button_default, {
   name: "Pagination",
@@ -3590,7 +3588,6 @@ function Pagination(props) {
     onPageChange,
     rowCount,
     size = "md",
-    variant = "standard",
     ...innerProps
   } = props;
   const [paginationModel, setPaginationModel] = useControlledState(
@@ -3617,87 +3614,6 @@ 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,
     {
@@ -3708,7 +3624,7 @@ function Pagination(props) {
       disabled: paginationModel.page === firstPage,
       "aria-label": "Previous page"
     },
-    /* @__PURE__ */ import_react27.default.createElement(import_ChevronLeftRounded.default, null)
+    /* @__PURE__ */ import_react27.default.createElement(import_ChevronLeft2.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,
     {
@@ -3719,7 +3635,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: "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(
+  ), 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(
     PaginationButton,
     {
       size,
@@ -3739,7 +3655,7 @@ function Pagination(props) {
       disabled: paginationModel.page === lastPage,
       "aria-label": "Next page"
     },
-    /* @__PURE__ */ import_react27.default.createElement(import_ChevronRightRounded.default, null)
+    /* @__PURE__ */ import_react27.default.createElement(import_ChevronRight2.default, null)
   )));
 }
 Pagination.displayName = "Pagination";
@@ -4584,11 +4500,52 @@ var InsetDrawer = (0, import_joy43.styled)(import_joy43.Drawer)(({ theme }) => (
 
 // src/components/FilterableCheckboxGroup/FilterableCheckboxGroup.tsx
 var import_react34 = __toESM(require("react"));
-var import_joy44 = require("@mui/joy");
 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 } = 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(
@@ -4598,6 +4555,7 @@ function FilterableCheckboxGroup(props) {
   );
   const parentRef = (0, import_react34.useRef)(null);
   const isInitialSortRef = (0, import_react34.useRef)(false);
+  const prevOptionsRef = (0, import_react34.useRef)([...options]);
   const filteredOptions = (0, import_react34.useMemo)(() => {
     if (!searchTerm) return sortedOptions;
     return sortedOptions.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()));
@@ -4612,16 +4570,6 @@ function FilterableCheckboxGroup(props) {
         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,
@@ -4631,27 +4579,34 @@ function FilterableCheckboxGroup(props) {
   });
   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;
+    const optionsChanged = prevOptionsRef.current.length !== options.length || prevOptionsRef.current.some(
+      (prevOption, index) => prevOption.value !== options[index]?.value || prevOption.label !== options[index]?.label || prevOption.disabled !== options[index]?.disabled
+    );
+    if (!isInitialSortRef.current || optionsChanged) {
+      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);
+      prevOptionsRef.current = [...options];
+      if (!isInitialSortRef.current) {
+        isInitialSortRef.current = true;
       }
-      return a.label.localeCompare(b.label);
-    });
-    setSortedOptions(sorted);
-    isInitialSortRef.current = true;
+    }
   }, [options, value]);
   (0, import_react34.useEffect)(() => {
     virtualizer.measure();
-  }, [virtualizer, filteredOptions]);
+  }, [virtualizer, filteredOptions, size]);
   const handleSearchChange = (0, import_react34.useCallback)((event) => {
     setSearchTerm(event.target.value);
   }, []);
@@ -4666,40 +4621,38 @@ function FilterableCheckboxGroup(props) {
   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) {
-        setInternalValue(filteredOptions.map((option) => option.value));
+        const enabledValues = enabledOptions.map((option) => option.value);
+        setInternalValue([...disabledSelectedValues, ...enabledValues]);
       } else {
-        setInternalValue([]);
+        setInternalValue(disabledSelectedValues);
       }
     },
-    [filteredOptions, setInternalValue]
+    [filteredOptions, internalValue, setInternalValue]
   );
-  const isAllSelected = filteredOptions.length > 0 && filteredOptions.every((option) => internalValue.includes(option.value));
-  const isIndeterminate = !isAllSelected && filteredOptions.some((option) => internalValue.includes(option.value));
-  return /* @__PURE__ */ import_react34.default.createElement("div", { style: { width: "100%" } }, /* @__PURE__ */ import_react34.default.createElement(FormControl_default, { required, size }, label && /* @__PURE__ */ import_react34.default.createElement(FormLabel_default, null, label), /* @__PURE__ */ import_react34.default.createElement(
-    import_joy44.Input,
+  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)
     }
-  ), helperText && /* @__PURE__ */ import_react34.default.createElement(FormHelperText_default, null, helperText)), filteredOptions.length === 0 ? /* @__PURE__ */ import_react34.default.createElement(
-    import_joy44.Stack,
-    {
-      sx: {
-        padding: "20px 12px",
-        justifyContent: "center",
-        alignItems: "center",
-        fontSize: noOptionsFontSize,
-        color: "#A2AAB8"
-      }
-    },
-    "No options found."
-  ) : /* @__PURE__ */ import_react34.default.createElement(
+  ), filteredOptions.length === 0 ? /* @__PURE__ */ import_react34.default.createElement(Typography_default, { level: `body-${size}`, textColor: "neutral.softDisabledColor", padding: "20px 12px", textAlign: "center" }, "No options found.") : /* @__PURE__ */ import_react34.default.createElement(
     "div",
     {
       ref: parentRef,
@@ -4718,6 +4671,7 @@ function FilterableCheckboxGroup(props) {
         indeterminate: isIndeterminate,
         onChange: handleSelectAll,
         size,
+        disabled,
         slotProps: {
           action: {
             sx: { top: 0, left: 0, bottom: 0, right: 0 }
@@ -4727,7 +4681,7 @@ function FilterableCheckboxGroup(props) {
       }
     ),
     /* @__PURE__ */ import_react34.default.createElement(
-      import_joy44.Stack,
+      Stack_default,
       {
         sx: {
           height: `${virtualizer.getTotalSize()}px`,
@@ -4740,13 +4694,15 @@ function FilterableCheckboxGroup(props) {
           Checkbox_default,
           {
             key: virtualRow.key,
-            label: option.label,
+            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: {
@@ -4766,11 +4722,11 @@ function FilterableCheckboxGroup(props) {
 FilterableCheckboxGroup.displayName = "FilterableCheckboxGroup";
 
 // src/components/Grid/Grid.tsx
-var import_joy45 = require("@mui/joy");
+var import_joy44 = require("@mui/joy");
 
 // src/components/IconMenuButton/IconMenuButton.tsx
 var import_react35 = __toESM(require("react"));
-var import_joy46 = require("@mui/joy");
+var import_joy45 = require("@mui/joy");
 function IconMenuButton(props) {
   const {
     size,
@@ -4784,7 +4740,7 @@ function IconMenuButton(props) {
   } = props;
   if (!items.length) {
     return /* @__PURE__ */ import_react35.default.createElement(
-      import_joy46.IconButton,
+      import_joy45.IconButton,
       {
         component: props.buttonComponent ?? "button",
         size,
@@ -4798,9 +4754,9 @@ function IconMenuButton(props) {
     );
   }
   return /* @__PURE__ */ import_react35.default.createElement(Dropdown_default, null, /* @__PURE__ */ import_react35.default.createElement(
-    import_joy46.MenuButton,
+    import_joy45.MenuButton,
     {
-      slots: { root: import_joy46.IconButton },
+      slots: { root: import_joy45.IconButton },
       slotProps: {
         root: {
           component: props.buttonComponent ?? "button",
@@ -4820,8 +4776,8 @@ IconMenuButton.displayName = "IconMenuButton";
 
 // src/components/Markdown/Markdown.tsx
 var import_react36 = __toESM(require("react"));
+var import_joy46 = require("@mui/joy");
 var import_joy47 = require("@mui/joy");
-var import_joy48 = require("@mui/joy");
 var import_remark_gfm = __toESM(require("remark-gfm"));
 var LazyReactMarkdown = (0, import_react36.lazy)(() => import("react-markdown"));
 var Markdown = (props) => {
@@ -4851,7 +4807,7 @@ var Markdown = (props) => {
   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_react36.default.createElement(Typography, null, /* @__PURE__ */ import_react36.default.createElement(import_joy47.Skeleton, null, content || ""))
+      fallback: fallback || /* @__PURE__ */ import_react36.default.createElement(Typography, null, /* @__PURE__ */ import_react36.default.createElement(import_joy46.Skeleton, null, content || ""))
     },
     /* @__PURE__ */ import_react36.default.createElement(
       LazyReactMarkdown,
@@ -4866,7 +4822,7 @@ var Markdown = (props) => {
           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_joy48.Link, { href, target: defaultLinkAction }, 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),
@@ -4880,7 +4836,7 @@ Markdown.displayName = "Markdown";
 
 // src/components/MenuButton/MenuButton.tsx
 var import_react37 = __toESM(require("react"));
-var import_joy49 = require("@mui/joy");
+var import_joy48 = require("@mui/joy");
 var import_ExpandMore = __toESM(require("@mui/icons-material/ExpandMore"));
 function MenuButton(props) {
   const {
@@ -4898,7 +4854,7 @@ function MenuButton(props) {
   } = props;
   if (!items.length) {
     return /* @__PURE__ */ import_react37.default.createElement(
-      import_joy49.Button,
+      import_joy48.Button,
       {
         component: props.buttonComponent ?? "button",
         size,
@@ -4914,7 +4870,7 @@ function MenuButton(props) {
     );
   }
   return /* @__PURE__ */ import_react37.default.createElement(Dropdown_default, null, /* @__PURE__ */ import_react37.default.createElement(
-    import_joy49.MenuButton,
+    import_joy48.MenuButton,
     {
       component: props.buttonComponent ?? "button",
       size,
@@ -4934,15 +4890,15 @@ MenuButton.displayName = "MenuButton";
 // src/components/MonthPicker/MonthPicker.tsx
 var import_react38 = __toESM(require("react"));
 var import_CalendarToday3 = __toESM(require("@mui/icons-material/CalendarToday"));
-var import_joy50 = require("@mui/joy");
+var import_joy49 = require("@mui/joy");
 var import_base4 = require("@mui/base");
-var StyledPopper3 = (0, import_joy50.styled)(import_base4.Popper, {
+var StyledPopper3 = (0, import_joy49.styled)(import_base4.Popper, {
   name: "MonthPicker",
   slot: "popper"
 })(({ theme }) => ({
   zIndex: theme.zIndex.tooltip
 }));
-var CalendarSheet3 = (0, import_joy50.styled)(Sheet_default, {
+var CalendarSheet3 = (0, import_joy49.styled)(Sheet_default, {
   name: "MonthPicker",
   slot: "sheet",
   overridesResolver: (props, styles) => styles.root
@@ -4951,7 +4907,7 @@ var CalendarSheet3 = (0, import_joy50.styled)(Sheet_default, {
   boxShadow: theme.shadow.md,
   borderRadius: theme.radius.md
 }));
-var MonthPickerRoot = (0, import_joy50.styled)("div", {
+var MonthPickerRoot = (0, import_joy49.styled)("div", {
   name: "MonthPicker",
   slot: "root",
   overridesResolver: (props, styles) => styles.root
@@ -4988,7 +4944,7 @@ function parseDate3(dateString, format) {
   return result;
 }
 var MonthPicker = (0, import_react38.forwardRef)((inProps, ref) => {
-  const props = (0, import_joy50.useThemeProps)({ props: inProps, name: "MonthPicker" });
+  const props = (0, import_joy49.useThemeProps)({ props: inProps, name: "MonthPicker" });
   const {
     onChange,
     disabled,
@@ -5188,15 +5144,15 @@ var MonthPicker = (0, import_react38.forwardRef)((inProps, ref) => {
 var import_react39 = __toESM(require("react"));
 var import_react_imask3 = require("react-imask");
 var import_CalendarToday4 = __toESM(require("@mui/icons-material/CalendarToday"));
-var import_joy51 = require("@mui/joy");
+var import_joy50 = require("@mui/joy");
 var import_base5 = require("@mui/base");
-var StyledPopper4 = (0, import_joy51.styled)(import_base5.Popper, {
+var StyledPopper4 = (0, import_joy50.styled)(import_base5.Popper, {
   name: "MonthRangePicker",
   slot: "popper"
 })(({ theme }) => ({
   zIndex: theme.zIndex.tooltip
 }));
-var CalendarSheet4 = (0, import_joy51.styled)(Sheet_default, {
+var CalendarSheet4 = (0, import_joy50.styled)(Sheet_default, {
   name: "MonthRangePicker",
   slot: "sheet",
   overridesResolver: (props, styles) => styles.root
@@ -5206,7 +5162,7 @@ var CalendarSheet4 = (0, import_joy51.styled)(Sheet_default, {
   boxShadow: theme.shadow.md,
   borderRadius: theme.radius.md
 }));
-var MonthRangePickerRoot = (0, import_joy51.styled)("div", {
+var MonthRangePickerRoot = (0, import_joy50.styled)("div", {
   name: "MonthRangePicker",
   slot: "root",
   overridesResolver: (props, styles) => styles.root
@@ -5274,7 +5230,7 @@ var TextMaskAdapter7 = import_react39.default.forwardRef(function TextMaskAdapte
   );
 });
 var MonthRangePicker = (0, import_react39.forwardRef)((inProps, ref) => {
-  const props = (0, import_joy51.useThemeProps)({ props: inProps, name: "MonthRangePicker" });
+  const props = (0, import_joy50.useThemeProps)({ props: inProps, name: "MonthRangePicker" });
   const {
     onChange,
     disabled,
@@ -5425,21 +5381,21 @@ MonthRangePicker.displayName = "MonthRangePicker";
 
 // src/components/NavigationGroup/NavigationGroup.tsx
 var import_react40 = __toESM(require("react"));
-var import_joy52 = require("@mui/joy");
-var AccordionSummary2 = (0, import_joy52.styled)(import_joy52.AccordionSummary, {
+var import_joy51 = require("@mui/joy");
+var AccordionSummary2 = (0, import_joy51.styled)(import_joy51.AccordionSummary, {
   name: "NavigationGroup",
   slot: "Summary",
   shouldForwardProp: (prop) => prop !== "useIcon" && prop !== "level"
 })(({ theme, useIcon, level }) => ({
-  [`& .${import_joy52.accordionSummaryClasses.button}`]: {
+  [`& .${import_joy51.accordionSummaryClasses.button}`]: {
     padding: theme.spacing(4, 6, 4, (useIcon ? 6 : 8) + (level || 0) * 8),
-    [`&.${import_joy52.accordionSummaryClasses.expanded}`]: {
+    [`&.${import_joy51.accordionSummaryClasses.expanded}`]: {
       color: theme.palette.primary.plainColor,
       "--Icon-color": theme.palette.primary.plainColor
     }
   }
 }));
-var AccordionDetails2 = (0, import_joy52.styled)(import_joy52.AccordionDetails, {
+var AccordionDetails2 = (0, import_joy51.styled)(import_joy51.AccordionDetails, {
   name: "NavigationGroup",
   slot: "Details"
 })(({ theme }) => ({
@@ -5448,13 +5404,13 @@ var AccordionDetails2 = (0, import_joy52.styled)(import_joy52.AccordionDetails,
 }));
 function NavigationGroup(props) {
   const { title, children, startDecorator, level, ...rest } = props;
-  return /* @__PURE__ */ import_react40.default.createElement(import_joy52.Accordion, { ...rest }, /* @__PURE__ */ import_react40.default.createElement(AccordionSummary2, { useIcon: !!startDecorator, level }, /* @__PURE__ */ import_react40.default.createElement(import_joy52.Stack, { direction: "row", gap: 4 }, startDecorator, title)), /* @__PURE__ */ import_react40.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_react41 = __toESM(require("react"));
-var import_joy53 = require("@mui/joy");
-var ListItemButton = (0, import_joy53.styled)(import_joy53.ListItemButton, {
+var import_joy52 = require("@mui/joy");
+var ListItemButton = (0, import_joy52.styled)(import_joy52.ListItemButton, {
   name: "NavigationItem",
   slot: "Button",
   shouldForwardProp: (prop) => prop !== "useIcon" && prop !== "level"
@@ -5468,7 +5424,7 @@ var ListItemButton = (0, import_joy53.styled)(import_joy53.ListItemButton, {
   "&:active": {
     backgroundColor: theme.palette.neutral.plainActiveBg
   },
-  [`&.${import_joy53.listItemButtonClasses.selected}`]: {
+  [`&.${import_joy52.listItemButtonClasses.selected}`]: {
     color: theme.palette.primary.plainColor,
     "--Icon-color": theme.palette.primary.plainColor,
     "&:not(:hover):not(:active)": {
@@ -5481,7 +5437,7 @@ function NavigationItem(props) {
   const handleClick = () => {
     onClick?.(id);
   };
-  return /* @__PURE__ */ import_react41.default.createElement(import_joy53.ListItem, { ...rest }, /* @__PURE__ */ import_react41.default.createElement(
+  return /* @__PURE__ */ import_react41.default.createElement(import_joy52.ListItem, { ...rest }, /* @__PURE__ */ import_react41.default.createElement(
     ListItemButton,
     {
       level,
@@ -5490,7 +5446,7 @@ function NavigationItem(props) {
       "aria-current": selected,
       onClick: handleClick
     },
-    startDecorator && /* @__PURE__ */ import_react41.default.createElement(import_joy53.ListItemDecorator, null, startDecorator),
+    startDecorator && /* @__PURE__ */ import_react41.default.createElement(import_joy52.ListItemDecorator, null, startDecorator),
     children
   ));
 }
@@ -5537,7 +5493,7 @@ Navigator.displayName = "Navigator";
 // src/components/PercentageInput/PercentageInput.tsx
 var import_react43 = __toESM(require("react"));
 var import_react_number_format2 = require("react-number-format");
-var import_joy54 = require("@mui/joy");
+var import_joy53 = require("@mui/joy");
 var padDecimal = (value, decimalScale) => {
   const [integer, decimal = ""] = `${value}`.split(".");
   return Number(`${integer}${decimal.padEnd(decimalScale, "0")}`);
@@ -5564,14 +5520,14 @@ var TextMaskAdapter9 = import_react43.default.forwardRef(function TextMaskAdapte
     }
   );
 });
-var PercentageInputRoot = (0, import_joy54.styled)(Input_default, {
+var PercentageInputRoot = (0, import_joy53.styled)(Input_default, {
   name: "PercentageInput",
   slot: "Root",
   overridesResolver: (props, styles) => styles.root
 })({});
 var PercentageInput = import_react43.default.forwardRef(
   function PercentageInput2(inProps, ref) {
-    const props = (0, import_joy54.useThemeProps)({ props: inProps, name: "PercentageInput" });
+    const props = (0, import_joy53.useThemeProps)({ props: inProps, name: "PercentageInput" });
     const {
       name,
       onChange,
@@ -5651,12 +5607,12 @@ var PercentageInput = import_react43.default.forwardRef(
 PercentageInput.displayName = "PercentageInput";
 
 // src/components/Radio/Radio.tsx
-var import_joy55 = require("@mui/joy");
+var import_joy54 = require("@mui/joy");
 var import_framer_motion27 = require("framer-motion");
-var MotionRadio = (0, import_framer_motion27.motion)(import_joy55.Radio);
+var MotionRadio = (0, import_framer_motion27.motion)(import_joy54.Radio);
 var Radio = MotionRadio;
 Radio.displayName = "Radio";
-var MotionRadioGroup = (0, import_framer_motion27.motion)(import_joy55.RadioGroup);
+var MotionRadioGroup = (0, import_framer_motion27.motion)(import_joy54.RadioGroup);
 var RadioGroup = MotionRadioGroup;
 RadioGroup.displayName = "RadioGroup";
 
@@ -5670,18 +5626,18 @@ RadioList.displayName = "RadioList";
 
 // src/components/Stepper/Stepper.tsx
 var import_react45 = __toESM(require("react"));
-var import_joy56 = require("@mui/joy");
+var import_joy55 = require("@mui/joy");
 var import_Check = __toESM(require("@mui/icons-material/Check"));
 var import_framer_motion28 = require("framer-motion");
-var Step = (0, import_joy56.styled)(import_joy56.Step)({});
+var Step = (0, import_joy55.styled)(import_joy55.Step)({});
 Step.displayName = "Step";
-var StepIndicator = (0, import_joy56.styled)(import_joy56.StepIndicator)({});
+var StepIndicator = (0, import_joy55.styled)(import_joy55.StepIndicator)({});
 StepIndicator.displayName = "StepIndicator";
-var StyledStepper = (0, import_joy56.styled)(import_joy56.Stepper)(({ theme }) => ({
+var StyledStepper = (0, import_joy55.styled)(import_joy55.Stepper)(({ theme }) => ({
   "--StepIndicator-size": "24px",
   "--Step-gap": theme.spacing(2),
   "--joy-palette-success-solidBg": "var(--joy-palette-success-400)",
-  [`& .${import_joy56.stepIndicatorClasses.root}`]: {
+  [`& .${import_joy55.stepIndicatorClasses.root}`]: {
     fontSize: "var(--ceed-fontSize-xs)"
   }
 }));
@@ -5705,24 +5661,24 @@ function Stepper(props) {
       sx: (theme) => ({
         "--StepIndicator-size": "24px",
         "--Step-gap": theme.spacing(2),
-        [`& .${import_joy56.stepIndicatorClasses.root}`]: {
+        [`& .${import_joy55.stepIndicatorClasses.root}`]: {
           fontSize: "var(--ceed-fontSize-xs)"
         },
-        [`& .${import_joy56.stepClasses.completed}`]: {
+        [`& .${import_joy55.stepClasses.completed}`]: {
           "&::after": { bgcolor: activeLineColor },
-          [`& .${import_joy56.stepIndicatorClasses.root}`]: {
+          [`& .${import_joy55.stepIndicatorClasses.root}`]: {
             bgcolor: activeColor
           }
         },
-        [`& .${import_joy56.stepClasses.active}`]: {
+        [`& .${import_joy55.stepClasses.active}`]: {
           "&::after": { bgcolor: inactiveLineColor },
-          [`& .${import_joy56.stepIndicatorClasses.root}`]: {
+          [`& .${import_joy55.stepIndicatorClasses.root}`]: {
             bgcolor: activeColor
           }
         },
-        [`& .${import_joy56.stepClasses.disabled}`]: {
+        [`& .${import_joy55.stepClasses.disabled}`]: {
           "&::after": { bgcolor: inactiveLineColor },
-          [`& .${import_joy56.stepIndicatorClasses.root}`]: {
+          [`& .${import_joy55.stepIndicatorClasses.root}`]: {
             bgcolor: theme.vars.palette.background.surface,
             borderColor: theme.vars.palette.neutral.outlinedBorder,
             borderWidth: "1px",
@@ -5763,10 +5719,10 @@ Stepper.displayName = "Stepper";
 
 // src/components/Switch/Switch.tsx
 var import_react46 = __toESM(require("react"));
-var import_joy57 = require("@mui/joy");
+var import_joy56 = require("@mui/joy");
 var import_framer_motion29 = require("framer-motion");
-var MotionSwitch = (0, import_framer_motion29.motion)(import_joy57.Switch);
-var StyledThumb = (0, import_joy57.styled)(import_framer_motion29.motion.div)({
+var MotionSwitch = (0, import_framer_motion29.motion)(import_joy56.Switch);
+var StyledThumb = (0, import_joy56.styled)(import_framer_motion29.motion.div)({
   "--Icon-fontSize": "calc(var(--Switch-thumbSize) * 0.75)",
   display: "inline-flex",
   justifyContent: "center",
@@ -5779,7 +5735,7 @@ var StyledThumb = (0, import_joy57.styled)(import_framer_motion29.motion.div)({
   boxShadow: "var(--Switch-thumbShadow)",
   color: "var(--Switch-thumbColor)",
   backgroundColor: "var(--Switch-thumbBackground)",
-  [`&.${import_joy57.switchClasses.checked}`]: {
+  [`&.${import_joy56.switchClasses.checked}`]: {
     left: "unset",
     right: "var(--Switch-thumbOffset)"
   }
@@ -5806,18 +5762,18 @@ Switch.displayName = "Switch";
 
 // src/components/Tabs/Tabs.tsx
 var import_react47 = __toESM(require("react"));
-var import_joy58 = require("@mui/joy");
-var StyledTabs = (0, import_joy58.styled)(import_joy58.Tabs)(({ theme }) => ({
+var import_joy57 = require("@mui/joy");
+var StyledTabs = (0, import_joy57.styled)(import_joy57.Tabs)(({ theme }) => ({
   backgroundColor: theme.palette.background.body
 }));
 var Tabs = StyledTabs;
 Tabs.displayName = "Tabs";
-var StyledTab = (0, import_joy58.styled)(import_joy58.Tab)(({ theme }) => ({
+var StyledTab = (0, import_joy57.styled)(import_joy57.Tab)(({ theme }) => ({
   gap: theme.spacing(2),
-  [`&:not(.${import_joy58.tabClasses.selected})`]: {
+  [`&:not(.${import_joy57.tabClasses.selected})`]: {
     color: theme.palette.neutral[700]
   },
-  [`&.${import_joy58.tabClasses.variantPlain}`]: {
+  [`&.${import_joy57.tabClasses.variantPlain}`]: {
     backgroundColor: theme.palette.background.body
   }
 }));
@@ -5825,12 +5781,12 @@ var Tab = (0, import_react47.forwardRef)(function Tab2({ startDecorator, endDeco
   return /* @__PURE__ */ import_react47.default.createElement(StyledTab, { ...props, ref }, startDecorator, children, endDecorator);
 });
 Tab.displayName = "Tab";
-var TabList = import_joy58.TabList;
-var TabPanel = import_joy58.TabPanel;
+var TabList = import_joy57.TabList;
+var TabPanel = import_joy57.TabPanel;
 
 // src/components/ThemeProvider/ThemeProvider.tsx
 var import_react48 = __toESM(require("react"));
-var import_joy59 = require("@mui/joy");
+var import_joy58 = require("@mui/joy");
 var colorScheme = {
   palette: {
     danger: {
@@ -5883,7 +5839,7 @@ var colorScheme = {
     }
   }
 };
-var defaultTheme = (0, import_joy59.extendTheme)({
+var defaultTheme = (0, import_joy58.extendTheme)({
   cssVarPrefix: "ceed",
   spacing: 4,
   breakpoints: {
@@ -5935,7 +5891,7 @@ var defaultTheme = (0, import_joy59.extendTheme)({
       },
       styleOverrides: {
         root: {
-          [`.${import_joy59.inputClasses.root}`]: {
+          [`.${import_joy58.inputClasses.root}`]: {
             // NOTE: placeholder char 를 텍스트로 표시하므로 동일한 너비를 가지는 mono font 를 사용해야 이질감이 없다.
             "font-family": "monospace"
           }
@@ -5948,7 +5904,7 @@ var defaultTheme = (0, import_joy59.extendTheme)({
       },
       styleOverrides: {
         root: {
-          [`.${import_joy59.inputClasses.root}`]: {
+          [`.${import_joy58.inputClasses.root}`]: {
             // NOTE: placeholder char 를 텍스트로 표시하므로 동일한 너비를 가지는 mono font 를 사용해야 이질감이 없다.
             "font-family": "monospace"
           }
@@ -5961,7 +5917,7 @@ var defaultTheme = (0, import_joy59.extendTheme)({
       },
       styleOverrides: {
         root: {
-          [`.${import_joy59.inputClasses.root}`]: {
+          [`.${import_joy58.inputClasses.root}`]: {
             // NOTE: placeholder char 를 텍스트로 표시하므로 동일한 너비를 가지는 mono font 를 사용해야 이질감이 없다.
             "font-family": "monospace"
           }
@@ -5974,7 +5930,7 @@ var defaultTheme = (0, import_joy59.extendTheme)({
       },
       styleOverrides: {
         root: {
-          [`.${import_joy59.inputClasses.root}`]: {
+          [`.${import_joy58.inputClasses.root}`]: {
             // NOTE: placeholder char 를 텍스트로 표시하므로 동일한 너비를 가지는 mono font 를 사용해야 이질감이 없다.
             "font-family": "monospace"
           }
@@ -5987,7 +5943,7 @@ var defaultTheme = (0, import_joy59.extendTheme)({
       },
       styleOverrides: {
         root: {
-          [`.${import_joy59.inputClasses.root}`]: {
+          [`.${import_joy58.inputClasses.root}`]: {
             // NOTE: placeholder char 를 텍스트로 표시하므로 동일한 너비를 가지는 mono font 를 사용해야 이질감이 없다.
             "font-family": "monospace"
           }
@@ -6029,7 +5985,7 @@ var defaultTheme = (0, import_joy59.extendTheme)({
             outline: `${theme.palette.primary[500]} solid 2px`,
             outlineOffset: "-2px"
           },
-          [`& .${import_joy59.checkboxClasses.root}`]: {
+          [`& .${import_joy58.checkboxClasses.root}`]: {
             verticalAlign: "middle"
           }
         })
@@ -6079,13 +6035,13 @@ var defaultTheme = (0, import_joy59.extendTheme)({
 });
 function ThemeProvider(props) {
   const theme = props.theme || defaultTheme;
-  return /* @__PURE__ */ import_react48.default.createElement(import_react48.default.Fragment, null, /* @__PURE__ */ import_react48.default.createElement(import_joy59.CssVarsProvider, { theme }, /* @__PURE__ */ import_react48.default.createElement(import_joy59.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_react49 = __toESM(require("react"));
-var import_joy60 = require("@mui/joy");
+var import_joy59 = require("@mui/joy");
 var import_CloudUploadRounded = __toESM(require("@mui/icons-material/CloudUploadRounded"));
 var import_UploadFileRounded = __toESM(require("@mui/icons-material/UploadFileRounded"));
 var import_ClearRounded = __toESM(require("@mui/icons-material/ClearRounded"));
@@ -6107,7 +6063,7 @@ var esmFiles = {
     "@atlaskit/pragmatic-drag-and-drop/dist/esm/entry-point/prevent-unhandled.js"
   )
 };
-var VisuallyHiddenInput = (0, import_joy60.styled)(import_joy60.Input)({
+var VisuallyHiddenInput = (0, import_joy59.styled)(import_joy59.Input)({
   width: "1px",
   height: "1px",
   overflow: "hidden",
@@ -6116,18 +6072,18 @@ var VisuallyHiddenInput = (0, import_joy60.styled)(import_joy60.Input)({
   clipPath: "inset(50%)",
   position: "absolute"
 });
-var PreviewRoot = (0, import_joy60.styled)(Stack_default, {
+var PreviewRoot = (0, import_joy59.styled)(Stack_default, {
   name: "Uploader",
   slot: "PreviewRoot"
 })({});
-var UploadCard = (0, import_joy60.styled)(Card, {
+var UploadCard = (0, import_joy59.styled)(Card, {
   name: "Uploader",
   slot: "UploadCard"
 })(({ theme }) => ({
   padding: theme.spacing(2.5),
   border: `1px solid ${theme.palette.neutral.outlinedBorder}`
 }));
-var UploadFileIcon = (0, import_joy60.styled)(import_UploadFileRounded.default, {
+var UploadFileIcon = (0, import_joy59.styled)(import_UploadFileRounded.default, {
   name: "Uploader",
   slot: "UploadFileIcon"
 })(({ theme }) => ({
@@ -6135,7 +6091,7 @@ var UploadFileIcon = (0, import_joy60.styled)(import_UploadFileRounded.default,
   width: "32px",
   height: "32px"
 }));
-var ClearIcon2 = (0, import_joy60.styled)(import_ClearRounded.default, {
+var ClearIcon2 = (0, import_joy59.styled)(import_ClearRounded.default, {
   name: "Uploader",
   slot: "ClearIcon"
 })(({ theme }) => ({
@@ -6175,13 +6131,13 @@ var Preview = (props) => {
     file.name
   ), !!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_joy60.styled)(Stack_default, {
+var UploaderRoot = (0, import_joy59.styled)(Stack_default, {
   name: "Uploader",
   slot: "root"
 })(({ theme }) => ({
   gap: theme.spacing(2)
 }));
-var FileDropZone = (0, import_joy60.styled)(Sheet_default, {
+var FileDropZone = (0, import_joy59.styled)(Sheet_default, {
   name: "Uploader",
   slot: "dropZone",
   shouldForwardProp: (prop) => prop !== "error" && prop !== "disabled"
@@ -6202,7 +6158,7 @@ var FileDropZone = (0, import_joy60.styled)(Sheet_default, {
     }
   })
 );
-var UploaderIcon = (0, import_joy60.styled)(import_CloudUploadRounded.default, {
+var UploaderIcon = (0, import_joy59.styled)(import_CloudUploadRounded.default, {
   name: "Uploader",
   slot: "iconContainer",
   shouldForwardProp: (prop) => prop !== "error" && prop !== "disabled"