@ceed/cds 1.24.1-next.3 → 1.26.0

package/dist/index.js

@@ -1,59 +1,3 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __esm = (fn, res) => function __init() {
-  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
-};
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-
-// src/libs/rehype-accent/index.ts
-var rehype_accent_exports = {};
-__export(rehype_accent_exports, {
-  rehypeAccent: () => rehypeAccent
-});
-import { visit } from "unist-util-visit";
-function rehypeAccent(options) {
-  const { accentColor } = options;
-  return (tree) => {
-    visit(tree, "text", (node, index, parent) => {
-      const value = node.value;
-      const regex = /\|\|.*?\|\|/g;
-      let match;
-      let lastIndex = 0;
-      const newNodes = [];
-      while ((match = regex.exec(value)) !== null) {
-        if (match.index > lastIndex) {
-          newNodes.push({
-            type: "text",
-            value: value.slice(lastIndex, match.index)
-          });
-        }
-        const innerText = match[0].split("||")[1];
-        newNodes.push({
-          type: "element",
-          tagName: "span",
-          properties: { textColor: accentColor },
-          children: [{ type: "text", value: innerText }]
-        });
-        lastIndex = match.index + match[0].length;
-      }
-      if (lastIndex < value.length) {
-        newNodes.push({ type: "text", value: value.slice(lastIndex) });
-      }
-      if (newNodes.length) {
-        parent.children.splice(index, 1, ...newNodes);
-      }
-    });
-  };
-}
-var init_rehype_accent = __esm({
-  "src/libs/rehype-accent/index.ts"() {
-    "use strict";
-  }
-});
-
 // src/index.ts
 import {
   useTheme as useTheme2,
@@ -71,7 +15,7 @@ import {
   menuButtonClasses,
   menuItemClasses,
   optionClasses,
-  radioClasses,
+  radioClasses as radioClasses2,
   radioGroupClasses,
   selectClasses,
   switchClasses as switchClasses2,
@@ -83,7 +27,7 @@ import {
   formHelperTextClasses,
   gridClasses,
   stackClasses,
-  sheetClasses,
+  sheetClasses as sheetClasses2,
   modalClasses,
   modalCloseClasses,
   modalDialogClasses,
@@ -152,7 +96,7 @@ import {
   stepperClasses,
   Skeleton as Skeleton2,
   skeletonClasses,
-  styled as styled30
+  styled as styled31
 } from "@mui/joy";
 
 // src/components/Accordions/Accordions.tsx
@@ -759,11 +703,24 @@ Button.displayName = "Button";
 var Button_default = Button;
 
 // src/components/Calendar/Calendar.tsx
-import React11, { Fragment, forwardRef as forwardRef4, useMemo as useMemo4 } from "react";
+import React12, { Fragment, forwardRef as forwardRef4, useCallback as useCallback5, useEffect as useEffect3, useMemo as useMemo4, useRef as useRef3, useState as useState4 } from "react";
 import { styled as styled5 } from "@mui/joy";
 import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
-import { AnimatePresence, motion as motion12 } from "framer-motion";
+import { AnimatePresence, motion as motion13 } from "framer-motion";
+
+// src/components/Tooltip/Tooltip.tsx
+import React10 from "react";
+import { Tooltip as JoyTooltip } from "@mui/joy";
+import { motion as motion12 } from "framer-motion";
+var MotionTooltip = motion12(JoyTooltip);
+var Tooltip = (props) => {
+  return /* @__PURE__ */ React10.createElement(MotionTooltip, { ...props });
+};
+Tooltip.displayName = "Tooltip";
+
+// src/components/Tooltip/index.ts
+var Tooltip_default = Tooltip;
 
 // src/components/Calendar/utils/index.ts
 var getCalendarDates = (date) => {
@@ -1122,6 +1079,12 @@ var useCalendar = (ownerState) => {
 };
 
 // src/components/Calendar/Calendar.tsx
+var MONTH_VIEW_HINT_MESSAGE = "Click the month title to view all months.";
+var MONTH_NAV_CLICK_WINDOW_MS = 1200;
+var MONTH_NAV_CLICK_THRESHOLD = 3;
+var MONTH_VIEW_HINT_DURATION_MS = 5e3;
+var MONTH_VIEW_HINT_COOLDOWN_MS = 3e4;
+var lastMonthViewAssistHintShownAt = 0;
 var CalendarRoot = styled5("div", {
   name: "Calendar",
   slot: "root"
@@ -1148,7 +1111,7 @@ var CalendarViewContainer = styled5("div", {
   overflow: "hidden",
   minHeight: calendarType === "datePicker" ? "250px" : "unset"
 }));
-var CalendarViewTable = styled5(motion12.table, {
+var CalendarViewTable = styled5(motion13.table, {
   name: "Calendar",
   slot: "viewTable"
 })(({ theme }) => ({
@@ -1328,7 +1291,7 @@ var PickerDays = (props) => {
   const { getPickerDayProps, getDayCellProps } = useCalendar(ownerState);
   const calendarDates = useMemo4(() => getCalendarDates(ownerState.viewMonth), [ownerState.viewMonth]);
   const weekdayNames = useMemo4(() => getWeekdayNames(ownerState.locale || "default"), [ownerState.locale]);
-  return /* @__PURE__ */ React11.createElement(CalendarViewContainer, { calendarType: "datePicker" }, /* @__PURE__ */ React11.createElement(AnimatePresence, { initial: false, custom: ownerState.direction }, /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React12.createElement(CalendarViewContainer, { calendarType: "datePicker" }, /* @__PURE__ */ React12.createElement(AnimatePresence, { initial: false, custom: ownerState.direction }, /* @__PURE__ */ React12.createElement(
     CalendarViewTable,
     {
       key: `${ownerState.viewMonth.toString()}_${ownerState.direction}`,
@@ -1357,10 +1320,10 @@ var PickerDays = (props) => {
         }
       }
     },
-    /* @__PURE__ */ React11.createElement(CalendarWeekHeaderContainer, null, /* @__PURE__ */ React11.createElement("tr", null, weekdayNames.map((name, i) => /* @__PURE__ */ React11.createElement(Fragment, { key: `${ownerState.viewMonth}_${name}_${i}` }, /* @__PURE__ */ React11.createElement("th", null, /* @__PURE__ */ React11.createElement(Typography_default, { level: "body-xs", textAlign: "center" }, name)), i < 6 && /* @__PURE__ */ React11.createElement("th", { style: { width: 4 }, "aria-hidden": "true", "aria-description": "cell-gap" }))))),
-    /* @__PURE__ */ React11.createElement(CalendarDayPickerContainer, null, calendarDates.map((weekDates, rowIndex) => /* @__PURE__ */ React11.createElement(Fragment, { key: `${ownerState.viewMonth}_${rowIndex}` }, /* @__PURE__ */ React11.createElement("tr", null, weekDates.map(
-      (date, i) => date ? /* @__PURE__ */ React11.createElement(Fragment, { key: `${ownerState.viewMonth}_${date}_${i}` }, /* @__PURE__ */ React11.createElement(CalendarDayCell, { ...getDayCellProps(date) }, /* @__PURE__ */ React11.createElement(CalendarDay, { size: "sm", variant: "plain", color: "neutral", ...getPickerDayProps(date) }, date)), i < 6 && /* @__PURE__ */ React11.createElement("td", { "aria-hidden": "true", "aria-description": "cell-gap" })) : /* @__PURE__ */ React11.createElement(Fragment, { key: `${ownerState.viewMonth}_${i}` }, /* @__PURE__ */ React11.createElement("td", null), i < 6 && /* @__PURE__ */ React11.createElement("td", { "aria-hidden": "true", "aria-description": "cell-gap" }))
-    )), rowIndex < calendarDates.length - 1 && /* @__PURE__ */ React11.createElement("tr", { "aria-hidden": "true", "aria-description": "row-gap" }, /* @__PURE__ */ React11.createElement("td", { colSpan: 13, style: { height: 4 } })))))
+    /* @__PURE__ */ React12.createElement(CalendarWeekHeaderContainer, null, /* @__PURE__ */ React12.createElement("tr", null, weekdayNames.map((name, i) => /* @__PURE__ */ React12.createElement(Fragment, { key: `${ownerState.viewMonth}_${name}_${i}` }, /* @__PURE__ */ React12.createElement("th", null, /* @__PURE__ */ React12.createElement(Typography_default, { level: "body-xs", textAlign: "center" }, name)), i < 6 && /* @__PURE__ */ React12.createElement("th", { style: { width: 4 }, "aria-hidden": "true", "aria-description": "cell-gap" }))))),
+    /* @__PURE__ */ React12.createElement(CalendarDayPickerContainer, null, calendarDates.map((weekDates, rowIndex) => /* @__PURE__ */ React12.createElement(Fragment, { key: `${ownerState.viewMonth}_${rowIndex}` }, /* @__PURE__ */ React12.createElement("tr", null, weekDates.map(
+      (date, i) => date ? /* @__PURE__ */ React12.createElement(Fragment, { key: `${ownerState.viewMonth}_${date}_${i}` }, /* @__PURE__ */ React12.createElement(CalendarDayCell, { ...getDayCellProps(date) }, /* @__PURE__ */ React12.createElement(CalendarDay, { size: "sm", variant: "plain", color: "neutral", ...getPickerDayProps(date) }, date)), i < 6 && /* @__PURE__ */ React12.createElement("td", { "aria-hidden": "true", "aria-description": "cell-gap" })) : /* @__PURE__ */ React12.createElement(Fragment, { key: `${ownerState.viewMonth}_${i}` }, /* @__PURE__ */ React12.createElement("td", null), i < 6 && /* @__PURE__ */ React12.createElement("td", { "aria-hidden": "true", "aria-description": "cell-gap" }))
+    )), rowIndex < calendarDates.length - 1 && /* @__PURE__ */ React12.createElement("tr", { "aria-hidden": "true", "aria-description": "row-gap" }, /* @__PURE__ */ React12.createElement("td", { colSpan: 13, style: { height: 4 } })))))
   )));
 };
 var PickerMonths = (props) => {
@@ -1377,7 +1340,7 @@ var PickerMonths = (props) => {
     [[]]
   );
   const isMonthPicker = !ownerState.views?.find((view) => view === "day");
-  return /* @__PURE__ */ React11.createElement(CalendarViewContainer, { calendarType: isMonthPicker ? "monthPicker" : "datePicker" }, /* @__PURE__ */ React11.createElement(AnimatePresence, { initial: false, custom: ownerState.direction }, /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React12.createElement(CalendarViewContainer, { calendarType: isMonthPicker ? "monthPicker" : "datePicker" }, /* @__PURE__ */ React12.createElement(AnimatePresence, { initial: false, custom: ownerState.direction }, /* @__PURE__ */ React12.createElement(
     CalendarViewTable,
     {
       key: `${ownerState.viewMonth.getFullYear()}_${ownerState.direction}`,
@@ -1406,7 +1369,7 @@ var PickerMonths = (props) => {
         }
       }
     },
-    /* @__PURE__ */ React11.createElement("tbody", null, chunkedMonths.map((months, i) => /* @__PURE__ */ React11.createElement(Fragment, { key: months.join("_") }, /* @__PURE__ */ React11.createElement("tr", null, months.map((monthIndex, j) => /* @__PURE__ */ React11.createElement(Fragment, { key: monthIndex }, /* @__PURE__ */ React11.createElement(CalendarMonthCell, { ...getMonthCellProps(monthIndex) }, /* @__PURE__ */ React11.createElement(CalendarMonth, { size: "sm", variant: "plain", color: "neutral", ...getPickerMonthProps(monthIndex) }, getMonthNameFromIndex(monthIndex, ownerState.locale))), j < 3 && /* @__PURE__ */ React11.createElement("td", { style: { width: 4 }, "aria-hidden": "true", "aria-description": "cell-gap" })))), i < chunkedMonths.length - 1 && /* @__PURE__ */ React11.createElement("tr", { "aria-hidden": "true", "aria-description": "row-gap" }, /* @__PURE__ */ React11.createElement("td", { colSpan: 7, style: { height: 4 } })))))
+    /* @__PURE__ */ React12.createElement("tbody", null, chunkedMonths.map((months, i) => /* @__PURE__ */ React12.createElement(Fragment, { key: months.join("_") }, /* @__PURE__ */ React12.createElement("tr", null, months.map((monthIndex, j) => /* @__PURE__ */ React12.createElement(Fragment, { key: monthIndex }, /* @__PURE__ */ React12.createElement(CalendarMonthCell, { ...getMonthCellProps(monthIndex) }, /* @__PURE__ */ React12.createElement(CalendarMonth, { size: "sm", variant: "plain", color: "neutral", ...getPickerMonthProps(monthIndex) }, getMonthNameFromIndex(monthIndex, ownerState.locale))), j < 3 && /* @__PURE__ */ React12.createElement("td", { style: { width: 4 }, "aria-hidden": "true", "aria-description": "cell-gap" })))), i < chunkedMonths.length - 1 && /* @__PURE__ */ React12.createElement("tr", { "aria-hidden": "true", "aria-description": "row-gap" }, /* @__PURE__ */ React12.createElement("td", { colSpan: 7, style: { height: 4 } })))))
   )));
 };
 var Calendar = forwardRef4((inProps, ref) => {
@@ -1428,17 +1391,96 @@ var Calendar = forwardRef4((inProps, ref) => {
     ...others
   } = props;
   const { calendarTitle, onPrev, onNext } = useCalendar(ownerState);
-  return /* @__PURE__ */ React11.createElement(CalendarRoot, { ref, ...others }, /* @__PURE__ */ React11.createElement(CalendarHeader, null, /* @__PURE__ */ React11.createElement(IconButton_default, { size: "sm", onClick: onPrev, "aria-label": `Previous ${view === "day" ? "Month" : "Year"}` }, /* @__PURE__ */ React11.createElement(ChevronLeftIcon, null)), /* @__PURE__ */ React11.createElement(
-    CalendarSwitchViewButton,
+  const [isMonthViewAssistHintOpen, setIsMonthViewAssistHintOpen] = useState4(false);
+  const monthNavClickTimestampsRef = useRef3([]);
+  const monthViewAssistHintShownInSessionRef = useRef3(false);
+  const monthViewAssistHintTimeoutRef = useRef3(null);
+  const hasEndDate = Boolean(value?.[1]);
+  const isRangeHintEligible = Boolean(rangeSelection && !hasEndDate);
+  const isHintEligible = Boolean(view === "day" && (!rangeSelection || isRangeHintEligible));
+  const monthViewHintMessage = MONTH_VIEW_HINT_MESSAGE;
+  useEffect3(() => {
+    if (!isHintEligible) {
+      monthNavClickTimestampsRef.current = [];
+      setIsMonthViewAssistHintOpen(false);
+    }
+  }, [isHintEligible]);
+  useEffect3(() => {
+    return () => {
+      if (monthViewAssistHintTimeoutRef.current) {
+        clearTimeout(monthViewAssistHintTimeoutRef.current);
+      }
+    };
+  }, []);
+  const closeMonthViewAssistHint = useCallback5(() => {
+    if (monthViewAssistHintTimeoutRef.current) {
+      clearTimeout(monthViewAssistHintTimeoutRef.current);
+      monthViewAssistHintTimeoutRef.current = null;
+    }
+    setIsMonthViewAssistHintOpen(false);
+  }, []);
+  const showMonthViewAssistHint = useCallback5(() => {
+    const now = Date.now();
+    if (monthViewAssistHintShownInSessionRef.current) return;
+    if (now - lastMonthViewAssistHintShownAt < MONTH_VIEW_HINT_COOLDOWN_MS) return;
+    monthViewAssistHintShownInSessionRef.current = true;
+    lastMonthViewAssistHintShownAt = now;
+    setIsMonthViewAssistHintOpen(true);
+    if (monthViewAssistHintTimeoutRef.current) {
+      clearTimeout(monthViewAssistHintTimeoutRef.current);
+    }
+    monthViewAssistHintTimeoutRef.current = setTimeout(() => {
+      setIsMonthViewAssistHintOpen(false);
+      monthViewAssistHintTimeoutRef.current = null;
+    }, MONTH_VIEW_HINT_DURATION_MS);
+  }, []);
+  const trackFastMonthNavigation = useCallback5(() => {
+    if (!isHintEligible) return;
+    const now = Date.now();
+    monthNavClickTimestampsRef.current = [
+      ...monthNavClickTimestampsRef.current.filter((timestamp) => now - timestamp <= MONTH_NAV_CLICK_WINDOW_MS),
+      now
+    ];
+    if (monthNavClickTimestampsRef.current.length >= MONTH_NAV_CLICK_THRESHOLD) {
+      showMonthViewAssistHint();
+    }
+  }, [isHintEligible, showMonthViewAssistHint]);
+  const handlePrevClick = useCallback5(() => {
+    onPrev();
+    trackFastMonthNavigation();
+  }, [onPrev, trackFastMonthNavigation]);
+  const handleNextClick = useCallback5(() => {
+    onNext();
+    trackFastMonthNavigation();
+  }, [onNext, trackFastMonthNavigation]);
+  const handleSwitchViewClick = useCallback5(() => {
+    closeMonthViewAssistHint();
+    onViewChange?.();
+  }, [closeMonthViewAssistHint, onViewChange]);
+  return /* @__PURE__ */ React12.createElement(CalendarRoot, { ref, ...others }, /* @__PURE__ */ React12.createElement(CalendarHeader, null, /* @__PURE__ */ React12.createElement(IconButton_default, { size: "sm", onClick: handlePrevClick, "aria-label": `Previous ${view === "day" ? "Month" : "Year"}` }, /* @__PURE__ */ React12.createElement(ChevronLeftIcon, null)), /* @__PURE__ */ React12.createElement(
+    Tooltip_default,
     {
-      ownerState,
-      variant: "plain",
-      color: "neutral",
-      onClick: onViewChange,
-      "aria-label": "Switch Calendar View"
+      title: monthViewHintMessage,
+      arrow: true,
+      open: isMonthViewAssistHintOpen,
+      placement: "bottom",
+      disableFocusListener: true,
+      disableHoverListener: true,
+      disableTouchListener: true,
+      variant: "solid"
     },
-    calendarTitle
-  ), /* @__PURE__ */ React11.createElement(IconButton_default, { size: "sm", onClick: onNext, "aria-label": `Next ${view === "day" ? "Month" : "Year"}` }, /* @__PURE__ */ React11.createElement(ChevronRightIcon, null))), view === "day" && /* @__PURE__ */ React11.createElement(PickerDays, { ownerState }), view === "month" && /* @__PURE__ */ React11.createElement(PickerMonths, { ownerState }));
+    /* @__PURE__ */ React12.createElement(
+      CalendarSwitchViewButton,
+      {
+        ownerState,
+        variant: "plain",
+        color: "neutral",
+        onClick: handleSwitchViewClick,
+        "aria-label": "Switch Calendar View"
+      },
+      calendarTitle
+    )
+  ), /* @__PURE__ */ React12.createElement(IconButton_default, { size: "sm", onClick: handleNextClick, "aria-label": `Next ${view === "day" ? "Month" : "Year"}` }, /* @__PURE__ */ React12.createElement(ChevronRightIcon, null))), view === "day" && /* @__PURE__ */ React12.createElement(PickerDays, { ownerState }), view === "month" && /* @__PURE__ */ React12.createElement(PickerMonths, { ownerState }));
 });
 Calendar.displayName = "Calendar";
 
@@ -1453,30 +1495,30 @@ import {
   CardActions as JoyCardActions,
   CardOverflow as JoyCardOverflow
 } from "@mui/joy";
-import { motion as motion13 } from "framer-motion";
-var MotionCard = motion13(JoyCard);
+import { motion as motion14 } from "framer-motion";
+var MotionCard = motion14(JoyCard);
 var Card = MotionCard;
 Card.displayName = "Card";
-var MotionCardContent = motion13(JoyCardContent);
+var MotionCardContent = motion14(JoyCardContent);
 var CardContent = MotionCardContent;
 CardContent.displayName = "CardContent";
-var MotionCardCover = motion13(JoyCardCover);
+var MotionCardCover = motion14(JoyCardCover);
 var CardCover = MotionCardCover;
 CardCover.displayName = "CardCover";
-var MotionCardActions = motion13(JoyCardActions);
+var MotionCardActions = motion14(JoyCardActions);
 var CardActions = MotionCardActions;
 CardActions.displayName = "CardActions";
-var MotionCardOverflow = motion13(JoyCardOverflow);
+var MotionCardOverflow = motion14(JoyCardOverflow);
 var CardOverflow = MotionCardOverflow;
 CardOverflow.displayName = "CardOverflow";
 
 // src/components/Checkbox/Checkbox.tsx
-import React12 from "react";
+import React13 from "react";
 import { Checkbox as JoyCheckbox } from "@mui/joy";
-import { motion as motion14 } from "framer-motion";
-var MotionCheckbox = motion14(JoyCheckbox);
+import { motion as motion15 } from "framer-motion";
+var MotionCheckbox = motion15(JoyCheckbox);
 var Checkbox = (props) => {
-  return /* @__PURE__ */ React12.createElement(MotionCheckbox, { ...props });
+  return /* @__PURE__ */ React13.createElement(MotionCheckbox, { ...props });
 };
 Checkbox.displayName = "Checkbox";
 
@@ -1485,7 +1527,7 @@ var Checkbox_default = Checkbox;
 
 // src/components/Container/Container.tsx
 import { styled as styled6 } from "@mui/joy";
-import React13, { forwardRef as forwardRef5 } from "react";
+import React14, { forwardRef as forwardRef5 } from "react";
 var ContainerRoot = styled6("div", {
   name: "Container",
   slot: "root",
@@ -1512,24 +1554,23 @@ var ContainerRoot = styled6("div", {
   } : null
 ]);
 var Container = forwardRef5(function Container2(props, ref) {
-  return /* @__PURE__ */ React13.createElement(ContainerRoot, { ref, ...props });
+  return /* @__PURE__ */ React14.createElement(ContainerRoot, { ref, ...props });
 });
 Container.displayName = "Container";
 
 // src/components/CurrencyInput/CurrencyInput.tsx
-import React15, { useCallback as useCallback6, useMemo as useMemo5, useState as useState5 } from "react";
-import { IntlMessageFormat as IntlMessageFormat2 } from "intl-messageformat";
+import React16, { useCallback as useCallback7, useMemo as useMemo5, useState as useState6 } from "react";
 import { NumericFormat } from "react-number-format";
 
 // src/components/Input/Input.tsx
-import React14, { useCallback as useCallback5, useState as useState4 } from "react";
+import React15, { useCallback as useCallback6, useState as useState5 } from "react";
 import { Input as JoyInput } from "@mui/joy";
-import { motion as motion15 } from "framer-motion";
+import { motion as motion16 } from "framer-motion";
 import ClearIcon from "@mui/icons-material/Close";
 import VisibilityIcon from "@mui/icons-material/Visibility";
 import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
-var MotionInput = motion15(JoyInput);
-var Input = React14.forwardRef((props, ref) => {
+var MotionInput = motion16(JoyInput);
+var Input = React15.forwardRef((props, ref) => {
   const {
     label,
     helperText,
@@ -1552,11 +1593,11 @@ var Input = React14.forwardRef((props, ref) => {
   if (type === "password" && innerProps.endDecorator) {
     console.warn('Input: endDecorator is not supported when type="password"');
   }
-  const [passwordVisible, setPasswordVisible] = useState4(false);
+  const [passwordVisible, setPasswordVisible] = useState5(false);
   const [value, setValue] = useControlledState(
     props.value,
     props.defaultValue,
-    useCallback5(
+    useCallback6(
       (value2) => {
         onChange?.({
           /**
@@ -1582,7 +1623,7 @@ var Input = React14.forwardRef((props, ref) => {
   const actualType = type === "password" && passwordVisible ? "text" : type;
   const isPasswordType = type === "password";
   const showPasswordToggle = isPasswordType && !disableTogglePasswordButton;
-  const input = /* @__PURE__ */ React14.createElement(
+  const input = /* @__PURE__ */ React15.createElement(
     MotionInput,
     {
       value,
@@ -1597,7 +1638,7 @@ var Input = React14.forwardRef((props, ref) => {
         ...innerProps.slotProps
       },
       ...innerProps,
-      endDecorator: isPasswordType ? showPasswordToggle ? /* @__PURE__ */ React14.createElement(Stack_default, { gap: 1, direction: "row" }, /* @__PURE__ */ React14.createElement(
+      endDecorator: isPasswordType ? showPasswordToggle ? /* @__PURE__ */ React15.createElement(Stack_default, { gap: 1, direction: "row" }, /* @__PURE__ */ React15.createElement(
         IconButton_default,
         {
           onMouseDown: (e) => e.preventDefault(),
@@ -1605,19 +1646,19 @@ var Input = React14.forwardRef((props, ref) => {
           disabled,
           "aria-label": passwordVisible ? "Hide password" : "Show password"
         },
-        passwordVisible ? /* @__PURE__ */ React14.createElement(VisibilityOffIcon, null) : /* @__PURE__ */ React14.createElement(VisibilityIcon, null)
-      )) : null : enableClearable ? /* @__PURE__ */ React14.createElement(Stack_default, { gap: 1, direction: "row" }, innerProps.endDecorator, value && /* @__PURE__ */ React14.createElement(
+        passwordVisible ? /* @__PURE__ */ React15.createElement(VisibilityOffIcon, null) : /* @__PURE__ */ React15.createElement(VisibilityIcon, null)
+      )) : null : enableClearable ? /* @__PURE__ */ React15.createElement(Stack_default, { gap: 1, direction: "row" }, innerProps.endDecorator, value && /* @__PURE__ */ React15.createElement(
         IconButton_default,
         {
           onMouseDown: (e) => e.preventDefault(),
           onClick: handleClear,
           "aria-label": "Clear"
         },
-        /* @__PURE__ */ React14.createElement(ClearIcon, null)
+        /* @__PURE__ */ React15.createElement(ClearIcon, null)
       )) : innerProps.endDecorator
     }
   );
-  return /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React15.createElement(
     FormControl_default,
     {
       required,
@@ -1628,9 +1669,9 @@ var Input = React14.forwardRef((props, ref) => {
       sx,
       className
     },
-    label && /* @__PURE__ */ React14.createElement(FormLabel_default, null, label),
+    label && /* @__PURE__ */ React15.createElement(FormLabel_default, null, label),
     input,
-    helperText && /* @__PURE__ */ React14.createElement(FormHelperText_default, null, helperText)
+    helperText && /* @__PURE__ */ React15.createElement(FormHelperText_default, null, helperText)
   );
 });
 Input.displayName = "Input";
@@ -1642,7 +1683,6 @@ var Input_default = Input;
 import { styled as styled7, useThemeProps as useThemeProps3 } from "@mui/joy";
 
 // src/components/CurrencyInput/hooks/use-currency-setting.ts
-import IntlMessageFormat from "intl-messageformat";
 var CURRENCY_DECIMAL_MAP = {
   AED: 2,
   ALL: 2,
@@ -1787,9 +1827,10 @@ var CURRENCY_DECIMAL_MAP = {
 };
 var useCurrencySetting = (props) => {
   const { currency = "USD", placeholder } = props;
-  const [symbol, thousandSeparator, decimalSeparator, ...rest] = new IntlMessageFormat(
-    `{amount, number, ::currency/${currency} unit-width-narrow}`
-  ).format({ amount: 1e3 }).toString().replace(/\d/g, "").split("");
+  const parts = new Intl.NumberFormat("en-US", { style: "currency", currency }).formatToParts(1000.01);
+  const symbol = parts.find((p) => p.type === "currency")?.value ?? "$";
+  const thousandSeparator = parts.find((p) => p.type === "group")?.value ?? ",";
+  const decimalSeparator = parts.find((p) => p.type === "decimal")?.value;
   const decimalScale = CURRENCY_DECIMAL_MAP[currency];
   return {
     symbol: `${symbol} `,
@@ -1802,9 +1843,9 @@ var useCurrencySetting = (props) => {
 };
 
 // src/components/CurrencyInput/CurrencyInput.tsx
-var TextMaskAdapter = React15.forwardRef(function TextMaskAdapter2(props, ref) {
+var TextMaskAdapter = React16.forwardRef(function TextMaskAdapter2(props, ref) {
   const { onChange, ...innerProps } = props;
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React16.createElement(
     NumericFormat,
     {
       ...innerProps,
@@ -1824,7 +1865,7 @@ var CurrencyInputRoot = styled7(Input_default, {
   slot: "root",
   overridesResolver: (props, styles) => styles.root
 })({});
-var CurrencyInput = React15.forwardRef(function CurrencyInput2(inProps, ref) {
+var CurrencyInput = React16.forwardRef(function CurrencyInput2(inProps, ref) {
   const props = useThemeProps3({ props: inProps, name: "CurrencyInput" });
   const {
     currency = "USD",
@@ -1845,7 +1886,7 @@ var CurrencyInput = React15.forwardRef(function CurrencyInput2(inProps, ref) {
   const [_value, setValue] = useControlledState(
     props.value,
     props.defaultValue,
-    useCallback6((value2) => onChange?.({ target: { name, value: value2 } }), [onChange, name])
+    useCallback7((value2) => onChange?.({ target: { name, value: value2 } }), [onChange, name])
   );
   const value = useMemo5(() => {
     if (_value && useMinorUnit) {
@@ -1859,14 +1900,14 @@ var CurrencyInput = React15.forwardRef(function CurrencyInput2(inProps, ref) {
     }
     return props.max;
   }, [props.max, useMinorUnit, decimalScale]);
-  const [isOverLimit, setIsOverLimit] = useState5(!!max && !!value && value > max);
-  const handleChange = useCallback6(
+  const [isOverLimit, setIsOverLimit] = useState6(!!max && !!value && value > max);
+  const handleChange = useCallback7(
     (event) => {
       if (event.target.value === "") {
         setValue(void 0);
         return;
       }
-      const amount = useMinorUnit ? Number(event.target.value?.replace(decimalSeparator, "")) : Number(event.target.value);
+      const amount = useMinorUnit ? Number(decimalSeparator ? event.target.value?.replace(decimalSeparator, "") : event.target.value) : Number(event.target.value);
       if (!!max && Number(event.target.value) > max) {
         setIsOverLimit(true);
       } else {
@@ -1876,7 +1917,7 @@ var CurrencyInput = React15.forwardRef(function CurrencyInput2(inProps, ref) {
     },
     [decimalSeparator, max, useMinorUnit, setValue]
   );
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React16.createElement(
     CurrencyInputRoot,
     {
       ...innerProps,
@@ -1889,9 +1930,7 @@ var CurrencyInput = React15.forwardRef(function CurrencyInput2(inProps, ref) {
       required,
       color: error || isOverLimit ? "danger" : props.color,
       label,
-      helperText: isOverLimit ? new IntlMessageFormat2(`limit: {amount, number, ::currency/${currency} unit-width-narrow}`).format({
-        amount: max
-      }) : helperText,
+      helperText: isOverLimit ? `limit: ${new Intl.NumberFormat("en-US", { style: "currency", currency }).format(max)}` : helperText,
       slotProps: {
         input: {
           component: TextMaskAdapter,
@@ -1916,9 +1955,9 @@ var CurrencyInput_default = CurrencyInput;
 
 // src/components/DataTable/DataTable.tsx
 import React25, {
-  useCallback as useCallback11,
+  useCallback as useCallback12,
   useMemo as useMemo10,
-  useRef as useRef6,
+  useRef as useRef7,
   useId,
   forwardRef as forwardRef7,
   useImperativeHandle as useImperativeHandle2,
@@ -1971,14 +2010,15 @@ function reorderColumnsByGroupingModel(columns, columnGroupingModel) {
   }
   return reorderedColumns;
 }
-function flattenColumnGroups(items, groupPath = [], columnIndex = { current: 0 }) {
+function flattenColumnGroups(items, groupPath = [], columnIndex = { current: 0 }, visibleFields) {
   const result = [];
   for (const item of items) {
     if ("groupId" in item) {
       const newPath = [...groupPath, item.groupId];
       const children = Array.isArray(item.children) ? item.children : [item.children];
-      result.push(...flattenColumnGroups(children, newPath, columnIndex));
+      result.push(...flattenColumnGroups(children, newPath, columnIndex, visibleFields));
     } else {
+      if (visibleFields && !visibleFields.has(item.field)) continue;
       result.push({
         ...item,
         groupPath,
@@ -1988,9 +2028,9 @@ function flattenColumnGroups(items, groupPath = [], columnIndex = { current: 0 }
   }
   return result;
 }
-function calculateColumnGroups(columnGroupingModel, columns) {
+function calculateColumnGroups(columnGroupingModel, columns, visibleFields) {
   const fieldsInGroupingModel = extractFieldsFromGroupingModel(columnGroupingModel);
-  const flattenedColumns = flattenColumnGroups(columnGroupingModel);
+  const flattenedColumns = flattenColumnGroups(columnGroupingModel, [], { current: 0 }, visibleFields);
   const columnIndexMap = new Map(flattenedColumns.map((col) => [col.field, col.columnIndex]));
   const processedGroups = /* @__PURE__ */ new Map();
   const groupsByLevel = [];
@@ -2038,7 +2078,9 @@ function calculateColumnGroups(columnGroupingModel, columns) {
   groupsByLevel.forEach((level) => {
     level.sort((a, b) => a.startIndex - b.startIndex);
   });
-  return { groups: groupsByLevel, maxLevel, fieldsInGroupingModel };
+  const filteredGroupsByLevel = groupsByLevel.map((level) => level.filter((g) => g.colspan > 0)).filter((level) => level.length > 0);
+  const correctedMaxLevel = filteredGroupsByLevel.length > 0 ? filteredGroupsByLevel.length - 1 : -1;
+  return { groups: filteredGroupsByLevel, maxLevel: correctedMaxLevel, fieldsInGroupingModel };
 }
 function getTextAlign(props) {
   return !props.editMode && ["number", "date", "currency"].includes(props.type || "") ? "end" : "start";
@@ -2046,18 +2088,28 @@ function getTextAlign(props) {
 var numberFormatter = (value) => "Intl" in window ? new Intl.NumberFormat().format(value) : value;
 
 // src/components/DataTable/styled.tsx
-import React16 from "react";
+import React17 from "react";
 import { styled as styled8, LinearProgress, buttonClasses, iconButtonClasses } from "@mui/joy";
-import { motion as motion16 } from "framer-motion";
+import { motion as motion17 } from "framer-motion";
 import SortIcon from "@mui/icons-material/ArrowUpwardRounded";
 var EllipsisDiv = styled8("div", {
   name: "DataTable",
-  slot: "textEllipsis"
-})({
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap"
-});
+  slot: "textEllipsis",
+  shouldForwardProp: (prop) => prop !== "lineClamp"
+})(
+  ({ lineClamp }) => lineClamp && lineClamp > 1 ? {
+    overflow: "hidden",
+    display: "-webkit-box !important",
+    WebkitBoxOrient: "vertical",
+    WebkitLineClamp: lineClamp,
+    whiteSpace: "normal",
+    overflowWrap: "anywhere"
+  } : {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  }
+);
 var OverlayWrapper = styled8("tr", {
   name: "DataTable",
   slot: "overlayWrapper"
@@ -2122,7 +2174,7 @@ var Asterisk = styled8("span", {
   color: "var(--ceed-palette-danger-500)",
   marginLeft: theme.spacing(0.5)
 }));
-var StyledTh = styled8(motion16.th)(({ theme }) => ({
+var StyledTh = styled8(motion17.th)(({ theme }) => ({
   boxShadow: "1px 0 var(--TableCell-borderColor)"
 }));
 var StyledTd = styled8("td")(({ theme }) => ({
@@ -2141,9 +2193,9 @@ var StyledTd = styled8("td")(({ theme }) => ({
     }
   }
 }));
-var MotionSortIcon = motion16(SortIcon);
-var DefaultLoadingOverlay = () => /* @__PURE__ */ React16.createElement(LinearProgress, { value: 8, variant: "plain" });
-var Resizer = (ref, targetRef = ref) => /* @__PURE__ */ React16.createElement(
+var MotionSortIcon = motion17(SortIcon);
+var DefaultLoadingOverlay = () => /* @__PURE__ */ React17.createElement(LinearProgress, { value: 8, variant: "plain" });
+var Resizer = (ref, targetRef = ref) => /* @__PURE__ */ React17.createElement(
   Box_default,
   {
     sx: {
@@ -2176,12 +2228,12 @@ var Resizer = (ref, targetRef = ref) => /* @__PURE__ */ React16.createElement(
 
 // src/components/DataTable/components.tsx
 import React22, {
-  useRef as useRef4,
-  useState as useState7,
+  useRef as useRef5,
+  useState as useState8,
   useLayoutEffect,
   useMemo as useMemo8,
-  useCallback as useCallback8,
-  useEffect as useEffect4,
+  useCallback as useCallback9,
+  useEffect as useEffect5,
   memo,
   createElement
 } from "react";
@@ -2189,7 +2241,7 @@ import { styled as styled12, useTheme } from "@mui/joy";
 import { AnimatePresence as AnimatePresence2 } from "framer-motion";
 
 // src/components/DatePicker/DatePicker.tsx
-import React17, { forwardRef as forwardRef6, useCallback as useCallback7, useEffect as useEffect3, useImperativeHandle, useRef as useRef3, useState as useState6 } from "react";
+import React18, { forwardRef as forwardRef6, useCallback as useCallback8, useEffect as useEffect4, useImperativeHandle, useRef as useRef4, useState as useState7 } from "react";
 import { IMaskInput, IMask } from "react-imask";
 import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
 import { styled as styled10, useThemeProps as useThemeProps4 } from "@mui/joy";
@@ -2204,8 +2256,8 @@ var Sheet_default = Sheet;
 
 // src/components/DialogActions/DialogActions.tsx
 import { DialogActions as JoyDialogActions, styled as styled9 } from "@mui/joy";
-import { motion as motion17 } from "framer-motion";
-var MotionDialogActions = motion17(JoyDialogActions);
+import { motion as motion18 } from "framer-motion";
+var MotionDialogActions = motion18(JoyDialogActions);
 var StyledDialogActions = styled9(MotionDialogActions)(({ theme }) => ({
   padding: theme.spacing(2),
   gap: theme.spacing(2),
@@ -2301,9 +2353,9 @@ function parseDate(dateString, format) {
 var formatToPattern = (format) => {
   return format.replace(/YYYY/g, "Y").replace(/MM/g, "M").replace(/DD/g, "D").replace(/[^YMD\s]/g, (match) => `${match}\``);
 };
-var TextMaskAdapter3 = React17.forwardRef(function TextMaskAdapter4(props, ref) {
+var TextMaskAdapter3 = React18.forwardRef(function TextMaskAdapter4(props, ref) {
   const { onChange, format, ...other } = props;
-  return /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React18.createElement(
     IMaskInput,
     {
       ...other,
@@ -2363,24 +2415,24 @@ var DatePicker = forwardRef6((inProps, ref) => {
     shouldDisableDate,
     ...innerProps
   } = props;
-  const innerRef = useRef3(null);
-  const buttonRef = useRef3(null);
+  const innerRef = useRef4(null);
+  const buttonRef = useRef4(null);
   const [value, setValue] = useControlledState(
     props.value,
     props.defaultValue || "",
-    useCallback7((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
+    useCallback8((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
   );
-  const [displayValue, setDisplayValue] = useState6(
+  const [displayValue, setDisplayValue] = useState7(
     () => value ? formatValueString(parseDate(value, format), displayFormat) : ""
   );
-  const [anchorEl, setAnchorEl] = useState6(null);
+  const [anchorEl, setAnchorEl] = useState7(null);
   const open = Boolean(anchorEl);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!anchorEl) {
       innerRef.current?.blur();
     }
   }, [anchorEl, innerRef]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (value === "") {
       setDisplayValue("");
       return;
@@ -2391,7 +2443,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
     }
   }, [displayFormat, displayValue, format, value]);
   useImperativeHandle(ref, () => innerRef.current, [innerRef]);
-  const handleChange = useCallback7(
+  const handleChange = useCallback8(
     (event) => {
       const value2 = event.target.value;
       setDisplayValue(value2 ? formatValueString(parseDate(value2, format), displayFormat) : value2);
@@ -2399,7 +2451,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
     },
     [displayFormat, format, setValue]
   );
-  const handleDisplayInputChange = useCallback7(
+  const handleDisplayInputChange = useCallback8(
     (event) => {
       if (event.target.value === "") {
         handleChange({
@@ -2424,7 +2476,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
     },
     [displayFormat, format, handleChange, props.name]
   );
-  const handleCalendarToggle = useCallback7(
+  const handleCalendarToggle = useCallback8(
     (event) => {
       setAnchorEl(anchorEl ? null : event.currentTarget);
       setTimeout(() => {
@@ -2433,7 +2485,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
     },
     [anchorEl, setAnchorEl, innerRef]
   );
-  const handleInputMouseDown = useCallback7(
+  const handleInputMouseDown = useCallback8(
     (event) => {
       if (inputReadOnly) {
         event.preventDefault();
@@ -2442,7 +2494,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
     },
     [inputReadOnly, buttonRef]
   );
-  return /* @__PURE__ */ React17.createElement(DatePickerRoot, null, /* @__PURE__ */ React17.createElement(FocusTrap, { open: true }, /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React18.createElement(DatePickerRoot, null, /* @__PURE__ */ React18.createElement(FocusTrap, { open: true }, /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(
     Input_default,
     {
       ...innerProps,
@@ -2470,7 +2522,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
       },
       className,
       sx,
-      endDecorator: /* @__PURE__ */ React17.createElement(
+      endDecorator: /* @__PURE__ */ React18.createElement(
         CalendarButton,
         {
           ref: buttonRef,
@@ -2482,13 +2534,13 @@ var DatePicker = forwardRef6((inProps, ref) => {
           "aria-expanded": open,
           disabled
         },
-        /* @__PURE__ */ React17.createElement(CalendarTodayIcon, null)
+        /* @__PURE__ */ React18.createElement(CalendarTodayIcon, null)
       ),
       label,
       helperText,
       readOnly: readOnly || inputReadOnly
     }
-  ), open && /* @__PURE__ */ React17.createElement(ClickAwayListener, { onClickAway: () => setAnchorEl(null) }, /* @__PURE__ */ React17.createElement(
+  ), open && /* @__PURE__ */ React18.createElement(ClickAwayListener, { onClickAway: () => setAnchorEl(null) }, /* @__PURE__ */ React18.createElement(
     StyledPopper,
     {
       id: "date-picker-popper",
@@ -2507,7 +2559,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
       "aria-label": "Calendar Tooltip",
       "aria-expanded": open
     },
-    /* @__PURE__ */ React17.createElement(CalendarSheet, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ React17.createElement(
+    /* @__PURE__ */ React18.createElement(CalendarSheet, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ React18.createElement(
       Calendar_default,
       {
         value: value && !Number.isNaN(parseDate(value, format).getTime()) ? [parseDate(value, format), void 0] : void 0,
@@ -2526,14 +2578,14 @@ var DatePicker = forwardRef6((inProps, ref) => {
         disablePast,
         shouldDisableDate: shouldDisableDate ? (date) => shouldDisableDate(formatValueString(date, format)) : void 0
       }
-    ), !hideClearButton && /* @__PURE__ */ React17.createElement(
+    ), !hideClearButton && /* @__PURE__ */ React18.createElement(
       DialogActions_default,
       {
         sx: {
           p: 1
         }
       },
-      /* @__PURE__ */ React17.createElement(
+      /* @__PURE__ */ React18.createElement(
         Button_default,
         {
           size,
@@ -2559,10 +2611,10 @@ var DatePicker = forwardRef6((inProps, ref) => {
 var DatePicker_default = DatePicker;
 
 // src/components/Textarea/Textarea.tsx
-import React18 from "react";
+import React19 from "react";
 import { Textarea as JoyTextarea } from "@mui/joy";
-import { motion as motion18 } from "framer-motion";
-var MotionTextarea = motion18(JoyTextarea);
+import { motion as motion19 } from "framer-motion";
+var MotionTextarea = motion19(JoyTextarea);
 var Textarea = (props) => {
   const {
     label,
@@ -2579,7 +2631,7 @@ var Textarea = (props) => {
     className,
     ...innerProps
   } = props;
-  const textarea = /* @__PURE__ */ React18.createElement(
+  const textarea = /* @__PURE__ */ React19.createElement(
     MotionTextarea,
     {
       required,
@@ -2591,7 +2643,7 @@ var Textarea = (props) => {
       ...innerProps
     }
   );
-  return /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React19.createElement(
     FormControl_default,
     {
       required,
@@ -2602,9 +2654,9 @@ var Textarea = (props) => {
       sx,
       className
     },
-    label && /* @__PURE__ */ React18.createElement(FormLabel_default, null, label),
+    label && /* @__PURE__ */ React19.createElement(FormLabel_default, null, label),
     textarea,
-    helperText && /* @__PURE__ */ React18.createElement(FormHelperText_default, null, helperText)
+    helperText && /* @__PURE__ */ React19.createElement(FormHelperText_default, null, helperText)
   );
 };
 Textarea.displayName = "Textarea";
@@ -2613,10 +2665,10 @@ Textarea.displayName = "Textarea";
 var Textarea_default = Textarea;
 
 // src/components/Select/Select.tsx
-import React19, { useMemo as useMemo7 } from "react";
+import React20, { useMemo as useMemo7 } from "react";
 import { Select as JoySelect, Option as JoyOption, ListItemContent as ListItemContent2, Typography as Typography3 } from "@mui/joy";
-import { motion as motion19 } from "framer-motion";
-var MotionOption = motion19(JoyOption);
+import { motion as motion20 } from "framer-motion";
+var MotionOption = motion20(JoyOption);
 var Option = MotionOption;
 var secondaryTextLevelMap2 = {
   sm: "body-xs",
@@ -2671,7 +2723,7 @@ function Select(props) {
     });
     return map;
   }, [options]);
-  const select = /* @__PURE__ */ React19.createElement(
+  const select = /* @__PURE__ */ React20.createElement(
     JoySelect,
     {
       ...innerProps,
@@ -2688,9 +2740,9 @@ function Select(props) {
         return optionMap.get(selected.value)?.label;
       }
     },
-    options.map((option) => /* @__PURE__ */ React19.createElement(Option, { key: option.value, value: option.value, disabled: option.disabled }, option.secondaryText ? /* @__PURE__ */ React19.createElement(ListItemContent2, { sx: { gap: 0.5 } }, /* @__PURE__ */ React19.createElement(Typography3, { level: "inherit" }, option.label), /* @__PURE__ */ React19.createElement(Typography3, { level: secondaryTextLevelMap2[size ?? "md"], textColor: "text.tertiary" }, option.secondaryText)) : option.label))
+    options.map((option) => /* @__PURE__ */ React20.createElement(Option, { key: option.value, value: option.value, disabled: option.disabled }, option.secondaryText ? /* @__PURE__ */ React20.createElement(ListItemContent2, { sx: { gap: 0.5 } }, /* @__PURE__ */ React20.createElement(Typography3, { level: "inherit" }, option.label), /* @__PURE__ */ React20.createElement(Typography3, { level: secondaryTextLevelMap2[size ?? "md"], textColor: "text.tertiary" }, option.secondaryText)) : option.label))
   );
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React20.createElement(
     FormControl_default,
     {
       required,
@@ -2701,9 +2753,9 @@ function Select(props) {
       sx,
       className
     },
-    label && /* @__PURE__ */ React19.createElement(FormLabel_default, null, label),
+    label && /* @__PURE__ */ React20.createElement(FormLabel_default, null, label),
     select,
-    helperText && /* @__PURE__ */ React19.createElement(FormHelperText_default, null, helperText)
+    helperText && /* @__PURE__ */ React20.createElement(FormHelperText_default, null, helperText)
   );
 }
 Select.displayName = "Select";
@@ -2714,19 +2766,6 @@ var Select_default = Select;
 // src/components/DataTable/components.tsx
 import { Link } from "@mui/joy";
 
-// src/components/Tooltip/Tooltip.tsx
-import React20 from "react";
-import { Tooltip as JoyTooltip } from "@mui/joy";
-import { motion as motion20 } from "framer-motion";
-var MotionTooltip = motion20(JoyTooltip);
-var Tooltip = (props) => {
-  return /* @__PURE__ */ React20.createElement(MotionTooltip, { ...props });
-};
-Tooltip.displayName = "Tooltip";
-
-// src/components/Tooltip/index.ts
-var Tooltip_default = Tooltip;
-
 // src/components/InfoSign/InfoSign.tsx
 import React21 from "react";
 import { styled as styled11, tooltipClasses } from "@mui/joy";
@@ -2761,25 +2800,26 @@ function InfoSign(props) {
 var InfoSign_default = InfoSign;
 
 // src/components/DataTable/components.tsx
-var TextEllipsis = ({ children }) => {
-  const textRef = useRef4(null);
-  const [showTooltip, setShowTooltip] = useState7(false);
+var TextEllipsis = ({ children, lineClamp }) => {
+  const textRef = useRef5(null);
+  const [showTooltip, setShowTooltip] = useState8(false);
   useLayoutEffect(() => {
     const element = textRef.current;
-    if (element) {
-      const isTextTruncated = element.scrollWidth > element.clientWidth;
-      setShowTooltip(isTextTruncated);
-    }
-  }, [children]);
-  const content = /* @__PURE__ */ React22.createElement(EllipsisDiv, { ref: textRef }, children);
-  if (showTooltip) {
-    return /* @__PURE__ */ React22.createElement(Tooltip_default, { title: children, placement: "top", onClick: (e) => e.stopPropagation() }, content);
-  }
-  return content;
+    if (!element) return;
+    const checkTruncation = () => {
+      const isTruncated = lineClamp && lineClamp > 1 ? element.scrollHeight > element.clientHeight + 1 : element.scrollWidth > element.clientWidth;
+      setShowTooltip(isTruncated);
+    };
+    checkTruncation();
+    const ro = new ResizeObserver(checkTruncation);
+    ro.observe(element);
+    return () => ro.disconnect();
+  }, [children, lineClamp]);
+  return /* @__PURE__ */ React22.createElement(Tooltip_default, { title: showTooltip ? children : "", placement: "top", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React22.createElement(EllipsisDiv, { ref: textRef, lineClamp }, children));
 };
 var CellTextEllipsis = ({ children }) => {
-  const textRef = useRef4(null);
-  const [showTooltip, setShowTooltip] = useState7(false);
+  const textRef = useRef5(null);
+  const [showTooltip, setShowTooltip] = useState8(false);
   useLayoutEffect(() => {
     const element = textRef.current;
     if (element) {
@@ -2826,12 +2866,13 @@ var HeadCell = (props) => {
     pinnedEndPosition,
     headerRef,
     tableColRef,
-    headerClassName
+    headerClassName,
+    headerLineClamp
   } = props;
   const theme = useTheme();
   const ref = headerRef;
   const colRef = tableColRef;
-  const [isHovered, setIsHovered] = useState7(false);
+  const [isHovered, setIsHovered] = useState8(false);
   const sortable = type === "actions" ? false : _sortable;
   const headId = useMemo8(
     () => `${tableId}_header_${headerName ?? field}`.trim(),
@@ -2910,7 +2951,7 @@ var HeadCell = (props) => {
       ref,
       key: field,
       style,
-      onClick: useCallback8(
+      onClick: useCallback9(
         (e) => sortable && onSortChange?.({ field, currentSort: sort, multiple: e.shiftKey }),
         [field, onSortChange, sort, sortable]
       ),
@@ -2920,7 +2961,7 @@ var HeadCell = (props) => {
       initial: "initial",
       className: computedHeaderClassName
     },
-    /* @__PURE__ */ React22.createElement(Stack_default, { gap: 1, direction: "row", justifyContent: textAlign, alignItems: "center" }, textAlign === "end" && sortIcon, textAlign === "end" && infoSign, /* @__PURE__ */ React22.createElement(TextEllipsis, null, headerName ?? field, editMode && required && /* @__PURE__ */ React22.createElement(Asterisk, null, "*")), textAlign === "start" && infoSign, textAlign === "start" && sortIcon),
+    /* @__PURE__ */ React22.createElement(Stack_default, { gap: 1, direction: "row", justifyContent: textAlign, alignItems: "center", sx: { minWidth: 0 } }, textAlign === "end" && sortIcon, textAlign === "end" && infoSign, /* @__PURE__ */ React22.createElement(TextEllipsis, { lineClamp: headerLineClamp }, headerName ?? field, editMode && required && /* @__PURE__ */ React22.createElement(Asterisk, null, "*")), textAlign === "start" && infoSign, textAlign === "start" && sortIcon),
     resizer
   );
 };
@@ -2945,8 +2986,8 @@ var BodyCell = (props) => {
     onCellEditStop
   } = props;
   const theme = useTheme();
-  const [value, setValue] = useState7(row[field]);
-  const cellRef = useRef4(null);
+  const [value, setValue] = useState8(row[field]);
+  const cellRef = useRef5(null);
   const params = useMemo8(
     () => ({
       row,
@@ -3091,7 +3132,7 @@ var BodyCell = (props) => {
     () => (typeof cellClassName === "function" ? cellClassName(params) : cellClassName) || "",
     [cellClassName, params]
   );
-  useEffect4(() => {
+  useEffect5(() => {
     setValue(row[field]);
   }, [row, field]);
   return /* @__PURE__ */ React22.createElement(
@@ -3161,10 +3202,10 @@ var VirtualizedTableRow = memo(StyledTableRow2, (prevProps, nextProps) => {
 });
 
 // src/components/DataTable/hooks.ts
-import { useState as useState8, useLayoutEffect as useLayoutEffect2, useRef as useRef5, useMemo as useMemo9, useCallback as useCallback9, useEffect as useEffect5, createRef } from "react";
+import { useState as useState9, useLayoutEffect as useLayoutEffect2, useRef as useRef6, useMemo as useMemo9, useCallback as useCallback10, useEffect as useEffect6, createRef } from "react";
 function useColumnWidths(columnsByField) {
-  const [widths, setWidths] = useState8({});
-  const roRef = useRef5();
+  const [widths, setWidths] = useState9({});
+  const roRef = useRef6();
   useLayoutEffect2(() => {
     if (roRef.current) roRef.current.disconnect();
     roRef.current = new ResizeObserver((entries) => {
@@ -3212,28 +3253,53 @@ function useDataTableRenderer({
   getId: _getId,
   isTotalSelected: _isTotalSelected,
   isRowSelectable,
-  columnGroupingModel
+  columnGroupingModel,
+  columnVisibilityModel,
+  onColumnVisibilityModelChange
 }) {
   if (pinnedColumns && columnGroupingModel) {
     throw new Error(
       "You cannot use both `pinnedColumns` and `columnGroupingModel` at the same time. Please choose one of them."
     );
   }
-  const onSelectionModelChangeRef = useRef5(onSelectionModelChange);
+  const onSelectionModelChangeRef = useRef6(onSelectionModelChange);
   onSelectionModelChangeRef.current = onSelectionModelChange;
-  const [focusedRowId, setFocusedRowId] = useState8(null);
-  const [selectionAnchor, setSelectionAnchor] = useState8(null);
+  const [focusedRowId, setFocusedRowId] = useState9(null);
+  const [selectionAnchor, setSelectionAnchor] = useState9(null);
   const [sortModel, setSortModel] = useControlledState(
     controlledSortModel,
     initialState?.sorting?.sortModel ?? [],
-    useCallback9((sortModel2) => onSortModelChange?.(sortModel2), [onSortModelChange])
+    useCallback10((sortModel2) => onSortModelChange?.(sortModel2), [onSortModelChange])
+  );
+  const [visibilityModel] = useControlledState(
+    columnVisibilityModel,
+    initialState?.columns?.columnVisibilityModel ?? {},
+    useCallback10(
+      (model) => onColumnVisibilityModelChange?.(model),
+      [onColumnVisibilityModelChange]
+    )
   );
   const reorderedColumns = useMemo9(() => {
     if (!columnGroupingModel) return columnsProp;
     return reorderColumnsByGroupingModel(columnsProp, columnGroupingModel);
   }, [columnsProp, columnGroupingModel]);
-  const columnsByField = useMemo9(
+  const visibleColumns = useMemo9(
+    () => reorderedColumns.filter((col) => visibilityModel[col.field] !== false),
+    [reorderedColumns, visibilityModel]
+  );
+  const visibleFieldSet = useMemo9(() => new Set(visibleColumns.map((c) => c.field)), [visibleColumns]);
+  const allColumnsByField = useMemo9(
     () => reorderedColumns.reduce(
+      (acc, curr) => ({
+        ...acc,
+        [curr.field]: curr
+      }),
+      {}
+    ),
+    [reorderedColumns]
+  );
+  const visibleColumnsByField = useMemo9(
+    () => visibleColumns.reduce(
       (acc, curr) => ({
         ...acc,
         [curr.field]: {
@@ -3244,15 +3310,16 @@ function useDataTableRenderer({
       }),
       {}
     ),
-    [reorderedColumns]
+    [visibleColumns]
   );
-  const sortComparator = useCallback9(
+  const sortComparator = useCallback10(
     (rowA, rowB) => {
       for (const sort of sortModel) {
         const { field, sort: direction } = sort;
         const a = rowA[field];
         const b = rowB[field];
-        const column = columnsByField[field];
+        const column = allColumnsByField[field];
+        if (!column) continue;
         let comparison = 0;
         if (column.sortComparator) {
           comparison = column.sortComparator({
@@ -3272,7 +3339,7 @@ function useDataTableRenderer({
       }
       return 0;
     },
-    [sortModel, columnsByField]
+    [sortModel, allColumnsByField]
   );
   const rows = useMemo9(
     () => sortModel.length ? [..._rows].sort(sortComparator) : _rows,
@@ -3282,9 +3349,9 @@ function useDataTableRenderer({
     () => Array.from(new Set(_sortOrder || ["asc", "desc", null])),
     [_sortOrder]
   );
-  const [page, setPage] = useState8(paginationModel?.page || 1);
+  const [page, setPage] = useState9(paginationModel?.page || 1);
   const pageSize = paginationModel?.pageSize || 20;
-  const getId = useCallback9(
+  const getId = useCallback10(
     (row, index) => _getId?.(row) ?? row.id ?? `${(index || 0) + (page - 1) * pageSize}`,
     [_getId, page, pageSize]
   );
@@ -3300,7 +3367,7 @@ function useDataTableRenderer({
     }),
     [dataInPage, isRowSelectable, getId]
   );
-  const handleRangeSelection = useCallback9(
+  const handleRangeSelection = useCallback10(
     (anchor, targetIndex) => {
       const startIndex = Math.min(anchor.rowIndex, targetIndex);
       const endIndex = Math.max(anchor.rowIndex, targetIndex);
@@ -3336,61 +3403,71 @@ function useDataTableRenderer({
     () => _isTotalSelected ?? (selectableRowCount > 0 && (selectionModel?.length || 0) === selectableRowCount),
     [_isTotalSelected, selectionModel, selectableRowCount]
   );
-  const columnWidths = useColumnWidths(columnsByField);
-  const getWidth = useCallback9(
-    (f) => columnWidths[f] ?? columnsByField[f].width ?? // Column prop 으로 지정된 width
-    columnsByField[f].minWidth ?? 0,
-    [columnWidths, columnsByField]
+  const columnWidths = useColumnWidths(visibleColumnsByField);
+  const getWidth = useCallback10(
+    (f) => columnWidths[f] ?? allColumnsByField[f]?.width ?? // Column prop 으로 지정된 width
+    allColumnsByField[f]?.minWidth ?? 0,
+    [columnWidths, allColumnsByField]
   );
   const processedColumnGroups = useMemo9(() => {
     if (!columnGroupingModel) return null;
-    return calculateColumnGroups(columnGroupingModel, reorderedColumns);
-  }, [columnGroupingModel, reorderedColumns]);
+    return calculateColumnGroups(columnGroupingModel, visibleColumns, visibleFieldSet);
+  }, [columnGroupingModel, visibleColumns, visibleFieldSet]);
+  const effectivePinnedLeft = useMemo9(
+    () => pinnedColumns?.left?.filter((f) => visibleFieldSet.has(f)),
+    [pinnedColumns?.left, visibleFieldSet]
+  );
+  const effectivePinnedRight = useMemo9(
+    () => pinnedColumns?.right?.filter((f) => visibleFieldSet.has(f)),
+    [pinnedColumns?.right, visibleFieldSet]
+  );
   const columns = useMemo9(() => {
-    const baseColumns = reorderedColumns.length > 0 ? reorderedColumns : Object.keys(rows[0] || {}).map((key) => ({
+    const baseColumns = visibleColumns.length > 0 ? visibleColumns : reorderedColumns.length > 0 ? [] : Object.keys(rows[0] || {}).map((key) => ({
       field: key
     }));
     return baseColumns.map((column) => {
-      const isLeftPinned = pinnedColumns?.left?.includes(column.field);
-      const isRightPinned = pinnedColumns?.right?.includes(column.field);
+      const isLeftPinned = effectivePinnedLeft?.includes(column.field);
+      const isRightPinned = effectivePinnedRight?.includes(column.field);
       const isPinned = isLeftPinned || isRightPinned;
       return {
         ...column,
-        headerRef: columnsByField[column.field].headerRef,
-        tableColRef: columnsByField[column.field].tableColRef,
+        headerRef: visibleColumnsByField[column.field]?.headerRef,
+        tableColRef: visibleColumnsByField[column.field]?.tableColRef,
         isCellEditable: editMode && (typeof column.isCellEditable === "function" ? column.isCellEditable : column.isCellEditable ?? true),
         sort: sortModel.find((sort) => sort.field === column.field)?.sort,
-        sortOrder: columnsByField[column.field]?.sortOrder || sortOrder,
+        sortOrder: allColumnsByField[column.field]?.sortOrder || sortOrder,
         isPinned,
-        isLastStartPinnedColumn: isLeftPinned && [...pinnedColumns?.left || []].pop() === column.field,
-        isLastEndPinnedColumn: isRightPinned && (pinnedColumns?.right?.[0] ?? null) === column.field,
-        pinnedStartPosition: pinnedColumns?.left?.slice(0, isLeftPinned ? pinnedColumns.left.indexOf(column.field) : pinnedColumns.left.length).reduce((acc, curr) => acc + getWidth(curr), 0),
-        pinnedEndPosition: pinnedColumns?.right?.slice(isRightPinned ? pinnedColumns.right.indexOf(column.field) + 1 : 0).reduce((acc, curr) => acc + getWidth(curr), 0)
+        isLastStartPinnedColumn: isLeftPinned && [...effectivePinnedLeft || []].pop() === column.field,
+        isLastEndPinnedColumn: isRightPinned && (effectivePinnedRight?.[0] ?? null) === column.field,
+        pinnedStartPosition: effectivePinnedLeft?.slice(0, isLeftPinned ? effectivePinnedLeft.indexOf(column.field) : effectivePinnedLeft.length).reduce((acc, curr) => acc + getWidth(curr), 0),
+        pinnedEndPosition: effectivePinnedRight?.slice(isRightPinned ? effectivePinnedRight.indexOf(column.field) + 1 : 0).reduce((acc, curr) => acc + getWidth(curr), 0)
       };
     });
   }, [
+    visibleColumns,
     reorderedColumns,
     rows,
-    pinnedColumns?.left,
-    pinnedColumns?.right,
-    columnsByField,
+    effectivePinnedLeft,
+    effectivePinnedRight,
+    visibleColumnsByField,
+    allColumnsByField,
     editMode,
     sortModel,
     sortOrder,
     getWidth
   ]);
-  const handlePageChange = useCallback9(
+  const handlePageChange = useCallback10(
     (newPage) => {
       setPage(newPage);
       onPaginationModelChange?.({ page: newPage, pageSize });
     },
     [onPaginationModelChange, pageSize]
   );
-  const handleSortChange = useCallback9(
+  const handleSortChange = useCallback10(
     (props) => {
       const { field, currentSort, multiple } = props;
-      const column = columnsByField[field];
-      const columnSortOrder = column.sortOrder || sortOrder;
+      const column = allColumnsByField[field];
+      const columnSortOrder = column?.sortOrder || sortOrder;
       if (currentSort !== void 0) {
         const currentOrderIndex = columnSortOrder.indexOf(currentSort);
         const nextSortOrderIndex = (currentOrderIndex + 1) % columnSortOrder.length;
@@ -3407,25 +3484,25 @@ function useDataTableRenderer({
         setSortModel(newSortModel);
       }
     },
-    [sortOrder, columnsByField, sortModel, setSortModel]
+    [sortOrder, allColumnsByField, sortModel, setSortModel]
   );
-  useEffect5(() => {
+  useEffect6(() => {
     if (!paginationModel) {
       handlePageChange(1);
     }
   }, [rowCount, handlePageChange, paginationModel]);
-  useEffect5(() => {
+  useEffect6(() => {
     const lastPage = Math.max(1, Math.ceil(rowCount / pageSize));
     if (page > lastPage) {
       handlePageChange(lastPage);
     }
   }, [page, rowCount, pageSize, handlePageChange]);
-  useEffect5(() => {
+  useEffect6(() => {
     onSelectionModelChangeRef.current?.([]);
     setSelectionAnchor(null);
   }, [page]);
-  const prevRowsRef = useRef5(_rows);
-  useEffect5(() => {
+  const prevRowsRef = useRef6(_rows);
+  useEffect6(() => {
     if (prevRowsRef.current !== _rows) {
       setSelectionAnchor(null);
       prevRowsRef.current = _rows;
@@ -3444,8 +3521,8 @@ function useDataTableRenderer({
     handleSortChange,
     isAllSelected,
     isTotalSelected,
-    isSelectedRow: useCallback9((model) => selectedModelSet.has(model), [selectedModelSet]),
-    isRowSelectable: useCallback9(
+    isSelectedRow: useCallback10((model) => selectedModelSet.has(model), [selectedModelSet]),
+    isRowSelectable: useCallback10(
       (rowId, row) => {
         if (!isRowSelectable) return true;
         return isRowSelectable({ row, id: rowId });
@@ -3453,13 +3530,13 @@ function useDataTableRenderer({
       [isRowSelectable]
     ),
     focusedRowId,
-    onRowFocus: useCallback9((rowId) => {
+    onRowFocus: useCallback10((rowId) => {
       setFocusedRowId(rowId);
     }, []),
-    onAllCheckboxChange: useCallback9(() => {
+    onAllCheckboxChange: useCallback10(() => {
       onSelectionModelChange?.(isAllSelected ? [] : selectableDataInPage.map(getId));
     }, [isAllSelected, selectableDataInPage, onSelectionModelChange, getId]),
-    onCheckboxChange: useCallback9(
+    onCheckboxChange: useCallback10(
       (event, selectedModel) => {
         const isShiftClick = "shiftKey" in event && event.shiftKey;
         const rowIndex = dataInPage.findIndex((row, i) => getId(row, i) === selectedModel);
@@ -3492,7 +3569,7 @@ function useDataTableRenderer({
     ),
     columns,
     processedColumnGroups,
-    onTotalSelect: useCallback9(() => {
+    onTotalSelect: useCallback10(() => {
       const selectableRows = rows.filter((row, i) => {
         if (!isRowSelectable) return true;
         return isRowSelectable({ row, id: getId(row, i) });
@@ -3577,7 +3654,7 @@ function TableBody(props) {
 TableBody.displayName = "TableBody";
 
 // src/components/Pagination/Pagination.tsx
-import React24, { useCallback as useCallback10, useEffect as useEffect6 } from "react";
+import React24, { useCallback as useCallback11, useEffect as useEffect7 } from "react";
 import PreviousIcon from "@mui/icons-material/ChevronLeftRounded";
 import NextIcon from "@mui/icons-material/ChevronRightRounded";
 import FirstPageIcon from "@mui/icons-material/FirstPageRounded";
@@ -3646,7 +3723,7 @@ function Pagination(props) {
   const [paginationModel, setPaginationModel] = useControlledState(
     _paginationModel,
     defaultPaginationModel,
-    useCallback10(
+    useCallback11(
       (newPage) => {
         onPageChange(newPage.page);
       },
@@ -3662,7 +3739,7 @@ function Pagination(props) {
   const afterPages = [paginationModel.page + 1, paginationModel.page + 2].filter((p) => p <= lastPage - 1);
   const isMoreAfterPages = lastPage > 1 && paginationModel.page < lastPage - 3;
   const isMoreBeforePages = lastPage > 1 && paginationModel.page > 4;
-  useEffect6(() => {
+  useEffect7(() => {
     if (paginationModel.page > lastPage) {
       setPaginationModel({ ...paginationModel, page: lastPage });
     }
@@ -3833,6 +3910,10 @@ function Component(props, apiRef) {
     loading,
     columnGroupingModel: _________________,
     // columnGroupingModel is used in useDataTableRenderer
+    columnVisibilityModel: __________________,
+    // columnVisibilityModel is used in useDataTableRenderer
+    onColumnVisibilityModelChange: ___________________,
+    // onColumnVisibilityModelChange is used in useDataTableRenderer
     slots: {
       checkbox: RenderCheckbox = Checkbox_default,
       toolbar: Toolbar,
@@ -3845,8 +3926,8 @@ function Component(props, apiRef) {
     ...innerProps
   } = props;
   const tableId = useId();
-  const parentRef = useRef6(null);
-  const tableBodyRef = useRef6(null);
+  const parentRef = useRef7(null);
+  const tableBodyRef = useRef7(null);
   const {
     columns,
     processedColumnGroups,
@@ -3883,20 +3964,20 @@ function Component(props, apiRef) {
   const paginationModel = useMemo10(() => ({ page, pageSize }), [page, pageSize]);
   const totalSize = virtualizer.getTotalSize();
   const virtualizedItems = virtualizer.getVirtualItems();
-  const getRowClickHandler = useCallback11(
+  const getRowClickHandler = useCallback12(
     (row, rowId) => (e) => {
       onRowClick?.({ row, rowId }, e);
       checkboxSelection && !disableSelectionOnClick && isRowSelectableCheck(rowId, row) && onCheckboxChange(e, rowId);
     },
     [onRowClick, checkboxSelection, disableSelectionOnClick, onCheckboxChange, isRowSelectableCheck]
   );
-  const getRowFocusHandler = useCallback11(
+  const getRowFocusHandler = useCallback12(
     (rowId) => () => {
       onRowFocus(rowId);
     },
     [onRowFocus]
   );
-  const getCheckboxClickHandler = useCallback11(
+  const getCheckboxClickHandler = useCallback12(
     (rowId, row) => (e) => {
       e.stopPropagation();
       if (isRowSelectableCheck(rowId, row)) {
@@ -3906,7 +3987,7 @@ function Component(props, apiRef) {
     },
     [onCheckboxChange, isRowSelectableCheck, onRowFocus]
   );
-  const handleTableKeyDown = useCallback11(
+  const handleTableKeyDown = useCallback12(
     (e) => {
       const supportedKeys = ["ArrowUp", "ArrowDown", " ", "Home", "End", "PageUp", "PageDown"];
       if (!supportedKeys.includes(e.key)) return;
@@ -4072,7 +4153,7 @@ function Component(props, apiRef) {
             width: c.width
           }
         }
-      ))), /* @__PURE__ */ React25.createElement("thead", null, processedColumnGroups && processedColumnGroups.groups.map((levelGroups, level) => /* @__PURE__ */ React25.createElement("tr", { key: `group-level-${level}` }, checkboxSelection && level === 0 && /* @__PURE__ */ React25.createElement(
+      ))), /* @__PURE__ */ React25.createElement("thead", null, processedColumnGroups && processedColumnGroups.groups.length > 0 && processedColumnGroups.groups.map((levelGroups, level) => /* @__PURE__ */ React25.createElement("tr", { key: `group-level-${level}` }, checkboxSelection && level === 0 && /* @__PURE__ */ React25.createElement(
         "th",
         {
           rowSpan: processedColumnGroups.maxLevel + 2,
@@ -4092,7 +4173,7 @@ function Component(props, apiRef) {
             ...checkboxProps
           }
         )
-      ), level > 0 && Array.from({ length: levelGroups[0]?.startIndex || 0 }).map((_2, i) => /* @__PURE__ */ React25.createElement("th", { key: `empty-${level}-${i}` })), levelGroups.map((group, groupIndex) => {
+      ), level > 0 && Array.from({ length: levelGroups[0]?.startIndex || 0 }).map((_2, i) => /* @__PURE__ */ React25.createElement("th", { key: `empty-${level}-${i}` })), levelGroups.filter((g) => g.colspan > 0).map((group, groupIndex) => {
         const nextGroup = levelGroups[groupIndex + 1];
         const emptyCells = nextGroup ? nextGroup.startIndex - (group.startIndex + group.colspan) : columns.length - (group.startIndex + group.colspan);
         const params = { groupId: group.groupId };
@@ -4110,7 +4191,7 @@ function Component(props, apiRef) {
           },
           group.headerName ?? group.groupId
         ), emptyCells > 0 && Array.from({ length: emptyCells }).map((_2, i) => /* @__PURE__ */ React25.createElement("th", { key: `empty-between-${level}-${groupIndex}-${i}`, colSpan: 1 })));
-      }))), /* @__PURE__ */ React25.createElement("tr", null, !processedColumnGroups && checkboxSelection && /* @__PURE__ */ React25.createElement(
+      }))), /* @__PURE__ */ React25.createElement("tr", null, (!processedColumnGroups || processedColumnGroups.groups.length === 0) && checkboxSelection && /* @__PURE__ */ React25.createElement(
         "th",
         {
           style: {
@@ -4248,7 +4329,7 @@ var DataTable = forwardRef7(Component);
 DataTable.displayName = "DataTable";
 
 // src/components/DateRangePicker/DateRangePicker.tsx
-import React26, { forwardRef as forwardRef8, useCallback as useCallback12, useEffect as useEffect7, useImperativeHandle as useImperativeHandle3, useMemo as useMemo11, useRef as useRef7, useState as useState9 } from "react";
+import React26, { forwardRef as forwardRef8, useCallback as useCallback13, useEffect as useEffect8, useImperativeHandle as useImperativeHandle3, useMemo as useMemo11, useRef as useRef8, useState as useState10 } from "react";
 import { IMaskInput as IMaskInput2, IMask as IMask2 } from "react-imask";
 import CalendarTodayIcon2 from "@mui/icons-material/CalendarToday";
 import { styled as styled14, useThemeProps as useThemeProps5 } from "@mui/joy";
@@ -4409,23 +4490,23 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
     readOnly,
     ...innerProps
   } = props;
-  const innerRef = useRef7(null);
-  const buttonRef = useRef7(null);
+  const innerRef = useRef8(null);
+  const buttonRef = useRef8(null);
   const [value, setValue] = useControlledState(
     props.value,
     props.defaultValue || "",
-    useCallback12((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
+    useCallback13((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
   );
-  const [displayValue, setDisplayValue] = useState9(
+  const [displayValue, setDisplayValue] = useState10(
     () => value ? formatValueString2(parseDates(value, format), displayFormat) : ""
   );
-  const [anchorEl, setAnchorEl] = useState9(null);
+  const [anchorEl, setAnchorEl] = useState10(null);
   const open = Boolean(anchorEl);
   const calendarValue = useMemo11(
     () => value ? parseDates(value, format) : void 0,
     [value, format]
   );
-  useEffect7(() => {
+  useEffect8(() => {
     if (value) {
       try {
         const dates = parseDates(value, format);
@@ -4437,13 +4518,13 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
       setDisplayValue("");
     }
   }, [displayFormat, value, format]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!anchorEl) {
       innerRef.current?.blur();
     }
   }, [anchorEl, innerRef]);
   useImperativeHandle3(ref, () => innerRef.current, [innerRef]);
-  const handleChange = useCallback12(
+  const handleChange = useCallback13(
     (event) => {
       const value2 = event.target.value;
       setDisplayValue(value2 ? formatValueString2(parseDates(value2, format), displayFormat) : value2);
@@ -4451,7 +4532,7 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
     },
     [displayFormat, format, setValue]
   );
-  const handleDisplayInputChange = useCallback12(
+  const handleDisplayInputChange = useCallback13(
     (event) => {
       if (event.target.value === "") {
         handleChange({
@@ -4476,14 +4557,14 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
     },
     [displayFormat, format, handleChange, props.name]
   );
-  const handleCalendarToggle = useCallback12(
+  const handleCalendarToggle = useCallback13(
     (event) => {
       setAnchorEl(anchorEl ? null : event.currentTarget);
       innerRef.current?.focus();
     },
     [anchorEl, setAnchorEl, innerRef]
   );
-  const handleCalendarChange = useCallback12(
+  const handleCalendarChange = useCallback13(
     ([date1, date2]) => {
       if (!date1 || !date2) return;
       const formattedValue = formatValueString2([date1, date2], format);
@@ -4497,7 +4578,7 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
     },
     [props.value, props.name, onChange, setValue, setAnchorEl, format, displayFormat]
   );
-  const handleInputMouseDown = useCallback12(
+  const handleInputMouseDown = useCallback13(
     (event) => {
       if (inputReadOnly) {
         event.preventDefault();
@@ -4729,13 +4810,13 @@ var InsetDrawer = styled20(JoyDrawer2)(({ theme }) => ({
 }));
 
 // src/components/FilterableCheckboxGroup/FilterableCheckboxGroup.tsx
-import React31, { useCallback as useCallback13, useEffect as useEffect8, useMemo as useMemo12, useRef as useRef8, useState as useState10 } from "react";
+import React31, { useCallback as useCallback14, useEffect as useEffect9, useMemo as useMemo12, useRef as useRef9, useState as useState11 } from "react";
 import SearchIcon from "@mui/icons-material/Search";
 import { useVirtualizer as useVirtualizer3 } from "@tanstack/react-virtual";
 function LabelWithTooltip(props) {
   const { label, size } = props;
-  const labelContentRef = useRef8(null);
-  const [isOverflowing, setIsOverflowing] = useState10(false);
+  const labelContentRef = useRef9(null);
+  const [isOverflowing, setIsOverflowing] = useState11(false);
   const labelContent = /* @__PURE__ */ React31.createElement(
     "span",
     {
@@ -4752,7 +4833,7 @@ function LabelWithTooltip(props) {
     },
     label
   );
-  useEffect8(() => {
+  useEffect9(() => {
     const element = labelContentRef.current;
     if (element) {
       setIsOverflowing(element.scrollWidth > element.clientWidth);
@@ -4776,16 +4857,16 @@ function FilterableCheckboxGroup(props) {
     maxHeight = 300,
     disabled
   } = props;
-  const [searchTerm, setSearchTerm] = useState10("");
-  const [sortedOptions, setSortedOptions] = useState10(options);
+  const [searchTerm, setSearchTerm] = useState11("");
+  const [sortedOptions, setSortedOptions] = useState11(options);
   const [internalValue, setInternalValue] = useControlledState(
     value,
     value ?? [],
-    useCallback13((newValue) => onChange?.(newValue), [onChange])
+    useCallback14((newValue) => onChange?.(newValue), [onChange])
   );
-  const parentRef = useRef8(null);
-  const isInitialSortRef = useRef8(false);
-  const prevOptionsRef = useRef8([...options]);
+  const parentRef = useRef9(null);
+  const isInitialSortRef = useRef9(false);
+  const prevOptionsRef = useRef9([...options]);
   const filteredOptions = useMemo12(() => {
     if (!searchTerm) return sortedOptions;
     return sortedOptions.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()));
@@ -4808,7 +4889,7 @@ function FilterableCheckboxGroup(props) {
     overscan: 5
   });
   const items = virtualizer.getVirtualItems();
-  useEffect8(() => {
+  useEffect9(() => {
     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
     );
@@ -4834,13 +4915,13 @@ function FilterableCheckboxGroup(props) {
       }
     }
   }, [options, value]);
-  useEffect8(() => {
+  useEffect9(() => {
     virtualizer.measure();
   }, [virtualizer, filteredOptions, size]);
-  const handleSearchChange = useCallback13((event) => {
+  const handleSearchChange = useCallback14((event) => {
     setSearchTerm(event.target.value);
   }, []);
-  const handleCheckboxChange = useCallback13(
+  const handleCheckboxChange = useCallback14(
     (optionValue) => (event) => {
       const checked = event.target.checked;
       const newValue = checked ? [...internalValue, optionValue] : internalValue.filter((v) => v !== optionValue);
@@ -4848,7 +4929,7 @@ function FilterableCheckboxGroup(props) {
     },
     [internalValue, setInternalValue]
   );
-  const handleSelectAll = useCallback13(
+  const handleSelectAll = useCallback14(
     (event) => {
       const checked = event.target.checked;
       const enabledOptions = filteredOptions.filter((option) => !option.disabled);
@@ -5005,16 +5086,16 @@ function IconMenuButton(props) {
 IconMenuButton.displayName = "IconMenuButton";
 
 // src/components/Markdown/Markdown.tsx
-import React33, { lazy, Suspense, useEffect as useEffect9, useState as useState11 } from "react";
+import React33, { lazy, Suspense, useEffect as useEffect10, useState as useState12 } from "react";
 import { Skeleton } from "@mui/joy";
 import { Link as Link2 } from "@mui/joy";
 import remarkGfm from "remark-gfm";
 var LazyReactMarkdown = lazy(() => import("react-markdown"));
 var Markdown = (props) => {
-  const [rehypeAccent2, setRehypeAccent] = useState11(null);
-  useEffect9(() => {
+  const [rehypeAccent, setRehypeAccent] = useState12(null);
+  useEffect10(() => {
     const loadRehypeAccent = async () => {
-      const module = await Promise.resolve().then(() => (init_rehype_accent(), rehype_accent_exports));
+      const module = await import("./chunks/rehype-accent-FZRUD7VI.js");
       setRehypeAccent(() => module.rehypeAccent);
     };
     loadRehypeAccent();
@@ -5031,7 +5112,7 @@ var Markdown = (props) => {
     fallback,
     ...innerProps
   } = props;
-  if (!rehypeAccent2) {
+  if (!rehypeAccent) {
     return null;
   }
   return /* @__PURE__ */ React33.createElement(Typography, { component: "div", color, textColor, level: defaultLevel, ...innerProps }, /* @__PURE__ */ React33.createElement(
@@ -5044,7 +5125,7 @@ var Markdown = (props) => {
       {
         ...markdownOptions,
         children: content,
-        rehypePlugins: [[rehypeAccent2, { accentColor }]],
+        rehypePlugins: [[rehypeAccent, { accentColor }]],
         remarkPlugins: [remarkGfm],
         components: {
           a: ({ children, href }) => /* @__PURE__ */ React33.createElement(Link2, { href, target: defaultLinkAction }, children),
@@ -5186,7 +5267,7 @@ function MenuButton(props) {
 MenuButton.displayName = "MenuButton";
 
 // src/components/MonthPicker/MonthPicker.tsx
-import React35, { forwardRef as forwardRef9, useCallback as useCallback14, useEffect as useEffect10, useImperativeHandle as useImperativeHandle4, useRef as useRef9, useState as useState12 } from "react";
+import React35, { forwardRef as forwardRef9, useCallback as useCallback15, useEffect as useEffect11, useImperativeHandle as useImperativeHandle4, useRef as useRef10, useState as useState13 } from "react";
 import CalendarTodayIcon3 from "@mui/icons-material/CalendarToday";
 import { styled as styled21, useThemeProps as useThemeProps6 } from "@mui/joy";
 import { FocusTrap as FocusTrap3, ClickAwayListener as ClickAwayListener3, Popper as Popper4 } from "@mui/base";
@@ -5268,14 +5349,14 @@ var MonthPicker = forwardRef9((inProps, ref) => {
     locale,
     ...innerProps
   } = props;
-  const innerRef = useRef9(null);
-  const buttonRef = useRef9(null);
+  const innerRef = useRef10(null);
+  const buttonRef = useRef10(null);
   const [value, setValue, isControlled] = useControlledState(
     props.value,
     props.defaultValue || "",
-    useCallback14((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
+    useCallback15((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
   );
-  const getFormattedDisplayValue = useCallback14(
+  const getFormattedDisplayValue = useCallback15(
     (inputValue) => {
       if (!inputValue) return "";
       try {
@@ -5286,19 +5367,19 @@ var MonthPicker = forwardRef9((inProps, ref) => {
     },
     [format, displayFormat, locale]
   );
-  const [displayValue, setDisplayValue] = useState12(() => getFormattedDisplayValue(value));
-  const [anchorEl, setAnchorEl] = useState12(null);
+  const [displayValue, setDisplayValue] = useState13(() => getFormattedDisplayValue(value));
+  const [anchorEl, setAnchorEl] = useState13(null);
   const open = Boolean(anchorEl);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!anchorEl) {
       innerRef.current?.blur();
     }
   }, [anchorEl, innerRef]);
   useImperativeHandle4(ref, () => innerRef.current, [innerRef]);
-  useEffect10(() => {
+  useEffect11(() => {
     setDisplayValue(getFormattedDisplayValue(value));
   }, [value, getFormattedDisplayValue]);
-  const handleChange = useCallback14(
+  const handleChange = useCallback15(
     (event) => {
       const newValue = event.target.value;
       setValue(newValue);
@@ -5308,14 +5389,14 @@ var MonthPicker = forwardRef9((inProps, ref) => {
     },
     [setValue, getFormattedDisplayValue, isControlled]
   );
-  const handleCalendarToggle = useCallback14(
+  const handleCalendarToggle = useCallback15(
     (event) => {
       setAnchorEl(anchorEl ? null : event.currentTarget);
       innerRef.current?.focus();
     },
     [anchorEl, setAnchorEl, innerRef]
   );
-  const handleInputMouseDown = useCallback14(
+  const handleInputMouseDown = useCallback15(
     (event) => {
       event.preventDefault();
       buttonRef.current?.focus();
@@ -5439,7 +5520,7 @@ var MonthPicker = forwardRef9((inProps, ref) => {
 });
 
 // src/components/MonthRangePicker/MonthRangePicker.tsx
-import React36, { forwardRef as forwardRef10, useCallback as useCallback15, useEffect as useEffect11, useImperativeHandle as useImperativeHandle5, useMemo as useMemo13, useRef as useRef10, useState as useState13 } from "react";
+import React36, { forwardRef as forwardRef10, useCallback as useCallback16, useEffect as useEffect12, useImperativeHandle as useImperativeHandle5, useMemo as useMemo13, useRef as useRef11, useState as useState14 } from "react";
 import { IMaskInput as IMaskInput3, IMask as IMask3 } from "react-imask";
 import CalendarTodayIcon4 from "@mui/icons-material/CalendarToday";
 import { styled as styled22, useThemeProps as useThemeProps7 } from "@mui/joy";
@@ -5547,35 +5628,35 @@ var MonthRangePicker = forwardRef10((inProps, ref) => {
     size,
     ...innerProps
   } = props;
-  const innerRef = useRef10(null);
+  const innerRef = useRef11(null);
   const [value, setValue] = useControlledState(
     props.value,
     props.defaultValue || "",
-    useCallback15((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
+    useCallback16((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
   );
-  const [anchorEl, setAnchorEl] = useState13(null);
+  const [anchorEl, setAnchorEl] = useState14(null);
   const open = Boolean(anchorEl);
   const calendarValue = useMemo13(() => value ? parseDates2(value) : void 0, [value]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!anchorEl) {
       innerRef.current?.blur();
     }
   }, [anchorEl, innerRef]);
   useImperativeHandle5(ref, () => innerRef.current, [innerRef]);
-  const handleChange = useCallback15(
+  const handleChange = useCallback16(
     (event) => {
       setValue(event.target.value);
     },
     [setValue]
   );
-  const handleCalendarToggle = useCallback15(
+  const handleCalendarToggle = useCallback16(
     (event) => {
       setAnchorEl(anchorEl ? null : event.currentTarget);
       innerRef.current?.focus();
     },
     [anchorEl, setAnchorEl, innerRef]
   );
-  const handleCalendarChange = useCallback15(
+  const handleCalendarChange = useCallback16(
     ([date1, date2]) => {
       if (!date1 || !date2) return;
       setValue(formatValueString4([date1, date2], format));
@@ -5802,7 +5883,7 @@ function Navigator(props) {
 Navigator.displayName = "Navigator";
 
 // src/components/PercentageInput/PercentageInput.tsx
-import React40, { useCallback as useCallback16, useMemo as useMemo14, useState as useState14 } from "react";
+import React40, { useCallback as useCallback17, useMemo as useMemo14, useState as useState15 } from "react";
 import { NumericFormat as NumericFormat2 } from "react-number-format";
 import { styled as styled25, useThemeProps as useThemeProps8 } from "@mui/joy";
 var padDecimal = (value, decimalScale) => {
@@ -5859,9 +5940,9 @@ var PercentageInput = React40.forwardRef(
     const [_value, setValue] = useControlledState(
       props.value,
       props.defaultValue,
-      useCallback16((value2) => onChange?.({ target: { name, value: value2 } }), [onChange, name])
+      useCallback17((value2) => onChange?.({ target: { name, value: value2 } }), [onChange, name])
     );
-    const [internalError, setInternalError] = useState14(
+    const [internalError, setInternalError] = useState15(
       max && _value && _value > max || min && _value && _value < min
     );
     const value = useMemo14(() => {
@@ -5870,7 +5951,7 @@ var PercentageInput = React40.forwardRef(
       }
       return _value;
     }, [_value, useMinorUnit, maxDecimalScale]);
-    const handleChange = useCallback16(
+    const handleChange = useCallback17(
       (event) => {
         if (event.target.value === "") {
           setValue(void 0);
@@ -5927,31 +6008,194 @@ var MotionRadioGroup = motion26(JoyRadioGroup);
 var RadioGroup = MotionRadioGroup;
 RadioGroup.displayName = "RadioGroup";
 
-// src/components/RadioList/RadioList.tsx
+// src/components/RadioTileGroup/RadioTileGroup.tsx
 import React41 from "react";
+import { styled as styled26, radioClasses, sheetClasses } from "@mui/joy";
+var RadioTileGroupRoot = styled26(RadioGroup, {
+  name: "RadioTileGroup",
+  slot: "root",
+  shouldForwardProp: (prop) => prop !== "flex" && prop !== "columns"
+})(({ theme, flex, columns }) => ({
+  flexDirection: "row",
+  gap: theme.spacing(2),
+  ...flex && { flex: 1 },
+  ...columns && {
+    display: "grid",
+    gridTemplateColumns: `repeat(${columns}, 1fr)`
+  },
+  [`& .${sheetClasses.root}.${radioClasses.disabled}`]: {
+    borderColor: theme.palette.neutral.outlinedDisabledBorder
+  },
+  [`& .${radioClasses.root}`]: {
+    [`& .${radioClasses.action}`]: {
+      borderRadius: theme.radius.md
+    },
+    [`&.${radioClasses.checked}`]: {
+      [`& .${radioClasses.action}`]: {
+        inset: -1,
+        border: "2px solid",
+        borderColor: theme.palette.primary.outlinedColor
+      },
+      [`&.${radioClasses.disabled}`]: {
+        [`& .${radioClasses.action}`]: {
+          borderColor: theme.palette.neutral.outlinedBorder
+        }
+      }
+    }
+  }
+}));
+var RadioTileSheet = styled26(Sheet, {
+  name: "RadioTileGroup",
+  slot: "tile",
+  shouldForwardProp: (prop) => prop !== "disabled" && prop !== "size" && prop !== "flex" && prop !== "textAlign"
+})(({
+  theme,
+  disabled,
+  size = "sm",
+  flex,
+  textAlign
+}) => {
+  const px = { sm: theme.spacing(3), md: theme.spacing(3), lg: theme.spacing(4) }[size];
+  const py = { sm: theme.spacing(3), md: theme.spacing(4), lg: theme.spacing(4) }[size];
+  return {
+    borderRadius: theme.radius.md,
+    display: "flex",
+    gap: { sm: theme.spacing(2), md: theme.spacing(3), lg: theme.spacing(4) }[size],
+    padding: `${py} ${px}`,
+    // NOTE: Radio에도 Label과의 정렬을 맞추기 위해 중복 코드가 있지만 Icon과 RadioButton 의 정렬도 일치시켜야 해서 코드가 중복으로 존재할수밖에 없다.
+    flexDirection: textAlign === "start" ? "row-reverse" : "column-reverse",
+    justifyContent: textAlign === "start" ? "space-between" : "center",
+    alignItems: "center",
+    ...flex ? { flex: 1 } : {},
+    ...disabled ? { borderColor: theme.palette.neutral.outlinedDisabledBorder } : {
+      ":hover": {
+        backgroundColor: theme.palette.neutral.outlinedHoverBg
+      },
+      ":active": {
+        backgroundColor: theme.palette.neutral.outlinedActiveBg
+      }
+    }
+  };
+});
+function RadioTileGroup(props) {
+  const {
+    options,
+    value,
+    defaultValue,
+    onChange,
+    name,
+    disabled: allDisabled,
+    sx,
+    className,
+    useIndicator,
+    textAlign = "center",
+    size = "sm",
+    flex,
+    columns,
+    label,
+    helperText,
+    error,
+    required
+  } = props;
+  const radioGroup = /* @__PURE__ */ React41.createElement(
+    RadioTileGroupRoot,
+    {
+      overlay: true,
+      name,
+      value,
+      defaultValue,
+      onChange,
+      flex,
+      columns
+    },
+    options.map((option) => /* @__PURE__ */ React41.createElement(
+      RadioTileSheet,
+      {
+        key: option.value,
+        variant: "outlined",
+        disabled: allDisabled ?? option.disabled,
+        size,
+        flex,
+        textAlign
+      },
+      /* @__PURE__ */ React41.createElement(
+        Radio,
+        {
+          id: `${option.value}`,
+          value: option.value,
+          label: option.label,
+          disableIcon: !useIndicator,
+          disabled: allDisabled ?? option.disabled,
+          size,
+          slotProps: {
+            root: {
+              sx: {
+                width: "100%",
+                flexDirection: textAlign === "start" ? "row-reverse" : "column-reverse",
+                justifyContent: textAlign === "start" ? "space-between" : "center",
+                alignItems: "center",
+                gap: { sm: 2, md: 3, lg: 4 }[size]
+              }
+            },
+            label: ({ disabled }) => ({
+              sx: (theme) => ({
+                ...theme.typography[{ sm: "body-sm", md: "body-md", lg: "body-lg" }[size]],
+                color: disabled ? theme.palette.neutral.outlinedDisabledColor : theme.palette.neutral.outlinedColor
+              })
+            })
+          }
+        }
+      ),
+      option.startDecorator && /* @__PURE__ */ React41.createElement(
+        Box_default,
+        {
+          sx: {
+            zIndex: 2,
+            // HACK: Radio의 overlay가 decorator를 덮어버리기 때문에 문제 예방을 위해 적용해야 한다.
+            width: { sm: "20px", md: "24px", lg: "24px" }[size],
+            height: { sm: "20px", md: "24px", lg: "24px" }[size],
+            color: "inherit",
+            "& > .MuiSvgIcon-root": {
+              width: "inherit",
+              height: "inherit",
+              fill: "currentColor",
+              color: "inherit"
+            }
+          }
+        },
+        option.startDecorator
+      )
+    ))
+  );
+  return /* @__PURE__ */ React41.createElement(FormControl_default, { required, disabled: allDisabled, error, size, sx, className }, label && /* @__PURE__ */ React41.createElement(FormLabel_default, null, label), radioGroup, helperText && /* @__PURE__ */ React41.createElement(FormHelperText_default, null, helperText));
+}
+RadioTileGroup.displayName = "RadioTileGroup";
+
+// src/components/RadioList/RadioList.tsx
+import React42 from "react";
 function RadioList(props) {
   const { items, ...innerProps } = props;
-  return /* @__PURE__ */ React41.createElement(RadioGroup, { ...innerProps }, items.map((item) => /* @__PURE__ */ React41.createElement(Radio, { key: `${item.value}`, value: item.value, label: item.label })));
+  return /* @__PURE__ */ React42.createElement(RadioGroup, { ...innerProps }, items.map((item) => /* @__PURE__ */ React42.createElement(Radio, { key: `${item.value}`, value: item.value, label: item.label })));
 }
 RadioList.displayName = "RadioList";
 
 // src/components/Stepper/Stepper.tsx
-import React42 from "react";
+import React43 from "react";
 import {
   Stepper as JoyStepper,
   Step as JoyStep,
   StepIndicator as JoyStepIndicator,
   stepClasses,
   stepIndicatorClasses,
-  styled as styled26
+  styled as styled27
 } from "@mui/joy";
 import CheckIcon from "@mui/icons-material/Check";
 import { motion as motion27 } from "framer-motion";
-var Step = styled26(JoyStep)({});
+var Step = styled27(JoyStep)({});
 Step.displayName = "Step";
-var StepIndicator = styled26(JoyStepIndicator)({});
+var StepIndicator = styled27(JoyStepIndicator)({});
 StepIndicator.displayName = "StepIndicator";
-var StyledStepper = styled26(JoyStepper)(({ theme }) => ({
+var StyledStepper = styled27(JoyStepper)(({ theme }) => ({
   "--StepIndicator-size": "24px",
   "--Step-gap": theme.spacing(2),
   "--joy-palette-success-solidBg": "var(--joy-palette-success-400)",
@@ -5972,7 +6216,7 @@ function Stepper(props) {
     stepOrientation = "horizontal"
   } = props;
   const effectiveStepOrientation = orientation === "vertical" ? "horizontal" : stepOrientation;
-  return /* @__PURE__ */ React42.createElement(
+  return /* @__PURE__ */ React43.createElement(
     MotionStepper,
     {
       orientation,
@@ -6011,23 +6255,23 @@ function Stepper(props) {
       const completed = activeStep > i + 1;
       const disabled = activeStep < i + 1;
       const hasContent = step.label || step.extraContent;
-      return /* @__PURE__ */ React42.createElement(
+      return /* @__PURE__ */ React43.createElement(
         Step,
         {
           key: `step-${i}`,
-          indicator: /* @__PURE__ */ React42.createElement(StepIndicator, { variant: disabled ? "outlined" : "solid", color: disabled ? "neutral" : "primary" }, completed ? /* @__PURE__ */ React42.createElement(CheckIcon, null) : step.indicatorContent),
+          indicator: /* @__PURE__ */ React43.createElement(StepIndicator, { variant: disabled ? "outlined" : "solid", color: disabled ? "neutral" : "primary" }, completed ? /* @__PURE__ */ React43.createElement(CheckIcon, null) : step.indicatorContent),
           active,
           completed,
           disabled,
           orientation: effectiveStepOrientation
         },
-        hasContent && /* @__PURE__ */ React42.createElement(
+        hasContent && /* @__PURE__ */ React43.createElement(
           Stack_default,
           {
             sx: orientation === "horizontal" && effectiveStepOrientation === "vertical" ? { alignItems: "center" } : {}
           },
-          step.label && /* @__PURE__ */ React42.createElement(Typography_default, { level: "title-sm" }, step.label),
-          step.extraContent && /* @__PURE__ */ React42.createElement(Typography_default, { level: "body-xs" }, step.extraContent)
+          step.label && /* @__PURE__ */ React43.createElement(Typography_default, { level: "title-sm" }, step.label),
+          step.extraContent && /* @__PURE__ */ React43.createElement(Typography_default, { level: "body-xs" }, step.extraContent)
         )
       );
     })
@@ -6036,11 +6280,11 @@ function Stepper(props) {
 Stepper.displayName = "Stepper";
 
 // src/components/Switch/Switch.tsx
-import React43 from "react";
-import { Switch as JoySwitch, styled as styled27, switchClasses } from "@mui/joy";
+import React44 from "react";
+import { Switch as JoySwitch, styled as styled28, switchClasses } from "@mui/joy";
 import { motion as motion28 } from "framer-motion";
 var MotionSwitch = motion28(JoySwitch);
-var StyledThumb = styled27(motion28.div)({
+var StyledThumb = styled28(motion28.div)({
   "--Icon-fontSize": "calc(var(--Switch-thumbSize) * 0.75)",
   display: "inline-flex",
   justifyContent: "center",
@@ -6058,14 +6302,14 @@ var StyledThumb = styled27(motion28.div)({
     right: "var(--Switch-thumbOffset)"
   }
 });
-var Thumb = (props) => /* @__PURE__ */ React43.createElement(StyledThumb, { ...props, layout: true, transition: spring });
+var Thumb = (props) => /* @__PURE__ */ React44.createElement(StyledThumb, { ...props, layout: true, transition: spring });
 var spring = {
   type: "spring",
   stiffness: 700,
   damping: 30
 };
 var Switch = (props) => {
-  return /* @__PURE__ */ React43.createElement(
+  return /* @__PURE__ */ React44.createElement(
     MotionSwitch,
     {
       ...props,
@@ -6079,21 +6323,21 @@ var Switch = (props) => {
 Switch.displayName = "Switch";
 
 // src/components/Tabs/Tabs.tsx
-import React44, { forwardRef as forwardRef11 } from "react";
+import React45, { forwardRef as forwardRef11 } from "react";
 import {
   Tabs as JoyTabs,
   Tab as JoyTab,
   TabList as JoyTabList,
   TabPanel as JoyTabPanel,
-  styled as styled28,
+  styled as styled29,
   tabClasses
 } from "@mui/joy";
-var StyledTabs = styled28(JoyTabs)(({ theme }) => ({
+var StyledTabs = styled29(JoyTabs)(({ theme }) => ({
   backgroundColor: theme.palette.background.body
 }));
 var Tabs = StyledTabs;
 Tabs.displayName = "Tabs";
-var StyledTab = styled28(JoyTab)(({ theme }) => ({
+var StyledTab = styled29(JoyTab)(({ theme }) => ({
   gap: theme.spacing(2),
   [`&:not(.${tabClasses.selected})`]: {
     color: theme.palette.neutral[700]
@@ -6103,14 +6347,14 @@ var StyledTab = styled28(JoyTab)(({ theme }) => ({
   }
 }));
 var Tab = forwardRef11(function Tab2({ startDecorator, endDecorator, children, ...props }, ref) {
-  return /* @__PURE__ */ React44.createElement(StyledTab, { ...props, ref }, startDecorator, children, endDecorator);
+  return /* @__PURE__ */ React45.createElement(StyledTab, { ...props, ref }, startDecorator, children, endDecorator);
 });
 Tab.displayName = "Tab";
 var TabList = JoyTabList;
 var TabPanel = JoyTabPanel;
 
 // src/components/ThemeProvider/ThemeProvider.tsx
-import React45 from "react";
+import React46 from "react";
 import {
   CssBaseline,
   CssVarsProvider,
@@ -6366,13 +6610,13 @@ var defaultTheme = extendTheme({
 });
 function ThemeProvider(props) {
   const theme = props.theme || defaultTheme;
-  return /* @__PURE__ */ React45.createElement(React45.Fragment, null, /* @__PURE__ */ React45.createElement(CssVarsProvider, { theme }, /* @__PURE__ */ React45.createElement(CssBaseline, null), props.children));
+  return /* @__PURE__ */ React46.createElement(React46.Fragment, null, /* @__PURE__ */ React46.createElement(CssVarsProvider, { theme }, /* @__PURE__ */ React46.createElement(CssBaseline, null), props.children));
 }
 ThemeProvider.displayName = "ThemeProvider";
 
 // src/components/Uploader/Uploader.tsx
-import React46, { useCallback as useCallback17, useEffect as useEffect12, useMemo as useMemo15, useRef as useRef11, useState as useState15 } from "react";
-import { styled as styled29, Input as Input2 } from "@mui/joy";
+import React47, { useCallback as useCallback18, useEffect as useEffect13, useMemo as useMemo15, useRef as useRef12, useState as useState16 } from "react";
+import { styled as styled30, Input as Input2 } from "@mui/joy";
 import MuiFileUploadIcon from "@mui/icons-material/CloudUploadRounded";
 import MuiUploadFileIcon from "@mui/icons-material/UploadFileRounded";
 import MuiClearIcon from "@mui/icons-material/ClearRounded";
@@ -6394,7 +6638,7 @@ var esmFiles = {
     "@atlaskit/pragmatic-drag-and-drop/dist/esm/entry-point/prevent-unhandled.js"
   )
 };
-var VisuallyHiddenInput = styled29(Input2)({
+var VisuallyHiddenInput = styled30(Input2)({
   width: "1px",
   height: "1px",
   overflow: "hidden",
@@ -6403,18 +6647,18 @@ var VisuallyHiddenInput = styled29(Input2)({
   clipPath: "inset(50%)",
   position: "absolute"
 });
-var PreviewRoot = styled29(Stack_default, {
+var PreviewRoot = styled30(Stack_default, {
   name: "Uploader",
   slot: "PreviewRoot"
 })({});
-var UploadCard = styled29(Card, {
+var UploadCard = styled30(Card, {
   name: "Uploader",
   slot: "UploadCard"
 })(({ theme }) => ({
   padding: theme.spacing(2.5),
   border: `1px solid ${theme.palette.neutral.outlinedBorder}`
 }));
-var UploadFileIcon = styled29(MuiUploadFileIcon, {
+var UploadFileIcon = styled30(MuiUploadFileIcon, {
   name: "Uploader",
   slot: "UploadFileIcon"
 })(({ theme }) => ({
@@ -6422,7 +6666,7 @@ var UploadFileIcon = styled29(MuiUploadFileIcon, {
   width: "32px",
   height: "32px"
 }));
-var ClearIcon2 = styled29(MuiClearIcon, {
+var ClearIcon2 = styled30(MuiClearIcon, {
   name: "Uploader",
   slot: "ClearIcon"
 })(({ theme }) => ({
@@ -6448,7 +6692,7 @@ var getFileSize = (n) => {
 };
 var Preview = (props) => {
   const { files, uploaded, onDelete } = props;
-  return /* @__PURE__ */ React46.createElement(PreviewRoot, { gap: 1 }, [...uploaded, ...files].map((file) => /* @__PURE__ */ React46.createElement(UploadCard, { key: file.name, size: "sm", color: "neutral" }, /* @__PURE__ */ React46.createElement(Stack_default, { direction: "row", alignItems: "center", gap: 2 }, /* @__PURE__ */ React46.createElement(UploadFileIcon, null), /* @__PURE__ */ React46.createElement(Stack_default, { flex: "1", sx: { overflow: "hidden" } }, /* @__PURE__ */ React46.createElement(
+  return /* @__PURE__ */ React47.createElement(PreviewRoot, { gap: 1 }, [...uploaded, ...files].map((file) => /* @__PURE__ */ React47.createElement(UploadCard, { key: file.name, size: "sm", color: "neutral" }, /* @__PURE__ */ React47.createElement(Stack_default, { direction: "row", alignItems: "center", gap: 2 }, /* @__PURE__ */ React47.createElement(UploadFileIcon, null), /* @__PURE__ */ React47.createElement(Stack_default, { flex: "1", sx: { overflow: "hidden" } }, /* @__PURE__ */ React47.createElement(
     Typography_default,
     {
       level: "body-sm",
@@ -6460,15 +6704,15 @@ var Preview = (props) => {
       }
     },
     file.name
-  ), !!file.size && /* @__PURE__ */ React46.createElement(Typography_default, { level: "body-xs", fontWeight: "300", lineHeight: "1.33", textColor: "text.tertiary" }, getFileSize(file.size))), /* @__PURE__ */ React46.createElement(IconButton_default, { onClick: () => onDelete?.(file) }, /* @__PURE__ */ React46.createElement(ClearIcon2, null))))));
+  ), !!file.size && /* @__PURE__ */ React47.createElement(Typography_default, { level: "body-xs", fontWeight: "300", lineHeight: "1.33", textColor: "text.tertiary" }, getFileSize(file.size))), /* @__PURE__ */ React47.createElement(IconButton_default, { onClick: () => onDelete?.(file) }, /* @__PURE__ */ React47.createElement(ClearIcon2, null))))));
 };
-var UploaderRoot = styled29(Stack_default, {
+var UploaderRoot = styled30(Stack_default, {
   name: "Uploader",
   slot: "root"
 })(({ theme }) => ({
   gap: theme.spacing(2)
 }));
-var FileDropZone = styled29(Sheet_default, {
+var FileDropZone = styled30(Sheet_default, {
   name: "Uploader",
   slot: "dropZone",
   shouldForwardProp: (prop) => prop !== "error" && prop !== "disabled"
@@ -6489,7 +6733,7 @@ var FileDropZone = styled29(Sheet_default, {
     }
   })
 );
-var UploaderIcon = styled29(MuiFileUploadIcon, {
+var UploaderIcon = styled30(MuiFileUploadIcon, {
   name: "Uploader",
   slot: "iconContainer",
   shouldForwardProp: (prop) => prop !== "error" && prop !== "disabled"
@@ -6503,7 +6747,7 @@ var UploaderIcon = styled29(MuiFileUploadIcon, {
     }
   })
 );
-var Uploader = React46.memo(
+var Uploader = React47.memo(
   (props) => {
     const {
       accept,
@@ -6520,12 +6764,12 @@ var Uploader = React46.memo(
       error: errorProp,
       helperText: helperTextProp
     } = props;
-    const dropZoneRef = useRef11(null);
-    const inputRef = useRef11(null);
-    const [errorText, setErrorText] = useState15();
-    const [files, setFiles] = useState15([]);
-    const [uploaded, setUploaded] = useState15(props.uploaded || []);
-    const [previewState, setPreviewState] = useState15("idle");
+    const dropZoneRef = useRef12(null);
+    const inputRef = useRef12(null);
+    const [errorText, setErrorText] = useState16();
+    const [files, setFiles] = useState16([]);
+    const [uploaded, setUploaded] = useState16(props.uploaded || []);
+    const [previewState, setPreviewState] = useState16("idle");
     const accepts = useMemo15(() => accept.split(",").map((accept2) => accept2.trim()), [accept]);
     const parsedAccepts = useMemo15(
       () => accepts.flatMap((type) => {
@@ -6571,7 +6815,7 @@ var Uploader = React46.memo(
       () => !maxCount || maxCount && [...uploaded, ...files].length !== maxCount,
       [files, maxCount, uploaded]
     );
-    const addFiles = useCallback17(
+    const addFiles = useCallback18(
       (uploads) => {
         try {
           const types = parsedAccepts.map((type) => type.replace(".", "")) || [];
@@ -6616,7 +6860,7 @@ var Uploader = React46.memo(
       },
       [files, uploaded, maxCount, parsedAccepts, maxFileSize, maxFileTotalSize, name, onChange]
     );
-    useEffect12(() => {
+    useEffect13(() => {
       if (!dropZoneRef.current || disabled) {
         return;
       }
@@ -6654,7 +6898,7 @@ var Uploader = React46.memo(
       );
       return () => cleanup?.();
     }, [disabled, addFiles]);
-    useEffect12(() => {
+    useEffect13(() => {
       if (inputRef.current && minCount) {
         if (files.length < minCount) {
           inputRef.current.setCustomValidity(`At least ${minCount} files are required.`);
@@ -6663,14 +6907,14 @@ var Uploader = React46.memo(
         }
       }
     }, [inputRef, files, minCount]);
-    const handleFileChanged = useCallback17(
+    const handleFileChanged = useCallback18(
       (event) => {
         const files2 = Array.from(event.target.files || []);
         addFiles(files2);
       },
       [addFiles]
     );
-    const handleDeleteFile = useCallback17(
+    const handleDeleteFile = useCallback18(
       (deletedFile) => {
         if (deletedFile instanceof File) {
           setFiles((current) => {
@@ -6690,10 +6934,10 @@ var Uploader = React46.memo(
       },
       [name, onChange, onDelete]
     );
-    const handleUploaderButtonClick = useCallback17(() => {
+    const handleUploaderButtonClick = useCallback18(() => {
       inputRef.current?.click();
     }, []);
-    const uploader = /* @__PURE__ */ React46.createElement(
+    const uploader = /* @__PURE__ */ React47.createElement(
       FileDropZone,
       {
         state: previewState,
@@ -6702,8 +6946,8 @@ var Uploader = React46.memo(
         ref: dropZoneRef,
         onClick: handleUploaderButtonClick
       },
-      /* @__PURE__ */ React46.createElement(Stack_default, { alignItems: "center", gap: 1 }, /* @__PURE__ */ React46.createElement(UploaderIcon, { state: previewState, error: !!(error || errorText), disabled })),
-      /* @__PURE__ */ React46.createElement(
+      /* @__PURE__ */ React47.createElement(Stack_default, { alignItems: "center", gap: 1 }, /* @__PURE__ */ React47.createElement(UploaderIcon, { state: previewState, error: !!(error || errorText), disabled })),
+      /* @__PURE__ */ React47.createElement(
         VisuallyHiddenInput,
         {
           disabled,
@@ -6726,7 +6970,7 @@ var Uploader = React46.memo(
         }
       )
     );
-    return /* @__PURE__ */ React46.createElement(UploaderRoot, null, showDropZone && /* @__PURE__ */ React46.createElement(FormControl_default, { size, error: !!(error || errorText), disabled, required: !!minCount }, label && /* @__PURE__ */ React46.createElement(FormLabel_default, null, label), uploader, /* @__PURE__ */ React46.createElement(FormHelperText_default, null, /* @__PURE__ */ React46.createElement(Stack_default, null, errorText && /* @__PURE__ */ React46.createElement("div", null, errorText), /* @__PURE__ */ React46.createElement("div", null, helperText)))), [...uploaded, ...files].length > 0 && /* @__PURE__ */ React46.createElement(Preview, { files, uploaded, onDelete: handleDeleteFile }));
+    return /* @__PURE__ */ React47.createElement(UploaderRoot, null, showDropZone && /* @__PURE__ */ React47.createElement(FormControl_default, { size, error: !!(error || errorText), disabled, required: !!minCount }, label && /* @__PURE__ */ React47.createElement(FormLabel_default, null, label), uploader, /* @__PURE__ */ React47.createElement(FormHelperText_default, null, /* @__PURE__ */ React47.createElement(Stack_default, null, errorText && /* @__PURE__ */ React47.createElement("div", null, errorText), /* @__PURE__ */ React47.createElement("div", null, helperText)))), [...uploaded, ...files].length > 0 && /* @__PURE__ */ React47.createElement(Preview, { files, uploaded, onDelete: handleDeleteFile }));
   }
 );
 Uploader.displayName = "Uploader";
@@ -6807,6 +7051,7 @@ export {
   Radio,
   RadioGroup,
   RadioList,
+  RadioTileGroup,
   Select,
   Sheet,
   Skeleton2 as Skeleton,
@@ -6881,17 +7126,17 @@ export {
   modalDialogClasses,
   modalOverflowClasses,
   optionClasses,
-  radioClasses,
+  radioClasses2 as radioClasses,
   radioGroupClasses,
   selectClasses,
-  sheetClasses,
+  sheetClasses2 as sheetClasses,
   skeletonClasses,
   sliderClasses,
   stackClasses,
   stepButtonClasses,
   stepClasses2 as stepClasses,
   stepperClasses,
-  styled30 as styled,
+  styled31 as styled,
   switchClasses2 as switchClasses,
   tabListClasses,
   tabPanelClasses,