@groupeactual/ui-kit 0.4.21 → 0.4.23

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { useLayoutEffect, forwardRef, useContext, createElement, createContext, Fragment, useRef, Children, isValidElement, cloneElement, useState, useEffect, useMemo } from 'react';
 
@@ -4612,6 +4612,17 @@ function useId(idOverride) {
   return useGlobalId(idOverride);
 }
 
+function unsupportedProp(props, propName, componentName, location, propFullName) {
+  if (process.env.NODE_ENV === 'production') {
+    return null;
+  }
+  const propFullNameSafe = propFullName || propName;
+  if (typeof props[propName] !== 'undefined') {
+    return new Error(`The prop \`${propFullNameSafe}\` is not supported. Please remove it.`);
+  }
+  return null;
+}
+
 /* eslint-disable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
 function useControlled({
   controlled,
@@ -5912,7 +5923,7 @@ const styleFunctionSx = unstable_createStyleFunctionSx();
 styleFunctionSx.filterProps = ['sx'];
 var styleFunctionSx$1 = styleFunctionSx;
 
-const _excluded$L = ["sx"];
+const _excluded$R = ["sx"];
 const splitProps = props => {
   var _props$theme$unstable, _props$theme;
   const result = {
@@ -5933,7 +5944,7 @@ function extendSxProp(props) {
   const {
       sx: inSx
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$L);
+    other = _objectWithoutPropertiesLoose(props, _excluded$R);
   const {
     systemProps,
     otherProps
@@ -5959,7 +5970,7 @@ function extendSxProp(props) {
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
-const _excluded$K = ["values", "unit", "step"];
+const _excluded$Q = ["values", "unit", "step"];
 const sortBreakpointsValues = values => {
   const breakpointsAsArray = Object.keys(values).map(key => ({
     key,
@@ -5994,7 +6005,7 @@ function createBreakpoints(breakpoints) {
       unit = 'px',
       step = 5
     } = breakpoints,
-    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$K);
+    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$Q);
   const sortedValues = sortBreakpointsValues(values);
   const keys = Object.keys(sortedValues);
   function up(key) {
@@ -6073,7 +6084,7 @@ function createSpacing(spacingInput = 8) {
   return spacing;
 }
 
-const _excluded$J = ["breakpoints", "palette", "spacing", "shape"];
+const _excluded$P = ["breakpoints", "palette", "spacing", "shape"];
 function createTheme$1(options = {}, ...args) {
   const {
       breakpoints: breakpointsInput = {},
@@ -6081,7 +6092,7 @@ function createTheme$1(options = {}, ...args) {
       spacing: spacingInput,
       shape: shapeInput = {}
     } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded$J);
+    other = _objectWithoutPropertiesLoose(options, _excluded$P);
   const breakpoints = createBreakpoints(breakpointsInput);
   const spacing = createSpacing(spacingInput);
   let muiTheme = deepmerge({
@@ -6192,7 +6203,7 @@ function useTheme$1(defaultTheme = systemDefaultTheme$1) {
   return useTheme$2(defaultTheme);
 }
 
-const _excluded$I = ["className", "component"];
+const _excluded$O = ["className", "component"];
 function createBox(options = {}) {
   const {
     defaultTheme,
@@ -6209,7 +6220,7 @@ function createBox(options = {}) {
         className,
         component = 'div'
       } = _extendSxProp,
-      other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$I);
+      other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$O);
     return /*#__PURE__*/jsx(BoxRoot, _extends({
       as: component,
       ref: ref,
@@ -6242,7 +6253,7 @@ process.env.NODE_ENV !== "production" ? Box$2.propTypes /* remove-proptypes */ =
 } : void 0;
 var Box$3 = Box$2;
 
-const _excluded$H = ["variant"];
+const _excluded$N = ["variant"];
 function isEmpty$3(string) {
   return string.length === 0;
 }
@@ -6256,7 +6267,7 @@ function propsToClassKey(props) {
   const {
       variant
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$H);
+    other = _objectWithoutPropertiesLoose(props, _excluded$N);
   let classKey = variant || '';
   Object.keys(other).sort().forEach(key => {
     if (key === 'color') {
@@ -6268,7 +6279,7 @@ function propsToClassKey(props) {
   return classKey;
 }
 
-const _excluded$G = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
+const _excluded$M = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
   _excluded2$2 = ["theme"],
   _excluded3 = ["theme"];
 function isEmpty$2(obj) {
@@ -6355,7 +6366,7 @@ function createStyled(input = {}) {
         skipSx: inputSkipSx,
         overridesResolver
       } = inputOptions,
-      options = _objectWithoutPropertiesLoose(inputOptions, _excluded$G);
+      options = _objectWithoutPropertiesLoose(inputOptions, _excluded$M);
 
     // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
     const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver : componentSlot && componentSlot !== 'Root' || false;
@@ -6787,7 +6798,7 @@ function createMixins(breakpoints, mixins) {
   }, mixins);
 }
 
-const _excluded$F = ["mode", "contrastThreshold", "tonalOffset"];
+const _excluded$L = ["mode", "contrastThreshold", "tonalOffset"];
 const light = {
   // The colors used to style the text.
   text: {
@@ -6956,7 +6967,7 @@ function createPalette(palette) {
       contrastThreshold = 3,
       tonalOffset = 0.2
     } = palette,
-    other = _objectWithoutPropertiesLoose(palette, _excluded$F);
+    other = _objectWithoutPropertiesLoose(palette, _excluded$L);
   const primary = palette.primary || getDefaultPrimary(mode);
   const secondary = palette.secondary || getDefaultSecondary(mode);
   const error = palette.error || getDefaultError(mode);
@@ -7080,7 +7091,7 @@ const theme2 = createTheme({ palette: {
   return paletteOutput;
 }
 
-const _excluded$E = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
+const _excluded$K = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
 function round(value) {
   return Math.round(value * 1e5) / 1e5;
 }
@@ -7111,7 +7122,7 @@ function createTypography(palette, typography) {
       allVariants,
       pxToRem: pxToRem2
     } = _ref,
-    other = _objectWithoutPropertiesLoose(_ref, _excluded$E);
+    other = _objectWithoutPropertiesLoose(_ref, _excluded$K);
   if (process.env.NODE_ENV !== 'production') {
     if (typeof fontSize !== 'number') {
       console.error('MUI: `fontSize` is required to be a number.');
@@ -7171,7 +7182,7 @@ function createShadow(...px) {
 const shadows = ['none', createShadow(0, 2, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0), createShadow(0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0), createShadow(0, 3, 3, -2, 0, 3, 4, 0, 0, 1, 8, 0), createShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0), createShadow(0, 3, 5, -1, 0, 5, 8, 0, 0, 1, 14, 0), createShadow(0, 3, 5, -1, 0, 6, 10, 0, 0, 1, 18, 0), createShadow(0, 4, 5, -2, 0, 7, 10, 1, 0, 2, 16, 1), createShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2), createShadow(0, 5, 6, -3, 0, 9, 12, 1, 0, 3, 16, 2), createShadow(0, 6, 6, -3, 0, 10, 14, 1, 0, 4, 18, 3), createShadow(0, 6, 7, -4, 0, 11, 15, 1, 0, 4, 20, 3), createShadow(0, 7, 8, -4, 0, 12, 17, 2, 0, 5, 22, 4), createShadow(0, 7, 8, -4, 0, 13, 19, 2, 0, 5, 24, 4), createShadow(0, 7, 9, -4, 0, 14, 21, 2, 0, 5, 26, 4), createShadow(0, 8, 9, -5, 0, 15, 22, 2, 0, 6, 28, 5), createShadow(0, 8, 10, -5, 0, 16, 24, 2, 0, 6, 30, 5), createShadow(0, 8, 11, -5, 0, 17, 26, 2, 0, 6, 32, 5), createShadow(0, 9, 11, -5, 0, 18, 28, 2, 0, 7, 34, 6), createShadow(0, 9, 12, -6, 0, 19, 29, 2, 0, 7, 36, 6), createShadow(0, 10, 13, -6, 0, 20, 31, 3, 0, 8, 38, 7), createShadow(0, 10, 13, -6, 0, 21, 33, 3, 0, 8, 40, 7), createShadow(0, 10, 14, -6, 0, 22, 35, 3, 0, 8, 42, 7), createShadow(0, 11, 14, -7, 0, 23, 36, 3, 0, 9, 44, 8), createShadow(0, 11, 15, -7, 0, 24, 38, 3, 0, 9, 46, 8)];
 var shadows$1 = shadows;
 
-const _excluded$D = ["duration", "easing", "delay"];
+const _excluded$J = ["duration", "easing", "delay"];
 // Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
 // to learn the context in which each easing should be used.
 const easing = {
@@ -7222,7 +7233,7 @@ function createTransitions(inputTransitions) {
         easing: easingOption = mergedEasing.easeInOut,
         delay = 0
       } = options,
-      other = _objectWithoutPropertiesLoose(options, _excluded$D);
+      other = _objectWithoutPropertiesLoose(options, _excluded$J);
     if (process.env.NODE_ENV !== 'production') {
       const isString = value => typeof value === 'string';
       // IE11 support, replace with Number.isNaN
@@ -7269,7 +7280,7 @@ const zIndex = {
 };
 var zIndex$1 = zIndex;
 
-const _excluded$C = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
+const _excluded$I = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
 function createTheme(options = {}, ...args) {
   const {
       mixins: mixinsInput = {},
@@ -7277,7 +7288,7 @@ function createTheme(options = {}, ...args) {
       transitions: transitionsInput = {},
       typography: typographyInput = {}
     } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded$C);
+    other = _objectWithoutPropertiesLoose(options, _excluded$I);
   if (options.vars) {
     throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`vars\` is a private field used for CSS variables support.
 Please use another name.` : formatMuiErrorMessage(18));
@@ -7519,7 +7530,7 @@ function mergeSlotProps(parameters) {
   };
 }
 
-const _excluded$B = ["elementType", "externalSlotProps", "ownerState"];
+const _excluded$H = ["elementType", "externalSlotProps", "ownerState"];
 /**
  * Builds the props to be passed into the slot of an unstyled component.
  * It merges the internal props of the component with the ones supplied by the user, allowing to customize the behavior.
@@ -7534,7 +7545,7 @@ function useSlotProps(parameters) {
       externalSlotProps,
       ownerState
     } = parameters,
-    rest = _objectWithoutPropertiesLoose(parameters, _excluded$B);
+    rest = _objectWithoutPropertiesLoose(parameters, _excluded$H);
   const resolvedComponentsProps = resolveComponentProps(externalSlotProps, ownerState);
   const {
     props: mergedProps,
@@ -39008,8 +39019,8 @@ function getModalUtilityClass(slot) {
 }
 generateUtilityClasses('MuiModal', ['root', 'hidden']);
 
-const _excluded$A = ["children", "classes", "closeAfterTransition", "component", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "onTransitionEnter", "onTransitionExited", "slotProps", "slots"];
-const useUtilityClasses$t = ownerState => {
+const _excluded$G = ["children", "classes", "closeAfterTransition", "component", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "onTransitionEnter", "onTransitionExited", "slotProps", "slots"];
+const useUtilityClasses$y = ownerState => {
   const {
     open,
     exited,
@@ -39073,7 +39084,7 @@ const ModalUnstyled = /*#__PURE__*/React.forwardRef(function ModalUnstyled(props
       slotProps = {},
       slots = {}
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$A);
+    other = _objectWithoutPropertiesLoose(props, _excluded$G);
   const [exited, setExited] = React.useState(!open);
   const modal = React.useRef({});
   const mountNodeRef = React.useRef(null);
@@ -39144,7 +39155,7 @@ const ModalUnstyled = /*#__PURE__*/React.forwardRef(function ModalUnstyled(props
     hideBackdrop,
     keepMounted
   });
-  const classes = useUtilityClasses$t(ownerState);
+  const classes = useUtilityClasses$y(ownerState);
   const handleEnter = () => {
     setExited(false);
     if (onTransitionEnter) {
@@ -39370,7 +39381,7 @@ process.env.NODE_ENV !== "production" ? ModalUnstyled.propTypes /* remove-propty
 } : void 0;
 var ModalUnstyled$1 = ModalUnstyled;
 
-const _excluded$z = ["onChange", "maxRows", "minRows", "style", "value"];
+const _excluded$F = ["onChange", "maxRows", "minRows", "style", "value"];
 function getStyleValue(computedStyle, property) {
   return parseInt(computedStyle[property], 10) || 0;
 }
@@ -39400,7 +39411,7 @@ const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize
       style,
       value
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$z);
+    other = _objectWithoutPropertiesLoose(props, _excluded$F);
   const {
     current: isControlled
   } = React.useRef(value != null);
@@ -39611,8 +39622,8 @@ function getSvgIconUtilityClass(slot) {
 }
 generateUtilityClasses('MuiSvgIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
 
-const _excluded$y = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
-const useUtilityClasses$s = ownerState => {
+const _excluded$E = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
+const useUtilityClasses$x = ownerState => {
   const {
     color,
     fontSize,
@@ -39677,7 +39688,7 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
       titleAccess,
       viewBox = '0 0 24 24'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$y);
+    other = _objectWithoutPropertiesLoose(props, _excluded$E);
   const ownerState = _extends({}, props, {
     color,
     component,
@@ -39690,7 +39701,7 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
   if (!inheritViewBox) {
     more.viewBox = viewBox;
   }
-  const classes = useUtilityClasses$s(ownerState);
+  const classes = useUtilityClasses$x(ownerState);
   return /*#__PURE__*/jsxs(SvgIconRoot, _extends({
     as: component,
     className: clsx(classes.root, className),
@@ -40806,8 +40817,8 @@ function getCollapseUtilityClass(slot) {
 }
 generateUtilityClasses('MuiCollapse', ['root', 'horizontal', 'vertical', 'entered', 'hidden', 'wrapper', 'wrapperInner']);
 
-const _excluded$x = ["addEndListener", "children", "className", "collapsedSize", "component", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "orientation", "style", "timeout", "TransitionComponent"];
-const useUtilityClasses$r = ownerState => {
+const _excluded$D = ["addEndListener", "children", "className", "collapsedSize", "component", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "orientation", "style", "timeout", "TransitionComponent"];
+const useUtilityClasses$w = ownerState => {
   const {
     orientation,
     classes
@@ -40906,12 +40917,12 @@ const Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
       // eslint-disable-next-line react/prop-types
       TransitionComponent = Transition$1
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$x);
+    other = _objectWithoutPropertiesLoose(props, _excluded$D);
   const ownerState = _extends({}, props, {
     orientation,
     collapsedSize: collapsedSizeProp
   });
-  const classes = useUtilityClasses$r(ownerState);
+  const classes = useUtilityClasses$w(ownerState);
   const theme = useTheme();
   const timer = React.useRef();
   const wrapperRef = React.useRef(null);
@@ -41173,8 +41184,8 @@ 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 _excluded$w = ["className", "component", "elevation", "square", "variant"];
-const useUtilityClasses$q = ownerState => {
+const _excluded$C = ["className", "component", "elevation", "square", "variant"];
+const useUtilityClasses$v = ownerState => {
   const {
     square,
     elevation,
@@ -41228,14 +41239,14 @@ const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
       square = false,
       variant = 'elevation'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$w);
+    other = _objectWithoutPropertiesLoose(props, _excluded$C);
   const ownerState = _extends({}, props, {
     component,
     elevation,
     square,
     variant
   });
-  const classes = useUtilityClasses$q(ownerState);
+  const classes = useUtilityClasses$v(ownerState);
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const theme = useTheme();
@@ -41320,8 +41331,8 @@ function getAccordionUtilityClass(slot) {
 const accordionClasses = generateUtilityClasses('MuiAccordion', ['root', 'rounded', 'expanded', 'disabled', 'gutters', 'region']);
 var accordionClasses$1 = accordionClasses;
 
-const _excluded$v = ["children", "className", "defaultExpanded", "disabled", "disableGutters", "expanded", "onChange", "square", "TransitionComponent", "TransitionProps"];
-const useUtilityClasses$p = ownerState => {
+const _excluded$B = ["children", "className", "defaultExpanded", "disabled", "disableGutters", "expanded", "onChange", "square", "TransitionComponent", "TransitionProps"];
+const useUtilityClasses$u = ownerState => {
   const {
     classes,
     square,
@@ -41433,7 +41444,7 @@ const Accordion$1 = /*#__PURE__*/React.forwardRef(function Accordion(inProps, re
       TransitionComponent = Collapse$1,
       TransitionProps
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$v);
+    other = _objectWithoutPropertiesLoose(props, _excluded$B);
   const [expanded, setExpandedState] = useControlled({
     controlled: expandedProp,
     default: defaultExpanded,
@@ -41459,7 +41470,7 @@ const Accordion$1 = /*#__PURE__*/React.forwardRef(function Accordion(inProps, re
     disableGutters,
     expanded
   });
-  const classes = useUtilityClasses$p(ownerState);
+  const classes = useUtilityClasses$u(ownerState);
   return /*#__PURE__*/jsxs(AccordionRoot, _extends({
     className: clsx(classes.root, className),
     ref: ref,
@@ -41564,8 +41575,8 @@ function getAccordionDetailsUtilityClass(slot) {
 }
 generateUtilityClasses('MuiAccordionDetails', ['root']);
 
-const _excluded$u = ["className"];
-const useUtilityClasses$o = ownerState => {
+const _excluded$A = ["className"];
+const useUtilityClasses$t = ownerState => {
   const {
     classes
   } = ownerState;
@@ -41591,9 +41602,9 @@ const AccordionDetails = /*#__PURE__*/React.forwardRef(function AccordionDetails
   const {
       className
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$u);
+    other = _objectWithoutPropertiesLoose(props, _excluded$A);
   const ownerState = props;
-  const classes = useUtilityClasses$o(ownerState);
+  const classes = useUtilityClasses$t(ownerState);
   return /*#__PURE__*/jsx(AccordionDetailsRoot, _extends({
     className: clsx(classes.root, className),
     ref: ref,
@@ -41706,7 +41717,7 @@ process.env.NODE_ENV !== "production" ? Ripple.propTypes = {
 const touchRippleClasses = generateUtilityClasses('MuiTouchRipple', ['root', 'ripple', 'rippleVisible', 'ripplePulsate', 'child', 'childLeaving', 'childPulsate']);
 var touchRippleClasses$1 = touchRippleClasses;
 
-const _excluded$t = ["center", "classes", "className"];
+const _excluded$z = ["center", "classes", "className"];
 let _ = t => t,
   _t,
   _t2,
@@ -41835,7 +41846,7 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
       classes = {},
       className
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$t);
+    other = _objectWithoutPropertiesLoose(props, _excluded$z);
   const [ripples, setRipples] = React.useState([]);
   const nextKey = React.useRef(0);
   const rippleCallback = React.useRef(null);
@@ -42036,8 +42047,8 @@ function getButtonBaseUtilityClass(slot) {
 const buttonBaseClasses = generateUtilityClasses('MuiButtonBase', ['root', 'disabled', 'focusVisible']);
 var buttonBaseClasses$1 = buttonBaseClasses;
 
-const _excluded$s = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"];
-const useUtilityClasses$n = ownerState => {
+const _excluded$y = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"];
+const useUtilityClasses$s = ownerState => {
   const {
     disabled,
     focusVisible,
@@ -42138,7 +42149,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
       touchRippleRef,
       type
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$s);
+    other = _objectWithoutPropertiesLoose(props, _excluded$y);
   const buttonRef = React.useRef(null);
   const rippleRef = React.useRef(null);
   const handleRippleRef = useForkRef(rippleRef, touchRippleRef);
@@ -42305,7 +42316,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     tabIndex,
     focusVisible
   });
-  const classes = useUtilityClasses$n(ownerState);
+  const classes = useUtilityClasses$s(ownerState);
   return /*#__PURE__*/jsxs(ButtonBaseRoot, _extends({
     as: ComponentProp,
     className: clsx(classes.root, className),
@@ -42502,8 +42513,8 @@ function getAccordionSummaryUtilityClass(slot) {
 const accordionSummaryClasses = generateUtilityClasses('MuiAccordionSummary', ['root', 'expanded', 'focusVisible', 'disabled', 'gutters', 'contentGutters', 'content', 'expandIconWrapper']);
 var accordionSummaryClasses$1 = accordionSummaryClasses;
 
-const _excluded$r = ["children", "className", "expandIcon", "focusVisibleClassName", "onClick"];
-const useUtilityClasses$m = ownerState => {
+const _excluded$x = ["children", "className", "expandIcon", "focusVisibleClassName", "onClick"];
+const useUtilityClasses$r = ownerState => {
   const {
     classes,
     expanded,
@@ -42597,7 +42608,7 @@ const AccordionSummary = /*#__PURE__*/React.forwardRef(function AccordionSummary
       focusVisibleClassName,
       onClick
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$r);
+    other = _objectWithoutPropertiesLoose(props, _excluded$x);
   const {
     disabled = false,
     disableGutters,
@@ -42617,7 +42628,7 @@ const AccordionSummary = /*#__PURE__*/React.forwardRef(function AccordionSummary
     disabled,
     disableGutters
   });
-  const classes = useUtilityClasses$m(ownerState);
+  const classes = useUtilityClasses$r(ownerState);
   return /*#__PURE__*/jsxs(AccordionSummaryRoot, _extends({
     focusRipple: false,
     disableRipple: true,
@@ -42687,8 +42698,8 @@ function getTypographyUtilityClass(slot) {
 }
 generateUtilityClasses('MuiTypography', ['root', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'inherit', 'button', 'caption', 'overline', 'alignLeft', 'alignRight', 'alignCenter', 'alignJustify', 'noWrap', 'gutterBottom', 'paragraph']);
 
-const _excluded$q = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
-const useUtilityClasses$l = ownerState => {
+const _excluded$w = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
+const useUtilityClasses$q = ownerState => {
   const {
     align,
     gutterBottom,
@@ -42771,7 +42782,7 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, re
       variant = 'body1',
       variantMapping = defaultVariantMapping
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$q);
+    other = _objectWithoutPropertiesLoose(props, _excluded$w);
   const ownerState = _extends({}, props, {
     align,
     color,
@@ -42784,7 +42795,7 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, re
     variantMapping
   });
   const Component = component || (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) || 'span';
-  const classes = useUtilityClasses$l(ownerState);
+  const classes = useUtilityClasses$q(ownerState);
   return /*#__PURE__*/jsx(TypographyRoot, _extends({
     as: Component,
     ref: ref,
@@ -42869,6 +42880,499 @@ process.env.NODE_ENV !== "production" ? Typography.propTypes /* remove-proptypes
 } : void 0;
 var Typography$1 = Typography;
 
+var CancelIcon = createSvgIcon( /*#__PURE__*/jsx("path", {
+  d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
+}), 'Cancel');
+
+function getChipUtilityClass(slot) {
+  return generateUtilityClass('MuiChip', slot);
+}
+const chipClasses = generateUtilityClasses('MuiChip', ['root', 'sizeSmall', 'sizeMedium', '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']);
+var chipClasses$1 = chipClasses;
+
+const _excluded$v = ["avatar", "className", "clickable", "color", "component", "deleteIcon", "disabled", "icon", "label", "onClick", "onDelete", "onKeyDown", "onKeyUp", "size", "variant", "tabIndex", "skipFocusWhenDisabled"];
+const useUtilityClasses$p = ownerState => {
+  const {
+    classes,
+    disabled,
+    size,
+    color,
+    iconColor,
+    onDelete,
+    clickable,
+    variant
+  } = ownerState;
+  const slots = {
+    root: ['root', variant, disabled && 'disabled', `size${capitalize(size)}`, `color${capitalize(color)}`, clickable && 'clickable', clickable && `clickableColor${capitalize(color)}`, onDelete && 'deletable', onDelete && `deletableColor${capitalize(color)}`, `${variant}${capitalize(color)}`],
+    label: ['label', `label${capitalize(size)}`],
+    avatar: ['avatar', `avatar${capitalize(size)}`, `avatarColor${capitalize(color)}`],
+    icon: ['icon', `icon${capitalize(size)}`, `iconColor${capitalize(iconColor)}`],
+    deleteIcon: ['deleteIcon', `deleteIcon${capitalize(size)}`, `deleteIconColor${capitalize(color)}`, `deleteIcon${capitalize(variant)}Color${capitalize(color)}`]
+  };
+  return composeClasses(slots, getChipUtilityClass, classes);
+};
+const ChipRoot = styled$1('div', {
+  name: 'MuiChip',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    const {
+      color,
+      iconColor,
+      clickable,
+      onDelete,
+      size,
+      variant
+    } = ownerState;
+    return [{
+      [`& .${chipClasses$1.avatar}`]: styles.avatar
+    }, {
+      [`& .${chipClasses$1.avatar}`]: styles[`avatar${capitalize(size)}`]
+    }, {
+      [`& .${chipClasses$1.avatar}`]: styles[`avatarColor${capitalize(color)}`]
+    }, {
+      [`& .${chipClasses$1.icon}`]: styles.icon
+    }, {
+      [`& .${chipClasses$1.icon}`]: styles[`icon${capitalize(size)}`]
+    }, {
+      [`& .${chipClasses$1.icon}`]: styles[`iconColor${capitalize(iconColor)}`]
+    }, {
+      [`& .${chipClasses$1.deleteIcon}`]: styles.deleteIcon
+    }, {
+      [`& .${chipClasses$1.deleteIcon}`]: styles[`deleteIcon${capitalize(size)}`]
+    }, {
+      [`& .${chipClasses$1.deleteIcon}`]: styles[`deleteIconColor${capitalize(color)}`]
+    }, {
+      [`& .${chipClasses$1.deleteIcon}`]: styles[`deleteIcon${capitalize(variant)}Color${capitalize(color)}`]
+    }, styles.root, styles[`size${capitalize(size)}`], styles[`color${capitalize(color)}`], clickable && styles.clickable, clickable && color !== 'default' && styles[`clickableColor${capitalize(color)})`], onDelete && styles.deletable, onDelete && color !== 'default' && styles[`deletableColor${capitalize(color)}`], styles[variant], styles[`${variant}${capitalize(color)}`]];
+  }
+})(({
+  theme,
+  ownerState
+}) => {
+  const deleteIconColor = alpha(theme.palette.text.primary, 0.26);
+  const textColor = theme.palette.mode === 'light' ? theme.palette.grey[700] : theme.palette.grey[300];
+  return _extends({
+    maxWidth: '100%',
+    fontFamily: theme.typography.fontFamily,
+    fontSize: theme.typography.pxToRem(13),
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: 32,
+    color: (theme.vars || theme).palette.text.primary,
+    backgroundColor: (theme.vars || theme).palette.action.selected,
+    borderRadius: 32 / 2,
+    whiteSpace: 'nowrap',
+    transition: theme.transitions.create(['background-color', 'box-shadow']),
+    // label will inherit this from root, then `clickable` class overrides this for both
+    cursor: 'default',
+    // We disable the focus ring for mouse, touch and keyboard users.
+    outline: 0,
+    textDecoration: 'none',
+    border: 0,
+    // Remove `button` border
+    padding: 0,
+    // Remove `button` padding
+    verticalAlign: 'middle',
+    boxSizing: 'border-box',
+    [`&.${chipClasses$1.disabled}`]: {
+      opacity: (theme.vars || theme).palette.action.disabledOpacity,
+      pointerEvents: 'none'
+    },
+    [`& .${chipClasses$1.avatar}`]: {
+      marginLeft: 5,
+      marginRight: -6,
+      width: 24,
+      height: 24,
+      color: theme.vars ? theme.vars.palette.Chip.defaultAvatarColor : textColor,
+      fontSize: theme.typography.pxToRem(12)
+    },
+    [`& .${chipClasses$1.avatarColorPrimary}`]: {
+      color: (theme.vars || theme).palette.primary.contrastText,
+      backgroundColor: (theme.vars || theme).palette.primary.dark
+    },
+    [`& .${chipClasses$1.avatarColorSecondary}`]: {
+      color: (theme.vars || theme).palette.secondary.contrastText,
+      backgroundColor: (theme.vars || theme).palette.secondary.dark
+    },
+    [`& .${chipClasses$1.avatarSmall}`]: {
+      marginLeft: 4,
+      marginRight: -4,
+      width: 18,
+      height: 18,
+      fontSize: theme.typography.pxToRem(10)
+    },
+    [`& .${chipClasses$1.icon}`]: _extends({
+      marginLeft: 5,
+      marginRight: -6
+    }, ownerState.size === 'small' && {
+      fontSize: 18,
+      marginLeft: 4,
+      marginRight: -4
+    }, ownerState.iconColor === ownerState.color && _extends({
+      color: theme.vars ? theme.vars.palette.Chip.defaultIconColor : textColor
+    }, ownerState.color !== 'default' && {
+      color: 'inherit'
+    })),
+    [`& .${chipClasses$1.deleteIcon}`]: _extends({
+      WebkitTapHighlightColor: 'transparent',
+      color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.26)` : deleteIconColor,
+      fontSize: 22,
+      cursor: 'pointer',
+      margin: '0 5px 0 -6px',
+      '&:hover': {
+        color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.4)` : alpha(deleteIconColor, 0.4)
+      }
+    }, ownerState.size === 'small' && {
+      fontSize: 16,
+      marginRight: 4,
+      marginLeft: -4
+    }, ownerState.color !== 'default' && {
+      color: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].contrastTextChannel} / 0.7)` : alpha(theme.palette[ownerState.color].contrastText, 0.7),
+      '&:hover, &:active': {
+        color: (theme.vars || theme).palette[ownerState.color].contrastText
+      }
+    })
+  }, ownerState.size === 'small' && {
+    height: 24
+  }, ownerState.color !== 'default' && {
+    backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
+    color: (theme.vars || theme).palette[ownerState.color].contrastText
+  }, ownerState.onDelete && {
+    [`&.${chipClasses$1.focusVisible}`]: {
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity + theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+    }
+  }, ownerState.onDelete && ownerState.color !== 'default' && {
+    [`&.${chipClasses$1.focusVisible}`]: {
+      backgroundColor: (theme.vars || theme).palette[ownerState.color].dark
+    }
+  });
+}, ({
+  theme,
+  ownerState
+}) => _extends({}, ownerState.clickable && {
+  userSelect: 'none',
+  WebkitTapHighlightColor: 'transparent',
+  cursor: 'pointer',
+  '&:hover': {
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity + theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity)
+  },
+  [`&.${chipClasses$1.focusVisible}`]: {
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity + theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+  },
+  '&:active': {
+    boxShadow: (theme.vars || theme).shadows[1]
+  }
+}, ownerState.clickable && ownerState.color !== 'default' && {
+  [`&:hover, &.${chipClasses$1.focusVisible}`]: {
+    backgroundColor: (theme.vars || theme).palette[ownerState.color].dark
+  }
+}), ({
+  theme,
+  ownerState
+}) => _extends({}, ownerState.variant === 'outlined' && {
+  backgroundColor: 'transparent',
+  border: theme.vars ? `1px solid ${theme.vars.palette.Chip.defaultBorder}` : `1px solid ${theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[700]}`,
+  [`&.${chipClasses$1.clickable}:hover`]: {
+    backgroundColor: (theme.vars || theme).palette.action.hover
+  },
+  [`&.${chipClasses$1.focusVisible}`]: {
+    backgroundColor: (theme.vars || theme).palette.action.focus
+  },
+  [`& .${chipClasses$1.avatar}`]: {
+    marginLeft: 4
+  },
+  [`& .${chipClasses$1.avatarSmall}`]: {
+    marginLeft: 2
+  },
+  [`& .${chipClasses$1.icon}`]: {
+    marginLeft: 4
+  },
+  [`& .${chipClasses$1.iconSmall}`]: {
+    marginLeft: 2
+  },
+  [`& .${chipClasses$1.deleteIcon}`]: {
+    marginRight: 5
+  },
+  [`& .${chipClasses$1.deleteIconSmall}`]: {
+    marginRight: 3
+  }
+}, ownerState.variant === 'outlined' && ownerState.color !== 'default' && {
+  color: (theme.vars || theme).palette[ownerState.color].main,
+  border: `1px solid ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.7)` : alpha(theme.palette[ownerState.color].main, 0.7)}`,
+  [`&.${chipClasses$1.clickable}:hover`]: {
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity)
+  },
+  [`&.${chipClasses$1.focusVisible}`]: {
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.focusOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.focusOpacity)
+  },
+  [`& .${chipClasses$1.deleteIcon}`]: {
+    color: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.7)` : alpha(theme.palette[ownerState.color].main, 0.7),
+    '&:hover, &:active': {
+      color: (theme.vars || theme).palette[ownerState.color].main
+    }
+  }
+}));
+const ChipLabel = styled$1('span', {
+  name: 'MuiChip',
+  slot: 'Label',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    const {
+      size
+    } = ownerState;
+    return [styles.label, styles[`label${capitalize(size)}`]];
+  }
+})(({
+  ownerState
+}) => _extends({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  paddingLeft: 12,
+  paddingRight: 12,
+  whiteSpace: 'nowrap'
+}, ownerState.size === 'small' && {
+  paddingLeft: 8,
+  paddingRight: 8
+}));
+function isDeleteKeyboardEvent(keyboardEvent) {
+  return keyboardEvent.key === 'Backspace' || keyboardEvent.key === 'Delete';
+}
+
+/**
+ * Chips represent complex entities in small blocks, such as a contact.
+ */
+const Chip$1 = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiChip'
+  });
+  const {
+      avatar: avatarProp,
+      className,
+      clickable: clickableProp,
+      color = 'default',
+      component: ComponentProp,
+      deleteIcon: deleteIconProp,
+      disabled = false,
+      icon: iconProp,
+      label,
+      onClick,
+      onDelete,
+      onKeyDown,
+      onKeyUp,
+      size = 'medium',
+      variant = 'filled',
+      tabIndex,
+      skipFocusWhenDisabled = false
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$v);
+  const chipRef = React.useRef(null);
+  const handleRef = useForkRef(chipRef, ref);
+  const handleDeleteIconClick = event => {
+    // Stop the event from bubbling up to the `Chip`
+    event.stopPropagation();
+    if (onDelete) {
+      onDelete(event);
+    }
+  };
+  const handleKeyDown = event => {
+    // Ignore events from children of `Chip`.
+    if (event.currentTarget === event.target && isDeleteKeyboardEvent(event)) {
+      // Will be handled in keyUp, otherwise some browsers
+      // might init navigation
+      event.preventDefault();
+    }
+    if (onKeyDown) {
+      onKeyDown(event);
+    }
+  };
+  const handleKeyUp = event => {
+    // Ignore events from children of `Chip`.
+    if (event.currentTarget === event.target) {
+      if (onDelete && isDeleteKeyboardEvent(event)) {
+        onDelete(event);
+      } else if (event.key === 'Escape' && chipRef.current) {
+        chipRef.current.blur();
+      }
+    }
+    if (onKeyUp) {
+      onKeyUp(event);
+    }
+  };
+  const clickable = clickableProp !== false && onClick ? true : clickableProp;
+  const component = clickable || onDelete ? ButtonBase$1 : ComponentProp || 'div';
+  const ownerState = _extends({}, props, {
+    component,
+    disabled,
+    size,
+    color,
+    iconColor: /*#__PURE__*/React.isValidElement(iconProp) ? iconProp.props.color || color : color,
+    onDelete: !!onDelete,
+    clickable,
+    variant
+  });
+  const classes = useUtilityClasses$p(ownerState);
+  const moreProps = component === ButtonBase$1 ? _extends({
+    component: ComponentProp || 'div',
+    focusVisibleClassName: classes.focusVisible
+  }, onDelete && {
+    disableRipple: true
+  }) : {};
+  let deleteIcon = null;
+  if (onDelete) {
+    deleteIcon = deleteIconProp && /*#__PURE__*/React.isValidElement(deleteIconProp) ? /*#__PURE__*/React.cloneElement(deleteIconProp, {
+      className: clsx(deleteIconProp.props.className, classes.deleteIcon),
+      onClick: handleDeleteIconClick
+    }) : /*#__PURE__*/jsx(CancelIcon, {
+      className: clsx(classes.deleteIcon),
+      onClick: handleDeleteIconClick
+    });
+  }
+  let avatar = null;
+  if (avatarProp && /*#__PURE__*/React.isValidElement(avatarProp)) {
+    avatar = /*#__PURE__*/React.cloneElement(avatarProp, {
+      className: clsx(classes.avatar, avatarProp.props.className)
+    });
+  }
+  let icon = null;
+  if (iconProp && /*#__PURE__*/React.isValidElement(iconProp)) {
+    icon = /*#__PURE__*/React.cloneElement(iconProp, {
+      className: clsx(classes.icon, iconProp.props.className)
+    });
+  }
+  if (process.env.NODE_ENV !== 'production') {
+    if (avatar && icon) {
+      console.error('MUI: The Chip component can not handle the avatar ' + 'and the icon prop at the same time. Pick one.');
+    }
+  }
+  return /*#__PURE__*/jsxs(ChipRoot, _extends({
+    as: component,
+    className: clsx(classes.root, className),
+    disabled: clickable && disabled ? true : undefined,
+    onClick: onClick,
+    onKeyDown: handleKeyDown,
+    onKeyUp: handleKeyUp,
+    ref: handleRef,
+    tabIndex: skipFocusWhenDisabled && disabled ? -1 : tabIndex,
+    ownerState: ownerState
+  }, moreProps, other, {
+    children: [avatar || icon, /*#__PURE__*/jsx(ChipLabel, {
+      className: clsx(classes.label),
+      ownerState: ownerState,
+      children: label
+    }), deleteIcon]
+  }));
+});
+process.env.NODE_ENV !== "production" ? Chip$1.propTypes /* remove-proptypes */ = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * The Avatar element to display.
+   */
+  avatar: PropTypes.element,
+  /**
+   * This prop isn't supported.
+   * Use the `component` prop if you need to change the children structure.
+   */
+  children: unsupportedProp,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * If `true`, the chip will appear clickable, and will raise when pressed,
+   * even if the onClick prop is not defined.
+   * If `false`, the chip will not appear clickable, even if onClick prop is defined.
+   * This can be used, for example,
+   * along with the component prop to indicate an anchor Chip is clickable.
+   * Note: this controls the UI and does not affect the onClick event.
+   */
+  clickable: PropTypes.bool,
+  /**
+   * 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/#adding-new-colors).
+   * @default 'default'
+   */
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['default', '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,
+  /**
+   * Override the default delete icon element. Shown only if `onDelete` is set.
+   */
+  deleteIcon: PropTypes.element,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Icon element.
+   */
+  icon: PropTypes.element,
+  /**
+   * The content of the component.
+   */
+  label: PropTypes.node,
+  /**
+   * @ignore
+   */
+  onClick: PropTypes.func,
+  /**
+   * Callback fired when the delete icon is clicked.
+   * If set, the delete icon will be shown.
+   */
+  onDelete: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onKeyDown: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onKeyUp: PropTypes.func,
+  /**
+   * The size of the component.
+   * @default 'medium'
+   */
+  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.string]),
+  /**
+   * If `true`, allows the disabled chip to escape focus.
+   * If `false`, allows the disabled chip to receive focus.
+   * @default false
+   */
+  skipFocusWhenDisabled: PropTypes.bool,
+  /**
+   * 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
+   */
+  tabIndex: PropTypes.number,
+  /**
+   * The variant to use.
+   * @default 'filled'
+   */
+  variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['filled', 'outlined']), PropTypes.string])
+} : void 0;
+var ChipMUI = Chip$1;
+
 function formControlState({
   props,
   states,
@@ -42953,7 +43457,7 @@ function getInputBaseUtilityClass(slot) {
 const inputBaseClasses = generateUtilityClasses('MuiInputBase', ['root', 'formControl', 'focused', 'disabled', 'adornedStart', 'adornedEnd', 'error', 'sizeSmall', 'multiline', 'colorSecondary', 'fullWidth', 'hiddenLabel', 'readOnly', 'input', 'inputSizeSmall', 'inputMultiline', 'inputTypeSearch', 'inputAdornedStart', 'inputAdornedEnd', 'inputHiddenLabel']);
 var inputBaseClasses$1 = inputBaseClasses;
 
-const _excluded$p = ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "disableInjectingGlobalStyles", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "slotProps", "slots", "startAdornment", "type", "value"];
+const _excluded$u = ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "disableInjectingGlobalStyles", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "slotProps", "slots", "startAdornment", "type", "value"];
 const rootOverridesResolver = (props, styles) => {
   const {
     ownerState
@@ -42966,7 +43470,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$k = ownerState => {
+const useUtilityClasses$o = ownerState => {
   const {
     classes,
     color,
@@ -43184,7 +43688,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
       type = 'text',
       value: valueProp
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$p);
+    other = _objectWithoutPropertiesLoose(props, _excluded$u);
   const value = inputPropsProp.value != null ? inputPropsProp.value : valueProp;
   const {
     current: isControlled
@@ -43358,7 +43862,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
     startAdornment,
     type
   });
-  const classes = useUtilityClasses$k(ownerState);
+  const classes = useUtilityClasses$o(ownerState);
   const Root = slots.root || components.Root || InputBaseRoot;
   const rootProps = slotProps.root || componentsProps.root || {};
   const Input = slots.input || components.Input || InputBaseComponent;
@@ -43662,7 +44166,7 @@ var ArrowDropDownIcon = createSvgIcon( /*#__PURE__*/jsx("path", {
   d: "M7 10l5 5 5-5z"
 }), 'ArrowDropDown');
 
-const _excluded$o = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
+const _excluded$t = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
 const styles$1 = {
   entering: {
     opacity: 1
@@ -43699,7 +44203,7 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
       // eslint-disable-next-line react/prop-types
       TransitionComponent = Transition$1
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$o);
+    other = _objectWithoutPropertiesLoose(props, _excluded$t);
   const nodeRef = React.useRef(null);
   const handleRef = useForkRef(nodeRef, children.ref, ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
@@ -43860,8 +44364,8 @@ function getBackdropUtilityClass(slot) {
 }
 generateUtilityClasses('MuiBackdrop', ['root', 'invisible']);
 
-const _excluded$n = ["children", "component", "components", "componentsProps", "className", "invisible", "open", "slotProps", "slots", "transitionDuration", "TransitionComponent"];
-const useUtilityClasses$j = ownerState => {
+const _excluded$s = ["children", "component", "components", "componentsProps", "className", "invisible", "open", "slotProps", "slots", "transitionDuration", "TransitionComponent"];
+const useUtilityClasses$n = ownerState => {
   const {
     classes,
     invisible
@@ -43916,12 +44420,12 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
       // eslint-disable-next-line react/prop-types
       TransitionComponent = Fade$1
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$n);
+    other = _objectWithoutPropertiesLoose(props, _excluded$s);
   const ownerState = _extends({}, props, {
     component,
     invisible
   });
-  const classes = useUtilityClasses$j(ownerState);
+  const classes = useUtilityClasses$n(ownerState);
   const rootSlotProps = (_slotProps$root = slotProps.root) != null ? _slotProps$root : componentsProps.root;
   return /*#__PURE__*/jsx(TransitionComponent, _extends({
     in: open,
@@ -44073,8 +44577,8 @@ if (process.env.NODE_ENV !== 'production') {
 }
 var ButtonGroupContext$1 = ButtonGroupContext;
 
-const _excluded$m = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
-const useUtilityClasses$i = ownerState => {
+const _excluded$r = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
+const useUtilityClasses$m = ownerState => {
   const {
     color,
     disableElevation,
@@ -44299,7 +44803,7 @@ const Button$1 = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
       type,
       variant = 'text'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$m);
+    other = _objectWithoutPropertiesLoose(props, _excluded$r);
   const ownerState = _extends({}, props, {
     color,
     component,
@@ -44311,7 +44815,7 @@ const Button$1 = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     type,
     variant
   });
-  const classes = useUtilityClasses$i(ownerState);
+  const classes = useUtilityClasses$m(ownerState);
   const startIcon = startIconProp && /*#__PURE__*/jsx(ButtonStartIcon, {
     className: classes.startIcon,
     ownerState: ownerState,
@@ -44437,8 +44941,8 @@ function getSwitchBaseUtilityClass(slot) {
 }
 generateUtilityClasses('PrivateSwitchBase', ['root', 'checked', 'disabled', 'input', 'edgeStart', 'edgeEnd']);
 
-const _excluded$l = ["autoFocus", "checked", "checkedIcon", "className", "defaultChecked", "disabled", "disableFocusRipple", "edge", "icon", "id", "inputProps", "inputRef", "name", "onBlur", "onChange", "onFocus", "readOnly", "required", "tabIndex", "type", "value"];
-const useUtilityClasses$h = ownerState => {
+const _excluded$q = ["autoFocus", "checked", "checkedIcon", "className", "defaultChecked", "disabled", "disableFocusRipple", "edge", "icon", "id", "inputProps", "inputRef", "name", "onBlur", "onChange", "onFocus", "readOnly", "required", "tabIndex", "type", "value"];
+const useUtilityClasses$l = ownerState => {
   const {
     classes,
     checked,
@@ -44501,7 +45005,7 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
       type,
       value
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$l);
+    other = _objectWithoutPropertiesLoose(props, _excluded$q);
   const [checked, setCheckedState] = useControlled({
     controlled: checkedProp,
     default: Boolean(defaultChecked),
@@ -44550,7 +45054,7 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
     disableFocusRipple,
     edge
   });
-  const classes = useUtilityClasses$h(ownerState);
+  const classes = useUtilityClasses$l(ownerState);
   return /*#__PURE__*/jsxs(SwitchBaseRoot, _extends({
     component: "span",
     className: clsx(classes.root, className),
@@ -44711,8 +45215,8 @@ function getCheckboxUtilityClass(slot) {
 const checkboxClasses = generateUtilityClasses('MuiCheckbox', ['root', 'checked', 'disabled', 'indeterminate', 'colorPrimary', 'colorSecondary']);
 var checkboxClasses$1 = checkboxClasses;
 
-const _excluded$k = ["checkedIcon", "color", "icon", "indeterminate", "indeterminateIcon", "inputProps", "size", "className"];
-const useUtilityClasses$g = ownerState => {
+const _excluded$p = ["checkedIcon", "color", "icon", "indeterminate", "indeterminateIcon", "inputProps", "size", "className"];
+const useUtilityClasses$k = ownerState => {
   const {
     classes,
     indeterminate,
@@ -44774,7 +45278,7 @@ const Checkbox$1 = /*#__PURE__*/React.forwardRef(function Checkbox(inProps, ref)
       size = 'medium',
       className
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$k);
+    other = _objectWithoutPropertiesLoose(props, _excluded$p);
   const icon = indeterminate ? indeterminateIconProp : iconProp;
   const indeterminateIcon = indeterminate ? indeterminateIconProp : checkedIcon;
   const ownerState = _extends({}, props, {
@@ -44782,7 +45286,7 @@ const Checkbox$1 = /*#__PURE__*/React.forwardRef(function Checkbox(inProps, ref)
     indeterminate,
     size
   });
-  const classes = useUtilityClasses$g(ownerState);
+  const classes = useUtilityClasses$k(ownerState);
   return /*#__PURE__*/jsx(CheckboxRoot, _extends({
     type: "checkbox",
     inputProps: _extends({
@@ -44901,7 +45405,7 @@ process.env.NODE_ENV !== "production" ? Checkbox$1.propTypes /* remove-proptypes
 } : void 0;
 var CheckboxMUI = Checkbox$1;
 
-const _excluded$j = ["BackdropComponent", "BackdropProps", "closeAfterTransition", "children", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "slotProps", "slots", "theme"];
+const _excluded$o = ["BackdropComponent", "BackdropProps", "closeAfterTransition", "children", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "slotProps", "slots", "theme"];
 const extendUtilityClasses = ownerState => {
   return ownerState.classes;
 };
@@ -44977,7 +45481,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
       // eslint-disable-next-line react/prop-types
       theme
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$j);
+    other = _objectWithoutPropertiesLoose(props, _excluded$o);
   const [exited, setExited] = React.useState(true);
   const commonProps = {
     closeAfterTransition,
@@ -45187,8 +45691,247 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes /* remove-proptypes */ =
 } : void 0;
 var Modal$1 = Modal;
 
-const _excluded$i = ["disableUnderline", "components", "componentsProps", "fullWidth", "hiddenLabel", "inputComponent", "multiline", "slotProps", "slots", "type"];
-const useUtilityClasses$f = ownerState => {
+function getDividerUtilityClass(slot) {
+  return generateUtilityClass('MuiDivider', slot);
+}
+const dividerClasses = generateUtilityClasses('MuiDivider', ['root', 'absolute', 'fullWidth', 'inset', 'middle', 'flexItem', 'light', 'vertical', 'withChildren', 'withChildrenVertical', 'textAlignRight', 'textAlignLeft', 'wrapper', 'wrapperVertical']);
+var dividerClasses$1 = dividerClasses;
+
+const _excluded$n = ["absolute", "children", "className", "component", "flexItem", "light", "orientation", "role", "textAlign", "variant"];
+const useUtilityClasses$j = ownerState => {
+  const {
+    absolute,
+    children,
+    classes,
+    flexItem,
+    light,
+    orientation,
+    textAlign,
+    variant
+  } = ownerState;
+  const slots = {
+    root: ['root', absolute && 'absolute', variant, light && 'light', orientation === 'vertical' && 'vertical', flexItem && 'flexItem', children && 'withChildren', children && orientation === 'vertical' && 'withChildrenVertical', textAlign === 'right' && orientation !== 'vertical' && 'textAlignRight', textAlign === 'left' && orientation !== 'vertical' && 'textAlignLeft'],
+    wrapper: ['wrapper', orientation === 'vertical' && 'wrapperVertical']
+  };
+  return composeClasses(slots, getDividerUtilityClass, classes);
+};
+const DividerRoot = styled$1('div', {
+  name: 'MuiDivider',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, ownerState.absolute && styles.absolute, styles[ownerState.variant], ownerState.light && styles.light, ownerState.orientation === 'vertical' && styles.vertical, ownerState.flexItem && styles.flexItem, ownerState.children && styles.withChildren, ownerState.children && ownerState.orientation === 'vertical' && styles.withChildrenVertical, ownerState.textAlign === 'right' && ownerState.orientation !== 'vertical' && styles.textAlignRight, ownerState.textAlign === 'left' && ownerState.orientation !== 'vertical' && styles.textAlignLeft];
+  }
+})(({
+  theme,
+  ownerState
+}) => _extends({
+  margin: 0,
+  // Reset browser default style.
+  flexShrink: 0,
+  borderWidth: 0,
+  borderStyle: 'solid',
+  borderColor: (theme.vars || theme).palette.divider,
+  borderBottomWidth: 'thin'
+}, ownerState.absolute && {
+  position: 'absolute',
+  bottom: 0,
+  left: 0,
+  width: '100%'
+}, ownerState.light && {
+  borderColor: theme.vars ? `rgba(${theme.vars.palette.dividerChannel} / 0.08)` : alpha(theme.palette.divider, 0.08)
+}, ownerState.variant === 'inset' && {
+  marginLeft: 72
+}, ownerState.variant === 'middle' && ownerState.orientation === 'horizontal' && {
+  marginLeft: theme.spacing(2),
+  marginRight: theme.spacing(2)
+}, ownerState.variant === 'middle' && ownerState.orientation === 'vertical' && {
+  marginTop: theme.spacing(1),
+  marginBottom: theme.spacing(1)
+}, ownerState.orientation === 'vertical' && {
+  height: '100%',
+  borderBottomWidth: 0,
+  borderRightWidth: 'thin'
+}, ownerState.flexItem && {
+  alignSelf: 'stretch',
+  height: 'auto'
+}), ({
+  theme,
+  ownerState
+}) => _extends({}, ownerState.children && {
+  display: 'flex',
+  whiteSpace: 'nowrap',
+  textAlign: 'center',
+  border: 0,
+  '&::before, &::after': {
+    position: 'relative',
+    width: '100%',
+    borderTop: `thin solid ${(theme.vars || theme).palette.divider}`,
+    top: '50%',
+    content: '""',
+    transform: 'translateY(50%)'
+  }
+}), ({
+  theme,
+  ownerState
+}) => _extends({}, ownerState.children && ownerState.orientation === 'vertical' && {
+  flexDirection: 'column',
+  '&::before, &::after': {
+    height: '100%',
+    top: '0%',
+    left: '50%',
+    borderTop: 0,
+    borderLeft: `thin solid ${(theme.vars || theme).palette.divider}`,
+    transform: 'translateX(0%)'
+  }
+}), ({
+  ownerState
+}) => _extends({}, ownerState.textAlign === 'right' && ownerState.orientation !== 'vertical' && {
+  '&::before': {
+    width: '90%'
+  },
+  '&::after': {
+    width: '10%'
+  }
+}, ownerState.textAlign === 'left' && ownerState.orientation !== 'vertical' && {
+  '&::before': {
+    width: '10%'
+  },
+  '&::after': {
+    width: '90%'
+  }
+}));
+const DividerWrapper = styled$1('span', {
+  name: 'MuiDivider',
+  slot: 'Wrapper',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.wrapper, ownerState.orientation === 'vertical' && styles.wrapperVertical];
+  }
+})(({
+  theme,
+  ownerState
+}) => _extends({
+  display: 'inline-block',
+  paddingLeft: `calc(${theme.spacing(1)} * 1.2)`,
+  paddingRight: `calc(${theme.spacing(1)} * 1.2)`
+}, ownerState.orientation === 'vertical' && {
+  paddingTop: `calc(${theme.spacing(1)} * 1.2)`,
+  paddingBottom: `calc(${theme.spacing(1)} * 1.2)`
+}));
+const Divider = /*#__PURE__*/React.forwardRef(function Divider(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiDivider'
+  });
+  const {
+      absolute = false,
+      children,
+      className,
+      component = children ? 'div' : 'hr',
+      flexItem = false,
+      light = false,
+      orientation = 'horizontal',
+      role = component !== 'hr' ? 'separator' : undefined,
+      textAlign = 'center',
+      variant = 'fullWidth'
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$n);
+  const ownerState = _extends({}, props, {
+    absolute,
+    component,
+    flexItem,
+    light,
+    orientation,
+    role,
+    textAlign,
+    variant
+  });
+  const classes = useUtilityClasses$j(ownerState);
+  return /*#__PURE__*/jsx(DividerRoot, _extends({
+    as: component,
+    className: clsx(classes.root, className),
+    role: role,
+    ref: ref,
+    ownerState: ownerState
+  }, other, {
+    children: children ? /*#__PURE__*/jsx(DividerWrapper, {
+      className: classes.wrapper,
+      ownerState: ownerState,
+      children: children
+    }) : null
+  }));
+});
+process.env.NODE_ENV !== "production" ? Divider.propTypes /* remove-proptypes */ = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * Absolutely position the element.
+   * @default false
+   */
+  absolute: PropTypes.bool,
+  /**
+   * 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 component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+  /**
+   * If `true`, a vertical divider will have the correct height when used in flex container.
+   * (By default, a vertical divider will have a calculated height of `0px` if it is the child of a flex container.)
+   * @default false
+   */
+  flexItem: PropTypes.bool,
+  /**
+   * If `true`, the divider will have a lighter color.
+   * @default false
+   */
+  light: PropTypes.bool,
+  /**
+   * The component orientation.
+   * @default 'horizontal'
+   */
+  orientation: PropTypes.oneOf(['horizontal', 'vertical']),
+  /**
+   * @ignore
+   */
+  role: PropTypes /* @typescript-to-proptypes-ignore */.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 text alignment.
+   * @default 'center'
+   */
+  textAlign: PropTypes.oneOf(['center', 'left', 'right']),
+  /**
+   * The variant to use.
+   * @default 'fullWidth'
+   */
+  variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['fullWidth', 'inset', 'middle']), PropTypes.string])
+} : void 0;
+var Divider$1 = Divider;
+
+const _excluded$m = ["disableUnderline", "components", "componentsProps", "fullWidth", "hiddenLabel", "inputComponent", "multiline", "slotProps", "slots", "type"];
+const useUtilityClasses$i = ownerState => {
   const {
     classes,
     disableUnderline
@@ -45371,14 +46114,14 @@ const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps,
       slots = {},
       type = 'text'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$i);
+    other = _objectWithoutPropertiesLoose(props, _excluded$m);
   const ownerState = _extends({}, props, {
     fullWidth,
     inputComponent,
     multiline,
     type
   });
-  const classes = useUtilityClasses$f(props);
+  const classes = useUtilityClasses$i(props);
   const filledInputComponentsProps = {
     root: {
       ownerState
@@ -45606,8 +46349,8 @@ function getFormControlUtilityClasses(slot) {
 }
 generateUtilityClasses('MuiFormControl', ['root', 'marginNone', 'marginNormal', 'marginDense', 'fullWidth', 'disabled']);
 
-const _excluded$h = ["children", "className", "color", "component", "disabled", "error", "focused", "fullWidth", "hiddenLabel", "margin", "required", "size", "variant"];
-const useUtilityClasses$e = ownerState => {
+const _excluded$l = ["children", "className", "color", "component", "disabled", "error", "focused", "fullWidth", "hiddenLabel", "margin", "required", "size", "variant"];
+const useUtilityClasses$h = ownerState => {
   const {
     classes,
     margin,
@@ -45692,7 +46435,7 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps,
       size = 'medium',
       variant = 'outlined'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$h);
+    other = _objectWithoutPropertiesLoose(props, _excluded$l);
   const ownerState = _extends({}, props, {
     color,
     component,
@@ -45705,7 +46448,7 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps,
     size,
     variant
   });
-  const classes = useUtilityClasses$e(ownerState);
+  const classes = useUtilityClasses$h(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.
@@ -45887,8 +46630,8 @@ function getFormControlLabelUtilityClasses(slot) {
 const formControlLabelClasses = generateUtilityClasses('MuiFormControlLabel', ['root', 'labelPlacementStart', 'labelPlacementTop', 'labelPlacementBottom', 'disabled', 'label', 'error']);
 var formControlLabelClasses$1 = formControlLabelClasses;
 
-const _excluded$g = ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "slotProps", "value"];
-const useUtilityClasses$d = ownerState => {
+const _excluded$k = ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "slotProps", "value"];
+const useUtilityClasses$g = ownerState => {
   const {
     classes,
     disabled,
@@ -45967,7 +46710,7 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
       labelPlacement = 'end',
       slotProps = {}
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$g);
+    other = _objectWithoutPropertiesLoose(props, _excluded$k);
   const muiFormControl = useFormControl();
   let disabled = disabledProp;
   if (typeof disabled === 'undefined' && typeof control.props.disabled !== 'undefined') {
@@ -45994,7 +46737,7 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
     labelPlacement,
     error: fcs.error
   });
-  const classes = useUtilityClasses$d(ownerState);
+  const classes = useUtilityClasses$g(ownerState);
   const typographySlotProps = (_slotProps$typography = slotProps.typography) != null ? _slotProps$typography : componentsProps.typography;
   let label = labelProp;
   if (label != null && label.type !== Typography$1 && !disableTypography) {
@@ -46098,8 +46841,8 @@ const formHelperTextClasses = generateUtilityClasses('MuiFormHelperText', ['root
 var formHelperTextClasses$1 = formHelperTextClasses;
 
 var _span$2;
-const _excluded$f = ["children", "className", "component", "disabled", "error", "filled", "focused", "margin", "required", "variant"];
-const useUtilityClasses$c = ownerState => {
+const _excluded$j = ["children", "className", "component", "disabled", "error", "filled", "focused", "margin", "required", "variant"];
+const useUtilityClasses$f = ownerState => {
   const {
     classes,
     contained,
@@ -46157,7 +46900,7 @@ const FormHelperText = /*#__PURE__*/React.forwardRef(function FormHelperText(inP
       className,
       component = 'p'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$f);
+    other = _objectWithoutPropertiesLoose(props, _excluded$j);
   const muiFormControl = useFormControl();
   const fcs = formControlState({
     props,
@@ -46175,7 +46918,7 @@ const FormHelperText = /*#__PURE__*/React.forwardRef(function FormHelperText(inP
     focused: fcs.focused,
     required: fcs.required
   });
-  const classes = useUtilityClasses$c(ownerState);
+  const classes = useUtilityClasses$f(ownerState);
   return /*#__PURE__*/jsx(FormHelperTextRoot, _extends({
     as: component,
     ownerState: ownerState,
@@ -46255,8 +46998,8 @@ function getFormLabelUtilityClasses(slot) {
 const formLabelClasses = generateUtilityClasses('MuiFormLabel', ['root', 'colorSecondary', 'focused', 'disabled', 'error', 'filled', 'required', 'asterisk']);
 var formLabelClasses$1 = formLabelClasses;
 
-const _excluded$e = ["children", "className", "color", "component", "disabled", "error", "filled", "focused", "required"];
-const useUtilityClasses$b = ownerState => {
+const _excluded$i = ["children", "className", "color", "component", "disabled", "error", "filled", "focused", "required"];
+const useUtilityClasses$e = ownerState => {
   const {
     classes,
     color,
@@ -46320,7 +47063,7 @@ const FormLabel = /*#__PURE__*/React.forwardRef(function FormLabel(inProps, ref)
       className,
       component = 'label'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$e);
+    other = _objectWithoutPropertiesLoose(props, _excluded$i);
   const muiFormControl = useFormControl();
   const fcs = formControlState({
     props,
@@ -46336,7 +47079,7 @@ const FormLabel = /*#__PURE__*/React.forwardRef(function FormLabel(inProps, ref)
     focused: fcs.focused,
     required: fcs.required
   });
-  const classes = useUtilityClasses$b(ownerState);
+  const classes = useUtilityClasses$e(ownerState);
   return /*#__PURE__*/jsxs(FormLabelRoot, _extends({
     as: component,
     ownerState: ownerState,
@@ -46406,7 +47149,7 @@ process.env.NODE_ENV !== "production" ? FormLabel.propTypes /* remove-proptypes
 } : void 0;
 var FormLabel$1 = FormLabel;
 
-const _excluded$d = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
+const _excluded$h = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
 function getScale(value) {
   return `scale(${value}, ${value ** 2})`;
 }
@@ -46450,7 +47193,7 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
       // eslint-disable-next-line react/prop-types
       TransitionComponent = Transition$1
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$d);
+    other = _objectWithoutPropertiesLoose(props, _excluded$h);
   const timer = React.useRef();
   const autoTimeout = React.useRef();
   const theme = useTheme();
@@ -46654,8 +47397,8 @@ process.env.NODE_ENV !== "production" ? Grow.propTypes /* remove-proptypes */ =
 Grow.muiSupportAuto = true;
 var Grow$1 = Grow;
 
-const _excluded$c = ["disableUnderline", "components", "componentsProps", "fullWidth", "inputComponent", "multiline", "slotProps", "slots", "type"];
-const useUtilityClasses$a = ownerState => {
+const _excluded$g = ["disableUnderline", "components", "componentsProps", "fullWidth", "inputComponent", "multiline", "slotProps", "slots", "type"];
+const useUtilityClasses$d = ownerState => {
   const {
     classes,
     disableUnderline
@@ -46767,8 +47510,8 @@ const Input = /*#__PURE__*/React.forwardRef(function Input(inProps, ref) {
       slots = {},
       type = 'text'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$c);
-  const classes = useUtilityClasses$a(props);
+    other = _objectWithoutPropertiesLoose(props, _excluded$g);
+  const classes = useUtilityClasses$d(props);
   const ownerState = {
     disableUnderline
   };
@@ -46989,8 +47732,8 @@ function getInputLabelUtilityClasses(slot) {
 }
 generateUtilityClasses('MuiInputLabel', ['root', 'focused', 'disabled', 'error', 'required', 'asterisk', 'formControl', 'sizeSmall', 'shrink', 'animated', 'standard', 'filled', 'outlined']);
 
-const _excluded$b = ["disableAnimation", "margin", "shrink", "variant", "className"];
-const useUtilityClasses$9 = ownerState => {
+const _excluded$f = ["disableAnimation", "margin", "shrink", "variant", "className"];
+const useUtilityClasses$c = ownerState => {
   const {
     classes,
     formControl,
@@ -47089,7 +47832,7 @@ const InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, re
       shrink: shrinkProp,
       className
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$b);
+    other = _objectWithoutPropertiesLoose(props, _excluded$f);
   const muiFormControl = useFormControl();
   let shrink = shrinkProp;
   if (typeof shrink === 'undefined' && muiFormControl) {
@@ -47108,7 +47851,7 @@ const InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, re
     variant: fcs.variant,
     required: fcs.required
   });
-  const classes = useUtilityClasses$9(ownerState);
+  const classes = useUtilityClasses$c(ownerState);
   return /*#__PURE__*/jsx(InputLabelRoot, _extends({
     "data-shrink": shrink,
     ownerState: ownerState,
@@ -47217,8 +47960,8 @@ const getTextDecoration = ({
 };
 var getTextDecoration$1 = getTextDecoration;
 
-const _excluded$a = ["className", "color", "component", "onBlur", "onFocus", "TypographyClasses", "underline", "variant", "sx"];
-const useUtilityClasses$8 = ownerState => {
+const _excluded$e = ["className", "color", "component", "onBlur", "onFocus", "TypographyClasses", "underline", "variant", "sx"];
+const useUtilityClasses$b = ownerState => {
   const {
     classes,
     component,
@@ -47306,7 +48049,7 @@ const Link$1 = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
       variant = 'inherit',
       sx
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$a);
+    other = _objectWithoutPropertiesLoose(props, _excluded$e);
   const {
     isFocusVisibleRef,
     onBlur: handleBlurVisible,
@@ -47340,7 +48083,7 @@ const Link$1 = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
     underline,
     variant
   });
-  const classes = useUtilityClasses$8(ownerState);
+  const classes = useUtilityClasses$b(ownerState);
   return /*#__PURE__*/jsx(LinkRoot, _extends({
     color: color,
     className: clsx(classes.root, className),
@@ -47426,8 +48169,8 @@ function getListUtilityClass(slot) {
 }
 generateUtilityClasses('MuiList', ['root', 'padding', 'dense', 'subheader']);
 
-const _excluded$9 = ["children", "className", "component", "dense", "disablePadding", "subheader"];
-const useUtilityClasses$7 = ownerState => {
+const _excluded$d = ["children", "className", "component", "dense", "disablePadding", "subheader"];
+const useUtilityClasses$a = ownerState => {
   const {
     classes,
     disablePadding,
@@ -47474,7 +48217,7 @@ const List = /*#__PURE__*/React.forwardRef(function List(inProps, ref) {
       disablePadding = false,
       subheader
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$9);
+    other = _objectWithoutPropertiesLoose(props, _excluded$d);
   const context = React.useMemo(() => ({
     dense
   }), [dense]);
@@ -47483,7 +48226,7 @@ const List = /*#__PURE__*/React.forwardRef(function List(inProps, ref) {
     dense,
     disablePadding
   });
-  const classes = useUtilityClasses$7(ownerState);
+  const classes = useUtilityClasses$a(ownerState);
   return /*#__PURE__*/jsx(ListContext$1.Provider, {
     value: context,
     children: /*#__PURE__*/jsxs(ListRoot, _extends({
@@ -47541,7 +48284,13 @@ process.env.NODE_ENV !== "production" ? List.propTypes /* remove-proptypes */ =
 } : void 0;
 var List$1 = List;
 
-const _excluded$8 = ["actions", "autoFocus", "autoFocusItem", "children", "className", "disabledItemsFocusable", "disableListWrap", "onKeyDown", "variant"];
+const listItemIconClasses = generateUtilityClasses('MuiListItemIcon', ['root', 'alignItemsFlexStart']);
+var listItemIconClasses$1 = listItemIconClasses;
+
+const listItemTextClasses = generateUtilityClasses('MuiListItemText', ['root', 'multiline', 'dense', 'inset', 'primary', 'secondary']);
+var listItemTextClasses$1 = listItemTextClasses;
+
+const _excluded$c = ["actions", "autoFocus", "autoFocusItem", "children", "className", "disabledItemsFocusable", "disableListWrap", "onKeyDown", "variant"];
 function nextItem(list, item, disableListWrap) {
   if (list === item) {
     return list.firstChild;
@@ -47623,7 +48372,7 @@ const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
       onKeyDown,
       variant = 'selectedMenu'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$8);
+    other = _objectWithoutPropertiesLoose(props, _excluded$c);
   const listRef = React.useRef(null);
   const textCriteriaRef = React.useRef({
     keys: [],
@@ -47802,7 +48551,7 @@ function getPopoverUtilityClass(slot) {
 }
 generateUtilityClasses('MuiPopover', ['root', 'paper']);
 
-const _excluded$7 = ["onEntering"],
+const _excluded$b = ["onEntering"],
   _excluded2$1 = ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps"];
 function getOffsetTop(rect, vertical) {
   let offset = 0;
@@ -47832,7 +48581,7 @@ function getTransformOriginValue(transformOrigin) {
 function resolveAnchorEl(anchorEl) {
   return typeof anchorEl === 'function' ? anchorEl() : anchorEl;
 }
-const useUtilityClasses$6 = ownerState => {
+const useUtilityClasses$9 = ownerState => {
   const {
     classes
   } = ownerState;
@@ -47895,7 +48644,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
         onEntering
       } = {}
     } = props,
-    TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded$7),
+    TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded$b),
     other = _objectWithoutPropertiesLoose(props, _excluded2$1);
   const paperRef = React.useRef();
   const handlePaperRef = useForkRef(paperRef, PaperProps.ref);
@@ -47910,7 +48659,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     transitionDuration: transitionDurationProp,
     TransitionProps
   });
-  const classes = useUtilityClasses$6(ownerState);
+  const classes = useUtilityClasses$9(ownerState);
 
   // Returns the top/left offset of the position
   // to attach to on the anchor element (or body if none is provided)
@@ -48256,7 +49005,7 @@ function getMenuUtilityClass(slot) {
 }
 generateUtilityClasses('MuiMenu', ['root', 'paper', 'list']);
 
-const _excluded$6 = ["onEntering"],
+const _excluded$a = ["onEntering"],
   _excluded2 = ["autoFocus", "children", "disableAutoFocusItem", "MenuListProps", "onClose", "open", "PaperProps", "PopoverClasses", "transitionDuration", "TransitionProps", "variant"];
 const RTL_ORIGIN = {
   vertical: 'top',
@@ -48266,7 +49015,7 @@ const LTR_ORIGIN = {
   vertical: 'top',
   horizontal: 'left'
 };
-const useUtilityClasses$5 = ownerState => {
+const useUtilityClasses$8 = ownerState => {
   const {
     classes
   } = ownerState;
@@ -48323,7 +49072,7 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
       } = {},
       variant = 'selectedMenu'
     } = props,
-    TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded$6),
+    TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded$a),
     other = _objectWithoutPropertiesLoose(props, _excluded2);
   const theme = useTheme();
   const isRtl = theme.direction === 'rtl';
@@ -48337,7 +49086,7 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
     TransitionProps,
     variant
   });
-  const classes = useUtilityClasses$5(ownerState);
+  const classes = useUtilityClasses$8(ownerState);
   const autoFocusItem = autoFocus && !disableAutoFocusItem && open;
   const menuListActionsRef = React.useRef(null);
   const handleEntering = (element, isAppearing) => {
@@ -48504,14 +49253,260 @@ process.env.NODE_ENV !== "production" ? Menu.propTypes /* remove-proptypes */ =
 } : void 0;
 var Menu$1 = Menu;
 
+function getMenuItemUtilityClass(slot) {
+  return generateUtilityClass('MuiMenuItem', slot);
+}
+const menuItemClasses = generateUtilityClasses('MuiMenuItem', ['root', 'focusVisible', 'dense', 'disabled', 'divider', 'gutters', 'selected']);
+var menuItemClasses$1 = menuItemClasses;
+
+const _excluded$9 = ["autoFocus", "component", "dense", "divider", "disableGutters", "focusVisibleClassName", "role", "tabIndex", "className"];
+const overridesResolver$1 = (props, styles) => {
+  const {
+    ownerState
+  } = props;
+  return [styles.root, ownerState.dense && styles.dense, ownerState.divider && styles.divider, !ownerState.disableGutters && styles.gutters];
+};
+const useUtilityClasses$7 = ownerState => {
+  const {
+    disabled,
+    dense,
+    divider,
+    disableGutters,
+    selected,
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root', dense && 'dense', disabled && 'disabled', !disableGutters && 'gutters', divider && 'divider', selected && 'selected']
+  };
+  const composedClasses = composeClasses(slots, getMenuItemUtilityClass, classes);
+  return _extends({}, classes, composedClasses);
+};
+const MenuItemRoot = styled$1(ButtonBase$1, {
+  shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
+  name: 'MuiMenuItem',
+  slot: 'Root',
+  overridesResolver: overridesResolver$1
+})(({
+  theme,
+  ownerState
+}) => _extends({}, theme.typography.body1, {
+  display: 'flex',
+  justifyContent: 'flex-start',
+  alignItems: 'center',
+  position: 'relative',
+  textDecoration: 'none',
+  minHeight: 48,
+  paddingTop: 6,
+  paddingBottom: 6,
+  boxSizing: 'border-box',
+  whiteSpace: 'nowrap'
+}, !ownerState.disableGutters && {
+  paddingLeft: 16,
+  paddingRight: 16
+}, ownerState.divider && {
+  borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
+  backgroundClip: 'padding-box'
+}, {
+  '&:hover': {
+    textDecoration: 'none',
+    backgroundColor: (theme.vars || theme).palette.action.hover,
+    // Reset on touch devices, it doesn't add specificity
+    '@media (hover: none)': {
+      backgroundColor: 'transparent'
+    }
+  },
+  [`&.${menuItemClasses$1.selected}`]: {
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+    [`&.${menuItemClasses$1.focusVisible}`]: {
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+    }
+  },
+  [`&.${menuItemClasses$1.selected}:hover`]: {
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+    // Reset on touch devices, it doesn't add specificity
+    '@media (hover: none)': {
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
+    }
+  },
+  [`&.${menuItemClasses$1.focusVisible}`]: {
+    backgroundColor: (theme.vars || theme).palette.action.focus
+  },
+  [`&.${menuItemClasses$1.disabled}`]: {
+    opacity: (theme.vars || theme).palette.action.disabledOpacity
+  },
+  [`& + .${dividerClasses$1.root}`]: {
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1)
+  },
+  [`& + .${dividerClasses$1.inset}`]: {
+    marginLeft: 52
+  },
+  [`& .${listItemTextClasses$1.root}`]: {
+    marginTop: 0,
+    marginBottom: 0
+  },
+  [`& .${listItemTextClasses$1.inset}`]: {
+    paddingLeft: 36
+  },
+  [`& .${listItemIconClasses$1.root}`]: {
+    minWidth: 36
+  }
+}, !ownerState.dense && {
+  [theme.breakpoints.up('sm')]: {
+    minHeight: 'auto'
+  }
+}, ownerState.dense && _extends({
+  minHeight: 32,
+  // https://m2.material.io/components/menus#specs > Dense
+  paddingTop: 4,
+  paddingBottom: 4
+}, theme.typography.body2, {
+  [`& .${listItemIconClasses$1.root} svg`]: {
+    fontSize: '1.25rem'
+  }
+})));
+const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiMenuItem'
+  });
+  const {
+      autoFocus = false,
+      component = 'li',
+      dense = false,
+      divider = false,
+      disableGutters = false,
+      focusVisibleClassName,
+      role = 'menuitem',
+      tabIndex: tabIndexProp,
+      className
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$9);
+  const context = React.useContext(ListContext$1);
+  const childContext = React.useMemo(() => ({
+    dense: dense || context.dense || false,
+    disableGutters
+  }), [context.dense, dense, disableGutters]);
+  const menuItemRef = React.useRef(null);
+  useEnhancedEffect$1(() => {
+    if (autoFocus) {
+      if (menuItemRef.current) {
+        menuItemRef.current.focus();
+      } else if (process.env.NODE_ENV !== 'production') {
+        console.error('MUI: Unable to set focus to a MenuItem whose component has not been rendered.');
+      }
+    }
+  }, [autoFocus]);
+  const ownerState = _extends({}, props, {
+    dense: childContext.dense,
+    divider,
+    disableGutters
+  });
+  const classes = useUtilityClasses$7(props);
+  const handleRef = useForkRef(menuItemRef, ref);
+  let tabIndex;
+  if (!props.disabled) {
+    tabIndex = tabIndexProp !== undefined ? tabIndexProp : -1;
+  }
+  return /*#__PURE__*/jsx(ListContext$1.Provider, {
+    value: childContext,
+    children: /*#__PURE__*/jsx(MenuItemRoot, _extends({
+      ref: handleRef,
+      role: role,
+      tabIndex: tabIndex,
+      component: component,
+      focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
+      className: clsx(classes.root, className)
+    }, other, {
+      ownerState: ownerState,
+      classes: classes
+    }))
+  });
+});
+process.env.NODE_ENV !== "production" ? MenuItem.propTypes /* remove-proptypes */ = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * If `true`, the list item is focused during the first mount.
+   * Focus will also be triggered if the value changes from false to true.
+   * @default false
+   */
+  autoFocus: PropTypes.bool,
+  /**
+   * 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 component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+  /**
+   * If `true`, compact vertical padding designed for keyboard and mouse input is used.
+   * The prop defaults to the value inherited from the parent Menu component.
+   * @default false
+   */
+  dense: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, the left and right padding is removed.
+   * @default false
+   */
+  disableGutters: PropTypes.bool,
+  /**
+   * If `true`, a 1px light border is added to the bottom of the menu item.
+   * @default false
+   */
+  divider: PropTypes.bool,
+  /**
+   * This prop can help identify which element has keyboard focus.
+   * The class name will be applied when the element gains the focus through keyboard interaction.
+   * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
+   * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
+   * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
+   * if needed.
+   */
+  focusVisibleClassName: PropTypes.string,
+  /**
+   * @ignore
+   */
+  role: PropTypes /* @typescript-to-proptypes-ignore */.string,
+  /**
+   * @ignore
+   */
+  selected: PropTypes.bool,
+  /**
+   * 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]),
+  /**
+   * @default 0
+   */
+  tabIndex: PropTypes.number
+} : void 0;
+var MenuItem$1 = MenuItem;
+
 function getNativeSelectUtilityClasses(slot) {
   return generateUtilityClass('MuiNativeSelect', slot);
 }
 const nativeSelectClasses = generateUtilityClasses('MuiNativeSelect', ['root', 'select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput']);
 var nativeSelectClasses$1 = nativeSelectClasses;
 
-const _excluded$5 = ["className", "disabled", "IconComponent", "inputRef", "variant"];
-const useUtilityClasses$4 = ownerState => {
+const _excluded$8 = ["className", "disabled", "IconComponent", "inputRef", "variant"];
+const useUtilityClasses$6 = ownerState => {
   const {
     classes,
     variant,
@@ -48637,12 +49632,12 @@ const NativeSelectInput = /*#__PURE__*/React.forwardRef(function NativeSelectInp
       inputRef,
       variant = 'standard'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$5);
+    other = _objectWithoutPropertiesLoose(props, _excluded$8);
   const ownerState = _extends({}, props, {
     disabled,
     variant
   });
-  const classes = useUtilityClasses$4(ownerState);
+  const classes = useUtilityClasses$6(ownerState);
   return /*#__PURE__*/jsxs(React.Fragment, {
     children: [/*#__PURE__*/jsx(NativeSelectSelect, _extends({
       ownerState: ownerState,
@@ -48711,7 +49706,7 @@ process.env.NODE_ENV !== "production" ? NativeSelectInput.propTypes = {
 var NativeSelectInput$1 = NativeSelectInput;
 
 var _span$1;
-const _excluded$4 = ["children", "classes", "className", "label", "notched"];
+const _excluded$7 = ["children", "classes", "className", "label", "notched"];
 const NotchedOutlineRoot$1 = styled$1('fieldset')({
   textAlign: 'left',
   position: 'absolute',
@@ -48784,7 +49779,7 @@ function NotchedOutline(props) {
       label,
       notched
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$4);
+    other = _objectWithoutPropertiesLoose(props, _excluded$7);
   const withLabel = label != null && label !== '';
   const ownerState = _extends({}, props, {
     notched,
@@ -48835,8 +49830,8 @@ process.env.NODE_ENV !== "production" ? NotchedOutline.propTypes = {
   style: PropTypes.object
 } : void 0;
 
-const _excluded$3 = ["components", "fullWidth", "inputComponent", "label", "multiline", "notched", "slots", "type"];
-const useUtilityClasses$3 = ownerState => {
+const _excluded$6 = ["components", "fullWidth", "inputComponent", "label", "multiline", "notched", "slots", "type"];
+const useUtilityClasses$5 = ownerState => {
   const {
     classes
   } = ownerState;
@@ -48954,8 +49949,8 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
       slots = {},
       type = 'text'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3);
-  const classes = useUtilityClasses$3(props);
+    other = _objectWithoutPropertiesLoose(props, _excluded$6);
+  const classes = useUtilityClasses$5(props);
   const muiFormControl = useFormControl();
   const fcs = formControlState({
     props,
@@ -49169,6 +50164,716 @@ process.env.NODE_ENV !== "production" ? OutlinedInput.propTypes /* remove-propty
 OutlinedInput.muiName = 'Input';
 var OutlinedInput$1 = OutlinedInput;
 
+function getPaginationUtilityClass(slot) {
+  return generateUtilityClass('MuiPagination', slot);
+}
+generateUtilityClasses('MuiPagination', ['root', 'ul', 'outlined', 'text']);
+
+const _excluded$5 = ["boundaryCount", "componentName", "count", "defaultPage", "disabled", "hideNextButton", "hidePrevButton", "onChange", "page", "showFirstButton", "showLastButton", "siblingCount"];
+function usePagination(props = {}) {
+  // keep default values in sync with @default tags in Pagination.propTypes
+  const {
+      boundaryCount = 1,
+      componentName = 'usePagination',
+      count = 1,
+      defaultPage = 1,
+      disabled = false,
+      hideNextButton = false,
+      hidePrevButton = false,
+      onChange: handleChange,
+      page: pageProp,
+      showFirstButton = false,
+      showLastButton = false,
+      siblingCount = 1
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$5);
+  const [page, setPageState] = useControlled({
+    controlled: pageProp,
+    default: defaultPage,
+    name: componentName,
+    state: 'page'
+  });
+  const handleClick = (event, value) => {
+    if (!pageProp) {
+      setPageState(value);
+    }
+    if (handleChange) {
+      handleChange(event, value);
+    }
+  };
+
+  // https://dev.to/namirsab/comment/2050
+  const range = (start, end) => {
+    const length = end - start + 1;
+    return Array.from({
+      length
+    }, (_, i) => start + i);
+  };
+  const startPages = range(1, Math.min(boundaryCount, count));
+  const endPages = range(Math.max(count - boundaryCount + 1, boundaryCount + 1), count);
+  const siblingsStart = Math.max(Math.min(
+  // Natural start
+  page - siblingCount,
+  // Lower boundary when page is high
+  count - boundaryCount - siblingCount * 2 - 1),
+  // Greater than startPages
+  boundaryCount + 2);
+  const siblingsEnd = Math.min(Math.max(
+  // Natural end
+  page + siblingCount,
+  // Upper boundary when page is low
+  boundaryCount + siblingCount * 2 + 2),
+  // Less than endPages
+  endPages.length > 0 ? endPages[0] - 2 : count - 1);
+
+  // Basic list of items to render
+  // e.g. itemList = ['first', 'previous', 1, 'ellipsis', 4, 5, 6, 'ellipsis', 10, 'next', 'last']
+  const itemList = [...(showFirstButton ? ['first'] : []), ...(hidePrevButton ? [] : ['previous']), ...startPages,
+  // Start ellipsis
+  // eslint-disable-next-line no-nested-ternary
+  ...(siblingsStart > boundaryCount + 2 ? ['start-ellipsis'] : boundaryCount + 1 < count - boundaryCount ? [boundaryCount + 1] : []),
+  // Sibling pages
+  ...range(siblingsStart, siblingsEnd),
+  // End ellipsis
+  // eslint-disable-next-line no-nested-ternary
+  ...(siblingsEnd < count - boundaryCount - 1 ? ['end-ellipsis'] : count - boundaryCount > boundaryCount ? [count - boundaryCount] : []), ...endPages, ...(hideNextButton ? [] : ['next']), ...(showLastButton ? ['last'] : [])];
+
+  // Map the button type to its page number
+  const buttonPage = type => {
+    switch (type) {
+      case 'first':
+        return 1;
+      case 'previous':
+        return page - 1;
+      case 'next':
+        return page + 1;
+      case 'last':
+        return count;
+      default:
+        return null;
+    }
+  };
+
+  // Convert the basic item list to PaginationItem props objects
+  const items = itemList.map(item => {
+    return typeof item === 'number' ? {
+      onClick: event => {
+        handleClick(event, item);
+      },
+      type: 'page',
+      page: item,
+      selected: item === page,
+      disabled,
+      'aria-current': item === page ? 'true' : undefined
+    } : {
+      onClick: event => {
+        handleClick(event, buttonPage(item));
+      },
+      type: item,
+      page: buttonPage(item),
+      selected: false,
+      disabled: disabled || item.indexOf('ellipsis') === -1 && (item === 'next' || item === 'last' ? page >= count : page <= 1)
+    };
+  });
+  return _extends({
+    items
+  }, other);
+}
+
+function getPaginationItemUtilityClass(slot) {
+  return generateUtilityClass('MuiPaginationItem', slot);
+}
+const paginationItemClasses = generateUtilityClasses('MuiPaginationItem', ['root', 'page', 'sizeSmall', 'sizeLarge', 'text', 'textPrimary', 'textSecondary', 'outlined', 'outlinedPrimary', 'outlinedSecondary', 'rounded', 'ellipsis', 'firstLast', 'previousNext', 'focusVisible', 'disabled', 'selected', 'icon']);
+var paginationItemClasses$1 = paginationItemClasses;
+
+var FirstPageIcon = createSvgIcon( /*#__PURE__*/jsx("path", {
+  d: "M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z"
+}), 'FirstPage');
+
+var LastPageIcon = createSvgIcon( /*#__PURE__*/jsx("path", {
+  d: "M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z"
+}), 'LastPage');
+
+var NavigateBeforeIcon = createSvgIcon( /*#__PURE__*/jsx("path", {
+  d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
+}), 'NavigateBefore');
+
+var NavigateNextIcon = createSvgIcon( /*#__PURE__*/jsx("path", {
+  d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
+}), 'NavigateNext');
+
+const _excluded$4 = ["className", "color", "component", "components", "disabled", "page", "selected", "shape", "size", "slots", "type", "variant"];
+const overridesResolver = (props, styles) => {
+  const {
+    ownerState
+  } = props;
+  return [styles.root, styles[ownerState.variant], styles[`size${capitalize(ownerState.size)}`], ownerState.variant === 'text' && styles[`text${capitalize(ownerState.color)}`], ownerState.variant === 'outlined' && styles[`outlined${capitalize(ownerState.color)}`], ownerState.shape === 'rounded' && styles.rounded, ownerState.type === 'page' && styles.page, (ownerState.type === 'start-ellipsis' || ownerState.type === 'end-ellipsis') && styles.ellipsis, (ownerState.type === 'previous' || ownerState.type === 'next') && styles.previousNext, (ownerState.type === 'first' || ownerState.type === 'last') && styles.firstLast];
+};
+const useUtilityClasses$4 = ownerState => {
+  const {
+    classes,
+    color,
+    disabled,
+    selected,
+    size,
+    shape,
+    type,
+    variant
+  } = ownerState;
+  const slots = {
+    root: ['root', `size${capitalize(size)}`, variant, shape, color !== 'standard' && `${variant}${capitalize(color)}`, disabled && 'disabled', selected && 'selected', {
+      page: 'page',
+      first: 'firstLast',
+      last: 'firstLast',
+      'start-ellipsis': 'ellipsis',
+      'end-ellipsis': 'ellipsis',
+      previous: 'previousNext',
+      next: 'previousNext'
+    }[type]],
+    icon: ['icon']
+  };
+  return composeClasses(slots, getPaginationItemUtilityClass, classes);
+};
+const PaginationItemEllipsis = styled$1('div', {
+  name: 'MuiPaginationItem',
+  slot: 'Root',
+  overridesResolver
+})(({
+  theme,
+  ownerState
+}) => _extends({}, theme.typography.body2, {
+  borderRadius: 32 / 2,
+  textAlign: 'center',
+  boxSizing: 'border-box',
+  minWidth: 32,
+  padding: '0 6px',
+  margin: '0 3px',
+  color: (theme.vars || theme).palette.text.primary,
+  height: 'auto',
+  [`&.${paginationItemClasses$1.disabled}`]: {
+    opacity: (theme.vars || theme).palette.action.disabledOpacity
+  }
+}, ownerState.size === 'small' && {
+  minWidth: 26,
+  borderRadius: 26 / 2,
+  margin: '0 1px',
+  padding: '0 4px'
+}, ownerState.size === 'large' && {
+  minWidth: 40,
+  borderRadius: 40 / 2,
+  padding: '0 10px',
+  fontSize: theme.typography.pxToRem(15)
+}));
+const PaginationItemPage = styled$1(ButtonBase$1, {
+  name: 'MuiPaginationItem',
+  slot: 'Root',
+  overridesResolver
+})(({
+  theme,
+  ownerState
+}) => _extends({}, theme.typography.body2, {
+  borderRadius: 32 / 2,
+  textAlign: 'center',
+  boxSizing: 'border-box',
+  minWidth: 32,
+  height: 32,
+  padding: '0 6px',
+  margin: '0 3px',
+  color: (theme.vars || theme).palette.text.primary,
+  [`&.${paginationItemClasses$1.focusVisible}`]: {
+    backgroundColor: (theme.vars || theme).palette.action.focus
+  },
+  [`&.${paginationItemClasses$1.disabled}`]: {
+    opacity: (theme.vars || theme).palette.action.disabledOpacity
+  },
+  transition: theme.transitions.create(['color', 'background-color'], {
+    duration: theme.transitions.duration.short
+  }),
+  '&:hover': {
+    backgroundColor: (theme.vars || theme).palette.action.hover,
+    // Reset on touch devices, it doesn't add specificity
+    '@media (hover: none)': {
+      backgroundColor: 'transparent'
+    }
+  },
+  [`&.${paginationItemClasses$1.selected}`]: {
+    backgroundColor: (theme.vars || theme).palette.action.selected,
+    '&:hover': {
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selected} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: (theme.vars || theme).palette.action.selected
+      }
+    },
+    [`&.${paginationItemClasses$1.focusVisible}`]: {
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selected} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+    },
+    [`&.${paginationItemClasses$1.disabled}`]: {
+      opacity: 1,
+      color: (theme.vars || theme).palette.action.disabled,
+      backgroundColor: (theme.vars || theme).palette.action.selected
+    }
+  }
+}, ownerState.size === 'small' && {
+  minWidth: 26,
+  height: 26,
+  borderRadius: 26 / 2,
+  margin: '0 1px',
+  padding: '0 4px'
+}, ownerState.size === 'large' && {
+  minWidth: 40,
+  height: 40,
+  borderRadius: 40 / 2,
+  padding: '0 10px',
+  fontSize: theme.typography.pxToRem(15)
+}, ownerState.shape === 'rounded' && {
+  borderRadius: (theme.vars || theme).shape.borderRadius
+}), ({
+  theme,
+  ownerState
+}) => _extends({}, ownerState.variant === 'text' && {
+  [`&.${paginationItemClasses$1.selected}`]: _extends({}, ownerState.color !== 'standard' && {
+    color: (theme.vars || theme).palette[ownerState.color].contrastText,
+    backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
+    '&:hover': {
+      backgroundColor: (theme.vars || theme).palette[ownerState.color].dark,
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: (theme.vars || theme).palette[ownerState.color].main
+      }
+    },
+    [`&.${paginationItemClasses$1.focusVisible}`]: {
+      backgroundColor: (theme.vars || theme).palette[ownerState.color].dark
+    }
+  }, {
+    [`&.${paginationItemClasses$1.disabled}`]: {
+      color: (theme.vars || theme).palette.action.disabled
+    }
+  })
+}, ownerState.variant === 'outlined' && {
+  border: 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)'}`,
+  [`&.${paginationItemClasses$1.selected}`]: _extends({}, ownerState.color !== 'standard' && {
+    color: (theme.vars || theme).palette[ownerState.color].main,
+    border: `1px solid ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : alpha(theme.palette[ownerState.color].main, 0.5)}`,
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.activatedOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity),
+    '&:hover': {
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / calc(${theme.vars.palette.action.activatedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity),
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: 'transparent'
+      }
+    },
+    [`&.${paginationItemClasses$1.focusVisible}`]: {
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / calc(${theme.vars.palette.action.activatedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity)
+    }
+  }, {
+    [`&.${paginationItemClasses$1.disabled}`]: {
+      borderColor: (theme.vars || theme).palette.action.disabledBackground,
+      color: (theme.vars || theme).palette.action.disabled
+    }
+  })
+}));
+const PaginationItemPageIcon = styled$1('div', {
+  name: 'MuiPaginationItem',
+  slot: 'Icon',
+  overridesResolver: (props, styles) => styles.icon
+})(({
+  theme,
+  ownerState
+}) => _extends({
+  fontSize: theme.typography.pxToRem(20),
+  margin: '0 -8px'
+}, ownerState.size === 'small' && {
+  fontSize: theme.typography.pxToRem(18)
+}, ownerState.size === 'large' && {
+  fontSize: theme.typography.pxToRem(22)
+}));
+const PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiPaginationItem'
+  });
+  const {
+      className,
+      color = 'standard',
+      component,
+      components = {},
+      disabled = false,
+      page,
+      selected = false,
+      shape = 'circular',
+      size = 'medium',
+      slots = {},
+      type = 'page',
+      variant = 'text'
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$4);
+  const ownerState = _extends({}, props, {
+    color,
+    disabled,
+    selected,
+    shape,
+    size,
+    type,
+    variant
+  });
+  const theme = useTheme();
+  const classes = useUtilityClasses$4(ownerState);
+  const normalizedIcons = theme.direction === 'rtl' ? {
+    previous: slots.next || components.next || NavigateNextIcon,
+    next: slots.previous || components.previous || NavigateBeforeIcon,
+    last: slots.first || components.first || FirstPageIcon,
+    first: slots.last || components.last || LastPageIcon
+  } : {
+    previous: slots.previous || components.previous || NavigateBeforeIcon,
+    next: slots.next || components.next || NavigateNextIcon,
+    first: slots.first || components.first || FirstPageIcon,
+    last: slots.last || components.last || LastPageIcon
+  };
+  const Icon = normalizedIcons[type];
+  return type === 'start-ellipsis' || type === 'end-ellipsis' ? /*#__PURE__*/jsx(PaginationItemEllipsis, {
+    ref: ref,
+    ownerState: ownerState,
+    className: clsx(classes.root, className),
+    children: "\u2026"
+  }) : /*#__PURE__*/jsxs(PaginationItemPage, _extends({
+    ref: ref,
+    ownerState: ownerState,
+    component: component,
+    disabled: disabled,
+    className: clsx(classes.root, className)
+  }, other, {
+    children: [type === 'page' && page, Icon ? /*#__PURE__*/jsx(PaginationItemPageIcon, {
+      as: Icon,
+      ownerState: ownerState,
+      className: classes.icon
+    }) : null]
+  }));
+});
+process.env.NODE_ENV !== "production" ? PaginationItem.propTypes /* remove-proptypes */ = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The active color.
+   * 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/#adding-new-colors).
+   * @default 'standard'
+   */
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary', 'standard']), PropTypes.string]),
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+  /**
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `slots` prop.
+   * It's recommended to use the `slots` prop instead.
+   *
+   * @default {}
+   */
+  components: PropTypes.shape({
+    first: PropTypes.elementType,
+    last: PropTypes.elementType,
+    next: PropTypes.elementType,
+    previous: PropTypes.elementType
+  }),
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: PropTypes.bool,
+  /**
+   * The current page number.
+   */
+  page: PropTypes.node,
+  /**
+   * If `true` the pagination item is selected.
+   * @default false
+   */
+  selected: PropTypes.bool,
+  /**
+   * The shape of the pagination item.
+   * @default 'circular'
+   */
+  shape: PropTypes.oneOf(['circular', 'rounded']),
+  /**
+   * The size of the component.
+   * @default 'medium'
+   */
+  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['small', 'medium', 'large']), PropTypes.string]),
+  /**
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `components` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    first: PropTypes.elementType,
+    last: PropTypes.elementType,
+    next: PropTypes.elementType,
+    previous: PropTypes.elementType
+  }),
+  /**
+   * 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 type of pagination item.
+   * @default 'page'
+   */
+  type: PropTypes.oneOf(['end-ellipsis', 'first', 'last', 'next', 'page', 'previous', 'start-ellipsis']),
+  /**
+   * The variant to use.
+   * @default 'text'
+   */
+  variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['outlined', 'text']), PropTypes.string])
+} : void 0;
+var PaginationItem$1 = PaginationItem;
+
+const _excluded$3 = ["boundaryCount", "className", "color", "count", "defaultPage", "disabled", "getItemAriaLabel", "hideNextButton", "hidePrevButton", "onChange", "page", "renderItem", "shape", "showFirstButton", "showLastButton", "siblingCount", "size", "variant"];
+const useUtilityClasses$3 = ownerState => {
+  const {
+    classes,
+    variant
+  } = ownerState;
+  const slots = {
+    root: ['root', variant],
+    ul: ['ul']
+  };
+  return composeClasses(slots, getPaginationUtilityClass, classes);
+};
+const PaginationRoot = styled$1('nav', {
+  name: 'MuiPagination',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, styles[ownerState.variant]];
+  }
+})({});
+const PaginationUl = styled$1('ul', {
+  name: 'MuiPagination',
+  slot: 'Ul',
+  overridesResolver: (props, styles) => styles.ul
+})({
+  display: 'flex',
+  flexWrap: 'wrap',
+  alignItems: 'center',
+  padding: 0,
+  margin: 0,
+  listStyle: 'none'
+});
+function defaultGetAriaLabel(type, page, selected) {
+  if (type === 'page') {
+    return `${selected ? '' : 'Go to '}page ${page}`;
+  }
+  return `Go to ${type} page`;
+}
+const Pagination$1 = /*#__PURE__*/React.forwardRef(function Pagination(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiPagination'
+  });
+  const {
+      boundaryCount = 1,
+      className,
+      color = 'standard',
+      count = 1,
+      defaultPage = 1,
+      disabled = false,
+      getItemAriaLabel = defaultGetAriaLabel,
+      hideNextButton = false,
+      hidePrevButton = false,
+      renderItem = item => /*#__PURE__*/jsx(PaginationItem$1, _extends({}, item)),
+      shape = 'circular',
+      showFirstButton = false,
+      showLastButton = false,
+      siblingCount = 1,
+      size = 'medium',
+      variant = 'text'
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$3);
+  const {
+    items
+  } = usePagination(_extends({}, props, {
+    componentName: 'Pagination'
+  }));
+  const ownerState = _extends({}, props, {
+    boundaryCount,
+    color,
+    count,
+    defaultPage,
+    disabled,
+    getItemAriaLabel,
+    hideNextButton,
+    hidePrevButton,
+    renderItem,
+    shape,
+    showFirstButton,
+    showLastButton,
+    siblingCount,
+    size,
+    variant
+  });
+  const classes = useUtilityClasses$3(ownerState);
+  return /*#__PURE__*/jsx(PaginationRoot, _extends({
+    "aria-label": "pagination navigation",
+    className: clsx(classes.root, className),
+    ownerState: ownerState,
+    ref: ref
+  }, other, {
+    children: /*#__PURE__*/jsx(PaginationUl, {
+      className: classes.ul,
+      ownerState: ownerState,
+      children: items.map((item, index) => /*#__PURE__*/jsx("li", {
+        children: renderItem(_extends({}, item, {
+          color,
+          'aria-label': getItemAriaLabel(item.type, item.page, item.selected),
+          shape,
+          size,
+          variant
+        }))
+      }, index))
+    })
+  }));
+});
+
+// @default tags synced with default values from usePagination
+
+process.env.NODE_ENV !== "production" ? Pagination$1.propTypes /* remove-proptypes */ = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * Number of always visible pages at the beginning and end.
+   * @default 1
+   */
+  boundaryCount: integerPropType,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The active color.
+   * 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/#adding-new-colors).
+   * @default 'standard'
+   */
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary', 'standard']), PropTypes.string]),
+  /**
+   * The total number of pages.
+   * @default 1
+   */
+  count: integerPropType,
+  /**
+   * The page selected by default when the component is uncontrolled.
+   * @default 1
+   */
+  defaultPage: integerPropType,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Accepts a function which returns a string value that provides a user-friendly name for the current page.
+   * This is important for screen reader users.
+   *
+   * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
+   * @param {string} type The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous'). Defaults to 'page'.
+   * @param {number} page The page number to format.
+   * @param {bool} selected If true, the current page is selected.
+   * @returns {string}
+   */
+  getItemAriaLabel: PropTypes.func,
+  /**
+   * If `true`, hide the next-page button.
+   * @default false
+   */
+  hideNextButton: PropTypes.bool,
+  /**
+   * If `true`, hide the previous-page button.
+   * @default false
+   */
+  hidePrevButton: PropTypes.bool,
+  /**
+   * Callback fired when the page is changed.
+   *
+   * @param {React.ChangeEvent<unknown>} event The event source of the callback.
+   * @param {number} page The page selected.
+   */
+  onChange: PropTypes.func,
+  /**
+   * The current page.
+   */
+  page: integerPropType,
+  /**
+   * Render the item.
+   * @param {PaginationRenderItemParams} params The props to spread on a PaginationItem.
+   * @returns {ReactNode}
+   * @default (item) => <PaginationItem {...item} />
+   */
+  renderItem: PropTypes.func,
+  /**
+   * The shape of the pagination items.
+   * @default 'circular'
+   */
+  shape: PropTypes.oneOf(['circular', 'rounded']),
+  /**
+   * If `true`, show the first-page button.
+   * @default false
+   */
+  showFirstButton: PropTypes.bool,
+  /**
+   * If `true`, show the last-page button.
+   * @default false
+   */
+  showLastButton: PropTypes.bool,
+  /**
+   * Number of always visible pages before and after the current page.
+   * @default 1
+   */
+  siblingCount: integerPropType,
+  /**
+   * The size of the component.
+   * @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 'text'
+   */
+  variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['outlined', 'text']), PropTypes.string])
+} : void 0;
+var MUIPagination = Pagination$1;
+
 function getSelectUtilityClasses(slot) {
   return generateUtilityClass('MuiSelect', slot);
 }
@@ -50442,9 +52147,13 @@ var TextField = function (_a) {
     }, [value]);
     return (jsx(MuiTextField, __assign$1({ id: label === placeholder ? 'text-field-mui' : 'test-field-ds', variant: "outlined", name: name, label: label, value: internalValue, placeholder: label === placeholder ? undefined : placeholder, FormHelperTextProps: { component: 'div' }, InputLabelProps: { shrink: label === placeholder ? undefined : true }, onClick: function (e) { return e.stopPropagation(); }, onChange: function (e) {
             setInternalValue(e.currentTarget.value);
-            onChange(e);
+            if (onChange) {
+                onChange(e);
+            }
         }, onBlur: function (e) {
-            onBlur(e);
+            if (onBlur) {
+                onBlur(e);
+            }
         }, error: !!error, disabled: disabled, InputProps: { endAdornment: endAdornment }, inputProps: { maxLength: maxLength } }, props, { helperText: jsxs("div", __assign$1({ style: { display: 'table', width: '100%' } }, { children: [(error || props.helperText) && (jsx("div", __assign$1({ style: {
                         display: maxLength ? 'table-cell' : '',
                         float: 'left'
@@ -50461,7 +52170,7 @@ var Checkbox = function (_a) {
     }, [value]);
     return (jsxs(FormControl$1, __assign$1({ fullWidth: true }, { children: [jsx(FormControlLabel$1, { control: jsx(Box$3, { children: jsx(CheckboxMUI, __assign$1({ name: name, sx: { marginTop: '-2px' }, checked: internalValue, color: "primary", onChange: function (e) {
                             setInternalValue(e.target.checked);
-                            onChange(name, e.target.checked, true);
+                            onChange && onChange(name, e.target.checked, true);
                         } }, props)) }), label: jsx(Typography$1, __assign$1({ component: "span", sx: {
                         fontSize: '14px',
                         marginLeft: '-3px',
@@ -50477,8 +52186,19 @@ var Checkbox = function (_a) {
 };
 
 var Accordion = function (_a) {
-    var icon = _a.icon, title = _a.title, content = _a.content, summaryHeight = _a.summaryHeight, props = __rest(_a, ["icon", "title", "content", "summaryHeight"]);
-    return (jsxs(AccordionMui, __assign$1({ sx: { border: "1px solid", borderColor: 'greyLightDefaultBorder' } }, props, { children: [jsx(AccordionSummary$1, __assign$1({ expandIcon: icon, sx: {
+    var icon = _a.icon, title = _a.title, summaryHeight = _a.summaryHeight, _b = _a.expanded, expanded = _b === void 0 ? false : _b, onClick = _a.onClick, children = _a.children, props = __rest(_a, ["icon", "title", "summaryHeight", "expanded", "onClick", "children"]);
+    var _c = useState(expanded), internalExpanded = _c[0], setInternalExpanded = _c[1];
+    useEffect(function () {
+        if (expanded !== internalExpanded) {
+            setInternalExpanded(expanded);
+        }
+    }, [expanded]);
+    return (jsxs(AccordionMui, __assign$1({ sx: { border: "1px solid", borderColor: 'greyLightDefaultBorder' }, expanded: internalExpanded, onClick: function (e) {
+            if (!props.disabled) {
+                setInternalExpanded(!internalExpanded);
+                onClick && onClick(e);
+            }
+        } }, props, { children: [jsx(AccordionSummary$1, __assign$1({ expandIcon: icon, sx: {
                     fontWeight: 500,
                     fontSize: 18,
                     lineHeight: 21,
@@ -50487,7 +52207,7 @@ var Accordion = function (_a) {
                     backgroundColor: 'greyXLight',
                     borderTop: '1px solid',
                     borderColor: 'greyLightDefaultBorder'
-                } }, { children: content }))] })));
+                } }, { children: children }))] })));
 };
 
 var FontSizes = {
@@ -50561,6 +52281,34 @@ var Icon = function (_a) {
     return (jsx(Box$1, __assign$1({ component: "span", sx: getStyles() }, props, { children: jsx(FontAwesomeSvgIcon, { icon: icon, fontSize: usedFontSize }) })));
 };
 
+var Pagination = function (_a) {
+    var totalString = _a.totalString, totalPerPageString = _a.totalPerPageString, totalPages = _a.totalPages, limitsPerPage = _a.limitsPerPage, setLimit = _a.setLimit, setPage = _a.setPage, _b = _a.page, page = _b === void 0 ? 1 : _b, limit = _a.limit;
+    var _c = useState(page), internalPage = _c[0], setInternalPage = _c[1];
+    var _d = useState(limit !== null && limit !== void 0 ? limit : limitsPerPage[0]), internalLimit = _d[0], setInternalLimit = _d[1];
+    useEffect(function () {
+        if (page !== internalPage) {
+            setInternalPage(page);
+        }
+    }, [page]);
+    useEffect(function () {
+        if (limit && limit !== internalLimit) {
+            setInternalLimit(limit);
+        }
+    }, [limit]);
+    return (jsxs(Fragment$1, { children: [jsxs(Box$1, __assign$1({ display: "flex" }, { children: [jsx(Text, __assign$1({ color: "greyXDark", variant: "body1Bold", pt: "10px", pr: "16px" }, { children: totalString })), totalPages > 1 && (jsxs(Fragment$1, { children: [jsx(Divider$1, { orientation: "vertical", sx: { marginRight: '16px', color: 'greyXLight' } }), jsx(Select$1, __assign$1({ sx: { height: '32px', width: '65px' }, labelId: "select-label", id: "dac-select-label", value: internalLimit, onChange: function (event) {
+                                    var _a, _b;
+                                    setInternalLimit(Number((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value));
+                                    setLimit && setLimit(Number((_b = event === null || event === void 0 ? void 0 : event.target) === null || _b === void 0 ? void 0 : _b.value));
+                                } }, { children: limitsPerPage.map(function (limit, id) { return (jsx(MenuItem$1, __assign$1({ value: limit }, { children: limit }), id)); }) })), jsx(Text, __assign$1({ color: "greyXDark", variant: "body1Regular", pt: "6px", pl: "6px", pr: "16px" }, { children: totalPerPageString })), jsx(Divider$1, { orientation: "vertical", sx: { marginRight: '16px', color: 'greyXLight' } })] }))] })), totalPages > 1 && (jsx(Box$1, __assign$1({ display: "flex", pr: "4px" }, { children: jsx(MUIPagination, { variant: "outlined", shape: "rounded", count: totalPages, page: internalPage, onChange: function (event, value) {
+                        setInternalPage(value);
+                        setPage && setPage(value);
+                    } }) })))] }));
+};
+
+var Chip = function (props) {
+    return jsx(ChipMUI, __assign$1({}, props));
+};
+
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -50924,6 +52672,7 @@ var getFontFamilies = function (themeName) {
     return fontFamilies;
 };
 
+/* eslint-disable @typescript-eslint/restrict-plus-operands */
 var TextFieldCss = function (muiTokens) {
     return {
         MuiFormHelperText: {
@@ -51013,6 +52762,7 @@ var TextFieldCss = function (muiTokens) {
         MuiInputLabel: {
             styleOverrides: {
                 root: {
+                    fontWeight: 500,
                     '&#text-field-mui-label': {
                         fontSize: '14px',
                         lineHeight: '18px',
@@ -51053,6 +52803,9 @@ var ButtonCss = function (muiTokens) {
     return {
         MuiButton: {
             styleOverrides: {
+                '@font-face': {
+                    fontFamily: 'Roboto'
+                },
                 root: {
                     borderRadius: '4px',
                     padding: '7.5px 16px',
@@ -51103,9 +52856,6 @@ var AccordionCss = function () {
     return {
         MuiAccordionSummary: {
             styleOverrides: {
-                '@font-face': {
-                    fontFamily: 'Roboto'
-                },
                 content: {
                     paddingLeft: '12px',
                     fontWeight: 500,
@@ -51117,29 +52867,172 @@ var AccordionCss = function () {
     };
 };
 
-var useMaterialThemeCss = function (muiTokens) {
-    var muiCss = useMemo(function () {
-        return {
-            components: __assign(__assign(__assign(__assign({}, TextFieldCss(muiTokens)), ButtonCss(muiTokens)), AccordionCss()), { MuiCssBaseline: {
-                    styleOverrides: {
-                        body: {
-                            backgroundColor: 'inherit',
-                            color: 'inherit',
-                            fontWeight: 400
+var PaginationCss = function (muiTokens) {
+    return {
+        MuiPaginationItem: {
+            styleOverrides: {
+                root: {
+                    color: muiTokens.palette.blueClickable + ' !important',
+                    backgroundColor: 'white !important',
+                    fontWeight: '700 !important',
+                    outline: 'none !important',
+                    fontSize: '14px !important',
+                    borderColor: muiTokens.palette.greyMediumInactive + ' !important',
+                    '&:hover': {
+                        color: muiTokens.palette.blueClickable + ' !important',
+                        backgroundColor: 'white !important',
+                        borderColor: muiTokens.palette.greyDark + ' !important',
+                        borderRadius: '4px !important',
+                        outline: 'none !important'
+                    },
+                    '&.Mui-selected': {
+                        color: 'white !important',
+                        backgroundColor: muiTokens.palette.blueClickable + ' !important',
+                        borderRadius: '4px !important',
+                        outline: 'none !important',
+                        '&:hover': {
+                            color: 'white !important',
+                            backgroundColor: muiTokens.palette.blueClickable + ' !important',
+                            borderColor: muiTokens.palette.greyDark + ' !important',
+                            borderRadius: '4px !important',
+                            outline: 'none !important'
                         },
-                        '@font-face': {
-                            fontFamily: 'Roboto'
+                        '&:focus': {
+                            color: 'white !important',
+                            backgroundColor: muiTokens.palette.blueClickable + ' !important',
+                            borderColor: muiTokens.palette.greyDark + ' !important',
+                            borderRadius: '4px !important',
+                            outline: 'none !important'
                         }
+                    },
+                    '&.Mui-disabled': {
+                        color: muiTokens.palette.greyMediumInactive + ' !important',
+                        backgroundColor: 'white !important',
+                        borderRadius: '4px !important',
+                        outline: 'none !important'
                     }
-                }, MuiSvgIcon: {
-                    styleOverrides: {
-                        colorSuccess: {
-                            color: muiTokens.palette.success.main
+                }
+            }
+        }
+    };
+};
+
+var SelectCss = function (muiTokens) {
+    return {
+        'MuiSelect-icon': {
+            styleOverrides: {
+                root: {
+                    color: muiTokens.palette.blueClickable + ' !important'
+                }
+            }
+        }
+    };
+};
+
+var ChipCss = function (muiTokens) {
+    return {
+        MuiChip: {
+            styleOverrides: {
+                root: {
+                    '& .MuiChip-deleteIcon': {
+                        color: muiTokens.palette.blueClickable
+                    },
+                    color: muiTokens.palette.greyXDark,
+                    backgroundColor: 'transparent',
+                    borderRadius: '4px',
+                    fontWeight: muiTokens.palette.fontWeightRegular,
+                    fontSize: '14px',
+                    paddingLeft: '8px',
+                    paddingRight: '8px'
+                },
+                filled: {},
+                label: {
+                    padding: 0,
+                    lineHeight: '18px'
+                },
+                sizeSmall: {
+                    height: '24px',
+                    paddingY: '3px'
+                },
+                sizeMedium: {
+                    height: '33px',
+                    paddingY: '8px'
+                },
+                deleteIcon: {
+                    width: '12px',
+                    height: '12px',
+                    margin: 0,
+                    marginLeft: '8px'
+                },
+                colorDefault: {
+                    backgroundColor: muiTokens.palette.greyXLight,
+                    border: 'none'
+                },
+                colorPrimary: {
+                    border: '1px solid',
+                    borderColor: muiTokens.palette.greyLightDefaultBorder + ' !important'
+                },
+                colorSecondary: {
+                    border: 'none',
+                    backgroundColor: muiTokens.palette.blueClickable + ' !important',
+                    color: muiTokens.palette.white,
+                    '& .MuiChip-deleteIcon': {
+                        color: muiTokens.palette.greyXLight + ' !important',
+                        '&:hover': {
+                            color: muiTokens.palette.blueClickableHover
                         }
                     }
-                } })
-        };
-    }, [muiTokens]);
+                },
+                colorSuccess: {
+                    border: '1px solid',
+                    borderColor: muiTokens.palette.greenSuccess + ' !important',
+                    color: muiTokens.palette.greenSuccess + ' !important',
+                    fontWeight: muiTokens.typography.fontWeightBold
+                },
+                colorWarning: {
+                    border: '1px solid',
+                    borderColor: muiTokens.palette.orangeWarning + ' !important',
+                    color: muiTokens.palette.orangeWarning + ' !important',
+                    fontWeight: muiTokens.typography.fontWeightBold
+                },
+                colorInfo: {
+                    border: '1px solid',
+                    borderColor: muiTokens.palette.blueInfo + ' !important',
+                    color: muiTokens.palette.blueInfo + ' !important',
+                    fontWeight: muiTokens.typography.fontWeightBold
+                },
+                colorError: {
+                    border: '1px solid',
+                    borderColor: muiTokens.palette.redError + ' !important',
+                    color: muiTokens.palette.redError + ' !important',
+                    fontWeight: muiTokens.typography.fontWeightBold
+                }
+            }
+        }
+    };
+};
+
+var useMaterialThemeCss = function (muiTokens) {
+    var muiCss = useMemo(function () { return ({
+        components: __assign(__assign(__assign(__assign(__assign(__assign(__assign({}, TextFieldCss(muiTokens)), ButtonCss(muiTokens)), AccordionCss()), PaginationCss(muiTokens)), SelectCss(muiTokens)), ChipCss(muiTokens)), { MuiCssBaseline: {
+                styleOverrides: {
+                    body: {
+                        backgroundColor: 'inherit',
+                        color: 'inherit',
+                        fontWeight: 400
+                    },
+                    '@font-face': {
+                        fontFamily: 'Roboto'
+                    }
+                }
+            }, MuiSvgIcon: {
+                styleOverrides: {
+                    colorSuccess: {
+                        color: muiTokens.palette.success.main
+                    }
+                }
+            } })
+    }); }, [muiTokens]);
     return { muiCss: muiCss };
 };
 
@@ -51314,9 +53207,7 @@ var useMaterialThemeTokens = function (themeName) {
         palette: getMuiPalette(themeName)
     };
     var muiCss = useMaterialThemeCss(muiTokensObject).muiCss;
-    var muiTokens = useMemo(function () {
-        return __assign(__assign({}, muiTokensObject), muiCss);
-    }, [muiTokensObject, muiCss]);
+    var muiTokens = useMemo(function () { return (__assign(__assign({}, muiTokensObject), muiCss)); }, [muiTokensObject, muiCss]);
     return { muiTokens: muiTokens };
 };
 
@@ -51341,5 +53232,5 @@ var DesignSystemProvider = function (_a) {
     return (jsx(DesignSystemContext.Provider, __assign$1({ value: { isDarkTheme: isDarkTheme, themeName: themeName, toggleDarkTheme: toggleDarkTheme } }, { children: jsx(MaterialThemeProvider, { children: children }) })));
 };
 
-export { Accordion, Button, Checkbox, DesignSystemContext, DesignSystemProvider, Icon as IconProvider, Link, Text, TextField };
+export { Accordion, Button, Checkbox, Chip, DesignSystemContext, DesignSystemProvider, Icon as IconProvider, Link, Pagination, Text, TextField };
 //# sourceMappingURL=index.js.map