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

package/dist/index.cjs.js

@@ -5988,7 +5988,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);
   };
@@ -6078,7 +6078,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__ */ jsxRuntime.jsx(ContainerRoot, {
@@ -8264,7 +8264,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,
@@ -8409,7 +8409,7 @@ const SvgIcon = /* @__PURE__ */ React__namespace.forwardRef(function SvgIcon2(in
   if (!inheritViewBox) {
     more.viewBox = viewBox;
   }
-  const classes = useUtilityClasses$1V(ownerState);
+  const classes = useUtilityClasses$1W(ownerState);
   return /* @__PURE__ */ jsxRuntime.jsxs(SvgIconRoot, {
     as: component,
     className: clsx(classes.root, className),
@@ -10269,7 +10269,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,
@@ -10485,7 +10485,7 @@ const ButtonBase = /* @__PURE__ */ React__namespace.forwardRef(function ButtonBa
     tabIndex,
     focusVisible
   };
-  const classes = useUtilityClasses$1U(ownerState);
+  const classes = useUtilityClasses$1V(ownerState);
   return /* @__PURE__ */ jsxRuntime.jsxs(ButtonBaseRoot, {
     as: ComponentProp,
     className: clsx(classes.root, className),
@@ -10688,7 +10688,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,
@@ -10747,7 +10747,7 @@ const TabScrollButton = /* @__PURE__ */ React__namespace.forwardRef(function Tab
     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({
@@ -10934,7 +10934,7 @@ const moveFocus$1 = (list, currentFocus, traversalFunction) => {
     }
   }
 };
-const useUtilityClasses$1S = (ownerState) => {
+const useUtilityClasses$1T = (ownerState) => {
   const {
     vertical,
     fixed,
@@ -11186,7 +11186,7 @@ const Tabs = /* @__PURE__ */ React__namespace.forwardRef(function Tabs2(inProps,
     centered: centered && !scrollable,
     scrollButtonsHideMobile: !allowScrollButtonsMobile
   };
-  const classes = useUtilityClasses$1S(ownerState);
+  const classes = useUtilityClasses$1T(ownerState);
   const startScrollButtonIconProps = useSlotProps({
     elementType: slots.StartScrollButtonIcon,
     externalSlotProps: slotProps.startScrollButtonIcon,
@@ -12232,7 +12232,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
@@ -12265,7 +12265,7 @@ const TabPanel = /* @__PURE__ */ React__namespace.forwardRef(function TabPanel2(
   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");
@@ -12333,7 +12333,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
@@ -12459,7 +12459,7 @@ const Collapse = /* @__PURE__ */ React__namespace.forwardRef(function Collapse2(
     orientation,
     collapsedSize: collapsedSizeProp
   };
-  const classes = useUtilityClasses$1Q(ownerState);
+  const classes = useUtilityClasses$1R(ownerState);
   const theme = useTheme();
   const timer = useTimeout$1();
   const wrapperRef = React__namespace.useRef(null);
@@ -12759,7 +12759,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,
@@ -12832,7 +12832,7 @@ const Paper = /* @__PURE__ */ React__namespace.forwardRef(function Paper2(inProp
     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"));
@@ -12922,7 +12922,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,
@@ -13081,7 +13081,7 @@ const Accordion = /* @__PURE__ */ React__namespace.forwardRef(function Accordion
     disableGutters,
     expanded
   };
-  const classes = useUtilityClasses$1O(ownerState);
+  const classes = useUtilityClasses$1P(ownerState);
   const backwardCompatibleSlots = {
     transition: TransitionComponentProp,
     ...slots
@@ -13248,7 +13248,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
@@ -13295,7 +13295,7 @@ const AccordionActions = /* @__PURE__ */ React__namespace.forwardRef(function Ac
     ...props,
     disableSpacing
   };
-  const classes = useUtilityClasses$1N(ownerState);
+  const classes = useUtilityClasses$1O(ownerState);
   return /* @__PURE__ */ jsxRuntime.jsx(AccordionActionsRoot, {
     className: clsx(classes.root, className),
     ref,
@@ -13334,7 +13334,7 @@ function getAccordionDetailsUtilityClass(slot) {
   return generateUtilityClass("MuiAccordionDetails", slot);
 }
 const accordionDetailsClasses = generateUtilityClasses("MuiAccordionDetails", ["root"]);
-const useUtilityClasses$1M = (ownerState) => {
+const useUtilityClasses$1N = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -13361,7 +13361,7 @@ const AccordionDetails = /* @__PURE__ */ React__namespace.forwardRef(function Ac
     ...other
   } = props;
   const ownerState = props;
-  const classes = useUtilityClasses$1M(ownerState);
+  const classes = useUtilityClasses$1N(ownerState);
   return /* @__PURE__ */ jsxRuntime.jsx(AccordionDetailsRoot, {
     className: clsx(classes.root, className),
     ref,
@@ -13395,7 +13395,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,
@@ -13517,7 +13517,7 @@ const AccordionSummary = /* @__PURE__ */ React__namespace.forwardRef(function Ac
     disabled,
     disableGutters
   };
-  const classes = useUtilityClasses$1L(ownerState);
+  const classes = useUtilityClasses$1M(ownerState);
   const externalForwardedProps = {
     slots,
     slotProps
@@ -13661,7 +13661,7 @@ const v6Colors$1 = {
   textDisabled: true
 };
 const extendSxProp = internal_createExtendSxProp();
-const useUtilityClasses$1K = (ownerState) => {
+const useUtilityClasses$1L = (ownerState) => {
   const {
     align,
     gutterBottom,
@@ -13804,7 +13804,7 @@ const Typography = /* @__PURE__ */ React__namespace.forwardRef(function Typograp
     variantMapping
   };
   const Component = component || (paragraph ? "p" : variantMapping[variant] || defaultVariantMapping[variant]) || "span";
-  const classes = useUtilityClasses$1K(ownerState);
+  const classes = useUtilityClasses$1L(ownerState);
   return /* @__PURE__ */ jsxRuntime.jsx(TypographyRoot, {
     as: Component,
     ref,
@@ -13909,7 +13909,7 @@ function getAlertTitleUtilityClass(slot) {
   return generateUtilityClass("MuiAlertTitle", slot);
 }
 const alertTitleClasses = generateUtilityClasses("MuiAlertTitle", ["root"]);
-const useUtilityClasses$1J = (ownerState) => {
+const useUtilityClasses$1K = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -13939,7 +13939,7 @@ const AlertTitle = /* @__PURE__ */ React__namespace.forwardRef(function AlertTit
     ...other
   } = props;
   const ownerState = props;
-  const classes = useUtilityClasses$1J(ownerState);
+  const classes = useUtilityClasses$1K(ownerState);
   return /* @__PURE__ */ jsxRuntime.jsx(AlertTitleRoot, {
     gutterBottom: true,
     component: "div",
@@ -13975,7 +13975,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,
@@ -14132,7 +14132,7 @@ const AppBar = /* @__PURE__ */ React__namespace.forwardRef(function AppBar2(inPr
     position: position2,
     enableColorOnDark
   };
-  const classes = useUtilityClasses$1I(ownerState);
+  const classes = useUtilityClasses$1J(ownerState);
   return /* @__PURE__ */ jsxRuntime.jsx(AppBarRoot, {
     square: true,
     component: "header",
@@ -16624,7 +16624,7 @@ function isHTMLElement(element) {
 function isVirtualElement(element) {
   return !isHTMLElement(element);
 }
-const useUtilityClasses$1H = (ownerState) => {
+const useUtilityClasses$1I = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -16733,7 +16733,7 @@ const PopperTooltip = /* @__PURE__ */ React__namespace.forwardRef(function Poppe
   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,
@@ -17132,7 +17132,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,
@@ -17227,7 +17227,7 @@ const ListSubheader = /* @__PURE__ */ React__namespace.forwardRef(function ListS
     disableSticky,
     inset
   };
-  const classes = useUtilityClasses$1G(ownerState);
+  const classes = useUtilityClasses$1H(ownerState);
   return /* @__PURE__ */ jsxRuntime.jsx(ListSubheaderRoot, {
     as: component,
     className: clsx(classes.root, className),
@@ -17322,7 +17322,7 @@ const rotateAnimation = typeof circularRotateKeyframe !== "string" ? react.css`
 const dashAnimation = typeof circularDashKeyframe !== "string" ? react.css`
         animation: ${circularDashKeyframe} 1.4s ease-in-out infinite;
       ` : null;
-const useUtilityClasses$1F = (ownerState) => {
+const useUtilityClasses$1G = (ownerState) => {
   const {
     classes,
     variant,
@@ -17456,7 +17456,7 @@ const CircularProgress = /* @__PURE__ */ React__namespace.forwardRef(function Ci
     variant,
     enableTrackSlot
   };
-  const classes = useUtilityClasses$1F(ownerState);
+  const classes = useUtilityClasses$1G(ownerState);
   const circleStyle = {};
   const rootStyle = {};
   const rootProps = {};
@@ -17580,7 +17580,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,
@@ -17765,7 +17765,7 @@ const IconButton = /* @__PURE__ */ React__namespace.forwardRef(function IconButt
     loadingIndicator,
     size
   };
-  const classes = useUtilityClasses$1E(ownerState);
+  const classes = useUtilityClasses$1F(ownerState);
   return /* @__PURE__ */ jsxRuntime.jsxs(IconButtonRoot, {
     id: loading ? loadingId : idProp,
     className: clsx(classes.root, className),
@@ -17880,7 +17880,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,
@@ -18274,7 +18274,7 @@ const Chip = /* @__PURE__ */ React__namespace.forwardRef(function Chip2(inProps,
     clickable,
     variant
   };
-  const classes = useUtilityClasses$1D(ownerState);
+  const classes = useUtilityClasses$1E(ownerState);
   const moreProps = component === ButtonBase ? {
     component: ComponentProp || "div",
     focusVisibleClassName: classes.focusVisible,
@@ -18742,7 +18742,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,
@@ -19146,7 +19146,7 @@ const InputBase = /* @__PURE__ */ React__namespace.forwardRef(function InputBase
     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;
@@ -19470,7 +19470,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,
@@ -19959,7 +19959,7 @@ const Autocomplete = /* @__PURE__ */ React__namespace.forwardRef(function Autoco
     popupOpen,
     size
   };
-  const classes = useUtilityClasses$1B(ownerState);
+  const classes = useUtilityClasses$1C(ownerState);
   const externalForwardedProps = {
     slots: {
       paper: PaperComponentProp,
@@ -20642,7 +20642,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,
@@ -20805,7 +20805,7 @@ const Avatar = /* @__PURE__ */ React__namespace.forwardRef(function Avatar2(inPr
   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),
@@ -21161,7 +21161,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
@@ -21224,7 +21224,7 @@ const Backdrop = /* @__PURE__ */ React__namespace.forwardRef(function Backdrop2(
     component,
     invisible
   };
-  const classes = useUtilityClasses$1z(ownerState);
+  const classes = useUtilityClasses$1A(ownerState);
   const backwardCompatibleSlots = {
     transition: TransitionComponentProp,
     root: components.Root,
@@ -21414,7 +21414,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,
@@ -21676,7 +21676,7 @@ const Badge = /* @__PURE__ */ React__namespace.forwardRef(function Badge2(inProp
     overlap,
     variant
   };
-  const classes = useUtilityClasses$1y(ownerState);
+  const classes = useUtilityClasses$1z(ownerState);
   const externalForwardedProps = {
     slots: {
       root: (slots == null ? void 0 : slots.root) ?? components.Root,
@@ -21938,7 +21938,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;
@@ -22023,7 +22023,7 @@ const Breadcrumbs = /* @__PURE__ */ React__namespace.forwardRef(function Breadcr
     maxItems,
     separator
   };
-  const classes = useUtilityClasses$1x(ownerState);
+  const classes = useUtilityClasses$1y(ownerState);
   const collapsedIconSlotProps = useSlotProps({
     elementType: slots.CollapsedIcon,
     externalSlotProps: slotProps.collapsedIcon,
@@ -22152,6 +22152,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__namespace.Children.toArray(children).filter((child) => /* @__PURE__ */ React__namespace.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__namespace.createContext({});
+if (process.env.NODE_ENV !== "production") {
+  ButtonGroupContext.displayName = "ButtonGroupContext";
+}
+const ButtonGroupButtonContext = /* @__PURE__ */ React__namespace.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__namespace.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__namespace.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__ */ jsxRuntime.jsx(ButtonGroupRoot, {
+    as: component,
+    role: "group",
+    className: clsx(classes.root, className),
+    ref,
+    ownerState,
+    ...other,
+    children: /* @__PURE__ */ jsxRuntime.jsx(ButtonGroupContext.Provider, {
+      value: context,
+      children: validChildren.map((child, index) => {
+        return /* @__PURE__ */ jsxRuntime.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);
 }
@@ -40399,9 +40786,6 @@ process.env.NODE_ENV !== "production" ? ToggleButton.propTypes = {
    */
   value: PropTypes.any.isRequired
 } : void 0;
-function getValidReactChildren(children) {
-  return React__namespace.Children.toArray(children).filter((child) => /* @__PURE__ */ React__namespace.isValidElement(child));
-}
 function getToggleButtonGroupUtilityClass(slot) {
   return generateUtilityClass("MuiToggleButtonGroup", slot);
 }
@@ -41706,14 +42090,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__namespace.createContext({});
-if (process.env.NODE_ENV !== "production") {
-  ButtonGroupContext.displayName = "ButtonGroupContext";
-}
-const ButtonGroupButtonContext = /* @__PURE__ */ React__namespace.createContext(void 0);
-if (process.env.NODE_ENV !== "production") {
-  ButtonGroupButtonContext.displayName = "ButtonGroupButtonContext";
-}
 const useUtilityClasses$r = (ownerState) => {
   const {
     color: color2,
@@ -42931,69 +43307,6 @@ const Alert2 = ({
     }
   );
 };
-const StyledToggleButtonGroup = material.styled(material.ToggleButtonGroup, {
-  shouldForwardProp: (prop) => prop !== "colorvariant"
-})(({ theme, colorvariant }) => ({
-  borderColor: colorvariant === "primary" ? theme.palette.primary.light : theme.palette.secondary.light
-}));
-const StyledToggleButton = material.styled(material.ToggleButton, {
-  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__ */ jsxRuntime.jsx(
-    StyledToggleButtonGroup,
-    {
-      value: viewMode,
-      exclusive: true,
-      onChange: (event, value) => {
-        if (value !== null) {
-          onChange(value);
-        }
-      },
-      size,
-      orientation,
-      colorvariant: colorVariant,
-      children: buttonList.map((button) => /* @__PURE__ */ jsxRuntime.jsxs(
-        StyledToggleButton,
-        {
-          value: button.value,
-          colorvariant: colorVariant,
-          disabled: button.disabled,
-          children: [
-            button.icon,
-            button.text && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { marginLeft: 8 }, children: button.text })
-          ]
-        },
-        button.value
-      ))
-    }
-  );
-};
 const CheckRoundedIcon = createSvgIcon(/* @__PURE__ */ jsxRuntime.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");
@@ -43040,7 +43353,7 @@ const StyledSwatchBox = material.styled(material.Box)(
     transition: "transform 0.2s",
     backgroundColor: backgroundColor2,
     boxSizing: "border-box",
-    border: showBorder ? "2px solid black" : "none",
+    border: showBorder ? "1px solid var(--theme-palette-grey-dark)" : "none",
     "&:hover": {
       transform: "scale(1.1)"
     }
@@ -43103,8 +43416,8 @@ const ColorPickerIcon = ({ fill, onClick, showBorder = false }) => /* @__PURE__
             cy: "20.2168",
             r: "10",
             fill: "none",
-            stroke: "black",
-            strokeWidth: "1.5"
+            stroke: "var(--theme-palette-grey-dark)",
+            strokeWidth: "1"
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "29", cy: "28.2168", r: "5", fill: "white" }),
@@ -63340,6 +63653,8 @@ exports.Box = Box;
 exports.Breadcrumbs = Breadcrumbs;
 exports.Button = Button2;
 exports.ButtonGroup = ButtonGroup;
+exports.ButtonGroupButtonContext = ButtonGroupButtonContext;
+exports.ButtonGroupContext = ButtonGroupContext;
 exports.Card = Card;
 exports.CardActionArea = CardActionArea;
 exports.CardActions = CardActions;
@@ -63469,6 +63784,7 @@ exports.blueGrey = blueGrey;
 exports.boxClasses = boxClasses;
 exports.breadcrumbsClasses = breadcrumbsClasses;
 exports.brown = brown;
+exports.buttonGroupClasses = buttonGroupClasses;
 exports.cardActionAreaClasses = cardActionAreaClasses;
 exports.cardActionsClasses = cardActionsClasses;
 exports.cardClasses = cardClasses;
@@ -63519,6 +63835,7 @@ exports.getAvatarUtilityClass = getAvatarUtilityClass;
 exports.getBackdropUtilityClass = getBackdropUtilityClass;
 exports.getBadgeUtilityClass = getBadgeUtilityClass;
 exports.getBreadcrumbsUtilityClass = getBreadcrumbsUtilityClass;
+exports.getButtonGroupUtilityClass = getButtonGroupUtilityClass;
 exports.getCardActionAreaUtilityClass = getCardActionAreaUtilityClass;
 exports.getCardActionsUtilityClass = getCardActionsUtilityClass;
 exports.getCardContentUtilityClass = getCardContentUtilityClass;