@cgi-learning-hub/ui 1.10.0-dev.1763395229 → 1.10.0-dev.1764669566

package/dist/index.es.js

@@ -9,7 +9,7 @@ import { css as css2, keyframes as keyframes2 } from "@emotion/react";
 import emStyled from "@emotion/styled";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default from "react-dom";
-import { useTheme as useTheme$4, styled as styled$3, ToggleButtonGroup as ToggleButtonGroup$1, ToggleButton as ToggleButton$1, Box as Box$1, ClickAwayListener as ClickAwayListener$1, IconButton as IconButton$1, Stack as Stack$1, ListItem as ListItem$1, CircularProgress as CircularProgress$1, ListItemButton as ListItemButton$1, List as List$2, Divider as Divider$1, Card as Card$1, CardMedia as CardMedia$1, CardContent as CardContent$1, Tooltip as Tooltip$1 } from "@mui/material";
+import { useTheme as useTheme$4, styled as styled$3, Box as Box$1, ClickAwayListener as ClickAwayListener$1, IconButton as IconButton$1, Stack as Stack$1, ListItem as ListItem$1, CircularProgress as CircularProgress$1, ListItemButton as ListItemButton$1, List as List$2, Divider as Divider$1, Card as Card$1, CardMedia as CardMedia$1, CardContent as CardContent$1, Tooltip as Tooltip$1 } from "@mui/material";
 import { CirclePicker } from "react-color";
 import dayjs from "dayjs";
 import { useDropzone } from "react-dropzone";
@@ -5971,7 +5971,7 @@ const useThemePropsDefault$2 = (inProps) => useThemeProps$3({
   name: "MuiContainer",
   defaultTheme: defaultTheme$4
 });
-const useUtilityClasses$1W = (ownerState, componentName) => {
+const useUtilityClasses$1X = (ownerState, componentName) => {
   const getContainerUtilityClass2 = (slot) => {
     return generateUtilityClass$1(componentName, slot);
   };
@@ -6061,7 +6061,7 @@ function createContainer(options = {}) {
       fixed,
       maxWidth: maxWidth2
     };
-    const classes = useUtilityClasses$1W(ownerState, componentName);
+    const classes = useUtilityClasses$1X(ownerState, componentName);
     return (
       // @ts-ignore theme is injected by the styled util
       /* @__PURE__ */ jsx(ContainerRoot, {
@@ -8247,7 +8247,7 @@ function getSvgIconUtilityClass(slot) {
   return generateUtilityClass("MuiSvgIcon", slot);
 }
 const svgIconClasses = generateUtilityClasses("MuiSvgIcon", ["root", "colorPrimary", "colorSecondary", "colorAction", "colorError", "colorDisabled", "fontSizeInherit", "fontSizeSmall", "fontSizeMedium", "fontSizeLarge"]);
-const useUtilityClasses$1V = (ownerState) => {
+const useUtilityClasses$1W = (ownerState) => {
   const {
     color: color2,
     fontSize,
@@ -8392,7 +8392,7 @@ const SvgIcon = /* @__PURE__ */ React.forwardRef(function SvgIcon2(inProps, ref)
   if (!inheritViewBox) {
     more.viewBox = viewBox;
   }
-  const classes = useUtilityClasses$1V(ownerState);
+  const classes = useUtilityClasses$1W(ownerState);
   return /* @__PURE__ */ jsxs(SvgIconRoot, {
     as: component,
     className: clsx(classes.root, className),
@@ -10252,7 +10252,7 @@ function getButtonBaseUtilityClass(slot) {
   return generateUtilityClass("MuiButtonBase", slot);
 }
 const buttonBaseClasses = generateUtilityClasses("MuiButtonBase", ["root", "disabled", "focusVisible"]);
-const useUtilityClasses$1U = (ownerState) => {
+const useUtilityClasses$1V = (ownerState) => {
   const {
     disabled,
     focusVisible,
@@ -10468,7 +10468,7 @@ const ButtonBase = /* @__PURE__ */ React.forwardRef(function ButtonBase2(inProps
     tabIndex,
     focusVisible
   };
-  const classes = useUtilityClasses$1U(ownerState);
+  const classes = useUtilityClasses$1V(ownerState);
   return /* @__PURE__ */ jsxs(ButtonBaseRoot, {
     as: ComponentProp,
     className: clsx(classes.root, className),
@@ -10671,7 +10671,7 @@ function getTabScrollButtonUtilityClass(slot) {
   return generateUtilityClass("MuiTabScrollButton", slot);
 }
 const tabScrollButtonClasses = generateUtilityClasses("MuiTabScrollButton", ["root", "vertical", "horizontal", "disabled"]);
-const useUtilityClasses$1T = (ownerState) => {
+const useUtilityClasses$1U = (ownerState) => {
   const {
     classes,
     orientation,
@@ -10730,7 +10730,7 @@ const TabScrollButton = /* @__PURE__ */ React.forwardRef(function TabScrollButto
     isRtl,
     ...props
   };
-  const classes = useUtilityClasses$1T(ownerState);
+  const classes = useUtilityClasses$1U(ownerState);
   const StartButtonIcon = slots.StartScrollButtonIcon ?? KeyboardArrowLeft;
   const EndButtonIcon = slots.EndScrollButtonIcon ?? KeyboardArrowRight;
   const startButtonIconProps = useSlotProps({
@@ -10917,7 +10917,7 @@ const moveFocus$1 = (list, currentFocus, traversalFunction) => {
     }
   }
 };
-const useUtilityClasses$1S = (ownerState) => {
+const useUtilityClasses$1T = (ownerState) => {
   const {
     vertical,
     fixed,
@@ -11169,7 +11169,7 @@ const Tabs = /* @__PURE__ */ React.forwardRef(function Tabs2(inProps, ref) {
     centered: centered && !scrollable,
     scrollButtonsHideMobile: !allowScrollButtonsMobile
   };
-  const classes = useUtilityClasses$1S(ownerState);
+  const classes = useUtilityClasses$1T(ownerState);
   const startScrollButtonIconProps = useSlotProps({
     elementType: slots.StartScrollButtonIcon,
     externalSlotProps: slotProps.startScrollButtonIcon,
@@ -12215,7 +12215,7 @@ function getTabPanelUtilityClass(slot) {
   return generateUtilityClass("MuiTabPanel", slot);
 }
 const tabPanelClasses = generateUtilityClasses("MuiTabPanel", ["root", "hidden"]);
-const useUtilityClasses$1R = (ownerState) => {
+const useUtilityClasses$1S = (ownerState) => {
   const {
     classes,
     hidden
@@ -12248,7 +12248,7 @@ const TabPanel = /* @__PURE__ */ React.forwardRef(function TabPanel2(inProps, re
   const ownerState = {
     ...props
   };
-  const classes = useUtilityClasses$1R(ownerState);
+  const classes = useUtilityClasses$1S(ownerState);
   const context = useTabContext();
   if (context === null) {
     throw new TypeError("No TabContext provided");
@@ -12316,7 +12316,7 @@ function getCollapseUtilityClass(slot) {
   return generateUtilityClass("MuiCollapse", slot);
 }
 const collapseClasses = generateUtilityClasses("MuiCollapse", ["root", "horizontal", "vertical", "entered", "hidden", "wrapper", "wrapperInner"]);
-const useUtilityClasses$1Q = (ownerState) => {
+const useUtilityClasses$1R = (ownerState) => {
   const {
     orientation,
     classes
@@ -12442,7 +12442,7 @@ const Collapse = /* @__PURE__ */ React.forwardRef(function Collapse2(inProps, re
     orientation,
     collapsedSize: collapsedSizeProp
   };
-  const classes = useUtilityClasses$1Q(ownerState);
+  const classes = useUtilityClasses$1R(ownerState);
   const theme = useTheme();
   const timer = useTimeout$1();
   const wrapperRef = React.useRef(null);
@@ -12742,7 +12742,7 @@ function getPaperUtilityClass(slot) {
   return generateUtilityClass("MuiPaper", slot);
 }
 const paperClasses = generateUtilityClasses("MuiPaper", ["root", "rounded", "outlined", "elevation", "elevation0", "elevation1", "elevation2", "elevation3", "elevation4", "elevation5", "elevation6", "elevation7", "elevation8", "elevation9", "elevation10", "elevation11", "elevation12", "elevation13", "elevation14", "elevation15", "elevation16", "elevation17", "elevation18", "elevation19", "elevation20", "elevation21", "elevation22", "elevation23", "elevation24"]);
-const useUtilityClasses$1P = (ownerState) => {
+const useUtilityClasses$1Q = (ownerState) => {
   const {
     square,
     elevation,
@@ -12815,7 +12815,7 @@ const Paper = /* @__PURE__ */ React.forwardRef(function Paper2(inProps, ref) {
     square,
     variant
   };
-  const classes = useUtilityClasses$1P(ownerState);
+  const classes = useUtilityClasses$1Q(ownerState);
   if (process.env.NODE_ENV !== "production") {
     if (theme.shadows[elevation] === void 0) {
       console.error([`MUI: The elevation provided <Paper elevation={${elevation}}> is not available in the theme.`, `Please make sure that \`theme.shadows[${elevation}]\` is defined.`].join("\n"));
@@ -12905,7 +12905,7 @@ function getAccordionUtilityClass(slot) {
   return generateUtilityClass("MuiAccordion", slot);
 }
 const accordionClasses = generateUtilityClasses("MuiAccordion", ["root", "heading", "rounded", "expanded", "disabled", "gutters", "region"]);
-const useUtilityClasses$1O = (ownerState) => {
+const useUtilityClasses$1P = (ownerState) => {
   const {
     classes,
     square,
@@ -13064,7 +13064,7 @@ const Accordion = /* @__PURE__ */ React.forwardRef(function Accordion2(inProps,
     disableGutters,
     expanded
   };
-  const classes = useUtilityClasses$1O(ownerState);
+  const classes = useUtilityClasses$1P(ownerState);
   const backwardCompatibleSlots = {
     transition: TransitionComponentProp,
     ...slots
@@ -13231,7 +13231,7 @@ function getAccordionActionsUtilityClass(slot) {
   return generateUtilityClass("MuiAccordionActions", slot);
 }
 const accordionActionsClasses = generateUtilityClasses("MuiAccordionActions", ["root", "spacing"]);
-const useUtilityClasses$1N = (ownerState) => {
+const useUtilityClasses$1O = (ownerState) => {
   const {
     classes,
     disableSpacing
@@ -13278,7 +13278,7 @@ const AccordionActions = /* @__PURE__ */ React.forwardRef(function AccordionActi
     ...props,
     disableSpacing
   };
-  const classes = useUtilityClasses$1N(ownerState);
+  const classes = useUtilityClasses$1O(ownerState);
   return /* @__PURE__ */ jsx(AccordionActionsRoot, {
     className: clsx(classes.root, className),
     ref,
@@ -13317,7 +13317,7 @@ function getAccordionDetailsUtilityClass(slot) {
   return generateUtilityClass("MuiAccordionDetails", slot);
 }
 const accordionDetailsClasses = generateUtilityClasses("MuiAccordionDetails", ["root"]);
-const useUtilityClasses$1M = (ownerState) => {
+const useUtilityClasses$1N = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -13344,7 +13344,7 @@ const AccordionDetails = /* @__PURE__ */ React.forwardRef(function AccordionDeta
     ...other
   } = props;
   const ownerState = props;
-  const classes = useUtilityClasses$1M(ownerState);
+  const classes = useUtilityClasses$1N(ownerState);
   return /* @__PURE__ */ jsx(AccordionDetailsRoot, {
     className: clsx(classes.root, className),
     ref,
@@ -13378,7 +13378,7 @@ function getAccordionSummaryUtilityClass(slot) {
   return generateUtilityClass("MuiAccordionSummary", slot);
 }
 const accordionSummaryClasses = generateUtilityClasses("MuiAccordionSummary", ["root", "expanded", "focusVisible", "disabled", "gutters", "contentGutters", "content", "expandIconWrapper"]);
-const useUtilityClasses$1L = (ownerState) => {
+const useUtilityClasses$1M = (ownerState) => {
   const {
     classes,
     expanded,
@@ -13500,7 +13500,7 @@ const AccordionSummary = /* @__PURE__ */ React.forwardRef(function AccordionSumm
     disabled,
     disableGutters
   };
-  const classes = useUtilityClasses$1L(ownerState);
+  const classes = useUtilityClasses$1M(ownerState);
   const externalForwardedProps = {
     slots,
     slotProps
@@ -13644,7 +13644,7 @@ const v6Colors$1 = {
   textDisabled: true
 };
 const extendSxProp = internal_createExtendSxProp();
-const useUtilityClasses$1K = (ownerState) => {
+const useUtilityClasses$1L = (ownerState) => {
   const {
     align,
     gutterBottom,
@@ -13787,7 +13787,7 @@ const Typography = /* @__PURE__ */ React.forwardRef(function Typography2(inProps
     variantMapping
   };
   const Component = component || (paragraph ? "p" : variantMapping[variant] || defaultVariantMapping[variant]) || "span";
-  const classes = useUtilityClasses$1K(ownerState);
+  const classes = useUtilityClasses$1L(ownerState);
   return /* @__PURE__ */ jsx(TypographyRoot, {
     as: Component,
     ref,
@@ -13892,7 +13892,7 @@ function getAlertTitleUtilityClass(slot) {
   return generateUtilityClass("MuiAlertTitle", slot);
 }
 const alertTitleClasses = generateUtilityClasses("MuiAlertTitle", ["root"]);
-const useUtilityClasses$1J = (ownerState) => {
+const useUtilityClasses$1K = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -13922,7 +13922,7 @@ const AlertTitle = /* @__PURE__ */ React.forwardRef(function AlertTitle2(inProps
     ...other
   } = props;
   const ownerState = props;
-  const classes = useUtilityClasses$1J(ownerState);
+  const classes = useUtilityClasses$1K(ownerState);
   return /* @__PURE__ */ jsx(AlertTitleRoot, {
     gutterBottom: true,
     component: "div",
@@ -13958,7 +13958,7 @@ function getAppBarUtilityClass(slot) {
   return generateUtilityClass("MuiAppBar", slot);
 }
 const appBarClasses = generateUtilityClasses("MuiAppBar", ["root", "positionFixed", "positionAbsolute", "positionSticky", "positionStatic", "positionRelative", "colorDefault", "colorPrimary", "colorSecondary", "colorInherit", "colorTransparent", "colorError", "colorInfo", "colorSuccess", "colorWarning"]);
-const useUtilityClasses$1I = (ownerState) => {
+const useUtilityClasses$1J = (ownerState) => {
   const {
     color: color2,
     position: position2,
@@ -14115,7 +14115,7 @@ const AppBar = /* @__PURE__ */ React.forwardRef(function AppBar2(inProps, ref) {
     position: position2,
     enableColorOnDark
   };
-  const classes = useUtilityClasses$1I(ownerState);
+  const classes = useUtilityClasses$1J(ownerState);
   return /* @__PURE__ */ jsx(AppBarRoot, {
     square: true,
     component: "header",
@@ -16607,7 +16607,7 @@ function isHTMLElement(element) {
 function isVirtualElement(element) {
   return !isHTMLElement(element);
 }
-const useUtilityClasses$1H = (ownerState) => {
+const useUtilityClasses$1I = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -16716,7 +16716,7 @@ const PopperTooltip = /* @__PURE__ */ React.forwardRef(function PopperTooltip2(p
   if (TransitionProps !== null) {
     childProps.TransitionProps = TransitionProps;
   }
-  const classes = useUtilityClasses$1H(props);
+  const classes = useUtilityClasses$1I(props);
   const Root2 = slots.root ?? "div";
   const rootProps = useSlotProps({
     elementType: Root2,
@@ -17115,7 +17115,7 @@ function getListSubheaderUtilityClass(slot) {
   return generateUtilityClass("MuiListSubheader", slot);
 }
 const listSubheaderClasses = generateUtilityClasses("MuiListSubheader", ["root", "colorPrimary", "colorInherit", "gutters", "inset", "sticky"]);
-const useUtilityClasses$1G = (ownerState) => {
+const useUtilityClasses$1H = (ownerState) => {
   const {
     classes,
     color: color2,
@@ -17210,7 +17210,7 @@ const ListSubheader = /* @__PURE__ */ React.forwardRef(function ListSubheader2(i
     disableSticky,
     inset
   };
-  const classes = useUtilityClasses$1G(ownerState);
+  const classes = useUtilityClasses$1H(ownerState);
   return /* @__PURE__ */ jsx(ListSubheaderRoot, {
     as: component,
     className: clsx(classes.root, className),
@@ -17305,7 +17305,7 @@ const rotateAnimation = typeof circularRotateKeyframe !== "string" ? css`
 const dashAnimation = typeof circularDashKeyframe !== "string" ? css`
         animation: ${circularDashKeyframe} 1.4s ease-in-out infinite;
       ` : null;
-const useUtilityClasses$1F = (ownerState) => {
+const useUtilityClasses$1G = (ownerState) => {
   const {
     classes,
     variant,
@@ -17439,7 +17439,7 @@ const CircularProgress = /* @__PURE__ */ React.forwardRef(function CircularProgr
     variant,
     enableTrackSlot
   };
-  const classes = useUtilityClasses$1F(ownerState);
+  const classes = useUtilityClasses$1G(ownerState);
   const circleStyle = {};
   const rootStyle = {};
   const rootProps = {};
@@ -17563,7 +17563,7 @@ function getIconButtonUtilityClass(slot) {
   return generateUtilityClass("MuiIconButton", slot);
 }
 const iconButtonClasses = generateUtilityClasses("MuiIconButton", ["root", "disabled", "colorInherit", "colorPrimary", "colorSecondary", "colorError", "colorInfo", "colorSuccess", "colorWarning", "edgeStart", "edgeEnd", "sizeSmall", "sizeMedium", "sizeLarge", "loading", "loadingIndicator", "loadingWrapper"]);
-const useUtilityClasses$1E = (ownerState) => {
+const useUtilityClasses$1F = (ownerState) => {
   const {
     classes,
     disabled,
@@ -17748,7 +17748,7 @@ const IconButton = /* @__PURE__ */ React.forwardRef(function IconButton2(inProps
     loadingIndicator,
     size
   };
-  const classes = useUtilityClasses$1E(ownerState);
+  const classes = useUtilityClasses$1F(ownerState);
   return /* @__PURE__ */ jsxs(IconButtonRoot, {
     id: loading ? loadingId : idProp,
     className: clsx(classes.root, className),
@@ -17863,7 +17863,7 @@ function getChipUtilityClass(slot) {
   return generateUtilityClass("MuiChip", slot);
 }
 const chipClasses = generateUtilityClasses("MuiChip", ["root", "sizeSmall", "sizeMedium", "colorDefault", "colorError", "colorInfo", "colorPrimary", "colorSecondary", "colorSuccess", "colorWarning", "disabled", "clickable", "clickableColorPrimary", "clickableColorSecondary", "deletable", "deletableColorPrimary", "deletableColorSecondary", "outlined", "filled", "outlinedPrimary", "outlinedSecondary", "filledPrimary", "filledSecondary", "avatar", "avatarSmall", "avatarMedium", "avatarColorPrimary", "avatarColorSecondary", "icon", "iconSmall", "iconMedium", "iconColorPrimary", "iconColorSecondary", "label", "labelSmall", "labelMedium", "deleteIcon", "deleteIconSmall", "deleteIconMedium", "deleteIconColorPrimary", "deleteIconColorSecondary", "deleteIconOutlinedColorPrimary", "deleteIconOutlinedColorSecondary", "deleteIconFilledColorPrimary", "deleteIconFilledColorSecondary", "focusVisible"]);
-const useUtilityClasses$1D = (ownerState) => {
+const useUtilityClasses$1E = (ownerState) => {
   const {
     classes,
     disabled,
@@ -18257,7 +18257,7 @@ const Chip = /* @__PURE__ */ React.forwardRef(function Chip2(inProps, ref) {
     clickable,
     variant
   };
-  const classes = useUtilityClasses$1D(ownerState);
+  const classes = useUtilityClasses$1E(ownerState);
   const moreProps = component === ButtonBase ? {
     component: ComponentProp || "div",
     focusVisibleClassName: classes.focusVisible,
@@ -18725,7 +18725,7 @@ const inputOverridesResolver = (props, styles2) => {
   } = props;
   return [styles2.input, ownerState.size === "small" && styles2.inputSizeSmall, ownerState.multiline && styles2.inputMultiline, ownerState.type === "search" && styles2.inputTypeSearch, ownerState.startAdornment && styles2.inputAdornedStart, ownerState.endAdornment && styles2.inputAdornedEnd, ownerState.hiddenLabel && styles2.inputHiddenLabel];
 };
-const useUtilityClasses$1C = (ownerState) => {
+const useUtilityClasses$1D = (ownerState) => {
   const {
     classes,
     color: color2,
@@ -19129,7 +19129,7 @@ const InputBase = /* @__PURE__ */ React.forwardRef(function InputBase2(inProps,
     startAdornment,
     type
   };
-  const classes = useUtilityClasses$1C(ownerState);
+  const classes = useUtilityClasses$1D(ownerState);
   const Root2 = slots.root || components.Root || InputBaseRoot;
   const rootProps = slotProps.root || componentsProps.root || {};
   const Input3 = slots.input || components.Input || InputBaseInput;
@@ -19453,7 +19453,7 @@ function getAutocompleteUtilityClass(slot) {
 }
 const autocompleteClasses = generateUtilityClasses("MuiAutocomplete", ["root", "expanded", "fullWidth", "focused", "focusVisible", "tag", "tagSizeSmall", "tagSizeMedium", "hasPopupIcon", "hasClearIcon", "inputRoot", "input", "inputFocused", "endAdornment", "clearIndicator", "popupIndicator", "popupIndicatorOpen", "popper", "popperDisablePortal", "paper", "listbox", "loading", "noOptions", "option", "groupLabel", "groupUl"]);
 var _ClearIcon, _ArrowDropDownIcon;
-const useUtilityClasses$1B = (ownerState) => {
+const useUtilityClasses$1C = (ownerState) => {
   const {
     classes,
     disablePortal,
@@ -19942,7 +19942,7 @@ const Autocomplete = /* @__PURE__ */ React.forwardRef(function Autocomplete2(inP
     popupOpen,
     size
   };
-  const classes = useUtilityClasses$1B(ownerState);
+  const classes = useUtilityClasses$1C(ownerState);
   const externalForwardedProps = {
     slots: {
       paper: PaperComponentProp,
@@ -20625,7 +20625,7 @@ function getAvatarUtilityClass(slot) {
   return generateUtilityClass("MuiAvatar", slot);
 }
 const avatarClasses = generateUtilityClasses("MuiAvatar", ["root", "colorDefault", "circular", "rounded", "square", "img", "fallback"]);
-const useUtilityClasses$1A = (ownerState) => {
+const useUtilityClasses$1B = (ownerState) => {
   const {
     classes,
     variant,
@@ -20788,7 +20788,7 @@ const Avatar = /* @__PURE__ */ React.forwardRef(function Avatar2(inProps, ref) {
   const hasImgNotFailing = hasImg && loaded !== "error";
   ownerState.colorDefault = !hasImgNotFailing;
   delete ownerState.ownerState;
-  const classes = useUtilityClasses$1A(ownerState);
+  const classes = useUtilityClasses$1B(ownerState);
   const [RootSlot, rootSlotProps] = useSlot("root", {
     ref,
     className: clsx(classes.root, className),
@@ -21144,7 +21144,7 @@ function getBackdropUtilityClass(slot) {
   return generateUtilityClass("MuiBackdrop", slot);
 }
 const backdropClasses = generateUtilityClasses("MuiBackdrop", ["root", "invisible"]);
-const useUtilityClasses$1z = (ownerState) => {
+const useUtilityClasses$1A = (ownerState) => {
   const {
     classes,
     invisible
@@ -21207,7 +21207,7 @@ const Backdrop = /* @__PURE__ */ React.forwardRef(function Backdrop2(inProps, re
     component,
     invisible
   };
-  const classes = useUtilityClasses$1z(ownerState);
+  const classes = useUtilityClasses$1A(ownerState);
   const backwardCompatibleSlots = {
     transition: TransitionComponentProp,
     root: components.Root,
@@ -21397,7 +21397,7 @@ const badgeClasses = generateUtilityClasses("MuiBadge", [
 ]);
 const RADIUS_STANDARD = 10;
 const RADIUS_DOT = 4;
-const useUtilityClasses$1y = (ownerState) => {
+const useUtilityClasses$1z = (ownerState) => {
   const {
     color: color2,
     anchorOrigin,
@@ -21659,7 +21659,7 @@ const Badge = /* @__PURE__ */ React.forwardRef(function Badge2(inProps, ref) {
     overlap,
     variant
   };
-  const classes = useUtilityClasses$1y(ownerState);
+  const classes = useUtilityClasses$1z(ownerState);
   const externalForwardedProps = {
     slots: {
       root: (slots == null ? void 0 : slots.root) ?? components.Root,
@@ -21921,7 +21921,7 @@ function getBreadcrumbsUtilityClass(slot) {
   return generateUtilityClass("MuiBreadcrumbs", slot);
 }
 const breadcrumbsClasses = generateUtilityClasses("MuiBreadcrumbs", ["root", "ol", "li", "separator"]);
-const useUtilityClasses$1x = (ownerState) => {
+const useUtilityClasses$1y = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -22006,7 +22006,7 @@ const Breadcrumbs = /* @__PURE__ */ React.forwardRef(function Breadcrumbs2(inPro
     maxItems,
     separator
   };
-  const classes = useUtilityClasses$1x(ownerState);
+  const classes = useUtilityClasses$1y(ownerState);
   const collapsedIconSlotProps = useSlotProps({
     elementType: slots.CollapsedIcon,
     externalSlotProps: slotProps.collapsedIcon,
@@ -22135,6 +22135,393 @@ process.env.NODE_ENV !== "production" ? Breadcrumbs.propTypes = {
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
+function getValidReactChildren(children) {
+  return React.Children.toArray(children).filter((child) => /* @__PURE__ */ React.isValidElement(child));
+}
+function getButtonGroupUtilityClass(slot) {
+  return generateUtilityClass("MuiButtonGroup", slot);
+}
+const buttonGroupClasses = generateUtilityClasses("MuiButtonGroup", ["root", "contained", "outlined", "text", "disableElevation", "disabled", "firstButton", "fullWidth", "horizontal", "vertical", "colorPrimary", "colorSecondary", "grouped", "groupedHorizontal", "groupedVertical", "groupedText", "groupedTextHorizontal", "groupedTextVertical", "groupedTextPrimary", "groupedTextSecondary", "groupedOutlined", "groupedOutlinedHorizontal", "groupedOutlinedVertical", "groupedOutlinedPrimary", "groupedOutlinedSecondary", "groupedContained", "groupedContainedHorizontal", "groupedContainedVertical", "groupedContainedPrimary", "groupedContainedSecondary", "lastButton", "middleButton"]);
+const ButtonGroupContext = /* @__PURE__ */ React.createContext({});
+if (process.env.NODE_ENV !== "production") {
+  ButtonGroupContext.displayName = "ButtonGroupContext";
+}
+const ButtonGroupButtonContext = /* @__PURE__ */ React.createContext(void 0);
+if (process.env.NODE_ENV !== "production") {
+  ButtonGroupButtonContext.displayName = "ButtonGroupButtonContext";
+}
+const overridesResolver$7 = (props, styles2) => {
+  const {
+    ownerState
+  } = props;
+  return [{
+    [`& .${buttonGroupClasses.grouped}`]: styles2.grouped
+  }, {
+    [`& .${buttonGroupClasses.grouped}`]: styles2[`grouped${capitalize(ownerState.orientation)}`]
+  }, {
+    [`& .${buttonGroupClasses.grouped}`]: styles2[`grouped${capitalize(ownerState.variant)}`]
+  }, {
+    [`& .${buttonGroupClasses.grouped}`]: styles2[`grouped${capitalize(ownerState.variant)}${capitalize(ownerState.orientation)}`]
+  }, {
+    [`& .${buttonGroupClasses.grouped}`]: styles2[`grouped${capitalize(ownerState.variant)}${capitalize(ownerState.color)}`]
+  }, {
+    [`& .${buttonGroupClasses.firstButton}`]: styles2.firstButton
+  }, {
+    [`& .${buttonGroupClasses.lastButton}`]: styles2.lastButton
+  }, {
+    [`& .${buttonGroupClasses.middleButton}`]: styles2.middleButton
+  }, styles2.root, styles2[ownerState.variant], ownerState.disableElevation === true && styles2.disableElevation, ownerState.fullWidth && styles2.fullWidth, ownerState.orientation === "vertical" && styles2.vertical];
+};
+const useUtilityClasses$1x = (ownerState) => {
+  const {
+    classes,
+    color: color2,
+    disabled,
+    disableElevation,
+    fullWidth,
+    orientation,
+    variant
+  } = ownerState;
+  const slots = {
+    root: ["root", variant, orientation, fullWidth && "fullWidth", disableElevation && "disableElevation", `color${capitalize(color2)}`],
+    grouped: ["grouped", `grouped${capitalize(orientation)}`, `grouped${capitalize(variant)}`, `grouped${capitalize(variant)}${capitalize(orientation)}`, `grouped${capitalize(variant)}${capitalize(color2)}`, disabled && "disabled"],
+    firstButton: ["firstButton"],
+    lastButton: ["lastButton"],
+    middleButton: ["middleButton"]
+  };
+  return composeClasses$1(slots, getButtonGroupUtilityClass, classes);
+};
+const ButtonGroupRoot = styled("div", {
+  name: "MuiButtonGroup",
+  slot: "Root",
+  overridesResolver: overridesResolver$7
+})(memoTheme(({
+  theme
+}) => ({
+  display: "inline-flex",
+  borderRadius: (theme.vars || theme).shape.borderRadius,
+  variants: [{
+    props: {
+      variant: "contained"
+    },
+    style: {
+      boxShadow: (theme.vars || theme).shadows[2]
+    }
+  }, {
+    props: {
+      disableElevation: true
+    },
+    style: {
+      boxShadow: "none"
+    }
+  }, {
+    props: {
+      fullWidth: true
+    },
+    style: {
+      width: "100%"
+    }
+  }, {
+    props: {
+      orientation: "vertical"
+    },
+    style: {
+      flexDirection: "column",
+      [`& .${buttonGroupClasses.lastButton},& .${buttonGroupClasses.middleButton}`]: {
+        borderTopRightRadius: 0,
+        borderTopLeftRadius: 0
+      },
+      [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+        borderBottomRightRadius: 0,
+        borderBottomLeftRadius: 0
+      }
+    }
+  }, {
+    props: {
+      orientation: "horizontal"
+    },
+    style: {
+      [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0
+      },
+      [`& .${buttonGroupClasses.lastButton},& .${buttonGroupClasses.middleButton}`]: {
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: 0
+      }
+    }
+  }, {
+    props: {
+      variant: "text",
+      orientation: "horizontal"
+    },
+    style: {
+      [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+        borderRight: theme.vars ? `1px solid ${theme.alpha(theme.vars.palette.common.onBackground, 0.23)}` : `1px solid ${theme.palette.mode === "light" ? "rgba(0, 0, 0, 0.23)" : "rgba(255, 255, 255, 0.23)"}`,
+        [`&.${buttonGroupClasses.disabled}`]: {
+          borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`
+        }
+      }
+    }
+  }, {
+    props: {
+      variant: "text",
+      orientation: "vertical"
+    },
+    style: {
+      [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+        borderBottom: theme.vars ? `1px solid ${theme.alpha(theme.vars.palette.common.onBackground, 0.23)}` : `1px solid ${theme.palette.mode === "light" ? "rgba(0, 0, 0, 0.23)" : "rgba(255, 255, 255, 0.23)"}`,
+        [`&.${buttonGroupClasses.disabled}`]: {
+          borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`
+        }
+      }
+    }
+  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).flatMap(([color2]) => [{
+    props: {
+      variant: "text",
+      color: color2
+    },
+    style: {
+      [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+        borderColor: theme.alpha((theme.vars || theme).palette[color2].main, 0.5)
+      }
+    }
+  }]), {
+    props: {
+      variant: "outlined",
+      orientation: "horizontal"
+    },
+    style: {
+      [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+        borderRightColor: "transparent",
+        "&:hover": {
+          borderRightColor: "currentColor"
+        }
+      },
+      [`& .${buttonGroupClasses.lastButton},& .${buttonGroupClasses.middleButton}`]: {
+        marginLeft: -1
+      }
+    }
+  }, {
+    props: {
+      variant: "outlined",
+      orientation: "vertical"
+    },
+    style: {
+      [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+        borderBottomColor: "transparent",
+        "&:hover": {
+          borderBottomColor: "currentColor"
+        }
+      },
+      [`& .${buttonGroupClasses.lastButton},& .${buttonGroupClasses.middleButton}`]: {
+        marginTop: -1
+      }
+    }
+  }, {
+    props: {
+      variant: "contained",
+      orientation: "horizontal"
+    },
+    style: {
+      [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+        borderRight: `1px solid ${(theme.vars || theme).palette.grey[400]}`,
+        [`&.${buttonGroupClasses.disabled}`]: {
+          borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`
+        }
+      }
+    }
+  }, {
+    props: {
+      variant: "contained",
+      orientation: "vertical"
+    },
+    style: {
+      [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+        borderBottom: `1px solid ${(theme.vars || theme).palette.grey[400]}`,
+        [`&.${buttonGroupClasses.disabled}`]: {
+          borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`
+        }
+      }
+    }
+  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter(["dark"])).map(([color2]) => ({
+    props: {
+      variant: "contained",
+      color: color2
+    },
+    style: {
+      [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+        borderColor: (theme.vars || theme).palette[color2].dark
+      }
+    }
+  }))],
+  [`& .${buttonGroupClasses.grouped}`]: {
+    minWidth: 40,
+    boxShadow: "none",
+    props: {
+      variant: "contained"
+    },
+    style: {
+      "&:hover": {
+        boxShadow: "none"
+      }
+    }
+  }
+})));
+const ButtonGroup = /* @__PURE__ */ React.forwardRef(function ButtonGroup2(inProps, ref) {
+  const props = useDefaultProps({
+    props: inProps,
+    name: "MuiButtonGroup"
+  });
+  const {
+    children,
+    className,
+    color: color2 = "primary",
+    component = "div",
+    disabled = false,
+    disableElevation = false,
+    disableFocusRipple = false,
+    disableRipple = false,
+    fullWidth = false,
+    orientation = "horizontal",
+    size = "medium",
+    variant = "outlined",
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
+    color: color2,
+    component,
+    disabled,
+    disableElevation,
+    disableFocusRipple,
+    disableRipple,
+    fullWidth,
+    orientation,
+    size,
+    variant
+  };
+  const classes = useUtilityClasses$1x(ownerState);
+  const context = React.useMemo(() => ({
+    className: classes.grouped,
+    color: color2,
+    disabled,
+    disableElevation,
+    disableFocusRipple,
+    disableRipple,
+    fullWidth,
+    size,
+    variant
+  }), [color2, disabled, disableElevation, disableFocusRipple, disableRipple, fullWidth, size, variant, classes.grouped]);
+  const validChildren = getValidReactChildren(children);
+  const childrenCount = validChildren.length;
+  const getButtonPositionClassName = (index) => {
+    const isFirstButton = index === 0;
+    const isLastButton = index === childrenCount - 1;
+    if (isFirstButton && isLastButton) {
+      return "";
+    }
+    if (isFirstButton) {
+      return classes.firstButton;
+    }
+    if (isLastButton) {
+      return classes.lastButton;
+    }
+    return classes.middleButton;
+  };
+  return /* @__PURE__ */ jsx(ButtonGroupRoot, {
+    as: component,
+    role: "group",
+    className: clsx(classes.root, className),
+    ref,
+    ownerState,
+    ...other,
+    children: /* @__PURE__ */ jsx(ButtonGroupContext.Provider, {
+      value: context,
+      children: validChildren.map((child, index) => {
+        return /* @__PURE__ */ jsx(ButtonGroupButtonContext.Provider, {
+          value: getButtonPositionClassName(index),
+          children: child
+        }, index);
+      })
+    })
+  });
+});
+process.env.NODE_ENV !== "production" ? ButtonGroup.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * @default 'primary'
+   */
+  color: PropTypes.oneOfType([PropTypes.oneOf(["inherit", "primary", "secondary", "error", "info", "success", "warning"]), PropTypes.string]),
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, no elevation is used.
+   * @default false
+   */
+  disableElevation: PropTypes.bool,
+  /**
+   * If `true`, the button keyboard focus ripple is disabled.
+   * @default false
+   */
+  disableFocusRipple: PropTypes.bool,
+  /**
+   * If `true`, the button ripple effect is disabled.
+   * @default false
+   */
+  disableRipple: PropTypes.bool,
+  /**
+   * If `true`, the buttons will take up the full width of its container.
+   * @default false
+   */
+  fullWidth: PropTypes.bool,
+  /**
+   * The component orientation (layout flow direction).
+   * @default 'horizontal'
+   */
+  orientation: PropTypes.oneOf(["horizontal", "vertical"]),
+  /**
+   * The size of the component.
+   * `small` is equivalent to the dense button styling.
+   * @default 'medium'
+   */
+  size: PropTypes.oneOfType([PropTypes.oneOf(["small", "medium", "large"]), PropTypes.string]),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * The variant to use.
+   * @default 'outlined'
+   */
+  variant: PropTypes.oneOfType([PropTypes.oneOf(["contained", "outlined", "text"]), PropTypes.string])
+} : void 0;
 function getCardUtilityClass(slot) {
   return generateUtilityClass("MuiCard", slot);
 }
@@ -40382,9 +40769,6 @@ process.env.NODE_ENV !== "production" ? ToggleButton.propTypes = {
    */
   value: PropTypes.any.isRequired
 } : void 0;
-function getValidReactChildren(children) {
-  return React.Children.toArray(children).filter((child) => /* @__PURE__ */ React.isValidElement(child));
-}
 function getToggleButtonGroupUtilityClass(slot) {
   return generateUtilityClass("MuiToggleButtonGroup", slot);
 }
@@ -41689,14 +42073,6 @@ function getButtonUtilityClass(slot) {
   return generateUtilityClass("MuiButton", slot);
 }
 const buttonClasses = generateUtilityClasses("MuiButton", ["root", "text", "textInherit", "textPrimary", "textSecondary", "textSuccess", "textError", "textInfo", "textWarning", "outlined", "outlinedInherit", "outlinedPrimary", "outlinedSecondary", "outlinedSuccess", "outlinedError", "outlinedInfo", "outlinedWarning", "contained", "containedInherit", "containedPrimary", "containedSecondary", "containedSuccess", "containedError", "containedInfo", "containedWarning", "disableElevation", "focusVisible", "disabled", "colorInherit", "colorPrimary", "colorSecondary", "colorSuccess", "colorError", "colorInfo", "colorWarning", "textSizeSmall", "textSizeMedium", "textSizeLarge", "outlinedSizeSmall", "outlinedSizeMedium", "outlinedSizeLarge", "containedSizeSmall", "containedSizeMedium", "containedSizeLarge", "sizeMedium", "sizeSmall", "sizeLarge", "fullWidth", "startIcon", "endIcon", "icon", "iconSizeSmall", "iconSizeMedium", "iconSizeLarge", "loading", "loadingWrapper", "loadingIconPlaceholder", "loadingIndicator", "loadingPositionCenter", "loadingPositionStart", "loadingPositionEnd"]);
-const ButtonGroupContext = /* @__PURE__ */ React.createContext({});
-if (process.env.NODE_ENV !== "production") {
-  ButtonGroupContext.displayName = "ButtonGroupContext";
-}
-const ButtonGroupButtonContext = /* @__PURE__ */ React.createContext(void 0);
-if (process.env.NODE_ENV !== "production") {
-  ButtonGroupButtonContext.displayName = "ButtonGroupButtonContext";
-}
 const useUtilityClasses$r = (ownerState) => {
   const {
     color: color2,
@@ -42914,69 +43290,6 @@ const Alert2 = ({
     }
   );
 };
-const StyledToggleButtonGroup = styled$3(ToggleButtonGroup$1, {
-  shouldForwardProp: (prop) => prop !== "colorvariant"
-})(({ theme, colorvariant }) => ({
-  borderColor: colorvariant === "primary" ? theme.palette.primary.light : theme.palette.secondary.light
-}));
-const StyledToggleButton = styled$3(ToggleButton$1, {
-  shouldForwardProp: (prop) => prop !== "colorvariant"
-})(({ theme, colorvariant }) => {
-  const mainColor = colorvariant === "primary" ? theme.palette.primary.main : theme.palette.secondary.main;
-  const lighterColor = colorvariant === "primary" ? theme.palette.primary.light : theme.palette.secondary.light;
-  return {
-    color: theme.palette.text.secondary,
-    "&.Mui-selected": {
-      backgroundColor: mainColor,
-      color: theme.palette.common.white
-    },
-    "&:hover": {
-      backgroundColor: lighterColor,
-      color: theme.palette.text.secondary
-    },
-    "&.Mui-selected:hover": {
-      backgroundColor: mainColor,
-      color: theme.palette.common.white
-    }
-  };
-});
-const ButtonGroup = ({
-  viewMode,
-  buttonList,
-  onChange,
-  colorVariant = "primary",
-  size = "small",
-  orientation = "horizontal"
-}) => {
-  return /* @__PURE__ */ jsx(
-    StyledToggleButtonGroup,
-    {
-      value: viewMode,
-      exclusive: true,
-      onChange: (event, value) => {
-        if (value !== null) {
-          onChange(value);
-        }
-      },
-      size,
-      orientation,
-      colorvariant: colorVariant,
-      children: buttonList.map((button) => /* @__PURE__ */ jsxs(
-        StyledToggleButton,
-        {
-          value: button.value,
-          colorvariant: colorVariant,
-          disabled: button.disabled,
-          children: [
-            button.icon,
-            button.text && /* @__PURE__ */ jsx("span", { style: { marginLeft: 8 }, children: button.text })
-          ]
-        },
-        button.value
-      ))
-    }
-  );
-};
 const CheckRoundedIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
   d: "M9 16.17 5.53 12.7a.996.996 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71c.39-.39.39-1.02 0-1.41a.996.996 0 0 0-1.41 0z"
 }), "CheckRounded");
@@ -63316,6 +63629,8 @@ export {
   Breadcrumbs,
   Button2 as Button,
   ButtonGroup,
+  ButtonGroupButtonContext,
+  ButtonGroupContext,
   Card,
   CardActionArea,
   CardActions,
@@ -63445,6 +63760,7 @@ export {
   boxClasses,
   breadcrumbsClasses,
   brown,
+  buttonGroupClasses,
   cardActionAreaClasses,
   cardActionsClasses,
   cardClasses,
@@ -63496,6 +63812,7 @@ export {
   getBackdropUtilityClass,
   getBadgeUtilityClass,
   getBreadcrumbsUtilityClass,
+  getButtonGroupUtilityClass,
   getCardActionAreaUtilityClass,
   getCardActionsUtilityClass,
   getCardContentUtilityClass,