awing-library 2.1.2-dev.98 → 2.1.2-dev.99

package/dist/esm/index.js

@@ -3,7 +3,7 @@ import { initReactI18next, useTranslation, Trans, I18nextProvider } from 'react-
 import * as React from 'react';
 import React__default, { useState, useRef, useEffect, Fragment, Children, isValidElement, cloneElement, useMemo, createElement, forwardRef, useLayoutEffect, useCallback, createContext as createContext$1, memo, useReducer, useContext, PureComponent, createRef } from 'react';
 import { MoreVert, KeyboardArrowDown, Done as Done$1, FolderOpen, ArrowDropDown, ArrowDropUp, CheckBoxOutlineBlank, CheckBox, ExpandMore, ExpandLess, KeyboardArrowUp, DragIndicator, PinDrop, LastPage, FirstPage, KeyboardArrowRight, KeyboardArrowLeft, UnfoldMore, North, South, HighlightOff, CalendarTodaySharp, FileCopyOutlined, Close, Save, Check, ArrowRightAlt as ArrowRightAlt$1, CallSplit, ManageAccounts, People, Person, Info, ChevronRight as ChevronRight$1, Clear, AddCircleOutline, Search, MoreHoriz, CreateNewFolderOutlined, Delete, PlaylistAddCheck, FormatListNumbered, Add, MoreHorizOutlined, DisplaySettings, VisibilityOff, Visibility, ManageSearch, Notifications as Notifications$6, Science, Settings, AddBox, Edit as Edit$2, InsertDriveFile, SignalCellularAlt, Logout, ArrowRight, ChevronLeft as ChevronLeft$1 } from '@mui/icons-material';
-import { Tooltip as Tooltip$2, IconButton as IconButton$1, Menu as Menu$2, MenuItem as MenuItem$1, Button as Button$1, TextField as TextField$1, Grid as Grid$1, FormControl as FormControl$1, Select as Select$1, Box as Box$1, alpha as alpha$2, Typography as Typography$1, Paper as Paper$1, List as List$1, ListItem as ListItem$1, ListItemButton, ListItemText, Divider, Popover as Popover$1, Popper as Popper$2, Grow as Grow$1, ClickAwayListener, Autocomplete as Autocomplete$2, InputBase as InputBase$1, Stack, ButtonBase as ButtonBase$1, Collapse as Collapse$1, Chip as Chip$1, CircularProgress as CircularProgress$2, FormControlLabel, Checkbox as Checkbox$1, RadioGroup, Radio, InputLabel as InputLabel$1, ListSubheader as ListSubheader$1, FormLabel as FormLabel$1, TablePagination, TableRow, TableContainer, Table, TableHead, TableCell, TableSortLabel, TableBody, InputAdornment as InputAdornment$1, Drawer as Drawer$1, Dialog as Dialog$3, DialogTitle, DialogContent as DialogContent$1, DialogContentText, DialogActions as DialogActions$1, Tabs, Tab, Snackbar, Alert, Toolbar, Switch, tooltipClasses as tooltipClasses$1, styled as styled$4, Avatar, Skeleton, Badge, Stepper, Step, StepLabel, StepContent, Card, CardHeader, CardContent, NoSsr, ListItemIcon, AppBar, Container as Container$o, Icon, CssBaseline } from '@mui/material';
+import { Tooltip as Tooltip$2, IconButton as IconButton$1, Menu as Menu$2, MenuItem as MenuItem$1, Button as Button$1, TextField as TextField$1, Grid as Grid$1, FormControl as FormControl$1, Select as Select$1, Box as Box$1, alpha as alpha$2, Typography as Typography$1, Paper as Paper$1, List as List$1, ListItem as ListItem$1, ListItemButton, ListItemText, Divider, Popover as Popover$1, Popper as Popper$2, Grow as Grow$1, ClickAwayListener as ClickAwayListener$1, Autocomplete as Autocomplete$2, InputBase as InputBase$1, Stack, ButtonBase as ButtonBase$1, Collapse as Collapse$1, Chip as Chip$1, CircularProgress as CircularProgress$2, FormControlLabel, Checkbox as Checkbox$1, RadioGroup, Radio, InputLabel as InputLabel$1, ListSubheader as ListSubheader$1, FormLabel as FormLabel$1, TablePagination, TableRow, TableContainer, Table, TableHead, TableCell, TableSortLabel, TableBody, InputAdornment as InputAdornment$1, Drawer as Drawer$1, Dialog as Dialog$3, DialogTitle, DialogContent as DialogContent$1, DialogContentText, DialogActions as DialogActions$1, Tabs, Tab, Snackbar, Alert, Toolbar, Switch, tooltipClasses as tooltipClasses$1, styled as styled$4, Avatar, Skeleton, Badge, Stepper, Step, StepLabel, StepContent, Card, CardHeader, CardContent, NoSsr, ListItemIcon, AppBar, Container as Container$o, Icon, CssBaseline } from '@mui/material';
 import styled$3 from '@emotion/styled';
 import { CacheProvider, Global, ThemeContext as ThemeContext$2, keyframes, css } from '@emotion/react';
 import { makeStyles } from '@mui/styles';
@@ -42563,7 +42563,7 @@ function getSvgIconUtilityClass(slot) {
 }
 generateUtilityClasses('MuiSvgIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
 
-const useUtilityClasses$Z = ownerState => {
+const useUtilityClasses$_ = ownerState => {
   const {
     color,
     fontSize,
@@ -42693,7 +42693,7 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
   if (!inheritViewBox) {
     more.viewBox = viewBox;
   }
-  const classes = useUtilityClasses$Z(ownerState);
+  const classes = useUtilityClasses$_(ownerState);
   return /*#__PURE__*/jsxRuntimeExports.jsxs(SvgIconRoot, {
     as: component,
     className: clsx(classes.root, className),
@@ -44457,7 +44457,7 @@ const ButtonDateRangePicker = props => {
           },
           children: jsxRuntimeExports.jsx(Paper$1, {
             elevation: 8,
-            children: jsxRuntimeExports.jsx(ClickAwayListener, {
+            children: jsxRuntimeExports.jsx(ClickAwayListener$1, {
               onClickAway: handleClose,
               children: jsxRuntimeExports.jsxs(Box$1, {
                 style: {
@@ -45158,7 +45158,7 @@ function DirectoryTree(props) {
       anchorEl: anchorEl,
       placement: "bottom-start",
       className: classes.popper,
-      children: jsxRuntimeExports.jsx(ClickAwayListener, {
+      children: jsxRuntimeExports.jsx(ClickAwayListener$1, {
         onClickAway: handleClose,
         children: jsxRuntimeExports.jsxs("div", {
           children: [jsxRuntimeExports.jsx("div", {
@@ -48611,7 +48611,7 @@ function isHTMLElement$1(element) {
 function isVirtualElement(element) {
   return !isHTMLElement$1(element);
 }
-const useUtilityClasses$Y = ownerState => {
+const useUtilityClasses$Z = ownerState => {
   const {
     classes
   } = ownerState;
@@ -48724,7 +48724,7 @@ const PopperTooltip = /*#__PURE__*/React.forwardRef(function PopperTooltip(props
   if (TransitionProps !== null) {
     childProps.TransitionProps = TransitionProps;
   }
-  const classes = useUtilityClasses$Y(props);
+  const classes = useUtilityClasses$Z(props);
   const Root = slots.root ?? 'div';
   const rootProps = useSlotProps({
     elementType: Root,
@@ -49147,7 +49147,7 @@ function getListSubheaderUtilityClass(slot) {
 }
 generateUtilityClasses('MuiListSubheader', ['root', 'colorPrimary', 'colorInherit', 'gutters', 'inset', 'sticky']);
 
-const useUtilityClasses$X = ownerState => {
+const useUtilityClasses$Y = ownerState => {
   const {
     classes,
     color,
@@ -49242,7 +49242,7 @@ const ListSubheader = /*#__PURE__*/React.forwardRef(function ListSubheader(inPro
     disableSticky,
     inset
   };
-  const classes = useUtilityClasses$X(ownerState);
+  const classes = useUtilityClasses$Y(ownerState);
   return /*#__PURE__*/jsxRuntimeExports.jsx(ListSubheaderRoot, {
     as: component,
     className: clsx(classes.root, className),
@@ -49307,7 +49307,7 @@ function getPaperUtilityClass(slot) {
 }
 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$W = ownerState => {
+const useUtilityClasses$X = ownerState => {
   const {
     square,
     elevation,
@@ -49379,7 +49379,7 @@ const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
     square,
     variant
   };
-  const classes = useUtilityClasses$W(ownerState);
+  const classes = useUtilityClasses$X(ownerState);
   if (process.env.NODE_ENV !== 'production') {
     if (theme.shadows[elevation] === undefined) {
       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'));
@@ -51542,7 +51542,7 @@ function getButtonBaseUtilityClass(slot) {
 }
 const buttonBaseClasses = generateUtilityClasses('MuiButtonBase', ['root', 'disabled', 'focusVisible']);
 
-const useUtilityClasses$V = ownerState => {
+const useUtilityClasses$W = ownerState => {
   const {
     disabled,
     focusVisible,
@@ -51771,7 +51771,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     tabIndex,
     focusVisible
   };
-  const classes = useUtilityClasses$V(ownerState);
+  const classes = useUtilityClasses$W(ownerState);
   return /*#__PURE__*/jsxRuntimeExports.jsxs(ButtonBaseRoot, {
     as: ComponentProp,
     className: clsx(classes.root, className),
@@ -52012,7 +52012,7 @@ const rotateAnimation = typeof circularRotateKeyframe !== 'string' ? css`
 const dashAnimation = typeof circularDashKeyframe !== 'string' ? css`
         animation: ${circularDashKeyframe} 1.4s ease-in-out infinite;
       ` : null;
-const useUtilityClasses$U = ownerState => {
+const useUtilityClasses$V = ownerState => {
   const {
     classes,
     variant,
@@ -52140,7 +52140,7 @@ const CircularProgress$1 = /*#__PURE__*/React.forwardRef(function CircularProgre
     value,
     variant
   };
-  const classes = useUtilityClasses$U(ownerState);
+  const classes = useUtilityClasses$V(ownerState);
   const circleStyle = {};
   const rootStyle = {};
   const rootProps = {};
@@ -52251,7 +52251,7 @@ function getIconButtonUtilityClass(slot) {
 }
 const iconButtonClasses = generateUtilityClasses('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge', 'loading', 'loadingIndicator', 'loadingWrapper']);
 
-const useUtilityClasses$T = ownerState => {
+const useUtilityClasses$U = ownerState => {
   const {
     classes,
     disabled,
@@ -52443,7 +52443,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     loadingIndicator,
     size
   };
-  const classes = useUtilityClasses$T(ownerState);
+  const classes = useUtilityClasses$U(ownerState);
   return /*#__PURE__*/jsxRuntimeExports.jsxs(IconButtonRoot, {
     id: loading ? loadingId : idProp,
     className: clsx(classes.root, className),
@@ -52563,7 +52563,7 @@ function getChipUtilityClass(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$S = ownerState => {
+const useUtilityClasses$T = ownerState => {
   const {
     classes,
     disabled,
@@ -52964,7 +52964,7 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
     clickable,
     variant
   };
-  const classes = useUtilityClasses$S(ownerState);
+  const classes = useUtilityClasses$T(ownerState);
   const moreProps = component === ButtonBase ? {
     component: ComponentProp || 'div',
     focusVisibleClassName: classes.focusVisible,
@@ -53451,7 +53451,7 @@ const inputOverridesResolver = (props, styles) => {
   } = props;
   return [styles.input, ownerState.size === 'small' && styles.inputSizeSmall, ownerState.multiline && styles.inputMultiline, ownerState.type === 'search' && styles.inputTypeSearch, ownerState.startAdornment && styles.inputAdornedStart, ownerState.endAdornment && styles.inputAdornedEnd, ownerState.hiddenLabel && styles.inputHiddenLabel];
 };
-const useUtilityClasses$R = ownerState => {
+const useUtilityClasses$S = ownerState => {
   const {
     classes,
     color,
@@ -53871,7 +53871,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
     startAdornment,
     type
   };
-  const classes = useUtilityClasses$R(ownerState);
+  const classes = useUtilityClasses$S(ownerState);
   const Root = slots.root || components.Root || InputBaseRoot;
   const rootProps = slotProps.root || componentsProps.root || {};
   const Input = slots.input || components.Input || InputBaseInput;
@@ -54192,7 +54192,7 @@ var ClearIcon$1 = createSvgIcon(/*#__PURE__*/jsxRuntimeExports.jsx("path", {
   d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
 }), 'Close');
 
-var ArrowDropDownIcon$1 = createSvgIcon(/*#__PURE__*/jsxRuntimeExports.jsx("path", {
+var ArrowDropDownIcon$2 = createSvgIcon(/*#__PURE__*/jsxRuntimeExports.jsx("path", {
   d: "M7 10l5 5 5-5z"
 }), 'ArrowDropDown');
 
@@ -54277,7 +54277,7 @@ name, parameters) {
 }
 
 var _ClearIcon, _ArrowDropDownIcon;
-const useUtilityClasses$Q = ownerState => {
+const useUtilityClasses$R = ownerState => {
   const {
     classes,
     disablePortal,
@@ -54706,7 +54706,7 @@ const Autocomplete$1 = /*#__PURE__*/React.forwardRef(function Autocomplete(inPro
     options,
     PaperComponent: PaperComponentProp,
     PopperComponent: PopperComponentProp,
-    popupIcon = _ArrowDropDownIcon || (_ArrowDropDownIcon = /*#__PURE__*/jsxRuntimeExports.jsx(ArrowDropDownIcon$1, {})),
+    popupIcon = _ArrowDropDownIcon || (_ArrowDropDownIcon = /*#__PURE__*/jsxRuntimeExports.jsx(ArrowDropDownIcon$2, {})),
     readOnly = false,
     renderGroup: renderGroupProp,
     renderInput,
@@ -54772,7 +54772,7 @@ const Autocomplete$1 = /*#__PURE__*/React.forwardRef(function Autocomplete(inPro
     popupOpen,
     size
   };
-  const classes = useUtilityClasses$Q(ownerState);
+  const classes = useUtilityClasses$R(ownerState);
   const externalForwardedProps = {
     slots: {
       paper: PaperComponentProp,
@@ -55442,7 +55442,7 @@ function getSwitchBaseUtilityClass(slot) {
 }
 generateUtilityClasses('PrivateSwitchBase', ['root', 'checked', 'disabled', 'input', 'edgeStart', 'edgeEnd']);
 
-const useUtilityClasses$P = ownerState => {
+const useUtilityClasses$Q = ownerState => {
   const {
     classes,
     checked,
@@ -55585,7 +55585,7 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
     disableFocusRipple,
     edge
   };
-  const classes = useUtilityClasses$P(ownerState);
+  const classes = useUtilityClasses$Q(ownerState);
   const externalForwardedProps = {
     slots,
     slotProps: {
@@ -55799,7 +55799,7 @@ function getCheckboxUtilityClass(slot) {
 }
 const checkboxClasses = generateUtilityClasses('MuiCheckbox', ['root', 'checked', 'disabled', 'indeterminate', 'colorPrimary', 'colorSecondary', 'sizeSmall', 'sizeMedium']);
 
-const useUtilityClasses$O = ownerState => {
+const useUtilityClasses$P = ownerState => {
   const {
     classes,
     indeterminate,
@@ -55908,7 +55908,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(inProps, ref) {
     indeterminate,
     size
   };
-  const classes = useUtilityClasses$O(ownerState);
+  const classes = useUtilityClasses$P(ownerState);
   const externalInputProps = slotProps.input ?? inputProps;
   const [RootSlot, rootSlotProps] = useSlot('root', {
     ref,
@@ -56058,7 +56058,7 @@ process.env.NODE_ENV !== "production" ? Checkbox.propTypes /* remove-proptypes *
   value: PropTypes.any
 } : void 0;
 
-const useUtilityClasses$N = ownerState => {
+const useUtilityClasses$O = ownerState => {
   const {
     classes,
     disableUnderline
@@ -56189,7 +56189,7 @@ const Input = /*#__PURE__*/React.forwardRef(function Input(inProps, ref) {
     type = 'text',
     ...other
   } = props;
-  const classes = useUtilityClasses$N(props);
+  const classes = useUtilityClasses$O(props);
   const ownerState = {
     disableUnderline
   };
@@ -56403,7 +56403,7 @@ process.env.NODE_ENV !== "production" ? Input.propTypes /* remove-proptypes */ =
 } : void 0;
 Input.muiName = 'Input';
 
-const useUtilityClasses$M = ownerState => {
+const useUtilityClasses$N = ownerState => {
   const {
     classes,
     disableUnderline,
@@ -56681,7 +56681,7 @@ const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps,
     multiline,
     type
   };
-  const classes = useUtilityClasses$M(props);
+  const classes = useUtilityClasses$N(props);
   const filledInputComponentsProps = {
     root: {
       ownerState
@@ -57049,7 +57049,7 @@ process.env.NODE_ENV !== "production" ? NotchedOutline.propTypes /* remove-propt
   style: PropTypes.object
 } : void 0;
 
-const useUtilityClasses$L = ownerState => {
+const useUtilityClasses$M = ownerState => {
   const {
     classes
   } = ownerState;
@@ -57227,7 +57227,7 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
     type = 'text',
     ...other
   } = props;
-  const classes = useUtilityClasses$L(props);
+  const classes = useUtilityClasses$M(props);
   const muiFormControl = useFormControl();
   const fcs = formControlState({
     props,
@@ -57465,7 +57465,7 @@ function getFormLabelUtilityClasses(slot) {
 }
 const formLabelClasses = generateUtilityClasses('MuiFormLabel', ['root', 'colorSecondary', 'focused', 'disabled', 'error', 'filled', 'required', 'asterisk']);
 
-const useUtilityClasses$K = ownerState => {
+const useUtilityClasses$L = ownerState => {
   const {
     classes,
     color,
@@ -57562,7 +57562,7 @@ const FormLabel = /*#__PURE__*/React.forwardRef(function FormLabel(inProps, ref)
     focused: fcs.focused,
     required: fcs.required
   };
-  const classes = useUtilityClasses$K(ownerState);
+  const classes = useUtilityClasses$L(ownerState);
   return /*#__PURE__*/jsxRuntimeExports.jsxs(FormLabelRoot, {
     as: component,
     ownerState: ownerState,
@@ -57636,7 +57636,7 @@ function getInputLabelUtilityClasses(slot) {
 }
 generateUtilityClasses('MuiInputLabel', ['root', 'focused', 'disabled', 'error', 'required', 'asterisk', 'formControl', 'sizeSmall', 'shrink', 'animated', 'standard', 'filled', 'outlined']);
 
-const useUtilityClasses$J = ownerState => {
+const useUtilityClasses$K = ownerState => {
   const {
     classes,
     formControl,
@@ -57825,7 +57825,7 @@ const InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, re
     required: fcs.required,
     focused: fcs.focused
   };
-  const classes = useUtilityClasses$J(ownerState);
+  const classes = useUtilityClasses$K(ownerState);
   return /*#__PURE__*/jsxRuntimeExports.jsx(InputLabelRoot, {
     "data-shrink": shrink,
     ref: ref,
@@ -57908,7 +57908,7 @@ function getFormControlUtilityClasses(slot) {
 }
 generateUtilityClasses('MuiFormControl', ['root', 'marginNone', 'marginNormal', 'marginDense', 'fullWidth', 'disabled']);
 
-const useUtilityClasses$I = ownerState => {
+const useUtilityClasses$J = ownerState => {
   const {
     classes,
     margin,
@@ -58023,7 +58023,7 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps,
     size,
     variant
   };
-  const classes = useUtilityClasses$I(ownerState);
+  const classes = useUtilityClasses$J(ownerState);
   const [adornedStart, setAdornedStart] = React.useState(() => {
     // We need to iterate through the children and find the Input in order
     // to fully support server-side rendering.
@@ -58205,7 +58205,7 @@ function getFormHelperTextUtilityClasses(slot) {
 const formHelperTextClasses = generateUtilityClasses('MuiFormHelperText', ['root', 'error', 'disabled', 'sizeSmall', 'sizeMedium', 'contained', 'focused', 'filled', 'required']);
 
 var _span$2;
-const useUtilityClasses$H = ownerState => {
+const useUtilityClasses$I = ownerState => {
   const {
     classes,
     contained,
@@ -58302,7 +58302,7 @@ const FormHelperText = /*#__PURE__*/React.forwardRef(function FormHelperText(inP
 
   // This issue explains why this is required: https://github.com/mui/material-ui/issues/42184
   delete ownerState.ownerState;
-  const classes = useUtilityClasses$H(ownerState);
+  const classes = useUtilityClasses$I(ownerState);
   return /*#__PURE__*/jsxRuntimeExports.jsx(FormHelperTextRoot, {
     as: component,
     className: clsx(classes.root, className),
@@ -58389,7 +58389,7 @@ function getListUtilityClass(slot) {
 }
 generateUtilityClasses('MuiList', ['root', 'padding', 'dense', 'subheader']);
 
-const useUtilityClasses$G = ownerState => {
+const useUtilityClasses$H = ownerState => {
   const {
     classes,
     disablePadding,
@@ -58455,7 +58455,7 @@ const List = /*#__PURE__*/React.forwardRef(function List(inProps, ref) {
     dense,
     disablePadding
   };
-  const classes = useUtilityClasses$G(ownerState);
+  const classes = useUtilityClasses$H(ownerState);
   return /*#__PURE__*/jsxRuntimeExports.jsx(ListContext.Provider, {
     value: context,
     children: /*#__PURE__*/jsxRuntimeExports.jsxs(ListRoot, {
@@ -59838,7 +59838,7 @@ function getBackdropUtilityClass(slot) {
 }
 generateUtilityClasses('MuiBackdrop', ['root', 'invisible']);
 
-const useUtilityClasses$F = ownerState => {
+const useUtilityClasses$G = ownerState => {
   const {
     classes,
     invisible
@@ -59901,7 +59901,7 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
     component,
     invisible
   };
-  const classes = useUtilityClasses$F(ownerState);
+  const classes = useUtilityClasses$G(ownerState);
   const backwardCompatibleSlots = {
     transition: TransitionComponentProp,
     root: components.Root,
@@ -60220,7 +60220,7 @@ function getModalUtilityClass(slot) {
 }
 generateUtilityClasses('MuiModal', ['root', 'hidden', 'backdrop']);
 
-const useUtilityClasses$E = ownerState => {
+const useUtilityClasses$F = ownerState => {
   const {
     open,
     exited,
@@ -60341,7 +60341,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     ...propsWithDefaults,
     exited
   };
-  const classes = useUtilityClasses$E(ownerState);
+  const classes = useUtilityClasses$F(ownerState);
   const childProps = {};
   if (children.props.tabIndex === undefined) {
     childProps.tabIndex = '-1';
@@ -60625,7 +60625,7 @@ function getTransformOriginValue(transformOrigin) {
 function resolveAnchorEl(anchorEl) {
   return typeof anchorEl === 'function' ? anchorEl() : anchorEl;
 }
-const useUtilityClasses$D = ownerState => {
+const useUtilityClasses$E = ownerState => {
   const {
     classes
   } = ownerState;
@@ -60703,7 +60703,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     transitionDuration: transitionDurationProp,
     TransitionProps
   };
-  const classes = useUtilityClasses$D(ownerState);
+  const classes = useUtilityClasses$E(ownerState);
 
   // Returns the top/left offset of the position
   // to attach to on the anchor element (or body if none is provided)
@@ -61167,7 +61167,7 @@ const LTR_ORIGIN = {
   vertical: 'top',
   horizontal: 'left'
 };
-const useUtilityClasses$C = ownerState => {
+const useUtilityClasses$D = ownerState => {
   const {
     classes
   } = ownerState;
@@ -61238,7 +61238,7 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
     TransitionProps,
     variant
   };
-  const classes = useUtilityClasses$C(ownerState);
+  const classes = useUtilityClasses$D(ownerState);
   const autoFocusItem = autoFocus && !disableAutoFocusItem && open;
   const menuListActionsRef = React.useRef(null);
   const handleEntering = (element, isAppearing) => {
@@ -61484,7 +61484,7 @@ function getNativeSelectUtilityClasses(slot) {
 }
 const nativeSelectClasses = generateUtilityClasses('MuiNativeSelect', ['root', 'select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput', 'error']);
 
-const useUtilityClasses$B = ownerState => {
+const useUtilityClasses$C = ownerState => {
   const {
     classes,
     variant,
@@ -61641,7 +61641,7 @@ const NativeSelectInput = /*#__PURE__*/React.forwardRef(function NativeSelectInp
     variant,
     error
   };
-  const classes = useUtilityClasses$B(ownerState);
+  const classes = useUtilityClasses$C(ownerState);
   return /*#__PURE__*/jsxRuntimeExports.jsxs(React.Fragment, {
     children: [/*#__PURE__*/jsxRuntimeExports.jsx(NativeSelectSelect, {
       ownerState: ownerState,
@@ -61783,7 +61783,7 @@ function areEqualValues(a, b) {
 function isEmpty$1(display) {
   return display == null || typeof display === 'string' && !display.trim();
 }
-const useUtilityClasses$A = ownerState => {
+const useUtilityClasses$B = ownerState => {
   const {
     classes,
     variant,
@@ -62128,7 +62128,7 @@ const SelectInput$1 = /*#__PURE__*/React.forwardRef(function SelectInput(props,
     open,
     error
   };
-  const classes = useUtilityClasses$A(ownerState);
+  const classes = useUtilityClasses$B(ownerState);
   const paperProps = {
     ...MenuProps.PaperProps,
     ...MenuProps.slotProps?.paper
@@ -62368,7 +62368,7 @@ process.env.NODE_ENV !== "production" ? SelectInput$1.propTypes = {
   variant: PropTypes.oneOf(['standard', 'outlined', 'filled'])
 } : void 0;
 
-const useUtilityClasses$z = ownerState => {
+const useUtilityClasses$A = ownerState => {
   const {
     classes
   } = ownerState;
@@ -62401,7 +62401,7 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
     className,
     defaultOpen = false,
     displayEmpty = false,
-    IconComponent = ArrowDropDownIcon$1,
+    IconComponent = ArrowDropDownIcon$2,
     id,
     input,
     inputProps,
@@ -62431,7 +62431,7 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
     variant,
     classes: classesProp
   };
-  const classes = useUtilityClasses$z(ownerState);
+  const classes = useUtilityClasses$A(ownerState);
   const {
     root,
     ...restOfClasses
@@ -62655,7 +62655,7 @@ const variantComponent = {
   filled: FilledInput,
   outlined: OutlinedInput
 };
-const useUtilityClasses$y = ownerState => {
+const useUtilityClasses$z = ownerState => {
   const {
     classes
   } = ownerState;
@@ -62755,7 +62755,7 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
     select,
     variant
   };
-  const classes = useUtilityClasses$y(ownerState);
+  const classes = useUtilityClasses$z(ownerState);
   if (process.env.NODE_ENV !== 'production') {
     if (select && !children) {
       console.error('MUI: `children` must be passed when using the `TextField` component with `select`.');
@@ -63285,17 +63285,1250 @@ const BoxResizableSplit = props => {
   });
 };
 
-var ImageIcon = createSvgIcon(/*#__PURE__*/jsxRuntimeExports.jsx("path", {
-  d: "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2M8.5 13.5l2.5 3.01L14.5 12l4.5 6H5z"
-}), 'Image');
+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']);
 
-var MenuIcon = createSvgIcon(/*#__PURE__*/jsxRuntimeExports.jsx("path", {
-  d: "M3 18h18v-2H3zm0-5h18v-2H3zm0-7v2h18V6z"
-}), 'Menu');
+/**
+ * @ignore - internal component.
+ */
+const ButtonGroupContext = /*#__PURE__*/React.createContext({});
+if (process.env.NODE_ENV !== 'production') {
+  ButtonGroupContext.displayName = 'ButtonGroupContext';
+}
 
-var PictureAsPdfIcon = createSvgIcon(/*#__PURE__*/jsxRuntimeExports.jsx("path", {
-  d: "M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2m-8.5 7.5c0 .83-.67 1.5-1.5 1.5H9v2H7.5V7H10c.83 0 1.5.67 1.5 1.5zm5 2c0 .83-.67 1.5-1.5 1.5h-2.5V7H15c.83 0 1.5.67 1.5 1.5zm4-3H19v1h1.5V11H19v2h-1.5V7h3zM9 9.5h1v-1H9zM4 6H2v14c0 1.1.9 2 2 2h14v-2H4zm10 5.5h1v-3h-1z"
-}), 'PictureAsPdf');
+/**
+ * @ignore - internal component.
+ */
+const ButtonGroupButtonContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== 'production') {
+  ButtonGroupButtonContext.displayName = 'ButtonGroupButtonContext';
+}
+
+const useUtilityClasses$y = ownerState => {
+  const {
+    color,
+    disableElevation,
+    fullWidth,
+    size,
+    variant,
+    loading,
+    loadingPosition,
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root', loading && 'loading', variant, `${variant}${capitalize(color)}`, `size${capitalize(size)}`, `${variant}Size${capitalize(size)}`, `color${capitalize(color)}`, disableElevation && 'disableElevation', fullWidth && 'fullWidth', loading && `loadingPosition${capitalize(loadingPosition)}`],
+    startIcon: ['icon', 'startIcon', `iconSize${capitalize(size)}`],
+    endIcon: ['icon', 'endIcon', `iconSize${capitalize(size)}`],
+    loadingIndicator: ['loadingIndicator'],
+    loadingWrapper: ['loadingWrapper']
+  };
+  const composedClasses = composeClasses(slots, getButtonUtilityClass, classes);
+  return {
+    ...classes,
+    // forward the focused, disabled, etc. classes to the ButtonBase
+    ...composedClasses
+  };
+};
+const commonIconStyles = [{
+  props: {
+    size: 'small'
+  },
+  style: {
+    '& > *:nth-of-type(1)': {
+      fontSize: 18
+    }
+  }
+}, {
+  props: {
+    size: 'medium'
+  },
+  style: {
+    '& > *:nth-of-type(1)': {
+      fontSize: 20
+    }
+  }
+}, {
+  props: {
+    size: 'large'
+  },
+  style: {
+    '& > *:nth-of-type(1)': {
+      fontSize: 22
+    }
+  }
+}];
+const ButtonRoot = styled(ButtonBase, {
+  shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
+  name: 'MuiButton',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, styles[ownerState.variant], styles[`${ownerState.variant}${capitalize(ownerState.color)}`], styles[`size${capitalize(ownerState.size)}`], styles[`${ownerState.variant}Size${capitalize(ownerState.size)}`], ownerState.color === 'inherit' && styles.colorInherit, ownerState.disableElevation && styles.disableElevation, ownerState.fullWidth && styles.fullWidth, ownerState.loading && styles.loading];
+  }
+})(memoTheme(({
+  theme
+}) => {
+  const inheritContainedBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[800];
+  const inheritContainedHoverBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey.A100 : theme.palette.grey[700];
+  return {
+    ...theme.typography.button,
+    minWidth: 64,
+    padding: '6px 16px',
+    border: 0,
+    borderRadius: (theme.vars || theme).shape.borderRadius,
+    transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
+      duration: theme.transitions.duration.short
+    }),
+    '&:hover': {
+      textDecoration: 'none'
+    },
+    [`&.${buttonClasses.disabled}`]: {
+      color: (theme.vars || theme).palette.action.disabled
+    },
+    variants: [{
+      props: {
+        variant: 'contained'
+      },
+      style: {
+        color: `var(--variant-containedColor)`,
+        backgroundColor: `var(--variant-containedBg)`,
+        boxShadow: (theme.vars || theme).shadows[2],
+        '&:hover': {
+          boxShadow: (theme.vars || theme).shadows[4],
+          // Reset on touch devices, it doesn't add specificity
+          '@media (hover: none)': {
+            boxShadow: (theme.vars || theme).shadows[2]
+          }
+        },
+        '&:active': {
+          boxShadow: (theme.vars || theme).shadows[8]
+        },
+        [`&.${buttonClasses.focusVisible}`]: {
+          boxShadow: (theme.vars || theme).shadows[6]
+        },
+        [`&.${buttonClasses.disabled}`]: {
+          color: (theme.vars || theme).palette.action.disabled,
+          boxShadow: (theme.vars || theme).shadows[0],
+          backgroundColor: (theme.vars || theme).palette.action.disabledBackground
+        }
+      }
+    }, {
+      props: {
+        variant: 'outlined'
+      },
+      style: {
+        padding: '5px 15px',
+        border: '1px solid currentColor',
+        borderColor: `var(--variant-outlinedBorder, currentColor)`,
+        backgroundColor: `var(--variant-outlinedBg)`,
+        color: `var(--variant-outlinedColor)`,
+        [`&.${buttonClasses.disabled}`]: {
+          border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`
+        }
+      }
+    }, {
+      props: {
+        variant: 'text'
+      },
+      style: {
+        padding: '6px 8px',
+        color: `var(--variant-textColor)`,
+        backgroundColor: `var(--variant-textBg)`
+      }
+    }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
+      props: {
+        color
+      },
+      style: {
+        '--variant-textColor': (theme.vars || theme).palette[color].main,
+        '--variant-outlinedColor': (theme.vars || theme).palette[color].main,
+        '--variant-outlinedBorder': theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / 0.5)` : alpha$1(theme.palette[color].main, 0.5),
+        '--variant-containedColor': (theme.vars || theme).palette[color].contrastText,
+        '--variant-containedBg': (theme.vars || theme).palette[color].main,
+        '@media (hover: hover)': {
+          '&:hover': {
+            '--variant-containedBg': (theme.vars || theme).palette[color].dark,
+            '--variant-textBg': theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha$1(theme.palette[color].main, theme.palette.action.hoverOpacity),
+            '--variant-outlinedBorder': (theme.vars || theme).palette[color].main,
+            '--variant-outlinedBg': theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha$1(theme.palette[color].main, theme.palette.action.hoverOpacity)
+          }
+        }
+      }
+    })), {
+      props: {
+        color: 'inherit'
+      },
+      style: {
+        color: 'inherit',
+        borderColor: 'currentColor',
+        '--variant-containedBg': theme.vars ? theme.vars.palette.Button.inheritContainedBg : inheritContainedBackgroundColor,
+        '@media (hover: hover)': {
+          '&:hover': {
+            '--variant-containedBg': theme.vars ? theme.vars.palette.Button.inheritContainedHoverBg : inheritContainedHoverBackgroundColor,
+            '--variant-textBg': theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha$1(theme.palette.text.primary, theme.palette.action.hoverOpacity),
+            '--variant-outlinedBg': theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha$1(theme.palette.text.primary, theme.palette.action.hoverOpacity)
+          }
+        }
+      }
+    }, {
+      props: {
+        size: 'small',
+        variant: 'text'
+      },
+      style: {
+        padding: '4px 5px',
+        fontSize: theme.typography.pxToRem(13)
+      }
+    }, {
+      props: {
+        size: 'large',
+        variant: 'text'
+      },
+      style: {
+        padding: '8px 11px',
+        fontSize: theme.typography.pxToRem(15)
+      }
+    }, {
+      props: {
+        size: 'small',
+        variant: 'outlined'
+      },
+      style: {
+        padding: '3px 9px',
+        fontSize: theme.typography.pxToRem(13)
+      }
+    }, {
+      props: {
+        size: 'large',
+        variant: 'outlined'
+      },
+      style: {
+        padding: '7px 21px',
+        fontSize: theme.typography.pxToRem(15)
+      }
+    }, {
+      props: {
+        size: 'small',
+        variant: 'contained'
+      },
+      style: {
+        padding: '4px 10px',
+        fontSize: theme.typography.pxToRem(13)
+      }
+    }, {
+      props: {
+        size: 'large',
+        variant: 'contained'
+      },
+      style: {
+        padding: '8px 22px',
+        fontSize: theme.typography.pxToRem(15)
+      }
+    }, {
+      props: {
+        disableElevation: true
+      },
+      style: {
+        boxShadow: 'none',
+        '&:hover': {
+          boxShadow: 'none'
+        },
+        [`&.${buttonClasses.focusVisible}`]: {
+          boxShadow: 'none'
+        },
+        '&:active': {
+          boxShadow: 'none'
+        },
+        [`&.${buttonClasses.disabled}`]: {
+          boxShadow: 'none'
+        }
+      }
+    }, {
+      props: {
+        fullWidth: true
+      },
+      style: {
+        width: '100%'
+      }
+    }, {
+      props: {
+        loadingPosition: 'center'
+      },
+      style: {
+        transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
+          duration: theme.transitions.duration.short
+        }),
+        [`&.${buttonClasses.loading}`]: {
+          color: 'transparent'
+        }
+      }
+    }]
+  };
+}));
+const ButtonStartIcon = styled('span', {
+  name: 'MuiButton',
+  slot: 'StartIcon',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.startIcon, ownerState.loading && styles.startIconLoadingStart, styles[`iconSize${capitalize(ownerState.size)}`]];
+  }
+})(({
+  theme
+}) => ({
+  display: 'inherit',
+  marginRight: 8,
+  marginLeft: -4,
+  variants: [{
+    props: {
+      size: 'small'
+    },
+    style: {
+      marginLeft: -2
+    }
+  }, {
+    props: {
+      loadingPosition: 'start',
+      loading: true
+    },
+    style: {
+      transition: theme.transitions.create(['opacity'], {
+        duration: theme.transitions.duration.short
+      }),
+      opacity: 0
+    }
+  }, {
+    props: {
+      loadingPosition: 'start',
+      loading: true,
+      fullWidth: true
+    },
+    style: {
+      marginRight: -8
+    }
+  }, ...commonIconStyles]
+}));
+const ButtonEndIcon = styled('span', {
+  name: 'MuiButton',
+  slot: 'EndIcon',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.endIcon, ownerState.loading && styles.endIconLoadingEnd, styles[`iconSize${capitalize(ownerState.size)}`]];
+  }
+})(({
+  theme
+}) => ({
+  display: 'inherit',
+  marginRight: -4,
+  marginLeft: 8,
+  variants: [{
+    props: {
+      size: 'small'
+    },
+    style: {
+      marginRight: -2
+    }
+  }, {
+    props: {
+      loadingPosition: 'end',
+      loading: true
+    },
+    style: {
+      transition: theme.transitions.create(['opacity'], {
+        duration: theme.transitions.duration.short
+      }),
+      opacity: 0
+    }
+  }, {
+    props: {
+      loadingPosition: 'end',
+      loading: true,
+      fullWidth: true
+    },
+    style: {
+      marginLeft: -8
+    }
+  }, ...commonIconStyles]
+}));
+const ButtonLoadingIndicator = styled('span', {
+  name: 'MuiButton',
+  slot: 'LoadingIndicator'
+})(({
+  theme
+}) => ({
+  display: 'none',
+  position: 'absolute',
+  visibility: 'visible',
+  variants: [{
+    props: {
+      loading: true
+    },
+    style: {
+      display: 'flex'
+    }
+  }, {
+    props: {
+      loadingPosition: 'start'
+    },
+    style: {
+      left: 14
+    }
+  }, {
+    props: {
+      loadingPosition: 'start',
+      size: 'small'
+    },
+    style: {
+      left: 10
+    }
+  }, {
+    props: {
+      variant: 'text',
+      loadingPosition: 'start'
+    },
+    style: {
+      left: 6
+    }
+  }, {
+    props: {
+      loadingPosition: 'center'
+    },
+    style: {
+      left: '50%',
+      transform: 'translate(-50%)',
+      color: (theme.vars || theme).palette.action.disabled
+    }
+  }, {
+    props: {
+      loadingPosition: 'end'
+    },
+    style: {
+      right: 14
+    }
+  }, {
+    props: {
+      loadingPosition: 'end',
+      size: 'small'
+    },
+    style: {
+      right: 10
+    }
+  }, {
+    props: {
+      variant: 'text',
+      loadingPosition: 'end'
+    },
+    style: {
+      right: 6
+    }
+  }, {
+    props: {
+      loadingPosition: 'start',
+      fullWidth: true
+    },
+    style: {
+      position: 'relative',
+      left: -10
+    }
+  }, {
+    props: {
+      loadingPosition: 'end',
+      fullWidth: true
+    },
+    style: {
+      position: 'relative',
+      right: -10
+    }
+  }]
+}));
+const ButtonLoadingIconPlaceholder = styled('span', {
+  name: 'MuiButton',
+  slot: 'LoadingIconPlaceholder'
+})({
+  display: 'inline-block',
+  width: '1em',
+  height: '1em'
+});
+const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
+  // props priority: `inProps` > `contextProps` > `themeDefaultProps`
+  const contextProps = React.useContext(ButtonGroupContext);
+  const buttonGroupButtonContextPositionClassName = React.useContext(ButtonGroupButtonContext);
+  const resolvedProps = resolveProps(contextProps, inProps);
+  const props = useDefaultProps({
+    props: resolvedProps,
+    name: 'MuiButton'
+  });
+  const {
+    children,
+    color = 'primary',
+    component = 'button',
+    className,
+    disabled = false,
+    disableElevation = false,
+    disableFocusRipple = false,
+    endIcon: endIconProp,
+    focusVisibleClassName,
+    fullWidth = false,
+    id: idProp,
+    loading = null,
+    loadingIndicator: loadingIndicatorProp,
+    loadingPosition = 'center',
+    size = 'medium',
+    startIcon: startIconProp,
+    type,
+    variant = 'text',
+    ...other
+  } = props;
+  const loadingId = useId(idProp);
+  const loadingIndicator = loadingIndicatorProp ?? /*#__PURE__*/jsxRuntimeExports.jsx(CircularProgress$1, {
+    "aria-labelledby": loadingId,
+    color: "inherit",
+    size: 16
+  });
+  const ownerState = {
+    ...props,
+    color,
+    component,
+    disabled,
+    disableElevation,
+    disableFocusRipple,
+    fullWidth,
+    loading,
+    loadingIndicator,
+    loadingPosition,
+    size,
+    type,
+    variant
+  };
+  const classes = useUtilityClasses$y(ownerState);
+  const startIcon = (startIconProp || loading && loadingPosition === 'start') && /*#__PURE__*/jsxRuntimeExports.jsx(ButtonStartIcon, {
+    className: classes.startIcon,
+    ownerState: ownerState,
+    children: startIconProp || /*#__PURE__*/jsxRuntimeExports.jsx(ButtonLoadingIconPlaceholder, {
+      className: classes.loadingIconPlaceholder,
+      ownerState: ownerState
+    })
+  });
+  const endIcon = (endIconProp || loading && loadingPosition === 'end') && /*#__PURE__*/jsxRuntimeExports.jsx(ButtonEndIcon, {
+    className: classes.endIcon,
+    ownerState: ownerState,
+    children: endIconProp || /*#__PURE__*/jsxRuntimeExports.jsx(ButtonLoadingIconPlaceholder, {
+      className: classes.loadingIconPlaceholder,
+      ownerState: ownerState
+    })
+  });
+  const positionClassName = buttonGroupButtonContextPositionClassName || '';
+  const loader = typeof loading === 'boolean' ?
+  /*#__PURE__*/
+  // use plain HTML span to minimize the runtime overhead
+  jsxRuntimeExports.jsx("span", {
+    className: classes.loadingWrapper,
+    style: {
+      display: 'contents'
+    },
+    children: loading && /*#__PURE__*/jsxRuntimeExports.jsx(ButtonLoadingIndicator, {
+      className: classes.loadingIndicator,
+      ownerState: ownerState,
+      children: loadingIndicator
+    })
+  }) : null;
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(ButtonRoot, {
+    ownerState: ownerState,
+    className: clsx(contextProps.className, classes.root, className, positionClassName),
+    component: component,
+    disabled: disabled || loading,
+    focusRipple: !disableFocusRipple,
+    focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
+    ref: ref,
+    type: type,
+    id: loading ? loadingId : idProp,
+    ...other,
+    classes: classes,
+    children: [startIcon, loadingPosition !== 'end' && loader, children, loadingPosition === 'end' && loader, endIcon]
+  });
+});
+process.env.NODE_ENV !== "production" ? Button.propTypes /* remove-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 /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['inherit', 'primary', 'secondary', 'success', 'error', 'info', '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  keyboard focus ripple is disabled.
+   * @default false
+   */
+  disableFocusRipple: PropTypes.bool,
+  /**
+   * If `true`, the ripple effect is disabled.
+   *
+   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
+   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
+   * @default false
+   */
+  disableRipple: PropTypes.bool,
+  /**
+   * Element placed after the children.
+   */
+  endIcon: PropTypes.node,
+  /**
+   * @ignore
+   */
+  focusVisibleClassName: PropTypes.string,
+  /**
+   * If `true`, the button will take up the full width of its container.
+   * @default false
+   */
+  fullWidth: PropTypes.bool,
+  /**
+   * The URL to link to when the button is clicked.
+   * If defined, an `a` element will be used as the root node.
+   */
+  href: PropTypes.string,
+  /**
+   * @ignore
+   */
+  id: PropTypes.string,
+  /**
+   * If `true`, the loading indicator is visible and the button is disabled.
+   * If `true | false`, the loading wrapper is always rendered before the children to prevent [Google Translation Crash](https://github.com/mui/material-ui/issues/27853).
+   * @default null
+   */
+  loading: PropTypes.bool,
+  /**
+   * Element placed before the children if the button is in loading state.
+   * The node should contain an element with `role="progressbar"` with an accessible name.
+   * By default, it renders a `CircularProgress` that is labeled by the button itself.
+   * @default <CircularProgress color="inherit" size={16} />
+   */
+  loadingIndicator: PropTypes.node,
+  /**
+   * The loading indicator can be positioned on the start, end, or the center of the button.
+   * @default 'center'
+   */
+  loadingPosition: PropTypes.oneOf(['center', 'end', 'start']),
+  /**
+   * The size of the component.
+   * `small` is equivalent to the dense button styling.
+   * @default 'medium'
+   */
+  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['small', 'medium', 'large']), PropTypes.string]),
+  /**
+   * Element placed before the children.
+   */
+  startIcon: PropTypes.node,
+  /**
+   * 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]),
+  /**
+   * @ignore
+   */
+  type: PropTypes.oneOfType([PropTypes.oneOf(['button', 'reset', 'submit']), PropTypes.string]),
+  /**
+   * The variant to use.
+   * @default 'text'
+   */
+  variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['contained', 'outlined', 'text']), PropTypes.string])
+} : void 0;
+
+/**
+ * Gets only the valid children of a component,
+ * and ignores any nullish or falsy child.
+ *
+ * @param children the children
+ */
+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 overridesResolver$4 = (props, styles) => {
+  const {
+    ownerState
+  } = props;
+  return [{
+    [`& .${buttonGroupClasses.grouped}`]: styles.grouped
+  }, {
+    [`& .${buttonGroupClasses.grouped}`]: styles[`grouped${capitalize(ownerState.orientation)}`]
+  }, {
+    [`& .${buttonGroupClasses.grouped}`]: styles[`grouped${capitalize(ownerState.variant)}`]
+  }, {
+    [`& .${buttonGroupClasses.grouped}`]: styles[`grouped${capitalize(ownerState.variant)}${capitalize(ownerState.orientation)}`]
+  }, {
+    [`& .${buttonGroupClasses.grouped}`]: styles[`grouped${capitalize(ownerState.variant)}${capitalize(ownerState.color)}`]
+  }, {
+    [`& .${buttonGroupClasses.firstButton}`]: styles.firstButton
+  }, {
+    [`& .${buttonGroupClasses.lastButton}`]: styles.lastButton
+  }, {
+    [`& .${buttonGroupClasses.middleButton}`]: styles.middleButton
+  }, styles.root, styles[ownerState.variant], ownerState.disableElevation === true && styles.disableElevation, ownerState.fullWidth && styles.fullWidth, ownerState.orientation === 'vertical' && styles.vertical];
+};
+const useUtilityClasses$x = ownerState => {
+  const {
+    classes,
+    color,
+    disabled,
+    disableElevation,
+    fullWidth,
+    orientation,
+    variant
+  } = ownerState;
+  const slots = {
+    root: ['root', variant, orientation, fullWidth && 'fullWidth', disableElevation && 'disableElevation', `color${capitalize(color)}`],
+    grouped: ['grouped', `grouped${capitalize(orientation)}`, `grouped${capitalize(variant)}`, `grouped${capitalize(variant)}${capitalize(orientation)}`, `grouped${capitalize(variant)}${capitalize(color)}`, disabled && 'disabled'],
+    firstButton: ['firstButton'],
+    lastButton: ['lastButton'],
+    middleButton: ['middleButton']
+  };
+  return composeClasses(slots, getButtonGroupUtilityClass, classes);
+};
+const ButtonGroupRoot = styled('div', {
+  name: 'MuiButtonGroup',
+  slot: 'Root',
+  overridesResolver: overridesResolver$4
+})(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 rgba(${theme.vars.palette.common.onBackgroundChannel} / 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 rgba(${theme.vars.palette.common.onBackgroundChannel} / 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(([color]) => [{
+    props: {
+      variant: 'text',
+      color
+    },
+    style: {
+      [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+        borderColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / 0.5)` : alpha$1(theme.palette[color].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(([color]) => ({
+    props: {
+      variant: 'contained',
+      color
+    },
+    style: {
+      [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+        borderColor: (theme.vars || theme).palette[color].dark
+      }
+    }
+  }))],
+  [`& .${buttonGroupClasses.grouped}`]: {
+    minWidth: 40,
+    boxShadow: 'none',
+    props: {
+      variant: 'contained'
+    },
+    style: {
+      '&:hover': {
+        boxShadow: 'none'
+      }
+    }
+  }
+})));
+const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(inProps, ref) {
+  const props = useDefaultProps({
+    props: inProps,
+    name: 'MuiButtonGroup'
+  });
+  const {
+    children,
+    className,
+    color = '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,
+    component,
+    disabled,
+    disableElevation,
+    disableFocusRipple,
+    disableRipple,
+    fullWidth,
+    orientation,
+    size,
+    variant
+  };
+  const classes = useUtilityClasses$x(ownerState);
+  const context = React.useMemo(() => ({
+    className: classes.grouped,
+    color,
+    disabled,
+    disableElevation,
+    disableFocusRipple,
+    disableRipple,
+    fullWidth,
+    size,
+    variant
+  }), [color, 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__*/jsxRuntimeExports.jsx(ButtonGroupRoot, {
+    as: component,
+    role: "group",
+    className: clsx(classes.root, className),
+    ref: ref,
+    ownerState: ownerState,
+    ...other,
+    children: /*#__PURE__*/jsxRuntimeExports.jsx(ButtonGroupContext.Provider, {
+      value: context,
+      children: validChildren.map((child, index) => {
+        return /*#__PURE__*/jsxRuntimeExports.jsx(ButtonGroupButtonContext.Provider, {
+          value: getButtonPositionClassName(index),
+          children: child
+        }, index);
+      })
+    })
+  });
+});
+process.env.NODE_ENV !== "production" ? ButtonGroup.propTypes /* remove-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 /* @typescript-to-proptypes-ignore */.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 /* @typescript-to-proptypes-ignore */.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 /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['contained', 'outlined', 'text']), PropTypes.string])
+} : void 0;
+
+var ArrowDropDownIcon$1 = createSvgIcon(/*#__PURE__*/jsxRuntimeExports.jsx("path", {
+  d: "m7 10 5 5 5-5z"
+}), 'ArrowDropDown');
+
+// TODO: return `EventHandlerName extends `on${infer EventName}` ? Lowercase<EventName> : never` once generatePropTypes runs with TS 4.1
+function mapEventPropToEvent(eventProp) {
+  return eventProp.substring(2).toLowerCase();
+}
+function clickedRootScrollbar$1(event, doc) {
+  return doc.documentElement.clientWidth < event.clientX || doc.documentElement.clientHeight < event.clientY;
+}
+/**
+ * Listen for click events that occur somewhere in the document, outside of the element itself.
+ * For instance, if you need to hide a menu when people click anywhere else on your page.
+ *
+ * Demos:
+ *
+ * - [Click-Away Listener](https://mui.com/material-ui/react-click-away-listener/)
+ * - [Menu](https://mui.com/material-ui/react-menu/)
+ *
+ * API:
+ *
+ * - [ClickAwayListener API](https://mui.com/material-ui/api/click-away-listener/)
+ */
+function ClickAwayListener(props) {
+  const {
+    children,
+    disableReactTree = false,
+    mouseEvent = 'onClick',
+    onClickAway,
+    touchEvent = 'onTouchEnd'
+  } = props;
+  const movedRef = React.useRef(false);
+  const nodeRef = React.useRef(null);
+  const activatedRef = React.useRef(false);
+  const syntheticEventRef = React.useRef(false);
+  React.useEffect(() => {
+    // Ensure that this component is not "activated" synchronously.
+    // https://github.com/facebook/react/issues/20074
+    setTimeout(() => {
+      activatedRef.current = true;
+    }, 0);
+    return () => {
+      activatedRef.current = false;
+    };
+  }, []);
+  const handleRef = useForkRef(getReactElementRef(children), nodeRef);
+
+  // The handler doesn't take event.defaultPrevented into account:
+  //
+  // event.preventDefault() is meant to stop default behaviors like
+  // clicking a checkbox to check it, hitting a button to submit a form,
+  // and hitting left arrow to move the cursor in a text input etc.
+  // Only special HTML elements have these default behaviors.
+  const handleClickAway = useEventCallback(event => {
+    // Given developers can stop the propagation of the synthetic event,
+    // we can only be confident with a positive value.
+    const insideReactTree = syntheticEventRef.current;
+    syntheticEventRef.current = false;
+    const doc = ownerDocument(nodeRef.current);
+
+    // 1. IE11 support, which trigger the handleClickAway even after the unbind
+    // 2. The child might render null.
+    // 3. Behave like a blur listener.
+    if (!activatedRef.current || !nodeRef.current || 'clientX' in event && clickedRootScrollbar$1(event, doc)) {
+      return;
+    }
+
+    // Do not act if user performed touchmove
+    if (movedRef.current) {
+      movedRef.current = false;
+      return;
+    }
+    let insideDOM;
+
+    // If not enough, can use https://github.com/DieterHolvoet/event-propagation-path/blob/master/propagationPath.js
+    if (event.composedPath) {
+      insideDOM = event.composedPath().includes(nodeRef.current);
+    } else {
+      insideDOM = !doc.documentElement.contains(
+      // @ts-expect-error returns `false` as intended when not dispatched from a Node
+      event.target) || nodeRef.current.contains(
+      // @ts-expect-error returns `false` as intended when not dispatched from a Node
+      event.target);
+    }
+    if (!insideDOM && (disableReactTree || !insideReactTree)) {
+      onClickAway(event);
+    }
+  });
+
+  // Keep track of mouse/touch events that bubbled up through the portal.
+  const createHandleSynthetic = handlerName => event => {
+    syntheticEventRef.current = true;
+    const childrenPropsHandler = children.props[handlerName];
+    if (childrenPropsHandler) {
+      childrenPropsHandler(event);
+    }
+  };
+  const childrenProps = {
+    ref: handleRef
+  };
+  if (touchEvent !== false) {
+    childrenProps[touchEvent] = createHandleSynthetic(touchEvent);
+  }
+  React.useEffect(() => {
+    if (touchEvent !== false) {
+      const mappedTouchEvent = mapEventPropToEvent(touchEvent);
+      const doc = ownerDocument(nodeRef.current);
+      const handleTouchMove = () => {
+        movedRef.current = true;
+      };
+      doc.addEventListener(mappedTouchEvent, handleClickAway);
+      doc.addEventListener('touchmove', handleTouchMove);
+      return () => {
+        doc.removeEventListener(mappedTouchEvent, handleClickAway);
+        doc.removeEventListener('touchmove', handleTouchMove);
+      };
+    }
+    return undefined;
+  }, [handleClickAway, touchEvent]);
+  if (mouseEvent !== false) {
+    childrenProps[mouseEvent] = createHandleSynthetic(mouseEvent);
+  }
+  React.useEffect(() => {
+    if (mouseEvent !== false) {
+      const mappedMouseEvent = mapEventPropToEvent(mouseEvent);
+      const doc = ownerDocument(nodeRef.current);
+      doc.addEventListener(mappedMouseEvent, handleClickAway);
+      return () => {
+        doc.removeEventListener(mappedMouseEvent, handleClickAway);
+      };
+    }
+    return undefined;
+  }, [handleClickAway, mouseEvent]);
+  return /*#__PURE__*/React.cloneElement(children, childrenProps);
+}
+process.env.NODE_ENV !== "production" ? ClickAwayListener.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The wrapped element.
+   */
+  children: elementAcceptingRef.isRequired,
+  /**
+   * If `true`, the React tree is ignored and only the DOM tree is considered.
+   * This prop changes how portaled elements are handled.
+   * @default false
+   */
+  disableReactTree: PropTypes.bool,
+  /**
+   * The mouse event to listen to. You can disable the listener by providing `false`.
+   * @default 'onClick'
+   */
+  mouseEvent: PropTypes.oneOf(['onClick', 'onMouseDown', 'onMouseUp', 'onPointerDown', 'onPointerUp', false]),
+  /**
+   * Callback fired when a "click away" event is detected.
+   */
+  onClickAway: PropTypes.func.isRequired,
+  /**
+   * The touch event to listen to. You can disable the listener by providing `false`.
+   * @default 'onTouchEnd'
+   */
+  touchEvent: PropTypes.oneOf(['onTouchEnd', 'onTouchStart', false])
+} : void 0;
+if (process.env.NODE_ENV !== 'production') {
+  // eslint-disable-next-line
+  ClickAwayListener['propTypes' + ''] = exactProp(ClickAwayListener.propTypes);
+}
 
 const dividerClasses = generateUtilityClasses('MuiDivider', ['root', 'absolute', 'fullWidth', 'inset', 'middle', 'flexItem', 'light', 'vertical', 'withChildren', 'withChildrenVertical', 'textAlignRight', 'textAlignLeft', 'wrapper', 'wrapperVertical']);
 
@@ -63318,7 +64551,7 @@ const v6Colors = {
   textDisabled: true
 };
 const extendSxProp = internal_createExtendSxProp();
-const useUtilityClasses$x = ownerState => {
+const useUtilityClasses$w = ownerState => {
   const {
     align,
     gutterBottom,
@@ -63459,7 +64692,7 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, re
     variantMapping
   };
   const Component = component || (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) || 'span';
-  const classes = useUtilityClasses$x(ownerState);
+  const classes = useUtilityClasses$w(ownerState);
   return /*#__PURE__*/jsxRuntimeExports.jsx(TypographyRoot, {
     as: Component,
     ref: ref,
@@ -63574,7 +64807,7 @@ const overridesResolver$3 = (props, styles) => {
   } = props;
   return [styles.root, ownerState.dense && styles.dense, ownerState.divider && styles.divider, !ownerState.disableGutters && styles.gutters];
 };
-const useUtilityClasses$w = ownerState => {
+const useUtilityClasses$v = ownerState => {
   const {
     disabled,
     dense,
@@ -63734,7 +64967,7 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
     divider,
     disableGutters
   };
-  const classes = useUtilityClasses$w(props);
+  const classes = useUtilityClasses$v(props);
   const handleRef = useForkRef(menuItemRef, ref);
   let tabIndex;
   if (!props.disabled) {
@@ -63831,6 +65064,102 @@ process.env.NODE_ENV !== "production" ? MenuItem.propTypes /* remove-proptypes *
   tabIndex: PropTypes.number
 } : void 0;
 
+function SplitButton(props) {
+  var _a;
+  const {
+    options,
+    defaultSelected,
+    isChangeSelectedAndApplied,
+    onSubmit
+  } = props;
+  const anchorRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState(defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : 0);
+  const handleClick = () => {
+    onSubmit && onSubmit(selectedIndex);
+  };
+  const handleMenuItemClick = (_event, index) => {
+    setSelectedIndex(index);
+    isChangeSelectedAndApplied && onSubmit && onSubmit(index);
+    setOpen(false);
+  };
+  const handleToggle = () => {
+    setOpen(prevOpen => !prevOpen);
+  };
+  const handleClose = event => {
+    if (anchorRef.current && anchorRef.current.contains(event.target)) {
+      return;
+    }
+    setOpen(false);
+  };
+  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
+    children: [jsxRuntimeExports.jsxs(ButtonGroup, {
+      variant: "contained",
+      ref: anchorRef,
+      "aria-label": "Button group with a nested menu",
+      children: [jsxRuntimeExports.jsx(Button, {
+        onClick: handleClick,
+        children: (_a = options[selectedIndex]) === null || _a === void 0 ? void 0 : _a.label
+      }), jsxRuntimeExports.jsx(Button, {
+        size: "small",
+        "aria-controls": open ? 'split-button-menu' : undefined,
+        "aria-expanded": open ? 'true' : undefined,
+        "aria-label": "select merge strategy",
+        "aria-haspopup": "menu",
+        onClick: handleToggle,
+        children: jsxRuntimeExports.jsx(ArrowDropDownIcon$1, {})
+      })]
+    }), jsxRuntimeExports.jsx(Popper, {
+      sx: {
+        zIndex: 1
+      },
+      open: open,
+      anchorEl: anchorRef.current,
+      role: undefined,
+      transition: true,
+      disablePortal: true,
+      children: _ref => {
+        let {
+          TransitionProps,
+          placement
+        } = _ref;
+        return jsxRuntimeExports.jsx(Grow, Object.assign({}, TransitionProps, {
+          style: {
+            transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom'
+          },
+          children: jsxRuntimeExports.jsx(Paper, {
+            children: jsxRuntimeExports.jsx(ClickAwayListener, {
+              onClickAway: handleClose,
+              children: jsxRuntimeExports.jsx(MenuList, {
+                id: "split-button-menu",
+                autoFocusItem: true,
+                children: options.map((option, index) => jsxRuntimeExports.jsx(MenuItem, {
+                  disabled: option.isDisabled,
+                  selected: index === selectedIndex,
+                  onClick: event => handleMenuItemClick(event, index),
+                  children: option.label
+                }, option.value))
+              })
+            })
+          })
+        }));
+      }
+    })]
+  });
+}
+
+var ImageIcon = createSvgIcon(/*#__PURE__*/jsxRuntimeExports.jsx("path", {
+  d: "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2M8.5 13.5l2.5 3.01L14.5 12l4.5 6H5z"
+}), 'Image');
+
+var MenuIcon = createSvgIcon(/*#__PURE__*/jsxRuntimeExports.jsx("path", {
+  d: "M3 18h18v-2H3zm0-5h18v-2H3zm0-7v2h18V6z"
+}), 'Menu');
+
+var PictureAsPdfIcon = createSvgIcon(/*#__PURE__*/jsxRuntimeExports.jsx("path", {
+  d: "M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2m-8.5 7.5c0 .83-.67 1.5-1.5 1.5H9v2H7.5V7H10c.83 0 1.5.67 1.5 1.5zm5 2c0 .83-.67 1.5-1.5 1.5h-2.5V7H15c.83 0 1.5.67 1.5 1.5zm4-3H19v1h1.5V11H19v2h-1.5V7h3zM9 9.5h1v-1H9zM4 6H2v14c0 1.1.9 2 2 2h14v-2H4zm10 5.5h1v-3h-1z"
+}), 'PictureAsPdf');
+
 /*!
  * @kurkle/color v0.3.4
  * https://github.com/kurkle/color#readme
@@ -150625,7 +151954,7 @@ const DateRangePickerWrapper = props => {
       placement: openDirection === 'up' ? 'top-start' : 'bottom-start',
       popperRef: popperRef,
       "data-testid": "date-range-picker-popper",
-      children: jsxRuntimeExports.jsx(ClickAwayListener, {
+      children: jsxRuntimeExports.jsx(ClickAwayListener$1, {
         onClickAway: handleClosePopover,
         children: jsxRuntimeExports.jsx(Paper$1, {
           elevation: 8,
@@ -151679,7 +153008,7 @@ function useToolbarOwnerState() {
 }
 
 const _excluded$u = ["children", "className", "classes", "toolbarTitle", "hidden", "titleId", "classes", "landscapeDirection"];
-const useUtilityClasses$v = classes => {
+const useUtilityClasses$u = classes => {
   const slots = {
     root: ['root'],
     title: ['title'],
@@ -151758,7 +153087,7 @@ const PickersToolbar = /*#__PURE__*/React.forwardRef(function PickersToolbar(inP
     } = props,
     other = _objectWithoutPropertiesLoose$2(props, _excluded$u);
   const ownerState = useToolbarOwnerState();
-  const classes = useUtilityClasses$v(classesProp);
+  const classes = useUtilityClasses$u(classesProp);
   if (hidden) {
     return null;
   }
@@ -152231,7 +153560,7 @@ const usePickerActionsContext = () => {
 };
 
 const _excluded$t = ["toolbarFormat", "toolbarPlaceholder", "className", "classes"];
-const useUtilityClasses$u = classes => {
+const useUtilityClasses$t = classes => {
   const slots = {
     root: ['root'],
     title: ['title']
@@ -152285,7 +153614,7 @@ const DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePickerToolb
   } = usePickerContext();
   const translations = usePickerTranslations();
   const ownerState = useToolbarOwnerState();
-  const classes = useUtilityClasses$u(classesProp);
+  const classes = useUtilityClasses$t(classesProp);
   const dateText = React.useMemo(() => {
     if (!utils.isValid(value)) {
       return toolbarPlaceholder;
@@ -152543,7 +153872,7 @@ const getActiveElement = (root = document) => {
 const DEFAULT_DESKTOP_MODE_MEDIA_QUERY = '@media (pointer: fine)';
 
 const _excluded$s = ["PaperComponent", "ownerState", "children", "paperSlotProps", "paperClasses", "onPaperClick", "onPaperTouchStart"];
-const useUtilityClasses$t = classes => {
+const useUtilityClasses$s = classes => {
   const slots = {
     root: ['root'],
     paper: ['paper']
@@ -152778,7 +154107,7 @@ function PickerPopper(inProps) {
       });
     }
   }, [open, viewContainerRole, getCurrentViewMode]);
-  const classes = useUtilityClasses$t(classesProp);
+  const classes = useUtilityClasses$s(classesProp);
   const {
     ownerState: pickerOwnerState,
     rootRefObject
@@ -153624,692 +154953,6 @@ function getPickersLayoutUtilityClass(slot) {
 }
 const pickersLayoutClasses = generateUtilityClasses('MuiPickersLayout', ['root', 'landscape', 'contentWrapper', 'toolbar', 'actionBar', 'tabs', 'shortcuts']);
 
-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']);
-
-/**
- * @ignore - internal component.
- */
-const ButtonGroupContext = /*#__PURE__*/React.createContext({});
-if (process.env.NODE_ENV !== 'production') {
-  ButtonGroupContext.displayName = 'ButtonGroupContext';
-}
-
-/**
- * @ignore - internal component.
- */
-const ButtonGroupButtonContext = /*#__PURE__*/React.createContext(undefined);
-if (process.env.NODE_ENV !== 'production') {
-  ButtonGroupButtonContext.displayName = 'ButtonGroupButtonContext';
-}
-
-const useUtilityClasses$s = ownerState => {
-  const {
-    color,
-    disableElevation,
-    fullWidth,
-    size,
-    variant,
-    loading,
-    loadingPosition,
-    classes
-  } = ownerState;
-  const slots = {
-    root: ['root', loading && 'loading', variant, `${variant}${capitalize(color)}`, `size${capitalize(size)}`, `${variant}Size${capitalize(size)}`, `color${capitalize(color)}`, disableElevation && 'disableElevation', fullWidth && 'fullWidth', loading && `loadingPosition${capitalize(loadingPosition)}`],
-    startIcon: ['icon', 'startIcon', `iconSize${capitalize(size)}`],
-    endIcon: ['icon', 'endIcon', `iconSize${capitalize(size)}`],
-    loadingIndicator: ['loadingIndicator'],
-    loadingWrapper: ['loadingWrapper']
-  };
-  const composedClasses = composeClasses(slots, getButtonUtilityClass, classes);
-  return {
-    ...classes,
-    // forward the focused, disabled, etc. classes to the ButtonBase
-    ...composedClasses
-  };
-};
-const commonIconStyles = [{
-  props: {
-    size: 'small'
-  },
-  style: {
-    '& > *:nth-of-type(1)': {
-      fontSize: 18
-    }
-  }
-}, {
-  props: {
-    size: 'medium'
-  },
-  style: {
-    '& > *:nth-of-type(1)': {
-      fontSize: 20
-    }
-  }
-}, {
-  props: {
-    size: 'large'
-  },
-  style: {
-    '& > *:nth-of-type(1)': {
-      fontSize: 22
-    }
-  }
-}];
-const ButtonRoot = styled(ButtonBase, {
-  shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
-  name: 'MuiButton',
-  slot: 'Root',
-  overridesResolver: (props, styles) => {
-    const {
-      ownerState
-    } = props;
-    return [styles.root, styles[ownerState.variant], styles[`${ownerState.variant}${capitalize(ownerState.color)}`], styles[`size${capitalize(ownerState.size)}`], styles[`${ownerState.variant}Size${capitalize(ownerState.size)}`], ownerState.color === 'inherit' && styles.colorInherit, ownerState.disableElevation && styles.disableElevation, ownerState.fullWidth && styles.fullWidth, ownerState.loading && styles.loading];
-  }
-})(memoTheme(({
-  theme
-}) => {
-  const inheritContainedBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[800];
-  const inheritContainedHoverBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey.A100 : theme.palette.grey[700];
-  return {
-    ...theme.typography.button,
-    minWidth: 64,
-    padding: '6px 16px',
-    border: 0,
-    borderRadius: (theme.vars || theme).shape.borderRadius,
-    transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
-      duration: theme.transitions.duration.short
-    }),
-    '&:hover': {
-      textDecoration: 'none'
-    },
-    [`&.${buttonClasses.disabled}`]: {
-      color: (theme.vars || theme).palette.action.disabled
-    },
-    variants: [{
-      props: {
-        variant: 'contained'
-      },
-      style: {
-        color: `var(--variant-containedColor)`,
-        backgroundColor: `var(--variant-containedBg)`,
-        boxShadow: (theme.vars || theme).shadows[2],
-        '&:hover': {
-          boxShadow: (theme.vars || theme).shadows[4],
-          // Reset on touch devices, it doesn't add specificity
-          '@media (hover: none)': {
-            boxShadow: (theme.vars || theme).shadows[2]
-          }
-        },
-        '&:active': {
-          boxShadow: (theme.vars || theme).shadows[8]
-        },
-        [`&.${buttonClasses.focusVisible}`]: {
-          boxShadow: (theme.vars || theme).shadows[6]
-        },
-        [`&.${buttonClasses.disabled}`]: {
-          color: (theme.vars || theme).palette.action.disabled,
-          boxShadow: (theme.vars || theme).shadows[0],
-          backgroundColor: (theme.vars || theme).palette.action.disabledBackground
-        }
-      }
-    }, {
-      props: {
-        variant: 'outlined'
-      },
-      style: {
-        padding: '5px 15px',
-        border: '1px solid currentColor',
-        borderColor: `var(--variant-outlinedBorder, currentColor)`,
-        backgroundColor: `var(--variant-outlinedBg)`,
-        color: `var(--variant-outlinedColor)`,
-        [`&.${buttonClasses.disabled}`]: {
-          border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`
-        }
-      }
-    }, {
-      props: {
-        variant: 'text'
-      },
-      style: {
-        padding: '6px 8px',
-        color: `var(--variant-textColor)`,
-        backgroundColor: `var(--variant-textBg)`
-      }
-    }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
-      props: {
-        color
-      },
-      style: {
-        '--variant-textColor': (theme.vars || theme).palette[color].main,
-        '--variant-outlinedColor': (theme.vars || theme).palette[color].main,
-        '--variant-outlinedBorder': theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / 0.5)` : alpha$1(theme.palette[color].main, 0.5),
-        '--variant-containedColor': (theme.vars || theme).palette[color].contrastText,
-        '--variant-containedBg': (theme.vars || theme).palette[color].main,
-        '@media (hover: hover)': {
-          '&:hover': {
-            '--variant-containedBg': (theme.vars || theme).palette[color].dark,
-            '--variant-textBg': theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha$1(theme.palette[color].main, theme.palette.action.hoverOpacity),
-            '--variant-outlinedBorder': (theme.vars || theme).palette[color].main,
-            '--variant-outlinedBg': theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha$1(theme.palette[color].main, theme.palette.action.hoverOpacity)
-          }
-        }
-      }
-    })), {
-      props: {
-        color: 'inherit'
-      },
-      style: {
-        color: 'inherit',
-        borderColor: 'currentColor',
-        '--variant-containedBg': theme.vars ? theme.vars.palette.Button.inheritContainedBg : inheritContainedBackgroundColor,
-        '@media (hover: hover)': {
-          '&:hover': {
-            '--variant-containedBg': theme.vars ? theme.vars.palette.Button.inheritContainedHoverBg : inheritContainedHoverBackgroundColor,
-            '--variant-textBg': theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha$1(theme.palette.text.primary, theme.palette.action.hoverOpacity),
-            '--variant-outlinedBg': theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha$1(theme.palette.text.primary, theme.palette.action.hoverOpacity)
-          }
-        }
-      }
-    }, {
-      props: {
-        size: 'small',
-        variant: 'text'
-      },
-      style: {
-        padding: '4px 5px',
-        fontSize: theme.typography.pxToRem(13)
-      }
-    }, {
-      props: {
-        size: 'large',
-        variant: 'text'
-      },
-      style: {
-        padding: '8px 11px',
-        fontSize: theme.typography.pxToRem(15)
-      }
-    }, {
-      props: {
-        size: 'small',
-        variant: 'outlined'
-      },
-      style: {
-        padding: '3px 9px',
-        fontSize: theme.typography.pxToRem(13)
-      }
-    }, {
-      props: {
-        size: 'large',
-        variant: 'outlined'
-      },
-      style: {
-        padding: '7px 21px',
-        fontSize: theme.typography.pxToRem(15)
-      }
-    }, {
-      props: {
-        size: 'small',
-        variant: 'contained'
-      },
-      style: {
-        padding: '4px 10px',
-        fontSize: theme.typography.pxToRem(13)
-      }
-    }, {
-      props: {
-        size: 'large',
-        variant: 'contained'
-      },
-      style: {
-        padding: '8px 22px',
-        fontSize: theme.typography.pxToRem(15)
-      }
-    }, {
-      props: {
-        disableElevation: true
-      },
-      style: {
-        boxShadow: 'none',
-        '&:hover': {
-          boxShadow: 'none'
-        },
-        [`&.${buttonClasses.focusVisible}`]: {
-          boxShadow: 'none'
-        },
-        '&:active': {
-          boxShadow: 'none'
-        },
-        [`&.${buttonClasses.disabled}`]: {
-          boxShadow: 'none'
-        }
-      }
-    }, {
-      props: {
-        fullWidth: true
-      },
-      style: {
-        width: '100%'
-      }
-    }, {
-      props: {
-        loadingPosition: 'center'
-      },
-      style: {
-        transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
-          duration: theme.transitions.duration.short
-        }),
-        [`&.${buttonClasses.loading}`]: {
-          color: 'transparent'
-        }
-      }
-    }]
-  };
-}));
-const ButtonStartIcon = styled('span', {
-  name: 'MuiButton',
-  slot: 'StartIcon',
-  overridesResolver: (props, styles) => {
-    const {
-      ownerState
-    } = props;
-    return [styles.startIcon, ownerState.loading && styles.startIconLoadingStart, styles[`iconSize${capitalize(ownerState.size)}`]];
-  }
-})(({
-  theme
-}) => ({
-  display: 'inherit',
-  marginRight: 8,
-  marginLeft: -4,
-  variants: [{
-    props: {
-      size: 'small'
-    },
-    style: {
-      marginLeft: -2
-    }
-  }, {
-    props: {
-      loadingPosition: 'start',
-      loading: true
-    },
-    style: {
-      transition: theme.transitions.create(['opacity'], {
-        duration: theme.transitions.duration.short
-      }),
-      opacity: 0
-    }
-  }, {
-    props: {
-      loadingPosition: 'start',
-      loading: true,
-      fullWidth: true
-    },
-    style: {
-      marginRight: -8
-    }
-  }, ...commonIconStyles]
-}));
-const ButtonEndIcon = styled('span', {
-  name: 'MuiButton',
-  slot: 'EndIcon',
-  overridesResolver: (props, styles) => {
-    const {
-      ownerState
-    } = props;
-    return [styles.endIcon, ownerState.loading && styles.endIconLoadingEnd, styles[`iconSize${capitalize(ownerState.size)}`]];
-  }
-})(({
-  theme
-}) => ({
-  display: 'inherit',
-  marginRight: -4,
-  marginLeft: 8,
-  variants: [{
-    props: {
-      size: 'small'
-    },
-    style: {
-      marginRight: -2
-    }
-  }, {
-    props: {
-      loadingPosition: 'end',
-      loading: true
-    },
-    style: {
-      transition: theme.transitions.create(['opacity'], {
-        duration: theme.transitions.duration.short
-      }),
-      opacity: 0
-    }
-  }, {
-    props: {
-      loadingPosition: 'end',
-      loading: true,
-      fullWidth: true
-    },
-    style: {
-      marginLeft: -8
-    }
-  }, ...commonIconStyles]
-}));
-const ButtonLoadingIndicator = styled('span', {
-  name: 'MuiButton',
-  slot: 'LoadingIndicator'
-})(({
-  theme
-}) => ({
-  display: 'none',
-  position: 'absolute',
-  visibility: 'visible',
-  variants: [{
-    props: {
-      loading: true
-    },
-    style: {
-      display: 'flex'
-    }
-  }, {
-    props: {
-      loadingPosition: 'start'
-    },
-    style: {
-      left: 14
-    }
-  }, {
-    props: {
-      loadingPosition: 'start',
-      size: 'small'
-    },
-    style: {
-      left: 10
-    }
-  }, {
-    props: {
-      variant: 'text',
-      loadingPosition: 'start'
-    },
-    style: {
-      left: 6
-    }
-  }, {
-    props: {
-      loadingPosition: 'center'
-    },
-    style: {
-      left: '50%',
-      transform: 'translate(-50%)',
-      color: (theme.vars || theme).palette.action.disabled
-    }
-  }, {
-    props: {
-      loadingPosition: 'end'
-    },
-    style: {
-      right: 14
-    }
-  }, {
-    props: {
-      loadingPosition: 'end',
-      size: 'small'
-    },
-    style: {
-      right: 10
-    }
-  }, {
-    props: {
-      variant: 'text',
-      loadingPosition: 'end'
-    },
-    style: {
-      right: 6
-    }
-  }, {
-    props: {
-      loadingPosition: 'start',
-      fullWidth: true
-    },
-    style: {
-      position: 'relative',
-      left: -10
-    }
-  }, {
-    props: {
-      loadingPosition: 'end',
-      fullWidth: true
-    },
-    style: {
-      position: 'relative',
-      right: -10
-    }
-  }]
-}));
-const ButtonLoadingIconPlaceholder = styled('span', {
-  name: 'MuiButton',
-  slot: 'LoadingIconPlaceholder'
-})({
-  display: 'inline-block',
-  width: '1em',
-  height: '1em'
-});
-const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
-  // props priority: `inProps` > `contextProps` > `themeDefaultProps`
-  const contextProps = React.useContext(ButtonGroupContext);
-  const buttonGroupButtonContextPositionClassName = React.useContext(ButtonGroupButtonContext);
-  const resolvedProps = resolveProps(contextProps, inProps);
-  const props = useDefaultProps({
-    props: resolvedProps,
-    name: 'MuiButton'
-  });
-  const {
-    children,
-    color = 'primary',
-    component = 'button',
-    className,
-    disabled = false,
-    disableElevation = false,
-    disableFocusRipple = false,
-    endIcon: endIconProp,
-    focusVisibleClassName,
-    fullWidth = false,
-    id: idProp,
-    loading = null,
-    loadingIndicator: loadingIndicatorProp,
-    loadingPosition = 'center',
-    size = 'medium',
-    startIcon: startIconProp,
-    type,
-    variant = 'text',
-    ...other
-  } = props;
-  const loadingId = useId(idProp);
-  const loadingIndicator = loadingIndicatorProp ?? /*#__PURE__*/jsxRuntimeExports.jsx(CircularProgress$1, {
-    "aria-labelledby": loadingId,
-    color: "inherit",
-    size: 16
-  });
-  const ownerState = {
-    ...props,
-    color,
-    component,
-    disabled,
-    disableElevation,
-    disableFocusRipple,
-    fullWidth,
-    loading,
-    loadingIndicator,
-    loadingPosition,
-    size,
-    type,
-    variant
-  };
-  const classes = useUtilityClasses$s(ownerState);
-  const startIcon = (startIconProp || loading && loadingPosition === 'start') && /*#__PURE__*/jsxRuntimeExports.jsx(ButtonStartIcon, {
-    className: classes.startIcon,
-    ownerState: ownerState,
-    children: startIconProp || /*#__PURE__*/jsxRuntimeExports.jsx(ButtonLoadingIconPlaceholder, {
-      className: classes.loadingIconPlaceholder,
-      ownerState: ownerState
-    })
-  });
-  const endIcon = (endIconProp || loading && loadingPosition === 'end') && /*#__PURE__*/jsxRuntimeExports.jsx(ButtonEndIcon, {
-    className: classes.endIcon,
-    ownerState: ownerState,
-    children: endIconProp || /*#__PURE__*/jsxRuntimeExports.jsx(ButtonLoadingIconPlaceholder, {
-      className: classes.loadingIconPlaceholder,
-      ownerState: ownerState
-    })
-  });
-  const positionClassName = buttonGroupButtonContextPositionClassName || '';
-  const loader = typeof loading === 'boolean' ?
-  /*#__PURE__*/
-  // use plain HTML span to minimize the runtime overhead
-  jsxRuntimeExports.jsx("span", {
-    className: classes.loadingWrapper,
-    style: {
-      display: 'contents'
-    },
-    children: loading && /*#__PURE__*/jsxRuntimeExports.jsx(ButtonLoadingIndicator, {
-      className: classes.loadingIndicator,
-      ownerState: ownerState,
-      children: loadingIndicator
-    })
-  }) : null;
-  return /*#__PURE__*/jsxRuntimeExports.jsxs(ButtonRoot, {
-    ownerState: ownerState,
-    className: clsx(contextProps.className, classes.root, className, positionClassName),
-    component: component,
-    disabled: disabled || loading,
-    focusRipple: !disableFocusRipple,
-    focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
-    ref: ref,
-    type: type,
-    id: loading ? loadingId : idProp,
-    ...other,
-    classes: classes,
-    children: [startIcon, loadingPosition !== 'end' && loader, children, loadingPosition === 'end' && loader, endIcon]
-  });
-});
-process.env.NODE_ENV !== "production" ? Button.propTypes /* remove-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 /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['inherit', 'primary', 'secondary', 'success', 'error', 'info', '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  keyboard focus ripple is disabled.
-   * @default false
-   */
-  disableFocusRipple: PropTypes.bool,
-  /**
-   * If `true`, the ripple effect is disabled.
-   *
-   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
-   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
-   * @default false
-   */
-  disableRipple: PropTypes.bool,
-  /**
-   * Element placed after the children.
-   */
-  endIcon: PropTypes.node,
-  /**
-   * @ignore
-   */
-  focusVisibleClassName: PropTypes.string,
-  /**
-   * If `true`, the button will take up the full width of its container.
-   * @default false
-   */
-  fullWidth: PropTypes.bool,
-  /**
-   * The URL to link to when the button is clicked.
-   * If defined, an `a` element will be used as the root node.
-   */
-  href: PropTypes.string,
-  /**
-   * @ignore
-   */
-  id: PropTypes.string,
-  /**
-   * If `true`, the loading indicator is visible and the button is disabled.
-   * If `true | false`, the loading wrapper is always rendered before the children to prevent [Google Translation Crash](https://github.com/mui/material-ui/issues/27853).
-   * @default null
-   */
-  loading: PropTypes.bool,
-  /**
-   * Element placed before the children if the button is in loading state.
-   * The node should contain an element with `role="progressbar"` with an accessible name.
-   * By default, it renders a `CircularProgress` that is labeled by the button itself.
-   * @default <CircularProgress color="inherit" size={16} />
-   */
-  loadingIndicator: PropTypes.node,
-  /**
-   * The loading indicator can be positioned on the start, end, or the center of the button.
-   * @default 'center'
-   */
-  loadingPosition: PropTypes.oneOf(['center', 'end', 'start']),
-  /**
-   * The size of the component.
-   * `small` is equivalent to the dense button styling.
-   * @default 'medium'
-   */
-  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['small', 'medium', 'large']), PropTypes.string]),
-  /**
-   * Element placed before the children.
-   */
-  startIcon: PropTypes.node,
-  /**
-   * 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]),
-  /**
-   * @ignore
-   */
-  type: PropTypes.oneOfType([PropTypes.oneOf(['button', 'reset', 'submit']), PropTypes.string]),
-  /**
-   * The variant to use.
-   * @default 'text'
-   */
-  variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['contained', 'outlined', 'text']), PropTypes.string])
-} : void 0;
-
 function getDialogActionsUtilityClass(slot) {
   return generateUtilityClass('MuiDialogActions', slot);
 }
@@ -206515,4 +207158,4 @@ var index_es = /*#__PURE__*/Object.freeze({
     vectorsRatio: vectorsRatio
 });
 
-export { Container$n as Action, AdvancedSearch, AppContext, AppProvider, AsyncAutocomplete, AwingContext, BarLineChart, BoxResizableSplit, ButtonDateRangePicker, ButtonSelect, CircularProgress, DrawerBase as ClassicBaseDrawer, DrawerWrapper$1 as ClassicDrawer, CloseAction, ContentHeader, ControlPanels, CopyButton, CronTab, DataForm, DataGrid, DataGridGroup, DataGridSortType, InputFactory as DataInput, DateAutoFormat, Container$g as DatePicker, DateRangePicker$1 as DateRangePicker, Container$h as DateRangePickerOld, EnhancedDialog as DeprecatedEnhancedDialog, CreateDirectory as DirectoryForm, PermissionWarpper as DirectoryPermission, DirectoryRoot, DirectorySystem, DirectoryTree, DrawerWrapper as Drawer, DrawerNavigate, DrawerStateEnum, Container$m as EnhancedAutoComplete, EnumFieldInputType, EnumSelectedPlaceType, FIELD_TYPE, FilterNotification, FilterOperationType, FilterTreeView, FooterContainer as Footer, GoogleMap, GroupSystem, GroupTable, HierarchyTree, I18nProvider, INT_NUMBER_LIMIT, Container as Layout, Notifications as LayoutNotifications, LogicExpressionInput as LogicExpression, LogicalOperatorType, MemoWrap, MonacoEditor$1 as MonacoEditor, MultipleChoice, MultipleHierarchicalChoice, NoData, NotificationConfig, NotificationFilter as NotificationObjectFilter, NumberFormat, AsynchronousAutocomplete as OldAsyncAutoComplete, Page, PageManagement, Pagination, ParamConfigurationInputs, PieChart, PlaceFilter, RoleSystem, RoleTagSystem, SchemaSystem, SearchBox, Sharing as SharingSystem, ShowTreeItem, SimpleTreeItemWrapper, SortEnumType, Sortable, SortableTree, StatisticsCommon as Statistics, SubscriptionConfig, TIMELINE_TYPE, TYPE_CHART, TYPE_FILTERS, TabLabel, TableCellEditable$1 as TableCellEditable, TableEditable$1 as TableEditable, TableEditableBody$1 as TableEditableBody, TableEditable as TableEditableCollapsible, TableEditableBody as TableEditableCollapsibleBody, TableCellEditable as TableEditableCollapsibleCell, TableHeader as TableEditableCollapsibleTableHeader, TopBarActions as TableEditableCollapsibleTopBarActions, TableHeader$1 as TableHeader, TablePaginationActions, Template as TemplateConfig, ThemeProvider, ToolbarLayout as Toolbar, TopBarActions$1 as TopBarActions, TreeItemWithAction, User as UserSystem, WMAPEcalculator, WorkflowFeature as WorkflowSystem, WorkspaceType, Wrapper, arrayIsNotEmptyValid, calculateValue, calculatorDirectoryIdRoot, changeToAlias, checkValidMacAddress, checkValidStringListAP, checkValidUrl, colorValid, containsOnlyDigits, convertArrayFiltersToCondition, convertArrayToObject, convertDataSetPattern, convertDateTimeToTimestamp, convertFilterExpressionToCondition, convertFormulaToBinaryTree, convertTimeLine, convertTimelineToDateTime, convertTimestampToDateTime, convertToPostfix, darkTheme, dateRangeValid, dateTimeToString, dateToString, dateToStringDDMMYYYY, dateValid, download, downloadWithDataSet, emailValid, fillMissingDates, flattenTree, formatChartNumber, formatJSON$1 as formatJSON, formatNumberByLocale, formatNumberWithLanguage, generateUUID, getAllStringsBetweenBraces, getCookie, getDefaultValues, getGUID, getPrecedence, getQueryVariable, getRandomKey, getRoutePath, getStartOfDay, getToday, handleExportExcel, i18n as i18nLib, isOperand, isOperator, lightTheme, nameExportStandard, notNullValid, numberNotNullValid, numberOnlyValid, numberPercentageNotNullValid, off, offlinePaginate, parseJSON, passwordValid, positiveNumberNotNullValid, pub, replaceFieldsValue, roundDecimalNumber, setObject, stringNotNullValid, stringNullableValid, sub, textValidation, timestampToStringDDMMYYYY, toCapitalize, tokenize, updateGUID, updateObjectFields, urlValid, useAppHelper, useAwing, useDrawer, useGetContext$8 as useGetContext, useGetData, usePath, validateNumber };
+export { Container$n as Action, AdvancedSearch, AppContext, AppProvider, AsyncAutocomplete, AwingContext, BarLineChart, BoxResizableSplit, ButtonDateRangePicker, ButtonSelect, SplitButton as ButtonSplit, CircularProgress, DrawerBase as ClassicBaseDrawer, DrawerWrapper$1 as ClassicDrawer, CloseAction, ContentHeader, ControlPanels, CopyButton, CronTab, DataForm, DataGrid, DataGridGroup, DataGridSortType, InputFactory as DataInput, DateAutoFormat, Container$g as DatePicker, DateRangePicker$1 as DateRangePicker, Container$h as DateRangePickerOld, EnhancedDialog as DeprecatedEnhancedDialog, CreateDirectory as DirectoryForm, PermissionWarpper as DirectoryPermission, DirectoryRoot, DirectorySystem, DirectoryTree, DrawerWrapper as Drawer, DrawerNavigate, DrawerStateEnum, Container$m as EnhancedAutoComplete, EnumFieldInputType, EnumSelectedPlaceType, FIELD_TYPE, FilterNotification, FilterOperationType, FilterTreeView, FooterContainer as Footer, GoogleMap, GroupSystem, GroupTable, HierarchyTree, I18nProvider, INT_NUMBER_LIMIT, Container as Layout, Notifications as LayoutNotifications, LogicExpressionInput as LogicExpression, LogicalOperatorType, MemoWrap, MonacoEditor$1 as MonacoEditor, MultipleChoice, MultipleHierarchicalChoice, NoData, NotificationConfig, NotificationFilter as NotificationObjectFilter, NumberFormat, AsynchronousAutocomplete as OldAsyncAutoComplete, Page, PageManagement, Pagination, ParamConfigurationInputs, PieChart, PlaceFilter, RoleSystem, RoleTagSystem, SchemaSystem, SearchBox, Sharing as SharingSystem, ShowTreeItem, SimpleTreeItemWrapper, SortEnumType, Sortable, SortableTree, StatisticsCommon as Statistics, SubscriptionConfig, TIMELINE_TYPE, TYPE_CHART, TYPE_FILTERS, TabLabel, TableCellEditable$1 as TableCellEditable, TableEditable$1 as TableEditable, TableEditableBody$1 as TableEditableBody, TableEditable as TableEditableCollapsible, TableEditableBody as TableEditableCollapsibleBody, TableCellEditable as TableEditableCollapsibleCell, TableHeader as TableEditableCollapsibleTableHeader, TopBarActions as TableEditableCollapsibleTopBarActions, TableHeader$1 as TableHeader, TablePaginationActions, Template as TemplateConfig, ThemeProvider, ToolbarLayout as Toolbar, TopBarActions$1 as TopBarActions, TreeItemWithAction, User as UserSystem, WMAPEcalculator, WorkflowFeature as WorkflowSystem, WorkspaceType, Wrapper, arrayIsNotEmptyValid, calculateValue, calculatorDirectoryIdRoot, changeToAlias, checkValidMacAddress, checkValidStringListAP, checkValidUrl, colorValid, containsOnlyDigits, convertArrayFiltersToCondition, convertArrayToObject, convertDataSetPattern, convertDateTimeToTimestamp, convertFilterExpressionToCondition, convertFormulaToBinaryTree, convertTimeLine, convertTimelineToDateTime, convertTimestampToDateTime, convertToPostfix, darkTheme, dateRangeValid, dateTimeToString, dateToString, dateToStringDDMMYYYY, dateValid, download, downloadWithDataSet, emailValid, fillMissingDates, flattenTree, formatChartNumber, formatJSON$1 as formatJSON, formatNumberByLocale, formatNumberWithLanguage, generateUUID, getAllStringsBetweenBraces, getCookie, getDefaultValues, getGUID, getPrecedence, getQueryVariable, getRandomKey, getRoutePath, getStartOfDay, getToday, handleExportExcel, i18n as i18nLib, isOperand, isOperator, lightTheme, nameExportStandard, notNullValid, numberNotNullValid, numberOnlyValid, numberPercentageNotNullValid, off, offlinePaginate, parseJSON, passwordValid, positiveNumberNotNullValid, pub, replaceFieldsValue, roundDecimalNumber, setObject, stringNotNullValid, stringNullableValid, sub, textValidation, timestampToStringDDMMYYYY, toCapitalize, tokenize, updateGUID, updateObjectFields, urlValid, useAppHelper, useAwing, useDrawer, useGetContext$8 as useGetContext, useGetData, usePath, validateNumber };