@groupeactual/ui-kit 0.1.8 → 0.2.0

package/dist/cjs/index.js

@@ -99,12 +99,12 @@ var css_248z = ".tag {\n  padding: 4px 8px;\n  border-radius: 4px;\n  background
 styleInject(css_248z);
 
 var ActTag = function (props) {
-    return jsxRuntime.jsx("span", __assign$1({ className: clsx({
+    return (jsxRuntime.jsx("span", __assign$1({ className: clsx({
             tag: true,
             red: props.color === 'red',
             green: props.color === 'green',
             blue: props.color === 'blue'
-        }) }, { children: props.label }));
+        }) }, { children: props.label })));
 };
 
 const common = {
@@ -5950,7 +5950,7 @@ const styleFunctionSx = unstable_createStyleFunctionSx();
 styleFunctionSx.filterProps = ['sx'];
 var defaultStyleFunctionSx = styleFunctionSx;
 
-const _excluded$G = ["sx"];
+const _excluded$K = ["sx"];
 
 const splitProps = props => {
   const result = {
@@ -5971,7 +5971,7 @@ function extendSxProp(props) {
   const {
     sx: inSx
   } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded$G);
+        other = _objectWithoutPropertiesLoose(props, _excluded$K);
 
   const {
     systemProps,
@@ -6000,7 +6000,7 @@ function extendSxProp(props) {
   });
 }
 
-const _excluded$F = ["values", "unit", "step"];
+const _excluded$J = ["values", "unit", "step"];
 
 const sortBreakpointsValues = values => {
   const breakpointsAsArray = Object.keys(values).map(key => ({
@@ -6036,7 +6036,7 @@ function createBreakpoints(breakpoints) {
     unit = 'px',
     step = 5
   } = breakpoints,
-        other = _objectWithoutPropertiesLoose(breakpoints, _excluded$F);
+        other = _objectWithoutPropertiesLoose(breakpoints, _excluded$J);
 
   const sortedValues = sortBreakpointsValues(values);
   const keys = Object.keys(sortedValues);
@@ -6128,7 +6128,7 @@ function createSpacing(spacingInput = 8) {
   return spacing;
 }
 
-const _excluded$E = ["breakpoints", "palette", "spacing", "shape"];
+const _excluded$I = ["breakpoints", "palette", "spacing", "shape"];
 
 function createTheme$1(options = {}, ...args) {
   const {
@@ -6137,7 +6137,7 @@ function createTheme$1(options = {}, ...args) {
     spacing: spacingInput,
     shape: shapeInput = {}
   } = options,
-        other = _objectWithoutPropertiesLoose(options, _excluded$E);
+        other = _objectWithoutPropertiesLoose(options, _excluded$I);
 
   const breakpoints = createBreakpoints(breakpointsInput);
   const spacing = createSpacing(spacingInput);
@@ -6190,7 +6190,7 @@ function useTheme$1(defaultTheme = systemDefaultTheme$1) {
   return useTheme$2(defaultTheme);
 }
 
-const _excluded$D = ["className", "component"];
+const _excluded$H = ["className", "component"];
 function createBox(options = {}) {
   const {
     defaultTheme,
@@ -6209,7 +6209,7 @@ function createBox(options = {}) {
       className,
       component = 'div'
     } = _extendSxProp,
-          other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$D);
+          other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$H);
 
     return /*#__PURE__*/jsxRuntime.jsx(BoxRoot, _extends({
       as: component,
@@ -6221,8 +6221,8 @@ function createBox(options = {}) {
   return Box;
 }
 
-const Box = createBox();
-process.env.NODE_ENV !== "production" ? Box.propTypes
+const Box$2 = createBox();
+process.env.NODE_ENV !== "production" ? Box$2.propTypes
 /* remove-proptypes */
 = {
   // ----------------------------- Warning --------------------------------
@@ -6246,9 +6246,9 @@ process.env.NODE_ENV !== "production" ? Box.propTypes
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
-var Box$1 = Box;
+var Box$3 = Box$2;
 
-const _excluded$C = ["variant"];
+const _excluded$G = ["variant"];
 
 function isEmpty$3(string) {
   return string.length === 0;
@@ -6264,7 +6264,7 @@ function propsToClassKey(props) {
   const {
     variant
   } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded$C);
+        other = _objectWithoutPropertiesLoose(props, _excluded$G);
 
   let classKey = variant || '';
   Object.keys(other).sort().forEach(key => {
@@ -6277,7 +6277,7 @@ function propsToClassKey(props) {
   return classKey;
 }
 
-const _excluded$B = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
+const _excluded$F = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
       _excluded2$3 = ["theme"],
       _excluded3 = ["theme"];
 
@@ -6380,7 +6380,7 @@ function createStyled(input = {}) {
       skipSx: inputSkipSx,
       overridesResolver
     } = inputOptions,
-          options = _objectWithoutPropertiesLoose(inputOptions, _excluded$B); // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
+          options = _objectWithoutPropertiesLoose(inputOptions, _excluded$F); // 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;
@@ -6952,7 +6952,7 @@ function mergeSlotProps(parameters) {
   };
 }
 
-const _excluded$A = ["elementType", "externalSlotProps", "ownerState"];
+const _excluded$E = ["elementType", "externalSlotProps", "ownerState"];
 
 /**
  * Builds the props to be passed into the slot of an unstyled component.
@@ -6969,7 +6969,7 @@ function useSlotProps(parameters) {
     externalSlotProps,
     ownerState
   } = parameters,
-        rest = _objectWithoutPropertiesLoose(parameters, _excluded$A);
+        rest = _objectWithoutPropertiesLoose(parameters, _excluded$E);
 
   const resolvedComponentsProps = resolveComponentProps(externalSlotProps, ownerState);
   const {
@@ -38539,9 +38539,9 @@ function getModalUtilityClass(slot) {
 }
 generateUtilityClasses('MuiModal', ['root', 'hidden']);
 
-const _excluded$z = ["children", "classes", "closeAfterTransition", "component", "components", "componentsProps", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "onTransitionEnter", "onTransitionExited"];
+const _excluded$D = ["children", "classes", "closeAfterTransition", "component", "components", "componentsProps", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "onTransitionEnter", "onTransitionExited"];
 
-const useUtilityClasses$o = ownerState => {
+const useUtilityClasses$s = ownerState => {
   const {
     open,
     exited,
@@ -38609,7 +38609,7 @@ const ModalUnstyled = /*#__PURE__*/React__namespace.forwardRef(function ModalUns
     onTransitionEnter,
     onTransitionExited
   } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded$z);
+        other = _objectWithoutPropertiesLoose(props, _excluded$D);
 
   const [exited, setExited] = React__namespace.useState(true);
   const modal = React__namespace.useRef({});
@@ -38687,7 +38687,7 @@ const ModalUnstyled = /*#__PURE__*/React__namespace.forwardRef(function ModalUns
     keepMounted
   });
 
-  const classes = useUtilityClasses$o(ownerState);
+  const classes = useUtilityClasses$s(ownerState);
 
   const handleEnter = () => {
     setExited(false);
@@ -38951,7 +38951,7 @@ process.env.NODE_ENV !== "production" ? ModalUnstyled.propTypes
 } : void 0;
 var ModalUnstyled$1 = ModalUnstyled;
 
-const _excluded$y = ["onChange", "maxRows", "minRows", "style", "value"];
+const _excluded$C = ["onChange", "maxRows", "minRows", "style", "value"];
 
 function getStyleValue(computedStyle, property) {
   return parseInt(computedStyle[property], 10) || 0;
@@ -38985,7 +38985,7 @@ const TextareaAutosize = /*#__PURE__*/React__namespace.forwardRef(function Texta
     style,
     value
   } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded$y);
+        other = _objectWithoutPropertiesLoose(props, _excluded$C);
 
   const {
     current: isControlled
@@ -39234,7 +39234,7 @@ function createMixins(breakpoints, mixins) {
   }, mixins);
 }
 
-const _excluded$x = ["mode", "contrastThreshold", "tonalOffset"];
+const _excluded$B = ["mode", "contrastThreshold", "tonalOffset"];
 const light = {
   // The colors used to style the text.
   text: {
@@ -39418,7 +39418,7 @@ function createPalette(palette) {
     contrastThreshold = 3,
     tonalOffset = 0.2
   } = palette,
-        other = _objectWithoutPropertiesLoose(palette, _excluded$x);
+        other = _objectWithoutPropertiesLoose(palette, _excluded$B);
 
   const primary = palette.primary || getDefaultPrimary(mode);
   const secondary = palette.secondary || getDefaultSecondary(mode);
@@ -39555,7 +39555,7 @@ const theme2 = createTheme({ palette: {
   return paletteOutput;
 }
 
-const _excluded$w = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
+const _excluded$A = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
 
 function round(value) {
   return Math.round(value * 1e5) / 1e5;
@@ -39588,7 +39588,7 @@ function createTypography(palette, typography) {
     allVariants,
     pxToRem: pxToRem2
   } = _ref,
-        other = _objectWithoutPropertiesLoose(_ref, _excluded$w);
+        other = _objectWithoutPropertiesLoose(_ref, _excluded$A);
 
   if (process.env.NODE_ENV !== 'production') {
     if (typeof fontSize !== 'number') {
@@ -39656,7 +39656,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$v = ["duration", "easing", "delay"];
+const _excluded$z = ["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 = {
@@ -39711,7 +39711,7 @@ function createTransitions(inputTransitions) {
       easing: easingOption = mergedEasing.easeInOut,
       delay = 0
     } = options,
-          other = _objectWithoutPropertiesLoose(options, _excluded$v);
+          other = _objectWithoutPropertiesLoose(options, _excluded$z);
 
     if (process.env.NODE_ENV !== 'production') {
       const isString = value => typeof value === 'string'; // IE11 support, replace with Number.isNaN
@@ -39767,7 +39767,7 @@ const zIndex = {
 };
 var zIndex$1 = zIndex;
 
-const _excluded$u = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
+const _excluded$y = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
 
 function createTheme(options = {}, ...args) {
   const {
@@ -39776,7 +39776,7 @@ function createTheme(options = {}, ...args) {
     transitions: transitionsInput = {},
     typography: typographyInput = {}
   } = options,
-        other = _objectWithoutPropertiesLoose(options, _excluded$u);
+        other = _objectWithoutPropertiesLoose(options, _excluded$y);
 
   if (options.vars) {
     throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`vars\` is a private field used for CSS variables support.
@@ -39834,11 +39834,11 @@ Please use another name.` : formatMuiErrorMessage(18));
   return muiTheme;
 }
 
-const defaultTheme = createTheme();
-var defaultTheme$1 = defaultTheme;
+const defaultTheme$1 = createTheme();
+var defaultTheme$2 = defaultTheme$1;
 
 function useTheme() {
-  const theme = useTheme$1(defaultTheme$1);
+  const theme = useTheme$1(defaultTheme$2);
 
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -39855,14 +39855,14 @@ function useThemeProps({
   return useThemeProps$1({
     props,
     name,
-    defaultTheme: defaultTheme$1
+    defaultTheme: defaultTheme$2
   });
 }
 
 const rootShouldForwardProp = prop => shouldForwardProp(prop) && prop !== 'classes';
 const slotShouldForwardProp = shouldForwardProp;
 const styled = createStyled({
-  defaultTheme: defaultTheme$1,
+  defaultTheme: defaultTheme$2,
   rootShouldForwardProp
 });
 var styled$1 = styled;
@@ -39872,7 +39872,7 @@ function getPaperUtilityClass(slot) {
 }
 generateUtilityClasses('MuiPaper', ['root', 'rounded', 'outlined', 'elevation', 'elevation0', 'elevation1', 'elevation2', 'elevation3', 'elevation4', 'elevation5', 'elevation6', 'elevation7', 'elevation8', 'elevation9', 'elevation10', 'elevation11', 'elevation12', 'elevation13', 'elevation14', 'elevation15', 'elevation16', 'elevation17', 'elevation18', 'elevation19', 'elevation20', 'elevation21', 'elevation22', 'elevation23', 'elevation24']);
 
-const _excluded$t = ["className", "component", "elevation", "square", "variant"];
+const _excluded$x = ["className", "component", "elevation", "square", "variant"];
 const getOverlayAlpha = elevation => {
   let alphaValue;
 
@@ -39885,7 +39885,7 @@ const getOverlayAlpha = elevation => {
   return (alphaValue / 100).toFixed(2);
 };
 
-const useUtilityClasses$n = ownerState => {
+const useUtilityClasses$r = ownerState => {
   const {
     square,
     elevation,
@@ -39942,7 +39942,7 @@ const Paper = /*#__PURE__*/React__namespace.forwardRef(function Paper(inProps, r
     square = false,
     variant = 'elevation'
   } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded$t);
+        other = _objectWithoutPropertiesLoose(props, _excluded$x);
 
   const ownerState = _extends({}, props, {
     component,
@@ -39951,7 +39951,7 @@ const Paper = /*#__PURE__*/React__namespace.forwardRef(function Paper(inProps, r
     variant
   });
 
-  const classes = useUtilityClasses$n(ownerState);
+  const classes = useUtilityClasses$r(ownerState);
 
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -40042,9 +40042,9 @@ function getSvgIconUtilityClass(slot) {
 }
 generateUtilityClasses('MuiSvgIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
 
-const _excluded$s = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
+const _excluded$w = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
 
-const useUtilityClasses$m = ownerState => {
+const useUtilityClasses$q = ownerState => {
   const {
     color,
     fontSize,
@@ -40112,7 +40112,7 @@ const SvgIcon = /*#__PURE__*/React__namespace.forwardRef(function SvgIcon(inProp
     titleAccess,
     viewBox = '0 0 24 24'
   } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded$s);
+        other = _objectWithoutPropertiesLoose(props, _excluded$w);
 
   const ownerState = _extends({}, props, {
     color,
@@ -40129,7 +40129,7 @@ const SvgIcon = /*#__PURE__*/React__namespace.forwardRef(function SvgIcon(inProp
     more.viewBox = viewBox;
   }
 
-  const classes = useUtilityClasses$m(ownerState);
+  const classes = useUtilityClasses$q(ownerState);
   return /*#__PURE__*/jsxRuntime.jsxs(SvgIconRoot, _extends({
     as: component,
     className: clsx(classes.root, className),
@@ -41260,6 +41260,772 @@ function getTransitionProps(props, options) {
   };
 }
 
+function getCollapseUtilityClass(slot) {
+  return generateUtilityClass('MuiCollapse', slot);
+}
+generateUtilityClasses('MuiCollapse', ['root', 'horizontal', 'vertical', 'entered', 'hidden', 'wrapper', 'wrapperInner']);
+
+const _excluded$v = ["addEndListener", "children", "className", "collapsedSize", "component", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "orientation", "style", "timeout", "TransitionComponent"];
+
+const useUtilityClasses$p = ownerState => {
+  const {
+    orientation,
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root', `${orientation}`],
+    entered: ['entered'],
+    hidden: ['hidden'],
+    wrapper: ['wrapper', `${orientation}`],
+    wrapperInner: ['wrapperInner', `${orientation}`]
+  };
+  return composeClasses(slots, getCollapseUtilityClass, classes);
+};
+
+const CollapseRoot = styled$1('div', {
+  name: 'MuiCollapse',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, styles[ownerState.orientation], ownerState.state === 'entered' && styles.entered, ownerState.state === 'exited' && !ownerState.in && ownerState.collapsedSize === '0px' && styles.hidden];
+  }
+})(({
+  theme,
+  ownerState
+}) => _extends({
+  height: 0,
+  overflow: 'hidden',
+  transition: theme.transitions.create('height')
+}, ownerState.orientation === 'horizontal' && {
+  height: 'auto',
+  width: 0,
+  transition: theme.transitions.create('width')
+}, ownerState.state === 'entered' && _extends({
+  height: 'auto',
+  overflow: 'visible'
+}, ownerState.orientation === 'horizontal' && {
+  width: 'auto'
+}), ownerState.state === 'exited' && !ownerState.in && ownerState.collapsedSize === '0px' && {
+  visibility: 'hidden'
+}));
+const CollapseWrapper = styled$1('div', {
+  name: 'MuiCollapse',
+  slot: 'Wrapper',
+  overridesResolver: (props, styles) => styles.wrapper
+})(({
+  ownerState
+}) => _extends({
+  // Hack to get children with a negative margin to not falsify the height computation.
+  display: 'flex',
+  width: '100%'
+}, ownerState.orientation === 'horizontal' && {
+  width: 'auto',
+  height: '100%'
+}));
+const CollapseWrapperInner = styled$1('div', {
+  name: 'MuiCollapse',
+  slot: 'WrapperInner',
+  overridesResolver: (props, styles) => styles.wrapperInner
+})(({
+  ownerState
+}) => _extends({
+  width: '100%'
+}, ownerState.orientation === 'horizontal' && {
+  width: 'auto',
+  height: '100%'
+}));
+/**
+ * The Collapse transition is used by the
+ * [Vertical Stepper](/material-ui/react-stepper/#vertical-stepper) StepContent component.
+ * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
+ */
+
+const Collapse = /*#__PURE__*/React__namespace.forwardRef(function Collapse(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiCollapse'
+  });
+
+  const {
+    addEndListener,
+    children,
+    className,
+    collapsedSize: collapsedSizeProp = '0px',
+    component,
+    easing,
+    in: inProp,
+    onEnter,
+    onEntered,
+    onEntering,
+    onExit,
+    onExited,
+    onExiting,
+    orientation = 'vertical',
+    style,
+    timeout = duration.standard,
+    // eslint-disable-next-line react/prop-types
+    TransitionComponent = Transition$1
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded$v);
+
+  const ownerState = _extends({}, props, {
+    orientation,
+    collapsedSize: collapsedSizeProp
+  });
+
+  const classes = useUtilityClasses$p(ownerState);
+  const theme = useTheme();
+  const timer = React__namespace.useRef();
+  const wrapperRef = React__namespace.useRef(null);
+  const autoTransitionDuration = React__namespace.useRef();
+  const collapsedSize = typeof collapsedSizeProp === 'number' ? `${collapsedSizeProp}px` : collapsedSizeProp;
+  const isHorizontal = orientation === 'horizontal';
+  const size = isHorizontal ? 'width' : 'height';
+  React__namespace.useEffect(() => {
+    return () => {
+      clearTimeout(timer.current);
+    };
+  }, []);
+  const nodeRef = React__namespace.useRef(null);
+  const handleRef = useForkRef(ref, nodeRef);
+
+  const normalizedTransitionCallback = callback => maybeIsAppearing => {
+    if (callback) {
+      const node = nodeRef.current; // onEnterXxx and onExitXxx callbacks have a different arguments.length value.
+
+      if (maybeIsAppearing === undefined) {
+        callback(node);
+      } else {
+        callback(node, maybeIsAppearing);
+      }
+    }
+  };
+
+  const getWrapperSize = () => wrapperRef.current ? wrapperRef.current[isHorizontal ? 'clientWidth' : 'clientHeight'] : 0;
+
+  const handleEnter = normalizedTransitionCallback((node, isAppearing) => {
+    if (wrapperRef.current && isHorizontal) {
+      // Set absolute position to get the size of collapsed content
+      wrapperRef.current.style.position = 'absolute';
+    }
+
+    node.style[size] = collapsedSize;
+
+    if (onEnter) {
+      onEnter(node, isAppearing);
+    }
+  });
+  const handleEntering = normalizedTransitionCallback((node, isAppearing) => {
+    const wrapperSize = getWrapperSize();
+
+    if (wrapperRef.current && isHorizontal) {
+      // After the size is read reset the position back to default
+      wrapperRef.current.style.position = '';
+    }
+
+    const {
+      duration: transitionDuration,
+      easing: transitionTimingFunction
+    } = getTransitionProps({
+      style,
+      timeout,
+      easing
+    }, {
+      mode: 'enter'
+    });
+
+    if (timeout === 'auto') {
+      const duration2 = theme.transitions.getAutoHeightDuration(wrapperSize);
+      node.style.transitionDuration = `${duration2}ms`;
+      autoTransitionDuration.current = duration2;
+    } else {
+      node.style.transitionDuration = typeof transitionDuration === 'string' ? transitionDuration : `${transitionDuration}ms`;
+    }
+
+    node.style[size] = `${wrapperSize}px`;
+    node.style.transitionTimingFunction = transitionTimingFunction;
+
+    if (onEntering) {
+      onEntering(node, isAppearing);
+    }
+  });
+  const handleEntered = normalizedTransitionCallback((node, isAppearing) => {
+    node.style[size] = 'auto';
+
+    if (onEntered) {
+      onEntered(node, isAppearing);
+    }
+  });
+  const handleExit = normalizedTransitionCallback(node => {
+    node.style[size] = `${getWrapperSize()}px`;
+
+    if (onExit) {
+      onExit(node);
+    }
+  });
+  const handleExited = normalizedTransitionCallback(onExited);
+  const handleExiting = normalizedTransitionCallback(node => {
+    const wrapperSize = getWrapperSize();
+    const {
+      duration: transitionDuration,
+      easing: transitionTimingFunction
+    } = getTransitionProps({
+      style,
+      timeout,
+      easing
+    }, {
+      mode: 'exit'
+    });
+
+    if (timeout === 'auto') {
+      // TODO: rename getAutoHeightDuration to something more generic (width support)
+      // Actually it just calculates animation duration based on size
+      const duration2 = theme.transitions.getAutoHeightDuration(wrapperSize);
+      node.style.transitionDuration = `${duration2}ms`;
+      autoTransitionDuration.current = duration2;
+    } else {
+      node.style.transitionDuration = typeof transitionDuration === 'string' ? transitionDuration : `${transitionDuration}ms`;
+    }
+
+    node.style[size] = collapsedSize;
+    node.style.transitionTimingFunction = transitionTimingFunction;
+
+    if (onExiting) {
+      onExiting(node);
+    }
+  });
+
+  const handleAddEndListener = next => {
+    if (timeout === 'auto') {
+      timer.current = setTimeout(next, autoTransitionDuration.current || 0);
+    }
+
+    if (addEndListener) {
+      // Old call signature before `react-transition-group` implemented `nodeRef`
+      addEndListener(nodeRef.current, next);
+    }
+  };
+
+  return /*#__PURE__*/jsxRuntime.jsx(TransitionComponent, _extends({
+    in: inProp,
+    onEnter: handleEnter,
+    onEntered: handleEntered,
+    onEntering: handleEntering,
+    onExit: handleExit,
+    onExited: handleExited,
+    onExiting: handleExiting,
+    addEndListener: handleAddEndListener,
+    nodeRef: nodeRef,
+    timeout: timeout === 'auto' ? null : timeout
+  }, other, {
+    children: (state, childProps) => /*#__PURE__*/jsxRuntime.jsx(CollapseRoot, _extends({
+      as: component,
+      className: clsx(classes.root, className, {
+        'entered': classes.entered,
+        'exited': !inProp && collapsedSize === '0px' && classes.hidden
+      }[state]),
+      style: _extends({
+        [isHorizontal ? 'minWidth' : 'minHeight']: collapsedSize
+      }, style),
+      ownerState: _extends({}, ownerState, {
+        state
+      }),
+      ref: handleRef
+    }, childProps, {
+      children: /*#__PURE__*/jsxRuntime.jsx(CollapseWrapper, {
+        ownerState: _extends({}, ownerState, {
+          state
+        }),
+        className: classes.wrapper,
+        ref: wrapperRef,
+        children: /*#__PURE__*/jsxRuntime.jsx(CollapseWrapperInner, {
+          ownerState: _extends({}, ownerState, {
+            state
+          }),
+          className: classes.wrapperInner,
+          children: children
+        })
+      })
+    }))
+  }));
+});
+process.env.NODE_ENV !== "production" ? Collapse.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"     |
+  // ----------------------------------------------------------------------
+
+  /**
+   * Add a custom transition end trigger. Called with the transitioning DOM
+   * node and a done callback. Allows for more fine grained transition end
+   * logic. Note: Timeouts are still used as a fallback if provided.
+   */
+  addEndListener: PropTypes.func,
+
+  /**
+   * The content node to be collapsed.
+   */
+  children: PropTypes.node,
+
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+
+  /**
+   * The width (horizontal) or height (vertical) of the container when collapsed.
+   * @default '0px'
+   */
+  collapsedSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: elementTypeAcceptingRef$1,
+
+  /**
+   * The transition timing function.
+   * You may specify a single easing or a object containing enter and exit values.
+   */
+  easing: PropTypes.oneOfType([PropTypes.shape({
+    enter: PropTypes.string,
+    exit: PropTypes.string
+  }), PropTypes.string]),
+
+  /**
+   * If `true`, the component will transition in.
+   */
+  in: PropTypes.bool,
+
+  /**
+   * @ignore
+   */
+  onEnter: PropTypes.func,
+
+  /**
+   * @ignore
+   */
+  onEntered: PropTypes.func,
+
+  /**
+   * @ignore
+   */
+  onEntering: PropTypes.func,
+
+  /**
+   * @ignore
+   */
+  onExit: PropTypes.func,
+
+  /**
+   * @ignore
+   */
+  onExited: PropTypes.func,
+
+  /**
+   * @ignore
+   */
+  onExiting: PropTypes.func,
+
+  /**
+   * The transition orientation.
+   * @default 'vertical'
+   */
+  orientation: PropTypes.oneOf(['horizontal', 'vertical']),
+
+  /**
+   * @ignore
+   */
+  style: PropTypes.object,
+
+  /**
+   * 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 duration for the transition, in milliseconds.
+   * You may specify a single timeout for all transitions, or individually with an object.
+   *
+   * Set to 'auto' to automatically calculate transition time based on height.
+   * @default duration.standard
+   */
+  timeout: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.shape({
+    appear: PropTypes.number,
+    enter: PropTypes.number,
+    exit: PropTypes.number
+  })])
+} : void 0;
+Collapse.muiSupportAuto = true;
+var Collapse$1 = Collapse;
+
+/**
+ * @ignore - internal component.
+ * @type {React.Context<{} | {expanded: boolean, disabled: boolean, toggle: () => void}>}
+ */
+
+const AccordionContext = /*#__PURE__*/React__namespace.createContext({});
+
+if (process.env.NODE_ENV !== 'production') {
+  AccordionContext.displayName = 'AccordionContext';
+}
+
+var AccordionContext$1 = AccordionContext;
+
+function getAccordionUtilityClass(slot) {
+  return generateUtilityClass('MuiAccordion', slot);
+}
+const accordionClasses = generateUtilityClasses('MuiAccordion', ['root', 'rounded', 'expanded', 'disabled', 'gutters', 'region']);
+var accordionClasses$1 = accordionClasses;
+
+const _excluded$u = ["children", "className", "defaultExpanded", "disabled", "disableGutters", "expanded", "onChange", "square", "TransitionComponent", "TransitionProps"];
+
+const useUtilityClasses$o = ownerState => {
+  const {
+    classes,
+    square,
+    expanded,
+    disabled,
+    disableGutters
+  } = ownerState;
+  const slots = {
+    root: ['root', !square && 'rounded', expanded && 'expanded', disabled && 'disabled', !disableGutters && 'gutters'],
+    region: ['region']
+  };
+  return composeClasses(slots, getAccordionUtilityClass, classes);
+};
+
+const AccordionRoot = styled$1(Paper$1, {
+  name: 'MuiAccordion',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [{
+      [`& .${accordionClasses$1.region}`]: styles.region
+    }, styles.root, !ownerState.square && styles.rounded, !ownerState.disableGutters && styles.gutters];
+  }
+})(({
+  theme
+}) => {
+  const transition = {
+    duration: theme.transitions.duration.shortest
+  };
+  return {
+    position: 'relative',
+    transition: theme.transitions.create(['margin'], transition),
+    overflowAnchor: 'none',
+    // Keep the same scrolling position
+    '&:before': {
+      position: 'absolute',
+      left: 0,
+      top: -1,
+      right: 0,
+      height: 1,
+      content: '""',
+      opacity: 1,
+      backgroundColor: (theme.vars || theme).palette.divider,
+      transition: theme.transitions.create(['opacity', 'background-color'], transition)
+    },
+    '&:first-of-type': {
+      '&:before': {
+        display: 'none'
+      }
+    },
+    [`&.${accordionClasses$1.expanded}`]: {
+      '&:before': {
+        opacity: 0
+      },
+      '&:first-of-type': {
+        marginTop: 0
+      },
+      '&:last-of-type': {
+        marginBottom: 0
+      },
+      '& + &': {
+        '&:before': {
+          display: 'none'
+        }
+      }
+    },
+    [`&.${accordionClasses$1.disabled}`]: {
+      backgroundColor: (theme.vars || theme).palette.action.disabledBackground
+    }
+  };
+}, ({
+  theme,
+  ownerState
+}) => _extends({}, !ownerState.square && {
+  borderRadius: 0,
+  '&:first-of-type': {
+    borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
+    borderTopRightRadius: (theme.vars || theme).shape.borderRadius
+  },
+  '&:last-of-type': {
+    borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
+    borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
+    // Fix a rendering issue on Edge
+    '@supports (-ms-ime-align: auto)': {
+      borderBottomLeftRadius: 0,
+      borderBottomRightRadius: 0
+    }
+  }
+}, !ownerState.disableGutters && {
+  [`&.${accordionClasses$1.expanded}`]: {
+    margin: '16px 0'
+  }
+}));
+const Accordion = /*#__PURE__*/React__namespace.forwardRef(function Accordion(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiAccordion'
+  });
+
+  const {
+    children: childrenProp,
+    className,
+    defaultExpanded = false,
+    disabled = false,
+    disableGutters = false,
+    expanded: expandedProp,
+    onChange,
+    square = false,
+    TransitionComponent = Collapse$1,
+    TransitionProps
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded$u);
+
+  const [expanded, setExpandedState] = useControlled({
+    controlled: expandedProp,
+    default: defaultExpanded,
+    name: 'Accordion',
+    state: 'expanded'
+  });
+  const handleChange = React__namespace.useCallback(event => {
+    setExpandedState(!expanded);
+
+    if (onChange) {
+      onChange(event, !expanded);
+    }
+  }, [expanded, onChange, setExpandedState]);
+  const [summary, ...children] = React__namespace.Children.toArray(childrenProp);
+  const contextValue = React__namespace.useMemo(() => ({
+    expanded,
+    disabled,
+    disableGutters,
+    toggle: handleChange
+  }), [expanded, disabled, disableGutters, handleChange]);
+
+  const ownerState = _extends({}, props, {
+    square,
+    disabled,
+    disableGutters,
+    expanded
+  });
+
+  const classes = useUtilityClasses$o(ownerState);
+  return /*#__PURE__*/jsxRuntime.jsxs(AccordionRoot, _extends({
+    className: clsx(classes.root, className),
+    ref: ref,
+    ownerState: ownerState,
+    square: square
+  }, other, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(AccordionContext$1.Provider, {
+      value: contextValue,
+      children: summary
+    }), /*#__PURE__*/jsxRuntime.jsx(TransitionComponent, _extends({
+      in: expanded,
+      timeout: "auto"
+    }, TransitionProps, {
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        "aria-labelledby": summary.props.id,
+        id: summary.props['aria-controls'],
+        role: "region",
+        className: classes.region,
+        children: children
+      })
+    }))]
+  }));
+});
+process.env.NODE_ENV !== "production" ? Accordion.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 content of the component.
+   */
+  children: chainPropTypes(PropTypes.node.isRequired, props => {
+    const summary = React__namespace.Children.toArray(props.children)[0];
+
+    if (reactIs.exports.isFragment(summary)) {
+      return new Error("MUI: The Accordion doesn't accept a Fragment as a child. " + 'Consider providing an array instead.');
+    }
+
+    if (! /*#__PURE__*/React__namespace.isValidElement(summary)) {
+      return new Error('MUI: Expected the first child of Accordion to be a valid element.');
+    }
+
+    return null;
+  }),
+
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+
+  /**
+   * If `true`, expands the accordion by default.
+   * @default false
+   */
+  defaultExpanded: PropTypes.bool,
+
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * If `true`, it removes the margin between two expanded accordion items and the increase of height.
+   * @default false
+   */
+  disableGutters: PropTypes.bool,
+
+  /**
+   * If `true`, expands the accordion, otherwise collapse it.
+   * Setting this prop enables control over the accordion.
+   */
+  expanded: PropTypes.bool,
+
+  /**
+   * Callback fired when the expand/collapse state is changed.
+   *
+   * @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event.
+   * @param {boolean} expanded The `expanded` state of the accordion.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * If `true`, rounded corners are disabled.
+   * @default false
+   */
+  square: 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]),
+
+  /**
+   * The component used for the transition.
+   * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+   * @default Collapse
+   */
+  TransitionComponent: PropTypes.elementType,
+
+  /**
+   * Props applied to the transition element.
+   * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
+   */
+  TransitionProps: PropTypes.object
+} : void 0;
+var Accordion$1 = Accordion;
+
+function getAccordionDetailsUtilityClass(slot) {
+  return generateUtilityClass('MuiAccordionDetails', slot);
+}
+generateUtilityClasses('MuiAccordionDetails', ['root']);
+
+const _excluded$t = ["className"];
+
+const useUtilityClasses$n = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root']
+  };
+  return composeClasses(slots, getAccordionDetailsUtilityClass, classes);
+};
+
+const AccordionDetailsRoot = styled$1('div', {
+  name: 'MuiAccordionDetails',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(({
+  theme
+}) => ({
+  padding: theme.spacing(1, 2, 2)
+}));
+const AccordionDetails = /*#__PURE__*/React__namespace.forwardRef(function AccordionDetails(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiAccordionDetails'
+  });
+
+  const {
+    className
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded$t);
+
+  const ownerState = props;
+  const classes = useUtilityClasses$n(ownerState);
+  return /*#__PURE__*/jsxRuntime.jsx(AccordionDetailsRoot, _extends({
+    className: clsx(classes.root, className),
+    ref: ref,
+    ownerState: ownerState
+  }, other));
+});
+process.env.NODE_ENV !== "production" ? AccordionDetails.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 content of the component.
+   */
+  children: PropTypes.node,
+
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+
+  /**
+   * @ignore
+   */
+  className: 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])
+} : void 0;
+var AccordionDetails$1 = AccordionDetails;
+
 function Ripple(props) {
   const {
     className,
@@ -41353,7 +42119,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$r = ["center", "classes", "className"];
+const _excluded$s = ["center", "classes", "className"];
 
 let _ = t => t,
     _t,
@@ -41483,7 +42249,7 @@ const TouchRipple = /*#__PURE__*/React__namespace.forwardRef(function TouchRippl
     classes = {},
     className
   } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded$r);
+        other = _objectWithoutPropertiesLoose(props, _excluded$s);
 
   const [ripples, setRipples] = React__namespace.useState([]);
   const nextKey = React__namespace.useRef(0);
@@ -41691,9 +42457,9 @@ function getButtonBaseUtilityClass(slot) {
 const buttonBaseClasses = generateUtilityClasses('MuiButtonBase', ['root', 'disabled', 'focusVisible']);
 var buttonBaseClasses$1 = buttonBaseClasses;
 
-const _excluded$q = ["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 _excluded$r = ["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$l = ownerState => {
+const useUtilityClasses$m = ownerState => {
   const {
     disabled,
     focusVisible,
@@ -41798,7 +42564,7 @@ const ButtonBase = /*#__PURE__*/React__namespace.forwardRef(function ButtonBase(
     touchRippleRef,
     type
   } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded$q);
+        other = _objectWithoutPropertiesLoose(props, _excluded$r);
 
   const buttonRef = React__namespace.useRef(null);
   const rippleRef = React__namespace.useRef(null);
@@ -41995,7 +42761,7 @@ const ButtonBase = /*#__PURE__*/React__namespace.forwardRef(function ButtonBase(
     focusVisible
   });
 
-  const classes = useUtilityClasses$l(ownerState);
+  const classes = useUtilityClasses$m(ownerState);
   return /*#__PURE__*/jsxRuntime.jsxs(ButtonBaseRoot, _extends({
     as: ComponentProp,
     className: clsx(classes.root, className),
@@ -42223,6 +42989,209 @@ process.env.NODE_ENV !== "production" ? ButtonBase.propTypes
 } : void 0;
 var ButtonBase$1 = ButtonBase;
 
+function getAccordionSummaryUtilityClass(slot) {
+  return generateUtilityClass('MuiAccordionSummary', slot);
+}
+const accordionSummaryClasses = generateUtilityClasses('MuiAccordionSummary', ['root', 'expanded', 'focusVisible', 'disabled', 'gutters', 'contentGutters', 'content', 'expandIconWrapper']);
+var accordionSummaryClasses$1 = accordionSummaryClasses;
+
+const _excluded$q = ["children", "className", "expandIcon", "focusVisibleClassName", "onClick"];
+
+const useUtilityClasses$l = ownerState => {
+  const {
+    classes,
+    expanded,
+    disabled,
+    disableGutters
+  } = ownerState;
+  const slots = {
+    root: ['root', expanded && 'expanded', disabled && 'disabled', !disableGutters && 'gutters'],
+    focusVisible: ['focusVisible'],
+    content: ['content', expanded && 'expanded', !disableGutters && 'contentGutters'],
+    expandIconWrapper: ['expandIconWrapper', expanded && 'expanded']
+  };
+  return composeClasses(slots, getAccordionSummaryUtilityClass, classes);
+};
+
+const AccordionSummaryRoot = styled$1(ButtonBase$1, {
+  name: 'MuiAccordionSummary',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(({
+  theme,
+  ownerState
+}) => {
+  const transition = {
+    duration: theme.transitions.duration.shortest
+  };
+  return _extends({
+    display: 'flex',
+    minHeight: 48,
+    padding: theme.spacing(0, 2),
+    transition: theme.transitions.create(['min-height', 'background-color'], transition),
+    [`&.${accordionSummaryClasses$1.focusVisible}`]: {
+      backgroundColor: (theme.vars || theme).palette.action.focus
+    },
+    [`&.${accordionSummaryClasses$1.disabled}`]: {
+      opacity: (theme.vars || theme).palette.action.disabledOpacity
+    },
+    [`&:hover:not(.${accordionSummaryClasses$1.disabled})`]: {
+      cursor: 'pointer'
+    }
+  }, !ownerState.disableGutters && {
+    [`&.${accordionSummaryClasses$1.expanded}`]: {
+      minHeight: 64
+    }
+  });
+});
+const AccordionSummaryContent = styled$1('div', {
+  name: 'MuiAccordionSummary',
+  slot: 'Content',
+  overridesResolver: (props, styles) => styles.content
+})(({
+  theme,
+  ownerState
+}) => _extends({
+  display: 'flex',
+  flexGrow: 1,
+  margin: '12px 0'
+}, !ownerState.disableGutters && {
+  transition: theme.transitions.create(['margin'], {
+    duration: theme.transitions.duration.shortest
+  }),
+  [`&.${accordionSummaryClasses$1.expanded}`]: {
+    margin: '20px 0'
+  }
+}));
+const AccordionSummaryExpandIconWrapper = styled$1('div', {
+  name: 'MuiAccordionSummary',
+  slot: 'ExpandIconWrapper',
+  overridesResolver: (props, styles) => styles.expandIconWrapper
+})(({
+  theme
+}) => ({
+  display: 'flex',
+  color: (theme.vars || theme).palette.action.active,
+  transform: 'rotate(0deg)',
+  transition: theme.transitions.create('transform', {
+    duration: theme.transitions.duration.shortest
+  }),
+  [`&.${accordionSummaryClasses$1.expanded}`]: {
+    transform: 'rotate(180deg)'
+  }
+}));
+const AccordionSummary = /*#__PURE__*/React__namespace.forwardRef(function AccordionSummary(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiAccordionSummary'
+  });
+
+  const {
+    children,
+    className,
+    expandIcon,
+    focusVisibleClassName,
+    onClick
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded$q);
+
+  const {
+    disabled = false,
+    disableGutters,
+    expanded,
+    toggle
+  } = React__namespace.useContext(AccordionContext$1);
+
+  const handleChange = event => {
+    if (toggle) {
+      toggle(event);
+    }
+
+    if (onClick) {
+      onClick(event);
+    }
+  };
+
+  const ownerState = _extends({}, props, {
+    expanded,
+    disabled,
+    disableGutters
+  });
+
+  const classes = useUtilityClasses$l(ownerState);
+  return /*#__PURE__*/jsxRuntime.jsxs(AccordionSummaryRoot, _extends({
+    focusRipple: false,
+    disableRipple: true,
+    disabled: disabled,
+    component: "div",
+    "aria-expanded": expanded,
+    className: clsx(classes.root, className),
+    focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
+    onClick: handleChange,
+    ref: ref,
+    ownerState: ownerState
+  }, other, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(AccordionSummaryContent, {
+      className: classes.content,
+      ownerState: ownerState,
+      children: children
+    }), expandIcon && /*#__PURE__*/jsxRuntime.jsx(AccordionSummaryExpandIconWrapper, {
+      className: classes.expandIconWrapper,
+      ownerState: ownerState,
+      children: expandIcon
+    })]
+  }));
+});
+process.env.NODE_ENV !== "production" ? AccordionSummary.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 content of the component.
+   */
+  children: PropTypes.node,
+
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+
+  /**
+   * The icon to display as the expand indicator.
+   */
+  expandIcon: PropTypes.node,
+
+  /**
+   * 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
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * 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])
+} : void 0;
+var AccordionSummary$1 = AccordionSummary;
+
 function getTypographyUtilityClass(slot) {
   return generateUtilityClass('MuiTypography', slot);
 }
@@ -42469,7 +43438,7 @@ function useFormControl() {
 
 function GlobalStyles(props) {
   return /*#__PURE__*/jsxRuntime.jsx(GlobalStyles$1, _extends({}, props, {
-    defaultTheme: defaultTheme$1
+    defaultTheme: defaultTheme$2
   }));
 }
 
@@ -43655,6 +44624,38 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes
 } : void 0;
 var Backdrop$1 = Backdrop;
 
+const defaultTheme = createTheme();
+const Box = createBox({
+  defaultTheme,
+  defaultClassName: 'MuiBox-root',
+  generateClassName: ClassNameGenerator$1.generate
+});
+process.env.NODE_ENV !== "production" ? Box.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,
+
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: 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])
+} : void 0;
+var Box$1 = Box;
+
 function getButtonUtilityClass(slot) {
   return generateUtilityClass('MuiButton', slot);
 }
@@ -50421,6 +51422,7 @@ var ActButton = styled$1(Button$1)(function (_a) {
     var theme = _a.theme;
     return ({
         color: theme.palette.blueClickable,
+        // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
         border: "1px solid ".concat(theme.palette.greyLightBorder),
         borderRadius: 4,
         fontWeight: theme.typography.fontWeightBold,
@@ -50440,23 +51442,31 @@ var TextInput = function (_a) {
     }, [value]);
     return (jsxRuntime.jsx(TextField$1, __assign$1({ variant: "standard", name: name, label: label, value: internalValue, onClick: function (e) { return e.stopPropagation(); }, InputProps: {
             endAdornment: endAdornment
-        }, onChange: function (e) { return setInternalValue(e.currentTarget.value); }, onBlur: function (e) {
-            onBlur(e);
+        }, onChange: function (e) {
+            setInternalValue(e.currentTarget.value);
             onChange(e);
+        }, onBlur: function (e) {
+            onBlur(e);
         }, error: !!error, helperText: error !== null && error !== void 0 ? error : '', disabled: disabled }, props)));
 };
 
 var Checkbox = function (_a) {
-    var name = _a.name, value = _a.value, label = _a.label, sx = _a.sx;
+    var name = _a.name, value = _a.value, error = _a.error, label = _a.label, onChange = _a.onChange, sx = _a.sx;
     var _b = React.useState(value), internalValue = _b[0], setInternalValue = _b[1];
     React.useEffect(function () {
         if (value !== internalValue) {
             setInternalValue(value);
         }
     }, [value]);
-    return (jsxRuntime.jsx(FormControl$1, __assign$1({ fullWidth: true }, { children: jsxRuntime.jsx(FormControlLabel$1, { sx: { display: 'table' }, control: jsxRuntime.jsx(Box$1, __assign$1({ sx: { display: 'table-cell' } }, { children: jsxRuntime.jsx(CheckboxMUI, { name: name, sx: { marginTop: -0.5 }, checked: internalValue, color: "primary", onChange: function (e) {
-                        setInternalValue(e.target.checked);
-                    } }) })), label: jsxRuntime.jsx(Typography$1, __assign$1({ sx: sx }, { children: label })) }) })));
+    return (jsxRuntime.jsxs(FormControl$1, __assign$1({ fullWidth: true }, { children: [jsxRuntime.jsx(FormControlLabel$1, { sx: { display: 'table' }, control: jsxRuntime.jsx(Box$3, __assign$1({ sx: { display: 'table-cell' } }, { children: jsxRuntime.jsx(CheckboxMUI, { name: name, sx: { marginTop: -0.5 }, checked: internalValue, color: "primary", onChange: function (e) {
+                            setInternalValue(e.target.checked);
+                            onChange(name, e.target.checked, true);
+                        } }) })), label: jsxRuntime.jsx(Typography$1, __assign$1({ sx: sx }, { children: label })) }), error && (jsxRuntime.jsx(Typography$1, __assign$1({ sx: {
+                    marginTop: -1,
+                    color: '#B80025',
+                    fontWeight: 400,
+                    fontSize: '10px'
+                } }, { children: error })))] })));
 };
 
 /******************************************************************************
@@ -50486,13 +51496,15 @@ var __assign = function() {
 };
 
 var fontSizes$1 = {
-	caption: "10px",
-	body2: "12px",
+	caption: "11px",
+	body2: "13px",
 	body1: "14px",
 	subtitle2: "18px",
 	subtitle1: "24px",
 	h2: "29px",
-	h1: "35px"
+	h1: "35px",
+	bigNumber: "42px",
+	title2: "55px"
 };
 var fontWeights = {
 	light: "300",
@@ -50521,12 +51533,16 @@ var colors$1 = {
 		primary: "#272727",
 		secondary: "#545352"
 	},
+	black: "#000000",
+	white: "#FFFFFF",
 	red: "red",
 	green: "green",
 	blueClickable: "#136CAC",
 	greyDark: "#545352",
 	greyXDark: "#272727",
-	greyLightBorder: "#CBCBCB"
+	defaultBorder: "#CBCBCB",
+	greyLightBorder: "#F0F0F0",
+	redLight: "rgba(255, 0, 0, 0.04)"
 };
 var defaultTokens = {
 	fontSizes: fontSizes$1,
@@ -50599,6 +51615,100 @@ var useThemeTokens = function (themeName) {
     return { themeName: themeName, tokens: tokens, materialUIThemeTokens: materialUIThemeTokens };
 };
 
+var ActAccordion = function (_a) {
+    var icon = _a.icon, title = _a.title, content = _a.content, summaryHeight = _a.summaryHeight;
+    var tokens = useThemeTokens('lucie').tokens;
+    return (jsxRuntime.jsxs(Accordion$1, __assign$1({ sx: { border: "1px solid ".concat(tokens.colors.defaultBorder) } }, { children: [jsxRuntime.jsx(AccordionSummary$1, __assign$1({ expandIcon: icon, sx: {
+                    height: summaryHeight || 60
+                } }, { children: title })), jsxRuntime.jsx(AccordionDetails$1, __assign$1({ sx: {
+                    bgcolor: tokens.colors.greyLightBorder,
+                    borderTop: '1px solid #CBCBCB'
+                } }, { children: content }))] })));
+};
+
+// eslint-disable-next-line react/display-name
+var FontAwesomeSvgIcon = React.forwardRef(function (_a, ref) {
+    var icon = _a.icon, fontSize = _a.fontSize;
+    var _b = icon.icon, width = _b[0], height = _b[1], svgPathData = _b[4];
+    return (jsxRuntime.jsx(SvgIcon$1, __assign$1({ ref: ref, viewBox: "0 0 ".concat(width, " ").concat(height), sx: {
+            fontSize: fontSize
+        } }, { children: typeof svgPathData === 'string' ? (jsxRuntime.jsx("path", { d: svgPathData })) : (
+        /**
+         * A multi-path Font Awesome icon seems to imply a duotune icon. The 0th path seems to
+         * be the faded element (referred to as the "secondary" path in the Font Awesome docs)
+         * of a duotone icon. 40% is the default opacity.
+         *
+         * @see https://fontawesome.com/how-to-use/on-the-web/styling/duotone-icons#changing-opacity
+         */
+        svgPathData.map(function (d, i) { return (jsxRuntime.jsx("path", { style: { opacity: i === 0 ? 0.4 : 1 }, d: d }, i)); })) })));
+});
+var IconProvider = function (_a) {
+    var variant = _a.variant, icon = _a.icon, color = _a.color, size = _a.size;
+    var getFontSize = function () {
+        if (variant === 'roundedIcon') {
+            return '1.5rem';
+        }
+        if (variant === 'smallRoundedIcon') {
+            return '0.9rem';
+        }
+        switch (size) {
+            case 'xxs':
+                return '.8rem';
+            case 'xs':
+                return '1rem';
+            case 'm':
+                return '1.5rem';
+            case 'lg':
+                return '1.8rem';
+            case 'xl':
+                return '2.2rem';
+            case 'xxl':
+                return '4rem';
+            default:
+                return '1.2rem';
+        }
+    };
+    var getStyles = function () {
+        switch (variant) {
+            case 'roundedIcon':
+                return {
+                    color: 'actual.main',
+                    backgroundColor: 'actual.light',
+                    borderRadius: '100px',
+                    overflow: 'visible',
+                    height: 50,
+                    width: 50,
+                    display: 'flex',
+                    fontSize: '1.5rem',
+                    justifyContent: 'center',
+                    alignItems: 'center'
+                };
+            case 'smallRoundedIcon':
+                return {
+                    color: 'actual.main',
+                    backgroundColor: 'actual.light',
+                    borderRadius: '100px',
+                    overflow: 'visible',
+                    height: 30,
+                    width: 30,
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center'
+                };
+            default:
+                return {
+                    color: color !== null && color !== void 0 ? color : 'primary.main',
+                    width: getFontSize(),
+                    height: getFontSize(),
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    justifyContent: 'center'
+                };
+        }
+    };
+    return (jsxRuntime.jsx(Box$1, __assign$1({ component: "span", sx: getStyles() }, { children: jsxRuntime.jsx(FontAwesomeSvgIcon, { icon: icon, fontSize: getFontSize() }) })));
+};
+
 var DesignSystemContext = React.createContext({
     isDarkTheme: false,
     themeName: 'default',
@@ -50620,6 +51730,7 @@ var DesignSystemProvider = function (_a) {
     return (jsxRuntime.jsx(DesignSystemContext.Provider, __assign$1({ value: { isDarkTheme: isDarkTheme, themeName: themeName, toggleDarkTheme: toggleDarkTheme } }, { children: jsxRuntime.jsx(MaterialThemeProvider, { children: children }) })));
 };
 
+exports.ActAccordion = ActAccordion;
 exports.ActButton = ActButton;
 exports.ActCheckbox = Checkbox;
 exports.ActHeading = ActHeading;
@@ -50628,4 +51739,5 @@ exports.ActText = ActText;
 exports.ActTextInput = TextInput;
 exports.DesignSystemContext = DesignSystemContext;
 exports.DesignSystemProvider = DesignSystemProvider;
+exports.IconProvider = IconProvider;
 //# sourceMappingURL=index.js.map